@para-ui/core 2.1.32 → 2.1.35

package/docs/view/timePicker/api.tsx

@@ -0,0 +1,178 @@
+/**
+ * @author Hanz
+ * @date 2022/2/16 下午5:58
+ * @description timePicker api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'allowClear',
+        desc: '是否展示清除按钮',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'autoFocus',
+        desc: '自动获取焦点',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'bordered',
+        desc: '是否有边框',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'clearIcon',
+        desc: '自定义的清除图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认时间',
+        type: 'moment'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabledHours',
+        desc: '禁止选择部分小时选项',
+        type: 'function()'
+    },
+    {
+        name: 'disabledMinutes',
+        desc: '禁止选择部分分钟选项',
+        type: 'function(selectedHour)'
+    },
+    {
+        name: 'disabledSeconds',
+        desc: '禁止选择部分秒选项',
+        type: 'function(selectedHour, selectedMinute)'
+    },
+    {
+        name: 'format',
+        desc: '展示的时间格式',
+        type: 'string',
+        default: 'HH:mm:ss'
+    },
+    {
+        name: 'getPopupContainer',
+        desc: '定义浮层的容器，默认为 body 上新建 div',
+        type: 'function(trigger)'
+    },
+    {
+        name: 'hideDisabledOptions',
+        desc: '隐藏禁止选择的选项',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'hourStep',
+        desc: '小时选项间隔',
+        type: 'number',
+        default: '1'
+    },
+    {
+        name: 'inputReadOnly',
+        desc: '设置输入框为只读',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'minuteStep',
+        desc: '分钟选项间隔',
+        type: 'number',
+        default: '1'
+    },
+    {
+        name: 'open',
+        desc: '面板是否打开',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'placeholder',
+        desc: '输入框提示文字',
+        type: 'string | [string, string]',
+        default: '请选择时间'
+    },
+    {
+        name: 'popupClassName',
+        desc: '弹出层类名',
+        type: 'string'
+    },
+    {
+        name: 'popupStyle',
+        desc: '额外的弹出层样式',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'renderExtraFooter',
+        desc: '在面板中添加额外的页脚',
+        type: '() => ReactNode'
+    },
+    {
+        name: 'secondStep',
+        desc: '秒选项间隔',
+        type: 'number',
+        default: '1'
+    },
+    {
+        name: 'showNow',
+        desc: '面板是否显示“此刻”按钮',
+        type: 'boolean'
+    },
+    {
+        name: 'suffixIcon',
+        desc: '自定义的选择框后缀图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'use12Hours',
+        desc: '使用 12 小时制，为 true 时 format 默认为 h:mm:ss a',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'value',
+        desc: '当前时间',
+        type: 'moment'
+    },
+    {
+        name: 'onChange',
+        desc: '时间发生变化的回调',
+        type: 'function(time: moment, timeString: string): void'
+    },
+    {
+        name: 'onOpenChange',
+        desc: '面板打开/关闭时的回调',
+        type: '(open: boolean) => void'
+    }
+];
+
+export const rangePickerExtraApi: RowsData = [
+    {
+        name: 'order',
+        desc: '始末时间是否自动排序',
+        type: 'boolean',
+        default: 'true'
+    }
+];
+
+export default apiData;

package/docs/view/timePicker/codeString.tsx

@@ -0,0 +1,66 @@
+/**
+ * @author Hanz
+ * @date 2022/2/16 下午5:58
+ * @description
+ */
+export const basicTimePicker = `
+import TimePicker from '@para-ui/core/TimePicker';
+import moment, {Moment} from 'moment';
+
+const onChange = (time: Moment | null, timeString: string) => {
+    console.log(time, timeString);
+};
+
+<TimePicker onChange={onChange} defaultValue={moment('00:00:00', 'HH:mm:ss')}/>
+<TimePicker defaultValue={moment('00:00:00', 'HH:mm:ss')}
+            label={'必填'}
+            required={true}
+            labelTooltip={{tooltip: '帮助提示'}}
+            error={true}
+            helperText={'请选择'}
+/>
+<TimePicker defaultValue={moment('00:00:00', 'HH:mm:ss')}
+            label={'必填'}
+            labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+/>
+`;
+
+export const stepTimePicker = `
+import TimePicker from '@para-ui/core/TimePicker';
+
+<TimePicker minuteStep={15} secondStep={10} />
+`;
+
+export const use12HoursTimePicker = `
+import TimePicker from '@para-ui/core/TimePicker';
+import {Moment} from 'moment';
+
+const onChange = (time: Moment | null, timeString: string) => {
+    console.log(time, timeString);
+};
+
+<TimePicker use12Hours onChange={onChange}/>
+<TimePicker use12Hours format="h:mm:ss A" onChange={onChange}/>
+<TimePicker use12Hours format="h:mm a" onChange={onChange}/>
+`;
+
+export const formatTimePicker = `
+import TimePicker from '@para-ui/core/TimePicker';
+import moment from 'moment';
+
+const format = 'HH:mm';
+
+<TimePicker defaultValue={moment('12:08', format)} format={format} />
+`;
+
+export const extraTimePicker = `
+import TimePicker from '@para-ui/core/TimePicker';
+
+<TimePicker renderExtraFooter={() => 'extra footer'}/>
+`;
+
+export const rangeTimePicker = `
+import TimePicker from '@para-ui/core/TimePicker';
+
+<TimePicker.RangePicker/>
+`;

