@para-ui/core 2.1.35 → 2.1.38

package/docs/view/notification/codeString.tsx

@@ -1,110 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/9 下午5:54
- * @description
- */
-export const basicNotifi = `
-import Notification from '@para-ui/core/Notification';
-import Button from '@para-ui/core/Button';
-
-const openNotification = () => {
-    Notification.open({
-        message: 'Notification Title',
-        description: 'This is the content of the notification.',
-        onClick: () => {
-            console.log('Notification Clicked!');
-        }
-    });
-};
-
-<Button onClick={openNotification}>
-    Open the notification
-</Button>
-`;
-
-export const notificationWithIcon = `
-import Notification from '@para-ui/core/Notification';
-import Button from '@para-ui/core/Button';
-
-const openNotificationWithIcon = (type: 'success' | 'warning' | 'error' | 'info') => {
-    Notification[type]({
-        message: 'Notification Title',
-        description: 'This is the content of the notification.'
-    });
-};
-
-<Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
-<Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
-<Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
-<Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
-`;
-
-export const customBtnNotifi = `
-import Notification from '@para-ui/core/Notification';
-import Button from '@para-ui/core/Button';
-
-const openCustomNotification = () => {
-    const key = \`open\${Date.now()}\`;
-    const btn = (
-        <Button size="small" onClick={() => Notification.close(key)}>
-            Confirm
-        </Button>
-    );
-    Notification.open({
-        message: 'Notification Title',
-        description: 'This is the content of the notification.',
-        btn,
-        key
-    });
-};
-
-<Button onClick={openCustomNotification}>
-    Open the notification
-</Button>
-`;
-
-export const placementNotifi = `
-import Notification from '@para-ui/core/Notification';
-import Button from '@para-ui/core/Button';
-
-const openPlacement = (placement: any) => () => {
-    Notification.info?.({
-        message: \`Notification \${placement}\`,
-        description:
-            'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
-        placement,
-    });
-};
-
-<Button onClick={openPlacement('topLeft')}>topLeft</Button>
-<Button onClick={openPlacement('topRight')}>topRight</Button>
-<Button onClick={openPlacement('bottomLeft')}>bottomLeft</Button>
-<Button onClick={openPlacement('bottomRight')}>bottomRight</Button>
-`;
-
-export const updatableNotifi = `
-import Notification from '@para-ui/core/Notification';
-import Button from '@para-ui/core/Button';
-
-const openNotificationByKey = () => {
-    const key = 'updatable';
-    Notification.open({
-        key,
-        message: 'Notification Title',
-        description: 'description.',
-    });
-    setTimeout(() => {
-        Notification.open({
-            key,
-            message: 'New Title',
-            description: 'New description.',
-        });
-    }, 1000);
-};
-
-<Button onClick={openNotificationByKey}>
-    Open the notification
-</Button>
-`;
-
-

package/docs/view/notification/index.scss

@@ -1,9 +0,0 @@
-.paraui-notification-demo {
-  .code-box-demo {
-    .notification-code {
-      > button {
-        margin-right: 15px;
-      }
-    }
-  }
-}

package/docs/view/notification/index.tsx

