@para-ui/core 2.1.35 → 2.1.36

package/docs/view/modal/index.tsx

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

@@ -1,99 +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: '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

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

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

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