@para-ui/core 2.1.35 → 2.1.36

package/docs/view/tabs/codeString.tsx

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

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

package/docs/view/tabs/index.tsx

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

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

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

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

package/docs/view/tag/index.tsx

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