feat(SlidePane): support loading attribute in slide pane (#428)

Author: jin-sir

src/slidePane/__tests/__snapshots__/index.test.tsx.snap

@@ -25,15 +25,23 @@ exports[`test SlidePane  snapshot match 1`] = `
             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"
+              class="ant-spin-nested-loading dtc-slide-pane-nested-loading"
             >
-              Hello World
+              <div
+                class="ant-spin-container"
+              >
+                <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>
         </div>

src/slidePane/__tests/index.test.tsx

@@ -13,6 +13,19 @@ describe('test SlidePane ', () => {
         const { container } = render(<SlidePane visible={false}>Hello World</SlidePane>);
         expect(container).not.toHaveClass();
     });
+    test('should render loading correct ', () => {
+        const { unmount } = render(<SlidePane visible>Hello World</SlidePane>);
+        const dom = document.querySelector('.ant-spin-spinning');
+        expect(dom).toBe(null);
+        unmount();
+        render(
+            <SlidePane visible loading>
+                Hello World
+            </SlidePane>
+        );
+        const domLoading = document.querySelector('.ant-spin-spinning');
+        expect(domLoading).not.toBe(null);
+    });
     test('should render mask correct ', () => {
         const { unmount } = render(<SlidePane visible>Hello World</SlidePane>);
         const dom = document.querySelector('.dtc-slide-pane-mask');

src/slidePane/demos/basic.tsx

@@ -4,6 +4,7 @@ import { SlidePane } from 'dt-react-component';
 
 export default () => {
     const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
     const [width, setWidth] = useState(80);
 
     return (
@@ -15,11 +16,21 @@ export default () => {
                 onChange={(value: number) => setWidth(value)}
             />
             <span>width:{width}%</span>
-            <Button style={{ margin: '10px' }} onClick={() => setVisible((v) => !v)}>
+            <Button
+                style={{ margin: '10px' }}
+                onClick={() => {
+                    setVisible((v) => !v);
+                    setLoading(true);
+                    setTimeout(() => {
+                        setLoading(false);
+                    }, 3000);
+                }}
+            >
                 click me
             </Button>
             <SlidePane
                 visible={visible}
+                loading={loading}
                 width={`${width}%`}
                 onClose={() => setVisible(false)}
                 title="title"

src/slidePane/index.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, KeyboardEvent, MouseEvent, useEffect, useState } from 'react';
-import { Tabs } from 'antd';
+import { Spin, Tabs } from 'antd';
 import classNames from 'classnames';
 import RcDrawer from 'rc-drawer';
 
@@ -17,6 +17,7 @@ type TabKey<T extends readOnlyTab> = T[number]['key'];
 
 type TabsSlidePane<T extends readOnlyTab> = {
     visible: boolean;
+    loading?: boolean;
     rootClassName?: string;
     bodyClassName?: string;
     width?: number | string;
@@ -32,6 +33,7 @@ type TabsSlidePane<T extends readOnlyTab> = {
 
 type NormalSlidePane = {
     visible: boolean;
+    loading?: boolean;
     rootClassName?: string;
     bodyClassName?: string;
     width?: number | string;
@@ -54,6 +56,7 @@ const SlidePane = <T extends readOnlyTab>(props: SlidePaneProps<T>) => {
 
     const {
         visible,
+        loading = false,
         rootClassName,
         bodyClassName,
         mask = false,
@@ -94,23 +97,28 @@ const SlidePane = <T extends readOnlyTab>(props: SlidePaneProps<T>) => {
             rootClassName={rootClassName}
             {...motionProps}
         >
-            {!mask && renderButton()}
-            {title && <div className={`${slidePrefixCls}-header`}>{title}</div>}
-            {isFunction(props) && (
-                <Tabs
-                    destroyInactiveTabPane
-                    activeKey={tabKey}
-                    onChange={setTabKey}
-                    className={`${slidePrefixCls}-tabs`}
+            <Spin wrapperClassName={`${slidePrefixCls}-nested-loading`} spinning={loading}>
+                {!mask && renderButton()}
+                {title && <div className={`${slidePrefixCls}-header`}>{title}</div>}
+                {isFunction(props) && (
+                    <Tabs
+                        destroyInactiveTabPane
+                        activeKey={tabKey}
+                        onChange={setTabKey}
+                        className={`${slidePrefixCls}-tabs`}
+                    >
+                        {props.tabs?.map((tab: { key: string; title: React.ReactNode }) => (
+                            <Tabs.TabPane tab={tab.title} key={tab.key} />
+                        ))}
+                    </Tabs>
+                )}
+                <div
+                    className={classNames(`${slidePrefixCls}-body`, bodyClassName)}
+                    style={bodyStyle}
                 >
-                    {props.tabs?.map((tab: { key: string; title: React.ReactNode }) => (
-                        <Tabs.TabPane tab={tab.title} key={tab.key} />
-                    ))}
-                </Tabs>
-            )}
-            <div className={classNames(`${slidePrefixCls}-body`, bodyClassName)} style={bodyStyle}>
-                {typeof children === 'function' ? children(tabKey) : children}
-            </div>
+                    {typeof children === 'function' ? children(tabKey) : children}
+                </div>
+            </Spin>
         </RcDrawer>
     );
 };

src/slidePane/style.scss

@@ -75,6 +75,9 @@ $prefix: "dtc-slide-pane";
         z-index: 999;
         cursor: pointer;
     }
+    &-nested-loading {
+        height: 100%;
+    }
 }
 
 $duration: 0.3s;