mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 12:39:49 +08:00
Merge pull request #51563 from ant-design/feature
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
chore: merge feature into master
This commit is contained in:
lijianan
GitHub
commit
47ee4e2f1a
@ -176,12 +176,13 @@ const RefLinks: React.FC<{ refs: string[] }> = ({ refs }) => {
|
||||
const RenderChangelogList: React.FC<{ changelogList: ChangelogInfo[] }> = ({ changelogList }) => {
|
||||
const elements: React.ReactNode[] = [];
|
||||
const { styles } = useStyle();
|
||||
for (let i = 0; i < changelogList.length; i += 1) {
|
||||
const len = changelogList.length;
|
||||
for (let i = 0; i < len; i += 1) {
|
||||
const { refs, changelog } = changelogList[i];
|
||||
// Check if the next line is an image link and append it to the current line
|
||||
if (i + 1 < changelogList.length && changelogList[i + 1].changelog.trim().startsWith('<img')) {
|
||||
if (i + 1 < len && changelogList[i + 1].changelog.trim().startsWith('<img')) {
|
||||
const imgDom = new DOMParser().parseFromString(changelogList[i + 1].changelog, 'text/html');
|
||||
const imgElement = imgDom.querySelector('img');
|
||||
const imgElement = imgDom.querySelector<HTMLImageElement>('img');
|
||||
elements.push(
|
||||
<li key={i}>
|
||||
<ParseChangelog changelog={changelog} />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
import Affix from '..';
|
||||
import accessibilityTest from '../../../tests/shared/accessibilityTest';
|
||||
import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render, triggerResize, waitFakeTimer } from '../../../tests/utils';
|
||||
import Button from '../../button';
|
||||
|
||||
5
components/affix/__tests__/a11y.test.ts
Normal file
5
components/affix/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('affix demo a11y', () => {
|
||||
accessibilityDemoTest('affix');
|
||||
});
|
||||
5
components/alert/__tests__/a11y.test.ts
Normal file
5
components/alert/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('alert demo a11y', () => {
|
||||
accessibilityDemoTest('alert', { disabledRules: ['button-name'] });
|
||||
});
|
||||
@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
|
||||
import { resetWarned } from 'rc-util/lib/warning';
|
||||
|
||||
import Alert from '..';
|
||||
import accessibilityTest from '../../../tests/shared/accessibilityTest';
|
||||
import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { act, render, screen, waitFakeTimer } from '../../../tests/utils';
|
||||
import Button from '../../button';
|
||||
|
||||
5
components/anchor/__tests__/a11y.test.ts
Normal file
5
components/anchor/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('anchor demo a11y', () => {
|
||||
accessibilityDemoTest('anchor');
|
||||
});
|
||||
5
components/app/__tests__/a11y.test.ts
Normal file
5
components/app/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('app demo a11y', () => {
|
||||
accessibilityDemoTest('app');
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -8,25 +8,29 @@ exports[`AutoComplete rtl render component should be rendered correctly in RTL d
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
5
components/avatar/__tests__/a11y.test.ts
Normal file
5
components/avatar/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('avatar demo a11y', () => {
|
||||
accessibilityDemoTest('avatar', { disabledRules: ['image-alt'] });
|
||||
});
|
||||
5
components/back-top/__tests__/a11y.test.ts
Normal file
5
components/back-top/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('back-top demo a11y', () => {
|
||||
accessibilityDemoTest('back-top');
|
||||
});
|
||||
5
components/badge/__tests__/a11y.test.ts
Normal file
5
components/badge/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('badge demo a11y', () => {
|
||||
accessibilityDemoTest('badge', { disabledRules: ['button-name'] });
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
import accessibilityTest from '../../../tests/shared/accessibilityTest';
|
||||
import { accessibilityTest } from '../../../tests/shared/accessibilityTest';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import { render } from '../../../tests/utils';
|
||||
|
||||
5
components/breadcrumb/__tests__/a11y.test.ts
Normal file
5
components/breadcrumb/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('breadcrumb demo a11y', () => {
|
||||
accessibilityDemoTest('breadcrumb');
|
||||
});
|
||||
5
components/button/__tests__/a11y.test.ts
Normal file
5
components/button/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
describe('button demo a11y', () => {
|
||||
accessibilityDemoTest('button');
|
||||
});
|
||||
@ -14,30 +14,34 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -460,30 +464,34 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -1599,30 +1607,34 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -2045,30 +2057,34 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -3183,30 +3199,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -3629,30 +3649,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -4761,30 +4785,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -5207,30 +5235,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -6408,30 +6440,34 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -6879,30 +6915,34 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -7979,30 +8019,34 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -8425,30 +8469,34 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -9974,30 +10022,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2017"
|
||||
>
|
||||
2017
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2017"
|
||||
>
|
||||
2017
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -10420,30 +10472,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -14,29 +14,33 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -73,29 +77,33 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -959,29 +967,33 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -1018,29 +1030,33 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -1903,29 +1919,33 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -1962,29 +1982,33 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -2843,29 +2867,33 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -2902,29 +2930,33 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -3850,29 +3882,33 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -3914,29 +3950,33 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -4757,29 +4797,33 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2016"
|
||||
>
|
||||
2016
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -4816,29 +4860,33 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Nov"
|
||||
>
|
||||
Nov
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -6112,29 +6160,33 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2017"
|
||||
>
|
||||
2017
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2017"
|
||||
>
|
||||
2017
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -6171,29 +6223,33 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
@ -14,30 +14,34 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2019"
|
||||
>
|
||||
2019
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2019"
|
||||
>
|
||||
2019
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -74,30 +78,34 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -958,30 +966,34 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2018年"
|
||||
>
|
||||
2018年
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2018年"
|
||||
>
|
||||
2018年
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -1018,30 +1030,34 @@ exports[`Calendar Calendar should support locale 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="10月"
|
||||
>
|
||||
10月
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="10月"
|
||||
>
|
||||
10月
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -1902,30 +1918,34 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -1962,30 +1982,34 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Sep"
|
||||
>
|
||||
Sep
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -2846,30 +2870,34 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="2000"
|
||||
>
|
||||
2000
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -2906,30 +2934,34 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Jan"
|
||||
>
|
||||
Jan
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
@ -6,6 +6,7 @@ import type { PickType } from 'rc-cascader/lib/Panel';
|
||||
|
||||
import type { CascaderProps, DefaultOptionType } from '.';
|
||||
import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useBase from './hooks/useBase';
|
||||
import useCheckable from './hooks/useCheckable';
|
||||
@ -40,8 +41,12 @@ function CascaderPanel<
|
||||
notFoundContent,
|
||||
direction,
|
||||
expandIcon,
|
||||
disabled: customDisabled,
|
||||
} = props;
|
||||
|
||||
const disabled = React.useContext(DisabledContext);
|
||||
const mergedDisabled = customDisabled ?? disabled;
|
||||
|
||||
const [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty] = useBase(
|
||||
customizePrefixCls,
|
||||
direction,
|
||||
@ -76,6 +81,7 @@ function CascaderPanel<
|
||||
direction={mergedDirection}
|
||||
expandIcon={mergedExpandIcon}
|
||||
loadingIcon={loadingIcon}
|
||||
disabled={mergedDisabled}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -871,44 +871,48 @@ exports[`Cascader legacy props should support showCheckedStrategy child 1`] = `
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-overflow"
|
||||
<span
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
|
||||
style="opacity: 1;"
|
||||
class="ant-select-selection-overflow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-search"
|
||||
style="width: 0px;"
|
||||
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
<div
|
||||
class="ant-select-selection-search"
|
||||
style="width: 0px;"
|
||||
>
|
||||
</span>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
|
||||
@ -1048,44 +1052,48 @@ exports[`Cascader legacy props should support showCheckedStrategy parent 1`] = `
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-overflow"
|
||||
<span
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
|
||||
style="opacity: 1;"
|
||||
class="ant-select-selection-overflow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selection-search"
|
||||
style="width: 0px;"
|
||||
class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
<div
|
||||
class="ant-select-selection-search"
|
||||
style="width: 0px;"
|
||||
>
|
||||
</span>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-placement-bottomLeft"
|
||||
@ -1376,30 +1384,34 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Zhejiang / Hangzhou"
|
||||
>
|
||||
Zhejiang / Hangzhou
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Zhejiang / Hangzhou"
|
||||
>
|
||||
Zhejiang / Hangzhou
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -1613,28 +1625,32 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -1833,30 +1849,34 @@ exports[`Cascader support controlled mode 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Zhejiang / Hangzhou / West Lake"
|
||||
>
|
||||
Zhejiang / Hangzhou / West Lake
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import type { CascaderProps } from 'antd';
|
||||
import { Cascader, Flex } from 'antd';
|
||||
import { Cascader, Flex, Switch } from 'antd';
|
||||
|
||||
interface Option {
|
||||
value: string | number;
|
||||
@ -51,12 +51,23 @@ const onMultipleChange: CascaderProps<Option, 'value', true>['onChange'] = (valu
|
||||
console.log(value);
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Flex vertical gap="small" align="flex-start">
|
||||
<Cascader.Panel options={options} onChange={onChange} />
|
||||
<Cascader.Panel multiple options={options} onChange={onMultipleChange} />
|
||||
<Cascader.Panel />
|
||||
</Flex>
|
||||
);
|
||||
const App: React.FC = () => {
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
|
||||
return (
|
||||
<Flex vertical gap="small" align="flex-start">
|
||||
<Switch
|
||||
checked={disabled}
|
||||
checkedChildren="Enabled"
|
||||
unCheckedChildren="Disabled"
|
||||
onChange={setDisabled}
|
||||
aria-label="disabled switch"
|
||||
/>
|
||||
<Cascader.Panel options={options} onChange={onChange} disabled={disabled} />
|
||||
<Cascader.Panel multiple options={options} onChange={onMultipleChange} disabled={disabled} />
|
||||
<Cascader.Panel />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
通过 `suffixIcon` 自定义选择框后缀图标，通过 `expandIcon` 自定义次级菜单展开图标。
|
||||
通过 `prefix` 自定前缀，通过 `suffixIcon` 自定义选择框后缀图标，通过 `expandIcon` 自定义次级菜单展开图标。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `suffixIcon` to customize the selection box suffix icon, and use `expandIcon` to customize the current item expand icon.
|
||||
Use `prefix` to customize the prefix content, use `suffixIcon` to customize the selection box suffix icon, and use `expandIcon` to customize the current item expand icon.
|
||||
|
||||
@ -70,6 +70,14 @@ const App: React.FC = () => (
|
||||
<br />
|
||||
<br />
|
||||
<Cascader expandIcon="ab" options={options} onChange={onChange} placeholder="Please select" />
|
||||
<br />
|
||||
<br />
|
||||
<Cascader
|
||||
prefix={<SmileOutlined />}
|
||||
options={options}
|
||||
onChange={onChange}
|
||||
placeholder="Please select"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ demo:
|
||||
<code src="./demo/search.tsx">Search</code>
|
||||
<code src="./demo/lazy.tsx">Load Options Lazily</code>
|
||||
<code src="./demo/fields-name.tsx">Custom Field Names</code>
|
||||
<code src="./demo/suffix.tsx" debug>Custom Icons</code>
|
||||
<code src="./demo/suffix.tsx" debug>Prefix and Suffix</code>
|
||||
<code src="./demo/custom-dropdown.tsx">Custom dropdown</code>
|
||||
<code src="./demo/placement.tsx">Placement</code>
|
||||
<code src="./demo/status.tsx">Status</code>
|
||||
@ -72,6 +72,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| options | The data options of cascade | [Option](#option)\[] | - | |
|
||||
| placeholder | The input placeholder | string | - | |
|
||||
| placement | Use preset popup align config from builtinPlacements | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
|
||||
| prefix | The custom prefix | ReactNode | - | 5.22.0 |
|
||||
| showSearch | Whether show search input in single mode | boolean \| [Object](#showsearch) | false | |
|
||||
| size | The input size | `large` \| `middle` \| `small` | - | |
|
||||
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
|
||||
|
||||
@ -32,7 +32,7 @@ demo:
|
||||
<code src="./demo/search.tsx">搜索</code>
|
||||
<code src="./demo/lazy.tsx">动态加载选项</code>
|
||||
<code src="./demo/fields-name.tsx">自定义字段名</code>
|
||||
<code src="./demo/suffix.tsx" debug>自定义图标</code>
|
||||
<code src="./demo/suffix.tsx" debug>前后缀</code>
|
||||
<code src="./demo/custom-dropdown.tsx">扩展菜单</code>
|
||||
<code src="./demo/placement.tsx">弹出位置</code>
|
||||
<code src="./demo/status.tsx">自定义状态</code>
|
||||
@ -73,6 +73,7 @@ demo:
|
||||
| options | 可选项数据源 | [Option](#option)\[] | - | |
|
||||
| placeholder | 输入框占位文本 | string | - | |
|
||||
| placement | 浮层预设位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
|
||||
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
||||
| showSearch | 在选择框中显示搜索框 | boolean \| [Object](#showsearch) | false | |
|
||||
| size | 输入框大小 | `large` \| `middle` \| `small` | - | |
|
||||
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
||||
|
||||
@ -430,12 +430,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-header-collapsible-only"
|
||||
class="ant-collapse-header ant-collapse-collapsible-header"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-expand-icon"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="expanded"
|
||||
@ -459,7 +461,11 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header-text"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
This panel can only be collapsed by clicking text
|
||||
</span>
|
||||
@ -490,12 +496,14 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-icon-collapsible-only"
|
||||
class="ant-collapse-header ant-collapse-collapsible-icon"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-expand-icon"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="expanded"
|
||||
@ -552,7 +560,7 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
class="ant-collapse-header ant-collapse-collapsible-disabled"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -1093,30 +1101,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="start"
|
||||
>
|
||||
start
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="start"
|
||||
>
|
||||
start
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -424,12 +424,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-header-collapsible-only"
|
||||
class="ant-collapse-header ant-collapse-collapsible-header"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-expand-icon"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="expanded"
|
||||
@ -453,7 +455,11 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header-text"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
This panel can only be collapsed by clicking text
|
||||
</span>
|
||||
@ -484,12 +490,14 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header ant-collapse-icon-collapsible-only"
|
||||
class="ant-collapse-header ant-collapse-collapsible-icon"
|
||||
>
|
||||
<div
|
||||
aria-disabled="false"
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-expand-icon"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="expanded"
|
||||
@ -546,7 +554,7 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
|
||||
<div
|
||||
aria-disabled="true"
|
||||
aria-expanded="false"
|
||||
class="ant-collapse-header"
|
||||
class="ant-collapse-header ant-collapse-collapsible-disabled"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
@ -1081,29 +1089,33 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="start"
|
||||
>
|
||||
start
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="start"
|
||||
>
|
||||
start
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
@ -149,7 +149,15 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-icon-collapsible-only`]: {
|
||||
[`${componentCls}-collapsible-header`]: {
|
||||
cursor: 'default',
|
||||
[`${componentCls}-header-text`]: {
|
||||
flex: 'none',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-collapsible-icon`]: {
|
||||
cursor: 'unset',
|
||||
|
||||
[`${componentCls}-expand-icon`]: {
|
||||
|
||||
@ -60,6 +60,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
getPopupContainer,
|
||||
autoAdjustOverflow = true,
|
||||
destroyTooltipOnHide,
|
||||
disabledFormat,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
@ -248,6 +249,7 @@ const ColorPicker: CompoundedComponent = (props) => {
|
||||
onActive={setActiveIndex}
|
||||
gradientDragging={gradientDragging}
|
||||
onGradientDragging={setGradientDragging}
|
||||
disabledFormat={disabledFormat}
|
||||
/>
|
||||
</ContextIsolator>
|
||||
}
|
||||
|
||||
@ -35,6 +35,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
onFormatChange,
|
||||
gradientDragging,
|
||||
onGradientDragging,
|
||||
disabledFormat,
|
||||
} = props;
|
||||
const colorPickerPanelPrefixCls = `${prefixCls}-inner`;
|
||||
|
||||
@ -57,6 +58,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
onFormatChange,
|
||||
gradientDragging,
|
||||
onGradientDragging,
|
||||
disabledFormat,
|
||||
}),
|
||||
[
|
||||
prefixCls,
|
||||
@ -75,6 +77,7 @@ const ColorPickerPanel: FC<ColorPickerPanelProps> = (props) => {
|
||||
onFormatChange,
|
||||
gradientDragging,
|
||||
onGradientDragging,
|
||||
disabledFormat,
|
||||
],
|
||||
);
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -141,30 +141,34 @@ exports[`ColorPicker Should panelRender work 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -425,30 +429,34 @@ exports[`ColorPicker Should panelRender work 2`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="HEX"
|
||||
>
|
||||
HEX
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
4
components/color-picker/__tests__/a11y.test.ts
Normal file
4
components/color-picker/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
// skip _InternalPanelDoNotUseOrYouWillBeFired
|
||||
accessibilityDemoTest('color-picker', { skip: ['pure-panel.tsx'] });
|
||||
@ -948,4 +948,33 @@ describe('ColorPicker', () => {
|
||||
const onChangeColor = onChange.mock.calls[0][0];
|
||||
expect(onChangeColor.toHexString()).toBe('#2ddcb4');
|
||||
});
|
||||
|
||||
describe('should disable colorInput', () => {
|
||||
it('Should defaultValue work with disabledFormat', async () => {
|
||||
const { container } = render(<ColorPicker defaultValue="#000000" disabledFormat />);
|
||||
expect(
|
||||
container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
|
||||
).toEqual('background: rgb(0, 0, 0);');
|
||||
fireEvent.click(container.querySelector('.ant-color-picker-trigger')!);
|
||||
expect(container.querySelector('.ant-color-picker-input-container .ant-select')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('Should rgb input work with disabledFormat', async () => {
|
||||
const { container } = render(<ColorPicker open format="rgb" disabledFormat />);
|
||||
const rgbInputEls = container.querySelectorAll('.ant-color-picker-rgb-input input');
|
||||
fireEvent.change(rgbInputEls[0], {
|
||||
target: { value: 99 },
|
||||
});
|
||||
fireEvent.change(rgbInputEls[1], {
|
||||
target: { value: 21 },
|
||||
});
|
||||
fireEvent.change(rgbInputEls[2], {
|
||||
target: { value: 21 },
|
||||
});
|
||||
expect(
|
||||
container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'),
|
||||
).toEqual('background: rgb(99, 21, 21);');
|
||||
expect(container.querySelector('.ant-color-picker-input-container .ant-select')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,6 +18,7 @@ interface ColorInputProps {
|
||||
disabledAlpha?: boolean;
|
||||
value?: AggregationColor;
|
||||
onChange?: (value: AggregationColor) => void;
|
||||
disabledFormat?: boolean;
|
||||
}
|
||||
|
||||
const selectOptions = [ColorFormat.hex, ColorFormat.hsb, ColorFormat.rgb].map((format) => ({
|
||||
@ -26,7 +27,8 @@ const selectOptions = [ColorFormat.hex, ColorFormat.hsb, ColorFormat.rgb].map((f
|
||||
}));
|
||||
|
||||
const ColorInput: FC<ColorInputProps> = (props) => {
|
||||
const { prefixCls, format, value, disabledAlpha, onFormatChange, onChange } = props;
|
||||
const { prefixCls, format, value, disabledAlpha, onFormatChange, onChange, disabledFormat } =
|
||||
props;
|
||||
const [colorFormat, setColorFormat] = useMergedState(ColorFormat.hex, {
|
||||
value: format,
|
||||
onChange: onFormatChange,
|
||||
@ -53,17 +55,19 @@ const ColorInput: FC<ColorInputProps> = (props) => {
|
||||
|
||||
return (
|
||||
<div className={`${colorInputPrefixCls}-container`}>
|
||||
<Select
|
||||
value={colorFormat}
|
||||
variant="borderless"
|
||||
getPopupContainer={(current) => current}
|
||||
popupMatchSelectWidth={68}
|
||||
placement="bottomRight"
|
||||
onChange={handleFormatChange}
|
||||
className={`${prefixCls}-format-select`}
|
||||
size="small"
|
||||
options={selectOptions}
|
||||
/>
|
||||
{!disabledFormat && (
|
||||
<Select
|
||||
value={colorFormat}
|
||||
variant="borderless"
|
||||
getPopupContainer={(current) => current}
|
||||
popupMatchSelectWidth={68}
|
||||
placement="bottomRight"
|
||||
onChange={handleFormatChange}
|
||||
className={`${prefixCls}-format-select`}
|
||||
size="small"
|
||||
options={selectOptions}
|
||||
/>
|
||||
)}
|
||||
<div className={colorInputPrefixCls}>{steppersNode}</div>
|
||||
{!disabledAlpha && (
|
||||
<ColorAlphaInput prefixCls={prefixCls} value={value} onChange={onChange} />
|
||||
|
||||
@ -31,6 +31,7 @@ export interface PanelPickerContextProps {
|
||||
onGradientDragging: (dragging: boolean) => void;
|
||||
|
||||
onClear?: () => void;
|
||||
disabledFormat?: boolean;
|
||||
}
|
||||
|
||||
export interface PanelPresetsContextProps {
|
||||
|
||||
@ -49,6 +49,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| defaultFormat | Default format of color | `rgb` \| `hex` \| `hsb` | - | 5.9.0 |
|
||||
| disabled | Disable ColorPicker | boolean | - | |
|
||||
| disabledAlpha | Disable Alpha | boolean | - | 5.8.0 |
|
||||
| disabledFormat | Disable format of color | boolean | - |
|
||||
| destroyTooltipOnHide | Whether destroy popover when hidden | `boolean` | false | 5.7.0 |
|
||||
| format | Format of color | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| mode | Configure single or gradient color | `('single' \| 'gradient')[]` | `single` | 5.20.0 |
|
||||
|
||||
@ -50,6 +50,7 @@ group:
|
||||
| defaultFormat | 颜色格式默认的值 | `rgb` \| `hex` \| `hsb` | - | 5.9.0 |
|
||||
| disabled | 禁用颜色选择器 | boolean | - | |
|
||||
| disabledAlpha | 禁用透明度 | boolean | - | 5.8.0 |
|
||||
| disabledFormat | 禁用选择颜色格式 | boolean | - |
|
||||
| destroyTooltipOnHide | 关闭后是否销毁弹窗 | `boolean` | false | 5.7.0 |
|
||||
| format | 颜色格式 | `rgb` \| `hex` \| `hsb` | `hex` | |
|
||||
| mode | 选择器模式，用于配置单色与渐变 | `('single' \| 'gradient')[]` | `single` | 5.20.0 |
|
||||
|
||||
@ -88,4 +88,5 @@ export type ColorPickerProps = Omit<
|
||||
onChange?: (value: AggregationColor, css: string) => void;
|
||||
onClear?: () => void;
|
||||
onChangeComplete?: (value: AggregationColor) => void;
|
||||
disabledFormat?: boolean;
|
||||
} & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -9,29 +9,33 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -67,28 +71,32 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -124,28 +132,32 @@ exports[`ConfigProvider.Popup disable virtual if dropdownMatchSelectWidth is fal
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -186,29 +198,33 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -244,28 +260,32 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -301,28 +321,32 @@ exports[`ConfigProvider.Popup disable virtual if is false 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -363,29 +387,33 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -421,28 +449,32 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -478,28 +510,32 @@ exports[`ConfigProvider.Popup disable virtual if popupMatchSelectWidth is false
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="true"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -6987,6 +6987,181 @@ exports[`renders components/date-picker/demo/suffix.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-picker ant-picker-outlined"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
placeholder="Select week"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-picker ant-picker-range ant-picker-outlined"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="start"
|
||||
placeholder="Start week"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-range-separator"
|
||||
>
|
||||
<span
|
||||
aria-label="to"
|
||||
class="ant-picker-separator"
|
||||
>
|
||||
<span
|
||||
aria-label="swap-right"
|
||||
class="anticon anticon-swap-right"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="swap-right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
autocomplete="off"
|
||||
date-range="end"
|
||||
placeholder="End week"
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-active-bar"
|
||||
style="position:absolute;width:0"
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -7004,29 +7179,33 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Time"
|
||||
>
|
||||
Time
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Time"
|
||||
>
|
||||
Time
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
最简单的用法，在浮层中可以选择或者输入日期。
|
||||
自定义前缀 `prefix` 和后缀图标 `suffixIcon`。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic use case. Users can select or input a date in panel.
|
||||
Custom `prefix` and `suffixIcon`.
|
||||
|
||||
@ -20,6 +20,8 @@ const App: React.FC = () => (
|
||||
<DatePicker suffixIcon="ab" onChange={onChange} picker="month" />
|
||||
<RangePicker suffixIcon="ab" onChange={onChange} />
|
||||
<DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
|
||||
<DatePicker prefix={smileIcon} onChange={onChange} picker="week" />
|
||||
<RangePicker prefix={smileIcon} onChange={onChange} picker="week" />
|
||||
</Space>
|
||||
);
|
||||
|
||||
|
||||
@ -42,7 +42,7 @@ By clicking the input box, you can select a date from a popup calendar.
|
||||
<code src="./demo/placement.tsx">Placement</code>
|
||||
<code src="./demo/mode.tsx" debug>Controlled Panels</code>
|
||||
<code src="./demo/start-end.tsx" debug>Customized Range Picker</code>
|
||||
<code src="./demo/suffix.tsx" debug>Suffix</code>
|
||||
<code src="./demo/suffix.tsx">Prefix and Suffix</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
@ -117,6 +117,7 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
|
||||
| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
|
||||
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
|
||||
| prefix | The custom prefix | ReactNode | - | 5.22.0 |
|
||||
| presets | The preset ranges for quick selection, Since `5.8.0`, preset value supports callback function. | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }\[] | - | |
|
||||
| prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
|
||||
| size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
|
||||
|
||||
@ -43,7 +43,7 @@ demo:
|
||||
<code src="./demo/placement.tsx">弹出位置</code>
|
||||
<code src="./demo/mode.tsx" debug>受控面板</code>
|
||||
<code src="./demo/start-end.tsx" debug>自定义日期范围选择</code>
|
||||
<code src="./demo/suffix.tsx" debug>后缀图标</code>
|
||||
<code src="./demo/suffix.tsx">前后缀</code>
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
@ -118,6 +118,7 @@ dayjs.locale('zh-cn');
|
||||
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
|
||||
| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
|
||||
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
|
||||
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
||||
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
|
||||
| presets | 预设时间范围快捷选择, 自 `5.8.0` 起 value 支持函数返回值 | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }\[] | - | |
|
||||
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
|
||||
|
||||
@ -111,6 +111,10 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
|
||||
borderRadius,
|
||||
transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}, background ${motionDurationMid}`,
|
||||
|
||||
[`${componentCls}-prefix`]: {
|
||||
marginInlineEnd: token.inputAffixPadding,
|
||||
},
|
||||
|
||||
// ======================== Input =========================
|
||||
[`${componentCls}-input`]: {
|
||||
position: 'relative',
|
||||
|
||||
@ -141,6 +141,112 @@ exports[`renders components/descriptions/demo/basic.tsx extend context correctly
|
||||
|
||||
exports[`renders components/descriptions/demo/basic.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/descriptions/demo/block.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-descriptions ant-descriptions-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-header"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-title"
|
||||
>
|
||||
User Info
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-descriptions-view"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
UserName
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Zhou Maomao
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Live
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Hangzhou, Zhejiang
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Remark
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
empty
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Address
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/descriptions/demo/block.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/descriptions/demo/border.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-descriptions ant-descriptions-bordered"
|
||||
|
||||
@ -127,6 +127,106 @@ exports[`renders components/descriptions/demo/basic.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/descriptions/demo/block.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-descriptions ant-descriptions-bordered"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-header"
|
||||
>
|
||||
<div
|
||||
class="ant-descriptions-title"
|
||||
>
|
||||
User Info
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-descriptions-view"
|
||||
>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
UserName
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Zhou Maomao
|
||||
</span>
|
||||
</td>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Live
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="3"
|
||||
>
|
||||
<span>
|
||||
Hangzhou, Zhejiang
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Remark
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="5"
|
||||
>
|
||||
<span>
|
||||
empty
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-descriptions-row"
|
||||
>
|
||||
<th
|
||||
class="ant-descriptions-item-label"
|
||||
colspan="1"
|
||||
>
|
||||
<span>
|
||||
Address
|
||||
</span>
|
||||
</th>
|
||||
<td
|
||||
class="ant-descriptions-item-content"
|
||||
colspan="5"
|
||||
>
|
||||
<span>
|
||||
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/descriptions/demo/border.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-descriptions ant-descriptions-bordered"
|
||||
|
||||
3
components/descriptions/__tests__/a11y.test.ts
Normal file
3
components/descriptions/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('descriptions');
|
||||
@ -78,6 +78,30 @@ describe('Descriptions', () => {
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[2]).toHaveAttribute('colSpan', '1');
|
||||
});
|
||||
|
||||
it('span = filled', () => {
|
||||
const { container } = render(
|
||||
<Descriptions
|
||||
column={3}
|
||||
items={[
|
||||
{ label: '0', children: '', span: 2 },
|
||||
{ label: '1', children: '' },
|
||||
{ label: '2', children: '' },
|
||||
{ label: '3', children: '', span: 'filled' },
|
||||
{ label: '4', children: '', span: 'filled' },
|
||||
{ label: '5', children: '' },
|
||||
{ label: '6', children: '', span: 1 },
|
||||
]}
|
||||
/>,
|
||||
);
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[0]).toHaveAttribute('colSpan', '2');
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[1]).toHaveAttribute('colSpan', '1');
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[2]).toHaveAttribute('colSpan', '1');
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[3]).toHaveAttribute('colSpan', '2');
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[4]).toHaveAttribute('colSpan', '3');
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[5]).toHaveAttribute('colSpan', '1');
|
||||
expect(container.querySelectorAll('.ant-descriptions-item')[6]).toHaveAttribute('colSpan', '2');
|
||||
});
|
||||
|
||||
it('column is number', () => {
|
||||
const wrapper = render(
|
||||
<Descriptions column={3}>
|
||||
|
||||
7
components/descriptions/demo/block.md
Normal file
7
components/descriptions/demo/block.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
整行的展示。
|
||||
|
||||
## en-US
|
||||
|
||||
Display of the entire line.
|
||||
29
components/descriptions/demo/block.tsx
Normal file
29
components/descriptions/demo/block.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import { Descriptions } from 'antd';
|
||||
import type { DescriptionsProps } from 'antd';
|
||||
|
||||
const items: DescriptionsProps['items'] = [
|
||||
{
|
||||
label: 'UserName',
|
||||
children: 'Zhou Maomao',
|
||||
},
|
||||
{
|
||||
label: 'Live',
|
||||
span: 'filled', // span = 2
|
||||
children: 'Hangzhou, Zhejiang',
|
||||
},
|
||||
{
|
||||
label: 'Remark',
|
||||
span: 'filled', // span = 3
|
||||
children: 'empty',
|
||||
},
|
||||
{
|
||||
label: 'Address',
|
||||
span: 1, // span will be 3 and warning for span is not align to the end
|
||||
children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => <Descriptions bordered title="User Info" items={items} />;
|
||||
|
||||
export default App;
|
||||
@ -1,7 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
带边框和背景颜色列表。
|
||||
复杂文本的情况。
|
||||
|
||||
## en-US
|
||||
|
||||
Descriptions with border and background color.
|
||||
The situation of complex text.
|
||||
|
||||
@ -23,10 +23,15 @@ export default function useItems(
|
||||
|
||||
const responsiveItems = React.useMemo<InternalDescriptionsItemType[]>(
|
||||
() =>
|
||||
mergedItems.map(({ span, ...restItem }) => ({
|
||||
...restItem,
|
||||
span: typeof span === 'number' ? span : matchScreen(screens, span),
|
||||
})),
|
||||
mergedItems.map(({ span, ...restItem }) => {
|
||||
if (span === 'filled') {
|
||||
return { ...restItem, filled: true };
|
||||
}
|
||||
return {
|
||||
...restItem,
|
||||
span: typeof span === 'number' ? span : matchScreen(screens, span),
|
||||
};
|
||||
}),
|
||||
[mergedItems, screens],
|
||||
);
|
||||
|
||||
|
||||
@ -3,65 +3,61 @@ import { useMemo } from 'react';
|
||||
import type { InternalDescriptionsItemType } from '..';
|
||||
import { devUseWarning } from '../../_util/warning';
|
||||
|
||||
function getFilledItem(
|
||||
rowItem: InternalDescriptionsItemType,
|
||||
rowRestCol: number,
|
||||
span?: number,
|
||||
): [item: InternalDescriptionsItemType, exceed: boolean] {
|
||||
let clone = rowItem;
|
||||
let exceed = false;
|
||||
|
||||
if (span === undefined || span > rowRestCol) {
|
||||
clone = {
|
||||
...rowItem,
|
||||
span: rowRestCol,
|
||||
};
|
||||
|
||||
exceed = span !== undefined;
|
||||
}
|
||||
return [clone, exceed];
|
||||
}
|
||||
|
||||
// Calculate the sum of span in a row
|
||||
function getCalcRows(
|
||||
rowItems: InternalDescriptionsItemType[],
|
||||
mergedColumn: number,
|
||||
): [rows: InternalDescriptionsItemType[][], exceed: boolean] {
|
||||
const rows: InternalDescriptionsItemType[][] = [];
|
||||
let rows: InternalDescriptionsItemType[][] = [];
|
||||
let tmpRow: InternalDescriptionsItemType[] = [];
|
||||
let rowRestCol = mergedColumn;
|
||||
let exceed = false;
|
||||
let count = 0;
|
||||
|
||||
rowItems
|
||||
.filter((n) => n)
|
||||
.forEach((rowItem, index) => {
|
||||
const span = rowItem?.span;
|
||||
const mergedSpan = span || 1;
|
||||
.forEach((rowItem) => {
|
||||
const { filled, ...restItem } = rowItem;
|
||||
|
||||
// Additional handle last one
|
||||
if (index === rowItems.length - 1) {
|
||||
const [item, itemExceed] = getFilledItem(rowItem, rowRestCol, span);
|
||||
exceed = exceed || itemExceed;
|
||||
|
||||
tmpRow.push(item);
|
||||
if (filled) {
|
||||
tmpRow.push(restItem);
|
||||
rows.push(tmpRow);
|
||||
// reset
|
||||
tmpRow = [];
|
||||
count = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
if (mergedSpan < rowRestCol) {
|
||||
rowRestCol -= mergedSpan;
|
||||
tmpRow.push(rowItem);
|
||||
} else {
|
||||
const [item, itemExceed] = getFilledItem(rowItem, rowRestCol, mergedSpan);
|
||||
exceed = exceed || itemExceed;
|
||||
|
||||
tmpRow.push(item);
|
||||
const restSpan = mergedColumn - count;
|
||||
count += rowItem.span || 1;
|
||||
if (count >= mergedColumn) {
|
||||
if (count > mergedColumn) {
|
||||
exceed = true;
|
||||
tmpRow.push({ ...restItem, span: restSpan });
|
||||
} else {
|
||||
tmpRow.push(restItem);
|
||||
}
|
||||
rows.push(tmpRow);
|
||||
rowRestCol = mergedColumn;
|
||||
// reset
|
||||
tmpRow = [];
|
||||
count = 0;
|
||||
} else {
|
||||
tmpRow.push(restItem);
|
||||
}
|
||||
});
|
||||
|
||||
if (tmpRow.length > 0) {
|
||||
rows.push(tmpRow);
|
||||
}
|
||||
|
||||
rows = rows.map((rows) => {
|
||||
const count = rows.reduce((acc, item) => acc + (item.span || 1), 0);
|
||||
if (count < mergedColumn) {
|
||||
// If the span of the last element in the current row is less than the column, then add its span to the remaining columns
|
||||
const last = rows[rows.length - 1];
|
||||
last.span = mergedColumn - count + 1;
|
||||
return rows;
|
||||
}
|
||||
return rows;
|
||||
});
|
||||
return [rows, exceed];
|
||||
}
|
||||
|
||||
|
||||
@ -71,6 +71,7 @@ const items: DescriptionsProps['items'] = [
|
||||
<code src="./demo/style.tsx" debug>Customize label & wrapper style</code>
|
||||
<code src="./demo/jsx.tsx" debug>JSX demo</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
<code src="./demo/block.tsx">row</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -98,7 +99,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| contentStyle | Customize content style | CSSProperties | - | 4.9.0 |
|
||||
| label | The description of the content | ReactNode | - | |
|
||||
| labelStyle | Customize label style | CSSProperties | - | 4.9.0 |
|
||||
| span | The number of columns included | number \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0` |
|
||||
| span | The number of columns included(`filled` Fill the remaining part of the current row) | number \| `filled` \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0`, `filled: 5.22.0` |
|
||||
|
||||
> The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict.
|
||||
|
||||
|
||||
@ -22,10 +22,12 @@ interface CompoundedComponent {
|
||||
|
||||
export interface InternalDescriptionsItemType extends DescriptionsItemProps {
|
||||
key?: React.Key;
|
||||
filled?: boolean;
|
||||
}
|
||||
|
||||
export interface DescriptionsItemType extends Omit<InternalDescriptionsItemType, 'span'> {
|
||||
span?: number | { [key in Breakpoint]?: number };
|
||||
export interface DescriptionsItemType
|
||||
extends Omit<InternalDescriptionsItemType, 'span' | 'filled'> {
|
||||
span?: number | 'filled' | { [key in Breakpoint]?: number };
|
||||
}
|
||||
|
||||
export interface DescriptionsProps {
|
||||
|
||||
@ -72,6 +72,7 @@ const items: DescriptionsProps['items'] = [
|
||||
<code src="./demo/style.tsx" debug>自定义 label & wrapper 样式</code>
|
||||
<code src="./demo/jsx.tsx" debug>JSX demo</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
<code src="./demo/block.tsx">整行</code>
|
||||
|
||||
## API
|
||||
|
||||
@ -99,7 +100,7 @@ const items: DescriptionsProps['items'] = [
|
||||
| contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 |
|
||||
| label | 内容的描述 | ReactNode | - | |
|
||||
| labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 |
|
||||
| span | 包含列的数量 | number \| [Screens](/components/grid-cn#col) | 1 | `screens: 5.9.0` |
|
||||
| span | 包含列的数量（`filled` 铺满当前行剩余部分） | number\| `filled` \| [Screens](/components/grid-cn#col) | 1 | `screens: 5.9.0`，`filled: 5.22.0` |
|
||||
|
||||
> span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
||||
|
||||
|
||||
3
components/divider/__tests__/a11y.test.ts
Normal file
3
components/divider/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('divider');
|
||||
@ -994,30 +994,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="owner_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="owner_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="owner"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please select an owner
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="owner_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="owner_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="owner"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please select an owner
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -1171,30 +1175,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="type_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="type_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="type"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please choose the type
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="type_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="type_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="type"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please choose the type
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -1353,30 +1361,34 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="approver_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="approver_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="approver"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please choose the approver
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="approver_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="approver_list"
|
||||
aria-required="true"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="approver"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
Please choose the approver
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
||||
3
components/drawer/__tests__/a11y.test.ts
Normal file
3
components/drawer/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('drawer', { disabledRules: ['image-alt'] });
|
||||
3
components/dropdown/__tests__/a11y.test.ts
Normal file
3
components/dropdown/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('dropdown');
|
||||
@ -132,28 +132,32 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
|
||||
@ -241,28 +245,32 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-tree-select-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
|
||||
@ -349,25 +357,29 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
|
||||
|
||||
@ -130,27 +130,31 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -198,27 +202,31 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -266,24 +274,28 @@ Array [
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
role="combobox"
|
||||
type="search"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
|
||||
3
components/empty/__tests__/a11y.test.ts
Normal file
3
components/empty/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('empty', { disabledRules: ['label'] });
|
||||
3
components/float-button/__tests__/a11y.test.ts
Normal file
3
components/float-button/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('float-button', { disabledRules: ['button-name'] });
|
||||
@ -31,6 +31,10 @@ export type RequiredMark =
|
||||
export type FormLayout = 'horizontal' | 'inline' | 'vertical';
|
||||
export type FormItemLayout = 'horizontal' | 'vertical';
|
||||
|
||||
export type ScrollFocusOptions = Options & {
|
||||
focus?: boolean;
|
||||
};
|
||||
|
||||
export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form'> {
|
||||
prefixCls?: string;
|
||||
colon?: boolean;
|
||||
@ -44,7 +48,7 @@ export interface FormProps<Values = any> extends Omit<RcFormProps<Values>, 'form
|
||||
feedbackIcons?: FeedbackIcons;
|
||||
size?: SizeType;
|
||||
disabled?: boolean;
|
||||
scrollToFirstError?: Options | boolean;
|
||||
scrollToFirstError?: ScrollFocusOptions | boolean;
|
||||
requiredMark?: RequiredMark;
|
||||
/** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
|
||||
hideRequiredMark?: boolean;
|
||||
@ -166,13 +170,16 @@ const InternalForm: React.ForwardRefRenderFunction<FormRef, FormProps> = (props,
|
||||
nativeElement: nativeElementRef.current?.nativeElement,
|
||||
}));
|
||||
|
||||
const scrollToField = (options: boolean | Options, fieldName: InternalNamePath) => {
|
||||
const scrollToField = (options: ScrollFocusOptions | boolean, fieldName: InternalNamePath) => {
|
||||
if (options) {
|
||||
let defaultScrollToFirstError: Options = { block: 'nearest' };
|
||||
let defaultScrollToFirstError: ScrollFocusOptions = { block: 'nearest' };
|
||||
if (typeof options === 'object') {
|
||||
defaultScrollToFirstError = options;
|
||||
defaultScrollToFirstError = { ...defaultScrollToFirstError, ...options };
|
||||
}
|
||||
wrapForm.scrollToField(fieldName, defaultScrollToFirstError);
|
||||
if (defaultScrollToFirstError.focus) {
|
||||
wrapForm.focusField(fieldName);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import * as React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { get, set } from 'rc-util';
|
||||
import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
|
||||
|
||||
import type { ColProps } from '../grid/col';
|
||||
import Col from '../grid/col';
|
||||
@ -30,17 +32,21 @@ interface FormItemInputMiscProps {
|
||||
}
|
||||
|
||||
export interface FormItemInputProps {
|
||||
labelCol?: ColProps;
|
||||
wrapperCol?: ColProps;
|
||||
extra?: React.ReactNode;
|
||||
status?: ValidateStatus;
|
||||
help?: React.ReactNode;
|
||||
fieldId?: string;
|
||||
label?: React.ReactNode;
|
||||
}
|
||||
const GRID_MAX = 24;
|
||||
|
||||
const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (props) => {
|
||||
const {
|
||||
prefixCls,
|
||||
status,
|
||||
labelCol,
|
||||
wrapperCol,
|
||||
children,
|
||||
errors,
|
||||
@ -51,19 +57,51 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
|
||||
fieldId,
|
||||
marginBottom,
|
||||
onErrorVisibleChanged,
|
||||
label,
|
||||
} = props;
|
||||
const baseClassName = `${prefixCls}-item`;
|
||||
|
||||
const formContext = React.useContext(FormContext);
|
||||
|
||||
const mergedWrapperCol: ColProps = wrapperCol || formContext.wrapperCol || {};
|
||||
const mergedWrapperCol = React.useMemo(() => {
|
||||
let mergedWrapper: ColProps = { ...(wrapperCol || formContext.wrapperCol || {}) };
|
||||
if (label === null && !labelCol && !wrapperCol && formContext.labelCol) {
|
||||
const list = [undefined, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
|
||||
|
||||
list.forEach((size) => {
|
||||
const _size = size ? [size] : [];
|
||||
|
||||
const formLabel = get(formContext.labelCol, _size);
|
||||
const formLabelObj = typeof formLabel === 'object' ? formLabel : {};
|
||||
|
||||
const wrapper = get(mergedWrapper, _size);
|
||||
const wrapperObj = typeof wrapper === 'object' ? wrapper : {};
|
||||
|
||||
if ('span' in formLabelObj && !('offset' in wrapperObj) && formLabelObj.span < GRID_MAX) {
|
||||
mergedWrapper = set(mergedWrapper, [..._size, 'offset'], formLabelObj.span);
|
||||
}
|
||||
});
|
||||
}
|
||||
return mergedWrapper;
|
||||
}, [wrapperCol, formContext]);
|
||||
|
||||
const className = classNames(`${baseClassName}-control`, mergedWrapperCol.className);
|
||||
|
||||
// Pass to sub FormItem should not with col info
|
||||
const subFormContext = React.useMemo(() => ({ ...formContext }), [formContext]);
|
||||
delete subFormContext.labelCol;
|
||||
delete subFormContext.wrapperCol;
|
||||
const subFormContext = React.useMemo(() => {
|
||||
const { labelCol, wrapperCol, ...rest } = formContext;
|
||||
return rest;
|
||||
}, [formContext]);
|
||||
|
||||
const extraRef = React.useRef<HTMLDivElement>(null);
|
||||
const [extraHeight, setExtraHeight] = React.useState<number>(0);
|
||||
useLayoutEffect(() => {
|
||||
if (extra && extraRef.current) {
|
||||
setExtraHeight(extraRef.current.clientHeight);
|
||||
} else {
|
||||
setExtraHeight(0);
|
||||
}
|
||||
}, [extra]);
|
||||
|
||||
const inputDom: React.ReactNode = (
|
||||
<div className={`${baseClassName}-control-input`}>
|
||||
@ -73,20 +111,17 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
|
||||
const formItemContext = React.useMemo(() => ({ prefixCls, status }), [prefixCls, status]);
|
||||
const errorListDom: React.ReactNode =
|
||||
marginBottom !== null || errors.length || warnings.length ? (
|
||||
<div style={{ display: 'flex', flexWrap: 'nowrap' }}>
|
||||
<FormItemPrefixContext.Provider value={formItemContext}>
|
||||
<ErrorList
|
||||
fieldId={fieldId}
|
||||
errors={errors}
|
||||
warnings={warnings}
|
||||
help={help}
|
||||
helpStatus={status}
|
||||
className={`${baseClassName}-explain-connected`}
|
||||
onVisibleChanged={onErrorVisibleChanged}
|
||||
/>
|
||||
</FormItemPrefixContext.Provider>
|
||||
{!!marginBottom && <div style={{ width: 0, height: marginBottom }} />}
|
||||
</div>
|
||||
<FormItemPrefixContext.Provider value={formItemContext}>
|
||||
<ErrorList
|
||||
fieldId={fieldId}
|
||||
errors={errors}
|
||||
warnings={warnings}
|
||||
help={help}
|
||||
helpStatus={status}
|
||||
className={`${baseClassName}-explain-connected`}
|
||||
onVisibleChanged={onErrorVisibleChanged}
|
||||
/>
|
||||
</FormItemPrefixContext.Provider>
|
||||
) : null;
|
||||
|
||||
const extraProps: { id?: string } = {};
|
||||
@ -98,19 +133,29 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
|
||||
// If extra = 0, && will goes wrong
|
||||
// 0&&error -> 0
|
||||
const extraDom: React.ReactNode = extra ? (
|
||||
<div {...extraProps} className={`${baseClassName}-extra`}>
|
||||
<div {...extraProps} className={`${baseClassName}-extra`} ref={extraRef}>
|
||||
{extra}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const additionalDom: React.ReactNode =
|
||||
errorListDom || extraDom ? (
|
||||
<div
|
||||
className={`${baseClassName}-additional`}
|
||||
style={marginBottom ? { minHeight: marginBottom + extraHeight } : {}}
|
||||
>
|
||||
{errorListDom}
|
||||
{extraDom}
|
||||
</div>
|
||||
) : null;
|
||||
|
||||
const dom: React.ReactNode =
|
||||
formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? (
|
||||
formItemRender.render(props, { input: inputDom, errorList: errorListDom, extra: extraDom })
|
||||
) : (
|
||||
<>
|
||||
{inputDom}
|
||||
{errorListDom}
|
||||
{extraDom}
|
||||
{additionalDom}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -294,29 +294,33 @@ exports[`Form form should support disabled 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -382,29 +386,33 @@ exports[`Form form should support disabled 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
@ -470,29 +478,33 @@ exports[`Form form should support disabled 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
|
||||
@ -534,6 +534,38 @@ describe('Form', () => {
|
||||
expect(scrollIntoView).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
|
||||
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}>
|
||||
<Form.Item name="test" rules={[{ required: true }]}>
|
||||
<input />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button htmlType="submit">Submit</Button>
|
||||
</Form.Item>
|
||||
</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();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/28869
|
||||
it('should work with Upload', async () => {
|
||||
const uploadRef = React.createRef<any>();
|
||||
@ -1335,6 +1367,104 @@ describe('Form', () => {
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('form.item should support label = null', () => {
|
||||
// base size
|
||||
const App: React.FC = () => (
|
||||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 14 }}>
|
||||
<Form.Item label="name" name="name">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={null}>
|
||||
<Button>Submit</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const { container } = render(<App />);
|
||||
|
||||
const items = container.querySelectorAll('.ant-form-item');
|
||||
const oneItems = items[0].querySelector('.ant-row')?.querySelectorAll('.ant-col');
|
||||
expect(oneItems?.[0]).toHaveClass('ant-col-4');
|
||||
expect(oneItems?.[0].className.includes('offset')).toBeFalsy();
|
||||
expect(oneItems?.[1]).toHaveClass('ant-col-14');
|
||||
expect(oneItems?.[1].className.includes('offset')).toBeFalsy();
|
||||
const twoItem = items[1].querySelector('.ant-row')?.querySelector('.ant-col');
|
||||
expect(twoItem).toHaveClass('ant-col-14 ant-col-offset-4');
|
||||
|
||||
// more size
|
||||
const list = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
|
||||
list.forEach((size) => {
|
||||
const { container } = render(
|
||||
<Form labelCol={{ [size]: { span: 4 } }} wrapperCol={{ span: 14 }}>
|
||||
<Form.Item label="name" name="name">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={null}>
|
||||
<Button>Submit</Button>
|
||||
</Form.Item>
|
||||
</Form>,
|
||||
);
|
||||
|
||||
const items = container.querySelectorAll('.ant-form-item');
|
||||
const oneItems = items[0].querySelector('.ant-row')?.querySelectorAll('.ant-col');
|
||||
expect(oneItems?.[0]).toHaveClass(`ant-col-${size}-4`);
|
||||
expect(oneItems?.[0].className.includes('offset')).toBeFalsy();
|
||||
expect(oneItems?.[1]).toHaveClass('ant-col-14');
|
||||
expect(oneItems?.[1].className.includes('offset')).toBeFalsy();
|
||||
const twoItem = items[1].querySelector('.ant-row')?.querySelector('.ant-col');
|
||||
expect(twoItem).toHaveClass(`ant-col-14 ant-col-${size}-offset-4`);
|
||||
});
|
||||
});
|
||||
|
||||
it('form.item should support label = null and labelCol.span = 24', () => {
|
||||
// base size
|
||||
const App: React.FC = () => (
|
||||
<Form labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
|
||||
<Form.Item label="name" name="name">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={null}>
|
||||
<Button>Submit</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
const { container } = render(<App />);
|
||||
|
||||
const items = container.querySelectorAll('.ant-form-item');
|
||||
const oneItems = items[0].querySelector('.ant-row')?.querySelectorAll('.ant-col');
|
||||
expect(oneItems?.[0]).toHaveClass('ant-col-24');
|
||||
expect(oneItems?.[0].className.includes('offset')).toBeFalsy();
|
||||
expect(oneItems?.[1]).toHaveClass('ant-col-24');
|
||||
expect(oneItems?.[1].className.includes('offset')).toBeFalsy();
|
||||
const twoItem = items[1].querySelector('.ant-row')?.querySelector('.ant-col');
|
||||
expect(twoItem).toHaveClass('ant-col-24');
|
||||
expect(twoItem?.className.includes('offset')).toBeFalsy();
|
||||
|
||||
// more size
|
||||
const list = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const;
|
||||
list.forEach((size) => {
|
||||
const { container } = render(
|
||||
<Form labelCol={{ [size]: { span: 24 } }} wrapperCol={{ span: 24 }}>
|
||||
<Form.Item label="name" name="name">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item label={null}>
|
||||
<Button>Submit</Button>
|
||||
</Form.Item>
|
||||
</Form>,
|
||||
);
|
||||
|
||||
const items = container.querySelectorAll('.ant-form-item');
|
||||
const oneItems = items[0].querySelector('.ant-row')?.querySelectorAll('.ant-col');
|
||||
expect(oneItems?.[0]).toHaveClass(`ant-col-${size}-24`);
|
||||
expect(oneItems?.[0].className.includes('offset')).toBeFalsy();
|
||||
expect(oneItems?.[1]).toHaveClass('ant-col-24');
|
||||
expect(oneItems?.[1].className.includes('offset')).toBeFalsy();
|
||||
const twoItem = items[1].querySelector('.ant-row')?.querySelector('.ant-col');
|
||||
expect(twoItem).toHaveClass(`ant-col-24`);
|
||||
expect(twoItem?.className.includes('offset')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
it('_internalItemRender api test', () => {
|
||||
const { container } = render(
|
||||
<Form>
|
||||
|
||||
@ -43,15 +43,11 @@ const App: React.FC = () => (
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item<FieldType>
|
||||
name="remember"
|
||||
valuePropName="checked"
|
||||
wrapperCol={{ offset: 8, span: 16 }}
|
||||
>
|
||||
<Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Form.Item label={null}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
@ -66,7 +66,7 @@ const App: React.FC = () => (
|
||||
<Input placeholder="Input birth month" />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
<Form.Item label=" " colon={false}>
|
||||
<Form.Item label={null}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
@ -33,7 +33,7 @@ const App: React.FC = () => (
|
||||
<DatePicker />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
|
||||
<Form.Item label={null}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
@ -44,7 +44,7 @@ const App: React.FC = () => (
|
||||
<Form.Item name={['user', 'introduction']} label="Introduction">
|
||||
<Input.TextArea />
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
|
||||
<Form.Item label={null}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
@ -66,7 +66,7 @@ const App: React.FC = () => (
|
||||
<Form.Item name="time-picker" label="TimePicker" {...config}>
|
||||
<TimePicker />
|
||||
</Form.Item>
|
||||
<Form.Item wrapperCol={{ xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 8 } }}>
|
||||
<Form.Item label={null}>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
|
||||
@ -7,7 +7,7 @@ const App = () => {
|
||||
return (
|
||||
<Form
|
||||
form={form}
|
||||
scrollToFirstError
|
||||
scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}
|
||||
style={{ paddingBlock: 32 }}
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
|
||||
@ -9,6 +9,7 @@ import { getFieldId, toArray } from '../util';
|
||||
|
||||
export interface FormInstance<Values = any> extends RcFormInstance<Values> {
|
||||
scrollToField: (name: NamePath, options?: ScrollOptions) => void;
|
||||
focusField: (name: NamePath) => void;
|
||||
/** @internal: This is an internal usage. Do not use in your prod */
|
||||
__INTERNAL__: {
|
||||
/** No! Do not use this in your code! */
|
||||
@ -67,6 +68,13 @@ export default function useForm<Values = any>(form?: FormInstance<Values>): [For
|
||||
} as any);
|
||||
}
|
||||
},
|
||||
focusField: (name: NamePath) => {
|
||||
const node = getFieldDOMNode(name, wrapForm);
|
||||
|
||||
if (node) {
|
||||
node.focus?.();
|
||||
}
|
||||
},
|
||||
getFieldInstance: (name: NamePath) => {
|
||||
const namePathStr = toNamePathStr(name);
|
||||
return itemsRef.current[namePathStr];
|
||||
|
||||
@ -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) | 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 | |
|
||||
| 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 |
|
||||
@ -136,8 +136,8 @@ Form field component for data bidirectional binding, validation, layout, and so
|
||||
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | 4.4.0 |
|
||||
| htmlFor | Set sub label `htmlFor` | string | - | |
|
||||
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
|
||||
| label | Label text | ReactNode | - | |
|
||||
| labelAlign | The text align of label | `left` \| `right` | `right` | |
|
||||
| label | Label text. When there is no need for a label but it needs to be aligned with a colon, it can be set to null | ReactNode | - | null: 5.22.0 |
|
||||
| labelAlign | The text align of label, | `left` \| `right` | `right` | |
|
||||
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#col) | - | |
|
||||
| messageVariables | The default validate field info, description [see below](#messagevariables) | Record<string, string> | - | 4.7.0 |
|
||||
| name | Field name, support array | [NamePath](#namepath) | - | |
|
||||
|
||||
@ -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) | false | |
|
||||
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) \| { focus: boolean } | false | |
|
||||
| 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 |
|
||||
@ -137,7 +137,7 @@ const validateMessages = {
|
||||
| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 |
|
||||
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | |
|
||||
| initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
|
||||
| label | `label` 标签的文本 | ReactNode | - | |
|
||||
| label | `label` 标签的文本，当不需要 label 又需要与冒号对齐，可以设为 null | ReactNode | - | null: 5.22.0 |
|
||||
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
|
||||
| labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid-cn#col) | - | |
|
||||
| messageVariables | 默认验证字段的信息，查看[详情](#messagevariables) | Record<string, string> | - | 4.7.0 |
|
||||
|
||||
@ -10,7 +10,7 @@ const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
|
||||
return {
|
||||
[helpCls]: {
|
||||
// Explain holder
|
||||
transition: `opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
|
||||
transition: `opacity ${token.motionDurationFast} ${token.motionEaseInOut}`,
|
||||
|
||||
'&-appear, &-enter': {
|
||||
opacity: 0,
|
||||
@ -31,9 +31,9 @@ const genFormValidateMotionStyle: GenerateStyle<FormToken> = (token) => {
|
||||
// Explain
|
||||
[helpItemCls]: {
|
||||
overflow: 'hidden',
|
||||
transition: `height ${token.motionDurationSlow} ${token.motionEaseInOut},
|
||||
opacity ${token.motionDurationSlow} ${token.motionEaseInOut},
|
||||
transform ${token.motionDurationSlow} ${token.motionEaseInOut} !important`,
|
||||
transition: `height ${token.motionDurationFast} ${token.motionEaseInOut},
|
||||
opacity ${token.motionDurationFast} ${token.motionEaseInOut},
|
||||
transform ${token.motionDurationFast} ${token.motionEaseInOut} !important`,
|
||||
|
||||
[`&${helpItemCls}-appear, &${helpItemCls}-enter`]: {
|
||||
transform: `translateY(-5px)`,
|
||||
|
||||
@ -8,8 +8,8 @@ import type {
|
||||
AliasToken,
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
GetDefaultToken,
|
||||
GenStyleFn,
|
||||
GetDefaultToken,
|
||||
} from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import genFormValidateMotionStyle from './explain';
|
||||
@ -339,6 +339,11 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
|
||||
// = Explain =
|
||||
// ==============================================================
|
||||
[formItemCls]: {
|
||||
'&-additional': {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
|
||||
'&-explain, &-extra': {
|
||||
clear: 'both',
|
||||
color: token.colorTextDescription,
|
||||
|
||||
@ -214,14 +214,14 @@ describe('Grid', () => {
|
||||
// https://github.com/ant-design/ant-design/issues/39690
|
||||
it('Justify and align properties should reactive for Row', () => {
|
||||
const ReactiveTest = () => {
|
||||
const [justify, setjustify] = useState<any>('start');
|
||||
const [justify, setJustify] = useState<any>('start');
|
||||
return (
|
||||
<>
|
||||
<Row justify={justify} align="bottom">
|
||||
<div>button1</div>
|
||||
<div>button</div>
|
||||
</Row>
|
||||
<span onClick={() => setjustify('end')} />
|
||||
<span onClick={() => setJustify('end')} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
3
components/icon/__tests__/a11y.test.ts
Normal file
3
components/icon/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('icon', { disabledRules: ['role-img-alt'] });
|
||||
3
components/image/__tests__/a11y.test.ts
Normal file
3
components/image/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('image', { disabledRules: ['image-alt', 'label'] });
|
||||
@ -120,30 +120,34 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="+"
|
||||
>
|
||||
+
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="+"
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -339,30 +343,34 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -639,29 +647,33 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
cascader
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="rc_select_TEST_OR_SSR_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="rc_select_TEST_OR_SSR_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
id="rc_select_TEST_OR_SSR"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity: 0;"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
cascader
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
@ -2823,6 +2835,152 @@ exports[`renders components/input-number/demo/filled-debug.tsx extend context co
|
||||
|
||||
exports[`renders components/input-number/demo/filled-debug.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/input-number/demo/focus.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus at first
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus at last
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus to select all
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus prevent scroll
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-outlined"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuenow="999"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="999"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/input-number/demo/focus.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/input-number/demo/formatter.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
|
||||
@ -120,29 +120,33 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="+"
|
||||
>
|
||||
+
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="+"
|
||||
>
|
||||
+
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -258,29 +262,33 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="$"
|
||||
>
|
||||
$
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -443,28 +451,32 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
class="ant-select-selection-wrap"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
cascader
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-placeholder"
|
||||
>
|
||||
cascader
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
@ -2537,6 +2549,150 @@ exports[`renders components/input-number/demo/filled-debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/input-number/demo/focus.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
style="flex-wrap:wrap"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus at first
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus at last
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus to select all
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-color-default ant-btn-variant-outlined"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Focus prevent scroll
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number ant-input-number-outlined"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
aria-valuenow="999"
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="999"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/input-number/demo/formatter.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
|
||||
|
||||
3
components/input-number/__tests__/a11y.test.ts
Normal file
3
components/input-number/__tests__/a11y.test.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import accessibilityDemoTest from '../../../tests/shared/accessibilityTest';
|
||||
|
||||
accessibilityDemoTest('input-number', { disabledRules: ['label'] });
|
||||
7
components/input-number/demo/focus.md
Normal file
7
components/input-number/demo/focus.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
聚焦额外配置属性。
|
||||
|
||||
## en-US
|
||||
|
||||
Focus with additional option.
|
||||
53
components/input-number/demo/focus.tsx
Normal file
53
components/input-number/demo/focus.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { Button, InputNumber, Space } from 'antd';
|
||||
import type { InputNumberRef } from 'rc-input-number';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const inputRef = useRef<InputNumberRef>(null);
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Space wrap>
|
||||
<Button
|
||||
onClick={() => {
|
||||
inputRef.current!.focus({
|
||||
cursor: 'start',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Focus at first
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
inputRef.current!.focus({
|
||||
cursor: 'end',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Focus at last
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
inputRef.current!.focus({
|
||||
cursor: 'all',
|
||||
});
|
||||
}}
|
||||
>
|
||||
Focus to select all
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
inputRef.current!.focus({
|
||||
preventScroll: true,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Focus prevent scroll
|
||||
</Button>
|
||||
</Space>
|
||||
<InputNumber style={{ width: '100%' }} defaultValue={999} ref={inputRef} />
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -29,6 +29,7 @@ When a numeric value needs to be provided.
|
||||
<code src="./demo/out-of-range.tsx">Out of range</code>
|
||||
<code src="./demo/presuffix.tsx">Prefix / Suffix</code>
|
||||
<code src="./demo/status.tsx">Status</code>
|
||||
<code src="./demo/focus.tsx" version="5.22.0">Focus</code>
|
||||
<code src="./demo/controls.tsx" debug>Icon</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/debug-token.tsx" debug>Override Component Style</code>
|
||||
@ -70,11 +71,11 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
|
||||
## Ref
|
||||
|
||||
| Name | Description | Version |
|
||||
| ------------- | ---------------------- | ------- |
|
||||
| blur() | Remove focus | |
|
||||
| focus() | Get focus | |
|
||||
| nativeElement | The native DOM element | 5.17.3 |
|
||||
| Name | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| blur() | Remove focus | - | |
|
||||
| focus() | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
||||
| nativeElement | The native DOM element | - | 5.17.3 |
|
||||
|
||||
## Design Token
|
||||
|
||||
|
||||
@ -10,12 +10,12 @@ import type { InputStatus } from '../_util/statusUtils';
|
||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import ConfigProvider, { ConfigContext } from '../config-provider';
|
||||
import type { Variant } from '../config-provider';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../config-provider/hooks/useSize';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import type { Variant } from '../config-provider';
|
||||
import useVariant from '../form/hooks/useVariants';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
import useStyle from './style';
|
||||
|
||||
@ -30,6 +30,7 @@ demo:
|
||||
<code src="./demo/out-of-range.tsx">超出边界</code>
|
||||
<code src="./demo/presuffix.tsx">前缀/后缀</code>
|
||||
<code src="./demo/status.tsx">自定义状态</code>
|
||||
<code src="./demo/focus.tsx" version="5.22.0">聚焦</code>
|
||||
<code src="./demo/controls.tsx" debug>图标按钮</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/debug-token.tsx" debug>覆盖组件样式</code>
|
||||
@ -71,11 +72,11 @@ demo:
|
||||
|
||||
## Ref
|
||||
|
||||
| 名称 | 描述 | 版本 |
|
||||
| ------------- | ----------------- | ------ |
|
||||
| blur() | 移除焦点 | |
|
||||
| focus() | 获取焦点 | |
|
||||
| nativeElement | 获取原生 DOM 元素 | 5.17.3 |
|
||||
| 名称 | 说明 | 参数 | 版本 |
|
||||
| --- | --- | --- | --- |
|
||||
| blur() | 移除焦点 | - | |
|
||||
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
||||
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
||||
|
||||
## 主题变量（Design Token）
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import React, { forwardRef, useContext, useEffect, useRef } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import type { InputRef, InputProps as RcInputProps } from 'rc-input';
|
||||
import RcInput from 'rc-input';
|
||||
import { InputFocusOptions, triggerFocus } from 'rc-input/lib/utils/commonUtils';
|
||||
import { composeRef } from 'rc-util/lib/ref';
|
||||
|
||||
import ContextIsolator from '../_util/ContextIsolator';
|
||||
@ -10,51 +11,21 @@ import type { InputStatus } from '../_util/statusUtils';
|
||||
import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { Variant } from '../config-provider';
|
||||
import DisabledContext from '../config-provider/DisabledContext';
|
||||
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
|
||||
import useSize from '../config-provider/hooks/useSize';
|
||||
import type { SizeType } from '../config-provider/SizeContext';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import type { Variant } from '../config-provider';
|
||||
import useVariant from '../form/hooks/useVariants';
|
||||
import { useCompactItemContext } from '../space/Compact';
|
||||
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
|
||||
import useStyle from './style';
|
||||
import { hasPrefixSuffix } from './utils';
|
||||
|
||||
export interface InputFocusOptions extends FocusOptions {
|
||||
cursor?: 'start' | 'end' | 'all';
|
||||
}
|
||||
|
||||
export type { InputFocusOptions };
|
||||
export type { InputRef };
|
||||
|
||||
export function triggerFocus(
|
||||
element?: HTMLInputElement | HTMLTextAreaElement,
|
||||
option?: InputFocusOptions,
|
||||
) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.focus(option);
|
||||
|
||||
// Selection content
|
||||
const { cursor } = option || {};
|
||||
if (cursor) {
|
||||
const len = element.value.length;
|
||||
|
||||
switch (cursor) {
|
||||
case 'start':
|
||||
element.setSelectionRange(0, 0);
|
||||
break;
|
||||
case 'end':
|
||||
element.setSelectionRange(len, len);
|
||||
break;
|
||||
default:
|
||||
element.setSelectionRange(0, len);
|
||||
}
|
||||
}
|
||||
}
|
||||
export { triggerFocus };
|
||||
|
||||
export interface InputProps
|
||||
extends Omit<
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user