@para-ui/core 2.1.32 → 2.1.35

package/docs/view/modal/index.tsx

@@ -0,0 +1,222 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Modal, {Confirm} from 'src/Modal';
+import Button from 'src/Button';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicModal, customHeader, customFooter, actionBtnText, confirmCode, confirmDestroyCode} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//modal
+const ParaModal: FunctionComponent = () => {
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [openH, setOpenH] = React.useState<boolean>(false);
+    const [openF, setOpenF] = React.useState<boolean>(false);
+    const [openBtn, setOpenBtn] = React.useState<boolean>(false);
+
+    const showModal = () => {
+        setOpen(true);
+    };
+    const showModalH = () => {
+        setOpenH(true)
+    };
+    const showModalF = () => {
+        setOpenF(true)
+    };
+    const showModalBtn = () => {
+        setOpenBtn(true)
+    };
+    const handleActions = () => {
+        setOpen(false);
+    };
+    const handleActionsH = () => {
+        setOpenH(false);
+    };
+    const handleActionsF = () => {
+        setOpenF(false);
+    };
+    const handleActionsBtn = () => {
+        setOpenBtn(false);
+    };
+    const Actions: FunctionComponent = () => {
+        const [test, setTest] = React.useState<string>('我知道了5s');
+        let time = 5;
+        React.useEffect(() => {
+            let timer = setInterval(() => {
+                if (time === 1) {
+                    clearInterval(timer);
+                    Confirm.destroyAll?.('test123');
+                    return;
+                }
+                setTest('我知道了' + --time + 's');
+            }, 1000);
+
+            return () => {
+                clearInterval(timer);
+            }
+        }, []);
+
+        return (
+            <Button variant={'contained'}
+                    size={'small'}
+                    onClick={() => {
+                        Confirm.destroyAll?.('test123')
+                    }}
+            >
+                {test}
+            </Button>
+        );
+    }
+    const info = () => {
+        Confirm.info({
+            title: 'This is a info message',
+            uuid: 'test123',
+            content: (
+                <div>
+                    <p>some messages...some messages...</p>
+                    <p>some messages...some messages...</p>
+                </div>
+            ),
+            onOk() {
+            },
+            onCancel() {
+            },
+            showActions: true,
+            actions: <Actions/>
+
+        });
+    };
+    const success = () => {
+        Confirm.success('some messages...some messages...', () => {
+            console.log(':::success ok');
+        });
+    };
+    const warn = () => {
+        Confirm.warn({
+            title: 'This is a warn message',
+            content: 'some messages...some messages...',
+            showCancel: false,
+            okText: '我知道了'
+        });
+    };
+    const error = () => {
+        Confirm.error({
+            title: 'This is an error message',
+            content: 'some messages...some messages...',
+            closable: true
+        });
+    };
+    const warnWithPromise = async () => {
+        const result = await Confirm.warn({
+            title: 'This is a warn with promise message',
+            content: 'some messages...some messages...',
+        });
+        console.log('warnWithPromise:::', result);
+    };
+
+    const showConfirm = () => {
+        for (let i = 0; i < 3; i++) {
+            setTimeout(() => {
+                Confirm.warn({
+                    title: '全部销毁',
+                    content: <Button variant={'outlined'} onClick={() => destroyAll()}>Click to destroy all</Button>
+                });
+            }, i * 500)
+        }
+    };
+
+    const showConfirmWithUUID = () => {
+        let uuid: string = '123456';
+        Confirm.warn({
+            title: '销毁实例',
+            uuid: uuid,
+            content: <Button variant={'outlined'} onClick={() => destroyAll(uuid)}>Destroy self</Button>
+        });
+    };
+
+    const destroyAll = (uuid?: string) => {
+        Confirm.destroyAll?.(uuid);
+    };
+
+    return (
+        <div className={'paraui-modal-demo'}>
+            <Title name={'对话框'}>代码演示</Title>
+            <CodeBox code={basicModal} title={'基本'} description={'最简单的用法。'}>
+                <Button onClick={showModal}>
+                    Open Modal
+                </Button>
+                <Modal open={open} title={'基本对话框'}
+                       onCancel={handleActions} onOk={handleActions}>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </Modal>
+            </CodeBox>
+            <CodeBox code={customHeader} title={'自定义页头'} description={'header 属性可以自定义页头。hideHeader=true 属性可以隐藏页头。'}>
+                <Button onClick={showModalH}>
+                    Custom Header
+                </Button>
+                <Modal open={openH} header={<h3>自定义页头</h3>} onCancel={handleActionsH} onOk={handleActionsH}>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </Modal>
+            </CodeBox>
+            <CodeBox code={customFooter} title={'自定义页脚'} description={`actions 属性可以自定义页脚。showActions=false 属性可以隐藏页脚。
+                actions 函数用法 (buttons: ReactNode[]) => ReactNode[]`}>
+                <Button onClick={showModalF}>
+                    Custom Footer
+                </Button>
+                <Modal open={openF}
+                       title={'自定义页脚'}
+                       actions={<div><Button size={'medium'} onClick={handleActionsF}>自定义页脚</Button></div>}
+                    // actions={(btns: React.ReactNode[]) => {
+                    //     btns.unshift(<Button size={'small'}>自定义</Button>);
+                    //     return btns;
+                    // }}
+                       onCancel={handleActionsF}
+                       onOk={handleActionsF}>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </Modal>
+            </CodeBox>
+            <CodeBox code={actionBtnText} title={'自定义按钮文字或属性'} description={'设置 okText 与 cancelText 以自定义按钮文字。' +
+            '传入 okButtonProps 和 cancelButtonProps 可分别自定义确定按钮和取消按钮的 props'}>
+                <Button onClick={showModalBtn}>
+                    Custom Button Text or Props
+                </Button>
+                <Modal open={openBtn}
+                       title={'自定义按钮文字或属性'}
+                       okText={'confirm'}
+                       cancelText={'cancel'}
+                       onCancel={handleActionsBtn}
+                       onOk={handleActionsBtn}>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                    <p>Some contents...</p>
+                </Modal>
+            </CodeBox>
+            <CodeBox code={confirmCode} title={'确认对话框'} description={'提供 info、success、warn、error 四种类型确认对话框'}>
+                <section className={'confirm-code'}>
+                    <Button onClick={info}>Info</Button>
+                    <Button onClick={success}>Success</Button>
+                    <Button onClick={warn}>Warn</Button>
+                    <Button onClick={error}>Error</Button>
+                    <Button onClick={warnWithPromise}>Warn with Promise</Button>
+                </section>
+            </CodeBox>
+            <CodeBox code={confirmDestroyCode} title={'销毁确认对话框'}
+                     description={'使用 Confirm.destroyAll() 可以销毁弹出的确认框。config 传入uuid 唯一标识，可以使用 Confirm.destroyAll(uuid) 销毁对应的确认框。'}>
+                <section className={'confirm-code'}>
+                    <Button onClick={showConfirm}>Destroy All</Button>
+                    <Button onClick={showConfirmWithUUID}>Destroy Self</Button>
+                </section>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaModal;

package/docs/view/multiBox/api.tsx

@@ -0,0 +1,99 @@
+/**
+ * @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: 'size',
+        desc: '控件大小',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'labelSign',
+        desc: '标题提示',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placeholderKey',
+        desc: '提示语key',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placeholderValue',
+        desc: '提示语value',
+        type: 'ReactNode'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: 'any[]'
+    },
+    {
+        name: 'value',
+        desc: '默认值 受控',
+        type: 'any[]'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'error',
+        desc: '是否错误模式',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'helperText',
+        desc: '错误文本',
+        type: 'ReactNode'
+    },
+    {
+        name: 'required',
+        desc: '是否必填',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'onChange',
+        desc: '改变值',
+        type: '(val: string[]) => void'
+    },
+    {
+        name: 'fetchSuggestionsKey',
+        desc: '键值索引匹配',
+        type: '(val: string, cb: (data: any[]) => void) => void'
+    },
+    {
+        name: 'fetchSuggestionsValue',
+        desc: '值索引匹配',
+        type: '(val: string, cb: (data: any[]) => void) => void'
+    }
+];
+export default apiData;

package/docs/view/multiBox/codeString.tsx

@@ -0,0 +1,104 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicMultiBox = `
+import MultiBox from '@para-ui/core/MultiBox';
+
+const [val, setVal] = useState<any>([])
+
+const change = (str: any) => {
+    console.log(str)
+    setVal(str)
+}
+
+<MultiBox
+    label={'多值框'}
+    value={val}
+    onChange={change}
+/>
+<MultiBox
+    label={'多值框'}
+    disabled={true}
+/>
+<MultiBox
+    label={'多值框'}
+    disabled={true}
+    value={[{label: '姓名', value: 'lin'}]}
+/>
+<MultiBox
+    label={'多值框'}
+    required={true}
+/>
+<MultiBox
+    label={'多值框'}
+    error={true}
+    helperText={'请输入'}
+/>
+<MultiBox
+    label={'多值框'}
+    labelTooltip={{tooltip: '帮助提示'}}
+/>
+<MultiBox
+    label={'多值框'}
+    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+/>
+`;
+
+export const sizeMultiBox = `
+import MultiBox from '@para-ui/core/MultiBox';
+
+<MultiBox
+    label={'多值框'}
+    size={"large"}
+/>
+<MultiBox
+    label={'多值框'}
+    size={"medium"}
+/>
+<MultiBox
+    label={'多值框'}
+    size={"small"}
+/>
+`;
+
+export const selectMultiBox = `
+import MultiBox from '@para-ui/core/MultiBox';
+const [val, setVal] = useState<any>([])
+
+const arr: any = ['嘻嘻', '2', '哈哈', '派拉软件', '123', '1123123'];
+
+const fetchSuggestionsKey = (val:string, cb:any) => {
+    console.log(val, 'fetchSuggestionsKey')
+    const data: any[] = [];
+    for (let i = 0, l = arr.length; i < l; i++) {
+        const item = arr[i];
+        if (item.indexOf(val) !== -1) data.push(item);
+    }
+    cb(data);
+}
+
+const fetchSuggestionsValue = (val:string, cb:any) => {
+    console.log(val, 'fetchSuggestionsValue')
+    const data: any[] = [];
+    for (let i = 0, l = arr.length; i < l; i++) {
+        const item = arr[i];
+        if (item.indexOf(val) !== -1) data.push(item);
+    }
+    cb(data);
+}
+
+const change = (str: any) => {
+    console.log(str)
+    setVal(str)
+}
+
+<MultiBox
+    label={'多值框'}
+    value={val}
+    onChange={change}
+    fetchSuggestionsKey={fetchSuggestionsKey}
+    fetchSuggestionsValue={fetchSuggestionsValue}
+/>
+`;

package/docs/view/multiBox/index.tsx

@@ -0,0 +1,123 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import MultiBox from 'src/MultiBox';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicMultiBox, sizeMultiBox, selectMultiBox} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const arr: any = ['嘻嘻', '2', '哈哈', '派拉软件', '123', '1123123'];
+
+const ParaMultiBox: FunctionComponent = () => {
+    const [val, setVal] = useState<any>([])
+    const [val1, setVal1] = useState<any>([])
+
+    const change = (str: any) => {
+        console.log(str)
+        setVal(str)
+    }
+
+    const change1 = (str: any) => {
+        console.log(str)
+        setVal1(str)
+    }
+
+    const fetchSuggestionsKey = (val: string, cb: any) => {
+        console.log(val, 'fetchSuggestionsKey')
+        const data: any[] = [];
+        for (let i = 0, l = arr.length; i < l; i++) {
+            const item = arr[i];
+            if (item.indexOf(val) !== -1) data.push(item);
+        }
+        cb(data);
+    }
+
+
+    const fetchSuggestionsValue = (val: string, cb: any) => {
+        console.log(val, 'fetchSuggestionsValue')
+        const data: any[] = [];
+        for (let i = 0, l = arr.length; i < l; i++) {
+            const item = arr[i];
+            if (item.indexOf(val) !== -1) data.push(item);
+        }
+        cb(data);
+    }
+
+    return (
+        <div className={'paraui-multi-box-demo paraui-form'}>
+            <Title name={'多值框'}>代码演示</Title>
+            <CodeBox
+                code={basicMultiBox}
+                title={'基本'}
+                description={'基本。'}
+            >
+                <MultiBox
+                    label={'多值框'}
+                    value={val}
+                    onChange={change}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    disabled={true}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    disabled={true}
+                    value={[{label: '姓名', value: 'lin'}]}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    required={true}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    error={true}
+                    helperText={'请输入'}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    labelTooltip={{tooltip: '帮助提示'}}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+                />
+            </CodeBox>
+            <CodeBox
+                code={sizeMultiBox}
+                title={'大小'}
+                description={'36px, 32px, 28px。'}
+            >
+                <MultiBox
+                    label={'多值框'}
+                    size={"large"}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    size={"medium"}
+                />
+                <MultiBox
+                    label={'多值框'}
+                    size={"small"}
+                />
+            </CodeBox>
+            <CodeBox
+                code={selectMultiBox}
+                title={'输入框模糊匹配'}
+                description={'输入框带下拉搜索。'}
+            >
+                <MultiBox
+                    label={'多值框'}
+                    value={val1}
+                    onChange={change1}
+                    fetchSuggestionsKey={fetchSuggestionsKey}
+                    fetchSuggestionsValue={fetchSuggestionsValue}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaMultiBox;

package/docs/view/notification/api.tsx

@@ -0,0 +1,148 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description notification api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'bottom',
+        desc: '消息从底部弹出时，距离底部的位置，单位像素',
+        type: 'number',
+        default: '24'
+    },
+    {
+        name: 'btn',
+        desc: '自定义关闭按钮',
+        type: 'ReactNode'
+    },
+    {
+        name: 'closeIcon',
+        desc: '自定义关闭图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'description',
+        desc: '通知提醒内容，必选',
+        type: 'ReactNode'
+    },
+    {
+        name: 'duration',
+        desc: '默认 4.5 秒后自动关闭，配置为 null 则不自动关',
+        type: 'number'
+    },
+    {
+        name: 'getContainer',
+        desc: '配置渲染节点的输出位置',
+        type: '() => HTMLElement',
+        default: '() => document.body'
+    },
+    {
+        name: 'icon',
+        desc: '自定义图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'key',
+        desc: '当前通知唯一标志',
+        type: 'string'
+    },
+    {
+        name: 'message',
+        desc: '通知提醒标题，必选',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placement',
+        desc: '弹出位置，可选 topLeft topRight bottomLeft bottomRight',
+        type: 'string',
+        default: 'topRight'
+    },
+    {
+        name: 'top',
+        desc: '消息从顶部弹出时，距离顶部的位置，单位像素',
+        type: 'number',
+        default: '24'
+    },
+    {
+        name: 'onClick',
+        desc: '点击通知时触发的回调函数',
+        type: 'function'
+    },
+    {
+        name: 'onClose',
+        desc: '当通知关闭时触发',
+        type: 'function'
+    },
+    {
+        name: 'Notification.config',
+        desc: '全局配置方法，options 详见全局配置参数',
+        type: 'function(options)'
+    },
+    {
+        name: 'Notification.close',
+        desc: '关闭通知框',
+        type: 'function(key)'
+    },
+    {
+        name: 'Notification.destroy',
+        desc: '全部销毁通知框',
+        type: 'function()'
+    }
+];
+
+export const configApiData: RowsData = [
+    {
+        name: 'bottom',
+        desc: '消息从底部弹出时，距离底部的位置，单位像素',
+        type: 'number',
+        default: '24'
+    },
+    {
+        name: 'closeIcon',
+        desc: '自定义关闭图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'duration',
+        desc: '默认自动关闭延时，单位秒',
+        type: 'number',
+        default: '4.5'
+    },
+    {
+        name: 'getContainer',
+        desc: '配置渲染节点的输出位置',
+        type: '() => HTMLElement',
+        default: '() => document.body'
+    },
+    {
+        name: 'placement',
+        desc: '弹出位置，可选 topLeft topRight bottomLeft bottomRight',
+        type: 'string',
+        default: 'topRight'
+    },
+    {
+        name: 'top',
+        desc: '消息从顶部弹出时，距离顶部的位置，单位像素',
+        type: 'number',
+        default: '24'
+    },
+    {
+        name: 'maxCount',
+        desc: '最大显示数, 超过限制时，最早的消息会被自动关闭',
+        type: 'number'
+    }
+];
+
+export default apiData;