@para-ui/core 2.1.32 → 2.1.35

package/docs/view/radio/codeString.tsx

@@ -0,0 +1,136 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicRadio = `
+import Radio from '@para-ui/core/Radio';
+
+<Radio label={'默认'} />
+<Radio label={'选中'} checked={true} />
+<Radio label={'禁用'} disabled={true} />
+<Radio label={'选中禁用'} disabled={true} checked={true} />
+<br />
+<br />
+<Radio label={'默认'} labelTooltip={{tooltip: '帮助提示'}} />
+<Radio label={'选中'} checked={true} labelTooltip={{tooltip: '帮助提示'}} />
+<Radio label={'禁用'} disabled={true} labelTooltip={{tooltip: '帮助提示'}} />
+<Radio label={'选中禁用'} disabled={true} checked={true} labelTooltip={{tooltip: '帮助提示'}} />
+<br />
+<br />
+<Radio label={'默认'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+<Radio label={'选中'} checked={true} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+<Radio label={'禁用'} disabled={true} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+<Radio label={'选中禁用'} disabled={true} checked={true}
+    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+<br />
+<br />
+<Radio label={'超出换行设置宽度'} style={{width: '100px'}} />
+<Radio label={'超出换行设置宽度'} />
+`;
+
+export const basicRadioGroup = `
+import RadioGroup, {ListProps} from '@para-ui/core/RadioGroup';
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+
+const [value, setValue] = useState<any>('1');
+const [size, setSize] = useState<any>('large');
+
+const list: ListProps[] = [
+    {
+        label: '选项1',
+        name: '1'
+    },
+    {
+        label: '选项2',
+        name: '2'
+    },
+    {
+        label: '选项3',
+        name: '3'
+    }
+];
+
+const clickBtnSize = (item: any) => {
+    setSize(item.value)
+}
+
+const onChange = (val: any) => {
+    setValue(val);
+}
+
+<div style={{marginBottom: '20px'}}>
+    <ButtonGroup
+        mode={'text'}
+        onClick={clickBtnSize}
+        data={[
+            {
+                text: '小(small)',
+                value: 'small'
+            },
+            {
+                text: '中(medium)',
+                value: 'medium'
+            },
+            {
+                text: '大(large)',
+                value: 'large'
+            },
+        ]}
+    />
+</div>
+
+<RadioGroup
+    size={size}
+    label={'单选框组'}
+    list={list}
+    onChange={onChange}
+    value={value}
+/>
+<RadioGroup
+    size={size}
+    required={true}
+    label={'单选框组(必填)'}
+    list={list}
+    onChange={onChange}
+    value={value}
+/>
+<RadioGroup
+    size={size}
+    label={'单选框组(错误)'}
+    error={true}
+    helperText={'请选择'}
+    list={list}
+    onChange={onChange}
+    value={value}
+/>
+<RadioGroup
+    row={false}
+    size={size}
+    label={'单选框组(竖向)'}
+    list={list}
+    onChange={onChange}
+    value={value}
+/>
+<RadioGroup
+    size={size}
+    label={'单选框组'}
+    list={list}
+    onChange={onChange}
+    value={value}
+    labelTooltip={{
+        tooltip: '帮组提示'
+    }}
+/>
+<RadioGroup
+    size={size}
+    label={'单选框组'}
+    list={list}
+    onChange={onChange}
+    value={value}
+    labelTooltip={{
+        tooltip: '帮组提示',
+        tooltipType: 'line'
+    }}
+/>
+`;

package/docs/view/radio/index.tsx

