@para-ui/core 2.1.32 → 2.1.35

package/docs/view/checkbox/index.tsx

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

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

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

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