Browse Source
* feat: support select pure render * test: Update snapshot * chore: fix pure render export ts * chore: fix lint * test: do not care about ssrpull/36431/head
二货机器人
2 years ago
committed by
GitHub
GitHub
13 changed files with 963 additions and 0 deletions
@ -0,0 +1,67 @@ |
|||
--- |
|||
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 { Cascader } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalCascader } = Cascader; |
|||
|
|||
interface Option { |
|||
value: string | number; |
|||
label: string; |
|||
children?: Option[]; |
|||
} |
|||
|
|||
const options: Option[] = [ |
|||
{ |
|||
value: 'zhejiang', |
|||
label: 'Zhejiang', |
|||
children: [ |
|||
{ |
|||
value: 'hangzhou', |
|||
label: 'Hangzhou', |
|||
children: [ |
|||
{ |
|||
value: 'xihu', |
|||
label: 'West Lake', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: 'jiangsu', |
|||
label: 'Jiangsu', |
|||
children: [ |
|||
{ |
|||
value: 'nanjing', |
|||
label: 'Nanjing', |
|||
children: [ |
|||
{ |
|||
value: 'zhonghuamen', |
|||
label: 'Zhong Hua Men', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
|
|||
const App: React.FC = () => <InternalCascader options={options} placeholder="Please select" />; |
|||
|
|||
export default App; |
|||
``` |
|||
@ -0,0 +1,60 @@ |
|||
import * as React from 'react'; |
|||
import { ConfigContext } from '../config-provider'; |
|||
|
|||
export interface BaseProps { |
|||
prefixCls?: string; |
|||
style?: React.CSSProperties; |
|||
} |
|||
|
|||
/* istanbul ignore next */ |
|||
export default function genPurePanel<ComponentProps extends BaseProps>(Component: any) { |
|||
return function PurePanel(props: ComponentProps) { |
|||
const { prefixCls: customizePrefixCls, style } = props; |
|||
const holderRef = React.useRef<HTMLDivElement>(null); |
|||
const [popupHeight, setPopupHeight] = React.useState(0); |
|||
const [open, setOpen] = React.useState(false); |
|||
|
|||
const { getPrefixCls } = React.useContext(ConfigContext); |
|||
const prefixCls = getPrefixCls('select', customizePrefixCls); |
|||
|
|||
React.useEffect(() => { |
|||
// We do not care about ssr
|
|||
setOpen(true); |
|||
|
|||
if (typeof ResizeObserver !== 'undefined') { |
|||
const resizeObserver = new ResizeObserver(entries => { |
|||
const element: HTMLDivElement = entries[0].target as any; |
|||
setPopupHeight(element.offsetHeight + 8); |
|||
}); |
|||
|
|||
const interval = setInterval(() => { |
|||
const popup = holderRef.current?.querySelector(`.${prefixCls}-dropdown`); |
|||
|
|||
if (popup) { |
|||
clearInterval(interval); |
|||
resizeObserver.observe(popup); |
|||
} |
|||
}, 10); |
|||
|
|||
return () => { |
|||
clearInterval(interval); |
|||
resizeObserver.disconnect(); |
|||
}; |
|||
} |
|||
}, []); |
|||
|
|||
return ( |
|||
<div ref={holderRef} style={{ paddingBottom: popupHeight }}> |
|||
<Component |
|||
{...props} |
|||
style={{ |
|||
...style, |
|||
margin: 0, |
|||
}} |
|||
open={open} |
|||
getPopupContainer={() => holderRef.current!} |
|||
/> |
|||
</div> |
|||
); |
|||
} as typeof Component; |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
--- |
|||
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 { Select } 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' }, |
|||
]} |
|||
/> |
|||
); |
|||
|
|||
export default App; |
|||
``` |
|||
@ -0,0 +1,49 @@ |
|||
--- |
|||
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 { TreeSelect } from 'antd'; |
|||
import React from 'react'; |
|||
|
|||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTreeSelect } = TreeSelect; |
|||
|
|||
const treeData = [ |
|||
{ |
|||
title: 'Node1', |
|||
value: '0-0', |
|||
children: [ |
|||
{ |
|||
title: 'Child Node1', |
|||
value: '0-0-1', |
|||
}, |
|||
{ |
|||
title: 'Child Node2', |
|||
value: '0-0-2', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: 'Node2', |
|||
value: '0-1', |
|||
}, |
|||
]; |
|||
|
|||
const App: React.FC = () => ( |
|||
<InternalTreeSelect defaultValue="lucy" style={{ width: '100%' }} treeData={treeData} /> |
|||
); |
|||
|
|||
export default App; |
|||
``` |
|||
Loading…
Reference in new issue