@para-ui/core 2.1.35 → 2.1.38

package/docs/view/help/api.tsx

@@ -1,58 +0,0 @@
-/**
- * @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

@@ -1,39 +0,0 @@
-/**
- * @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

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

package/docs/view/help/index.tsx

@@ -1,40 +0,0 @@
-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

@@ -1,31 +0,0 @@
-/**
- * @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

@@ -1,16 +0,0 @@
-/**
- * @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

@@ -1,33 +0,0 @@
-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

@@ -1,55 +0,0 @@
-.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

@@ -1,119 +0,0 @@
-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

@@ -1,48 +0,0 @@
-.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

@@ -1,87 +0,0 @@
-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

@@ -1,99 +0,0 @@
-/**
- * @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;