@para-ui/core 2.1.32 → 2.1.35

package/docs/view/popConfirm/index.scss

@@ -0,0 +1,33 @@
+.paraui-popConfirm-demo {
+  .code-box-demo {
+    .popConfirm-code {
+      > div {
+        > span {
+          margin: 0 10px 10px 0;
+        }
+
+        button {
+          min-width: 110px;
+        }
+
+        &:nth-child(1) {
+          margin-left: 140px;
+        }
+
+        &:nth-child(2) {
+          float: left;
+          width: 110px;
+        }
+
+        &:nth-child(3) {
+          width: 110px;
+          margin-left: 520px;
+        }
+
+        &:nth-child(4) {
+          margin-left: 140px;
+        }
+      }
+    }
+  }
+}

package/docs/view/popConfirm/index.tsx

@@ -0,0 +1,167 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import PopConfirm from 'src/PopConfirm';
+import Button from 'src/Button';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {popConfirmCode} from './codeString';
+import apiData from './api';
+import './index.scss';
+import SelectInput from '@para-ui/core/SelectInput';
+
+//popConfirm
+const ParaPopConfirm: FunctionComponent = () => {
+
+    const handleOk = () => {
+        console.log(':::ok');
+    };
+
+    const handleCancel = () => {
+        console.log(':::cancel');
+    };
+    const list1: any[] = [
+        {
+            label: '选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1',
+            value: 1
+        },
+        {
+            label: 'casd234',
+            value: 'casd234'
+        },
+        {
+            label: 'casd434',
+            value: 'casd434'
+        },
+    ];
+
+    return (
+        <div className={'paraui-popConfirm-demo'}>
+            <Title name={'气泡确认框'}>代码演示</Title>
+            <CodeBox code={popConfirmCode} title={'气泡确认框'} description={'气泡确认框所有用法。'}>
+                <section className={'popConfirm-code'}>
+                    <div>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={<span>
+                                        <SelectInput
+                                            label="下拉输入"
+                                            placeholder="请选择"
+                                            list={list1}
+                                            multiple={true}
+                                            showSelect={false}
+                                        />
+                                    </span>}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'top-start'}
+                                    type={'warning'}
+                                    okText={'confirm'}
+                                    cancelText={'cancel'}
+                                    trigger={'hover'}
+                        >
+                            <Button variant="outlined">top-start</Button>
+                        </PopConfirm>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'top'}
+                                    type={'success'}
+                                    showCancel={false}
+                        >
+                            <Button variant="outlined">top</Button>
+                        </PopConfirm>
+                        <PopConfirm content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'top-end'}
+                                    type={'info'}
+                        >
+                            <Button variant="outlined">top-end</Button>
+                        </PopConfirm>
+                    </div>
+                    <div>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'left-start'}
+                                    type={'error'}
+                        >
+                            <Button variant="outlined">left-start</Button>
+                        </PopConfirm>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'left'}
+                        >
+                            <Button variant="outlined">left</Button>
+                        </PopConfirm>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'left-end'}
+                        >
+                            <Button variant="outlined">left-end</Button>
+                        </PopConfirm>
+                    </div>
+                    <div>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'right-start'}
+                        >
+                            <Button variant="outlined">right-start</Button>
+                        </PopConfirm>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'right'}
+                        >
+                            <Button variant="outlined">right</Button>
+                        </PopConfirm>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'right-end'}
+                        >
+                            <Button variant="outlined">right-end</Button>
+                        </PopConfirm>
+                    </div>
+                    <div>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'bottom-start'}
+                        >
+                            <Button variant="outlined">bottom-start</Button>
+                        </PopConfirm>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'bottom'}
+                        >
+                            <Button variant="outlined">bottom</Button>
+                        </PopConfirm>
+                        <PopConfirm title={'are you sure to delete this task？'}
+                                    content={'Are you sure to delete this task?'}
+                                    onOk={handleOk}
+                                    onCancel={handleCancel}
+                                    placement={'bottom-end'}
+                        >
+                            <Button variant="outlined">bottom-end</Button>
+                        </PopConfirm>
+                    </div>
+                </section>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaPopConfirm;

