@para-ui/core 2.1.35 → 2.1.36

package/docs/view/timePicker/api.tsx

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

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

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

package/docs/view/timePicker/index.tsx

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

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

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

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

package/docs/view/toggleButton/index.tsx

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