@para-ui/core 2.1.32 → 2.1.35

package/docs/view/inputLang/codeString.tsx

@@ -0,0 +1,66 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicInputLang = `
+import InputLang from '@para-ui/core/InputLang';
+
+<InputLang
+    label={'国际化'}
+/>
+<InputLang
+    label={'国际化'}
+    required={true}
+/>
+<InputLang
+    label={'国际化'}
+    disabled={true}
+/>
+<InputLang
+    label={'国际化'}
+    error={true}
+    helperText={'请输入'}
+/>
+<InputLang
+    label={'国际化'}
+    labelTooltip={{tooltip: '帮助提示'}}
+/>
+<InputLang
+    label={'国际化'}
+    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+/>
+`;
+
+export const sizeInputLang = `
+import InputLang from '@para-ui/core/InputLang';
+
+<InputLang
+    label={'国际化(大)'}
+    size={"large"}
+/>
+<InputLang
+    label={'国际化(中)'}
+    size={"medium"}
+/>
+<InputLang
+    label={'国际化(小)'}
+    size={"small"}
+/>
+`;
+
+export const customInputLang = `
+import InputLang from '@para-ui/core/InputLang';
+const [val, setValue] = useState<any>({zh: '输入框'})
+
+const change = (val: any) => {
+    setValue(val)
+}
+
+<InputLang
+    value={val}
+    label={'国际化'}
+    langList={['zh', 'en', 'fr']}
+    onChange={change}
+/>
+`;

package/docs/view/inputLang/index.tsx

