feat: develop modal (#401)

* fix(useList): initialParams suppport function type (#393) * build(deps-dev): bump browserify-sign from 4.2.1 to 4.2.2 (#399) Bumps [browserify-sign](https://github.com/crypto-browserify/browserify-sign) from 4.2.1 to 4.2.2. - [Changelog](https://github.com/browserify/browserify-sign/blob/main/CHANGELOG.md) - [Commits](browserify/browserify-sign@v4.2.1...v4.2.2) --- updated-dependencies: - dependency-name: browserify-sign dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: import highlight core only (#402) * feat: import highlight core only * feat: improve Hljs types * feat: add sideEffects field to improve treeShaking (#403) * fix: upgrade SpreadSheet component for can be binded ref (#404) Co-authored-by: zhaoge <> * feat: add search component on sidebar (#405) * feat: develop modal * feat(Modal): improve banner check * test: add test cases --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Hayden <hayden9653@gmail.com> Co-authored-by: XCynthia <942884029@qq.com>
DTStack · Nov 15, 2023 · b8c6131 · b8c6131
1 parent daab2cb
commit b8c6131
Show file tree

Hide file tree

Showing 17 changed files with 493 additions and 76 deletions.
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
         "@types/showdown": "^1.9.0",
         "@types/testing-library__jest-dom": "^5.14.5",
         "@umijs/lint": "^4.0.0",
+        "ant-design-testing": "^1.0.0-beta.0",
         "babel-plugin-import": "^1.13.5",
         "babel-types": "^6.26.0",
         "conventional-changelog-cli": "^2.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/modal/__tests__/__snapshots__/modal.test.tsx.snap b/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Modal Component Should Match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="ant-modal-root"
+  >
+    <div
+      class="ant-modal-mask"
+    />
+    <div
+      class="ant-modal-wrap"
+      tabindex="-1"
+    >
+      <div
+        aria-labelledby="test-id"
+        aria-modal="true"
+        class="ant-modal dt-modal"
+        role="dialog"
+        style="width: 640px;"
+      >
+        <div
+          aria-hidden="true"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+          tabindex="0"
+        />
+        <div
+          class="ant-modal-content"
+        >
+          <button
+            aria-label="Close"
+            class="ant-modal-close"
+            type="button"
+          >
+            <span
+              class="ant-modal-close-x"
+            >
+              <span
+                aria-label="close"
+                class="anticon anticon-close ant-modal-close-icon"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="close"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+          <div
+            class="ant-modal-header"
+          >
+            <div
+              class="ant-modal-title"
+              id="test-id"
+            >
+              title
+            </div>
+          </div>
+          <div
+            class="ant-modal-body"
+            style="padding: 0px;"
+          >
+            <section
+              class="dt-modal-body"
+            >
+              <div>
+                test
+              </div>
+            </section>
+          </div>
+          <div
+            class="ant-modal-footer"
+          >
+            <button
+              class="ant-btn ant-btn-default"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none;"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { alert, modal } from 'ant-design-testing';
+import '@testing-library/jest-dom';
+
+import Modal from '../';
+
+describe('Test Modal Component', () => {
+    beforeEach(() => {
+        cleanup();
+    });
+
+    it('Should Match snapshot', () => {
+        const { asFragment } = render(
+            <Modal visible title="title" getContainer={false}>
+                <div>test</div>
+            </Modal>
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it('Should get different size', () => {
+        // default size
+        const { container, rerender } = render(
+            <Modal visible title="title" getContainer={false}>
+                test
+            </Modal>
+        );
+        expect(modal.query(container)?.style.width).toBe('640px');
+
+        // small size
+        rerender(
+            <Modal visible title="title" getContainer={false} size="small">
+                test
+            </Modal>
+        );
+        expect(modal.query(container)?.style.width).toBe('400px');
+
+        // large size
+        rerender(
+            <Modal visible title="title" getContainer={false} size="large">
+                test
+            </Modal>
+        );
+        expect(modal.query(container)?.style.width).toBe('900px');
+    });
+
+    describe('Should support banner', () => {
+        it('Should support string banner', async () => {
+            const { getByText } = render(
+                <Modal visible title="title" getContainer={false} banner="banner">
+                    test
+                </Modal>
+            );
+
+            expect(getByText('banner')).toBeInTheDocument();
+        });
+
+        it('Should support ReactNode', async () => {
+            const { getByTestId } = render(
+                <Modal
+                    visible
+                    title="title"
+                    getContainer={false}
+                    banner={<div data-testid="banner">xxxx</div>}
+                >
+                    test
+                </Modal>
+            );
+
+            expect(getByTestId('banner')).toBeInTheDocument();
+        });
+
+        it('Should support AlertProps', async () => {
+            const { container, getByText } = render(
+                <Modal
+                    visible
+                    title="title"
+                    getContainer={false}
+                    banner={{ message: 'banner', type: 'error' }}
+                >
+                    test
+                </Modal>
+            );
+
+            expect(getByText('banner')).toBeInTheDocument();
+            expect(alert.query(container)?.classList.contains('ant-alert-error')).toBeTruthy();
+        });
+    });
+});
diff --git a/src/modal/form.tsx → src/modal/components/form/index.tsx b/src/modal/form.tsx → src/modal/components/form/index.tsx
@@ -1,9 +1,9 @@
 import React, { ReactElement, useMemo } from 'react';
 import { FormProps, Modal, ModalProps } from 'antd';
 
-import Form from '../form';
-import Utils from '../utils';
-import { FORM_PROPS, MODAL_PROPS } from '../utils/antdProps';
+import Form from '../../../form';
+import Utils from '../../../utils';
+import { FORM_PROPS, MODAL_PROPS } from '../../../utils/antdProps';
 
 export interface IModalFormProps<Values = any>
     extends Omit<FormProps, 'title'>,

diff --git a/src/modal/components/modal/index.scss b/src/modal/components/modal/index.scss
@@ -0,0 +1,13 @@
+$modal-height: 600px;
+$modal-header: 55px;
+$modal-footer: 53px;
+
+.dt-modal {
+    .ant-modal-body {
+        max-height: calc($modal-height - $modal-header - $modal-footer);
+        overflow-y: auto;
+    }
+    &-body {
+        padding: 16px;
+    }
+}
diff --git a/src/modal/components/modal/index.tsx b/src/modal/components/modal/index.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Alert, type AlertProps, Modal, type ModalProps } from 'antd';
+import { omit } from 'lodash';
+
+import './index.scss';
+
+export interface IModalProps extends ModalProps {
+    size?: 'small' | 'default' | 'large';
+    banner?: AlertProps['message'] | Omit<AlertProps, 'banner'>;
+}
+
+const getWidthFromSize = (size: IModalProps['size']) => {
+    if (size === 'small') return 400;
+    if (size === 'large') return 900;
+    return 640;
+};
+
+const isValidBanner = (banner: IModalProps['banner']): banner is AlertProps['message'] => {
+    if (typeof banner === 'object') return React.isValidElement(banner);
+    return true;
+};
+
+export default function InternalModal({
+    bodyStyle,
+    banner,
+    size = 'default',
+    children,
+    width,
+    ...rest
+}: IModalProps) {
+    const finalWidth = width ?? getWidthFromSize(size);
+
+    return (
+        <Modal
+            className="dt-modal"
+            bodyStyle={{ padding: 0, ...bodyStyle }}
+            width={finalWidth}
+            {...rest}
+        >
+            {banner && (
+                <Alert
+                    message={isValidBanner(banner) ? banner : banner.message}
+                    banner
+                    {...(isValidBanner(banner) ? {} : omit(banner, 'message'))}
+                />
+            )}
+            <section className="dt-modal-body">{children}</section>
+        </Modal>
+    );
+}
diff --git a/src/modal/demos/basic/banner.tsx b/src/modal/demos/basic/banner.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { Modal } from 'dt-react-component';
+
+export default function Banner() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <Modal
+                title="dt-react-component"
+                visible={visible}
+                banner="模态框可以支持 banner 属性"
+                onCancel={() => setVisible(false)}
+                onOk={() => setVisible(false)}
+            >
+                testssss
+            </Modal>
+            <Button type="primary" onClick={() => setVisible(true)}>
+                Banner
+            </Button>
+        </>
+    );
+}
diff --git a/src/modal/demos/basic/bannerProps.tsx b/src/modal/demos/basic/bannerProps.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { Modal } from 'dt-react-component';
+
+export default function BannerProps() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <Modal
+                title="dt-react-component"
+                visible={visible}
+                banner={{
+                    message: '模态框可以支持 banner 属性',
+                    type: 'error',
+                }}
+                onCancel={() => setVisible(false)}
+                onOk={() => setVisible(false)}
+            >
+                testssss
+            </Modal>
+            <Button type="primary" onClick={() => setVisible(true)}>
+                Banner
+            </Button>
+        </>
+    );
+}
diff --git a/src/modal/demos/basic/basic.tsx b/src/modal/demos/basic/basic.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { Modal } from 'dt-react-component';
+
+export default function Basic() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <Modal
+                title="最大高度限制 600px"
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                onOk={() => setVisible(false)}
+            >
+                <ul>
+                    {Array.from({ length: 300 }).map((_, i) => (
+                        <li key={i} style={{ height: 30 }}>
+                            {i}
+                        </li>
+                    ))}
+                </ul>
+            </Modal>
+            <Button type="primary" onClick={() => setVisible(true)}>
+                最大高度限制 600px
+            </Button>
+        </>
+    );
+}