@para-ui/core 2.1.35 → 2.1.36

package/docs/view/checkbox/index.tsx

@@ -1,233 +0,0 @@
-import React, {FunctionComponent, useState} from 'react';
-import CodeBox from '../../components/codeBox';
-import Checkbox from 'src/Checkbox';
-import CheckboxGroup, {CheckboxListProps} from 'src/CheckboxGroup';
-import ButtonGroup from 'src/ButtonGroup';
-import APITable from '../../components/apiTable';
-import Title from '../../components/title';
-import {basicCheckbox, basicCheckboxGroup} from './codeString';
-import apiData, {apiDataGroup} from './api';
-import './index.scss';
-
-const list: CheckboxListProps[] = [
-    {
-        label: '选项1',
-        name: '1'
-    },
-    {
-        label: '选项2',
-        name: '2'
-    },
-    {
-        label: '选项3',
-        name: '3'
-    }
-];
-
-const ParaCheckbox: FunctionComponent = () => {
-    const [value, setValue] = useState<any[]>(['1']);
-    const [size, setSize] = useState<any>('large');
-
-    const clickBtnSize = (item: any) => {
-        setSize(item.value)
-    }
-    const onChange = (val: any) => {
-        setValue(val);
-    }
-
-    return (
-        <div className={'paraui-checkbox-demo paraui-form'}>
-            <Title name={'复选框'}>代码演示</Title>
-            <CodeBox
-                code={basicCheckbox}
-                title={'基本'}
-                description={'最简单的用法。'}
-            >
-                <Checkbox
-                    label="默认"
-                />
-                <Checkbox
-                    label="选中"
-                    checked={true}
-                />
-                <Checkbox
-                    label="半选"
-                    indeterminate={true}
-                />
-                <br />
-                <br />
-                <Checkbox
-                    label="默认"
-                    disabled={true}
-                />
-                <Checkbox
-                    label="选中"
-                    checked={true}
-                    disabled={true}
-                />
-                <Checkbox
-                    label="半选"
-                    indeterminate={true}
-                    disabled={true}
-                />
-                <br />
-                <br />
-                <Checkbox
-                    label="默认"
-                    labelTooltip={{tooltip: '帮组提示'}}
-                />
-                <Checkbox
-                    label="选中"
-                    checked={true}
-                    labelTooltip={{tooltip: '帮组提示'}}
-                />
-                <Checkbox
-                    label="半选"
-                    indeterminate={true}
-                    labelTooltip={{tooltip: '帮组提示'}}
-                />
-                <br />
-                <br />
-                <Checkbox
-                    label="默认"
-                    disabled={true}
-                    labelTooltip={{tooltip: '帮组提示'}}
-                />
-                <Checkbox
-                    label="选中"
-                    checked={true}
-                    disabled={true}
-                    labelTooltip={{tooltip: '帮组提示'}}
-                />
-                <Checkbox
-                    label="半选"
-                    indeterminate={true}
-                    disabled={true}
-                    labelTooltip={{tooltip: '帮组提示'}}
-                />
-                <br />
-                <br />
-                <Checkbox
-                    label="默认"
-                    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
-                />
-                <Checkbox
-                    label="选中"
-                    checked={true}
-                    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
-                />
-                <Checkbox
-                    label="半选"
-                    indeterminate={true}
-                    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
-                />
-                <br />
-                <br />
-                <Checkbox
-                    label="默认"
-                    disabled={true}
-                    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
-                />
-                <Checkbox
-                    label="选中"
-                    checked={true}
-                    disabled={true}
-                    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
-                />
-                <Checkbox
-                    label="半选"
-                    indeterminate={true}
-                    disabled={true}
-                    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
-                />
-                <br/>
-                <br/>
-                <Checkbox
-                    label="默认默认默认默认默认"
-                    style={{width: '100px'}}
-                />
-                <Checkbox
-                    label="默认"
-                />
-            </CodeBox>
-            <CodeBox
-                code={basicCheckboxGroup}
-                title={'复选框组'}
-                description={'复选框组。'}
-            >
-                <div style={{marginBottom: '20px'}}>
-                    <ButtonGroup
-                        mode={'text'}
-                        onClick={clickBtnSize}
-                        data={[
-                            {
-                                text: '小(small)',
-                                value: 'small'
-                            },
-                            {
-                                text: '中(medium)',
-                                value: 'medium'
-                            },
-                            {
-                                text: '大(large)',
-                                value: 'large'
-                            },
-                        ]}
-                    />
-                </div>
-                <CheckboxGroup
-                    label={'复选框组'}
-                    list={list}
-                    onChange={onChange}
-                    value={value}
-                    size={size}
-                />
-                <CheckboxGroup
-                    required={true}
-                    label={'复选框组'}
-                    list={list}
-                    onChange={onChange}
-                    value={value}
-                    size={size}
-                />
-                <CheckboxGroup
-                    label={'复选框组'}
-                    error={true}
-                    helperText={'请选择'}
-                    list={list}
-                    onChange={onChange}
-                    value={value}
-                    size={size}
-                />
-                <CheckboxGroup
-                    label={'复选框组'}
-                    row={false}
-                    list={list}
-                    onChange={onChange}
-                    value={value}
-                    size={size}
-                />
-                <CheckboxGroup
-                    label={'复选框组'}
-                    list={list}
-                    onChange={onChange}
-                    value={value}
-                    size={size}
-                    labelTooltip={{tooltip: '帮组提示'}}
-                />
-                <CheckboxGroup
-                    label={'复选框组'}
-                    list={list}
-                    onChange={onChange}
-                    value={value}
-                    size={size}
-                    labelTooltip={{tooltip: '帮组提示', tooltipType: 'line'}}
-                />
-            </CodeBox>
-            <APITable data={apiData} subTitle={'CheckboxProps'} />
-            <APITable data={apiDataGroup} subTitle={'CheckboxGroup'} showApi={false} />
-        </div>
-    );
-};
-
-export default ParaCheckbox;

