@para-ui/core 2.1.32 → 2.1.35

package/docs/view/drawer/api.tsx

@@ -0,0 +1,123 @@
+/**
+ * @author Hanz
+ * @date 2022/2/10 下午4:38
+ * @description drawer api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'open',
+        desc: 'Drawer是否可见',
+        type: `boolean`,
+        default: 'false'
+    },
+    {
+        name: 'defaultOpen',
+        desc: '默认显示Drawer',
+        type: `boolean`,
+        default: 'false'
+    },
+    {
+        name: 'placement',
+        desc: '抽屉的方向',
+        type: `'left' | 'top' | 'right' | 'bottom'`,
+        default: 'right'
+    },
+    {
+        name: 'size',
+        desc: '预设抽屉宽度（或高度），default 378px 和 large 736px',
+        type: 'default | large',
+        default: 'default'
+    },
+    {
+        name: 'autoFocus',
+        desc: '抽屉展开后是否将焦点切换至其 Dom 节点',
+        type: `boolean`,
+        default: 'true'
+    },
+    {
+        name: 'contentWrapperStyle',
+        desc: '可用于设置 Drawer 包裹内容部分的样式',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'destroyOnClose',
+        desc: '关闭时销毁 Drawer 里的子元素',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'forceRender',
+        desc: '预渲染 Drawer 内元素',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'height',
+        desc: '高度, 在 placement 为 top 或 bottom 时使用',
+        type: 'string | number',
+        default: '378'
+    },
+    {
+        name: 'width',
+        desc: '宽度, 在 placement 为 left 或 right 时使用',
+        type: 'string | number',
+        default: '378'
+    },
+    {
+        name: 'keyboard',
+        desc: '是否支持键盘 esc 关闭',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'showMask',
+        desc: '是否展示遮罩',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'maskClosable',
+        desc: '点击蒙层是否允许关闭',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'maskStyle',
+        desc: '遮罩样式',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'wrapperClassName',
+        desc: '最外层容器class',
+        type: 'string'
+    },
+    {
+        name: 'getContainer',
+        desc: '指定 Drawer 挂载的 HTML 节点',
+        type: 'string | HTMLElement | (() => HTMLElement)',
+        default: 'body'
+    },
+    {
+        name: 'afterVisibleChange',
+        desc: '切换抽屉时动画结束后的回调',
+        type: '(open: boolean) => void'
+    },
+    {
+        name: 'onClose',
+        desc: '关闭时回调',
+        type: '(event: React.MouseEvent | React.KeyboardEvent) => void'
+    }
+];
+export default apiData;

package/docs/view/drawer/codeString.tsx

@@ -0,0 +1,122 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicDrawer = `
+import Drawer from '@para-ui/core/Drawer';
+import Button from '@para-ui/core/Button';
+
+const [open, setOpen] = React.useState<boolean>(false);
+
+const showDrawer = () => {
+    setOpen(true);
+};
+
+const onClose = () => {
+    setOpen(false);
+};
+
+<Button onClick={showDrawer}>
+    Open
+</Button>
+<Drawer onClose={onClose}
+        open={open}
+>
+    <section style={{padding: 24}}>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+    </section>
+</Drawer>
+`;
+
+export const drawerWithTitle = `
+import Drawer from '@para-ui/core/Drawer';
+import Button from '@para-ui/core/Button';
+
+const [open, setOpen] = React.useState<boolean>(false);
+
+const showDrawer = () => {
+    setOpen(true);
+};
+
+const onClose = () => {
+    setOpen(false);
+};
+
+<Button onClick={showDrawer}>
+    Open
+</Button>
+<Drawer onClose={onClose}
+        open={open}
+        title={'标题'}
+        onOk={onClose}
+        onCancel={onClose}
+        // extra={<>操作栏</>}
+>
+    <section style={{padding: 24}}>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+    </section>
+</Drawer>
+`;
+
+export const drawerPlace = `
+import Drawer from '@para-ui/core/Drawer';
+import RadioGroup from '@para-ui/core/RadioGroup';
+import Button from '@para-ui/core/Button';
+
+const [visible, setVisible] = React.useState<boolean>(false);
+const [place, setPlace] = React.useState<any>('right');
+
+const showDrawerWithPlace = () => {
+    setVisible(true);
+};
+
+const onCloseWithPlace = () => {
+    setVisible(false);
+};
+
+const onRadioChange = (val: string) => {
+    setPlace(val);
+};
+
+<RadioGroup
+    list={[
+        {
+            label: 'top',
+            name: 'top'
+        },
+        {
+            label: 'bottom',
+            name: 'bottom'
+        },
+        {
+            label: 'left',
+            name: 'left'
+        },
+        {
+            label: 'right',
+            name: 'right'
+        }
+    ]}
+    onChange={onRadioChange}
+    value={place}
+/>
+<Button onClick={showDrawerWithPlace}>
+    Open
+</Button>
+<Drawer placement={place}
+        onClose={onCloseWithPlace}
+        open={visible}
+>
+    <section style={{padding: 24}}>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+    </section>
+</Drawer>
+`;
+

package/docs/view/drawer/index.scss

@@ -0,0 +1,5 @@
+.paraui-drawer-demo {
+  .code-box-demo {
+
+  }
+}

package/docs/view/drawer/index.tsx

@@ -0,0 +1,200 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Drawer from 'src/Drawer';
+import Button from 'src/Button';
+import RadioGroup from 'src/RadioGroup';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicDrawer, drawerPlace, drawerWithTitle} from './codeString';
+import apiData from './api';
+import './index.scss';
+import ComboSelect from "../../../src/ComboSelect";
+
+//drawer
+const ParaDrawer: FunctionComponent = () => {
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [visible, setVisible] = React.useState<boolean>(false);
+    const [vTitle, setVtitle] = React.useState<boolean>(false);
+    const [place, setPlace] = React.useState<any>('right');
+    const [R, setR] = React.useState<any>(0);
+    const cRef = React.useRef<any>();
+
+    const showDrawer = () => {
+        setOpen(true);
+    };
+
+    const onClose = () => {
+        setOpen(false);
+    };
+
+    const showDrawerWithTitle = () => {
+        setVtitle(true);
+    };
+
+    const onCloseWithTitle = () => {
+        setVtitle(false);
+    };
+    const showDrawerWithPlace = () => {
+        setVisible(true);
+    };
+
+    const onCloseWithPlace = () => {
+        setVisible(false);
+    };
+
+    const onRadioChange = (val: string) => {
+        setPlace(val);
+    };
+
+    return (
+        <div className={'paraui-drawer-demo'}>
+            <Title name={'抽屉'}>代码演示</Title>
+            <CodeBox code={basicDrawer} title={'基础抽屉'} description={'基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭。'}>
+                <Button onClick={showDrawer}>
+                    Open
+                </Button>
+                <Drawer onClose={onClose}
+                        open={open}
+                >
+                    <section style={{
+                        width: 300,
+                        padding: 24,
+                        overflow: 'auto',
+                        display: 'inline-block',
+                        whiteSpace: 'nowrap'
+                    }}
+                             onScroll={() => {
+                                 console.log(cRef.current)
+                                 cRef.current?.closePopup?.()
+                             }}>
+                        {/*<p>Some contents...</p>*/}
+                        {/*<p>Some contents...</p>*/}
+                        {/*<p>Some contents...</p>*/}
+                        Some contents...
+                        Some contents...
+                        Some contents...
+                        Some contents...
+                        Some contents...
+                        Some contents...
+                        <div style={{width: 200}}>
+                            <ComboSelect
+                                refresh={R}
+                                action={cRef}
+                                mode={'tree'}
+                                allowClear={true}
+                                checkable={true}
+                                TreeProps={{
+                                    treeData: [
+                                        {
+                                            title: '0-0',
+                                            key: '0-0',
+                                            children: [
+                                                {
+                                                    title: '0-0-0',
+                                                    key: '0-0-0',
+                                                    children: [
+                                                        {title: '0-0-0-0', key: '0-0-0-0'},
+                                                        {title: '0-0-0-1', key: '0-0-0-1'},
+                                                        {title: '0-0-0-2', key: '0-0-0-2'},
+                                                    ],
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            title: '0-1',
+                                            key: '0-1',
+                                            children: [
+                                                {title: '0-1-0-0', key: '0-1-0-0'},
+                                                {title: '0-1-0-1', key: '0-1-0-1'},
+                                                {title: '0-1-0-2', key: '0-1-0-2'},
+                                            ],
+                                        },
+                                        {
+                                            title: '0-2',
+                                            key: '0-2',
+                                        }
+                                    ],
+                                    checkStrictly: true,
+                                    onExpand: () => {
+                                        console.log('expand')
+                                        setR(Math.random())
+                                    }
+                                }}
+                            />
+                            {/*<ComboSelect*/}
+                            {/*    action={cRef}*/}
+                            {/*    mode={'tree'}*/}
+                            {/*    ctx={'demo'}*/}
+                            {/*    url={'/list/all'}*/}
+                            {/*    showSearch={true}*/}
+                            {/*    replaceFields={{key: 'key', title: 'name'}}*/}
+                            {/*    TreeProps={{*/}
+                            {/*        pagination: true,*/}
+                            {/*    }}*/}
+                            {/*/>*/}
+                        </div>
+                    </section>
+                </Drawer>
+            </CodeBox>
+            <CodeBox code={drawerWithTitle} title={'标题和额外操作'}
+                     description={'带有标题和额外操作的抽屉。title 属性自定义标题，extra 属性可自定义右侧操作栏。'}>
+                <Button onClick={showDrawerWithTitle}>
+                    Open
+                </Button>
+                <Drawer onClose={onCloseWithTitle}
+                        open={vTitle}
+                        title={'标题'}
+                        onOk={onCloseWithTitle}
+                        onCancel={onCloseWithTitle}
+                    // extra={<>操作栏</>}
+                >
+                    <section style={{padding: 24}}>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                    </section>
+                </Drawer>
+            </CodeBox>
+            <CodeBox code={drawerPlace} title={'自定义位置'} description={'自定义位置，点击触发按钮抽屉从相应的位置滑出，点击遮罩区关闭。'}>
+                <RadioGroup
+                    list={[
+                        {
+                            label: 'top',
+                            name: 'top'
+                        },
+                        {
+                            label: 'bottom',
+                            name: 'bottom'
+                        },
+                        {
+                            label: 'left',
+                            name: 'left'
+                        },
+                        {
+                            label: 'right',
+                            name: 'right'
+                        }
+                    ]}
+                    onChange={onRadioChange}
+                    value={place}
+                />
+                <Button onClick={showDrawerWithPlace}>
+                    Open
+                </Button>
+                <Drawer placement={place}
+                        onClose={onCloseWithPlace}
+                        open={visible}
+                >
+                    <section style={{padding: 24}}>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                        <p>Some contents...</p>
+                    </section>
+                </Drawer>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaDrawer;

package/docs/view/empty/api.tsx

@@ -0,0 +1,57 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description empty api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'size',
+        desc: '大小',
+        type: 'large | small',
+        default: 'large'
+    },
+    {
+        name: 'imageStyle',
+        desc: '图片样式',
+        type: 'React.CSSProperties',
+    },
+    {
+        name: 'image',
+        desc: '图片',
+        type: 'ReactNode',
+    },
+    {
+        name: 'description',
+        desc: '描述',
+        type: 'ReactNode'
+    },
+    {
+        name: 'showRefresh',
+        desc: 'tooltip位置',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'onRefresh',
+        desc: '点击刷新回调',
+        type: '(event: React.MouseEvent) => void',
+    },
+    {
+        name: 'customEmpty',
+        desc: '自定义空节点',
+        type: 'ReactNode'
+    }
+];
+export default apiData;

