Skip to content

Commit

Permalink
feat: support nested use of Popup
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeromeLin
JeromeLin committed Oct 31, 2024
1 parent 6194d09 commit d94776d
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 70 deletions.
5 changes: 4 additions & 1 deletion packages/zarm/src/popup/Popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
mountContainer={props.mountContainer}
forceRender={forceRender}
destroy={destroy}
onClick={onMaskClick}
onClick={(e) => {
e.stopPropagation();
onMaskClick && onMaskClick(e);
}}
/>
)}
<Transition
Expand Down
122 changes: 53 additions & 69 deletions packages/zarm/src/popup/demo.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,32 +110,29 @@ const Demo = () => {
visible={visible.popBottom}
direction="bottom"
onMaskClick={() => toggle('popBottom')}
afterOpen={() => console.log('打开')}
afterClose={() => console.log('关闭')}
destroy={false}
mountContainer={() => document.body}
>
<div className="popup-box">
<Button size="xs" onClick={() => toggle('picker')}>
打开Picker
</Button>
<Picker
visible={visible.picker}
value={value}
dataSource={SINGLE_DATA}
onConfirm={(selected) => {
console.log('Picker onConfirm: ', selected);
Toast.show(JSON.stringify(selected));
setValue(selected.map((item) => item.value));
toggle('picker');
}}
onCancel={() => toggle('picker')}
mountContainer={() => document.body}
/>
</div>
</Popup>

<Picker
visible={visible.picker}
value={value}
dataSource={SINGLE_DATA}
onConfirm={(selected) => {
console.log('Picker onConfirm: ', selected);
Toast.show(JSON.stringify(selected));
setValue(selected.map((item) => item.value));
toggle('picker');
}}
onCancel={() => toggle('picker')}
mountContainer={() => document.body}
/>

<Popup
visible={visible.popLeft}
onMaskClick={() => toggle('popLeft')}
Expand All @@ -149,51 +146,22 @@ const Demo = () => {
</div>
</Popup>

<Popup
visible={visible.popRight}
onMaskClick={() => toggle('popRight')}
direction="right"
afterClose={() => console.log('关闭')}
>
<Popup visible={visible.popRight} onMaskClick={() => toggle('popRight')} direction="right">
<div className="popup-box-right">
<Button size="xs" onClick={() => toggle('popRight')}>
关闭弹层
</Button>
</div>
</Popup>

<Popup
visible={visible.popCenter}
direction="center"
width="70%"
afterClose={() => console.log('关闭')}
>
<Popup visible={visible.popCenter} direction="center" width="70%">
<div className="popup-box">
<Button size="xs" onClick={() => toggle('popCenter')}>
关闭弹层
</Button>
</div>
</Popup>

<Popup
visible={visible.popCenterSpec}
direction="center"
width="70%"
afterClose={() => console.log('关闭')}
onEsc={() => {
toggle('popCenterSpec');
}}
mountContainer={() => {
return popupRef.current;
}}
>
<div className="popup-box">
<Button size="xs" onClick={() => toggle('popCenterSpec')}>
关闭弹层
</Button>
</div>
</Popup>

<Popup
visible={visible.popSpec}
onMaskClick={() => {
Expand All @@ -202,7 +170,6 @@ const Demo = () => {
}
toggle('popSpec');
}}
afterClose={() => console.log('关闭')}
onEsc={() => {
toggle('popSpec');
}}
Expand All @@ -214,6 +181,23 @@ const Demo = () => {
打开弹层
</Button>
<p>打开的modal挂载此popup上</p>
<Popup
visible={visible.popCenterSpec}
direction="center"
width="70%"
onEsc={() => {
toggle('popCenterSpec');
}}
mountContainer={() => {
return popupRef.current;
}}
>
<div className="popup-box">
<Button size="xs" onClick={() => toggle('popCenterSpec')}>
关闭弹层
</Button>
</div>
</Popup>
</div>
</Popup>
</>
Expand All @@ -225,25 +209,25 @@ ReactDOM.render(<Demo />, mountNode);

## API

| 属性 | 类型 | 默认值 | 说明 |
| :---------------- | :------------------- | :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| visible | boolean | false | 是否显示 |
| direction | string | 'bottom' | 弹出方向，可选值 `top`, `bottom`, `left`, `right`, `center` |
| 属性 | 类型 | 默认值 | 说明 |
| :---------------- | :------------------- | :------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| visible | boolean | false | 是否显示 |
| direction | string | 'bottom' | 弹出方向，可选值 `top`, `bottom`, `left`, `right`, `center` |
| animationType | string | 'fade' | 当弹出方向为中间位置（direction="center"）时的动画效果，可选值 `fade`, `door`, `flip`, `rotate`, `zoom`, `move-up`, `move-down`, `move-left`, `move-right`,`slide-up`, `slide-down`, `slide-left`, `slide-right` |
| animationDuration | number | 200 | 动画执行时间（单位：毫秒） |
| width | string &#124; number | - | 弹层宽度 |
| mask | boolean | true | 是否展示遮罩层 |
| maskClassName | string | - | 遮罩层的样式名 |
| maskStyle | React.CSSProperties | - | 遮罩层的样式 |
| maskColor | string | 'black' | 遮罩层的颜色，可选值 `black`, `white`, `transparent` |
| maskOpacity | string \| number | 'normal' | 遮罩层的透明度，可选值 `normal`, `light`, `dark`，或填写具体数值（0 ~ 1） |
| forceRender | boolean | false | 强制渲染内容 |
| destroy | boolean | true | 弹层关闭后是否移除节点 |
| onOpen | () => void | - | 弹层展示的回调 |
| onClose | () => void | - | 弹层关闭的回调 |
| afterOpen | () => void | - | 弹层展示后的回调 |
| afterClose | () => void | - | 弹层关闭后的回调 |
| onMaskClick | () => void | - | 点击遮罩层时触发的回调函数 |
| onEsc | () => void | - | 点击 Esc 键时触发的回调函数 |
| mountContainer | MountContainer | () => document.body | 指定 Popup 挂载的 HTML 节点 |
| lockScroll | boolean | true | 锁定背景滚动 |
| animationDuration | number | 200 | 动画执行时间（单位：毫秒） |
| width | string &#124; number | - | 弹层宽度 |
| mask | boolean | true | 是否展示遮罩层 |
| maskClassName | string | - | 遮罩层的样式名 |
| maskStyle | React.CSSProperties | - | 遮罩层的样式 |
| maskColor | string | 'black' | 遮罩层的颜色，可选值 `black`, `white`, `transparent` |
| maskOpacity | string \| number | 'normal' | 遮罩层的透明度，可选值 `normal`, `light`, `dark`，或填写具体数值（0 ~ 1） |
| forceRender | boolean | false | 强制渲染内容 |
| destroy | boolean | true | 弹层关闭后是否移除节点 |
| onOpen | () => void | - | 弹层展示的回调 |
| onClose | () => void | - | 弹层关闭的回调 |
| afterOpen | () => void | - | 弹层展示后的回调 |
| afterClose | () => void | - | 弹层关闭后的回调 |
| onMaskClick | () => void | - | 点击遮罩层时触发的回调函数 |
| onEsc | () => void | - | 点击 Esc 键时触发的回调函数 |
| mountContainer | MountContainer | () => document.body | 指定 Popup 挂载的 HTML 节点 |
| lockScroll | boolean | true | 锁定背景滚动 |

0 comments on commit d94776d

Please sign in to comment.