@para-ui/core 2.1.35 → 2.1.36

package/docs/view/slider/api.tsx

@@ -1,135 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/10 下午1:39
- * @description slider api
- */
-import {RowsData} from '../../components/apiTable';
-
-const apiData: RowsData = [
-    {
-        name: 'className',
-        desc: '类名',
-        type: 'string'
-    },
-    {
-        name: 'style',
-        desc: '样式',
-        type: 'React.CSSProperties'
-    },
-    {
-        name: 'value',
-        desc: '设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]',
-        type: 'number | [number, number]'
-    },
-    {
-        name: 'defaultValue',
-        desc: '设置初始取值。当 range 为 false 时，使用 number，否则用 [number, number]',
-        type: 'number | [number, number]',
-        default: '0 | [0, 0]'
-    },
-    {
-        name: 'disabled',
-        desc: '值为 true 时，滑块为禁用状态',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'dots',
-        desc: '是否只能拖拽到刻度上',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'getTooltipPopupContainer',
-        desc: 'Tooltip 渲染父节点，默认渲染到 body 上',
-        type: '(triggerNode) => HTMLElement',
-        default: '() => document.body'
-    },
-    {
-        name: 'included',
-        desc: 'marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'marks',
-        desc: '刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式',
-        type: 'object',
-        default: 'false'
-    },
-    {
-        name: 'toolTipTitle',
-        desc: `Button 禁用时提示文字 disabled 为true有效; Button.IconButton提示文字`,
-        type: '{ number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }',
-    },
-    {
-        name: 'max',
-        desc: '最大值',
-        type: `number`,
-        default: '100'
-    },
-    {
-        name: 'min',
-        desc: '最大值',
-        type: `number`,
-        default: '100'
-    },
-    {
-        name: 'max',
-        desc: '最小值',
-        type: `number`,
-        default: '0'
-    },
-    {
-        name: 'range',
-        desc: '双滑块模式',
-        type: `boolean | {draggableTrack?: boolean;}`,
-        default: 'false'
-    },
-    {
-        name: 'reverse',
-        desc: '反向坐标轴',
-        type: `boolean`,
-        default: 'false'
-    },
-    {
-        name: 'step',
-        desc: '步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分',
-        type: `number | null`,
-        default: '1'
-    },
-    {
-        name: 'tipFormatter',
-        desc: 'Slider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值，若为 null，则隐藏 Tooltip',
-        type: `value => ReactNode | null`,
-        default: '1'
-    },
-    {
-        name: 'tooltipPlacement',
-        desc: '设置 Tooltip 展示位置,可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom',
-        type: `string`,
-        default: 'top'
-    },
-    {
-        name: 'tooltipVisible',
-        desc: '值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时',
-        type: 'boolean',
-    },
-    {
-        name: 'vertical',
-        desc: '值为 true 时，Slider 为垂直方向',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'onAfterChange',
-        desc: '与 onmouseup 触发时机一致，把当前值作为参数传入',
-        type: '(value) => void'
-    },
-    {
-        name: 'onChange',
-        desc: '当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入',
-        type: '(value) => void'
-    }
-];
-export default apiData;

package/docs/view/slider/codeString.tsx

@@ -1,99 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/9 下午5:54
- * @description
- */
-export const basicSlider = `
-import Slider from '@para-ui/core/Slider';
-
-<Slider defaultValue={30}/>
-<Slider range defaultValue={[20, 50]}/>
-<Slider defaultValue={60} disabled={true}/>
-`;
-
-export const tipFormatter = `
-import Slider from '@para-ui/core/Slider';
-
-<Slider tipFormatter={(val?: number) => \`\${val}%\`}/>
-<Slider tipFormatter={null}/>
-`;
-
-export const sliderEvt = `
-import Slider from '@para-ui/core/Slider';
-
-const onChange = (value: number | number[]) => {
-    console.log('onChange: ', value);
-};
-
-const onAfterChange = (value: number | number[]) => {
-    console.log('onAfterChange: ', value);
-};
-
-<Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange}/>
-<Slider
-    range
-    step={10}
-    defaultValue={[20, 50]}
-    onChange={onChange}
-    onAfterChange={onAfterChange}
-/>
-`;
-
-export const sliderWithMarks = `
-import Slider from '@para-ui/core/Slider';
-
-const marks = {
-    0: '0°C',
-    26: '26°C',
-    37: '37°C',
-    100: {
-        style: {
-            color: '#f50',
-        },
-        label: <strong>100°C</strong>
-    }
-};
-
-<h4>included=true</h4>
-<Slider marks={marks} defaultValue={37} />
-<h4>included=false</h4>
-<Slider marks={marks} included={false} defaultValue={37} />
-<h4>marks & step</h4>
-<Slider marks={marks} step={10} defaultValue={37} />
-<h4>step=null</h4>
-<Slider marks={marks} step={null} defaultValue={37} />
-`;
-
-export const sliderVertical = `
-import Slider from '@para-ui/core/Slider';
-
-const marks = {
-    0: '0°C',
-    26: '26°C',
-    37: '37°C',
-    100: {
-        style: {
-            color: '#f50',
-        },
-        label: <strong>100°C</strong>
-    }
-};
-
-<div style={style}>
-    <Slider vertical defaultValue={30} />
-</div>
-<div style={style}>
-    <Slider vertical range step={10} defaultValue={[20, 50]} />
-</div>
-<div style={style}>
-    <Slider vertical range marks={marks} defaultValue={[26, 37]} />
-</div>
-`;
-
-export const draggableTrack = `
-import Slider from '@para-ui/core/Slider';
-
-<Slider range={{draggableTrack: true}} defaultValue={[20, 50]}/>
-`;
-
-

