fix: 修复 popup 内容超长滚动问题

ZhongAnTech · Oct 17, 2023 · f5f2c6e · f5f2c6e
1 parent a86131a
commit f5f2c6e
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 36 deletions.
diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "packages": ["packages/*"],
+  "workspaces": ["packages/*"],
   "version": "independent",
   "command": {
     "publish": {

diff --git a/packages/zarm/src/modal/demo.md b/packages/zarm/src/modal/demo.md
@@ -26,6 +26,9 @@ const initState = {
   customContainer: {
     visible: false,
   },
+  overlength: {
+    visible: false,
+  },
 };
 
 const reducer = (state, action) => {
@@ -140,11 +143,26 @@ const Demo = () => {
         >
           挂载到指定 DOM 节点
         </List.Item>
+        <List.Item
+          suffix={
+            <Button size="xs" onClick={() => toggle('overlength')}>
+              开启
+            </Button>
+          }
+        >
+          超长内容
+        </List.Item>
       </List>
 
       <div id="test-div" style={{ position: 'relative', zIndex: 1 }} ref={myRef} />
 
-      <Modal visible={state.normal.visible} title="标题" closable onClose={() => toggle('normal')}>
+      <Modal
+        visible={state.normal.visible}
+        title="标题"
+        closable
+        onClose={() => toggle('normal')}
+        maskClosable
+      >
         模态框内容
       </Modal>
 
@@ -192,6 +210,21 @@ const Demo = () => {
       >
         挂载到指定dom节点
       </Modal>
+
+      <Modal
+        visible={state.overlength.visible}
+        title="标题"
+        closable
+        onClose={() => toggle('overlength')}
+        maskClosable
+      >
+        {Array.from(Array(100).fill(0)).map((_, index) => (
+          <div key={index}>
+            模态框内容
+            <br />
+          </div>
+        ))}
+      </Modal>
     </>
   );
 };
@@ -454,24 +487,24 @@ const confirm = Modal.confirm({
 
 ## CSS 变量
 
-| 属性                             | 默认值                              | 说明                 |
-| :------------------------------- | :---------------------------------- | :------------------- |
-| --background                     | 'rgb(242, 242, 242)'                | 背景色               |
-| --border-radius                  | '14px'                              | 圆角大小             |
-| --shadow                         | '0 7px 21px var(--za-color-shadow)' | 阴影样式             |
-| --title-font-size                | '17px'                              | 标题字体大小         |
-| --title-font-weight              | 500                                 | 标题字体粗细         |
-| --title-text-color               | 'var(--za-color-text)'              | 标题字体颜色         |
-| --close-size                     | '20px'                              | 关闭图标字体大小     |
-| --close-color                    | '#ccc'                              | 关闭图标颜色         |
-| --close-active-color             | '#999'                              | 关闭图标激活状态颜色 |
-| --body-font-size                 | '13px'                              | 内容字体大小         |
-| --body-text-color                | 'var(--za-color-text)'              | 内容字体颜色         |
-| --body-padding                   | '16px'                              | 内容内边距           |
-| --button-background              | 'transparent'                       | 操作按钮背景       |
-| --button-height                  | '44px'                              | 操作按钮高度         |
-| --button-font-size               | '17px'                              | 操作按钮字体大小     |
-| --button-font-weight             | 500                                 | 操作按钮字体粗细     |
-| --button-text-color              | 'var(--za-theme-primary)'           | 操作按钮字体颜色     |
-| --button-active-background | 'var(--za-background-active)'       | 操作按钮选中背景   |
-| --button-disabled-opacity        | 'var(--za-opacity-disabled)'        | 操作按钮禁用状态时的透明度   |
+| 属性                       | 默认值                              | 说明                       |
+| :------------------------- | :---------------------------------- | :------------------------- |
+| --background               | 'rgb(242, 242, 242)'                | 背景色                     |
+| --border-radius            | '14px'                              | 圆角大小                   |
+| --shadow                   | '0 7px 21px var(--za-color-shadow)' | 阴影样式                   |
+| --title-font-size          | '17px'                              | 标题字体大小               |
+| --title-font-weight        | 500                                 | 标题字体粗细               |
+| --title-text-color         | 'var(--za-color-text)'              | 标题字体颜色               |
+| --close-size               | '20px'                              | 关闭图标字体大小           |
+| --close-color              | '#ccc'                              | 关闭图标颜色               |
+| --close-active-color       | '#999'                              | 关闭图标激活状态颜色       |
+| --body-font-size           | '13px'                              | 内容字体大小               |
+| --body-text-color          | 'var(--za-color-text)'              | 内容字体颜色               |
+| --body-padding             | '16px'                              | 内容内边距                 |
+| --button-background        | 'transparent'                       | 操作按钮背景               |
+| --button-height            | '44px'                              | 操作按钮高度               |
+| --button-font-size         | '17px'                              | 操作按钮字体大小           |
+| --button-font-weight       | 500                                 | 操作按钮字体粗细           |
+| --button-text-color        | 'var(--za-theme-primary)'           | 操作按钮字体颜色           |
+| --button-active-background | 'var(--za-background-active)'       | 操作按钮选中背景           |
+| --button-disabled-opacity  | 'var(--za-opacity-disabled)'        | 操作按钮禁用状态时的透明度 |
diff --git a/packages/zarm/src/popup/Popup.tsx b/packages/zarm/src/popup/Popup.tsx
@@ -44,6 +44,8 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
   } = props;
 
   const { prefixCls, mountContainer: globalMountContainer } = React.useContext(ConfigContext);
+  const nodeRef = React.useRef<HTMLDivElement>(null);
+  const maskRef = React.useRef<HTMLDivElement>(null);
   const bem = createBEM('popup', { prefixCls });
 
   useLockScroll(visible! && lockScroll!);
@@ -52,12 +54,22 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     onEsc?.();
   }, []);
 
+  const handleClick = (event: React.MouseEvent) => {
+    if (nodeRef.current !== event.target && nodeRef.current.contains(event.target as HTMLElement)) {
+      return;
+    }
+    maskRef.current?.click();
+  };
+
   const transitionName = animationType ?? TRANSITION_NAMES[direction!];
 
+  React.useImperativeHandle(ref, () => nodeRef.current);
+
   return (
     <Trigger visible={visible} onClose={handleEsc}>
       {mask && (
         <Mask
+          ref={maskRef}
           className={maskClassName}
           style={maskStyle}
           visible={visible}
@@ -73,7 +85,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
         />
       )}
       <Transition
-        nodeRef={ref}
+        nodeRef={nodeRef}
         visible={visible}
         tranisitionName={`${prefixCls}-${transitionName}`}
         duration={animationDuration}
@@ -96,7 +108,11 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
           const { display, ...restStyle } = style;
           return renderToContainer(
             props.mountContainer ?? globalMountContainer,
-            <div className={bem('wrapper', [props.className])} style={{ ...props.style, display }}>
+            <div
+              className={bem('wrapper', [{ center: direction === 'center' }, props.className])}
+              style={{ ...props.style, display }}
+              onClick={handleClick}
+            >
               <div
                 ref={setNodeRef}
                 className={bem([{ [`${direction}`]: !!direction }, className])}

diff --git a/packages/zarm/src/popup/style/component.scss b/packages/zarm/src/popup/style/component.scss
@@ -1,24 +1,26 @@
 @include b(popup) {
   -webkit-overflow-scrolling: touch;
   margin: auto;
-  pointer-events: all;
   transform: perspective(0);
 
   @include e(wrapper) {
     @include define(mask-zindex, var(--za-zindex-mask));
 
     position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     z-index: var(--mask-zindex);
-    overflow: auto;
-    padding: 60px 0;
-    -webkit-overflow-scrolling: touch;
+
+    @include m(center) {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: auto;
+      padding: 60px 0;
+      -webkit-overflow-scrolling: touch;
+    }
   }
 
   @include m(bottom) {

diff --git a/packages/zarm/src/toast/Toast.tsx b/packages/zarm/src/toast/Toast.tsx
@@ -48,6 +48,7 @@ const Toast = React.forwardRef<HTMLDivElement, ToastProps>((props, ref) => {
       }}
       maskColor={maskColor}
       lockScroll={!maskClickable}
+      className={bem('wrapper')}
       {...rest}
     >
       <div

diff --git a/packages/zarm/src/toast/style/component.scss b/packages/zarm/src/toast/style/component.scss
@@ -20,12 +20,18 @@
   align-items: center;
   display: flex;
 
+  @include e(wrapper) {
+    pointer-events: none;
+  }
+
   @include m(text) {
     padding: var(--za-padding-v-md) var(--za-padding-h-md);
+    pointer-events: all;
   }
 
   @include m(icon) {
     padding: 15px;
+    pointer-events: all;
 
     @include e(text) {
       min-width: 70px;