package/docs/view/timePicker/index.scss

@@ -0,0 +1,8 @@
+.paraui-timePicker-demo {
+  .code-box-demo {
+    .timePicker-code {
+      display: inline-flex;
+      flex-direction: column;
+    }
+  }
+}

package/docs/view/timePicker/index.tsx

@@ -0,0 +1,75 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import TimePicker from 'src/TimePicker';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    basicTimePicker,
+    stepTimePicker,
+    use12HoursTimePicker,
+    formatTimePicker,
+    extraTimePicker,
+    rangeTimePicker
+} from './codeString';
+import apiData, {rangePickerExtraApi} from './api';
+import moment, {Moment} from 'moment';
+import './index.scss';
+
+//timePicker
+const ParaTimePicker: FunctionComponent = () => {
+
+    const onChange = (time: Moment | null, timeString: string) => {
+        console.log(time, timeString);
+    };
+    const format = 'HH:mm';
+
+    return (
+        <div className={'paraui-timePicker-demo paraui-form'}>
+            <Title name={'时间选择框'}>代码演示</Title>
+            <CodeBox code={basicTimePicker} title={'基本'} description={'点击 TimePicker，然后可以在浮层中选择或者输入某一时间。'}>
+                <section className={'timePicker-code'}>
+                    <TimePicker onChange={onChange} defaultValue={moment('00:00:00', 'HH:mm:ss')}/>
+                    <TimePicker defaultValue={moment('00:00:00', 'HH:mm:ss')}
+                                label={'必填'}
+                                required={true}
+                                labelTooltip={{tooltip: '帮助提示'}}
+                                error={true}
+                                helperText={'请选择'}
+                    />
+                    <TimePicker defaultValue={moment('00:00:00', 'HH:mm:ss')}
+                                label={'必填'}
+                                labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+                    />
+                </section>
+            </CodeBox>
+            <CodeBox code={stepTimePicker} title={'步长选项'}
+                     description={'可以使用 hourStep minuteStep secondStep 按步长展示可选的时分秒。'}>
+                <TimePicker minuteStep={15} secondStep={10}/>
+            </CodeBox>
+            <CodeBox code={use12HoursTimePicker} title={'12 小时制'} description={'12 小时制的时间选择器，默认的 format 为 h:mm:ss a。'}>
+                <section className={'timePicker-code'}>
+                    <TimePicker use12Hours onChange={onChange}/>
+                    <TimePicker use12Hours format="h:mm:ss A" onChange={onChange}/>
+                    <TimePicker use12Hours format="h:mm a" onChange={onChange}/>
+                </section>
+            </CodeBox>
+            <CodeBox code={formatTimePicker} title={'选择时分'}
+                     description={'TimePicker 浮层中的列会随着 format 变化，当略去 format 中的某部分时，浮层中对应的列也会消失。'}>
+                <TimePicker defaultValue={moment('12:08', format)} format={format} showNow={false}/>
+            </CodeBox>
+            <CodeBox code={extraTimePicker} title={'附加内容'} description={'在 TimePicker 选择框底部显示自定义的内容。'}>
+                <TimePicker renderExtraFooter={() => 'extra footer'}/>
+            </CodeBox>
+            <CodeBox code={rangeTimePicker} title={'范围选择器'} description={'通过 TimePicker.RangePicker 使用时间范围选择器。'}>
+                <TimePicker.RangePicker/>
+            </CodeBox>
+
+            <APITable data={apiData}/>
+            <APITable data={rangePickerExtraApi}
+                      showApi={false}
+                      subTitle={'RangePicker 属性与 DatePicker 的 RangePicker 相同。还包含以下属性'}/>
+        </div>
+    );
+};
+
+export default ParaTimePicker;