@@ -0,0 +1,154 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import Radio from 'src/Radio';
+import RadioGroup, {RadioListProps} from 'src/RadioGroup';
+import ButtonGroup from 'src/ButtonGroup';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicRadio, basicRadioGroup} from './codeString';
+import apiData, {apiDataGroup} from './api';
+import './index.scss';
+
+const list: RadioListProps[] = [
+    {
+        label: '选项1',
+        name: '1',
+    },
+    {
+        label: '选项2',
+        name: '2'
+    },
+    {
+        label: '选项3',
+        name: '3'
+    }
+];
+
+const ParaRadio: FunctionComponent = () => {
+    const [value, setValue] = useState<any>('1');
+    const [size, setSize] = useState<any>('large');
+
+    const clickBtnSize = (item: any) => {
+        setSize(item.value)
+    }
+
+    const onChange = (val: any) => {
+        setValue(val);
+    }
+
+    return (
+        <div className={'paraui-radio-demo paraui-form'}>
+            <Title name={'单选框'}>代码演示</Title>
+            <CodeBox
+                code={basicRadio}
+                title={'基本'}
+                description={'最简单的用法。'}
+            >
+                <Radio label={'默认'} />
+                <Radio label={'选中'} checked={true} />
+                <Radio label={'禁用'} disabled={true} />
+                <Radio label={'选中禁用'} disabled={true} checked={true} />
+                <br />
+                <br />
+                <Radio label={'默认'} labelTooltip={{tooltip: '帮助提示'}} />
+                <Radio label={'选中'} checked={true} labelTooltip={{tooltip: '帮助提示'}} />
+                <Radio label={'禁用'} disabled={true} labelTooltip={{tooltip: '帮助提示'}} />
+                <Radio label={'选中禁用'} disabled={true} checked={true} labelTooltip={{tooltip: '帮助提示'}} />
+                <br />
+                <br />
+                <Radio label={'默认'} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+                <Radio label={'选中'} checked={true} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+                <Radio label={'禁用'} disabled={true} labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+                <Radio label={'选中禁用'} disabled={true} checked={true}
+                    labelTooltip={{tooltip: '帮助提示', tooltipType: 'line'}} />
+                <br />
+                <br />
+                <Radio label={'超出换行设置宽度'} style={{width: '100px'}} />
+                <Radio label={'超出换行设置宽度'} />
+            </CodeBox>
+            <CodeBox
+                code={basicRadioGroup}
+                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>
+                <RadioGroup
+                    size={size}
+                    label={'单选框组'}
+                    list={list}
+                    onChange={onChange}
+                    value={value}
+                />
+                <RadioGroup
+                    size={size}
+                    required={true}
+                    label={'单选框组(必填)'}
+                    list={list}
+                    onChange={onChange}
+                    value={value}
+                />
+                <RadioGroup
+                    size={size}
+                    label={'单选框组(错误)'}
+                    error={true}
+                    helperText={'请选择'}
+                    list={list}
+                    onChange={onChange}
+                    value={value}
+                />
+                <RadioGroup
+                    row={false}
+                    size={size}
+                    label={'单选框组(竖向)'}
+                    list={list}
+                    onChange={onChange}
+                    value={value}
+                />
+                <RadioGroup
+                    size={size}
+                    label={'单选框组'}
+                    list={list}
+                    onChange={onChange}
+                    value={value}
+                    labelTooltip={{
+                        tooltip: '帮组提示'
+                    }}
+                />
+                <RadioGroup
+                    size={size}
+                    label={'单选框组'}
+                    list={list}
+                    onChange={onChange}
+                    value={value}
+                    labelTooltip={{
+                        tooltip: '帮组提示',
+                        tooltipType: 'line'
+                    }}
+                />
+            </CodeBox>
+            <APITable data={apiData} subTitle={'RadioProps'} />
+            <APITable data={apiDataGroup} subTitle={'RadioGroup'} showApi={false} />
+        </div>
+    );
+};
+
+export default ParaRadio;

package/docs/view/search/api.tsx

