@para-ui/core 2.1.32 → 2.1.35

package/docs/view/help/api.tsx

@@ -0,0 +1,58 @@
+/**
+ * @author Hanz
+ * @date 2022/2/15 下午2:26
+ * @description help api
+ */
+import {RowsData} from '../../components/apiTable';
+
+const apiData: RowsData = [
+    {
+        name: 'className',
+        desc: '类名',
+        type: 'string'
+    },
+    {
+        name: 'style',
+        desc: '样式',
+        type: 'React.CSSProperties'
+    },
+    {
+        name: 'title',
+        desc: 'help title,长度为0的字符串不显示',
+        type: `ReactNode`
+    },
+    {
+        name: 'arrow',
+        desc: '是否显示箭头',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'interactive',
+        desc: '使工具提示具有交互性，即当用户在 leaveDelay 过期之前将鼠标悬停在工具提示上时不会关闭，',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'leaveDelay',
+        desc: '在隐藏工具提示之前等待的毫秒数',
+        type: 'ReactNode'
+    },
+    {
+        name: 'placement',
+        desc: 'tooltip位置',
+        type: `'bottom-end'
+                    | 'bottom-start'
+                    | 'bottom'
+                    | 'left-end'
+                    | 'left-start'
+                    | 'left'
+                    | 'right-end'
+                    | 'right-start'
+                    | 'right'
+                    | 'top-end'
+                    | 'top-start'
+                    | 'top'`
+    }
+];
+export default apiData;

package/docs/view/help/codeString.tsx

@@ -0,0 +1,39 @@
+/**
+ * @author Hanz
+ * @date 2022/2/9 下午5:54
+ * @description
+ */
+export const basicHelp = `
+import Help from '@para-ui/core/Help';
+
+<Help title={'帮助提示'}/>
+`;
+
+export const helpNotArrow = `
+import Help from '@para-ui/core/Help';
+
+<Help title={'帮助提示'} arrow={false} placement={'top'}/>
+`;
+
+export const helpPlacement = `
+import Help from '@para-ui/core/Help';
+
+<Help title={'帮助提示'} placement={'right'}/>
+`;
+
+export const anchorHelp = `
+import Help from '@para-ui/core/Help';
+import FeiShu from "@para-ui/icons/FeiShu";
+
+<Help title={'帮助提示'} placement={'right'}>
+    <FeiShu/>
+</Help>
+`;
+
+export const interactiveHelp = `
+import Help from '@para-ui/core/Help';
+
+<Help title={'帮助提示'} interactive leaveDelay={3000}/>
+`;
+
+

package/docs/view/help/index.scss

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

package/docs/view/help/index.tsx

@@ -0,0 +1,40 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import Help from 'src/Help';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicHelp, helpNotArrow, helpPlacement, anchorHelp, interactiveHelp} from './codeString';
+import apiData from './api';
+import FeiShu from "@para-ui/icons/FeiShu";
+import './index.scss';
+
+//help
+const ParaHelp: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-help-demo'}>
+            <Title name={'帮助提示'}>代码演示</Title>
+            <CodeBox code={basicHelp} title={'基本'} description={'最简单的用法。'}>
+                <Help title={'帮助提示'}/>
+            </CodeBox>
+            <CodeBox code={helpNotArrow} title={'不显示箭头'} description={'不显示提示箭头。'}>
+                <Help title={'帮助提示'} arrow={false} placement={'top'}/>
+            </CodeBox>
+            <CodeBox code={helpPlacement} title={'提示位置'} description={'可设置提示内容位置。'}>
+                <Help title={'帮助提示'} placement={'right'}/>
+            </CodeBox>
+            <CodeBox code={anchorHelp} title={'自定义锚点'} description={'可自定义提示锚点。'}>
+                <Help title={'帮助提示'} placement={'right'}>
+                    <FeiShu/>
+                </Help>
+            </CodeBox>
+            <CodeBox code={interactiveHelp} title={'交互性'}
+                     description={'使工具提示具有交互性，即当用户在 leaveDelay 过期之前将鼠标悬停在工具提示上时不会关闭。'}>
+                <Help title={'帮助提示'} interactive leaveDelay={3000}/>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaHelp;

