@para-ui/core 2.1.32 → 2.1.35

package/docs/view/textField/index.tsx

@@ -0,0 +1,327 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import TextField from 'src/TextField';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import Users from "@para-ui/icons/Users";
+import {
+    basicTextField,
+    sizeTextField,
+    addonTextField,
+    passwordTextField,
+    lengthTextField,
+    searchTextField,
+    multilineTextField,
+    allowClearTextField
+} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const arr: any = [
+    {
+        value: '嘻嘻'
+    },
+    {
+        value: '1123'
+    },
+    {
+        value: '哈哈'
+    },
+    {
+        value: '派拉软件'
+    },
+    {
+        value: '456'
+    },
+    {
+        value: '789'
+    }
+]
+
+const ParaTextField: FunctionComponent = () => {
+    const [val, setValue] = useState<string>('')
+    const [valLocal, setValueLocal] = useState<string>('')
+
+    const changeValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(event.target.value)
+    }
+
+    const changeValueLocal = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setValueLocal(event.target.value)
+    }
+
+    const onSelectLocal = (item: any) => {
+        setValueLocal(item.value);
+    }
+
+    const fetchSuggestionsLocal = (str: string, cb: Function) => {
+        const data: any[] = [];
+        for (let i = 0, l = arr.length; i < l; i++) {
+            const item = arr[i];
+            if (item.value.indexOf(str) !== -1) data.push(item);
+        }
+        cb(data);
+    }
+
+    const fetchSuggestions = (str: string, cb: Function) => {
+        const data: any[] = [];
+        for (let i = 0, l = arr.length; i < l; i++) {
+            const item = arr[i];
+            if (item.value.indexOf(str) !== -1) data.push(item);
+        }
+        setTimeout(() => {
+            cb(data);
+        }, 1000)
+    }
+
+    return (
+        <div className={'paraui-text-field-demo paraui-form'}>
+            <Title name={'输入框'}>代码演示</Title>
+            <CodeBox
+                code={basicTextField}
+                title={'基本'}
+                description={'基本用法。'}
+            >
+                <TextField
+                    label="输入框"
+                    placeholder="请输入用户名"
+                />
+                <TextField
+                    label="输入框"
+                    value="禁止修改的文案内容"
+                    disabled={true}
+                />
+                <TextField
+                    label={'输入框'}
+                    value={val}
+                    onChange={changeValue}
+                />
+                <TextField
+                    label={'输入框'}
+                    placeholder={'请输入'}
+                    required={true}
+                />
+                <TextField
+                    label={'输入框'}
+                    placeholder={'请输入'}
+                    rightIcon={<Users />}
+                />
+                <TextField
+                    label="输入框"
+                    placeholder="请输入"
+                    error={true}
+                    helperText="请输入"
+                />
+                <TextField
+                    label="输入框"
+                    placeholder="请输入用户名"
+                    labelTooltip={{
+                        tooltip: '帮助提示'
+                    }}
+                />
+                <TextField
+                    label="输入框"
+                    placeholder="请输入用户名"
+                    labelTooltip={{
+                        tooltip: '帮助提示',
+                        tooltipType: 'line'
+                    }}
+                />
+            </CodeBox>
+            <CodeBox
+                code={sizeTextField}
+                title={'三种大小'}
+                description={'我们为 <TextField /> 输入框定义了三种尺寸（大、中(默认)、小），高度分别为 36px、32px 和 28px。'}
+            >
+                <TextField
+                    label={'输入框(大)'}
+                    placeholder={'请输入'}
+                    size={"large"}
+                />
+                <TextField
+                    label={'输入框(中)'}
+                    placeholder={'请输入'}
+                    size={"medium"}
+                />
+                <TextField
+                    label={'输入框(小)'}
+                    placeholder={'请输入'}
+                    size={"small"}
+                />
+            </CodeBox>
+            <CodeBox
+                code={addonTextField}
+                title={'前置/后置标签'}
+                description={'用于配置一些固定组合。'}
+            >
+                <TextField
+                    label="请输入"
+                    placeholder={'请输入'}
+                    addonBefore={'http://'}
+                    addonAfter={'.com'}
+                />
+                <TextField
+                    label="请输入"
+                    placeholder={'请输入'}
+                    addonBefore={<Users />}
+                />
+                <TextField
+                    label="请输入"
+                    placeholder="请输入"
+                    disabled={true}
+                    addonBefore={'addonBefore'}
+                    addonAfter={'addonAfter'}
+                />
+                <TextField
+                    label="请输入"
+                    placeholder="请输入"
+                    required={true}
+                    addonBefore={'addonBefore'}
+                    addonAfter={'addonAfter'}
+                />
+                <TextField
+                    label="请输入"
+                    placeholder="请输入"
+                    error={true}
+                    helperText="请输入"
+                    addonBefore={'addonBefore'}
+                    addonAfter={'addonAfter'}
+                />
+            </CodeBox>
+            <CodeBox
+                code={passwordTextField}
+                title={'密码框'}
+                description={'密码框禁止填充增加autoComplete=new-password,普通文本框添加autocomplete=off。'}
+            >
+                <TextField
+                    label={'密码框'}
+                    placeholder={'请输入'}
+                    type={"password"}
+                />
+                <TextField
+                    label={'密码框(禁止填充)'}
+                    placeholder={'请输入'}
+                    type={"password"}
+                    autoComplete={'new-password'}
+                />
+            </CodeBox>
+            <CodeBox
+                code={lengthTextField}
+                title={'长度限制'}
+                description={'输入框失去焦点,会触发长度限制规则。'}
+            >
+                <TextField
+                    label={'输入框'}
+                    placeholder={'请输入'}
+                    limitLength={10}
+                />
+                <TextField
+                    label="请输入"
+                    placeholder="请输入"
+                    limitLength={20}
+                    addonBefore={'addonBefore'}
+                    addonAfter={'addonAfter'}
+                />
+                <TextField
+                    label={'多行文本'}
+                    placeholder="请输入"
+                    multiline={true}
+                    rows={5}
+                    limitLength={256}
+                />
+            </CodeBox>
+            <CodeBox
+                code={allowClearTextField}
+                title={'显示清空按钮'}
+                description={'显示清空按钮。'}
+            >
+                <TextField
+                    label={'输入框'}
+                    placeholder={'请输入'}
+                    allowClear={true}
+                />
+                <TextField
+                    label={'输入框'}
+                    placeholder={'请输入'}
+                    rightIcon={<Users />}
+                    allowClear={true}
+                />
+                <TextField
+                    label="请输入"
+                    placeholder={'请输入'}
+                    addonBefore={'http://'}
+                    addonAfter={'.com'}
+                    allowClear={true}
+                />
+                <TextField
+                    label={'输入框'}
+                    placeholder={'请输入'}
+                    limitLength={10}
+                    allowClear={true}
+                />
+            </CodeBox>
+            <CodeBox
+                code={searchTextField}
+                title={'模糊匹配'}
+                description={'分为本地搜索,远程搜索。'}
+            >
+                <TextField
+                    label={'输入框(本地搜索)'}
+                    placeholder={'请输入'}
+                    value={valLocal}
+                    fetchSuggestions={fetchSuggestionsLocal}
+                    onSelect={onSelectLocal}
+                    onChange={changeValueLocal}
+                />
+                <TextField
+                    label={'输入框(远程搜索)'}
+                    placeholder={'请输入'}
+                    value={valLocal}
+                    fetchSuggestions={fetchSuggestions}
+                    onSelect={onSelectLocal}
+                    onChange={changeValueLocal}
+                />
+            </CodeBox>
+            <CodeBox
+                code={multilineTextField}
+                title={'多行文本'}
+                description={'多行文本。'}
+            >
+                <TextField
+                    label={'多行文本(不可拖动)'}
+                    placeholder="请输入"
+                    multiline={true}
+                    resize={false}
+                />
+                <TextField
+                    label={'多行文本'}
+                    placeholder="请输入"
+                    multiline={true}
+                    allowClear={false}
+                />
+                <TextField
+                    label={'多行文本'}
+                    placeholder="请输入"
+                    multiline={true}
+                    disabled={true}
+                />
+                <TextField
+                    label={'多行文本'}
+                    placeholder="请输入"
+                    multiline={true}
+                    required={true}
+                />
+                <TextField
+                    label={'多行文本'}
+                    placeholder="请输入"
+                    multiline={true}
+                    error={true}
+                    helperText={'请输入'}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaTextField;

package/docs/view/timeLine/api.tsx

@@ -0,0 +1,43 @@
+/**
+ * @author Hanz
+ * @date 2022/2/10 下午4:38
+ * @description timeLine api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'data',
+        desc: '时间轴数据源',
+        type: `DataItem[]，interface DataItem {
+            /** 时间轴点图标 */
+            dotIcon?: ReactNode;
+            /** 时间轴内容 */
+            content: ReactNode;
+            /** 是否禁用 */
+            disabled?: boolean;
+        }`,
+    },
+    {
+        name: 'align',
+        desc: '内容排列方向',
+        type: 'alternate | left | right',
+        default: 'left'
+    },
+    {
+        name: 'className',
+        desc: 'class',
+        type: 'string'
+    }
+];
+export default apiData;

package/docs/view/timeLine/codeString.tsx

@@ -0,0 +1,85 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const iconTimeLine = `
+import Timeline from '@para-ui/core/Timeline';
+import Complete from '@para-ui/icons/CheckCircleF';
+
+const iconData = [
+    {
+        dotIcon: <Complete/>,
+        content: Date(),
+    },
+    {
+        dotIcon: <Complete/>,
+        content: Date(),
+    },
+    {
+        dotIcon: <Complete/>,
+        content: Date()
+    }
+];
+
+<Timeline data={iconData}/>
+`;
+
+export const numTimeLine = `
+import Timeline from '@para-ui/core/Timeline';
+
+const numData = [
+    {
+        content: 'one',
+    },
+    {
+        content: 'two'
+    },
+    {
+        content: 'three',
+        disabled: true
+    }
+];
+
+<Timeline data={numData}/>
+`;
+
+export const alternateTimeline = `
+import Timeline from '@para-ui/core/Timeline';
+
+const data = [
+    {
+        content: 'one',
+    },
+    {
+        content: 'two'
+    },
+    {
+        content: 'three',
+        disabled: true
+    }
+];
+
+<Timeline data={data} align={'alternate'}/>
+`;
+
+export const alignTimeline = `
+import Timeline from '@para-ui/core/Timeline';
+
+const data = [
+    {
+        content: 'one',
+    },
+    {
+        content: 'two'
+    },
+    {
+        content: 'three',
+        disabled: true
+    }
+];
+
+<Timeline data={data} align={'right'}/>
+`;
+
+

package/docs/view/timeLine/index.scss

@@ -0,0 +1,5 @@
+.paraui-timeLine-demo {
+  .code-box-demo {
+
+  }
+}

package/docs/view/timeLine/index.tsx

@@ -0,0 +1,73 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Timeline from 'src/Timeline';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {iconTimeLine, numTimeLine, alternateTimeline, alignTimeline} from './codeString';
+import apiData from './api';
+import Complete from '@para-ui/icons/CheckCircleF';
+import './index.scss';
+
+//timeLine
+const ParaTimeLine: FunctionComponent = () => {
+    const iconData = [
+        {
+            dotIcon: <Complete/>,
+            content: Date(),
+        },
+        {
+            dotIcon: <Complete/>,
+            content: Date(),
+        },
+        {
+            dotIcon: <Complete/>,
+            content: Date()
+        }
+    ];
+    const numData = [
+        {
+            content: 'one',
+        },
+        {
+            content: 'two'
+        },
+        {
+            content: 'three',
+            disabled: true
+        }
+    ];
+
+    const data = [
+        {
+            content: 'one',
+        },
+        {
+            content: 'two'
+        },
+        {
+            content: 'three',
+            disabled: true
+        }
+    ];
+
+    return (
+        <div className={'paraui-timeLine-demo'}>
+            <Title name={'时间轴'}>代码演示</Title>
+            <CodeBox code={iconTimeLine} title={'图标模式'} description={'图标时间轴'}>
+                <Timeline data={iconData}/>
+            </CodeBox>
+            <CodeBox code={numTimeLine} title={'数字模式'} description={'数字时间轴，包含设置禁用状态'}>
+                <Timeline data={numData}/>
+            </CodeBox>
+            <CodeBox code={alignTimeline} title={'内容排列方向'} description={'align 可以设置内容位于时间轴的位置'}>
+                <Timeline data={data} align={'right'}/>
+            </CodeBox>
+            <CodeBox code={alternateTimeline} title={'交替展现'} description={'内容在时间轴两侧轮流出现。'}>
+                <Timeline data={data} align={'alternate'}/>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaTimeLine;