mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-26 21:17:14 +00:00
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:
@@ -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
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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) => (
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user