@para-ui/core 2.1.35 → 2.1.36

package/docs/view/message/codeString.tsx

@@ -1,73 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/9 下午5:54
- * @description
- */
-export const basicMsg = `
-import {Message} from '@para-ui/core/Message';
-import Button from '@para-ui/core/Button';
-
-/**
- * 消息提示
- * @param type 消息类型
- * @param duration 自动关闭的延时，默认2s
- */
-const showMsg = (type: 'success' | 'warn' | 'error' | 'info', duration?: number) => () => {
-    Message[type]('this is a message', duration ?? 2000);
-};
-
-<Button variant={'outlined'} onClick={showMsg('success', 5000)}>success</Button>
-<Button variant={'outlined'} onClick={showMsg('warn', 3000)}>warn</Button>
-<Button variant={'outlined'} onClick={showMsg('error')}>error</Button>
-<Button variant={'outlined'} onClick={showMsg('info')}>info</Button>
-`;
-
-export const notAutoClose = `
-import {Message} from '@para-ui/core/Message';
-import Button from '@para-ui/core/Button';
-
-/**
- * 消息提示
- * @param type 消息类型
- * @param duration 小于0时，不自动关闭
- */
-const showMsg = (type: 'success' | 'warn' | 'error' | 'info', duration: number) => () => {
-    Message[type]('this is a message', duration);
-};
-
-<Button variant={'outlined'} onClick={showMsg('success', -1)}>success</Button>
-<Button variant={'outlined'} onClick={showMsg('warn', -1)}>warn</Button>
-<Button variant={'outlined'} onClick={showMsg('error', -1)}>error</Button>
-<Button variant={'outlined'} onClick={showMsg('info', -1)}>info</Button>
-`;
-
-export const configMsg = `
-import {Message} from '@para-ui/core/Message';
-import Button from '@para-ui/core/Button';
-
-//消息提示，通过config配置
-const showMsgByConfig = () => {
-    //config更多属性详见api
-    Message.success({
-        text: 'this is a message',
-        desc: 'this is a description',
-        close: true,
-        maxCount: 3
-    });
-};
-
-<Button variant={'outlined'} onClick={showMsgByConfig}>config用法</Button>
-`;
-
-export const destroyMsg = `
-import {Message} from '@para-ui/core/Message';
-import Button from '@para-ui/core/Button';
-
-const destroy = () => {
-    Message.clear?.()
-};
-
-<Button variant={'outlined'} onClick={destroy}>销毁</Button>
-`;
-
-

package/docs/view/message/index.scss

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

package/docs/view/message/index.tsx

@@ -1,64 +0,0 @@
-import React, {FunctionComponent} from 'react';
-import CodeBox from '../../components/codeBox';
-import {Message} from 'src/Message';
-import Button from 'src/Button';
-import APITable from '../../components/apiTable';
-import Title from '../../components/title';
-import {basicMsg, configMsg, destroyMsg,notAutoClose} from './codeString';
-import apiData from './api';
-import './index.scss';
-
-//message
-const ParaMessage: FunctionComponent = () => {
-
-    /**
-     * 消息提示
-     * @param type 消息类型
-     * @param duration 自动关闭的延时，默认2s
-     */
-    const showMsg = (type: 'success' | 'warn' | 'error' | 'info', duration?: number) => () => {
-        Message[type]('this is a message', duration ?? 2000);
-    };
-
-    //消息提示，通过config配置
-    const showMsgByConfig = () => {
-        //config更多属性详见api
-        Message.success({
-            text: 'this is a message',
-            desc: 'this is a description',
-            close: true,
-            maxCount: 3
-        });
-    };
-
-    const destroy = () => {
-        Message.clear?.()
-    };
-
-    return (
-        <div className={'paraui-message-demo'}>
-            <Title name={'全局提示'}>代码演示</Title>
-            <CodeBox code={basicMsg} title={'基本用法'} description={'信息提醒反馈，包括成功、警告、失败、信息。'}>
-                <Button variant={'outlined'} onClick={showMsg('success', 5000)}>success</Button>
-                <Button variant={'outlined'} onClick={showMsg('warn', 3000)}>warn</Button>
-                <Button variant={'outlined'} onClick={showMsg('error')}>error</Button>
-                <Button variant={'outlined'} onClick={showMsg('info')}>info</Button>
-            </CodeBox>
-            <CodeBox code={notAutoClose} title={'手动关闭'} description={'除非手动关闭，否则一直显示'}>
-                <Button variant={'outlined'} onClick={showMsg('success', -1)}>success</Button>
-                <Button variant={'outlined'} onClick={showMsg('warn', -1)}>warn</Button>
-                <Button variant={'outlined'} onClick={showMsg('error', -1)}>error</Button>
-                <Button variant={'outlined'} onClick={showMsg('info', -1)}>info</Button>
-            </CodeBox>
-            <CodeBox code={configMsg} title={'config用法'} description={'通过对象的形式传递参数'}>
-                <Button variant={'outlined'} onClick={showMsgByConfig}>config用法</Button>
-            </CodeBox>
-            <CodeBox code={destroyMsg} title={'全局销毁方法'} description={'提供全局销毁方法，销毁之前所有消息'}>
-                <Button variant={'outlined'} onClick={destroy}>销毁</Button>
-            </CodeBox>
-            <APITable data={apiData}/>
-        </div>
-    );
-};
-
-export default ParaMessage;

package/docs/view/modal/api.tsx

@@ -1,141 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/10 下午4:38
- * @description modal api
- */
-import {RowsData} from '../../components/apiTable';
-
-const apiData: RowsData = [
-    {
-        name: 'className',
-        desc: '类名',
-        type: 'string'
-    },
-    {
-        name: 'style',
-        desc: '样式',
-        type: 'React.CSSProperties'
-    },
-    {
-        name: 'open',
-        desc: '对话框是否可见',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'title',
-        desc: '标题',
-        type: 'ReactNode'
-    },
-    {
-        name: 'header',
-        desc: '自定义标题包括关闭按钮，header 使用时，title 失效',
-        type: 'ReactNode'
-    },
-    {
-        name: 'hideHeader',
-        desc: '隐藏标题',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'actions',
-        desc: '自定义底部内容',
-        type: 'ReactNode'
-    },
-    {
-        name: 'showActions',
-        desc: '是否显示底部内容',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'onOk',
-        desc: '点击确定回调',
-        type: '() => void'
-    },
-    {
-        name: 'onCancel',
-        desc: '点击遮罩层或右上角叉或取消按钮的回调，返回 false 不关闭',
-        type: '() => boolean | void;'
-    },
-    {
-        name: 'okText',
-        desc: '确定按钮文字',
-        type: 'string',
-        default: '确定'
-    },
-    {
-        name: 'cancelText',
-        desc: '取消按钮文字',
-        type: 'string',
-        default: '取消'
-    },
-    {
-        name: 'okButtonProps',
-        desc: 'ok 按钮 props',
-        type: 'ButtonProps'
-    },
-    {
-        name: 'cancelButtonProps',
-        desc: 'cancel 按钮 props',
-        type: 'ButtonProps'
-    },
-    {
-        name: 'showCancel',
-        desc: '是否显示取消按钮，showCancel 为 true 时，onCancel 为必填',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'size',
-        desc: '对话框尺寸',
-        type: `'sm' | 'md' | 'lg' | 'auto' | 'fullScreen'`,
-        default: 'md'
-    },
-    {
-        name: 'contentWidth',
-        desc: '内容宽度',
-        type: 'string | number'
-    },
-    {
-        name: 'contentHeight',
-        desc: '内容高度',
-        type: 'string | number'
-    },
-    {
-        name: 'contentStyle',
-        desc: '内容样式',
-        type: 'React.CSSProperties'
-    },
-    {
-        name: 'disableBackdropClick',
-        desc: '是否禁用遮罩层点击',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'disableEscapeKeyDown',
-        desc: '是否禁用 esc 键',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'disableEnforceFocus',
-        desc: '是否禁用强制获取焦点',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'fullScreen',
-        desc: '是否全屏',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'customizeSize',
-        desc: '自定义对话框尺寸',
-        type: 'CSSProperties'
-    }
-];
-export default apiData;