package/docs/view/popover/api.tsx

@@ -0,0 +1,80 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description popover 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: 'anchorEl',
+        desc: 'HTML元素或返回它的函数。用于设置popover的位置',
+        type: `HTML element | func`
+    },
+    {
+        name: 'action',
+        desc: '命令式操作的参考。 目前仅支持 updatePosition() 动作',
+        type: `ref`
+    },
+    {
+        name: 'anchorOrigin',
+        desc: `这是 popover 的 anchorEl 将附加到的锚点上的点。 当anchorReference 为“anchorPosition”时不使用。
+            选项：垂直：[顶部、中心、底部]； 水平：[左，中，右]`,
+        type: `
+                { horizontal: 'center'
+        | 'left'
+        | 'right'
+        | number, vertical: 'bottom'
+        | 'center'
+        | 'top'
+        | number }`,
+        default: `{ vertical: 'top', horizontal: 'left'}`
+    },
+    {
+        name: 'anchorPosition',
+        desc: '这是可用于设置弹出框位置的位置。 坐标相对于应用程序的客户区',
+        type: '{ left: number, top: number }'
+    },
+    {
+        name: 'onClose',
+        desc: '关闭时回调',
+        type: 'function'
+    },
+    {
+        name: 'onEnter',
+        desc: '在组件进入之前触发的回调',
+        type: 'function'
+    },
+    {
+        name: 'onEntered',
+        desc: '在组件进入之后触发的回调',
+        type: 'function'
+    },
+    {
+        name: 'onExit',
+        desc: '在组件退出之前触发回调',
+        type: 'function'
+    },
+    {
+        name: 'onExited',
+        desc: '在组件退出之后触发的回调',
+        type: 'function'
+    }
+];
+export default apiData;

package/docs/view/popover/codeString.tsx

@@ -0,0 +1,40 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicPopover = `
+import Popover from '@para-ui/core/Popover';
+import Button from '@para-ui/core/Button';
+
+const [anchorEl, setAnchorEl] = React.useState(null);
+
+const handleClick = (e: React.MouseEvent<any>) => {
+    setAnchorEl(e.currentTarget);
+};
+
+const handleClose = () => {
+    setAnchorEl(null);
+};
+
+<Button onClick={handleClick}>
+    Open Popover
+</Button>
+<Popover
+    open={open}
+    anchorEl={anchorEl}
+    onClose={handleClose}
+    anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center'
+    }}
+    transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center'
+    }}
+>
+    <p style={{padding: '15px'}}>The content of the Popover.</p>
+</Popover>
+`;
+
+

package/docs/view/popover/index.scss

@@ -0,0 +1,4 @@
+.paraui-popover-demo {
+  .code-box-demo {
+  }
+}

package/docs/view/popover/index.tsx

@@ -0,0 +1,53 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Popover from 'src/Popover';
+import Button from 'src/Button';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicPopover} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//popover
+const ParaPopover: FunctionComponent = () => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handleClick = (e: React.MouseEvent<any>) => {
+        setAnchorEl(e.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const open = Boolean(anchorEl);
+
+    return (
+        <div className={'paraui-popover-demo'}>
+            <Title name={'弹出框'}>代码演示</Title>
+            <CodeBox code={basicPopover} title={'基本'} description={'简单的弹出框。'}>
+                <Button onClick={handleClick}>
+                    Open Popover
+                </Button>
+                <Popover
+                    open={open}
+                    anchorEl={anchorEl}
+                    onClose={handleClose}
+                    anchorOrigin={{
+                        vertical: 'bottom',
+                        horizontal: 'center'
+                    }}
+                    transformOrigin={{
+                        vertical: 'top',
+                        horizontal: 'center'
+                    }}
+                >
+                    <p style={{padding: '15px'}}>The content of the Popover.</p>
+                </Popover>
+            </CodeBox>
+            <APITable data={apiData} link={'https://v4.mui.com/zh/api/popover'}/>
+        </div>
+    );
+};
+
+export default ParaPopover;

package/docs/view/querying/api.tsx

@@ -0,0 +1,46 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description querying api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'size',
+        desc: '大小',
+        type: 'large | small',
+        default: 'large'
+    },
+    {
+        name: 'imageStyle',
+        desc: '图片样式',
+        type: 'React.CSSProperties',
+    },
+    {
+        name: 'image',
+        desc: '图片',
+        type: 'ReactNode',
+    },
+    {
+        name: 'description',
+        desc: '描述',
+        type: 'ReactNode'
+    },
+    {
+        name: 'customQuerying',
+        desc: '自定义节点',
+        type: 'ReactNode'
+    }
+];
+export default apiData;