package/docs/view/collapse/api.tsx

@@ -1,109 +0,0 @@
-/**
- * @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: 'style',
-        desc: 'style',
-        type: 'CSSProperties'
-    },
-    {
-        name: 'defaultActiveKey',
-        desc: '初始化选中面板的 key',
-        type: 'Array<string | number> | string | number'
-    },
-    {
-        name: 'activeKey',
-        desc: '当前激活 tab 面板的 key',
-        type: 'Array<string | number> | string | number'
-    },
-    {
-        name: 'accordion',
-        desc: '手风琴模式',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'collapsible',
-        desc: '所有子面板是否可折叠或指定可折叠触发区域',
-        type: 'header | disabled'
-    },
-    {
-        name: 'destroyInactivePanel',
-        desc: '销毁折叠隐藏的面板',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'expandIcon',
-        desc: '自定义切换图标',
-        type: '(panelProps: PanelProps) => React.ReactNode'
-    },
-    {
-        name: 'expandIconPosition',
-        desc: '设置图标位置',
-        type: 'left | right | undefined',
-        default: 'left'
-    },
-    {
-        name: 'onChange',
-        desc: '切换面板的回调',
-        type: '(key: string | string[]) => void'
-    }
-];
-
-export const apiDataPanel: RowsData = [
-    {
-        name: 'className',
-        desc: 'class样式名',
-        type: 'string'
-    },
-    {
-        name: 'style',
-        desc: 'style',
-        type: 'CSSProperties'
-    },
-    {
-        name: 'key',
-        desc: '对应 activeKey',
-        type: 'string | number'
-    },
-    {
-        name: 'header',
-        desc: '面板头内容',
-        type: 'ReactNode'
-    },
-    {
-        name: 'collapsible',
-        desc: '是否可折叠或指定可折叠触发区域',
-        type: 'header | disabled'
-    },
-    {
-        name: 'showArrow',
-        desc: '是否展示当前面板上的箭头',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'forceRender',
-        desc: '被隐藏时是否渲染 DOM 结构',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'extra',
-        desc: '被自定义渲染每个面板右上角的内容',
-        type: 'ReactNode'
-    }
-];
-
-export default apiData;

package/docs/view/collapse/codeString.tsx

@@ -1,186 +0,0 @@
-/**
- * @author linhd
- * @date 2022/2/14 2:04 PM
- * @description 源码字符串
- */
-export const basicCollapse = `
-import Collapse from '@para-ui/core/Collapse';
-const {Panel} = Collapse;
-
-const callback = (key: any) => {
-    console.log(key);
-}
-
-const text = \`
-A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.
-\`;
-
-<Collapse defaultActiveKey={['1']} onChange={callback}>
-    <Panel header="This is panel header 1" key="1">
-        <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 2" key="2">
-        <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 3" key="3">
-        <p>{text}</p>
-    </Panel>
-</Collapse>
-`;
-
-export const accordionCollapse = `
-import Collapse from '@para-ui/core/Collapse';
-const {Panel} = Collapse;
-
-const text = \`
-A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.
-\`;
-
-<Collapse accordion>
-    <Panel header="This is panel header 1" key="1">
-        <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 2" key="2">
-        <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 3" key="3">
-        <p>{text}</p>
-    </Panel>
-</Collapse>
-`;
-
-export const nestCollapse = `
-import Collapse from '@para-ui/core/Collapse';
-const {Panel} = Collapse;
-
-const callback = (key: any) => {
-    console.log(key);
-}
-
-const text = \`
-A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.
-\`;
-
-<Collapse onChange={callback}>
-    <Panel header="This is panel header 1" key="1">
-        <Collapse defaultActiveKey="1">
-            <Panel header="This is panel nest panel" key="1">
-                <p>{text}</p>
-            </Panel>
-        </Collapse>
-    </Panel>
-    <Panel header="This is panel header 2" key="2">
-        <p>{text}</p>
-    </Panel>
-    <Panel header="This is panel header 3" key="3">
-        <p>{text}</p>
-    </Panel>
-</Collapse>
-`;
-
-export const arrowCollapse = `
-import Collapse from '@para-ui/core/Collapse';
-const {Panel} = Collapse;
-
-const callback = (key: any) => {
-    console.log(key);
-}
-
-const text = \`
-A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.
-\`;
-
-<Collapse defaultActiveKey={['1']} onChange={callback}>
-    <Panel header="This is panel header with arrow icon" key="1">
-        <p>{text}</p>
-    </Panel>
-    <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
-        <p>{text}</p>
-    </Panel>
-</Collapse>
-`;
-
-export const posCollapse = `
-import Collapse from '@para-ui/core/Collapse';
-const {Panel} = Collapse;
-
-const [expandIconPosition, setExpandIconPosition] = useState<any>('left')
-
-const callback = (key: any) => {
-    console.log(key);
-}
-
-const text = \`
-A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.
-\`;
-
-const genExtra = () => (
-    <AdvancedSet
-        onClick={(event: any) => {
-            // If you don't want click extra trigger collapse, you can prevent this:
-            event.stopPropagation();
-        }}
-    />
-);
-
-const clickBtn = (type: any) => () => {
-    setExpandIconPosition(type)
-}
-
-<Collapse
-    defaultActiveKey={['1']}
-    onChange={callback}
-    expandIconPosition={expandIconPosition}
->
-    <Panel header="This is panel header 1" key="1" extra={genExtra()}>
-        <div>{text}</div>
-    </Panel>
-    <Panel header="This is panel header 2" key="2" extra={genExtra()}>
-        <div>{text}</div>
-    </Panel>
-    <Panel header="This is panel header 3" key="3" extra={genExtra()}>
-        <div>{text}</div>
-    </Panel>
-</Collapse>
-<br />
-<div>
-    <Button onClick={clickBtn('left')} variant={"outlined"} style={{marginRight: '10px'}}>left</Button>
-    <Button onClick={clickBtn('right')} variant={"outlined"}>right</Button>
-</div>
-`;
-
-export const disabledCollapse = `
-import Collapse from '@para-ui/core/Collapse';
-const {Panel} = Collapse;
-
-const text = \`
-A dog is a type of domesticated animal.
-Known for its loyalty and faithfulness,
-it can be found as a welcome guest in many households across the world.
-\`;
-
-<Collapse collapsible="header" defaultActiveKey={['1']}>
-    <Panel header="This panel can only be collapsed by clicking text" key="1">
-        <p>{text}</p>
-    </Panel>
-    <Panel header="This panel can only be collapsed by clicking text" key="2" collapsible="disabled">
-        <p>{text}</p>
-    </Panel>
-</Collapse>
-<br />
-<Collapse collapsible="disabled">
-    <Panel header="This panel can't be collapsed" key="1">
-        <p>{text}</p>
-    </Panel>
-</Collapse>
-`;

