@para-ui/core 2.1.32 → 2.1.35

package/docs/view/search/index.tsx

@@ -0,0 +1,142 @@
+import React, {FunctionComponent, useState} from 'react';
+import SearchIcon from '@para-ui/icons/Search';
+import CodeBox from '../../components/codeBox';
+import Search from 'src/Search';
+import ButtonGroup from "src/ButtonGroup";
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicSearch, insideSearch, noBtnTextSearch, noBtnSearch, customSearch} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaSearch: FunctionComponent = () => {
+    const [value, setValue] = useState<string>('');
+    const [size, setSize] = useState<any>('large');
+
+    const clickBtnSize = (item: any) => {
+        setSize(item.value)
+    }
+
+    const change = (str: any) => {
+        console.log(str)
+        setValue(str)
+    }
+
+    // 点击右侧按钮
+    const onClickRightIcon = () => {
+        setValue('');
+        console.log('onClickRightIcon', value)
+    }
+
+    // 点击右侧按钮
+    const onClickRightIcon1 = () => {
+        console.log('onClickRightIcon', value)
+    }
+
+    const onClickBtn = (val: string) => {
+        console.log('onClickBtn', val)
+    }
+
+    return (
+        <div className={'paraui-search-demo'}>
+            <Title name={'搜索'}>代码演示</Title>
+            <CodeBox
+                code={basicSearch}
+                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>
+                <Search
+                    size={size}
+                    value={value}
+                    onChange={change}
+                    placeholder="请输入搜索内容"
+                    onClickRightIcon={onClickRightIcon}
+                    onClickBtn={onClickBtn}
+                />
+            </CodeBox>
+            <CodeBox
+                code={insideSearch}
+                title={'内置按钮'}
+                description={'内置按钮。'}
+            >
+                <Search
+                    size={size}
+                    btnType="inside"
+                    onChange={change}
+                    placeholder="请输入搜索内容"
+                    btnText="搜索"
+                    onClickRightIcon={onClickRightIcon1}
+                    onClickBtn={onClickBtn}
+                />
+            </CodeBox>
+            <CodeBox
+                code={noBtnTextSearch}
+                title={'无按钮文字'}
+                description={'无按钮文字。'}
+            >
+                <Search
+                    size={size}
+                    btnType="inside"
+                    onChange={change}
+                    placeholder="请输入搜索内容"
+                    onClickRightIcon={onClickRightIcon1}
+                    onClickBtn={onClickBtn}
+                />
+            </CodeBox>
+            <CodeBox
+                code={noBtnSearch}
+                title={'不带按钮'}
+                description={'不带按钮。'}
+            >
+                <Search
+                    size={size}
+                    showBtn={false}
+                    btnType="inside"
+                    onChange={change}
+                    placeholder="请输入搜索内容"
+                    onClickRightIcon={onClickRightIcon1}
+                    onClickBtn={onClickBtn}
+                />
+            </CodeBox>
+            <CodeBox
+                code={customSearch}
+                title={'自定义输入框图标'}
+                description={'自定义输入框图标。'}
+            >
+                <Search
+                    size={size}
+                    rightIconExist={true}
+                    showBtn={false}
+                    rightIcon={<SearchIcon />}
+                    btnType="inside"
+                    onChange={change}
+                    placeholder="请输入搜索内容"
+                    onClickRightIcon={onClickRightIcon1}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaSearch;

package/docs/view/select/api.tsx

@@ -0,0 +1,195 @@
+/**
+ * @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: 'emptyProps',
+        desc: '空状态属性',
+        type: 'EmptyProps',
+        default: '具体可以查看空状态组件用法'
+    },
+    {
+        name: 'showSelect',
+        desc: '是否显示下拉',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'allowClear',
+        desc: '是否显示清空按钮',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'input',
+        desc: '可输入回车',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        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: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        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: 'search',
+        desc: '是否有搜索',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'searchInputProps',
+        desc: '搜索框的props, input的所有属性',
+        type: '{ [name: string]: any }'
+    },
+    {
+        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'
+    },
+    {
+        name: 'onClear',
+        desc: '点击清空内容回调',
+        type: '() => void'
+    }
+];
+export default apiData;

package/docs/view/select/codeString.tsx

@@ -0,0 +1,379 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicSelect = `
+import Select from '@para-ui/core/Select';
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+
+const [size, setSize] = useState<any>('large');
+const [allowClear, setAllowClear] = useState<boolean>(false);
+
+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 clickBtnSize = (item: any) => {
+    setSize(item.value)
+}
+    
+<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}
+    />
+    <Select
+        label={'下拉框(超出换行)'}
+        placeholder={'请选择'}
+        list={list}
+        overLine={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框(必填)'}
+        placeholder={'请选择'}
+        list={list}
+        required={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框(禁用)'}
+        placeholder={'请选择'}
+        list={list}
+        disabled={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框(错误)'}
+        placeholder={'请选择'}
+        list={list}
+        error={true}
+        helperText={'请选择'}
+        size={size}
+    />
+    <Select
+        label={'下拉框'}
+        placeholder={'请选择'}
+        list={list}
+        size={size}
+        labelTooltip={{
+            tooltip: '帮助提示'
+        }}
+    />
+    <Select
+        label={'下拉框'}
+        placeholder={'请选择'}
+        list={list}
+        size={size}
+        labelTooltip={{
+            tooltip: '帮助提示',
+            tooltipType: 'line'
+        }}
+    />
+</div>
+<div className="paraui-select-demo-item">
+    <h3>多选</h3>
+    <Select
+        label={'下拉框'}
+        placeholder={'请选择'}
+        list={list}
+        multiple={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框(超出换行)'}
+        placeholder={'请选择'}
+        list={list}
+        overLine={true}
+        multiple={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框(必填)'}
+        placeholder={'请选择'}
+        list={list}
+        required={true}
+        multiple={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框(禁用)'}
+        placeholder={'请选择'}
+        list={list}
+        disabled={true}
+        multiple={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框(错误)'}
+        placeholder={'请选择'}
+        list={list}
+        error={true}
+        helperText={'请选择'}
+        multiple={true}
+        size={size}
+    />
+    <Select
+        label={'下拉框'}
+        placeholder={'请选择'}
+        list={list}
+        multiple={true}
+        size={size}
+        labelTooltip={{
+            tooltip: '帮助提示'
+        }}
+    />
+    <Select
+        label={'下拉框'}
+        placeholder={'请选择'}
+        list={list}
+        multiple={true}
+        size={size}
+        labelTooltip={{
+            tooltip: '帮助提示',
+            tooltipType: 'line'
+        }}
+    />
+</div>
+`;
+
+export const searchSelect = `
+import Select from '@para-ui/core/Select';
+
+const [valueCheck, setValueCheck] = useState<any>([]);
+const [valueRadio, setValueRadio] = useState<any>('');
+
+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 changeRadio = (val: any, e: any) => {
+    setValueRadio(val);
+}
+
+const changeCheck = (val: any, e: any) => {
+    setValueCheck(val);
+}
+
+const fetchSuggestions = (val: string, cb: Function) => {
+    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);
+    }
+    setTimeout(() => {
+        cb(data);
+    }, 1000)
+}
+
+<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>
+`;