faet Modal Component demo1

fengxinhhh · Jul 23, 2022 · 0e42bc4 · 0e42bc4
1 parent 8ed65d4
commit 0e42bc4
Show file tree

Hide file tree

Showing 11 changed files with 294 additions and 10 deletions.
diff --git a/packages/concis-react/__tests__/unit/Button/button.test.tsx b/packages/concis-react/__tests__/unit/Button/button.test.tsx
@@ -34,7 +34,6 @@ describe(`button`, () => {
 
     button.simulate('click');
     expect(mockFn.mock.calls.length).toBe(mockFnCallLength);
-    expect(mockFn).toBeCalled();
   });
 
   it('button type set show correctly color', () => {

diff --git a/packages/concis-react/package.json b/packages/concis-react/package.json
@@ -38,6 +38,7 @@
     "jest": "^26.6.3",
     "jest-less-loader": "^0.1.2",
     "puppeteer": "^15.4.0",
+    "react-transition-group": "^4.3.0",
     "ts-jest": "^26.5.1"
   },
   "peerDependencies": {

diff --git a/packages/concis-react/src/Modal/demos/index1.tsx b/packages/concis-react/src/Modal/demos/index1.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import Modal from '..';
+import Button from '../../Button';
+
+export default function index1() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div>
+      <Button handleClick={() => setVisible(true)}>打开</Button>
+      <Modal
+        title="Modal Title"
+        visible={visible}
+        onOk={() => setVisible(false)}
+        onCancel={() => setVisible(false)}
+      >
+        <p>
+          You can customize modal body text by the current situation. This modal will be closed
+          immediately once you press the OK button.
+        </p>
+      </Modal>
+    </div>
+  );
+}
diff --git a/packages/concis-react/src/Modal/index.md b/packages/concis-react/src/Modal/index.md
@@ -0,0 +1,16 @@
+---
+title: Modal 对话框
+nav:
+  title: 组件
+  path: /common
+group:
+  title: 反馈
+---
+
+# Modal 对话框
+
+在当前页面打开一个浮层，承载相关操作。
+
+## 基本使用
+
+<code src="./demos/index1.tsx" />
diff --git a/packages/concis-react/src/Modal/index.module.less b/packages/concis-react/src/Modal/index.module.less
@@ -0,0 +1,110 @@
+.concis-modal {
+  &-dialog {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1001;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(29, 33, 41, 0.6);
+    transition: 0.1s linear;
+  }
+  &-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1002;
+    width: 30%;
+    background: #ffffff;
+    border-radius: 5px;
+    transform: translate(-50%, -50%);
+    &-header {
+      .concis-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px;
+        font-weight: 500;
+        border-bottom: 1px solid #e5e6eb;
+        span {
+          font-size: 16px;
+        }
+        .close-icon {
+          font-size: 12px;
+          cursor: pointer;
+        }
+      }
+    }
+    &-view {
+      padding: 20px 24px;
+      font-size: 14px;
+      border-bottom: 1px solid #e5e6eb;
+    }
+    &-footer {
+      width: 100%;
+      padding: 16px 20px;
+      text-align: right;
+      .button {
+        .concis-button-text,
+        .concis-button-primary {
+          height: 30px !important;
+        }
+      }
+      .cancel-btn {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.fadeModal-enter,
+.fadeModal-appear {
+  opacity: 0;
+}
+
+.fadeModal-enter-active,
+.fadeModal-appear-active {
+  opacity: 1;
+  transition: opacity 100ms;
+}
+
+.fadeModal-exit {
+  opacity: 1;
+}
+
+.fadeModal-exit-active {
+  opacity: 0;
+  transition: opacity 100ms;
+}
+
+.fadeContent-enter,
+.fadeContent-appear {
+  top: 40%;
+  left: 40%;
+  width: 20%;
+  opacity: 0;
+}
+
+.fadeContent-enter-active,
+.fadeContent-appear-active {
+  top: 50%;
+  left: 50%;
+  width: 30%;
+  opacity: 1;
+  transition: top 100ms, width 100ms, left 100ms, opacity 100ms;
+}
+
+.fadeContent-exit {
+  top: 50%;
+  left: 50%;
+  width: 30%;
+  opacity: 1;
+}
+
+.fadeContent-exit-active {
+  top: 40%;
+  left: 40%;
+  width: 20%;
+  opacity: 0;
+  transition: top 100ms, width 100ms, left 100ms, opacity 100ms;
+}
diff --git a/packages/concis-react/src/Modal/index.tsx b/packages/concis-react/src/Modal/index.tsx
@@ -0,0 +1,105 @@
+import React, {
+  FC,
+  memo,
+  useState,
+  useEffect,
+  useMemo,
+  useContext,
+  useCallback,
+  createRef,
+} from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { CloseOutlined } from '@ant-design/icons';
+import Button from '../Button';
+import { ModalProps } from './interface';
+import { GlobalConfigProps } from '../GlobalConfig/interface';
+import cs from '../common_utils/classNames';
+import { globalCtx } from '../GlobalConfig';
+import { getSiteTheme } from '../common_utils/storage/getSiteTheme';
+import { getRenderColor } from '../common_utils/getRenderColor';
+import './index.module.less';
+
+const Modal: FC<ModalProps> = (props: ModalProps) => {
+  const { className, children, title, visible, onCancel, onOk } = props;
+
+  const { globalColor, prefixCls, darkTheme } = useContext(globalCtx) as GlobalConfigProps;
+  const classFirstName = darkTheme ? 'concis-dark-modal' : 'concis-modal';
+  const classNames = cs(prefixCls, className, classFirstName);
+
+  useEffect(() => {
+    window.addEventListener('click', (e) => {
+      const clickDom = e.target as HTMLElement;
+      if (clickDom.getAttribute('class') === 'concis-modal-dialog fadeModal-enter-done') {
+        cancel();
+      }
+    });
+  }, []);
+  const finish = () => {
+    onOk && onOk();
+  };
+
+  const cancel = () => {
+    onCancel && onCancel();
+  };
+
+  return (
+    <div className={classNames}>
+      <CSSTransition
+        in={visible}
+        timeout={100}
+        appear
+        mountOnEnter={true}
+        classNames="fadeModal"
+        unmountOnExit={true}
+        onEnter={(e) => {
+          e.style.display = 'block';
+        }}
+        onExited={(e) => {
+          e.style.display = 'none';
+        }}
+      >
+        <div className="concis-modal-dialog">
+          <CSSTransition
+            in={visible}
+            timeout={100}
+            appear
+            mountOnEnter={true}
+            classNames="fadeContent"
+            unmountOnExit={true}
+            onEnter={(e) => {
+              e.style.display = 'block';
+            }}
+            onExited={(e) => {
+              e.style.display = 'none';
+            }}
+          >
+            <div className="concis-modal-content" onClick={(e) => e.nativeEvent.stopPropagation()}>
+              <div className="concis-modal-content-header">
+                <div className="concis-title">
+                  <i></i>
+                  <span>{title}</span>
+                  <CloseOutlined
+                    className="close-icon"
+                    style={{ fontSize: '12px' }}
+                    onClick={cancel}
+                  />
+                </div>
+              </div>
+              <div className="concis-modal-content-view">{children}</div>
+              <div className="concis-modal-content-footer">
+                <Button type="text" className="cancel-btn button" handleClick={cancel}>
+                  取消
+                </Button>
+                <Button type="primary" className="enter-btn button" handleClick={finish}>
+                  确定
+                </Button>
+              </div>
+            </div>
+          </CSSTransition>
+        </div>
+      </CSSTransition>
+    </div>
+  );
+};
+
+export default memo(Modal);
diff --git a/packages/concis-react/src/Modal/interface.ts b/packages/concis-react/src/Modal/interface.ts
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface ModalProps {
+  className?: string;
+  children?: ReactNode;
+  title?: string;
+  visible?: boolean;
+  onOk?: Function;
+  onCancel?: Function;
+}
+type DialogStyle = {
+  width?: string;
+  height?: string;
+  opacity?: string;
+};
+
+export type { ModalProps, DialogStyle };
diff --git a/packages/concis-react/src/Pagination/index.tsx b/packages/concis-react/src/Pagination/index.tsx
@@ -63,8 +63,6 @@ const Pagination: FC<PaginationProps> = (props: PaginationProps) => {
 
   const { globalColor, prefixCls, darkTheme } = useContext(globalCtx) as GlobalConfigProps;
 
-  const theme = getSiteTheme();
-
   const classFirstName = darkTheme ? 'concis-dark-pagination' : 'concis-pagination';
   const classNames = cs(prefixCls, className, classFirstName);
 

diff --git a/packages/concis-react/src/Popover/index.module.less b/packages/concis-react/src/Popover/index.module.less
@@ -12,7 +12,7 @@
     .pop-dialog {
       position: absolute;
       z-index: 9999;
-      //padding: @concis-transform-xs @concis-transform-md @concis-transform-md @concis-transform-md;
+      // padding: @concis-transform-xs @concis-transform-md @concis-transform-md @concis-transform-md;
       overflow: hidden;
       background-color: #fff;
       border-radius: @concis-popover-dialog-radius;
@@ -23,7 +23,7 @@
 .concis-dark-popover-card .open-container .pop-dialog {
   position: absolute;
   z-index: 9999;
-  //padding: @concis-transform-xs @concis-transform-md @concis-transform-md @concis-transform-md;
+  // padding: @concis-transform-xs @concis-transform-md @concis-transform-md @concis-transform-md;
   overflow: hidden;
   background-color: #373739;
   border: 1px solid #484849 !important;

diff --git a/packages/concis-react/src/Popover/index.tsx b/packages/concis-react/src/Popover/index.tsx
@@ -108,12 +108,8 @@ const Popover: FC<popoverProps> = (props: popoverProps) => {
   }, []);
   useEffect(() => {
     //依赖于父组件的状态改变，关闭popover
-    console.log(
-      'popover',
-      prevCloseDeps.length === closeDeps.length &&
-        prevCloseDeps.every((p, i) => p === closeDeps[i]),
-    );
     if (
+      Array.isArray(prevCloseDeps) &&
       !(
         prevCloseDeps.length === closeDeps.length &&
         prevCloseDeps.every((p, i) => p === closeDeps[i])

diff --git a/packages/concis-react/src/styles/demo-dark.less b/packages/concis-react/src/styles/demo-dark.less
@@ -252,4 +252,22 @@ html[data-prefers-color='dark'] {
       background-image: linear-gradient(#515357, #515357);
     }
   }
+  //modal
+  .concis-modal {
+    &-dialog {
+      background: rgba(23, 23, 26, 0.6);
+    }
+    &-content {
+      color: #c4c4c5;
+      background: #2a2a2b;
+      &-header {
+        .concis-title {
+          border-bottom: 1px solid #484849;
+        }
+      }
+      &-view {
+        border-bottom: 1px solid #484849;
+      }
+    }
+  }
 }