@@ -1,118 +0,0 @@
-import React, {FunctionComponent} from 'react';
-import CodeBox from '../../components/codeBox';
-import Notification from 'src/Notification';
-import Button from 'src/Button';
-import APITable from '../../components/apiTable';
-import Title from '../../components/title';
-import {
-    basicNotifi,
-    notificationWithIcon,
-    customBtnNotifi,
-    placementNotifi,
-    updatableNotifi
-} from './codeString';
-import apiData, {configApiData} from './api';
-import './index.scss';
-
-//notification
-const ParaNotification: FunctionComponent = () => {
-
-    const openNotification = () => {
-        Notification.open({
-            message: 'Notification Title',
-            description: 'This is the content of the notification.',
-            onClick: () => {
-                console.log('Notification Clicked!');
-            }
-        });
-    };
-
-    const openNotificationWithIcon = (type: 'success' | 'warning' | 'error' | 'info') => {
-        Notification[type]({
-            message: 'Notification Title',
-            description: 'This is the content of the notification.'
-        });
-    };
-
-    const openCustomNotification = () => {
-        const key = `open${Date.now()}`;
-        const btn = (
-            <Button size="small" onClick={() => Notification.close(key)}>
-                Confirm
-            </Button>
-        );
-        Notification.open({
-            message: 'Notification Title',
-            description: 'This is the content of the notification.',
-            btn,
-            key
-        });
-    };
-
-    const openPlacement = (placement: any) => () => {
-        Notification.info?.({
-            message: `Notification ${placement}`,
-            description:
-                'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
-            placement
-        });
-    };
-
-    const openNotificationByKey = () => {
-        const key = 'updatable';
-        Notification.open({
-            key,
-            message: 'Notification Title',
-            description: 'description.',
-        });
-        setTimeout(() => {
-            Notification.open({
-                key,
-                message: 'New Title',
-                description: 'New description.',
-            });
-        }, 1000);
-    };
-
-    return (
-        <div className={'paraui-notification-demo'}>
-            <Title name={'通知提醒框'}>代码演示</Title>
-            <CodeBox code={basicNotifi} title={'基本'} description={'最简单的用法，4.5 秒后自动关闭。'}>
-                <Button onClick={openNotification}>
-                    Open the notification
-                </Button>
-            </CodeBox>
-            <CodeBox code={notificationWithIcon} title={'带有图标'} description={'通知提醒框左侧有图标。'}>
-                <section className={'notification-code'}>
-                    <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
-                    <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
-                    <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
-                    <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
-                </section>
-            </CodeBox>
-            <CodeBox code={customBtnNotifi} title={'自定义按钮'} description={'自定义关闭按钮的样式和文字。'}>
-                <Button onClick={openCustomNotification}>
-                    Open the notification
-                </Button>
-            </CodeBox>
-            <CodeBox code={placementNotifi} title={'位置'} description={'通知从右上角、右下角、左下角、左上角弹出。'}>
-                <section className={'notification-code'}>
-                    <Button onClick={openPlacement('topLeft')}>topLeft</Button>
-                    <Button onClick={openPlacement('topRight')}>topRight</Button>
-                    <Button onClick={openPlacement('bottomLeft')}>bottomLeft</Button>
-                    <Button onClick={openPlacement('bottomRight')}>bottomRight</Button>
-                </section>
-            </CodeBox>
-            <CodeBox code={updatableNotifi} title={'更新消息内容'} description={'可以通过唯一的 key 来更新内容。'}>
-                <Button onClick={openNotificationByKey}>
-                    Open the notification
-                </Button>
-            </CodeBox>
-
-            <APITable data={apiData}/>
-            <APITable data={configApiData} showApi={false} subTitle={'全局配置参数'}/>
-        </div>
-    );
-};
-
-export default ParaNotification;

package/docs/view/operateBtn/api.tsx

@@ -1,127 +0,0 @@
-/**
- * @author linhd
- * @date 2022/2/14 2:04 PM
- * @description api
- */
-import {RowsData} from '../../components/apiTable';
-
-const apiData: RowsData = [
-    {
-        name: 'className',
-        desc: 'class样式名',
-        type: 'string'
-    },
-    {
-        name: 'style',
-        desc: 'style',
-        type: 'CSSProperties'
-    },
-    {
-        name: 'placement',
-        desc: '定位方向',
-        type: 'top-start | bottom-end | bottom-start | bottom | left-end | left-start | left | right-end | right-start | right | top-end | top',
-        default: 'bottom-start'
-    },
-    {
-        name: 'key',
-        desc: 'listItem索引下标',
-        type: 'string',
-        default: 'key'
-    },
-    {
-        name: 'size',
-        desc: '大小',
-        type: '\'small\' | \'medium\' | \'large\'',
-        default: 'small'
-    },
-    {
-        name: 'list',
-        desc: '按钮列表配置',
-        type: 'OperateBtnListProps[]'
-    },
-    {
-        name: 'loadingMapping',
-        desc: '加载对象映射,true加载中,false正常状态',
-        type: '{[name: string]: true | false}'
-    },
-    {
-        name: 'showNum',
-        desc: '显示几个, 多余的放到更多里面',
-        type: 'number',
-        default: '3'
-    },
-    {
-        name: 'popoverClassName',
-        desc: '下拉框样式',
-        type: 'string'
-    },
-    {
-        name: 'clickCloseMore',
-        desc: '点击是否关闭更多',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'onClick',
-        desc: '点击事件, 如果listItem里面存在onClick事件,则不触发改事件, Promise返回false,表示结束loading',
-        type: '(item: OperateBtnListProps, e: any) => void | Promise<boolean | any>'
-    },
-];
-
-export const apiDataItem: RowsData = [
-    {
-        name: 'className',
-        desc: 'class样式名',
-        type: 'string'
-    },
-    {
-        name: 'style',
-        desc: 'style',
-        type: 'CSSProperties'
-    },
-    {
-        name: 'placement',
-        desc: '定位方向',
-        type: 'top-start | bottom-end | bottom-start | bottom | left-end | left-start | left | right-end | right-start | right | top-end | top',
-        default: 'bottom-start'
-    },
-    {
-        name: 'key',
-        desc: '唯一值',
-        type: 'string'
-    },
-    {
-        name: 'label',
-        desc: '显示名',
-        type: 'React.ReactNode'
-    },
-    {
-        name: 'toolTipTitle',
-        desc: '鼠标移上去显示的内容',
-        type: 'React.ReactNode'
-    },
-    {
-        name: 'icon',
-        desc: '图标',
-        type: 'React.ReactNode'
-    },
-    {
-        name: 'disabled',
-        desc: '是否禁用',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'danger',
-        desc: '设置危险按钮',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'onClick',
-        desc: '点击事件, 如果listItem里面存在onClick事件,则不触发改事件,Promise返回false,表示结束loading',
-        type: '(item: OperateBtnListProps, e: any) => void | Promise<boolean | any>'
-    },
-];
-
-export default apiData;