package/docs/view/empty/codeString.tsx

@@ -0,0 +1,38 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicEmpty = `
+import Empty from '@para-ui/core/Empty';
+
+<Empty/>
+`;
+
+export const sizeEmpty = `
+import Empty from '@para-ui/core/Empty';
+
+<Empty size={'small'}/>
+<Empty/>
+`;
+
+export const customEmpty = `
+import Empty from '@para-ui/core/Empty';
+
+<Empty image={'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'}
+       description={'自定义描述'}
+       size={'small'}/>
+`;
+
+export const refreshEmpty = `
+import Empty from '@para-ui/core/Empty';
+
+<Empty size={'small'}
+       showRefresh
+       onRefresh={() => {
+           console.log('refresh');
+       }}
+/>
+`;
+
+

package/docs/view/empty/index.scss

@@ -0,0 +1,11 @@
+.paraui-empty-demo {
+  .code-box-demo {
+    display: flex;
+    justify-content: center;
+
+    .empty-code {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/docs/view/empty/index.tsx

@@ -0,0 +1,43 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Empty from 'src/Empty';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicEmpty, sizeEmpty, customEmpty, refreshEmpty} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//empty
+const ParaEmpty: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-empty-demo'}>
+            <Title name={'空状态'}>代码演示</Title>
+            <CodeBox code={basicEmpty} title={'基本'} description={'简单的展示。'}>
+                <Empty/>
+            </CodeBox>
+            <CodeBox code={sizeEmpty} title={'尺寸'} description={'size 属性定义大小尺寸，默认为large。'}>
+                <section className={'empty-code'}>
+                    <Empty size={'small'}/>
+                    <Empty/>
+                </section>
+            </CodeBox>
+            <CodeBox code={customEmpty} title={'自定义'} description={'自定义图片、描述。'}>
+                <Empty image={'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'}
+                       description={'自定义描述'}
+                       size={'small'}/>
+            </CodeBox>
+            <CodeBox code={refreshEmpty} title={'点击刷新'} description={'显示点击刷新按钮。'}>
+                <Empty size={'small'}
+                       showRefresh
+                       onRefresh={() => {
+                           console.log('refresh');
+                       }}
+                />
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaEmpty;