@para-ui/core 2.1.32 → 2.1.35

package/docs/view/selectInput/codeString.tsx

@@ -0,0 +1,171 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicSelectInput = `
+import SelectInput from '@para-ui/core/SelectInput';
+
+const [valueCheck1, setValueCheck1] = useState<any>([]);
+const [valueRadio1, setValueRadio1] = useState<any>('');
+
+const changeRadio1 = (val: any, e: any) => {
+    setValueRadio1(val);
+}
+
+const changeCheck1 = (val: any, e: any) => {
+    setValueCheck1(val);
+}
+
+const list1: any[] = [
+    {
+        label: '选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1',
+        value: 1
+    },
+    {
+        label: 'casd234',
+        value: 'casd234'
+    },
+    {
+        label: 'casd434',
+        value: 'casd434'
+    },
+];
+
+<div className="paraui-select-input-demo-item">
+    <h3>单选</h3>
+    <SelectInput
+        label="下拉输入(超出不换行)(输入框在里)"
+        placeholder="请选择"
+        list={list1}
+        value={valueRadio1}
+        onChange={changeRadio1}
+        overLine={false}
+        searchModel={"outside"}
+    />
+    <SelectInput
+        label="下拉输入(超出换行)(输入框在里)"
+        placeholder="请选择"
+        list={list1}
+        value={valueRadio1}
+        onChange={changeRadio1}
+        overLine={true}
+        searchModel={"outside"}
+    />
+    <SelectInput
+        label="下拉输入(超出不换行)(输入框在外)"
+        placeholder="请选择"
+        list={list1}
+        value={valueRadio1}
+        onChange={changeRadio1}
+        overLine={false}
+        searchModel={"inside"}
+    />
+    <SelectInput
+        label="下拉输入(超出换行)(输入框在外)"
+        placeholder="请选择"
+        list={list1}
+        value={valueRadio1}
+        onChange={changeRadio1}
+        overLine={true}
+        searchModel={"inside"}
+    />
+</div>
+<div className="paraui-select-input-demo-item">
+    <h3>多选</h3>
+    <SelectInput
+        label="下拉输入(超出不换行)(输入框在里)(无效的overLine参数)"
+        placeholder="请选择"
+        list={list1}
+        value={valueCheck1}
+        onChange={changeCheck1}
+        multiple={true}
+        overLine={false}
+        searchModel={"outside"}
+    />
+    <SelectInput
+        label="下拉输入(超出换行)(输入框在里)"
+        placeholder="请选择"
+        list={list1}
+        value={valueCheck1}
+        onChange={changeCheck1}
+        multiple={true}
+        overLine={true}
+        searchModel={"outside"}
+    />
+    <SelectInput
+        label="下拉输入(超出不换行)(输入框在外)"
+        placeholder="请选择"
+        list={list1}
+        value={valueCheck1}
+        onChange={changeCheck1}
+        multiple={true}
+        overLine={false}
+        searchModel={"inside"}
+    />
+    <SelectInput
+        label="下拉输入(超出换行)(输入框在外)"
+        placeholder="请选择"
+        list={list1}
+        value={valueCheck1}
+        onChange={changeCheck1}
+        multiple={true}
+        overLine={true}
+        searchModel={"inside"}
+    />
+</div>
+`;
+
+export const inputSelectInput = `
+import SelectInput from '@para-ui/core/SelectInput';
+
+const [valueCheck1, setValueCheck1] = useState<any>([]);
+const [valueRadio1, setValueRadio1] = useState<any>('');
+
+const changeRadio1 = (val: any, e: any) => {
+    setValueRadio1(val);
+}
+
+const changeCheck1 = (val: any, e: any) => {
+    setValueCheck1(val);
+}
+
+const list1: any[] = [
+    {
+        label: '选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1',
+        value: 1
+    },
+    {
+        label: 'casd234',
+        value: 'casd234'
+    },
+    {
+        label: 'casd434',
+        value: 'casd434'
+    },
+];
+
+<div className="paraui-select-input-demo-item">
+    <h3>单选</h3>
+    <SelectInput
+        label="下拉输入"
+        placeholder="请选择"
+        list={list1}
+        value={valueRadio1}
+        onChange={changeRadio1}
+        showSelect={false}
+    />
+</div>
+<div className="paraui-select-input-demo-item">
+    <h3>多选</h3>
+    <SelectInput
+        label="下拉输入"
+        placeholder="请选择"
+        list={list1}
+        value={valueCheck1}
+        onChange={changeCheck1}
+        multiple={true}
+        showSelect={false}
+    />
+</div>
+`;

package/docs/view/selectInput/index.scss

@@ -0,0 +1,12 @@
+.paraui-select-input-demo {
+  .paraui-select-input-demo-item {
+    width: 45%;
+    display: inline-block;
+    margin-right: 5%;
+    vertical-align: top;
+
+    h3 {
+      margin-bottom: 10px;
+    }
+  }
+}

package/docs/view/selectInput/index.tsx

@@ -0,0 +1,167 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import SelectInput from 'src/SelectInput';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicSelectInput, inputSelectInput} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const list1: any[] = [
+    {
+        label: '选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1',
+        value: 1
+    },
+    {
+        label: 'casd234',
+        value: 'casd234'
+    },
+    {
+        label: 'casd434',
+        value: 'casd434'
+    },
+];
+
+const ParaSelect: FunctionComponent = () => {
+    const [valueCheck1, setValueCheck1] = useState<any>([]);
+    const [valueRadio1, setValueRadio1] = useState<any>('');
+
+    const changeRadio1 = (val: any, e: any) => {
+        setValueRadio1(val);
+    }
+
+    const changeCheck1 = (val: any, e: any) => {
+        setValueCheck1(val);
+    }
+
+    return (
+        <div className={'paraui-select-input-demo paraui-form'}>
+            <Title name={'下拉输入'}>代码演示</Title>
+            <CodeBox
+                code={inputSelectInput}
+                title={'输入框回车输入'}
+                description={<div>
+                    <p>showSelect=false, 变成输入框模式</p>
+                </div>}
+            >
+                <div className="paraui-select-input-demo-item">
+                    <h3>单选</h3>
+                    <SelectInput
+                        label="下拉输入"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueRadio1}
+                        onChange={changeRadio1}
+                        showSelect={false}
+                    />
+                </div>
+                <div className="paraui-select-input-demo-item">
+                    <h3>多选</h3>
+                    <SelectInput
+                        label="下拉输入"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueCheck1}
+                        onChange={changeCheck1}
+                        multiple={true}
+                        showSelect={false}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={basicSelectInput}
+                title={'多种模式'}
+                description={<div>
+                    <p>多选模式下, overLine参数无效, 会自动根据searchModel参数来控制是否超出换行</p>
+                    <p>注意: 其他禁用,必填,错误等模式,都与下拉框一致, 可参数Select组件用户</p>
+                </div>}
+            >
+                <div className="paraui-select-input-demo-item">
+                    <h3>单选</h3>
+                    <SelectInput
+                        label="下拉输入(超出不换行)(输入框在里)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueRadio1}
+                        onChange={changeRadio1}
+                        overLine={false}
+                        searchModel={"outside"}
+                    />
+                    <SelectInput
+                        label="下拉输入(超出换行)(输入框在里)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueRadio1}
+                        onChange={changeRadio1}
+                        overLine={true}
+                        searchModel={"outside"}
+                    />
+                    <SelectInput
+                        label="下拉输入(超出不换行)(输入框在外)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueRadio1}
+                        onChange={changeRadio1}
+                        overLine={false}
+                        searchModel={"inside"}
+                    />
+                    <SelectInput
+                        label="下拉输入(超出换行)(输入框在外)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueRadio1}
+                        onChange={changeRadio1}
+                        overLine={true}
+                        searchModel={"inside"}
+                    />
+                </div>
+                <div className="paraui-select-input-demo-item">
+                    <h3>多选</h3>
+                    <SelectInput
+                        label="下拉输入(超出不换行)(输入框在里)(无效的overLine参数)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueCheck1}
+                        onChange={changeCheck1}
+                        multiple={true}
+                        overLine={false}
+                        searchModel={"outside"}
+                    />
+                    <SelectInput
+                        label="下拉输入(超出换行)(输入框在里)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueCheck1}
+                        onChange={changeCheck1}
+                        multiple={true}
+                        overLine={true}
+                        searchModel={"outside"}
+                    />
+                    <SelectInput
+                        label="下拉输入(超出不换行)(输入框在外)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueCheck1}
+                        onChange={changeCheck1}
+                        multiple={true}
+                        overLine={false}
+                        searchModel={"inside"}
+                    />
+                    <SelectInput
+                        label="下拉输入(超出换行)(输入框在外)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueCheck1}
+                        onChange={changeCheck1}
+                        multiple={true}
+                        overLine={true}
+                        searchModel={"inside"}
+                    />
+                </div>
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaSelect;

package/docs/view/singleBox/api.tsx

