@para-ui/core 2.1.32 → 2.1.35

package/docs/view/button/api.tsx

@@ -0,0 +1,131 @@
+/**
+ * @author Hanz
+ * @date 2022/1/24 下午4:32
+ * @description button api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'variant',
+        desc: '按钮类型',
+        type: 'contained | outlined | text',
+        default: 'contained'
+    },
+    {
+        name: 'size',
+        desc: '按钮大小',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'startIcon',
+        desc: '按钮文字前图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'loading',
+        desc: '按钮载入状态',
+        type: 'boolean | { delay: number }',
+        default: 'false'
+    },
+    {
+        name: 'disabled',
+        desc: '按钮失效状态',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'danger',
+        desc: '危险按钮',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'toolTipTitle',
+        desc: `Button 禁用时提示文字 disabled 为true有效; Button.IconButton提示文字`,
+        type: 'ReactNode',
+    },
+    {
+        name: 'TooltipProps',
+        desc: '文字提示属性,参考tooltip',
+        type: `TooltipProps`
+    }
+];
+
+export const splitApiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'popperClassName',
+        desc: 'popperClassName',
+        type: 'string',
+    },
+    {
+        name: 'popperStyle',
+        desc: 'popperStyle',
+        type: 'React.CSSProperties',
+    },
+    {
+        name: 'buttonText',
+        desc: '分体式按钮文本',
+        type: 'ReactNode'
+    },
+    {
+        name: 'options',
+        desc: '按钮选项数组',
+        type: 'Option[] | GroupOption[]',
+    },
+    {
+        name: 'disabled',
+        desc: '禁用按钮组',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'placement',
+        desc: '浮层位置',
+        type: `'bottom-end'
+              | 'bottom-start'
+              | 'bottom'
+              | 'left-end'
+              | 'left-start'
+              | 'left'
+              | 'right-end'
+              | 'right-start'
+              | 'right'
+              | 'top-end'
+              | 'top-start'
+              | 'top'`,
+        default: 'bottom-end'
+    },
+    {
+        name: 'optionRender',
+        desc: `自定义选项渲染`,
+        type: '(option: Option) => React.ReactNode',
+    },
+    {
+        name: 'onClick',
+        desc: '点击回调',
+        type: `(option: Option, evt?: React.MouseEvent<HTMLElement>) => void;`
+    }
+];
+export default apiData;

package/docs/view/button/codeString.tsx

@@ -0,0 +1,153 @@
+/**
+ * @author Hanz
+ * @date 2022/1/24 下午3:12
+ * @description
+ */
+export const btnType = `
+import Button from '@para-ui/core/Button';
+
+<Button>
+    contained
+</Button>
+<Button variant="outlined">
+    outlined
+</Button>
+<Button variant="text">
+    text
+</Button>
+`;
+
+export const btnWithIcon = `
+import Button from '@para-ui/core/Button';
+import Search from "@para-ui/icons/Search";
+
+<Button variant="contained" startIcon={<Search/>}>
+    contained
+</Button>
+<Button variant="outlined" startIcon={<Search/>}>
+    outlined
+</Button>
+<Button.IconButton toolTipTitle={'search'}>
+    <Search/>
+</Button.IconButton>
+<Button.IconButton variant={'outlined'} toolTipTitle={'search'}>
+    <Search/>
+</Button.IconButton>
+<Button.IconButton variant={'text'} size={'small'} toolTipTitle={'search'}>
+    <Search/>
+</Button.IconButton>
+`;
+
+export const btnSize = `
+import Button from '@para-ui/core/Button';
+import Search from "@para-ui/icons/Search";
+
+<Button variant="contained" size={'large'}>
+    large
+</Button>
+<Button variant="contained" size={'medium'}>
+    medium
+</Button>
+<Button variant="contained" size={'small'}>
+    small
+</Button>
+<Button.IconButton toolTipTitle={'search'} size={'large'}>
+    <Search/>
+</Button.IconButton>
+<Button.IconButton toolTipTitle={'search'} size={'medium'}>
+    <Search/>
+</Button.IconButton>
+<Button.IconButton toolTipTitle={'search'} size={'small'}>
+    <Search/>
+</Button.IconButton>
+<Button.IconButton variant={'text'} toolTipTitle={'search'} size={'large'}>
+    <Search/>
+</Button.IconButton>
+<Button.IconButton variant={'text'} toolTipTitle={'search'} size={'medium'}>
+    <Search/>
+</Button.IconButton>
+<Button.IconButton variant={'text'} toolTipTitle={'search'} size={'small'}>
+    <Search/>
+</Button.IconButton>
+`;
+
+export const btnWithLoading = `
+import Button from '@para-ui/core/Button';
+import Off from "@para-ui/icons/Off";
+
+<Button loading>
+    loading
+</Button>
+<Button variant={'outlined'} loading>
+    loading
+</Button>
+<Button.IconButton loading>
+    <Off/>
+</Button.IconButton>
+<Button.IconButton variant={'outlined'} loading>
+    <Off/>
+</Button.IconButton>
+`;
+
+export const btnDisabled = `
+import Button from '@para-ui/core/Button';
+import Off from "@para-ui/icons/Off";
+
+<Button disabled>
+    disabled
+</Button>
+<Button disabled toolTipTitle={'disabled'}>
+    disabled tip
+</Button>
+<Button.IconButton disabled toolTipTitle={'disabled'}>
+    <Off/>
+</Button.IconButton>
+`;
+
+export const btnDanger = `
+import Button from '@para-ui/core/Button';
+import Off from "@para-ui/icons/Off";
+
+<Button danger>
+    contained danger
+</Button>
+<Button variant={'outlined'} danger>
+    outlined danger
+</Button>
+<Button.IconButton danger>
+    <Off/>
+</Button.IconButton>
+<Button.IconButton variant={'outlined'} danger>
+    <Off/>
+</Button.IconButton>
+`;
+
+export const splitButton = `
+import Button from '@para-ui/core/Button';
+
+<Button.SplitButton
+    options={[
+        {
+            value: '1',
+            label: 'btn1',
+            type: '1'
+        },
+        {
+            value: '2',
+            label: 'btn2',
+            type: '2',
+            disabled: true
+        },
+        {
+            value: '3',
+            label: 'btn3',
+            type: '3'
+        }
+    ]}
+    onClick={(option: any, evt?: any) => {
+        console.log(option);
+    }}
+/>
+`;
+
+