package/docs/view/querying/codeString.tsx

@@ -0,0 +1,28 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicQuerying = `
+import Querying from '@para-ui/core/Querying';
+
+<Querying/>
+`;
+
+export const sizeQuerying = `
+import Querying from '@para-ui/core/Querying';
+
+<Querying size={'small'}/>
+<Querying/>
+`;
+
+export const customQuerying = `
+import Querying from '@para-ui/core/Querying';
+
+<Querying image={'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'}
+       description={'自定义描述'}
+       size={'small'}/>
+`;
+
+
+

package/docs/view/querying/index.scss

@@ -0,0 +1,11 @@
+.paraui-querying-demo {
+  .code-box-demo {
+    display: flex;
+    justify-content: center;
+
+    .querying-code {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/docs/view/querying/index.tsx

@@ -0,0 +1,35 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Querying from 'src/Querying';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicQuerying, sizeQuerying, customQuerying} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//Querying
+const ParaQuerying: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-querying-demo'}>
+            <Title name={'查询中'}>代码演示</Title>
+            <CodeBox code={basicQuerying} title={'基本'} description={'简单的展示。'}>
+                <Querying/>
+            </CodeBox>
+            <CodeBox code={sizeQuerying} title={'尺寸'} description={'size 属性定义大小尺寸，默认为large。'}>
+                <section className={'querying-code'}>
+                    <Querying size={'small'}/>
+                    <Querying/>
+                </section>
+            </CodeBox>
+            <CodeBox code={customQuerying} title={'自定义'} description={'自定义图片、描述。'}>
+                <Querying image={'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'}
+                          description={'自定义描述'}
+                          size={'small'}/>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaQuerying;

package/docs/view/radio/api.tsx

@@ -0,0 +1,142 @@
+/**
+ * @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: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'size',
+        desc: '尺寸',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'defaultChecked',
+        desc: '默认值  有值不受控组件 初始化第一次',
+        type: 'boolean'
+    },
+    {
+        name: 'checked',
+        desc: '默认值 有值受控组件',
+        type: 'boolean'
+    },
+    {
+        name: 'disabled',
+        desc: '禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'inputProps',
+        desc: 'input身上的所有属性',
+        type: 'object'
+    },
+    {
+        name: 'onChange',
+        desc: '改变事件',
+        type: '(e: any, checked: boolean) => void'
+    }
+];
+
+export const apiDataGroup: RowsData = [
+    {
+        name: 'className',
+        desc: 'class样式名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: 'style',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'size',
+        desc: '尺寸',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'disabled',
+        desc: '禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'required',
+        desc: '是否必填',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'row',
+        desc: '布局方式 横向/竖向',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'error',
+        desc: '是否显示错误',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'helperText',
+        desc: '错误提示',
+        type: 'ReactNode',
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: 'any',
+    },
+    {
+        name: 'value',
+        desc: '默认值 受控',
+        type: 'any',
+    },
+    {
+        name: 'id',
+        desc: '选中选值的key,默认name',
+        type: 'string',
+        default: 'name'
+    },
+    {
+        name: 'list',
+        desc: '选项数据',
+        type: 'RadioProps[]',
+    },
+    {
+        name: 'onChange',
+        desc: '改变值',
+        type: '(val: any, item?: ListProps) => void',
+    }
+]
+
+export default apiData;