package/docs/view/collapse/index.tsx

@@ -1,171 +0,0 @@
-import React, {FunctionComponent, useState} from 'react';
-import CodeBox from '../../components/codeBox';
-import Collapse from 'src/Collapse';
-import Button from 'src/Button';
-import APITable from '../../components/apiTable';
-import Title from '../../components/title';
-import AdvancedSet from "@para-ui/icons/AdvancedSet";
-import {
-    basicCollapse,
-    accordionCollapse,
-    nestCollapse,
-    arrowCollapse,
-    posCollapse,
-    disabledCollapse
-} from './codeString';
-import apiData, {apiDataPanel} from './api';
-import './index.scss';
-
-const {Panel} = Collapse;
-
-const ParaCollapse: FunctionComponent = () => {
-    const [expandIconPosition, setExpandIconPosition] = useState<any>('left')
-
-    const callback = (key: any) => {
-        console.log(key);
-    }
-
-    const text = `
-  A dog is a type of domesticated animal.
-  Known for its loyalty and faithfulness,
-  it can be found as a welcome guest in many households across the world.
-`;
-
-    const genExtra = () => (
-        <AdvancedSet
-            onClick={(event: any) => {
-                // If you don't want click extra trigger collapse, you can prevent this:
-                event.stopPropagation();
-            }}
-        />
-    );
-
-    const clickBtn = (type: any) => () => {
-        setExpandIconPosition(type)
-    }
-
-    return (
-        <div className={'paraui-collapse-demo'}>
-            <Title name={'折叠面板'}>代码演示</Title>
-            <CodeBox
-                code={basicCollapse}
-                title={'折叠面板'}
-                description={'可以同时展开多个面板，这个例子默认展开了第一个。'}
-            >
-                <Collapse defaultActiveKey={['1']} onChange={callback}>
-                    <Panel header="This is panel header 1" key="1">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header="This is panel header 2" key="2">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header="This is panel header 3" key="3">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-            </CodeBox>
-            <CodeBox
-                code={accordionCollapse}
-                title={'手风琴'}
-                description={'手风琴，每次只打开一个 tab。'}
-            >
-                <Collapse accordion>
-                    <Panel header="This is panel header 1" key="1">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header="This is panel header 2" key="2">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header="This is panel header 3" key="3">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-            </CodeBox>
-            <CodeBox
-                code={nestCollapse}
-                title={'面板嵌套'}
-                description={'嵌套折叠面板。'}
-            >
-                <Collapse onChange={callback}>
-                    <Panel header="This is panel header 1" key="1">
-                        <Collapse defaultActiveKey="1">
-                            <Panel header="This is panel nest panel" key="1">
-                                <p>{text}</p>
-                            </Panel>
-                        </Collapse>
-                    </Panel>
-                    <Panel header="This is panel header 2" key="2">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header="This is panel header 3" key="3">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-            </CodeBox>
-            <CodeBox
-                code={arrowCollapse}
-                title={'隐藏箭头'}
-                description={'你可以通过 showArrow={false} 隐藏 CollapsePanel 组件的箭头图标。'}
-            >
-                <Collapse defaultActiveKey={['1']} onChange={callback}>
-                    <Panel header="This is panel header with arrow icon" key="1">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-            </CodeBox>
-            <CodeBox
-                code={posCollapse}
-                title={'图标位置'}
-                description={'图标位置。'}
-            >
-                <Collapse
-                    defaultActiveKey={['1']}
-                    onChange={callback}
-                    expandIconPosition={expandIconPosition}
-                >
-                    <Panel header="This is panel header 1" key="1" extra={genExtra()}>
-                        <div>{text}</div>
-                    </Panel>
-                    <Panel header="This is panel header 2" key="2" extra={genExtra()}>
-                        <div>{text}</div>
-                    </Panel>
-                    <Panel header="This is panel header 3" key="3" extra={genExtra()}>
-                        <div>{text}</div>
-                    </Panel>
-                </Collapse>
-                <br />
-                <div>
-                    <Button onClick={clickBtn('left')} variant={"outlined"} style={{marginRight: '10px'}}>left</Button>
-                    <Button onClick={clickBtn('right')} variant={"outlined"}>right</Button>
-                </div>
-            </CodeBox>
-            <CodeBox
-                code={disabledCollapse}
-                title={'禁用'}
-                description={'禁用。'}
-            >
-                <Collapse collapsible="header" defaultActiveKey={['1']}>
-                    <Panel header="This panel can only be collapsed by clicking text" key="1">
-                        <p>{text}</p>
-                    </Panel>
-                    <Panel header="This panel can only be collapsed by clicking text" key="2" collapsible="disabled">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-                <br />
-                <Collapse collapsible="disabled">
-                    <Panel header="This panel can't be collapsed" key="1">
-                        <p>{text}</p>
-                    </Panel>
-                </Collapse>
-            </CodeBox>
-            <APITable data={apiData} subTitle={'Collapse'}/>
-            <APITable data={apiDataPanel} showApi={false} subTitle={'Collapse.Panel'}/>
-        </div>
-    );
-};
-
-export default ParaCollapse;