mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-19 06:43:16 +08:00
feat: Dropdown support PurePanel (#36461)
* feat: Dropdown support PurePanel * chore: clean up
This commit is contained in:
二货机器人
GitHub
parent
cdbfe45df1
commit
94a3d51cb0
@ -8194,6 +8194,292 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/dropdown/demo/render-panel.md extend context correctly 1`] = `
|
||||||
|
<div
|
||||||
|
style="padding-bottom:0;position:relative"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-dropdown-trigger"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-dropdown"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
|
||||||
|
data-menu-list="true"
|
||||||
|
role="menu"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-dropdown-menu-title-content"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://www.antgroup.com"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
1st menu item
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-label="smile"
|
||||||
|
class="anticon anticon-smile ant-dropdown-menu-item-icon"
|
||||||
|
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>
|
||||||
|
<span
|
||||||
|
class="ant-dropdown-menu-title-content"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://www.aliyun.com"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
2nd menu item (disabled)
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
aria-disabled="true"
|
||||||
|
class="ant-dropdown-menu-item ant-dropdown-menu-item-disabled ant-dropdown-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-dropdown-menu-title-content"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://www.luohanacademy.com"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
3rd menu item (disabled)
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<li
|
||||||
|
class="ant-dropdown-menu-item ant-dropdown-menu-item-danger ant-dropdown-menu-item-only-child"
|
||||||
|
role="menuitem"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-dropdown-menu-title-content"
|
||||||
|
>
|
||||||
|
a danger item
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
style="display:none"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
|
||||||
|
style="opacity:0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-tooltip-arrow-content"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/dropdown/demo/selectable.md extend context correctly 1`] = `
|
exports[`renders ./components/dropdown/demo/selectable.md extend context correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<a
|
<a
|
||||||
|
|||||||
@ -858,6 +858,16 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/dropdown/demo/render-panel.md correctly 1`] = `
|
||||||
|
<div
|
||||||
|
style="padding-bottom:0;position:relative"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-dropdown-trigger"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/dropdown/demo/selectable.md correctly 1`] = `
|
exports[`renders ./components/dropdown/demo/selectable.md correctly 1`] = `
|
||||||
<a
|
<a
|
||||||
class="ant-typography ant-dropdown-trigger"
|
class="ant-typography ant-dropdown-trigger"
|
||||||
|
|||||||
66
components/dropdown/demo/render-panel.md
Normal file
66
components/dropdown/demo/render-panel.md
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
order: 999
|
||||||
|
title:
|
||||||
|
zh-CN: _InternalPanelDoNotUseOrYouWillBeFired
|
||||||
|
en-US: _InternalPanelDoNotUseOrYouWillBeFired
|
||||||
|
debug: true
|
||||||
|
---
|
||||||
|
|
||||||
|
## zh-CN
|
||||||
|
|
||||||
|
调试用组件，请勿直接使用。
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Debug usage. Do not use in your production.
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { SmileOutlined } from '@ant-design/icons';
|
||||||
|
import { Dropdown, Menu } from 'antd';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDropdown } = Dropdown;
|
||||||
|
|
||||||
|
const menu = (
|
||||||
|
<Menu
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
label: (
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
|
||||||
|
1st menu item
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
label: (
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
|
||||||
|
2nd menu item (disabled)
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
icon: <SmileOutlined />,
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
label: (
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
|
||||||
|
3rd menu item (disabled)
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '4',
|
||||||
|
danger: true,
|
||||||
|
label: 'a danger item',
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const App: React.FC = () => <InternalDropdown overlay={menu} />;
|
||||||
|
|
||||||
|
export default App;
|
||||||
|
```
|
||||||
@ -6,6 +6,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
import { OverrideProvider } from '../menu/OverrideContext';
|
import { OverrideProvider } from '../menu/OverrideContext';
|
||||||
|
import genPurePanel from '../select/PurePanel';
|
||||||
import getPlacements from '../_util/placements';
|
import getPlacements from '../_util/placements';
|
||||||
import { cloneElement } from '../_util/reactNode';
|
import { cloneElement } from '../_util/reactNode';
|
||||||
import { tuple } from '../_util/type';
|
import { tuple } from '../_util/type';
|
||||||
@ -71,6 +72,7 @@ export interface DropdownProps {
|
|||||||
|
|
||||||
interface DropdownInterface extends React.FC<DropdownProps> {
|
interface DropdownInterface extends React.FC<DropdownProps> {
|
||||||
Button: typeof DropdownButton;
|
Button: typeof DropdownButton;
|
||||||
|
_InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Dropdown: DropdownInterface = props => {
|
const Dropdown: DropdownInterface = props => {
|
||||||
@ -238,4 +240,16 @@ Dropdown.defaultProps = {
|
|||||||
mouseLeaveDelay: 0.1,
|
mouseLeaveDelay: 0.1,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// We don't care debug panel
|
||||||
|
const PurePanel = genPurePanel(Dropdown, 'dropdown', prefixCls => prefixCls);
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
const WrapPurePanel = (props: DropdownProps) => (
|
||||||
|
<PurePanel {...props}>
|
||||||
|
<span />
|
||||||
|
</PurePanel>
|
||||||
|
);
|
||||||
|
|
||||||
|
Dropdown._InternalPanelDoNotUseOrYouWillBeFired = WrapPurePanel;
|
||||||
|
|
||||||
export default Dropdown;
|
export default Dropdown;
|
||||||
|
|||||||
@ -10,6 +10,7 @@ export interface BaseProps {
|
|||||||
export default function genPurePanel<ComponentProps extends BaseProps>(
|
export default function genPurePanel<ComponentProps extends BaseProps>(
|
||||||
Component: any,
|
Component: any,
|
||||||
defaultPrefixCls?: string,
|
defaultPrefixCls?: string,
|
||||||
|
getDropdownCls?: (prefixCls: string) => string,
|
||||||
) {
|
) {
|
||||||
return function PurePanel(props: ComponentProps) {
|
return function PurePanel(props: ComponentProps) {
|
||||||
const { prefixCls: customizePrefixCls, style } = props;
|
const { prefixCls: customizePrefixCls, style } = props;
|
||||||
@ -31,7 +32,10 @@ export default function genPurePanel<ComponentProps extends BaseProps>(
|
|||||||
});
|
});
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
const popup = holderRef.current?.querySelector(`.${prefixCls}-dropdown`);
|
const dropdownCls = getDropdownCls
|
||||||
|
? `.${getDropdownCls(prefixCls)}`
|
||||||
|
: `.${prefixCls}-dropdown`;
|
||||||
|
const popup = holderRef.current?.querySelector(dropdownCls);
|
||||||
|
|
||||||
if (popup) {
|
if (popup) {
|
||||||
clearInterval(interval);
|
clearInterval(interval);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user