@para-ui/core 2.1.35 → 2.1.36

package/docs/view/drawer/api.tsx

@@ -1,123 +0,0 @@
-/**
- * @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

@@ -1,122 +0,0 @@
-/**
- * @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

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

package/docs/view/drawer/index.tsx

@@ -1,200 +0,0 @@
-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

@@ -1,57 +0,0 @@
-/**
- * @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

@@ -1,38 +0,0 @@
-/**
- * @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

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

package/docs/view/empty/index.tsx

@@ -1,43 +0,0 @@
-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;