package/docs/view/slider/index.scss

@@ -1,11 +0,0 @@
-.paraui-slider-demo {
-  .code-box-demo {
-    .paraui-slider {
-      margin-bottom: 20px;
-    }
-
-    h4 {
-      padding: 15px 0;
-    }
-  }
-}

package/docs/view/slider/index.tsx

@@ -1,95 +0,0 @@
-import React, {FunctionComponent} from 'react';
-import CodeBox from '../../components/codeBox';
-import Slider from 'src/Slider';
-import APITable from '../../components/apiTable';
-import Title from '../../components/title';
-import {basicSlider, tipFormatter, sliderEvt, sliderWithMarks, sliderVertical, draggableTrack} from './codeString';
-import apiData from './api';
-import './index.scss';
-
-//slider
-const ParaSlider: FunctionComponent = () => {
-
-    const marks = {
-        0: '0°C',
-        26: '26°C',
-        37: '37°C',
-        100: {
-            style: {
-                color: '#f50',
-            },
-            label: <strong>100°C</strong>
-        }
-    };
-
-    const style = {
-        display: 'inline-block',
-        height: 300,
-        marginLeft: 70,
-    };
-
-    const onChange = (value: number | number[]) => {
-        console.log('onChange: ', value);
-    };
-
-    const onAfterChange = (value: number | number[]) => {
-        console.log('onAfterChange: ', value);
-    };
-
-    return (
-        <div className={'paraui-slider-demo'}>
-            <Title name={'滑动输入条'}>代码演示</Title>
-            <CodeBox code={basicSlider} title={'基本'} description={'基本滑动条。当range为true时，渲染为双滑块。' +
-            '当disabled为true时，滑块处于不可用状态'}>
-                <Slider defaultValue={30} tooltipVisible/>
-                <Slider range defaultValue={[20, 50]}/>
-                <Slider defaultValue={60} disabled={true}/>
-            </CodeBox>
-            <CodeBox code={tipFormatter} title={'自定义提示'} description={'使用 tipFormatter 可以格式化 Tooltip 的内容，' +
-            '设置 tipFormatter={null}，则隐藏 Tooltip'}>
-                <Slider tipFormatter={(val?: number) => `${val}%`}/>
-                <Slider tipFormatter={null}/>
-            </CodeBox>
-            <CodeBox code={sliderEvt} title={'事件'} description={'当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。' +
-            '在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。'}>
-                <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange}/>
-                <Slider
-                    range
-                    step={10}
-                    defaultValue={[20, 50]}
-                    onChange={onChange}
-                    onAfterChange={onAfterChange}
-                />
-            </CodeBox>
-            <CodeBox code={sliderWithMarks} title={'带标签的滑块'}
-                     description={'使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。' +
-                     '当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。'}>
-                <h4>included=true</h4>
-                <Slider marks={marks} defaultValue={37}/>
-                <h4>included=false</h4>
-                <Slider marks={marks} included={false} defaultValue={37}/>
-                <h4>marks & step</h4>
-                <Slider marks={marks} step={10} defaultValue={37}/>
-                <h4>step=null</h4>
-                <Slider marks={marks} step={null} defaultValue={37}/>
-            </CodeBox>
-            <CodeBox code={sliderVertical} title={'垂直'} description={'垂直方向的 Slider。'}>
-                <div style={style}>
-                    <Slider vertical defaultValue={30} tooltipVisible/>
-                </div>
-                <div style={style}>
-                    <Slider vertical range step={10} defaultValue={[20, 50]}/>
-                </div>
-                <div style={style}>
-                    <Slider vertical range marks={marks} defaultValue={[26, 37]}/>
-                </div>
-            </CodeBox>
-            <CodeBox code={draggableTrack} title={'范围可拖拽'} description={'可以设置 range.draggableTrack，使得范围刻度整体可拖拽。'}>
-                <Slider range={{draggableTrack: true}} defaultValue={[20, 50]}/>
-            </CodeBox>
-            <APITable data={apiData}/>
-        </div>
-    );
-};
-
-export default ParaSlider;

package/docs/view/stepper/api.tsx

@@ -1,49 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/10 下午4:38
- * @description stepper api
- */
-import {RowsData} from '../../components/apiTable';
-
-const apiData: RowsData = [
-    {
-        name: 'className',
-        desc: '类名',
-        type: 'string'
-    },
-    {
-        name: 'style',
-        desc: '样式',
-        type: 'React.CSSProperties'
-    },
-    {
-        name: 'mode',
-        desc: '步骤条模式 数字或图标模式',
-        type: 'number | icon',
-        default: 'number'
-    },
-    {
-        name: 'activeStep',
-        desc: '当前选中步骤',
-        type: 'number',
-        default: '0'
-    },
-    {
-        name: 'orientation',
-        desc: '步骤条水平或垂直,【垂直暂不支持】',
-        type: 'horizontal | vertical',
-        default: 'horizontal'
-    },
-    {
-        name: 'alternativeLabel',
-        desc: '标签位置 下方或右侧',
-        type: 'boolean',
-        default: 'true'
-    },
-    {
-        name: 'steps',
-        desc: 'marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列',
-        type: 'Array<string | { label: string, icon: ReactNode }>'
-    }
-];
-export default apiData;

package/docs/view/stepper/codeString.tsx

@@ -1,64 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/9 下午5:54
- * @description
- */
-export const basicStepper = `
-import Stepper from '@para-ui/core/Stepper';
-
-const steps = ['邮件验证', '密码重置', '完成重置'];
-<Stepper steps={steps}/>
-`;
-
-export const stepperWithIcon = `
-import Stepper from '@para-ui/core/Stepper';
-import Accelerate from "@para-ui/icons/Accelerate";
-import Unlock from "@para-ui/icons/Unlock";
-import StopCircle from "@para-ui/icons/StopCircle";
-
-const stepsWithIcon = [
-    {label: '邮件验证', icon: <Accelerate/>},
-    {label: '密码重置', icon: <Unlock/>},
-    {label: '完成重置', icon: <StopCircle/>}
-];
-<Stepper mode={'icon'} steps={stepsWithIcon} activeStep={1}/>
-`;
-
-export const changeStepper = `
-import Stepper from '@para-ui/core/Stepper';
-import Accelerate from "@para-ui/icons/Accelerate";
-import Unlock from "@para-ui/icons/Unlock";
-import StopCircle from "@para-ui/icons/StopCircle";
-import Button from "@para-ui/core/Button";
-
-const [activeStep, setActiveStep] = React.useState(0);
-
-const steps = ['邮件验证', '密码重置', '完成重置'];
-
-const stepsWithIcon = [
-    {label: '邮件验证', icon: <Accelerate/>},
-    {label: '密码重置', icon: <Unlock/>},
-    {label: '完成重置', icon: <StopCircle/>}
-];
-
-const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-};
-
-const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-};
-
-<Stepper steps={steps} activeStep={activeStep}/>
-<Stepper mode={'icon'} steps={stepsWithIcon} activeStep={activeStep}/>
-<div style={{textAlign: 'center'}}>
-    <Button disabled={activeStep === 0} onClick={handleBack} variant="outlined">
-        Back
-    </Button>
-    <Button onClick={handleNext} style={{marginLeft: '15px'}}>
-        {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-    </Button>
-</div>
-`;
-
-

package/docs/view/stepper/index.scss

@@ -1,3 +0,0 @@
-.paraui-stepper-demo {
-
-}

package/docs/view/stepper/index.tsx