package/docs/view/operateBtn/codeString.tsx

@@ -1,165 +0,0 @@
-/**
- * @author linhd
- * @date 2022/2/14 2:04 PM
- * @description 源码字符串
- */
-export const basicOperateBtn = `
-import OperateBtn,{OperateBtnListProps} from '@para-ui/core/OperateBtn';
-
-const list: OperateBtnListProps[] = [
-    {
-        label: '编辑',
-        icon: <EditOutline />,
-        onClick: (item: OperateBtnListProps) => {
-            console.log(item)
-        }
-    },
-    {
-        label: '查看',
-        disabled: true,
-        icon: <BlacklistAudit />
-    },
-    {
-        label: '删除',
-        icon: <Delete />,
-        danger: true
-    },
-    {
-        label: '清理',
-        icon: <Accelerate />
-    },
-    {
-        label: '清理清理清理清理清理',
-        icon: <Accelerate />
-    },
-    {
-        label: '清理禁用',
-        disabled: true,
-        icon: <Accelerate />
-    },
-    {
-        label: '清理',
-        danger: true,
-        icon: <Accelerate />
-    }
-];
-
-<OperateBtn size={"small"} list={list} />
-<br />
-<OperateBtn size={"medium"} list={list} />
-<br />
-<OperateBtn size={"large"} list={list} />
-`;
-
-export const clickOperateBtn = `
-import OperateBtn,{OperateBtnListProps} from '@para-ui/core/OperateBtn';
-
-const list: OperateBtnListProps[] = [
-    {
-        label: '编辑',
-        icon: <EditOutline />,
-        onClick: (item: OperateBtnListProps) => {
-            console.log(item)
-        }
-    },
-    {
-        label: '查看',
-        disabled: true,
-        icon: <BlacklistAudit />
-    },
-    {
-        label: '删除',
-        icon: <Delete />,
-        danger: true
-    },
-    {
-        label: '清理',
-        icon: <Accelerate />
-    },
-    {
-        label: '清理清理清理清理清理',
-        icon: <Accelerate />
-    },
-    {
-        label: '清理禁用',
-        disabled: true,
-        icon: <Accelerate />
-    },
-    {
-        label: '清理',
-        danger: true,
-        icon: <Accelerate />
-    }
-]
-
-const clickBtn = (item: OperateBtnListProps) => {
-    console.log(item, 'clickBtn')
-}
-
-<OperateBtn list={list} onClick={clickBtn} />
-`;
-
-export const loadingOperateBtn = `
-import OperateBtn,{OperateBtnListProps} from '@para-ui/core/OperateBtn';
-const [loadingMapping, setLoadingMapping] = useState<any>({
-    view: false
-});
-
-const list: OperateBtnListProps[] = [
-    {
-        key: 'edit',
-        label: '编辑',
-        icon: <EditOutline />,
-        onClick: async (item: OperateBtnListProps) => {
-            const reslut: boolean = await new Promise((resolve, reject) => {
-                setTimeout(() => {
-                    resolve(false);
-                }, 2000)
-            })
-            return reslut;
-        }
-    },
-    {
-        key: 'view',
-        label: '查看',
-        icon: <BlacklistAudit />
-    },
-    {
-        key: 'del',
-        label: '删除',
-        icon: <Delete />,
-        danger: true
-    },
-    {
-        key: 'clean',
-        label: '清理',
-        icon: <Accelerate />
-    }
-]
-
-const clickBtn = async (item: OperateBtnListProps) => {
-    if (item.key === 'view') {
-        setLoadingMapping({
-            view: true
-        })
-        setTimeout(() => {
-            setLoadingMapping({
-                view: false
-            })
-        }, 1000)
-        return;
-    }
-    const reslut: boolean = await new Promise((resolve, reject) => {
-        setTimeout(() => {
-            resolve(false);
-        }, 2000)
-    })
-    return reslut;
-}
-
-<OperateBtn
-    list={list}
-    onClick={clickBtn}
-    loadingMapping={loadingMapping}
-/>
-`;

