Feat update slide pane (#385)

* feat: update slidePane for mask * feat(slidepane): add tabs for slidepane * feat(slidepane): update motion for slidePane * feat(slidepane): update ts error and style * feat(slidepane): update doc and unit test * fix(slidepane): update props name and edit showMask to mask * fix(unittest): update unit test * fix(slidepane): update ts type
DTStack · Sep 26, 2023 · 7630357 · 7630357
1 parent b8992f3
commit 7630357
Show file tree

Hide file tree

Showing 11 changed files with 567 additions and 80 deletions.
diff --git a/src/blockHeader/__tests__/blockHeader.test.tsx b/src/blockHeader/__tests__/blockHeader.test.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
-import { SizeType } from 'dt-react-component/esm/blockHeader';
 import '@testing-library/jest-dom/extend-expect';
 
-import BlockHeader from '../index';
+import BlockHeader, { SizeType } from '../index';
 
 const props = {
     title: '标题1',

diff --git a/src/slidePane/__tests/__snapshots__/index.test.tsx.snap b/src/slidePane/__tests/__snapshots__/index.test.tsx.snap
@@ -1,3 +1,102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test SlidePane  snapshot match 1`] = `<DocumentFragment />`;
+exports[`test SlidePane  snapshot match 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div />
+    <div>
+      <div
+        class="dtc-slide-pane dtc-slide-pane-right dtc-slide-pane-open"
+        tabindex="-1"
+      >
+        <div
+          aria-hidden="true"
+          data-sentinel="start"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+          tabindex="0"
+        />
+        <div
+          class="dtc-slide-pane-content-wrapper"
+          style="width: 378px;"
+        >
+          <div
+            aria-modal="true"
+            class="dtc-slide-pane-content"
+            role="dialog"
+          >
+            <img
+              alt="closeBtn"
+              class="dtc-slide-pane-icon"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAABwCAYAAAAE0LDPAAAAAXNSR0IArs4c6QAAAnlJREFUaEPtmk9IVHEQx78jufpw7ykouuEaBG6dEmrXOmRRt476VgvyEngKlNqQMu3PoSU7iCBq4CW2olNdRMRr7HasnnZb0y57WGODzUDjt/RIonbeyzfQYd51h/m8+c7395u3MOSs5Xexr4dKRLt5AhYJtbPRaNO7velo/4Bf6YhoB8B0R3vzNSLaNr8ECnBRRLTc0d583kBEAJU3J5o6HG0ZkgTs1OBATAxgqqghTIoCiPBeFABQSRggZFOxg/anC0ElYq9JlUglYhVgA9RFKhGrABugLlKJWAXYAHWRSsQqwAaoi1QiVgE2gHVRejKDUKgWQ1cvmj/XbMLfA3jA42dwVvPo7+tBd/xo8ICNzQLG7y3AskIYvz2IcEO9LwhbgcmWebGCpeUcEvEYBvrOBg8ol7cxOjaP4lYJqZEkIm2NniGeKjDZ3mQ/YPbJa7S1NiI1YntuuGeAgTx8lMHqx3XYvWdwOnHMUxW+AJufC7hzdwH1VggTt64gHLZYiC+Ayfb85QoWl3KIn+jEpeS54AHlb98xOjaHYrGEG8M2DkWaqkJ8V2CyZd86mJl7hdaWg7h5PVm14f8EMJD0zxM+ePkCuo4f+WsV/ycgm3MwMy8k0d4mp4ZtRIJusmvTxMlODNgB21T8oLlXRbK3B6cS3maDZxeJXnbudb315Wvl9AZ+XbsDpzseQ3/QA+fTRgET9wVHpvmqcNbWK6PSjEy/D9vkB+mnaLDq5D5b/L6x7+8iBbBNVolUItYDKpFKxCrABqiLVCJWATZAXaQSsQqwAeoilYhVgA1QFzESCS8wia9giS6Rma1B0TU40UU+sVVEoWXK6uugPwBjVkdxauLcgwAAAABJRU5ErkJggg=="
+            />
+            <div
+              class="dtc-slide-pane-body"
+            >
+              Hello World
+            </div>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          data-sentinel="end"
+          style="width: 0px; height: 0px; overflow: hidden; outline: none; position: absolute;"
+          tabindex="0"
+        />
+      </div>
+    </div>
+  </body>,
+  "container": <div />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/slidePane/__tests/index.test.tsx b/src/slidePane/__tests/index.test.tsx
@@ -1,46 +1,118 @@
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import SlidePane from '../index';
 
 describe('test SlidePane ', () => {
-    const expectValues = {
-        children: (
-            <div>
-                <h1>success</h1>
-            </div>
-        ),
-        visible: true,
-        style: { color: 'red', background: '#FF7C12' },
-    };
     test('snapshot match', () => {
-        const { asFragment } = render(
-            <SlidePane visible={expectValues.visible}>{expectValues.children}</SlidePane>
+        const wrapper = render(<SlidePane visible>Hello World</SlidePane>);
+        expect(wrapper).toMatchSnapshot();
+    });
+    test('should be invisible', () => {
+        const { container } = render(<SlidePane visible={false}>Hello World</SlidePane>);
+        expect(container).not.toHaveClass();
+    });
+    test('should render mask correct ', () => {
+        const { unmount } = render(<SlidePane visible>Hello World</SlidePane>);
+        const dom = document.querySelector('.dtc-slide-pane-mask');
+        expect(dom).toBe(null);
+        unmount();
+        render(
+            <SlidePane visible mask>
+                Hello World
+            </SlidePane>
         );
-        expect(asFragment()).toMatchSnapshot();
+        const domMask = document.querySelector('.dtc-slide-pane-mask');
+        expect(domMask).not.toBe(null);
     });
-    test('should render correct', () => {
+    test('should render width correct', () => {
         render(
-            <SlidePane visible={expectValues.visible} style={expectValues.style}>
-                {expectValues.children}
+            <SlidePane visible width={640}>
+                Hello World
             </SlidePane>
         );
-        const wrapper = document.getElementsByClassName('dtc-slide-pane');
-        expect(wrapper?.[0]).toHaveStyle(expectValues.style);
-        expect(screen.getByRole('heading')).toHaveTextContent('success');
+        expect(document.querySelector('.dtc-slide-pane-content-wrapper')).toHaveStyle({
+            width: '640px',
+        });
     });
-    test('should be invisible', () => {
-        const { container } = render(
-            <SlidePane visible={false}>{expectValues.children}</SlidePane>
+    test('should render className/style correct', () => {
+        const { unmount } = render(
+            <SlidePane
+                visible
+                rootClassName="root-className"
+                bodyClassName="body-className"
+                rootStyle={{ color: 'red' }}
+                bodyStyle={{ backgroundColor: 'forestgreen' }}
+            >
+                Hello World
+            </SlidePane>
         );
-        expect(container).not.toHaveClass();
+        expect(document.querySelector('.dtc-slide-pane')).toHaveClass('root-className');
+        expect(document.querySelector('.dtc-slide-pane-body')).toHaveClass('body-className');
+        expect(document.querySelector('.dtc-slide-pane')).toHaveStyle({ color: 'red' });
+        expect(document.querySelector('.dtc-slide-pane-body')).toHaveStyle({
+            backgroundColor: 'forestgreen',
+        });
+        unmount();
+    });
+    test('should render tab correct', () => {
+        const { getByText, unmount } = render(
+            <SlidePane
+                visible
+                width={640}
+                tabs={[
+                    { key: '1', title: 'tab1' },
+                    { key: '2', title: 'tab2' },
+                ]}
+            >
+                {(key) => {
+                    switch (key) {
+                        case '1':
+                            return <div>基本信息</div>;
+                        case '2':
+                            return <div>变更记录</div>;
+                        default:
+                            break;
+                    }
+                }}
+            </SlidePane>
+        );
+        expect(document.querySelector('.dtc-slide-pane-tabs')).not.toBe(null);
+        expect(getByText('tab1')).toBeTruthy();
+        expect(getByText('基本信息')).toBeTruthy();
+        unmount();
+
+        const { getByText: getByText1 } = render(
+            <SlidePane
+                visible
+                width={640}
+                tabs={[
+                    { key: '1', title: 'tab1' },
+                    { key: '2', title: 'tab2' },
+                ]}
+                activeKey="2"
+            >
+                {(key) => {
+                    switch (key) {
+                        case '1':
+                            return <div>基本信息</div>;
+                        case '2':
+                            return <div>变更记录</div>;
+                        default:
+                            break;
+                    }
+                }}
+            </SlidePane>
+        );
+        expect(getByText1('变更记录')).toBeTruthy();
+        expect(getByText1('tab2').parentNode).toHaveClass('ant-tabs-tab-active');
     });
     test('should callback to be called', () => {
         const fn = jest.fn();
         const { getByRole } = render(
             <SlidePane visible onClose={fn}>
-                {expectValues.children}
+                Hello World
             </SlidePane>
         );
         const oImg = getByRole('img');

diff --git a/src/slidePane/demos/basic.tsx b/src/slidePane/demos/basic.tsx
@@ -20,12 +20,9 @@ export default () => {
             </Button>
             <SlidePane
                 visible={visible}
-                style={{
-                    width: `${width}%`,
-                    minHeight: '600px',
-                    height: '100%',
-                }}
+                width={`${width}%`}
                 onClose={() => setVisible(false)}
+                title="title"
             >
                 <div>hello world</div>
             </SlidePane>

diff --git a/src/slidePane/demos/basic_mask.tsx b/src/slidePane/demos/basic_mask.tsx
@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { Button, Slider } from 'antd';
+import { SlidePane } from 'dt-react-component';
+
+export default () => {
+    const [visible, setVisible] = useState(false);
+    const [width, setWidth] = useState(80);
+
+    return (
+        <>
+            <Slider
+                defaultValue={width}
+                min={10}
+                max={100}
+                onChange={(value: number) => setWidth(value)}
+            />
+            <span>width:{width}%</span>
+            <Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
+                click me
+            </Button>
+            <SlidePane
+                visible={visible}
+                rootStyle={{
+                    minHeight: '600px',
+                    height: '100%',
+                }}
+                width={`${width}%`}
+                onClose={() => setVisible(false)}
+                title="title"
+                mask
+            >
+                <div>hello world</div>
+            </SlidePane>
+        </>
+    );
+};
diff --git a/src/slidePane/demos/customTitle.tsx b/src/slidePane/demos/customTitle.tsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { SlidePane } from 'dt-react-component';
+
+export default () => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setVisible(true)}>打开</Button>
+            <SlidePane
+                visible={visible}
+                rootStyle={{
+                    minHeight: '600px',
+                    height: '100%',
+                }}
+                onClose={() => setVisible(false)}
+                title={
+                    <div>
+                        <div>增信方式</div>
+                        <div>
+                            <span>创建时间： xxxx</span>
+                            <span>更新时间： xxxx</span>
+                        </div>
+                    </div>
+                }
+            >
+                <div>hello world</div>
+            </SlidePane>
+        </>
+    );
+};
diff --git a/src/slidePane/demos/tabs.tsx b/src/slidePane/demos/tabs.tsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { SlidePane } from 'dt-react-component';
+
+export default () => {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <Button onClick={() => setVisible(true)}>打开</Button>
+            <SlidePane
+                visible={visible}
+                onClose={() => setVisible(false)}
+                title={'Title'}
+                tabs={
+                    [
+                        {
+                            key: 'basicInfo',
+                            title: '基本信息',
+                        },
+                        {
+                            key: 'changelog',
+                            title: '变更记录',
+                        },
+                    ] as const
+                }
+                activeKey="changelog"
+            >
+                {(key) => {
+                    switch (key) {
+                        case 'basicInfo':
+                            return <div>基本信息</div>;
+                        case 'changelog':
+                            return <div>变更记录</div>;
+                        default:
+                            break;
+                    }
+                }}
+            </SlidePane>
+        </>
+    );
+};