@@ -1,57 +0,0 @@
-import React, {FunctionComponent} from 'react';
-import CodeBox from '../../components/codeBox';
-import Stepper from 'src/Stepper';
-import Button from 'src/Button';
-import APITable from '../../components/apiTable';
-import Title from '../../components/title';
-import {basicStepper, stepperWithIcon, changeStepper} from './codeString';
-import apiData from './api';
-import Accelerate from "@para-ui/icons/Accelerate";
-import Unlock from "@para-ui/icons/Unlock";
-import StopCircle from "@para-ui/icons/StopCircle";
-import './index.scss';
-
-//stepper
-const ParaStepper: FunctionComponent = () => {
-    const [activeStep, setActiveStep] = React.useState(0);
-    const steps = ['邮件验证', '密码重置', '完成重置'];
-    const stepsWithIcon = [
-        {label: '邮件验证', icon: <Accelerate/>},
-        {label: '密码重置', icon: <Unlock/>},
-        {label: '完成重置', icon: <StopCircle/>}
-    ];
-    const handleNext = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    };
-
-    const handleBack = () => {
-        setActiveStep((prevActiveStep) => prevActiveStep - 1);
-    };
-
-    return (
-        <div className={'paraui-stepper-demo'}>
-            <Title name={'步骤条'}>代码演示</Title>
-            <CodeBox code={basicStepper} title={'基本'} description={'数字步骤条'}>
-                <Stepper steps={steps}/>
-            </CodeBox>
-            <CodeBox code={stepperWithIcon} title={'带图标的步骤条'} description={'图标步骤条'}>
-                <Stepper mode={'icon'} steps={stepsWithIcon} activeStep={1}/>
-            </CodeBox>
-            <CodeBox code={changeStepper} title={'步骤切换'} description={'通常配合内容及按钮使用，表示一个流程的处理进度。'}>
-                <Stepper steps={steps} activeStep={activeStep}/>
-                <Stepper mode={'icon'} steps={stepsWithIcon} activeStep={activeStep}/>
-                <div style={{textAlign: 'center'}}>
-                    <Button disabled={activeStep === 0} onClick={handleBack} variant="outlined">
-                        Back
-                    </Button>
-                    <Button onClick={handleNext} style={{marginLeft: '15px'}}>
-                        {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-                    </Button>
-                </div>
-            </CodeBox>
-            <APITable data={apiData}/>
-        </div>
-    );
-};
-
-export default ParaStepper;

package/docs/view/switch/api.tsx

@@ -1,70 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/10 下午4:38
- * @description switch api
- */
-import {RowsData} from '../../components/apiTable';
-
-const apiData: RowsData = [
-    {
-        name: 'className',
-        desc: '类名',
-        type: 'string'
-    },
-    {
-        name: 'style',
-        desc: '样式',
-        type: 'React.CSSProperties'
-    },
-    {
-        name: 'checked',
-        desc: '当前是否选中',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'checkedChildren',
-        desc: '选中时的内容，【ui 赞不支持】',
-        type: 'ReactNode'
-    },
-    {
-        name: 'defaultChecked',
-        desc: '初始是否选中',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'disabled',
-        desc: '是否禁用',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'loading',
-        desc: '加载中的开关',
-        type: 'boolean',
-        default: 'false'
-    },
-    {
-        name: 'size',
-        desc: '开关大小，',
-        type: 'default | small，【small暂不支持】',
-        default: 'default'
-    },
-    {
-        name: 'unCheckedChildren',
-        desc: '非选中时的内容，【ui 赞不支持】',
-        type: 'ReactNode'
-    },
-    {
-        name: 'onChange',
-        desc: `变化时回调函数`,
-        type: '(checked: boolean, event: Event)=>void'
-    },
-    {
-        name: 'onClick',
-        desc: '点击时回调函数',
-        type: `(checked: boolean, event: Event)=>void`
-    }
-];
-export default apiData;

package/docs/view/switch/codeString.tsx

@@ -1,48 +0,0 @@
-/**
- * @author Hanz
- * @date 2022/2/9 下午5:54
- * @description
- */
-export const basicSwitch = `
-import Switch from '@para-ui/core/Switch';
-
-const onChange = (checked: boolean) => {
-    console.log(\`switch to \${checked}\`);
-};
-
-<Switch defaultChecked onChange={onChange}/>
-`;
-
-export const disabledSwitch = `
-import Switch from '@para-ui/core/Switch';
-
-<Switch disabled/>
-<br/>
-<br/>
-<Switch disabled defaultChecked/>
-`;
-
-export const switchWithLoading = `
-import Switch from '@para-ui/core/Switch';
-
-<Switch loading/>
-<br/>
-<br/>
-<Switch loading defaultChecked/>
-`;
-
-export const switchWithText = `
-import Switch from '@para-ui/core/Switch';
-
-<Switch defaultChecked label={'启用'}/>
-<Switch label={'禁用'}/>
-`;
-
-export const switchWithHelp = `
-import Switch from '@para-ui/core/Switch';
-
-<Switch defaultChecked label={'启用'} labelTooltip={{tooltip: '帮助提示'}}/>
-<Switch label={'禁用'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}/>
-`;
-
-

package/docs/view/switch/index.scss

@@ -1,16 +0,0 @@
-.paraui-switch-demo {
-  .code-box-demo {
-    .switch-with-text {
-      > span {
-        margin-right: 15px;
-
-        > span {
-          margin-right: 8px;
-          font-size: 14px;
-          font-weight: 400;
-          color: rgba(46, 55, 67, 0.70);
-        }
-      }
-    }
-  }
-}