package/docs/view/toggleButton/api.tsx

@@ -0,0 +1,100 @@
+/**
+ * @author Hanz
+ * @date 2022/2/10 下午4:38
+ * @description toggleButton api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'value',
+        desc: '按钮选中的值',
+        type: 'any'
+    },
+    {
+        name: 'selected',
+        desc: '按钮是否选中',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabled',
+        desc: '不可用状态',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'width',
+        desc: '宽度',
+        type: 'number|string',
+        default: '120'
+    },
+    {
+        name: 'style',
+        desc: 'css样式',
+        type: 'CSSProperties'
+    },
+    {
+        name: 'onClick',
+        desc: '点击时回调，',
+        type: '(event: React.MouseEvent, value: any) => void'
+    }
+];
+
+export const toggleButtonGroupApi: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'type',
+        desc: '切换按钮组类型',
+        type: 'text | outlined',
+        default: 'outlined'
+    },
+    {
+        name: 'exclusive',
+        desc: '是否互斥',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'toggleable',
+        desc: '是否可切换选中项',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'value',
+        desc: '按钮组选中值',
+        type: 'any',
+    },
+    {
+        name: 'data',
+        desc: '按钮组数据',
+        type: `{ label: string, value: any, selected?: boolean; disabled?: boolean;}[]`
+    },
+    {
+        name: 'onChange',
+        desc: '切换时回调，',
+        type: '(event: React.MouseEvent, value: any) => void;'
+    }
+];
+
+export default apiData;

package/docs/view/toggleButton/codeString.tsx

@@ -0,0 +1,152 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicToggleBtn = `
+import ToggleButton from '@para-ui/core/ToggleButton';
+
+const [selected, setSelected] = React.useState(false);
+
+const handleClick = (evt: React.MouseEvent, value: any) => {
+    setSelected(!selected)
+    console.log(':::', evt, value);
+};
+
+<ToggleButton selected={selected}
+              value={'toggle button'}
+              onClick={handleClick}>
+      切换按钮
+</ToggleButton>
+`;
+
+export const selectedToggleBtn = `
+import ToggleButton from '@para-ui/core/ToggleButton';
+
+<ToggleButton selected>
+    selected
+</ToggleButton>
+`;
+
+export const disabledToggleBtn = `
+import ToggleButton from '@para-ui/core/ToggleButton';
+
+<ToggleButton disabled>
+    disabled
+</ToggleButton>
+`;
+
+export const toggleBtnGroup = `
+import {ToggleButtonGroup} from '@para-ui/core/ToggleButton';
+
+const [value, setValue] = React.useState([]);
+
+const data = [
+    {
+        value: '1',
+        label: 'toggle1'
+    },
+    {
+        value: '2',
+        label: 'toggle2',
+        disabled: true
+    },
+    {
+        value: '3',
+        label: 'toggle3'
+    },
+    {
+        value: '4',
+        label: 'toggle4'
+    }
+];
+
+const handleChange = (evt: React.MouseEvent, value: any) => {
+    setValue(value);
+    console.log(':::handleChange', value);
+};
+
+<ToggleButtonGroup
+        data={data}
+        value={value}
+        onChange={handleChange}
+/>
+`;
+
+export const exclusiveToggleBtnGroup = `
+import {ToggleButtonGroup} from '@para-ui/core/ToggleButton';
+
+const [valueE, setValueE] = React.useState([]);
+   
+const data = [
+    {
+        value: '1',
+        label: 'toggle1'
+    },
+    {
+        value: '2',
+        label: 'toggle2',
+        disabled: true
+    },
+    {
+        value: '3',
+        label: 'toggle3'
+    },
+    {
+        value: '4',
+        label: 'toggle4'
+    }
+];
+
+const handleExclusiveChange = (evt: React.MouseEvent, value: any) => {
+    setValueE(value);
+    console.log(':::handleExclusiveChange', value);
+};
+
+<ToggleButtonGroup
+    data={data}
+    value={valueE}
+    exclusive
+    onChange={handleExclusiveChange}
+/>
+`;
+
+export const exclusiveTextBtnGroup = `
+import {ToggleButtonGroup} from '@para-ui/core/ToggleButton';
+
+const [valueE, setValueE] = React.useState([]);
+   
+const data = [
+    {
+        value: '1',
+        label: 'toggle1'
+    },
+    {
+        value: '2',
+        label: 'toggle2',
+        disabled: true
+    },
+    {
+        value: '3',
+        label: 'toggle3'
+    },
+    {
+        value: '4',
+        label: 'toggle4'
+    }
+];
+
+const handleExclusiveChange = (evt: React.MouseEvent, value: any) => {
+    setValueE(value);
+    console.log(':::handleExclusiveChange', value);
+};
+
+<ToggleButtonGroup
+    data={data}
+    value={valueE}
+    type={'text'}
+    onChange={handleExclusiveChange}
+/>
+`;
+
+

package/docs/view/toggleButton/index.scss

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

package/docs/view/toggleButton/index.tsx

@@ -0,0 +1,108 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import ToggleButton, {ToggleButtonGroup} from 'src/ToggleButton';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {
+    basicToggleBtn,
+    disabledToggleBtn,
+    selectedToggleBtn,
+    toggleBtnGroup,
+    exclusiveToggleBtnGroup,
+    exclusiveTextBtnGroup
+} from './codeString';
+import apiData, {toggleButtonGroupApi} from './api';
+import './index.scss';
+
+//toggleButton
+const ParaToggleButton: FunctionComponent = () => {
+    const [selected, setSelected] = React.useState(false);
+    const [value, setValue] = React.useState([]);
+    const [valueE, setValueE] = React.useState([]);
+
+    const data = [
+        {
+            value: '1',
+            label: 'toggle1'
+        },
+        {
+            value: '2',
+            label: 'toggle2',
+            disabled: true
+        },
+        {
+            value: '3',
+            label: 'toggle3'
+        },
+        {
+            value: '4',
+            label: 'toggle4'
+        }
+    ];
+
+    const handleClick = (evt: React.MouseEvent, value: any) => {
+        setSelected(!selected)
+        console.log(':::', evt, value);
+    };
+
+    const handleChange = (evt: React.MouseEvent, value: any) => {
+        setValue(value);
+        console.log(':::handleChange', value);
+    };
+
+    const handleExclusiveChange = (evt: React.MouseEvent, value: any) => {
+        setValueE(value);
+        console.log(':::handleExclusiveChange', value);
+    };
+
+    return (
+        <div className={'paraui-toggleButton-demo'}>
+            <Title name={'切换按钮'}>代码演示</Title>
+            <CodeBox code={basicToggleBtn} title={'基本'} description={'最简单的切换按钮。'}>
+                <ToggleButton selected={selected}
+                              value={'toggle button'}
+                              onClick={handleClick}>
+                    点击切换
+                </ToggleButton>
+            </CodeBox>
+            <CodeBox code={selectedToggleBtn} title={'默认选中'} description={'添加 selected 属性即可选中。'}>
+                <ToggleButton selected>
+                    selected
+                </ToggleButton>
+            </CodeBox>
+            <CodeBox code={disabledToggleBtn} title={'不可用'} description={'添加 disabled 属性即可处于不可用状态。'}>
+                <ToggleButton disabled>
+                    disabled
+                </ToggleButton>
+            </CodeBox>
+            <CodeBox code={toggleBtnGroup} title={'切换按钮组'} description={'提供方便使用的切换按钮组'}>
+                <ToggleButtonGroup
+                    data={data}
+                    value={value}
+                    onChange={handleChange}
+                />
+            </CodeBox>
+            <CodeBox code={exclusiveToggleBtnGroup} title={'切换按钮组（互斥）'} description={'互斥的切换按钮组'}>
+                <ToggleButtonGroup
+                    data={data}
+                    value={valueE}
+                    exclusive
+                    onChange={handleExclusiveChange}
+                />
+            </CodeBox>
+            <CodeBox code={exclusiveTextBtnGroup} title={'文字类型（互斥）'} description={'文字类型切换按钮组，默认互斥且当前选中项不可切换'}>
+                <ToggleButtonGroup
+                    data={data}
+                    value={valueE}
+                    type={'text'}
+                    toggleable={false}
+                    onChange={handleExclusiveChange}
+                />
+            </CodeBox>
+            <APITable data={apiData}/>
+            <APITable data={toggleButtonGroupApi} showApi={false} subTitle={'ToggleButtonGroup'}/>
+        </div>
+    );
+};
+
+export default ParaToggleButton;