@@ -0,0 +1,85 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import InputLang from 'src/InputLang';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicInputLang, customInputLang, sizeInputLang} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaInputLang: FunctionComponent = () => {
+    const [val, setValue] = useState<any>({zh: '输入框'})
+
+    const change = (val: any) => {
+        setValue(val)
+    }
+
+    return (
+        <div className={'paraui-input-lang-demo paraui-form'}>
+            <Title name={'国际化输入框'}>代码演示</Title>
+            <CodeBox
+                code={basicInputLang}
+                title={'基本'}
+                description={'默认语言列表有中文跟英文。'}
+            >
+                <InputLang
+                    label={'国际化'}
+                />
+                <InputLang
+                    label={'国际化'}
+                    required={true}
+                />
+                <InputLang
+                    label={'国际化'}
+                    disabled={true}
+                />
+                <InputLang
+                    label={'国际化'}
+                    error={true}
+                    helperText={'请输入'}
+                />
+                <InputLang
+                    label={'国际化'}
+                    labelTooltip={{tooltip: '帮助提示'}}
+                />
+                <InputLang
+                    label={'国际化'}
+                    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+                />
+            </CodeBox>
+            <CodeBox
+                code={sizeInputLang}
+                title={'大小'}
+                description={'大小。'}
+            >
+                <InputLang
+                    label={'国际化(大)'}
+                    size={"large"}
+                />
+                <InputLang
+                    label={'国际化(中)'}
+                    size={"medium"}
+                />
+                <InputLang
+                    label={'国际化(小)'}
+                    size={"small"}
+                />
+            </CodeBox>
+            <CodeBox
+                code={customInputLang}
+                title={'自定义语言列表'}
+                description={'自定义语言列表, langList 下拉选项。'}
+            >
+                <InputLang
+                    value={val}
+                    label={'国际化'}
+                    langList={['zh', 'en', 'fr']}
+                    onChange={change}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaInputLang;

package/docs/view/inputNumber/api.tsx

@@ -0,0 +1,169 @@
+/**
+ * @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: 'size',
+        desc: '控件大小',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'labelMode',
+        desc: '标题在外,还是在内',
+        type: 'outside | inside',
+        default: 'outside'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'labelSign',
+        desc: '标题提示',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placeholder',
+        desc: '提示语',
+        type: 'ReactNode'
+    },
+    {
+        name: 'btnMode',
+        desc: '按钮模式 左右/上下/无',
+        type: 'lr | tb | none'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabledAdd',
+        desc: '禁用加',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'disabledReduce',
+        desc: '禁用减',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'required',
+        desc: '是否必填',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'error',
+        desc: '是否显示错误',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'helperText',
+        desc: '错误提示',
+        type: 'ReactNode'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: 'number | null'
+    },
+    {
+        name: 'value',
+        desc: '默认值 受控',
+        type: 'number | null'
+    },
+    {
+        name: 'step',
+        desc: '间隔',
+        type: 'number'
+    },
+    {
+        name: 'max',
+        desc: '最大值',
+        type: 'number'
+    },
+    {
+        name: 'min',
+        desc: '最小值',
+        type: 'number'
+    },
+    {
+        name: 'keyboard',
+        desc: '是否启用键盘快捷行为',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'readOnly',
+        desc: '只读',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'formatter',
+        desc: '指定输入框展示值的格式',
+        type: '(value: number | string, info: {\n' +
+            '        userTyping: boolean;\n' +
+            '        input: string;\n' +
+            '    }) => string'
+    },
+    {
+        name: 'parser',
+        desc: '指定从 formatter 里转换回数字的方式，和 formatter 搭配使用',
+        type: '(displayValue: string) => number'
+    },
+    {
+        name: 'autoFocus',
+        desc: '是否得到焦点',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'onChange',
+        desc: '改变输入框',
+        type: '(value: number | null) => void'
+    },
+    {
+        name: 'onEnter',
+        desc: '回车事件',
+        type: '(event: React.KeyboardEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onBlur',
+        desc: '失去焦点',
+        type: '(event: React.FocusEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onFocus',
+        desc: '得到焦点',
+        type: '(event: React.FocusEvent<HTMLInputElement>) => void'
+    }
+];
+
+export default apiData;

package/docs/view/inputNumber/codeString.tsx

@@ -0,0 +1,129 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicInputNumber = `
+import InputNumber from '@para-ui/core/InputNumber';
+
+const change = (val: any) => {
+    console.log(val);
+    setVal(val);
+}
+
+<InputNumber
+    label={'数字输入框(上下加减)'}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(左右加减)'}
+    btnMode={"lr"}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(无按钮)'}
+    btnMode={"none"}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(必填)'}
+    required={true}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(禁用)'}
+    disabled={true}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(禁用加)'}
+    disabledAdd={true}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(禁用减)'}
+    disabledReduce={true}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(必填)'}
+    required={true}
+    onChange={change}
+    error={true}
+    helperText={'请输入'}
+/>
+<InputNumber
+    label={'数字输入框'}
+    onChange={change}
+    labelTooltip={{tooltip: '帮助提示'}}
+/>
+<InputNumber
+    label={'数字输入框'}
+    onChange={change}
+    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+/>
+`;
+
+export const sizeInputNumber = `
+import InputNumber from '@para-ui/core/InputNumber';
+
+const change = (val: any) => {
+    console.log(val);
+    setVal(val);
+}
+
+<InputNumber
+    label={'数字输入框(大)'}
+    size={"large"}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(中)'}
+    size={"medium"}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(小)'}
+    size={"small"}
+    onChange={change}
+/>
+`;
+
+export const limitInputNumber = `
+import InputNumber from '@para-ui/core/InputNumber';
+
+const change = (val: any) => {
+    console.log(val);
+    setVal(val);
+}
+
+const change1 = (val: any) => {
+    console.log(val);
+    setVal1(val);
+}
+
+const change2 = (val: any) => {
+    console.log(val);
+    setVal2(val);
+}
+
+<InputNumber
+    label={'数字输入框(最大)'}
+    value={val}
+    max={10}
+    onChange={change}
+/>
+<InputNumber
+    label={'数字输入框(最小)'}
+    value={val1}
+    min={1}
+    onChange={change1}
+/>
+<InputNumber
+    label={'数字输入框(最大最小)'}
+    value={val2}
+    min={1}
+    max={10}
+    onChange={change2}
+/>
+`;

package/docs/view/inputNumber/index.tsx

@@ -0,0 +1,141 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import InputNumber from 'src/InputNumber';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicInputNumber, limitInputNumber, sizeInputNumber} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaInputNumber: FunctionComponent = () => {
+    const [val, setVal] = useState<number>(15);
+    const [val1, setVal1] = useState<number>();
+    const [val2, setVal2] = useState<number>();
+
+    const change = (val: any) => {
+        console.log(val);
+        setVal(val);
+    }
+
+    const change1 = (val: any) => {
+        console.log(val, 'change1');
+        setVal1(val);
+    }
+
+    const change2 = (val: any) => {
+        console.log(val);
+        setVal2(val);
+    }
+
+    return (
+        <div className={'paraui-input-number-demo paraui-form'}>
+            <Title name={'数字输入框'}>代码演示</Title>
+            <CodeBox
+                code={basicInputNumber}
+                title={'基本'}
+                description={'基本。'}
+            >
+                <InputNumber
+                    label={'数字输入框(上下加减)'}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(左右加减)'}
+                    btnMode={"lr"}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(无按钮)'}
+                    btnMode={"none"}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(必填)'}
+                    required={true}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(禁用)'}
+                    disabled={true}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(禁用加)'}
+                    disabledAdd={true}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(禁用减)'}
+                    disabledReduce={true}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(必填)'}
+                    required={true}
+                    onChange={change}
+                    error={true}
+                    helperText={'请输入'}
+                />
+                <InputNumber
+                    label={'数字输入框'}
+                    onChange={change}
+                    labelTooltip={{tooltip: '帮助提示'}}
+                />
+                <InputNumber
+                    label={'数字输入框'}
+                    onChange={change}
+                    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+                />
+            </CodeBox>
+            <CodeBox
+                code={sizeInputNumber}
+                title={'尺寸'}
+                description={'尺寸。'}
+            >
+                <InputNumber
+                    label={'数字输入框(大)'}
+                    size={"large"}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(中)'}
+                    size={"medium"}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(小)'}
+                    size={"small"}
+                    onChange={change}
+                />
+            </CodeBox>
+            <CodeBox
+                code={limitInputNumber}
+                title={'最大最小限制'}
+                description={'最大最小限制。'}
+            >
+                <InputNumber
+                    label={'数字输入框(最大)'}
+                    value={val}
+                    max={10}
+                    onChange={change}
+                />
+                <InputNumber
+                    label={'数字输入框(最小)'}
+                    value={val1}
+                    min={1}
+                    onChange={change1}
+                />
+                <InputNumber
+                    label={'数字输入框(最大最小)'}
+                    value={val2}
+                    min={1}
+                    max={10}
+                    onChange={change2}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaInputNumber;

package/docs/view/label/api.tsx

@@ -0,0 +1,63 @@
+/**
+ * @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: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'required',
+        desc: '是否必填',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'labelSign',
+        desc: '标题提示',
+        type: 'ReactNode'
+    },
+    {
+        name: 'tooltip',
+        desc: '配置提示信息',
+        type: 'ReactNode'
+    },
+    {
+        name: 'tooltipType',
+        desc: '提示类型 图标 / 线',
+        type: 'line | icon'
+    },
+    {
+        name: 'tooltipIcon',
+        desc: '提示信息icon',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placement',
+        desc: '提示定位方向',
+        type: 'top-start | bottom-end | bottom-start | bottom | left-end | left-start | left | right-end | right-start | right | top-end | top',
+        default: '图标默认(bottom-start), 下划线默认(bottom)'
+    },
+    {
+        name: 'arrow',
+        desc: '提示箭头',
+        type: 'boolean',
+        default: 'false'
+    }
+];
+export default apiData;