mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
chore: sync master into next
This commit is contained in:
14
.ncurc.js
14
.ncurc.js
@@ -18,17 +18,5 @@ module.exports = {
|
||||
return check.some((prefix) => name.startsWith(prefix));
|
||||
},
|
||||
// https://github.com/raineorshine/npm-check-updates#target
|
||||
target: (name, semver) => {
|
||||
const { operator } = semver[0] ?? {};
|
||||
|
||||
// rc-component
|
||||
if (rcOrg.some((prefix) => name.startsWith(prefix))) {
|
||||
// `^` always upgrade latest, otherwise follow semver.
|
||||
if (operator === '^') {
|
||||
return 'latest';
|
||||
}
|
||||
}
|
||||
|
||||
return 'semver';
|
||||
},
|
||||
target: () => `semver`,
|
||||
};
|
||||
|
||||
@@ -15,15 +15,48 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
### 5.23.4
|
||||
## 5.24.0
|
||||
|
||||
`2025-02-11`
|
||||
|
||||
- 🆕 Notification support `actions` prop and deprecated `btn` prop. [#52703](https://github.com/ant-design/ant-design/pull/52703) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🆕 Carousel support show dot duration. [#52672](https://github.com/ant-design/ant-design/pull/52672) [@yellowryan](https://github.com/yellowryan)
|
||||
- 🆕 Input.OTP support `separator` prop. [#52668](https://github.com/ant-design/ant-design/pull/52668) [@HaceraI](https://github.com/HaceraI)
|
||||
- 🆕 Descriptions add `labelColor` component token. [#52700](https://github.com/ant-design/ant-design/pull/52700) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Segmented supports `shape="round"`. [#52685](https://github.com/ant-design/ant-design/pull/52685) [@afc163](https://github.com/afc163)
|
||||
- 🆕 ConfigProvider support `variant` for Card. [#52552](https://github.com/ant-design/ant-design/pull/52552) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🆕 Progress/Step supports custom rounding with `rounding` prop. [#52017](https://github.com/ant-design/ant-design/pull/52017) [@yanghoxom](https://github.com/yanghoxom)
|
||||
- 🆕 Divider `orientation` support `start` and `end`. [#52567](https://github.com/ant-design/ant-design/pull/52567) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 Add `underlined` to `variant` of Input, InputNumber, Mentions, Form, Select, Cascader, TreeSelect, DatePicker and TimePicker. [#52546](https://github.com/ant-design/ant-design/pull/52546) [@ustcfury](https://github.com/ustcfury)
|
||||
- 🆕 ConfigProvider support global config of Modal `centered` . [#52343](https://github.com/ant-design/ant-design/pull/52343) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Add `label` class name for Checkbox and Radio. [#52322](https://github.com/ant-design/ant-design/pull/52322) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🐞 Fix Tooltip/Popover/Popconfirm/Dropdown misaligned popup positions with custom children in React 19. [react-component/util#623](https://github.com/react-component/util/pull/623) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Fix DatePicker.RangePicker arrow position when popup auto adjust position. [#52719](https://github.com/ant-design/ant-design/pull/52719) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 Update locale `filterCheckall` to `filterCheckAll`. [#52517](https://github.com/ant-design/ant-design/pull/52517) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🐞 Fix Form that `scrollToField` and `scrollToFirstError` cannot focus components of antd. [#52726](https://github.com/ant-design/ant-design/pull/52726) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 💄 Fix Button shadow color appearing awkward on dark backgrounds. [#52701](https://github.com/ant-design/ant-design/pull/52701) [@afc163](https://github.com/afc163)
|
||||
- 💄 Fixed the unnatural animation transition effect of Segmented component in dark mode. [#52708](https://github.com/ant-design/ant-design/pull/52708) [@yellowryan](https://github.com/yellowryan)
|
||||
- 💄 Separate style of Input and TextArea. [#52570](https://github.com/ant-design/ant-design/pull/52570) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 💄 Fix Input and Select style issue under css var mode. [#52554](https://github.com/ant-design/ant-design/pull/52554) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- ⌨️ Remove role="alert" from Form field error to improve screen reader experience. [#52661](https://github.com/ant-design/ant-design/pull/52661) [@mellis481](https://github.com/mellis481)
|
||||
- ⌨️ Improve accessibility by adding localized labels for empty table header and panel buttons. [#52689](https://github.com/ant-design/ant-design/pull/52689) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- ⌨️ Improve Tabs accessibility by fixing error `Certain ARIA roles must contain particular children`. [#52677](https://github.com/ant-design/ant-design/pull/52677) [@afc163](https://github.com/afc163)
|
||||
- ⌨️ Add screen reader support for Tooltip. [#52293](https://github.com/ant-design/ant-design/pull/52293) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- TypeScript
|
||||
- 🤖 Separate type of Button `onClick` event by `href`. [#52654](https://github.com/ant-design/ant-design/pull/52654) [@Brew-Brew](https://github.com/Brew-Brew)
|
||||
- 🤖 Deprecate Button.Group, prefer Space.Compact. [#52572](https://github.com/ant-design/ant-design/pull/52572) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🤖 Deprecate Input.Group, prefer Space.Compact. [#52571](https://github.com/ant-design/ant-design/pull/52571) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🤖 Tooltip export TooltipRef type. [#49230](https://github.com/ant-design/ant-design/pull/49230) [@nuintun](https://github.com/nuintun)
|
||||
|
||||
## 5.23.4
|
||||
|
||||
`2025-02-05`
|
||||
|
||||
First release in the Year of the Snake, wishing you a prosperous start! 🐍
|
||||
|
||||
- 🐞 Fixed Pagination accessibility issue by supplementing missing ARIA attributes support. [#52616](https://github.com/ant-design/ant-design/pull/52616) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Added TextArea component support in `Space.Compact`. [#52639](https://github.com/ant-design/ant-design/pull/52639) [@Can-Chen](https://github.com/Can-Chen)
|
||||
- 🐞 Fixed Menu with `theme="dark"` and `mode="horizontal"` identical text/background color issue. [#52617](https://github.com/ant-design/ant-design/pull/52617) [@afc163](https://github.com/afc163)
|
||||
- 🐞 Fixed Pagination accessibility issue by supplementing missing ARIA attributes support. [#52616](https://github.com/ant-design/ant-design/pull/52616) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- 🐞 Added TextArea component support in `Space.Compact`. [#52639](https://github.com/ant-design/ant-design/pull/52639) [@Can-Chen](https://github.com/Can-Chen)
|
||||
- 🐞 Fixed Menu with `theme="dark"` and `mode="horizontal"` identical text/background color issue. [#52617](https://github.com/ant-design/ant-design/pull/52617) [@afc163](https://github.com/afc163)
|
||||
- 🇦🇪 Add Tour Arabic translation. [#52642](https://github.com/ant-design/ant-design/pull/52642) [@Sagie501](https://github.com/Sagie501)
|
||||
- 🇮🇱 Add Tour Hebrew translation. [#52641](https://github.com/ant-design/ant-design/pull/52641) [@Sagie501](https://github.com/Sagie501)
|
||||
|
||||
|
||||
@@ -15,6 +15,39 @@ tag: vVERSION
|
||||
|
||||
---
|
||||
|
||||
## 5.24.0
|
||||
|
||||
`2025-02-11`
|
||||
|
||||
- 🆕 Notification 支持 `actions` 属性并废弃 `btn` 属性。[#52703](https://github.com/ant-design/ant-design/pull/52703) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🆕 Carousel 支持展示指示点进度。[#52672](https://github.com/ant-design/ant-design/pull/52672) [@yellowryan](https://github.com/yellowryan)
|
||||
- 🆕 Input.OTP 支持 `separator` 属性。[#52668](https://github.com/ant-design/ant-design/pull/52668) [@HaceraI](https://github.com/HaceraI)
|
||||
- 🆕 Descriptions 增加 `labelColor` 组件 token。[#52700](https://github.com/ant-design/ant-design/pull/52700) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 Segmented 支持 `shape="round"` 的胶囊形状的样式。[#52685](https://github.com/ant-design/ant-design/pull/52685) [@afc163](https://github.com/afc163)
|
||||
- 🆕 ConfigProvider 支持 Card 组件的 `variant` 配置。[#52552](https://github.com/ant-design/ant-design/pull/52552) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🆕 Progress/Step 支持使用 `rounding` 属性自定义取整方法。[#52017](https://github.com/ant-design/ant-design/pull/52017) [@yanghoxom](https://github.com/yanghoxom)
|
||||
- 🆕 Divider 的 `orientation` 属性支持 `start` 和 `end`.[#52567](https://github.com/ant-design/ant-design/pull/52567) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- 🆕 为 Input、InputNumber、Mentions、Form、Select、Cascader、TreeSelect、DatePicker、TimePicker 组件的 `variant` 添加 `underlined` 属性。[#52546](https://github.com/ant-design/ant-design/pull/52546) [@ustcfury](https://github.com/ustcfury)
|
||||
- 🆕 ConfigProvider 支持 Modal `centered` 全局配置。[#52343](https://github.com/ant-design/ant-design/pull/52343) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🆕 为 Checkbox 和 Radio 增加 `label` 类名。[#52322](https://github.com/ant-design/ant-design/pull/52322) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🐞 修复 Tooltip/Popover/Popconfirm/Dropdown 在 React 19 下 children 为自定义组件时弹层位置错乱的问题。[react-component/util#623](https://github.com/react-component/util/pull/623) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 修复 DatePicker.RangePicker 弹出窗体自动调整位置时,面板的箭头位置不正确的问题。[#52719](https://github.com/ant-design/ant-design/pull/52719) [@zombieJ](https://github.com/zombieJ)
|
||||
- 🐞 修正 locale 中 `filterCheckall` 为 `filterCheckAll`。[#52517](https://github.com/ant-design/ant-design/pull/52517) [@thinkasany](https://github.com/thinkasany)
|
||||
- 🐞 修复 Form `scrollToField` 和 `scrollToFirstError` 无法聚焦 antd 组件的问题。[#52726](https://github.com/ant-design/ant-design/pull/52726) [@Wxh16144](https://github.com/Wxh16144)
|
||||
- 💄 修复 Button 预设值按钮的阴影色在暗色背景下显示突兀的问题。[#52701](https://github.com/ant-design/ant-design/pull/52701) [@afc163](https://github.com/afc163)
|
||||
- 💄 修复 Segmented 组件在暗黑模式下的动画过渡效果不自然的问题。[#52708](https://github.com/ant-design/ant-design/pull/52708) [@yellowryan](https://github.com/yellowryan)
|
||||
- 💄 拆分 Input 和 TextArea 样式。[#52570](https://github.com/ant-design/ant-design/pull/52570) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 💄 修复 Input 和 Select 在 css var 模式下的样式问题。[#52554](https://github.com/ant-design/ant-design/pull/52554) [@li-jia-nan](https://github.com/li-jia-nan)
|
||||
- ⌨️ Form field error 移除 role="alert" 以提升可访问性。[#52661](https://github.com/ant-design/ant-design/pull/52661) [@mellis481](https://github.com/mellis481)
|
||||
- ⌨️ 优化无障碍体验,为空表头和面板按钮添加本地化标签。[#52689](https://github.com/ant-design/ant-design/pull/52689) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- ⌨️ 优化 Tabs 组件的可访问性,修复 `Certain ARIA roles must contain particular children` 的报错。[#52677](https://github.com/ant-design/ant-design/pull/52677) [@afc163](https://github.com/afc163)
|
||||
- ⌨️ 为 Tooltip 添加读屏器支持。[#52293](https://github.com/ant-design/ant-design/pull/52293) [@aojunhao123](https://github.com/aojunhao123)
|
||||
- TypeScript
|
||||
- 🤖 Button 根据 `href` 属性区分 `onClick` 事件类型。[#52654](https://github.com/ant-design/ant-design/pull/52654) [@Brew-Brew](https://github.com/Brew-Brew)
|
||||
- 🤖 废弃 Button.Group, 推荐 Space.Compact。[#52572](https://github.com/ant-design/ant-design/pull/52572) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🤖 废弃 Input.Group,推荐 Space.Compact。[#52571](https://github.com/ant-design/ant-design/pull/52571) [@guoyunhe](https://github.com/guoyunhe)
|
||||
- 🤖 Tooltip 导出 TooltipRef 类型。[#49230](https://github.com/ant-design/ant-design/pull/49230) [@nuintun](https://github.com/nuintun)
|
||||
|
||||
## 5.23.4
|
||||
|
||||
`2025-02-05`
|
||||
|
||||
@@ -41,14 +41,12 @@ const WaveEffect = (props: WaveEffectProps) => {
|
||||
const [height, setHeight] = React.useState(0);
|
||||
const [enabled, setEnabled] = React.useState(false);
|
||||
|
||||
const waveStyle = {
|
||||
const waveStyle: React.CSSProperties = {
|
||||
left,
|
||||
top,
|
||||
width,
|
||||
height,
|
||||
borderRadius: borderRadius.map((radius) => `${radius}px`).join(' '),
|
||||
} as React.CSSProperties & {
|
||||
[name: string]: number | string;
|
||||
};
|
||||
|
||||
if (color) {
|
||||
|
||||
@@ -50,7 +50,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
|
||||
<pre style={{ fontSize: '0.9em', overflowX: 'auto' }}>{errorDescription}</pre>
|
||||
}
|
||||
/>
|
||||
);
|
||||
) as React.ReactNode;
|
||||
}
|
||||
return children;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@ import type {
|
||||
ValidateErrorEntity,
|
||||
} from '@rc-component/form/lib/interface';
|
||||
import classNames from 'classnames';
|
||||
import type { Options } from 'scroll-into-view-if-needed';
|
||||
|
||||
import type { Variant } from '../config-provider';
|
||||
import { useComponentConfig } from '../config-provider/context';
|
||||
@@ -23,7 +22,7 @@ import type { FeedbackIcons } from './FormItem';
|
||||
import useForm from './hooks/useForm';
|
||||
import type { FormInstance } from './hooks/useForm';
|
||||
import useFormWarning from './hooks/useFormWarning';
|
||||
import type { FormLabelAlign } from './interface';
|
||||
import type { FormLabelAlign, ScrollFocusOptions } from './interface';
|
||||
import useStyle from './style';
|
||||
import ValidateMessagesContext from './validateMessagesContext';
|
||||
|
||||
@@ -34,9 +33,7 @@ export type RequiredMark =
|
||||
export type FormLayout = 'horizontal' | 'inline' | 'vertical';
|
||||
export type FormItemLayout = 'horizontal' | 'vertical';
|
||||
|
||||
export type ScrollFocusOptions = Options & {
|
||||
focus?: boolean;
|
||||
};
|
||||
export type { ScrollFocusOptions };
|
||||
|
||||
export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form'> {
|
||||
prefixCls?: string;
|
||||
@@ -181,9 +178,6 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
|
||||
defaultScrollToFirstError = { ...defaultScrollToFirstError, ...options };
|
||||
}
|
||||
wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
|
||||
if (defaultScrollToFirstError.focus) {
|
||||
wrapForm.focusField(fieldName);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -474,6 +474,57 @@ describe('Form', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('scrollToField with focus', () => {
|
||||
it('focusField should work', () => {
|
||||
let formInstance: any;
|
||||
const Demo = () => {
|
||||
const [form] = Form.useForm();
|
||||
formInstance = form;
|
||||
return (
|
||||
<Form>
|
||||
<Form.Item name="test">
|
||||
<input type="text" />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
const { getByRole } = render(<Demo />);
|
||||
const input = getByRole('textbox');
|
||||
|
||||
formInstance.focusField('test');
|
||||
expect(input).toHaveFocus();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/pull/52712#issuecomment-2646831569
|
||||
it('focusField should work with Select', () => {
|
||||
let formInstance: any;
|
||||
|
||||
const Demo = () => {
|
||||
const [form] = Form.useForm();
|
||||
formInstance = form;
|
||||
return (
|
||||
<Form form={form}>
|
||||
<Form.Item name="test">
|
||||
<Select
|
||||
options={[
|
||||
{ label: 'afc163', value: 'A' },
|
||||
{ label: 'Wxh16144', value: 'B' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
const { getByRole } = render(<Demo />);
|
||||
const select = getByRole('combobox');
|
||||
|
||||
formInstance.focusField('test');
|
||||
expect(select).toHaveFocus();
|
||||
});
|
||||
});
|
||||
|
||||
describe('scrollToFirstError', () => {
|
||||
it('should work with scrollToFirstError', async () => {
|
||||
const onFinishFailed = jest.fn();
|
||||
@@ -562,7 +613,6 @@ describe('Form', () => {
|
||||
|
||||
it('should scrollToFirstError work with focus', async () => {
|
||||
const onFinishFailed = jest.fn();
|
||||
const focusSpy = jest.spyOn(HTMLElement.prototype, 'focus');
|
||||
|
||||
const { container } = render(
|
||||
<Form scrollToFirstError={{ block: 'center', focus: true }} onFinishFailed={onFinishFailed}>
|
||||
@@ -576,20 +626,17 @@ describe('Form', () => {
|
||||
);
|
||||
|
||||
expect(scrollIntoView).not.toHaveBeenCalled();
|
||||
expect(focusSpy).not.toHaveBeenCalled();
|
||||
|
||||
fireEvent.submit(container.querySelector('form')!);
|
||||
await waitFakeTimer();
|
||||
|
||||
const inputNode = document.getElementById('test');
|
||||
expect(focusSpy).toHaveBeenCalledWith();
|
||||
expect(scrollIntoView).toHaveBeenCalledWith(inputNode, {
|
||||
block: 'center',
|
||||
focus: true,
|
||||
scrollMode: 'if-needed',
|
||||
});
|
||||
|
||||
focusSpy.mockRestore();
|
||||
expect(inputNode).toHaveFocus();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/28869
|
||||
|
||||
@@ -58,21 +58,29 @@ export default function useForm<Values = any>(form?: FormInstance<Values>): [For
|
||||
},
|
||||
},
|
||||
scrollToField: (name: NamePath, options: ScrollOptions = {}) => {
|
||||
const { focus, ...restOpt } = options;
|
||||
const node = getFieldDOMNode(name, wrapForm);
|
||||
|
||||
if (node) {
|
||||
scrollIntoView(node, {
|
||||
scrollMode: 'if-needed',
|
||||
block: 'nearest',
|
||||
...options,
|
||||
...restOpt,
|
||||
} as any);
|
||||
|
||||
// Focus if scroll success
|
||||
if (focus) {
|
||||
wrapForm.focusField(name);
|
||||
}
|
||||
}
|
||||
},
|
||||
focusField: (name: NamePath) => {
|
||||
const node = getFieldDOMNode(name, wrapForm);
|
||||
const itemRef = wrapForm.getFieldInstance(name);
|
||||
|
||||
if (node) {
|
||||
node.focus?.();
|
||||
if (typeof itemRef?.focus === 'function') {
|
||||
itemRef.focus();
|
||||
} else {
|
||||
getFieldDOMNode(name, wrapForm)?.focus?.();
|
||||
}
|
||||
},
|
||||
getFieldInstance: (name: NamePath) => {
|
||||
|
||||
@@ -80,7 +80,7 @@ Common props ref:[Common props](/docs/react/common-props)
|
||||
| name | Form name. Will be the prefix of Field `id` | string | - | |
|
||||
| preserve | Keep field value even when field removed. You can get the preserve field value by `getFieldsValue(true)` | boolean | true | 4.4.0 |
|
||||
| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 |
|
||||
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | |
|
||||
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | focus: 5.24.0 |
|
||||
| size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - | |
|
||||
| validateMessages | Validation prompt template, description [see below](#validatemessages) | [ValidateMessages](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134) | - | |
|
||||
| validateTrigger | Config field validate trigger | string \| string\[] | `onChange` | 4.3.0 |
|
||||
@@ -318,7 +318,7 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
|
||||
| isFieldTouched | Check if a field has been operated | (name: [NamePath](#namepath)) => boolean | |
|
||||
| isFieldValidating | Check field if is in validating | (name: [NamePath](#namepath)) => boolean | |
|
||||
| resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#namepath)\[]) => void | |
|
||||
| scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
|
||||
| scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean }) => void | focus: 5.24.0 |
|
||||
| setFields | Set fields status | (fields: [FieldData](#fielddata)\[]) => void | |
|
||||
| setFieldValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
|
||||
| setFieldsValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | |
|
||||
|
||||
@@ -81,7 +81,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
|
||||
| name | 表单名称,会作为表单字段 `id` 前缀使用 | string | - | |
|
||||
| preserve | 当字段被删除时保留字段值。你可以通过 `getFieldsValue(true)` 来获取保留字段值 | boolean | true | 4.4.0 |
|
||||
| requiredMark | 必选样式,可以切换为必选或者可选展示样式。此为 Form 配置,Form.Item 无法单独配置 | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 |
|
||||
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | |
|
||||
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | focus: 5.24.0 |
|
||||
| size | 设置字段组件的尺寸(仅限 antd 组件) | `small` \| `middle` \| `large` | - | |
|
||||
| validateMessages | 验证提示模板,说明[见下](#validatemessages) | [ValidateMessages](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134) | - | |
|
||||
| validateTrigger | 统一设置字段触发验证的时机 | string \| string\[] | `onChange` | 4.3.0 |
|
||||
@@ -317,7 +317,7 @@ Form.List 渲染表单相关操作函数。
|
||||
| isFieldTouched | 检查对应字段是否被用户操作过 | (name: [NamePath](#namepath)) => boolean | |
|
||||
| isFieldValidating | 检查对应字段是否正在校验 | (name: [NamePath](#namepath)) => boolean | |
|
||||
| resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#namepath)\[]) => void | |
|
||||
| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)) => void | |
|
||||
| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean }) => void | focus: 5.24.0 |
|
||||
| setFields | 设置一组字段状态 | (fields: [FieldData](#fielddata)\[]) => void | |
|
||||
| setFieldValue | 设置表单的值(该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改,请克隆后传入) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
|
||||
| setFieldsValue | 设置表单的值(该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改,请克隆后传入)。如果你只想修改 Form.List 中单项值,请通过 `setFieldValue` 进行指定 | (values) => void | |
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import type { Options } from 'scroll-into-view-if-needed';
|
||||
export type {
|
||||
InternalNamePath,
|
||||
NamePath,
|
||||
Store,
|
||||
StoreValue,
|
||||
} from '@rc-component/form/lib/interface';
|
||||
export type { Options as ScrollOptions } from 'scroll-into-view-if-needed';
|
||||
|
||||
export type ScrollFocusOptions = Options & {
|
||||
focus?: boolean;
|
||||
};
|
||||
export type ScrollOptions = ScrollFocusOptions; // alias
|
||||
export type FormLabelAlign = 'left' | 'right';
|
||||
|
||||
@@ -135,7 +135,7 @@ Added in `5.16.0`.
|
||||
| defaultValue | Default value | string | - | |
|
||||
| disabled | Whether the input is disabled | boolean | false | |
|
||||
| formatter | Format display, blank fields will be filled with ` ` | (value: string) => string | - | |
|
||||
| separator | render the separator after the input box of the specified index | ((index: number) => ReactNode) \| ReactNode | - | |
|
||||
| separator | render the separator after the input box of the specified index | ((index: number) => ReactNode) \| ReactNode | - | 5.24.0 |
|
||||
| mask | Custom display, the original value will not be modified | boolean \| string | `false` | `5.17.0` |
|
||||
| length | The number of input elements | number | 6 | |
|
||||
| status | Set validation status | 'error' \| 'warning' | - | |
|
||||
|
||||
@@ -136,7 +136,7 @@ interface CountConfig {
|
||||
| defaultValue | 默认值 | string | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| formatter | 格式化展示,留空字段会被 ` ` 填充 | (value: string) => string | - | |
|
||||
| separator | 分隔符,在指定索引的输入框后渲染分隔符 | ((index: number) => ReactNode) \| ReactNode | - | |
|
||||
| separator | 分隔符,在指定索引的输入框后渲染分隔符 | ((index: number) => ReactNode) \| ReactNode | - | 5.24.0 |
|
||||
| mask | 自定义展示,和 `formatter` 的区别是不会修改原始值 | boolean \| string | `false` | `5.17.0` |
|
||||
| length | 输入元素数量 | number | 6 | |
|
||||
| status | 设置校验状态 | 'error' \| 'warning' | - | |
|
||||
|
||||
@@ -68,10 +68,10 @@ export const handleGradient = (
|
||||
if (Object.keys(rest).length !== 0) {
|
||||
const sortedGradients = sortGradient(rest as StringGradients);
|
||||
const background = `linear-gradient(${direction}, ${sortedGradients})`;
|
||||
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
|
||||
return { background, [LineStrokeColorVar]: background };
|
||||
}
|
||||
const background = `linear-gradient(${direction}, ${from}, ${to})`;
|
||||
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
|
||||
return { background, [LineStrokeColorVar]: background };
|
||||
};
|
||||
|
||||
const Line: React.FC<LineProps> = (props) => {
|
||||
@@ -113,7 +113,7 @@ const Line: React.FC<LineProps> = (props) => {
|
||||
borderRadius,
|
||||
};
|
||||
|
||||
const percentStyle = {
|
||||
const percentStyle: React.CSSProperties = {
|
||||
width: `${validProgress(percent)}%`,
|
||||
height,
|
||||
borderRadius,
|
||||
|
||||
@@ -1063,16 +1063,16 @@ exports[`renders components/segmented/demo/icon-only.tsx extend context correctl
|
||||
|
||||
exports[`renders components/segmented/demo/shape.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
aria-label="segmented control"
|
||||
class="ant-segmented ant-segmented-shape-round"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
aria-label="segmented control"
|
||||
class="ant-segmented"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
@@ -1085,28 +1085,99 @@ exports[`renders components/segmented/demo/shape.tsx extend context correctly 1`
|
||||
class="ant-segmented-item-label"
|
||||
role="radio"
|
||||
>
|
||||
<span
|
||||
class="ant-segmented-item-icon"
|
||||
<input
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-segmented-item-label"
|
||||
title="small"
|
||||
>
|
||||
small
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-segmented-item-label"
|
||||
title="middle"
|
||||
>
|
||||
middle
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
class="ant-segmented-item"
|
||||
>
|
||||
<input
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-segmented-item-label"
|
||||
title="large"
|
||||
>
|
||||
large
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-label="segmented control"
|
||||
class="ant-segmented ant-segmented-shape-round"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-segmented-item-label"
|
||||
>
|
||||
<span
|
||||
aria-label="sun"
|
||||
class="anticon anticon-sun"
|
||||
role="img"
|
||||
class="ant-segmented-item-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sun"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="sun"
|
||||
class="anticon anticon-sun"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sun"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -1124,32 +1195,42 @@ exports[`renders components/segmented/demo/shape.tsx extend context correctly 1`
|
||||
class="ant-segmented-item-label"
|
||||
role="radio"
|
||||
>
|
||||
<span
|
||||
class="ant-segmented-item-icon"
|
||||
<input
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-segmented-item-label"
|
||||
>
|
||||
<span
|
||||
aria-label="moon"
|
||||
class="anticon anticon-moon"
|
||||
role="img"
|
||||
class="ant-segmented-item-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="moon"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="moon"
|
||||
class="anticon anticon-moon"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="moon"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1045,16 +1045,16 @@ exports[`renders components/segmented/demo/icon-only.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/segmented/demo/shape.tsx correctly 1`] = `
|
||||
<div
|
||||
aria-label="segmented control"
|
||||
class="ant-segmented ant-segmented-shape-round"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
aria-label="segmented control"
|
||||
class="ant-segmented"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
@@ -1067,28 +1067,99 @@ exports[`renders components/segmented/demo/shape.tsx correctly 1`] = `
|
||||
class="ant-segmented-item-label"
|
||||
role="radio"
|
||||
>
|
||||
<span
|
||||
class="ant-segmented-item-icon"
|
||||
<input
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-segmented-item-label"
|
||||
title="small"
|
||||
>
|
||||
small
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-segmented-item-label"
|
||||
title="middle"
|
||||
>
|
||||
middle
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
class="ant-segmented-item"
|
||||
>
|
||||
<input
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-segmented-item-label"
|
||||
title="large"
|
||||
>
|
||||
large
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-label="segmented control"
|
||||
class="ant-segmented ant-segmented-shape-round"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-segmented-group"
|
||||
>
|
||||
<label
|
||||
class="ant-segmented-item ant-segmented-item-selected"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="true"
|
||||
class="ant-segmented-item-label"
|
||||
>
|
||||
<span
|
||||
aria-label="sun"
|
||||
class="anticon anticon-sun"
|
||||
role="img"
|
||||
class="ant-segmented-item-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sun"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="sun"
|
||||
class="anticon anticon-sun"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sun"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M548 818v126a16 16 0 01-16 16h-40a16 16 0 01-16-16V818c15.85 1.64 27.84 2.46 36 2.46 8.15 0 20.16-.82 36-2.46m205.25-115.66l89.1 89.1a16 16 0 010 22.62l-28.29 28.29a16 16 0 01-22.62 0l-89.1-89.1c12.37-10.04 21.43-17.95 27.2-23.71 5.76-5.77 13.67-14.84 23.71-27.2m-482.5 0c10.04 12.36 17.95 21.43 23.71 27.2 5.77 5.76 14.84 13.67 27.2 23.71l-89.1 89.1a16 16 0 01-22.62 0l-28.29-28.29a16 16 0 010-22.63zM512 278c129.24 0 234 104.77 234 234S641.24 746 512 746 278 641.24 278 512s104.77-234 234-234m0 72c-89.47 0-162 72.53-162 162s72.53 162 162 162 162-72.53 162-162-72.53-162-162-162M206 476c-1.64 15.85-2.46 27.84-2.46 36 0 8.15.82 20.16 2.46 36H80a16 16 0 01-16-16v-40a16 16 0 0116-16zm738 0a16 16 0 0116 16v40a16 16 0 01-16 16H818c1.64-15.85 2.46-27.84 2.46-36 0-8.15-.82-20.16-2.46-36zM814.06 180.65l28.29 28.29a16 16 0 010 22.63l-89.1 89.09c-10.04-12.37-17.95-21.43-23.71-27.2-5.77-5.76-14.84-13.67-27.2-23.71l89.1-89.1a16 16 0 0122.62 0m-581.5 0l89.1 89.1c-12.37 10.04-21.43 17.95-27.2 23.71-5.76 5.77-13.67 14.84-23.71 27.2l-89.1-89.1a16 16 0 010-22.62l28.29-28.29a16 16 0 0122.62 0M532 64a16 16 0 0116 16v126c-15.85-1.64-27.84-2.46-36-2.46-8.15 0-20.16.82-36 2.46V80a16 16 0 0116-16z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
@@ -1106,32 +1177,42 @@ exports[`renders components/segmented/demo/shape.tsx correctly 1`] = `
|
||||
class="ant-segmented-item-label"
|
||||
role="radio"
|
||||
>
|
||||
<span
|
||||
class="ant-segmented-item-icon"
|
||||
<input
|
||||
class="ant-segmented-item-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
/>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-segmented-item-label"
|
||||
>
|
||||
<span
|
||||
aria-label="moon"
|
||||
class="anticon anticon-moon"
|
||||
role="img"
|
||||
class="ant-segmented-item-icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="moon"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
<span
|
||||
aria-label="moon"
|
||||
class="anticon anticon-moon"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="moon"
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M489.5 111.66c30.65-1.8 45.98 36.44 22.58 56.33A243.35 243.35 0 00426 354c0 134.76 109.24 244 244 244 72.58 0 139.9-31.83 186.01-86.08 19.87-23.38 58.07-8.1 56.34 22.53C900.4 745.82 725.15 912 512.5 912 291.31 912 112 732.69 112 511.5c0-211.39 164.29-386.02 374.2-399.65l.2-.01zm-81.15 79.75l-4.11 1.36C271.1 237.94 176 364.09 176 511.5 176 697.34 326.66 848 512.5 848c148.28 0 274.94-96.2 319.45-230.41l.63-1.93-.11.07a307.06 307.06 0 01-159.73 46.26L670 662c-170.1 0-308-137.9-308-308 0-58.6 16.48-114.54 46.27-162.47z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,15 +1,27 @@
|
||||
import React from 'react';
|
||||
import { Segmented } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import { MoonOutlined, SunOutlined } from '@ant-design/icons';
|
||||
import { Flex, Segmented } from 'antd';
|
||||
import type { SizeType } from '../../config-provider/SizeContext';
|
||||
|
||||
const Demo: React.FC = () => (
|
||||
<Segmented
|
||||
shape="round"
|
||||
options={[
|
||||
{ value: 'light', icon: <SunOutlined /> },
|
||||
{ value: 'dark', icon: <MoonOutlined /> },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const Demo: React.FC = () => {
|
||||
const [size, setSize] = useState<SizeType>('middle');
|
||||
return (
|
||||
<Flex gap="small" align="flex-start" vertical>
|
||||
<Segmented
|
||||
options={['small', 'middle', 'large']}
|
||||
value={size}
|
||||
onChange={(value) => setSize(value as SizeType)}
|
||||
/>
|
||||
<Segmented
|
||||
size={size}
|
||||
shape="round"
|
||||
options={[
|
||||
{ value: 'light', icon: <SunOutlined /> },
|
||||
{ value: 'dark', icon: <MoonOutlined /> },
|
||||
]}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Demo;
|
||||
|
||||
@@ -270,7 +270,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
|
||||
willChange: 'transform, width',
|
||||
},
|
||||
|
||||
'&-shape-round': {
|
||||
[`&${componentCls}-shape-round`]: {
|
||||
borderRadius: 9999,
|
||||
[`${componentCls}-item, ${componentCls}-thumb`]: {
|
||||
borderRadius: 9999,
|
||||
|
||||
@@ -149,11 +149,11 @@ describe('Table.sorter', () => {
|
||||
|
||||
expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
|
||||
expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('descending');
|
||||
expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null);
|
||||
expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name');
|
||||
|
||||
fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
|
||||
expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending');
|
||||
expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null);
|
||||
expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name');
|
||||
|
||||
fireEvent.click(container.querySelector('.ant-table-column-sorters')!);
|
||||
expect(getNameColumn()?.getAttribute('aria-sort')).toEqual(null);
|
||||
|
||||
@@ -125,6 +125,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
aria-label="Age"
|
||||
aria-sort="ascending"
|
||||
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
|
||||
scope="col"
|
||||
|
||||
@@ -15163,6 +15163,7 @@ exports[`renders components/table/demo/head.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age"
|
||||
aria-sort="descending"
|
||||
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
|
||||
scope="col"
|
||||
|
||||
@@ -15391,6 +15391,7 @@ exports[`renders components/table/demo/head.tsx correctly 1`] = `
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
aria-label="Age"
|
||||
aria-sort="descending"
|
||||
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
|
||||
scope="col"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('table', {
|
||||
skip: ['virtual-list.tsx'],
|
||||
skip: ['virtual-list.tsx', 'dynamic-settings.tsx'],
|
||||
// waiting for fix
|
||||
disabledRules: ['label', 'empty-table-header', 'nested-interactive', 'button-name'],
|
||||
});
|
||||
|
||||
@@ -246,9 +246,8 @@ const injectSorter = <RecordType extends AnyObject = AnyObject>(
|
||||
// Inform the screen-reader so it can tell the visually impaired user which column is sorted
|
||||
if (sortOrder) {
|
||||
cell['aria-sort'] = sortOrder === 'ascend' ? 'ascending' : 'descending';
|
||||
} else {
|
||||
cell['aria-label'] = displayTitle || '';
|
||||
}
|
||||
cell['aria-label'] = displayTitle || '';
|
||||
cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
|
||||
cell.tabIndex = 0;
|
||||
if (column.ellipsis) {
|
||||
|
||||
@@ -10,9 +10,9 @@ export const BaseSize = 2;
|
||||
export const FontGap = 3;
|
||||
|
||||
// Prevent external hidden elements from adding accent styles
|
||||
const emphasizedStyle = {
|
||||
const emphasizedStyle: React.CSSProperties = {
|
||||
visibility: 'visible !important',
|
||||
};
|
||||
} as unknown as React.CSSProperties;
|
||||
|
||||
export type AppendWatermark = (
|
||||
base64Url: string,
|
||||
@@ -44,7 +44,7 @@ export default function useWatermark(
|
||||
...markStyle,
|
||||
backgroundImage: `url('${base64Url}')`,
|
||||
backgroundSize: `${Math.floor(markWidth)}px`,
|
||||
...(emphasizedStyle as React.CSSProperties),
|
||||
...emphasizedStyle,
|
||||
}),
|
||||
);
|
||||
// Prevents using the browser `Hide Element` to hide watermarks
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "antd",
|
||||
"version": "5.23.4",
|
||||
"version": "5.24.0",
|
||||
"description": "An enterprise-class UI design language and React components implementation",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
@@ -141,7 +141,7 @@
|
||||
"rc-motion": "^2.9.5",
|
||||
"rc-notification": "~5.6.3",
|
||||
"rc-pagination": "~5.1.0",
|
||||
"rc-picker": "~4.11.0",
|
||||
"rc-picker": "~4.11.1",
|
||||
"rc-progress": "~4.0.0",
|
||||
"rc-rate": "~2.13.1",
|
||||
"rc-resize-observer": "^1.4.3",
|
||||
|
||||
@@ -55,6 +55,7 @@ const miscKeys = [
|
||||
'🛠',
|
||||
'📦',
|
||||
'🌐',
|
||||
'⌨️',
|
||||
' locale ',
|
||||
' RTL ',
|
||||
'<img',
|
||||
|
||||
5
typings/cssType.d.ts
vendored
Normal file
5
typings/cssType.d.ts
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
declare namespace React {
|
||||
interface CSSProperties {
|
||||
[key: `--${string | number}`]: string | number | undefined; // 允许 CSS 变量
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user