feat: 添加 modal layout 识别

Author: arvinxx

src/type.ts

@@ -25,13 +25,30 @@ export type GroupLayoutType =
   | 'VERTICALLY_CENTER'
   | 'RIGHT_TO_LEFT'
   | 'LEFT_TO_RIGHT'
-  | 'TOP_TO_BOTTOM';
+  | 'TOP_TO_BOTTOM'
+  | 'NONE';
 
 /**
  * 对 symbol 进行自定义处理的方法
  */
 export type HandleSymbolFn = (symbol: SymbolMaster) => void;
 
+export interface DefaultSymbolParams {
+  /**
+   * symbol 本身的 layout
+   */
+  symbolLayout: GroupLayoutType;
+  /**
+   * symbol 内部的图层配置项
+   */
+  layerParams: SymbolAdjustParams[];
+}
+
+export enum LayerSelectorMatchMethod {
+  Equal,
+  Included,
+}
+
 /**
  * 对 symbol 的相关配置项调整的参数
  */
@@ -42,6 +59,7 @@ export interface SymbolAdjustParams {
   selector: {
     type: 'classname' | 'class' | 'name' | 'text' | 'tag';
     value: string;
+    match?: LayerSelectorMatchMethod;
   };
   /**
    * sketch 的调整参数

src/utils/sketchSymbolParams/Modal.ts

@@ -0,0 +1,64 @@
+import { ResizingConstraint } from '../layout';
+import { DefaultSymbolParams, LayerSelectorMatchMethod } from '../../type';
+
+/**
+ * 默认的 modal 样式
+ */
+export const defaultModal: DefaultSymbolParams = {
+  symbolLayout: 'NONE',
+  layerParams: [
+    {
+      // 内容
+      selector: {
+        type: 'classname',
+        value: 'ant-modal-content',
+      },
+      resizing: [ResizingConstraint.Top, ResizingConstraint.Bottom],
+    },
+    {
+      // svg
+      selector: {
+        type: 'class',
+        value: 'svg',
+      },
+      resizing: [
+        ResizingConstraint.Height,
+        ResizingConstraint.Width,
+        ResizingConstraint.Top,
+        ResizingConstraint.Right,
+      ],
+    },
+    {
+      // 标题
+      selector: {
+        type: 'classname',
+        value: 'ant-modal-footer',
+      },
+      resizing: [
+        ResizingConstraint.Bottom,
+        ResizingConstraint.Height,
+        ResizingConstraint.Width,
+      ],
+      layout: 'RIGHT_TO_LEFT',
+    },
+    {
+      // Modal 头部
+      selector: {
+        type: 'classname',
+        value: 'ant-modal-header',
+      },
+      resizing: [ResizingConstraint.Height, ResizingConstraint.Top],
+      layout: 'RIGHT_TO_LEFT',
+    },
+    {
+      // Modal 头部
+      selector: {
+        type: 'classname',
+        value: 'ant-modal-header',
+        match: LayerSelectorMatchMethod.Included,
+      },
+      resizing: [ResizingConstraint.Width, ResizingConstraint.Right],
+      layout: 'RIGHT_TO_LEFT',
+    },
+  ],
+};

src/utils/sketchSymbolParams/index.ts

@@ -0,0 +1,7 @@
+import { welcomeHeader } from './WelcomeHeader';
+import { defaultModal } from './Modal';
+
+/**
+ * 模块内部集成的 Symbol 参数列表
+ */
+export const defaultSymbolParamsList = [welcomeHeader, defaultModal];

tests/docs/case/modal.md

@@ -0,0 +1,10 @@
+---
+title: Modal 浮层
+order: 50
+---
+
+## 测试 Modal 浮层
+
+测试浮层的结果
+
+<code src="../demo/Modal.tsx" />

tests/docs/demo/Modal.less

@@ -0,0 +1,9 @@
+.modal-wrapper {
+  z-index: -10;
+}
+.modal-body {
+  z-index: 100 !important;
+}
+.container {
+  z-index: 100;
+}

tests/docs/demo/Modal.tsx

@@ -1,25 +1,34 @@
-import React, { FC, useRef } from 'react';
+import React, { FC, useEffect } from 'react';
 import { Modal } from 'antd';
 import TestLayout from './utils/TestLayout';
+import useElements from './utils/useElements';
+import './Modal.less';
 
 /**
  *
  */
 const ModalPage: FC = () => {
-  const ref = useRef(null);
+  const { elements, ref, setElements } = useElements();
+
+  useEffect(() => {
+    const modal = document.getElementsByClassName('ant-modal')?.item(0);
+    if (modal) {
+      setElements([modal]);
+    }
+  }, [ref.current]);
   return (
-    <TestLayout elements={[]}>
-      <div ref={ref} id="x-modal" style={{ width: '100%', height: '100%' }}>
-        <Modal
-          visible
-          title="123123"
-          mask={false}
-          maskClosable
-          getContainer={() => document.getElementById('x-modal')!}
-        >
-          123
-        </Modal>
-      </div>
+    <TestLayout elements={elements}>
+      <Modal
+        visible
+        title="Modal 测试"
+        mask={false}
+        centered
+        maskClosable
+        className="modal-body"
+        wrapClassName="modal-wrapper"
+      >
+        123
+      </Modal>
     </TestLayout>
   );
 };

tests/docs/demo/utils/TestLayout.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-unresolved */
+
 import React, { FC, useState } from 'react';
 import { Button, Row, Col, Card, Divider, Space, message } from 'antd';
 import ReactJson from 'react-json-view';
@@ -58,7 +60,7 @@ const TestLayout: FC<FooterProps> = ({ elements, children }) => {
     <div>
       {children}
       <Divider dashed />
-      <Row>
+      <Row style={{ zIndex: 99999 }}>
         <Col span={24}>
           <Row justify="space-between">
             <Col>

tests/docs/demo/utils/useElements.ts

@@ -1,14 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
 
-export default () => {
-  const ref = useRef(null);
-  const [elements, setElements] = useState([]);
+export default <T = any>() => {
+  const ref = useRef<T>(null);
+  const [elements, setElements] = useState<T[]>([]);
 
   useEffect(() => {
     if (elements.length === 0 && ref.current) {
       // @ts-ignore
       setElements([ref.current]);
     }
   });
-  return { ref, elements };
+  return { ref, elements, setElements };
 };