@para-ui/core 2.1.32 → 2.1.35

package/docs/view/select/index.scss

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

package/docs/view/select/index.tsx

@@ -0,0 +1,370 @@
+import React, {FunctionComponent, useEffect, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import Select from 'src/Select';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicSelect, searchSelect} from './codeString';
+import apiData from './api';
+import ButtonGroup from "../../../src/ButtonGroup";
+import './index.scss';
+
+const list: any[] = [
+    {
+        label: '选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1选项一1',
+        value: 1
+    },
+    {
+        label: 'casd234gg___gg',
+        value: 'casd234gg___gg'
+    },
+    {
+        label: 'casd434',
+        value: 'casd434'
+    },
+    {
+        label: '选项三3',
+        value: '选项三3',
+        children: [
+            {
+                label: '选项三3-1',
+                value: '选项三3-1',
+            },
+            {
+                label: '选项三3-2',
+                value: '选项三3-2',
+            },
+            {
+                label: '选项三3-3',
+                value: '选项三3-3',
+            }
+        ]
+    },
+    {
+        label: '选项三4',
+        value: '选项三4',
+        children: [
+            {
+                label: '选项三4-1',
+                value: '选项三4-1',
+            },
+            {
+                label: '选项三4-2',
+                value: '选项三4-2',
+            },
+            {
+                label: '选项三4-3',
+                value: '选项三4-3',
+            }
+        ]
+    }
+];
+
+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 [valueCheck, setValueCheck] = useState<any>([]);
+    const [valueRadio, setValueRadio] = useState<any>('');
+    const [size, setSize] = useState<any>('large');
+    const [allowClear, setAllowClear] = useState<boolean>(false);
+    const [constData] = useState<any>({});
+
+    useEffect(() => {
+        return () => {
+            clearTimeout(constData.timer);
+        }
+    }, [])
+
+    const clickBtnClean = (item: any) => {
+        setAllowClear(item.value === 'true' ? true : false);
+    }
+
+    const clickBtnSize = (item: any) => {
+        setSize(item.value)
+    }
+
+    const changeRadio = (val: any, e: any) => {
+        setValueRadio(val);
+    }
+
+    const changeCheck = (val: any, e: any) => {
+        setValueCheck(val);
+    }
+
+    const fetchSuggestions = (val: string, cb: Function) => {
+        clearTimeout(constData.timer);
+        const data: any[] = [];
+        for (let i = 0, l = list1.length; i < l; i++) {
+            const item = list1[i];
+            if ((item.value.toString()).indexOf(val) !== -1) data.push(item);
+        }
+        constData.timer = setTimeout(() => {
+            cb(data);
+        }, 1000)
+    }
+
+    return (
+        <div className={'paraui-select-demo paraui-form'}>
+            <Title name={'下拉框'}>代码演示</Title>
+            <CodeBox
+                code={basicSelect}
+                title={'基本'}
+                description={'最简单的用法。'}
+            >
+                <div style={{marginBottom: '20px'}}>
+                    <ButtonGroup
+                        mode={'text'}
+                        onClick={clickBtnSize}
+                        data={[
+                            {
+                                text: '小(small)',
+                                value: 'small'
+                            },
+                            {
+                                text: '中(medium)',
+                                value: 'medium'
+                            },
+                            {
+                                text: '大(large)',
+                                value: 'large'
+                            },
+                        ]}
+                    />
+                </div>
+                <div style={{marginBottom: '20px'}}>
+                    <ButtonGroup
+                        mode={'text'}
+                        onClick={clickBtnClean}
+                        data={[
+                            {
+                                text: '清空',
+                                value: 'true'
+                            },
+                            {
+                                text: '无清空',
+                                value: 'false'
+                            }
+                        ]}
+                    />
+                </div>
+                <div className="paraui-select-demo-item">
+                    <h3>单选</h3>
+                    <Select
+                        label={'下拉框'}
+                        placeholder={'请选择'}
+                        list={list}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(超出换行)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        overLine={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(必填)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        required={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(禁用)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        disabled={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(错误)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        error={true}
+                        helperText={'请选择'}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框'}
+                        placeholder={'请选择'}
+                        list={list}
+                        size={size}
+                        labelTooltip={{
+                            tooltip: '帮助提示'
+                        }}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框'}
+                        placeholder={'请选择'}
+                        list={list}
+                        size={size}
+                        labelTooltip={{
+                            tooltip: '帮助提示',
+                            tooltipType: 'line'
+                        }}
+                        allowClear={allowClear}
+                    />
+                </div>
+                <div className="paraui-select-demo-item">
+                    <h3>多选</h3>
+                    <Select
+                        label={'下拉框'}
+                        placeholder={'请选择'}
+                        list={list}
+                        multiple={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(超出换行)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        overLine={true}
+                        multiple={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(必填)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        required={true}
+                        multiple={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(禁用)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        disabled={true}
+                        multiple={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框(错误)'}
+                        placeholder={'请选择'}
+                        list={list}
+                        error={true}
+                        helperText={'请选择'}
+                        multiple={true}
+                        size={size}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框'}
+                        placeholder={'请选择'}
+                        list={list}
+                        multiple={true}
+                        size={size}
+                        labelTooltip={{
+                            tooltip: '帮助提示'
+                        }}
+                        allowClear={allowClear}
+                    />
+                    <Select
+                        label={'下拉框'}
+                        placeholder={'请选择'}
+                        list={list}
+                        multiple={true}
+                        size={size}
+                        labelTooltip={{
+                            tooltip: '帮助提示',
+                            tooltipType: 'line'
+                        }}
+                        allowClear={allowClear}
+                    />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={searchSelect}
+                title={'搜索'}
+                description={'下拉框带搜索,默认搜索,通过label筛选。也可以通过fetchSuggestions参数自定义筛选,立即返回没有loading,延迟返回则会有loading状态。'}
+            >
+                <div className="paraui-select-demo-item">
+                    <h3>单选</h3>
+                    <Select
+                        label="下拉框(搜索框在下拉里面)"
+                        placeholder="请选择"
+                        list={list}
+                        value={valueRadio}
+                        onChange={changeRadio}
+                        search={true}
+                    />
+                    <Select
+                        label="下拉框(搜索框在文本框里面)"
+                        placeholder="请选择"
+                        list={list}
+                        value={valueRadio}
+                        onChange={changeRadio}
+                        search={true}
+                        searchModel={"outside"}
+                    />
+                    <Select
+                        label="下拉框(搜索框在下拉里面)(自定义)"
+                        placeholder="请选择"
+                        list={list1}
+                        value={valueRadio}
+                        onChange={changeRadio}
+                        search={true}
+                        fetchSuggestions={fetchSuggestions}
+                    />
+                </div>
+                <div className="paraui-select-demo-item">
+                    <h3>多选</h3>
+                    <Select
+                        label="下拉框(搜索框在下拉里面)"
+                        placeholder="请选择"
+                        list={list}
+                        value={valueCheck}
+                        onChange={changeCheck}
+                        search={true}
+                        multiple={true}
+                    />
+                    <Select
+                        label="下拉框(搜索框在文本框里面,默认超出换行)"
+                        placeholder="请选择"
+                        list={list}
+                        value={valueCheck}
+                        onChange={changeCheck}
+                        search={true}
+                        searchModel={"outside"}
+                        multiple={true}
+                    />
+                    <Select
+                        label="下拉框(搜索框在下拉里面)(自定义)"
+                        placeholder="请选择"
+                        list={list}
+                        value={valueCheck}
+                        onChange={changeCheck}
+                        search={true}
+                        multiple={true}
+                        fetchSuggestions={fetchSuggestions}
+                    />
+                </div>
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaSelect;

package/docs/view/selectInput/api.tsx

@@ -0,0 +1,161 @@
+/**
+ * @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: 'searchInputProps',
+        desc: '搜索框的props, input的所有属性',
+        type: '{ [name: string]: any }'
+    },
+    {
+        name: 'showSelect',
+        desc: '是否显示下拉',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'size',
+        desc: '尺寸',
+        type: 'small | medium | large',
+        default: 'large'
+    },
+    {
+        name: 'labelMode',
+        desc: '标题在外,还是在内',
+        type: 'outside | inside',
+        default: 'outside'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelSign',
+        desc: '标题提示',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placeholder',
+        desc: '提示语',
+        type: 'ReactNode'
+    },
+    {
+        name: 'searchPlaceholder',
+        desc: '搜索提示语',
+        type: 'string'
+    },
+    {
+        name: 'disabled',
+        desc: '是否禁用,any[]禁用部分',
+        type: 'boolean | any[]'
+    },
+    {
+        name: 'multiple',
+        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: 'list',
+        desc: '下拉选项 {label: ReactNode, value: any, children: any[]}, 可以是单值数组,也可以是对象数组',
+        type: 'any[]'
+    },
+    {
+        name: 'showName',
+        desc: '显示名字段',
+        type: 'string',
+        default: 'label'
+    },
+    {
+        name: 'showValue',
+        desc: '取值字段',
+        type: 'string',
+        default: 'value'
+    },
+    {
+        name: 'childrenName',
+        desc: '下级字段',
+        type: 'string',
+        default: 'children'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: 'any'
+    },
+    {
+        name: 'value',
+        desc: '选中值 多选时为数组 单选单值 受控',
+        type: 'any'
+    },
+    {
+        name: 'overLine',
+        desc: '超出换行',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'searchModel',
+        desc: '搜索模块',
+        type: 'outside | inside',
+        default: 'inside'
+    },
+    {
+        name: 'selectPopoverClassName',
+        desc: '下拉框className',
+        type: 'string'
+    },
+    {
+        name: 'morePopoverClassName',
+        desc: '更多className',
+        type: 'string'
+    },
+    {
+        name: 'fetchSuggestions',
+        desc: '返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它',
+        type: '(val: string, cb: (data: any[]) => void) => void'
+    },
+    {
+        name: 'onChange',
+        desc: '改变值',
+        type: '(val: any) => void'
+    },
+    {
+        name: 'onEnterInput',
+        desc: '搜索框输入框回车事件',
+        type: '(val: string) => void'
+    }
+];
+export default apiData;