package/docs/view/helperText/api.tsx

@@ -0,0 +1,31 @@
+/**
+ * @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: 'error',
+        desc: '是否显示错误',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'helperText',
+        desc: '错误提示',
+        type: 'ReactNode'
+    },
+];
+export default apiData;

package/docs/view/helperText/codeString.tsx

@@ -0,0 +1,16 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 表单错误提示
+ */
+export const basicHelperText = `
+import HelperText from '@para-ui/core/HelperText';
+
+<HelperText
+    helperText={'请输入'}
+/>
+<HelperText
+    error={true}
+    helperText={'请输入'}
+/>
+`;

package/docs/view/helperText/index.tsx

@@ -0,0 +1,33 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import HelperText from 'src/HelperText';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicHelperText} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaHelperText: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-help-text-demo'}>
+            <Title name={'错误提示'}>代码演示</Title>
+            <CodeBox
+                code={basicHelperText}
+                title={'基本'}
+                description={'标题。'}
+            >
+                <HelperText
+                    helperText={'请输入'}
+                />
+                <HelperText
+                    error={true}
+                    helperText={'请输入'}
+                />
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaHelperText;

package/docs/view/home/index.scss

@@ -0,0 +1,55 @@
+.home {
+  h1 {
+    margin: 0 0 20px 0;
+    color: #282c34;
+    font-weight: 500;
+    font-size: 30px;
+  }
+
+  h2 {
+    margin-top: 40px;
+    margin-bottom: 20px;
+    color: #282c34;
+  }
+
+  p {
+    margin: 20px 0;
+    color: #282c34;
+  }
+
+  a {
+    color: #3666d6;
+    text-decoration: none;
+  }
+
+  ol {
+    list-style: disc;
+    padding-left: 30px;
+    color: #282c34;
+
+    li {
+      margin: 8px 0;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+
+    th {
+      padding: 16px 24px;
+      text-align: left;
+      color: #5c6b77;
+      font-weight: 500;
+      border: 1px solid rgba(0, 0, 0, .06);
+      white-space: nowrap;
+      background: rgba(0, 0, 0, .02);
+    }
+
+    td {
+      padding: 16px 24px;
+      text-align: left;
+      border: 1px solid rgba(0, 0, 0, .06);
+    }
+  }
+}

package/docs/view/home/index.tsx

@@ -0,0 +1,119 @@
+import React, {FunctionComponent} from 'react';
+import {useHistory} from 'react-router-dom'
+import {useFormatMessage} from 'react-intl-hooks';
+import {languages} from '../../locale/index'
+import Global from '../../context/global'
+import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
+import './index.scss';
+import {materialDark} from "react-syntax-highlighter/dist/esm/styles/prism";
+
+interface Props {
+
+}
+
+const Home: FunctionComponent = (props: Props) => {
+    const history = useHistory();
+    // 引用全局共享数据context
+    const {setLocale, locales, locale, Message, Confirm} = React.useContext(Global);
+    const intl = useFormatMessage();
+
+    const changeLang = async (locale: languages) => {
+        const ok = await Confirm.info({content: '是否切换语言?'});
+        if (!ok) return;
+        // 通过context切换语言
+        setLocale(locale);
+        Message.info(locale);
+    }
+
+    const toPara = () => {
+        history.push('/para');
+    }
+
+    const openNpm = () => {
+        window.open(`https://www.npmjs.com/package/${window.ParaWeb.name}`);
+    }
+
+    return (
+        <div className={'home'}>
+            <h1>ParaUI of React</h1>
+            <p>ParaUI 是一套 React 组件库，为中后台产品而生。致力于创造出贴心的交互设计，同时为开发者提供了友好的开发体验。</p>
+            <p>团队：前端研发部提供技术支持</p>
+            <h2>设计原则</h2>
+            <ol>
+                <li>定制</li>
+                <li>反馈</li>
+                <li>效率</li>
+                <li>可控</li>
+            </ol>
+            <h2>兼容环境</h2>
+            <table>
+                <thead>
+                <tr>
+                    <th><a href="http://godban.github.io/browsers-support-badges/">
+                        <img
+                            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png"
+                            alt="IE / Edge" width="24px" height="24px"/></a><br/>IE / Edge
+                    </th>
+                    <th><a href="http://godban.github.io/browsers-support-badges/">
+                        <img
+                            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png"
+                            alt="Firefox" width="24px" height="24px"/></a><br/>Firefox
+                    </th>
+                    <th><a href="http://godban.github.io/browsers-support-badges/">
+                        <img
+                            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
+                            alt="Chrome" width="24px" height="24px"/></a><br/>Chrome
+                    </th>
+                    <th><a href="http://godban.github.io/browsers-support-badges/">
+                        <img
+                            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png"
+                            alt="Safari" width="24px" height="24px"/></a><br/>Safari
+                    </th>
+                    <th><a href="http://godban.github.io/browsers-support-badges/">
+                        <img
+                            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png"
+                            alt="Opera" width="24px" height="24px"/></a><br/>Opera
+                    </th>
+                    <th><a href="http://godban.github.io/browsers-support-badges/">
+                        <img
+                            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png"
+                            alt="Electron" width="24px" height="24px"/></a><br/>Electron
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>IE11, Edge</td>
+                    <td>last 2 versions</td>
+                    <td>last 2 versions</td>
+                    <td>last 2 versions</td>
+                    <td>last 2 versions</td>
+                    <td>last 2 versions</td>
+                </tr>
+                </tbody>
+            </table>
+            <p>对于 IE 系列浏览器，需要提供相应的 Polyfill 支持，建议使用 <a href="https://babeljs.io/docs/en/babel-preset-env"
+                                                       target='_blank'>@babel/preset-env</a> 来解决浏览器兼容问题。</p>
+            <p>不推荐在移动端使用</p>
+            <h2>版本</h2>
+            <div>
+                <span style={{verticalAlign: 'middle'}}>稳定版：</span>
+                <img style={{verticalAlign: 'middle', cursor: 'pointer'}}
+                     src={`https://img.shields.io/npm/v/${window.ParaWeb.name}.svg?style=flat`} onClick={openNpm}></img>
+            </div>
+            <h2>安装</h2>
+            <p>使用 npm 或 yarn 安装</p>
+            <SyntaxHighlighter language="tsx" style={materialDark} wrapLines wrapLongLines>
+                $ npm install @para-ui/core --save
+            </SyntaxHighlighter>
+            <SyntaxHighlighter language="tsx" style={materialDark} wrapLines wrapLongLines>
+                $ yarn add @para-ui/core
+            </SyntaxHighlighter>
+            <h2>支持</h2>
+            <a href="https://hbq1cr9hnp.feishu.cn/sheets/shtcnjASSAYAOjVSxdP2m8sasQe?table=tblM26aEanwzbbkd&view=vewUIIwxDi"
+               target='_blank'>问题反馈</a>
+        </div>
+    );
+};
+
+export default Home;

package/docs/view/icons/index.scss

@@ -0,0 +1,48 @@
+.paraui-icon-list {
+  position: relative;
+
+  .paraui-icon-list-item {
+    display: inline-block;
+    width: 14%;
+    height: 100px;
+    padding-top: 10px;
+    text-align: center;
+    font-size: 14px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: color .3s ease-in-out, background-color .3s ease-in-out;;
+
+    svg {
+      margin: 12px 0 8px;
+      font-size: 30px;
+      transition: transform .3s ease-in-out;
+      will-change: transform;
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: #1890ff;
+
+      svg {
+        transform: scale(1.4);
+        color: inherit;
+      }
+    }
+  }
+
+  .paraui-icon-list-hide-input {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  .paraui-icon-list-search {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 30px;
+
+    .paraui-search {
+      width: 500px;
+    }
+  }
+}

package/docs/view/icons/index.tsx

@@ -0,0 +1,87 @@
+import React, {FunctionComponent, useState, useRef, useContext} from "react";
+import * as iconList from "@para-ui/icons";
+import Search from 'src/Search';
+import Global from '../../context/global';
+import './index.scss';
+
+//图标库
+const ParaIcons: FunctionComponent = () => {
+    const {Message} = useContext(Global);
+    const [iconData, setIconData] = useState<any>(() => {
+        return Object.keys(iconList).map((k: string) => {
+            return {name: k, icon: (iconList as any)[k], hide: false};
+        });
+    });
+    const inputDom = useRef<any>();
+    const timerRef = useRef<any>(); //防抖timer
+    const [val, setVal] = useState<string>('');
+
+    //copy
+    const copyToClip = (content: string) => {
+        let aux: any = inputDom && inputDom.current;
+        aux.setAttribute("value", content);
+        aux.select();
+        document.execCommand("copy");
+    };
+
+    //点击复制图标
+    const clickIcon = (key: string) => () => {
+        copyToClip(`import ${key} from "@para-ui/icons/${key}";`);
+        Message.success({text: '复制成功'});
+    };
+
+    //搜索图标
+    const searchIcon = (val: string) => {
+        iconData.forEach((item: any) => {
+            let name = item.name?.toLowerCase();
+            item.hide = !name.includes(val.toLowerCase());
+        });
+        setIconData([...iconData]);
+    };
+
+    //onchange
+    const onchange = (val: string) => {
+        setVal(val);
+        clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            searchIcon(val);
+        }, 300);
+    };
+
+    //点击清除
+    const onClickRightIcon = () => {
+        setVal('');
+        searchIcon('');
+    };
+
+    return (
+        <div className={"paraui-icon-list"}>
+            <div className={'paraui-icon-list-search'}>
+                <Search
+                    placeholder="在此搜索图标，点击图标可复制代码"
+                    btnText="搜索"
+                    showBtn={false}
+                    value={val}
+                    onChange={onchange}
+                    onClickRightIcon={onClickRightIcon}
+                />
+            </div>
+            {
+                iconData.map((item: any, index: number) => {
+                    let {name, icon: Icon, hide} = item;
+                    if (hide) return null;
+                    return (
+                        <div onClick={clickIcon(name)} key={index} className={'paraui-icon-list-item'}>
+                            <Icon/>
+                            <div>{name}</div>
+                        </div>
+                    );
+                })
+            }
+            <input type="text" className="paraui-icon-list-hide-input" ref={inputDom}/>
+        </div>
+    );
+};
+
+export default ParaIcons;

package/docs/view/inputLang/api.tsx

@@ -0,0 +1,99 @@
+/**
+ * @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: 'langList',
+        desc: '搜索提示语',
+        type: 'string[]'
+    },
+    {
+        name: 'label',
+        desc: '标题',
+        type: 'ReactNode'
+    },
+    {
+        name: 'labelTooltip',
+        desc: '提示语配置,看表单label组件用法',
+        type: 'LabelTooltipProps'
+    },
+    {
+        name: 'placeholder',
+        desc: '提示语',
+        type: 'string'
+    },
+    {
+        name: 'placeholderKey',
+        desc: '提示语key',
+        type: 'string'
+    },
+    {
+        name: 'placeholderValue',
+        desc: '提示语value',
+        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: 'popoverClassName',
+        desc: '弹出框样式class',
+        type: 'string'
+    },
+    {
+        name: 'defaultValue',
+        desc: '默认值 不受控',
+        type: '{[name: string]: string}'
+    },
+    {
+        name: 'value',
+        desc: '值 受控',
+        type: '{[name: string]: string}'
+    },
+    {
+        name: 'onChange',
+        desc: '改变值',
+        type: '(val: any) => void'
+    }
+];
+export default apiData;