@@ -0,0 +1,89 @@
+/**
+ * @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: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'labelSign',
+        desc: '标题提示',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placeholder',
+        desc: '提示语',
+        type: 'ReactNode'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: 'string'
+    },
+    {
+        name: 'value',
+        desc: '默认值 受控',
+        type: 'string'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'error',
+        desc: '是否错误模式',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'helperText',
+        desc: '错误文本',
+        type: 'ReactNode'
+    },
+    {
+        name: 'required',
+        desc: '是否必填',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'onChange',
+        desc: '改变值',
+        type: '(val: string[]) => void'
+    },
+    {
+        name: 'fetchSuggestions',
+        desc: '匹配',
+        type: '(val: string, cb: (data: any[]) => void) => void'
+    }
+];
+export default apiData;

package/docs/view/singleBox/codeString.tsx

@@ -0,0 +1,94 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicSingleBox = `
+import SingleBox from '@para-ui/core/SingleBox';
+
+const [val, setVal] = useState<any>([])
+
+const change = (str: any) => {
+    console.log(str)
+    setVal(str)
+}
+
+<SingleBox
+    label={'单值框'}
+    value={val}
+    onChange={change}
+/>
+<SingleBox
+    label={'单值框'}
+    disabled={true}
+/>
+<SingleBox
+    label={'单值框'}
+    disabled={true}
+    value={['para']}
+/>
+<SingleBox
+    label={'单值框'}
+    required={true}
+/>
+<SingleBox
+    label={'单值框'}
+    error={true}
+    helperText={'请输入'}
+/>
+<SingleBox
+    label={'单值框'}
+    labelTooltip={{tooltip: '帮助提示'}}
+/>
+<SingleBox
+    label={'单值框'}
+    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+/>
+`;
+
+export const sizeSingleBox = `
+import SingleBox from '@para-ui/core/SingleBox';
+
+<SingleBox
+    label={'单值框'}
+    size={"large"}
+/>
+<SingleBox
+    label={'单值框'}
+    size={"medium"}
+/>
+<SingleBox
+    label={'单值框'}
+    size={"small"}
+/>
+`;
+
+export const selectSingleBox = `
+import SingleBox from '@para-ui/core/SingleBox';
+
+const [val, setVal] = useState<any>([])
+
+const arr: any = ['嘻嘻', '2', '哈哈', '派拉软件', '123', '1123123'];
+
+const change = (str: any) => {
+    console.log(str)
+    setVal(str)
+}
+
+const fetchSuggestions = (val: string, cb: any) => {
+    console.log(val, 'fetchSuggestions')
+    const data: any[] = [];
+    for (let i = 0, l = arr.length; i < l; i++) {
+        const item = arr[i];
+        if (item.indexOf(val) !== -1) data.push(item);
+    }
+    cb(data);
+}
+
+<SingleBox
+    label={'单值框'}
+    value={val}
+    onChange={change}
+    fetchSuggestions={fetchSuggestions}
+/>
+`;

package/docs/view/singleBox/index.tsx

@@ -0,0 +1,111 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import SingleBox from 'src/SingleBox';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicSingleBox, sizeSingleBox, selectSingleBox} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const arr: any = ['嘻嘻', '2', '哈哈', '派拉软件', '123', '1123123'];
+
+const ParaSingleBox: FunctionComponent = () => {
+    const [val, setVal] = useState<any>([])
+    const [val1, setVal1] = useState<any>([])
+
+    const change = (str: any) => {
+        console.log(str)
+        setVal(str)
+    }
+
+    const change1 = (str: any) => {
+        console.log(str)
+        setVal1(str)
+    }
+
+    const fetchSuggestions = (val: string, cb: any) => {
+        console.log(val, 'fetchSuggestions')
+        const data: any[] = [];
+        for (let i = 0, l = arr.length; i < l; i++) {
+            const item = arr[i];
+            if (item.indexOf(val) !== -1) data.push(item);
+        }
+        cb(data);
+    }
+
+    return (
+        <div className={'paraui-single-box-demo paraui-form'}>
+            <Title name={'单值框'}>代码演示</Title>
+            <CodeBox
+                code={basicSingleBox}
+                title={'基本'}
+                description={'基本。'}
+            >
+                <SingleBox
+                    label={'单值框'}
+                    value={val}
+                    onChange={change}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    disabled={true}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    disabled={true}
+                    value={['para']}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    required={true}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    error={true}
+                    helperText={'请输入'}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    labelTooltip={{tooltip: '帮助提示'}}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}}
+                />
+            </CodeBox>
+            <CodeBox
+                code={sizeSingleBox}
+                title={'大小'}
+                description={'36px, 32px, 28px。'}
+            >
+                <SingleBox
+                    label={'单值框'}
+                    size={"large"}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    size={"medium"}
+                />
+                <SingleBox
+                    label={'单值框'}
+                    size={"small"}
+                />
+            </CodeBox>
+            <CodeBox
+                code={selectSingleBox}
+                title={'输入框模糊匹配'}
+                description={'输入框带下拉搜索。'}
+            >
+                <SingleBox
+                    label={'单值框'}
+                    value={val1}
+                    onChange={change1}
+                    fetchSuggestions={fetchSuggestions}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaSingleBox;