@para-ui/core 2.1.32 → 2.1.35

package/docs/view/message/codeString.tsx

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

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

package/docs/view/message/index.tsx

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

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

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

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