mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

refactor: Select like PurePanel remove motion and support auto width (#37117)

Browse Source 
* refactor: Pure support open

* chore: fit content size

* test: Update snapshot

* test: back of snapshot

* test: ignore purePanel
This commit is contained in:
二货爱吃白萝卜 2022-08-17 19:57:10 +08:00 committed by GitHub
parent 133acffbf9
commit 94edd8e917
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 71 additions and 294 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/_util/PurePanel.tsx
View File

@ -1,5 +1,6 @@
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import ConfigProvider, { ConfigContext } from '../config-provider';
export interface BaseProps {
prefixCls?: string;
@ -12,11 +13,14 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
defaultPrefixCls?: string,
getDropdownCls?: (prefixCls: string) => string,
) {
return function PurePanel(props: ComponentProps) {
return function PurePanel(props: Omit<ComponentProps, 'open' | 'visible'> & { open?: boolean }) {
const { prefixCls: customizePrefixCls, style } = props;
const holderRef = React.useRef<HTMLDivElement>(null);
const [popupHeight, setPopupHeight] = React.useState(0);
const [open, setOpen] = React.useState(false);
const [open, setOpen] = useMergedState(false, {
value: props.open,
});
const { getPrefixCls } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls(defaultPrefixCls || 'select', customizePrefixCls);
@ -51,18 +55,33 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
}, []);
return (
<div ref={holderRef} style={{ paddingBottom: popupHeight, position: 'relative' }}>
<Component
{...props}
style={{
...style,
margin: 0,
}}
open={open}
visible={open}
getPopupContainer={() => holderRef.current!}
/>
</div>
<ConfigProvider
theme={{
override: {
derivative: {
motionDurationFast: '0.01s',
motionDurationMid: '0.01s',
motionDurationSlow: '0.01s',
},
},
}}
>
<div
ref={holderRef}
style={{ paddingBottom: popupHeight, position: 'relative', width: 'fit-content' }}
>
<Component
{...props}
style={{
...style,
margin: 0,
}}
open={open}
visible={open}
getPopupContainer={() => holderRef.current!}
/>
</div>
</ConfigProvider>
);
} as typeof Component;
}

2
components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1911,7 +1911,7 @@ Array [
exports[`renders ./components/cascader/demo/render-panel.md extend context correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"

2
components/cascader/__tests__/__snapshots__/demo.test.js.snap
View File

@ -805,7 +805,7 @@ Array [
exports[`renders ./components/cascader/demo/render-panel.md correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"

2
components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -39393,7 +39393,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md extend context co
exports[`renders ./components/date-picker/demo/render-panel.md extend context correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-picker"

2
components/date-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -3261,7 +3261,7 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
exports[`renders ./components/date-picker/demo/render-panel.md correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-picker"

2
components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -8478,7 +8478,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
exports[`renders ./components/dropdown/demo/render-panel.md extend context correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<span
class="ant-dropdown-trigger"

2
components/dropdown/__tests__/__snapshots__/demo.test.js.snap
View File

@ -901,7 +901,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
exports[`renders ./components/dropdown/demo/render-panel.md correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<span
class="ant-dropdown-trigger"

2
components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -221,7 +221,7 @@ Array [
exports[`renders ./components/mentions/demo/render-panel.md extend context correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-mentions"

2
components/mentions/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -221,7 +221,7 @@ Array [
exports[`renders ./components/mentions/demo/render-panel.md correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-mentions"

184
components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -4405,190 +4405,6 @@ Array [
]
`;
exports[`renders ./components/select/demo/render-panel.md extend context correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
style="width:120px;margin:0"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="undefined_list_0"
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="Lucy"
>
Lucy
</span>
</div>
<div>
<div
class="ant-select-dropdown"
style="opacity:0"
>
<div>
<div
id="undefined_list"
role="listbox"
style="height:0;width:0;overflow:hidden"
>
<div
aria-label="Jack"
aria-selected="false"
id="undefined_list_0"
role="option"
>
jack
</div>
<div
aria-label="Lucy"
aria-selected="true"
id="undefined_list_1"
role="option"
>
lucy
</div>
</div>
<div
class="rc-virtual-list"
style="position:relative"
>
<div
class="rc-virtual-list-holder"
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display:flex;flex-direction:column"
>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active"
title="Jack"
>
<div
class="ant-select-item-option-content"
>
Jack
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-selected"
title="Lucy"
>
<div
class="ant-select-item-option-content"
>
Lucy
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="Disabled"
>
<div
class="ant-select-item-option-content"
>
Disabled
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="Bamboo"
>
<div
class="ant-select-item-option-content"
>
Bamboo
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
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>
`;
exports[`renders ./components/select/demo/responsive.md extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical"

68
components/select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1717,74 +1717,6 @@ Array [
]
`;
exports[`renders ./components/select/demo/render-panel.md correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
>
<div
class="ant-select ant-select-single ant-select-show-arrow"
style="width:120px;margin:0"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-activedescendant="undefined_list_0"
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="Lucy"
>
Lucy
</span>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select:none;-webkit-user-select:none"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
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>
`;
exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
<div
class="ant-space ant-space-vertical"

2
components/select/__tests__/demo-extend.test.ts
View File

@ -1,3 +1,3 @@
import { extendTest } from '../../../tests/shared/demoTest';
extendTest('select', { skip: ['big-data.md'] });
extendTest('select', { skip: ['render-panel.md', 'big-data.md'] });

4
components/select/__tests__/demo.test.js
View File

@ -1,3 +1,5 @@
import demoTest from '../../../tests/shared/demoTest';
demoTest('select');
demoTest('select', {
skip: ['render-panel.md'],
});

34
components/select/demo/render-panel.md
View File

@ -15,23 +15,31 @@ debug: true
Debug usage. Do not use in your production.
```tsx
import { Select } from 'antd';
import { Select, Switch, Space } from 'antd';
import React from 'react';
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalSelect } = Select;
const App: React.FC = () => (
<InternalSelect
defaultValue="lucy"
style={{ width: 120 }}
options={[
{ label: 'Jack', value: 'jack' },
{ label: 'Lucy', value: 'lucy' },
{ label: 'Disabled', value: 'disabled' },
{ label: 'Bamboo', value: 'bamboo' },
]}
/>
);
const App: React.FC = () => {
const [open, setOpen] = React.useState(true);
return (
<Space direction="vertical" style={{ display: 'flex' }}>
<Switch checked={open} onChange={() => setOpen(!open)} />
<InternalSelect
defaultValue="lucy"
style={{ width: 120 }}
open={open}
options={[
{ label: 'Jack', value: 'jack' },
{ label: 'Lucy', value: 'lucy' },
{ label: 'Disabled', value: 'disabled' },
{ label: 'Bamboo', value: 'bamboo' },
]}
/>
</Space>
);
};
export default App;
```

2
components/time-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -14724,7 +14724,7 @@ Array [
exports[`renders ./components/time-picker/demo/render-panel.md extend context correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-picker"

2
components/time-picker/__tests__/__snapshots__/demo.test.js.snap
View File

@ -647,7 +647,7 @@ exports[`renders ./components/time-picker/demo/range-picker.md correctly 1`] = `
exports[`renders ./components/time-picker/demo/render-panel.md correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-picker"

2
components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1573,7 +1573,7 @@ Array [
exports[`renders ./components/tree-select/demo/render-panel.md extend context correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"

2
components/tree-select/__tests__/__snapshots__/demo.test.js.snap
View File

@ -401,7 +401,7 @@ Array [
exports[`renders ./components/tree-select/demo/render-panel.md correctly 1`] = `
<div
style="padding-bottom:0;position:relative"
style="padding-bottom:0;position:relative;width:fit-content"
>
<div
class="ant-select ant-tree-select ant-select-single ant-select-show-arrow"