Feat v4 slide pane (#330)

shiqiWang0 · beier · web-flow · commit 2173c3cbb7aa · 2023-04-28T18:03:24.000+08:00
* refactor: slidePane to refactor

* fix: remove console in test file

* fix: update slidePane snapshot

* fix: fix ts in slidePane

---------

Co-authored-by: beier &lt;beier@dtstack.com&gt;
diff --git a/package.json b/package.json
@@ -110,6 +110,7 @@
         "highlight.js": "^10.5.0",
         "lodash": "^4.17.21",
         "mxgraph": "^4.2.2",
+        "rc-drawer": "~5.1.0",
         "rc-virtual-list": "^3.4.13",
         "showdown": "^1.9.0"
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/fullscreen/__tests__/index.test.tsx b/src/fullscreen/__tests__/index.test.tsx
@@ -41,7 +41,6 @@ describe('test Fullscreen', () => {
         };
         render(<Fullscreen iconStyle={iconStyle} />);
         const img = screen.getByRole('img');
-        screen.debug(img);
         expect(img).toHaveStyle(`width: 12px; height: 12px; margin-right: 5px;`);
     });
     test('button fireEvent correct', () => {
diff --git a/src/slidePane/__tests/__snapshots__/index.test.tsx.snap b/src/slidePane/__tests/__snapshots__/index.test.tsx.snap
@@ -1,28 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test SlidePane  should render correct 1`] = `
-<div>
-  <div
-    class="dtc-slide-pane"
-    style="top: 0px; color: red; background: rgb(255, 124, 18);"
-  >
-    <div
-      class="dtc-slide-pane-content"
-      data-testid="slidepane_container"
-      style="display: block; height: 100%;"
-    >
-      <div>
-        <h1>
-          success
-        </h1>
-      </div>
-    </div>
-    <img
-      alt=""
-      class="dtc-slide-pane-icon"
-      data-testid="slidepane_action"
-      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>
-</div>
-`;
+exports[`test SlidePane  snapshot match 1`] = `<DocumentFragment />`;
diff --git a/src/slidePane/__tests/index.test.tsx b/src/slidePane/__tests/index.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SlidePane from '../index';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 describe('test SlidePane ', () => {
@@ -13,24 +13,37 @@ describe('test SlidePane ', () => {
         visible: true,
         style: { color: 'red', background: '#FF7C12' },
     };
+    test('snapshot match', () => {
+        const { asFragment } = render(
+            <SlidePane visible={expectValues.visible}>{expectValues.children}</SlidePane>
+        );
+        expect(asFragment()).toMatchSnapshot();
+    });
     test('should render correct', () => {
-        const { container, getByTestId } = render(
+        render(
             <SlidePane visible={expectValues.visible} style={expectValues.style}>
                 {expectValues.children}
             </SlidePane>
         );
-        expect(container.firstChild).toHaveStyle(expectValues.style);
-        const oDiv = getByTestId('slidepane_container');
-        expect(oDiv).not.toBeNull();
-        expect(oDiv).toBeVisible();
-        expect(oDiv.innerHTML).toEqual('<div><h1>success</h1></div>');
-        expect(container).toMatchSnapshot();
+        const wrapper = document.getElementsByClassName('dtc-slide-pane');
+        expect(wrapper?.[0]).toHaveStyle(expectValues.style);
+        expect(screen.getByRole('heading')).toHaveTextContent('success');
     });
     test('should be invisible', () => {
-        const { getByTestId } = render(
+        const { container } = render(
             <SlidePane visible={false}>{expectValues.children}</SlidePane>
         );
-        const oDiv = getByTestId('slidepane_container');
-        expect(oDiv).not.toBeVisible();
+        expect(container).not.toHaveClass();
+    });
+    test('should callback to be called', () => {
+        const fn = jest.fn();
+        const { getByRole } = render(
+            <SlidePane visible onClose={fn}>
+                {expectValues.children}
+            </SlidePane>
+        );
+        const oImg = getByRole('img');
+        fireEvent.click(oImg);
+        expect(fn).toHaveBeenCalledTimes(1);
     });
 });
diff --git a/src/slidePane/demos/basic.tsx b/src/slidePane/demos/basic.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { SlidePane } from 'dt-react-component';
+import { Button, Slider } from 'antd';
+
+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}
+                style={{
+                    width: `${width}%`,
+                    minHeight: '600px',
+                    height: '100%',
+                }}
+                onClose={() => setVisible(false)}
+            >
+                <div>hello world</div>
+            </SlidePane>
+        </>
+    );
+};
diff --git a/src/slidePane/index.md b/src/slidePane/index.md
@@ -10,53 +10,19 @@ demo:
 
 ## 何时使用
 
-从页面右侧弹出面板，展示相应内容
+从页面右侧弹出面板，展示相应内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
+常用于： 查看详情， 预览较多内容的场景下。
 
 ## 示例
 
-```jsx
-import React, { useState } from 'react';
-import { SlidePane } from 'dt-react-component';
-import { Button } from 'antd';
-
-export default () => {
-    const [visible, setVisible] = useState(false);
-    const [width, setWidth] = useState(80);
-
-    return (
-        <>
-            width: {width}%
-            <input
-                type="range"
-                value={width}
-                min={10}
-                max={100}
-                onChange={(e) => setWidth(e.target.value)}
-            />
-            <br />
-            <Button style={{ marginBottom: '10px' }} onClick={() => setVisible((v) => !v)}>
-                click me
-            </Button>
-            <SlidePane
-                visible={visible}
-                style={{
-                    right: '-20px',
-                    width: `${width}%`,
-                    minHeight: '600px',
-                    height: '100%',
-                }}
-                onClose={() => setVisible(false)}
-            >
-                <div>hello world</div>
-            </SlidePane>
-        </>
-    );
-};
-```
+<code src="./demos/basic.tsx" title="基础使用"></code>
 
 ## API
 
-| 参数    | 说明                | 类型       | 默认值 |
-| ------- | ------------------- | ---------- | ------ |
-| visible | SlidePanel 是否可见 | `boolean`  | -      |
-| onClose | 关闭回调            | `function` | -      |
+| 参数      | 说明                   | 类型            | 默认值 |
+| --------- | ---------------------- | --------------- | ------ |
+| visible   | SlidePanel 是否可见    | `boolean`       | -      |
+| className | 右侧面板外层容器的类名 | `string`        | -      |
+| style     | 右侧面板外层容器的样式 | `CSSProperties` | -      |
+| bodyStyle | 右侧面板内部容器的样式 | `CSSProperties` | -      |
+| onClose   | 关闭回调               | `function`      | -      |
diff --git a/src/slidePane/index.tsx b/src/slidePane/index.tsx
@@ -1,57 +1,65 @@
-import { assign } from 'lodash';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
+import { assign } from 'lodash';
+import RcDrawer from 'rc-drawer';
 import './style.scss';
 
-export interface SlidePaneProps {
-    children: React.ReactNode;
+export interface ISlidePaneProps {
     visible: boolean;
-    left?: string | number;
-    width?: string | number;
     className?: string;
     style?: React.CSSProperties;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onClose?<HTMLSpanElement, MouseEvent>(): void;
-    [propName: string]: any;
+    bodyStyle?: React.CSSProperties;
+    onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
 }
+const SlidePane = ({
+    visible,
+    className,
+    style,
+    bodyStyle,
+    children,
+    onClose,
+}: PropsWithChildren<ISlidePaneProps>) => {
+    const slidePrefixCls = 'dtc-slide-pane';
+    let rootStyle: React.CSSProperties = {
+        top: 0,
+        right: 0,
+        transform: visible ? undefined : 'translate3d(150%, 0, 0)',
+    };
+    const classes = classNames(className);
 
-class SlidePane extends React.Component<SlidePaneProps, any> {
-    constructor(props: SlidePaneProps) {
-        super(props);
+    if (!visible) {
+        rootStyle['pointerEvents'] = 'none';
     }
+    if (style) rootStyle = assign(rootStyle, style);
 
-    render() {
-        const { children, visible, style, className, onClose } = this.props;
-        const slidePrefixCls = 'dtc-slide-pane';
-        let myStyle: any = {
-            top: 0,
-            transform: visible ? undefined : 'translate3d(150%, 0, 0)',
-        };
-        const classes = classNames(slidePrefixCls, className);
-        if (!visible) {
-            myStyle['pointerEvents'] = 'none';
-        }
-        if (style) myStyle = assign(myStyle, style);
-
+    const renderButton = () => {
         return (
-            <div className={classes} style={myStyle}>
-                <div
-                    className={`${slidePrefixCls}-content`}
-                    data-testid="slidepane_container"
-                    style={{ display: visible ? 'block' : 'none', height: '100%' }}
-                >
-                    {children}
-                </div>
-                <img
-                    className={`${slidePrefixCls}-icon`}
-                    data-testid="slidepane_action"
-                    onClick={onClose}
-                    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=="
-                    alt=""
-                />
-            </div>
+            <img
+                className={`${slidePrefixCls}-icon`}
+                onClick={onClose}
+                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=="
+                alt="closeBtn"
+            />
         );
-    }
-}
+    };
+
+    return (
+        <RcDrawer
+            prefixCls={slidePrefixCls}
+            rootClassName={classes}
+            width="100%"
+            onClose={onClose}
+            open={visible}
+            mask={false}
+            rootStyle={rootStyle}
+            placement="right"
+        >
+            {renderButton()}
+            <div className={`${slidePrefixCls}-content`} style={bodyStyle}>
+                {children}
+            </div>
+        </RcDrawer>
+    );
+};
 
 export default SlidePane;
diff --git a/src/slidePane/style.scss b/src/slidePane/style.scss
@@ -2,22 +2,18 @@ $prefix: "dtc-slide-pane";
 
 .#{$prefix} {
     background: #FFF;
-    border-left: 1px solid #DDD;
-    border-bottom: 1px solid #DDD;
-    box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.1);
-    position: absolute;
+    box-shadow: -10px 0 20px 0 rgba(61, 68, 110, 0.1);
     display: inline-block;
+    position: fixed;
     transition: transform 0.3s ease-in;
     z-index: 99;
-    &.l-#{$prefix}--fixed {
-        position: fixed;
-        top: 0;
-        right: 0;
+    .#{$prefix}-content-wrapper {
+        height: 100%;
     }
     .#{$prefix}-content {
         position: relative;
+        height: 100%;
     }
-
     .#{$prefix}-icon {
         width: 12px;
         height: 56px;