package/docs/view/modal/codeString.tsx

@@ -1,222 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/9 下午5:54
- * @description
- */
-export const basicModal = `
-import Modal from '@para-ui/core/Modal';
-import Button from '@para-ui/core/Button';
-
-const [open, setOpen] = React.useState<boolean>(false);
-
-const showModal = () => {
-    setOpen(true);
-};
-
-const handleOk = () => {
-    setOpen(false);
-};
-
-const handleCancel = () => {
-    setOpen(false);
-};
-
-<Button onClick={showModal}>
-    Open Modal
-</Button>
-<Modal open={open} title={'Basic Modal'} onCancel={handleCancel} onOk={handleOk}>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-</Modal>
-`;
-
-export const customHeader = `
-import Modal from '@para-ui/core/Modal';
-import Button from '@para-ui/core/Button';
-
-const [open, setOpen] = React.useState<boolean>(false);
-
-const showModal = () => {
-    setOpen(true);
-};
-
-const handleOk = () => {
-    setOpen(false);
-};
-
-const handleCancel = () => {
-    setOpen(false);
-};
-
-<Button onClick={showModal}>
-    Custom Header
-</Button>
-<Modal open={open} header={<h3>自定义页头</h3>} onCancel={handleCancel} onOk={handleOk}>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-</Modal>
-`;
-
-export const customFooter = `
-import Modal from '@para-ui/core/Modal';
-import Button from '@para-ui/core/Button';
-
-const [open, setOpen] = React.useState<boolean>(false);
-
-const showModal = () => {
-    setOpen(true);
-};
-
-const handleOk = () => {
-    setOpen(false);
-};
-
-const handleCancel = () => {
-    setOpen(false);
-};
-
-<Button onClick={showModal}>
-    Custom Footer
-</Button>
-<Modal open={open}
-       title={'自定义页脚'}
-       actions={<div><Button size={'medium'} onClick={handleOk}>自定义页脚</Button></div>}
-       // actions={(btns: React.ReactNode[]) => {
-       //     btns.unshift(<Button size={'small'}>自定义</Button>);
-       //     return btns;
-       // }}
-       onCancel={handleCancel}
-       onOk={handleOk}>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-</Modal>
-`;
-
-export const actionBtnText = `
-import Modal from '@para-ui/core/Modal';
-import Button from '@para-ui/core/Button';
-
-const [open, setOpen] = React.useState<boolean>(false);
-
-const showModal = () => {
-    setOpen(true);
-};
-
-const handleOk = () => {
-    setOpen(false);
-};
-
-const handleCancel = () => {
-    setOpen(false);
-};
-
-<Button onClick={showModal}>
-    Custom Button Text
-</Button>
-<Modal open={open}
-       title={'自定义按钮文字'}
-       okText={'confirm'}
-       cancelText={'cancel'}
-       onCancel={handleCancel}
-       onOk={handleOk}>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-    <p>Some contents...</p>
-</Modal>
-`;
-
-export const confirmCode = `
-import {Confirm} from '@para-ui/core/Modal';
-import Button from '@para-ui/core/Button';
-
-const info = () => {
-    Confirm.info({
-        title: 'This is a info message',
-        content: (
-            <div>
-                <p>some messages...some messages...</p>
-                <p>some messages...some messages...</p>
-            </div>
-        ),
-        onOk() {
-        },
-        onCancel() {
-        }
-    });
-};
-
-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);
-};
-
-<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>
-`;
-
-export const confirmDestroyCode = `
-import {Confirm} from '@para-ui/core/Modal';
-import Button from '@para-ui/core/Button';
-
-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);
-};
-
-<Button onClick={showConfirm}>Destroy All</Button>
-<Button onClick={showConfirmWithUUID}>Destroy Self</Button>
-`;
-
-
-

package/docs/view/modal/index.scss

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