refactor(frontend): migrate off deprecated Ant Design 6 props

The repo's type-aware deprecation sweep (eslint.deprecated.config.js) reported fourteen findings; it now reports zero. Alert message becomes title and closable+onClose becomes closable.onClose; Select optionFilterProp moves into showSearch.optionFilterProp and suffixIcon becomes suffix; Drawer width becomes size; Progress trailColor becomes railColor. Behavior is unchanged apart from a few single-mode selects gaining type-to-filter, which the old prop already implied.
This commit is contained in:
MHSanaei
2026-07-14 03:38:41 +02:00
parent 60316c831f
commit ee9a6067c2
14 changed files with 19 additions and 25 deletions
@@ -96,7 +96,7 @@ export default function BulkAttachInboundsModal({
onChange={setTargetIds} onChange={setTargetIds}
options={targetOptions} options={targetOptions}
placeholder={t('pages.clients.attachToInboundsTargets')} placeholder={t('pages.clients.attachToInboundsTargets')}
optionFilterProp="label" showSearch={{ optionFilterProp: 'label' }}
autoFocus autoFocus
/> />
</> </>
@@ -96,7 +96,7 @@ export default function BulkDetachInboundsModal({
onChange={setTargetIds} onChange={setTargetIds}
options={targetOptions} options={targetOptions}
placeholder={t('pages.clients.detachFromInboundsTargets')} placeholder={t('pages.clients.detachFromInboundsTargets')}
optionFilterProp="label" showSearch={{ optionFilterProp: 'label' }}
autoFocus autoFocus
/> />
</> </>
+1 -1
View File
@@ -1212,7 +1212,7 @@ export default function ClientsPage() {
value={sortValueFor(sortColumn, sortOrder)} value={sortValueFor(sortColumn, sortOrder)}
aria-label={t('sort')} aria-label={t('sort')}
size={isMobile ? 'small' : 'middle'} size={isMobile ? 'small' : 'middle'}
suffixIcon={<SortAscendingOutlined />} suffix={<SortAscendingOutlined />}
style={{ minWidth: isMobile ? 130 : 200 }} style={{ minWidth: isMobile ? 130 : 200 }}
onChange={(value) => { onChange={(value) => {
const opt = SORT_OPTIONS.find((o) => o.value === value); const opt = SORT_OPTIONS.find((o) => o.value === value);
+4 -7
View File
@@ -89,7 +89,7 @@ export default function FilterDrawer({
title={t('pages.clients.filterTitle')} title={t('pages.clients.filterTitle')}
open={open} open={open}
onClose={() => onOpenChange(false)} onClose={() => onOpenChange(false)}
width={420} size={420}
destroyOnHidden destroyOnHidden
footer={ footer={
<div style={{ display: 'flex', justifyContent: 'space-between' }}> <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -139,8 +139,7 @@ export default function FilterDrawer({
placeholder={t('inbounds')} placeholder={t('inbounds')}
maxTagCount="responsive" maxTagCount="responsive"
allowClear allowClear
showSearch showSearch={{ optionFilterProp: 'label' }}
optionFilterProp="label"
listHeight={220} listHeight={220}
/> />
</Form.Item> </Form.Item>
@@ -155,8 +154,7 @@ export default function FilterDrawer({
placeholder={t('pages.clients.filters.nodes')} placeholder={t('pages.clients.filters.nodes')}
maxTagCount="responsive" maxTagCount="responsive"
allowClear allowClear
showSearch showSearch={{ optionFilterProp: 'label' }}
optionFilterProp="label"
listHeight={220} listHeight={220}
/> />
</Form.Item> </Form.Item>
@@ -171,8 +169,7 @@ export default function FilterDrawer({
placeholder={t('pages.clients.groupPlaceholder')} placeholder={t('pages.clients.groupPlaceholder')}
maxTagCount="responsive" maxTagCount="responsive"
allowClear allowClear
showSearch showSearch={{ optionFilterProp: 'label' }}
optionFilterProp="label"
listHeight={220} listHeight={220}
/> />
</Form.Item> </Form.Item>
+2 -3
View File
@@ -191,8 +191,7 @@ export default function HostFormModal({ open, mode, host, inboundOptions, existi
<Select <Select
mode="multiple" mode="multiple"
options={inboundSelectOptions} options={inboundSelectOptions}
showSearch showSearch={{ optionFilterProp: 'label' }}
optionFilterProp="label"
placeholder={t('pages.hosts.selectInbound')} placeholder={t('pages.hosts.selectInbound')}
/> />
</FormField> </FormField>
@@ -211,7 +210,7 @@ export default function HostFormModal({ open, mode, host, inboundOptions, existi
<Select mode="tags" allowClear tokenSeparators={[',']} /> <Select mode="tags" allowClear tokenSeparators={[',']} />
</FormField> </FormField>
<FormField name="nodeGuids" label={t('pages.hosts.fields.nodeGuids')} tooltip={t('pages.hosts.hints.nodeGuids')}> <FormField name="nodeGuids" label={t('pages.hosts.fields.nodeGuids')} tooltip={t('pages.hosts.hints.nodeGuids')}>
<Select mode="multiple" allowClear options={nodeSelectOptions} optionFilterProp="label" /> <Select mode="multiple" allowClear options={nodeSelectOptions} showSearch={{ optionFilterProp: 'label' }} />
</FormField> </FormField>
<FormField name="enable" label={t('pages.hosts.fields.enable')} valueProp="checked"> <FormField name="enable" label={t('pages.hosts.fields.enable')} valueProp="checked">
<Switch /> <Switch />
@@ -203,7 +203,7 @@ export default function AttachClientsModal({
onChange={setTargetIds} onChange={setTargetIds}
options={targetOptions} options={targetOptions}
placeholder={t('pages.inbounds.attachClientsTargets')} placeholder={t('pages.inbounds.attachClientsTargets')}
optionFilterProp="label" showSearch={{ optionFilterProp: 'label' }}
/> />
)} )}
</Modal> </Modal>
@@ -203,7 +203,7 @@ export default function AttachExistingClientsModal({
options={groupOptions} options={groupOptions}
placeholder={t('pages.clients.group')} placeholder={t('pages.clients.group')}
style={{ minWidth: 160 }} style={{ minWidth: 160 }}
optionFilterProp="label" showSearch={{ optionFilterProp: 'label' }}
/> />
)} )}
</Space> </Space>
+1 -2
View File
@@ -113,8 +113,7 @@ export default function EmailTab({ allSetting, updateSetting }: EmailTabProps) {
: <span><b>{stageLabel[testResult.stage || ''] || testResult.stage}:</b> {t('pages.settings.' + testResult.msg)}</span> : <span><b>{stageLabel[testResult.stage || ''] || testResult.stage}:</b> {t('pages.settings.' + testResult.msg)}</span>
} }
showIcon showIcon
closable closable={{ onClose: () => setTestResult(null) }}
onClose={() => setTestResult(null)}
/> />
)} )}
</Space> </Space>
+1 -2
View File
@@ -233,8 +233,7 @@ export default function TelegramTab({ allSetting, updateSetting }: TelegramTabPr
type={testResult.success ? 'success' : 'error'} type={testResult.success ? 'success' : 'error'}
title={testResult.msg} title={testResult.msg}
showIcon showIcon
closable closable={{ onClose: () => setTestResult(null) }}
onClose={() => setTestResult(null)}
/> />
)} )}
</Space> </Space>
+1 -1
View File
@@ -286,7 +286,7 @@ export default function SubPage() {
<Col xs={24} sm={22} md={18} lg={14} xl={12}> <Col xs={24} sm={22} md={18} lg={14} xl={12}>
<Card hoverable className="subscription-card" title={cardTitle} extra={cardExtra}> <Card hoverable className="subscription-card" title={cardTitle} extra={cardExtra}>
{announce && ( {announce && (
<Alert type="info" showIcon message={announce} style={{ marginBottom: 16 }} /> <Alert type="info" showIcon title={announce} style={{ marginBottom: 16 }} />
)} )}
<Descriptions <Descriptions
bordered bordered
+1 -1
View File
@@ -78,7 +78,7 @@ export default function SubUsageSummary({
percent={pct} percent={pct}
showInfo={false} showInfo={false}
strokeColor={{ '0%': stroke.from, '100%': stroke.to }} strokeColor={{ '0%': stroke.from, '100%': stroke.to }}
trailColor="var(--ant-color-fill-secondary)" railColor="var(--ant-color-fill-secondary)"
strokeWidth={10} strokeWidth={10}
className="usage-summary-bar" className="usage-summary-bar"
/> />
@@ -257,7 +257,7 @@ export default function BalancerFormModal({
<Alert <Alert
type="info" type="info"
showIcon showIcon
message={t('pages.xray.balancer.balancerFallbackInfo')} title={t('pages.xray.balancer.balancerFallbackInfo')}
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
/> />
)} )}
@@ -265,7 +265,7 @@ export default function BalancerFormModal({
<Alert <Alert
type="error" type="error"
showIcon showIcon
message={t('pages.xray.balancer.balancerFallbackCycle')} title={t('pages.xray.balancer.balancerFallbackCycle')}
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
/> />
)} )}
@@ -86,7 +86,7 @@ export default function DnsPresetsModal({ open, onClose, onInstall }: DnsPresets
type="warning" type="warning"
showIcon showIcon
className="preset-warning" className="preset-warning"
message={t('pages.xray.dns.dnsLeakWarning')} title={t('pages.xray.dns.dnsLeakWarning')}
/> />
<div className="preset-list"> <div className="preset-list">
{PRESETS.map((preset) => ( {PRESETS.map((preset) => (
+1 -1
View File
@@ -240,7 +240,7 @@ export default function DnsTab({ templateSettings, setTemplateSettings }: DnsTab
<Alert <Alert
type="warning" type="warning"
showIcon showIcon
message={t('pages.xray.dns.dnsLeakWarning')} title={t('pages.xray.dns.dnsLeakWarning')}
style={{ marginBottom: 12 }} style={{ marginBottom: 12 }}
/> />
<SettingListItem <SettingListItem