package/docs/view/button/index.scss

@@ -0,0 +1,23 @@
+.paraui-button-demo {
+  .code-box-demo {
+    .paraui-button, .paraui-icon-button {
+      margin-right: 10px;
+    }
+
+    .btn-disabled {
+      .paraui-button, .paraui-icon-button {
+        margin-right: 0;
+      }
+
+      > span {
+        margin-right: 10px;
+      }
+    }
+
+    .split-btn-code {
+      button {
+        margin-right: 0;
+      }
+    }
+  }
+}

package/docs/view/button/index.tsx

@@ -0,0 +1,165 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Button from 'src/Button';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {btnType, btnWithIcon, btnSize, btnWithLoading, btnDisabled, btnDanger, splitButton} from './codeString';
+import apiData, {splitApiData} from './api';
+import Search from "@para-ui/icons/Search";
+import Off from "@para-ui/icons/Off";
+import './index.scss';
+
+//按钮
+const ParaButton: FunctionComponent = () => {
+    const [loading, setLoading] = React.useState(false);
+
+    return (
+        <div className={'paraui-button-demo'}>
+            <Title name={'按钮'}>代码演示</Title>
+            <CodeBox code={btnType} title={'按钮类型'} description={'主按钮、次按钮、文本按钮'}>
+                <Button>
+                    contained
+                </Button>
+                <Button variant="outlined">
+                    outlined
+                </Button>
+                <Button variant="text">
+                    text
+                </Button>
+            </CodeBox>
+            <CodeBox code={btnWithIcon} title={'图标按钮'} description={'Button可嵌入图标组件，Button.IconButton为纯图标按钮'}>
+                <Button variant="contained" startIcon={<Search/>}>
+                    contained
+                </Button>
+                <Button variant="outlined" startIcon={<Search/>}>
+                    outlined
+                </Button>
+                <Button.IconButton toolTipTitle={'search'}>
+                    <Search/>
+                </Button.IconButton>
+                <Button.IconButton variant={'outlined'} toolTipTitle={'search'}>
+                    <Search/>
+                </Button.IconButton>
+                <Button.IconButton variant={'text'} size={'small'} toolTipTitle={'search'}>
+                    <Search/>
+                </Button.IconButton>
+            </CodeBox>
+            <CodeBox code={btnSize} title={'按钮尺寸'} description={'按钮有大、中、小三种尺寸'}>
+                <Button variant="contained" size={'large'}>
+                    large
+                </Button>
+                <Button variant="contained" size={'medium'}>
+                    medium
+                </Button>
+                <Button variant="contained" size={'small'}>
+                    small
+                </Button>
+                <Button.IconButton toolTipTitle={'search'} size={'large'}>
+                    <Search/>
+                </Button.IconButton>
+                <Button.IconButton toolTipTitle={'search'} size={'medium'}>
+                    <Search/>
+                </Button.IconButton>
+                <Button.IconButton toolTipTitle={'search'} size={'small'}>
+                    <Search/>
+                </Button.IconButton>
+                <Button.IconButton variant={'text'} toolTipTitle={'search'} size={'large'}>
+                    <Search/>
+                </Button.IconButton>
+                <Button.IconButton variant={'text'} toolTipTitle={'search'} size={'medium'}>
+                    <Search/>
+                </Button.IconButton>
+                <Button.IconButton variant={'text'} toolTipTitle={'search'} size={'small'}>
+                    <Search/>
+                </Button.IconButton>
+            </CodeBox>
+            <CodeBox code={btnWithLoading} title={'加载中状态'} description={'添加 loading 属性即可让按钮处于加载状态'}>
+                <Button loading>
+                    loading
+                </Button>
+                <Button variant={'outlined'} loading>
+                    loading
+                </Button>
+                <Button.IconButton loading>
+                    <Off/>
+                </Button.IconButton>
+                <Button.IconButton variant={'outlined'} loading>
+                    <Off/>
+                </Button.IconButton>
+                <Button.IconButton toolTipTitle={'测试'} variant={'text'} size={'small'} loading={loading}
+                                   onClick={() => {
+                                       setLoading(true)
+                                       setTimeout(() => {
+                                           setLoading(false)
+                                       }, 3000);
+                                   }}>
+                    <Off/>
+                </Button.IconButton>
+            </CodeBox>
+            <CodeBox code={btnDisabled} title={'不可用状态'} description={'添加 disabled 属性即可让按钮处于不可用状态'}>
+                <section className={'btn-disabled'}>
+                    <span>
+                        <Button disabled>
+                            disabled
+                        </Button>
+                    </span>
+                    <span>
+                        <Button disabled toolTipTitle={'disabled'}>
+                            disabled tip
+                        </Button>
+                    </span>
+                    <span>
+                        <Button.IconButton disabled toolTipTitle={'disabled'}>
+                            <Off/>
+                        </Button.IconButton>
+                    </span>
+                </section>
+            </CodeBox>
+            <CodeBox code={btnDanger} title={'危险按钮'} description={'添加 danger 属性即可让按钮处于危险状态'}>
+                <Button danger>
+                    contained danger
+                </Button>
+                <Button variant={'outlined'} danger>
+                    outlined danger
+                </Button>
+                <Button.IconButton danger>
+                    <Off/>
+                </Button.IconButton>
+                <Button.IconButton variant={'outlined'} danger>
+                    <Off/>
+                </Button.IconButton>
+            </CodeBox>
+            <CodeBox code={splitButton} title={'分体式按钮'} description={'Button.SplitButton 分体式按钮'}>
+                <section className={'split-btn-code'}>
+                    <Button.SplitButton
+                        options={[
+                            {
+                                value: '1',
+                                label: 'btn1',
+                                type: '1'
+                            },
+                            {
+                                value: '2',
+                                label: 'btn2',
+                                type: '2',
+                                disabled: true
+                            },
+                            {
+                                value: '3',
+                                label: 'btn3',
+                                type: '3'
+                            }
+                        ]}
+                        onClick={(option: any, evt?: any) => {
+                            console.log(option);
+                        }}
+                    />
+                </section>
+            </CodeBox>
+            <APITable data={apiData}/>
+            <APITable data={splitApiData} showApi={false} subTitle={'分体式按钮'}/>
+        </div>
+    );
+};
+
+export default ParaButton;

package/docs/view/buttonGroup/api.tsx

@@ -0,0 +1,55 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:02
+ * @description buttonGroup api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'mode',
+        desc: '按钮组模式',
+        type: 'icon | iconSplit | text',
+        default: 'icon'
+    },
+    {
+        name: 'data',
+        desc: '按钮组数据',
+        type: `ButtonItem[]，interface ButtonItem extends ButtonProps {
+            /** 图标*/
+            icon?: ReactNode;
+            /** 文本*/
+            text?: ReactNode;
+        
+            [key: string]: any;
+        }`
+    },
+    {
+        name: 'showToolTip',
+        desc: '是否显示文字提示',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabled',
+        desc: '不可用状态',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'onClick',
+        desc: '点击时回调',
+        type: '(item: ButtonItem, event?: React.MouseEvent) => void'
+    }
+];
+export default apiData;

package/docs/view/buttonGroup/codeString.tsx

@@ -0,0 +1,108 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:02
+ * @description
+ */
+export const iconBtnGroup = `
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+import Search from "@para-ui/icons/Search";
+import Off from "@para-ui/icons/Off";
+import Delete from "@para-ui/icons/Delete";
+
+const handleClick = (data: any, evt: any) => {
+    console.log('btn group click::::', data, evt);
+};
+
+<ButtonGroup showToolTip={true}
+             data={[
+                 {icon: <Search/>, text: '搜索'},
+                 {icon: <Off/>, text: '退出'},
+                 {icon: <Delete/>, text: '删除'}
+             ]}
+             onClick={handleClick}
+/>
+`;
+
+export const btnGroupSize = `
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+import Search from "@para-ui/icons/Search";
+import Off from "@para-ui/icons/Off";
+import Delete from "@para-ui/icons/Delete";
+
+const handleClick = (data: any, evt: any) => {
+    console.log('btn group click::::', data, evt);
+};
+
+<ButtonGroup showToolTip={true}
+             data={[
+                 {icon: <Search/>, text: '搜索'},
+                 {icon: <Off/>, text: '退出'},
+                 {icon: <Delete/>, text: '删除'}
+             ]}
+             onClick={handleClick}
+/>
+<ButtonGroup showToolTip={true}
+             data={[
+                 {icon: <Search/>, text: '搜索', size: 'medium'},
+                 {icon: <Off/>, text: '退出', size: 'medium'},
+                 {icon: <Delete/>, text: '删除', size: 'medium'}
+             ]}
+             onClick={handleClick}
+/>
+<ButtonGroup showToolTip={true}
+             data={[
+                 {icon: <Search/>, text: '搜索', size: 'small'},
+                 {icon: <Off/>, text: '退出', size: 'small'},
+                 {icon: <Delete/>, text: '删除', size: 'small'}
+             ]}
+             onClick={handleClick}
+/>
+`;
+
+export const splitBtnGroup = `
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+import Search from "@para-ui/icons/Search";
+import Off from "@para-ui/icons/Off";
+import Delete from "@para-ui/icons/Delete";
+
+<ButtonGroup mode={'iconSplit'}
+             showToolTip={true}
+             data={[
+                 {icon: <Search/>, text: '搜索'},
+                 {icon: <Off/>, text: '退出'},
+                 {icon: <Delete/>, text: '删除'}
+             ]}
+/>
+`;
+
+export const textBtnGroup = `
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+import Search from "@para-ui/icons/Search";
+import Off from "@para-ui/icons/Off";
+import Delete from "@para-ui/icons/Delete";
+
+<ButtonGroup mode={'text'}
+             data={[
+                 {icon: <Search/>, text: '搜索'},
+                 {icon: <Off/>, text: '退出'},
+                 {icon: <Delete/>, text: '删除'}
+             ]}
+/>
+`;
+
+export const disabledGroup = `
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+import Search from "@para-ui/icons/Search";
+import Off from "@para-ui/icons/Off";
+import Delete from "@para-ui/icons/Delete";
+
+<ButtonGroup disabled
+             data={[
+                 {icon: <Search/>, text: '搜索'},
+                 {icon: <Off/>, text: '退出'},
+                 {icon: <Delete/>, text: '删除'}
+             ]}
+/>
+`;
+
+

package/docs/view/buttonGroup/index.scss

@@ -0,0 +1,9 @@
+.paraui-buttonGroup-demo {
+  .code-box-demo {
+    .btn-size {
+      > div {
+        margin-right: 15px;
+      }
+    }
+  }
+}