@@ -0,0 +1,132 @@
+/**
+ * @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: 'placeholder',
+        desc: '提示语',
+        type: 'ReactNode'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: 'string'
+    },
+    {
+        name: 'value',
+        desc: '默认值 受控',
+        type: 'string'
+    },
+    {
+        name: 'showBtn',
+        desc: '是否显示按钮',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'btnType',
+        desc: '按钮位置 分离/内置',
+        type: 'outside | inside',
+        default: 'outside'
+    },
+    {
+        name: 'btnText',
+        desc: '按钮文本',
+        type: 'ReactNode'
+    },
+    {
+        name: 'btnText',
+        desc: '按钮文本',
+        type: 'ReactNode'
+    },
+    {
+        name: 'rightIcon',
+        desc: '输入框右侧图标',
+        type: 'ReactNode'
+    },
+    {
+        name: 'rightIconExist',
+        desc: '一直存在右侧图标',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'showRightIcon',
+        desc: '是否显示输入框右侧图标',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'allowClear',
+        desc: '是否显示清空按钮',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'onChange',
+        desc: '改变值',
+        type: '(val: string, event: React.ChangeEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onBlur',
+        desc: '失去焦点',
+        type: '(event: React.FocusEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onFocus',
+        desc: '得到焦点',
+        type: '(event: React.FocusEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onKeydown',
+        desc: '键盘按下',
+        type: '(event: React.KeyboardEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onKeyUp',
+        desc: '键盘抬起',
+        type: '(event: React.KeyboardEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onClickBtn',
+        desc: '点击按钮',
+        type: '(val: string) => void'
+    },
+    {
+        name: 'onClickRightIcon',
+        desc: '点击输入框右侧按钮',
+        type: '(val: string) => void'
+    },
+    {
+        name: 'onEnter',
+        desc: '回车事件',
+        type: '(event: React.KeyboardEvent<HTMLInputElement>) => void'
+    },
+    {
+        name: 'onClear',
+        desc: '点击清空内容回调',
+        type: '() => void'
+    }
+];
+
+export default apiData;

package/docs/view/search/codeString.tsx

@@ -0,0 +1,164 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicSearch = `
+import Search from '@para-ui/core/Search';
+import ButtonGroup from '@para-ui/core/ButtonGroup';
+
+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 onClickBtn = (val: string) => {
+    console.log('onClickBtn', val)
+}
+
+<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}
+/>
+`;
+
+export const insideSearch = `
+import Search from '@para-ui/core/Search';
+
+const change = (str: any) => {
+    console.log(str)
+    setValue(str)
+}
+
+// 点击右侧按钮
+const onClickRightIcon = () => {
+    console.log('onClickRightIcon', value)
+}
+
+const onClickBtn = (val: string) => {
+    console.log('onClickBtn', val)
+}
+
+<Search
+    btnType="inside"
+    onChange={change}
+    placeholder="请输入搜索内容"
+    btnText="搜索"
+    onClickRightIcon={onClickRightIcon}
+    onClickBtn={onClickBtn}
+/>
+`;
+
+export const noBtnTextSearch = `
+
+const change = (str: any) => {
+    console.log(str)
+    setValue(str)
+}
+
+// 点击右侧按钮
+const onClickRightIcon = () => {
+    console.log('onClickRightIcon', value)
+}
+
+const onClickBtn = (val: string) => {
+    console.log('onClickBtn', val)
+}
+
+<Search
+    btnType="inside"
+    onChange={change}
+    placeholder="请输入搜索内容"
+    onClickRightIcon={onClickRightIcon}
+    onClickBtn={onClickBtn}
+/>
+`;
+
+export const noBtnSearch = `
+import Search from '@para-ui/core/Search';
+
+const change = (str: any) => {
+    console.log(str)
+    setValue(str)
+}
+
+// 点击右侧按钮
+const onClickRightIcon = () => {
+    console.log('onClickRightIcon', value)
+}
+
+const onClickBtn = (val: string) => {
+    console.log('onClickBtn', val)
+}
+
+<Search
+    showBtn={false}
+    btnType="inside"
+    onChange={change}
+    placeholder="请输入搜索内容"
+    onClickRightIcon={onClickRightIcon}
+    onClickBtn={onClickBtn}
+/>
+`;
+
+export const customSearch = `
+import Search from '@para-ui/core/Search';
+import SearchIcon from '@para-ui/icons/Search';
+
+const change = (str: any) => {
+    console.log(str)
+    setValue(str)
+}
+
+// 点击右侧按钮
+const onClickRightIcon = () => {
+    console.log('onClickRightIcon', value)
+}
+
+<Search
+    rightIconExist={true}
+    showBtn={false}
+    rightIcon={<SearchIcon />}
+    btnType="inside"
+    onChange={change}
+    placeholder="请输入搜索内容"
+    onClickRightIcon={onClickRightIcon}
+/>
+`;