@para-ui/core 2.1.32 → 2.1.35

package/docs/view/tabs/codeString.tsx

@@ -0,0 +1,243 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicTabs = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [value, setValue] = React.useState<any>(0);
+
+const tabsData = [
+    {
+        label: 'Tab1',
+        value: 0
+    },
+    {
+        label: 'Tab2',
+        value: 1
+    },
+    {
+        label: 'Tab3',
+        value: 2
+    }
+];
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+<Tabs data={tabsData} value={value} onChange={handleChange}/>
+`;
+
+export const disabledTabsItem = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [value, setValue] = React.useState<any>(0);
+
+const tabsDataWithDisabled = [
+    {
+        label: 'Tab1',
+        value: 0
+    },
+    {
+        label: 'Tab2',
+        value: 1,
+        disabled: true
+    },
+    {
+        label: 'Tab3',
+        value: 2
+    }
+];
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+<Tabs data={tabsDataWithDisabled} value={value} onChange={handleChange}/>
+`;
+
+export const tabsWithTip = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [value, setValue] = React.useState<any>(0);
+
+const tabsData = [
+    {
+        label: 'Tab1',
+        value: 0
+    },
+    {
+        label: 'Tab2',
+        value: 1
+    },
+    {
+        label: 'Tab3',
+        value: 2
+    }
+];
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+<Tabs data={tabsData} value={value} onChange={handleChange} showToolTip/>
+`;
+
+export const centerTabs = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [value, setValue] = React.useState<any>(0);
+
+const tabsData = [
+    {
+        label: 'Tab1',
+        value: 0
+    },
+    {
+        label: 'Tab2',
+        value: 1
+    },
+    {
+        label: 'Tab3',
+        value: 2
+    }
+];
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+<Tabs data={tabsData} value={value} onChange={handleChange} centered/>
+`;
+
+export const tabsWithEdit = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [data, setData] = React.useState<any>([
+    {
+        label: 'Tab1',
+        value: 0
+    },
+    {
+        label: 'Tab2',
+        value: 1
+    },
+    {
+        label: 'Tab3',
+        value: 2
+    }
+]);
+const [value, setValue] = React.useState<any>(0);
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+const handleEdit = (tab: any) => {
+    let idx = data.findIndex((_: any) => _.key === tab.key);
+    data.splice(idx, 1);
+    setData([...data]);
+    setValue(0);
+};
+
+const handleAdd = () => {
+    data.push({
+        label: 'New Tab',
+        value: Math.ceil(Math.random() * 100)
+    });
+    setData([...data]);
+};
+
+<Tabs data={data}
+      value={value}
+      editable
+      showAdd
+      showPopConfirm
+      onChange={handleChange}
+      onEdit={handleEdit}
+      onAdd={handleAdd}
+/>
+`;
+
+export const tabsScrollable = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [value, setValue] = React.useState<any>(0);
+
+const dataScroll = Array(10).fill(undefined).map((_: undefined, i) => ({label: \`Tabs\${i + 1}\`, value: i}));
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+<section style={{width: '500px'}}>
+    <Tabs data={dataScroll} value={value} onChange={handleChange} variant={'scrollable'}/>
+</section>
+`;
+
+export const cardTabs = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [value, setValue] = React.useState<any>(0);
+
+const tabsData = [
+    {
+        label: 'Tab1',
+        value: 0
+    },
+    {
+        label: 'Tab2',
+        value: 1
+    },
+    {
+        label: 'Tab3',
+        value: 2
+    }
+];
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+<Tabs mode={'card'} data={tabsData} value={value} onChange={handleChange}/>
+`;
+
+
+export const trackTabs = `
+import Tabs from '@para-ui/core/Tabs';
+
+const [value, setValue] = React.useState<any>(0);
+
+const tabsData = [
+    {
+        label: 'Tab1',
+        value: 0
+    },
+    {
+        label: 'Tab2',
+        value: 1
+    },
+    {
+        label: 'Tab3',
+        value: 2
+    }
+];
+
+const handleChange = (value: any, selectItem: any): void => {
+    setValue(value);
+    console.log('::::onchange', value, selectItem);
+};
+
+<Tabs mode={'track'} data={tabsData} value={value} onChange={handleChange}/>
+`;
+
+

package/docs/view/tabs/index.scss

@@ -0,0 +1,5 @@
+.paraui-tabs-demo {
+  .code-box-demo {
+
+  }
+}

package/docs/view/tabs/index.tsx

@@ -0,0 +1,132 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Tabs from 'src/Tabs';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    basicTabs,
+    disabledTabsItem,
+    tabsWithTip,
+    centerTabs,
+    tabsWithEdit,
+    tabsScrollable,
+    cardTabs,
+    trackTabs
+} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+//tabs
+const ParaTabs: FunctionComponent = () => {
+    const [value, setValue] = React.useState<any>(0);
+    const [data, setData] = React.useState<any>([
+        {
+            label: 'Tab1',
+            value: 0
+        },
+        {
+            label: 'Tab2',
+            value: 1
+        },
+        {
+            label: 'Tab3',
+            value: 2
+        }
+    ]);
+
+    const tabsData = [
+        {
+            label: 'Tab1',
+            value: 0
+        },
+        {
+            label: 'Tab2',
+            value: 1
+        },
+        {
+            label: 'Tab3',
+            value: 2
+        }
+    ];
+
+    const tabsDataWithDisabled = [
+        {
+            label: 'Tab1',
+            value: 0
+        },
+        {
+            label: 'Tab2',
+            value: 1,
+            disabled: true
+        },
+        {
+            label: 'Tab3',
+            value: 2
+        }
+    ];
+    const dataScroll = Array(10).fill(undefined).map((_: undefined, i) => ({label: `Tabs${i + 1}`, value: i}));
+
+    //change
+    const handleChange = (value: any, selectItem: any): void => {
+        setValue(value);
+        console.log('::::onchange', value, selectItem);
+    };
+
+    const handleEdit = (tab: any) => {
+        let idx = data.findIndex((_: any) => _.value === tab.value);
+        data.splice(idx, 1);
+        setData([...data]);
+        setValue(0);
+    };
+
+    const handleAdd = () => {
+        data.push({
+            label: 'New Tab',
+            value: Math.ceil(Math.random() * 100)
+        });
+        setData([...data]);
+    };
+
+    return (
+        <div className={'paraui-tabs-demo'}>
+            <Title name={'标签页'}>代码演示</Title>
+            <CodeBox code={basicTabs} title={'基本'} description={'默认选中第一项。'}>
+                <Tabs data={tabsData} value={value} onChange={handleChange}/>
+            </CodeBox>
+            <CodeBox code={disabledTabsItem} title={'禁用'} description={'禁用某一项。'}>
+                <Tabs data={tabsDataWithDisabled} value={value} onChange={handleChange}/>
+            </CodeBox>
+            <CodeBox code={tabsWithTip} title={'文字提示'} description={'标签文字提示。'}>
+                <Tabs data={tabsData} value={value} onChange={handleChange} showToolTip/>
+            </CodeBox>
+            <CodeBox code={centerTabs} title={'居中'} description={'标签居中展示。'}>
+                <Tabs data={tabsData} value={value} onChange={handleChange} centered/>
+            </CodeBox>
+            <CodeBox code={tabsWithEdit} title={'带有关闭和新增'} description={'标签页支持关闭、新增选项。'}>
+                <Tabs data={data}
+                      value={value}
+                      editable
+                      showAdd
+                      variant={'scrollable'}
+                      onChange={handleChange}
+                      onEdit={handleEdit}
+                      onAdd={handleAdd}
+                />
+            </CodeBox>
+            <CodeBox code={tabsScrollable} title={'滚动'} description={'可滚动容纳更多标签。'}>
+                <section style={{width: '500px'}}>
+                    <Tabs data={dataScroll} value={value} onChange={handleChange} variant={'scrollable'}/>
+                </section>
+            </CodeBox>
+            <CodeBox code={cardTabs} title={'卡片式页签'} description={'提供卡片式页签样式。'}>
+                <Tabs mode={'card'} data={tabsData} value={value} onChange={handleChange}/>
+            </CodeBox>
+            <CodeBox code={trackTabs} title={'轨道式页签'} description={'提供轨道式页签样式。'}>
+                <Tabs mode={'track'} data={tabsData} value={value} onChange={handleChange}/>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaTabs;

package/docs/view/tag/api.tsx

@@ -0,0 +1,119 @@
+/**
+ * @author Hanz
+ * @date 2022/2/10 下午4:38
+ * @description tag api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'color',
+        desc: '字体颜色',
+        type: 'string'
+    },
+    {
+        name: 'closable',
+        desc: '可关闭',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'closeIcon',
+        desc: '自定义关闭按钮',
+        type: 'ReactNode'
+    },
+    {
+        name: 'visible',
+        desc: '是否显示标签',
+        type: 'boolean'
+    },
+    {
+        name: 'icon',
+        desc: '设置图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'bordered',
+        desc: '是否显示边框，',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'size',
+        desc: '大小',
+        type: 'small | large',
+        default: 'small'
+    },
+    {
+        name: 'onClose',
+        desc: `关闭时回调函数`,
+        type: '(event: React.MouseEvent) => void'
+    }
+];
+export const tagGroupApiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'data',
+        desc: '标签组数据',
+        type: '{ label: string; value: string; }[] | (string | number)[]'
+    },
+    {
+        name: 'increased',
+        desc: '开启动态添加标签',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'increasedTag',
+        desc: '动态添加按钮，increased 为true 有效',
+        type: `{
+            /** 图标 */
+            icon?: React.ReactNode;
+            /** 文字 */
+            text?: string;
+        }`,
+    },
+    {
+        name: 'defaultInputValue',
+        desc: 'input 默认值，increased 为true 有效',
+        type: 'string'
+    },
+    {
+        name: 'bordered',
+        desc: '是否显示边框',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'size',
+        desc: '标签大小',
+        type: 'small | large',
+        default: 'small'
+    },
+    {
+        name: 'onChange',
+        desc: '标签变化时回调',
+        type: '(tagData: TagItem[], value: string[]) => void;',
+    }
+];
+
+export default apiData;

package/docs/view/tag/codeString.tsx

@@ -0,0 +1,95 @@
+/**
+ * @author Hanz
+ * @date 2022/2/14 下午2:29
+ * @description
+ */
+export const basicTag = `
+import Tag from '@para-ui/core/Tag';
+
+<Tag>Tag</Tag>
+`;
+
+export const tagWithIcon = `
+import Tag from '@para-ui/core/Tag';
+import Accelerate from "@para-ui/icons/Accelerate";
+
+<Tag icon={<Accelerate/>} closable>带图标</Tag>
+`;
+
+export const tagClosable = `
+import Tag from '@para-ui/core/Tag';
+import Accelerate from "@para-ui/icons/Accelerate";
+
+const handleClose = (e: React.MouseEvent) => {
+   console.log('Clicked close', e);
+};
+
+<Tag closable onClose={handleClose} icon={<Accelerate/>}>
+    可关闭
+</Tag>
+`;
+
+export const presetTag = `
+import Tag from '@para-ui/core/Tag';
+
+<Tag color={'red'}>
+    red
+</Tag>
+<Tag color={'blue'}>
+    blue
+</Tag>
+<Tag color={'green'}>
+    green
+</Tag>
+<Tag color={'yellow'}>
+    yellow
+</Tag>
+`;
+
+export const customColor = `
+import Tag from '@para-ui/core/Tag';
+
+<Tag color={'#3666d6'}>
+    #3666d6
+</Tag>
+`;
+
+export const tagGroupCode = `
+import {TagGroup} from '@para-ui/core/Tag';
+
+const tagData = [
+    {
+        value: '1',
+        label: 'tag1',
+        closable: true,
+        onClose: (e: any) => {
+            console.log(e)
+        }
+    },
+    {
+        value: '2',
+        label: 'tag2'
+    }
+];
+const tagDataStr = ['a', 'b', 'c'];
+
+const handleChange = (data: unknown, value: string[]) => {
+    console.log('onChange:::', data, value);
+};
+
+//对象数组
+<TagGroup data={tagData}
+          onChange={handleChange}
+          increased
+          increasedTag={{text: ''}}
+/>
+//字符串数组
+<TagGroup data={tagDataStr}
+          onChange={handleChange}
+          increased
+          increasedTag={{text: '请输入'}}
+          defaultInputValue={'/'}
+/>
+`;
+
+

package/docs/view/tag/index.scss

@@ -0,0 +1,5 @@
+.paraui-tag-demo {
+  .code-box-demo {
+
+  }
+}

package/docs/view/tag/index.tsx

@@ -0,0 +1,91 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Tag, {TagGroup} from 'src/Tag';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicTag, tagWithIcon, tagClosable, presetTag, customColor, tagGroupCode} from './codeString';
+import apiData, {tagGroupApiData} from './api';
+import Accelerate from "@para-ui/icons/Accelerate";
+import './index.scss';
+
+//tags
+const ParaTag: FunctionComponent = () => {
+
+    const tagData = [
+        {
+            value: '1',
+            label: 'tag1',
+            closable: true,
+            onClose: (e: any) => {
+                console.log(e)
+            }
+        },
+        {
+            value: '2',
+            label: 'tag2'
+        }
+    ];
+
+    const tagDataStr = ['a', 'b', 'c'];
+
+    const handleClose = (e: React.MouseEvent) => {
+        console.log('Clicked close', e);
+    };
+    const handleChange = (data: unknown, value: string[]) => {
+        console.log('onChange:::', data, value);
+    };
+
+    return (
+        <div className={'paraui-tag-demo'}>
+            <Title name={'标签'}>代码演示</Title>
+            <CodeBox code={basicTag} title={'基本'} description={'最简单的用法。'}>
+                <Tag>Tag</Tag>
+            </CodeBox>
+            <CodeBox code={tagWithIcon} title={'带有图标'} description={'带有图标的标签。'}>
+                <Tag icon={<Accelerate/>}>带图标</Tag>
+            </CodeBox>
+            <CodeBox code={tagClosable} title={'可关闭'} description={'可关闭的标签。'}>
+                <Tag closable onClose={handleClose} icon={<Accelerate/>}>
+                    可关闭
+                </Tag>
+            </CodeBox>
+            <CodeBox code={presetTag} title={'预设'} description={'提供一些预设标签。'}>
+                <Tag color={'red'}>
+                    red
+                </Tag>
+                <Tag color={'blue'}>
+                    blue
+                </Tag>
+                <Tag color={'green'}>
+                    green
+                </Tag>
+                <Tag color={'yellow'}>
+                    yellow
+                </Tag>
+            </CodeBox>
+            <CodeBox code={customColor} title={'自定义颜色'} description={'可以自定义字体颜色。'}>
+                <Tag color={'#3666d6'}>
+                    #3666d6
+                </Tag>
+            </CodeBox>
+            <CodeBox code={tagGroupCode} title={'标签组'} description={'提供方便使用的标签组'}>
+                <TagGroup data={tagData}
+                          onChange={handleChange}
+                          increased
+                          increasedTag={{text: ''}}
+                />
+                <br/>
+                <TagGroup data={tagDataStr}
+                          onChange={handleChange}
+                          increased
+                          increasedTag={{text: '请输入'}}
+                          defaultInputValue={'/'}
+                />
+            </CodeBox>
+            <APITable data={apiData} subTitle={'Tag props'}/>
+            <APITable data={tagGroupApiData} showApi={false} subTitle={'TagGroup props'}/>
+        </div>
+    );
+};
+
+export default ParaTag;