@para-ui/core 2.1.32 → 2.1.35

package/docs/view/notification/codeString.tsx

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

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

package/docs/view/notification/index.tsx

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

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

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

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