package/docs/view/operateBtn/index.tsx

@@ -1,160 +0,0 @@
-import React, {FunctionComponent, useState} from 'react';
-import CodeBox from '../../components/codeBox';
-import OperateBtn, {OperateBtnListProps} from 'src/OperateBtn';
-import APITable from '../../components/apiTable';
-import Title from '../../components/title';
-import {basicOperateBtn, clickOperateBtn, loadingOperateBtn} from './codeString';
-import apiData, {apiDataItem} from './api';
-import Delete from "@para-ui/icons/Delete";
-import EditOutline from "@para-ui/icons/EditOutline";
-import BlacklistAudit from "@para-ui/icons/BlacklistAudit";
-import Accelerate from "@para-ui/icons/Accelerate";
-import './index.scss';
-
-const list: OperateBtnListProps[] = [
-    {
-        label: '编辑',
-        icon: <EditOutline />,
-        onClick: (item: OperateBtnListProps) => {
-            console.log(item)
-        }
-    },
-    {
-        label: '查看',
-        disabled: true,
-        icon: <BlacklistAudit />
-    },
-    {
-        label: '删除',
-        icon: <Delete />,
-        danger: true
-    },
-    {
-        label: '清理',
-        icon: <Accelerate />
-    },
-    {
-        label: '清理清理清理清理清理',
-        icon: <Accelerate />
-    },
-    {
-        label: '清理禁用',
-        disabled: true,
-        icon: <Accelerate />
-    },
-    {
-        label: '清理',
-        danger: true,
-        icon: <Accelerate />
-    }
-]
-
-const list1: OperateBtnListProps[] = [
-    {
-        key: 'edit',
-        label: '编辑',
-        icon: <EditOutline />,
-        onClick: async (item: OperateBtnListProps) => {
-            const reslut: boolean = await new Promise((resolve, reject) => {
-                setTimeout(() => {
-                    resolve(false);
-                }, 2000)
-            })
-            return reslut;
-        }
-    },
-    {
-        key: 'view',
-        label: '查看',
-        icon: <BlacklistAudit />
-    },
-    {
-        key: 'del',
-        label: '删除',
-        icon: <Delete />,
-        danger: true
-    },
-    {
-        key: 'clean',
-        label: '清理',
-        icon: <Accelerate />
-    }
-]
-
-const ParaOperateBtn: FunctionComponent = () => {
-    const [loadingMapping, setLoadingMapping] = useState<any>({
-        view: false
-    });
-
-    const clickBtn = (item: OperateBtnListProps) => {
-        console.log(item, 'clickBtn')
-    }
-
-    const clickBtn1 = async (item: OperateBtnListProps) => {
-        if (item.key === 'view') {
-            setLoadingMapping({
-                view: true
-            })
-            setTimeout(() => {
-                setLoadingMapping({
-                    view: false
-                })
-            }, 1000)
-            return;
-        }
-        const reslut: boolean = await new Promise((resolve, reject) => {
-            setTimeout(() => {
-                resolve(false);
-            }, 2000)
-        })
-        return reslut;
-    }
-
-    return (
-        <div className={'paraui-operate-btn-demo'}>
-            <Title name={'表格操作按钮'}>代码演示</Title>
-            <CodeBox
-                code={basicOperateBtn}
-                title={'基本'}
-                description={'表格操作按钮。'}
-            >
-                <OperateBtn size={"small"} list={list} onClick={clickBtn} />
-                <br />
-                <OperateBtn size={"medium"} list={list} />
-                <br />
-                <OperateBtn size={"large"} list={list} />
-            </CodeBox>
-            <CodeBox
-                code={clickOperateBtn}
-                title={'点击事件'}
-                description={
-                    <>
-                        <p>1. list里面存在onClick事件,那么组件身上的onClick将会失效</p>
-                    </>
-                }
-            >
-                <OperateBtn list={list} onClick={clickBtn} />
-            </CodeBox>
-            <CodeBox
-                code={loadingOperateBtn}
-                title={'loading'}
-                description={
-                    <>
-                        <p>1. 通过loadingMapping来自定义loading什么时候显示</p>
-                        <p>2. loadingMapping不存在的, 组件默认会有loading状态</p>
-                    </>
-                }
-            >
-                <OperateBtn
-                    list={list1}
-                    onClick={clickBtn1}
-                    loadingMapping={loadingMapping}
-                />
-            </CodeBox>
-            <APITable data={apiData} />
-            <APITable data={apiDataItem} showApi={false} subTitle={'OperateBtnListProps'} />
-        </div>
-    );
-};
-
-export default ParaOperateBtn;