@para-ui/core 2.1.32 → 2.1.35

package/docs/view/autoBox/index.scss

@@ -0,0 +1,15 @@
+.paraui-auto-box-demo {
+  .paraui-auto-box {
+    & > button {
+      margin-right: 10px;
+    }
+  }
+
+  .custom-parui-auto-box {
+    display: flex;
+
+    .paraui-auto-box {
+      width: calc(100% - 70px);
+    }
+  }
+}

package/docs/view/autoBox/index.tsx

@@ -0,0 +1,97 @@
+import React, {FunctionComponent, useRef, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import AutoBox from 'src/AutoBox';
+import Button from 'src/Button';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicAutoBox, showNumAutoBox, customContentAutoBox, customMoreAutoBox} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaAutoBox: FunctionComponent = () => {
+    const [open, setOpen] = useState<boolean>(false)
+    const [moreBol, setMoreBol] = useState<boolean>(false)
+    const [list1] = useState<any>([
+        <Button variant={"outlined"}>按钮1</Button>,
+        <Button variant={"outlined"}>按钮2</Button>,
+        <Button variant={"outlined"}>按钮3</Button>,
+        <Button variant={"outlined"}>按钮4</Button>,
+        <Button variant={"outlined"}>按钮5</Button>,
+    ])
+    const posDom = useRef<any>();
+
+    const list = [
+        <Button variant={"outlined"}>按钮1</Button>,
+        <Button variant={"outlined"}>按钮2</Button>,
+        <Button variant={"outlined"}>按钮3</Button>,
+        <Button variant={"outlined"}>按钮4</Button>,
+        <Button variant={"outlined"}>按钮5</Button>,
+    ]
+
+    const clickbtn = () => {
+        if (!moreBol) return;
+        console.log('打开')
+        setOpen(true);
+    }
+
+    const closeFunc = () => {
+        console.log('关闭')
+        setOpen(false);
+    }
+
+    const showMore = (bol: boolean) => {
+        setMoreBol(bol);
+    }
+
+    return (
+        <div className={'paraui-auto-box-demo'}>
+            <Title name={'超出自适应盒子'}>代码演示</Title>
+            <CodeBox
+                code={basicAutoBox}
+                title={'基本'}
+                description={'基本。'}
+            >
+                <AutoBox list={list} />
+            </CodeBox>
+            <CodeBox
+                code={showNumAutoBox}
+                title={'指定渲染个数'}
+                description={'指定渲染个数,将不触发自适应。'}
+            >
+                <AutoBox list={list} showNum={3}/>
+            </CodeBox>
+            <CodeBox
+                code={customContentAutoBox}
+                title={'自定义更多'}
+                description={'自定义更多。'}
+            >
+                <AutoBox
+                    list={list}
+                    moreCustomize={<Button variant={"outlined"}>更多</Button>}
+                />
+            </CodeBox>
+            <CodeBox
+                code={customMoreAutoBox}
+                title={'自定义定位元素'}
+                description={'注意, 这个list必须用useState控制一下,要不然无法显示更多下拉。'}
+            >
+                <div className={'custom-parui-auto-box'}>
+                    <AutoBox
+                        list={list1}
+                        anchorEl={posDom.current}
+                        hideMore={true}
+                        openMore={open}
+                        onCloseMore={closeFunc}
+                        onShowMore={showMore}
+                    />
+                    <div ref={posDom} onClick={clickbtn}>
+                        <Button variant={"outlined"}>更多</Button>
+                    </div>
+                </div>
+            </CodeBox>
+            <APITable data={apiData} />
+        </div>
+    );
+};
+
+export default ParaAutoBox;

package/docs/view/autoTips/api.tsx

@@ -0,0 +1,49 @@
+/**
+ * @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: 'tips',
+        desc: '超出显示的内容',
+        type: 'ReactNode'
+    },
+    {
+        name: 'arrow',
+        desc: '文字下拉提示箭头',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'beyondText',
+        desc: '显示文字还是元素',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'placement',
+        desc: '定位方向',
+        type: 'top-start | bottom-end | bottom-start | bottom | left-end | left-start | left | right-end | right-start | right | top-end | top',
+        default: 'bottom-start'
+    },
+    {
+        name: 'interactive',
+        desc: '移入悬浮内容,不关闭',
+        type: 'boolean',
+        default: 'true'
+    },
+];
+export default apiData;

package/docs/view/autoTips/codeString.tsx

@@ -0,0 +1,34 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicAutoTips = `
+import AutoTips from '@para-ui/core/AutoTips';
+
+<div style={{width: '100px'}}>
+   <AutoTips>超出超出超出超出超出超出超出超出超出超出</AutoTips>
+</div>
+`;
+
+export const posAutoTips = `
+import AutoTips from '@para-ui/core/AutoTips';
+
+<div style={{width: '100px'}}>
+    <AutoTips
+        placement={"top-start"}
+    >超出超出超出超出超出超出超出超出超出超出</AutoTips>
+</div>
+`;
+
+export const contentAutoTips = `
+import AutoTips from '@para-ui/core/AutoTips';
+
+<div style={{width: '100px'}}>
+   <AutoTips
+       tips={
+          <div>自定义超出内容</div>
+       }                 
+   >超出超出超出超出超出超出超出超出超出超出</AutoTips>
+</div>
+`;

package/docs/view/autoTips/index.tsx

@@ -0,0 +1,53 @@
+import React, {FunctionComponent} from 'react';
+import CodeBox from '../../components/codeBox';
+import AutoTips from 'src/AutoTips';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import {basicAutoTips, posAutoTips, contentAutoTips} from './codeString';
+import apiData from './api';
+import './index.scss';
+
+const ParaAutoTips: FunctionComponent = () => {
+
+    return (
+        <div className={'paraui-autotips-demo'}>
+            <Title name={'超出省略'}>代码演示</Title>
+            <CodeBox
+                code={basicAutoTips}
+                title={'基本'}
+                description={'当文本超出外容器,自动省略,鼠标移入显示。'}
+            >
+                <div style={{width: '100px'}}>
+                    <AutoTips>超出超出超出超出超出超出超出超出超出超出</AutoTips>
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={posAutoTips}
+                title={'文字提示位置'}
+                description={'修改placement的值,改变文本提示的位置。'}
+            >
+                <div style={{width: '100px'}}>
+                    <AutoTips
+                        placement={"top-start"}
+                    >超出超出超出超出超出超出超出超出超出超出</AutoTips>
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={contentAutoTips}
+                title={'自定义超出内容'}
+                description={'传入tips属性,值为超出后鼠标移上去显示的内容。'}
+            >
+                <div style={{width: '100px'}}>
+                    <AutoTips
+                        tips={
+                            <div>自定义超出内容</div>
+                        }
+                    >超出超出超出超出超出超出超出超出超出超出</AutoTips>
+                </div>
+            </CodeBox>
+            <APITable data={apiData}/>
+        </div>
+    );
+};
+
+export default ParaAutoTips;

package/docs/view/breadcrumbs/api.tsx

@@ -0,0 +1,72 @@
+/**
+ * @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: 'popoverClassName',
+        desc: '弹出框样式class样式名',
+        type: 'string'
+    },
+    {
+        name: 'list',
+        desc: '初始化数据',
+        type: 'listOptions[]'
+    },
+    {
+        name: 'separator',
+        desc: '中间符号',
+        type: 'string',
+        default: '/'
+    },
+    {
+        name: 'maxWidth',
+        desc: '每一项最大宽度',
+        type: 'string',
+    },
+    {
+        name: 'isShrink',
+        desc: '是否收缩',
+        type: 'boolean',
+        default: 'true'
+    },
+    {
+        name: 'onClickItem',
+        desc: '点击菜单',
+        type: '(ops: listOptions) => void'
+    }
+];
+
+export const apiDataList: RowsData = [
+    {
+        name: 'label',
+        desc: '每一项显示名',
+        type: 'ReactNode'
+    },
+    {
+        name: 'maxWidth',
+        desc: '每一项最大宽度',
+        type: 'string'
+    },
+    {
+        name: 'disabled',
+        desc: '是否可点击',
+        type: 'boolean',
+        default: 'false'
+    }
+]
+
+export default apiData;

package/docs/view/breadcrumbs/codeString.tsx

@@ -0,0 +1,160 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicBreadcrumbs = `
+import Breadcrumbs, {listOptions} from '@para-ui/core/Breadcrumbs';
+
+const list: listOptions[] = [
+    {
+        label: '主页',
+    },
+    {
+        label: '管理',
+    },
+    {
+        label: '新建'
+    }
+];
+
+<div style={{width: '100%'}}>
+    <Breadcrumbs list={list} />
+</div>
+`;
+
+export const iconBreadcrumbs = `
+import Breadcrumbs, {listOptions} from '@para-ui/core/Breadcrumbs';
+import AdvancedSet from '@para-ui/icons/AdvancedSet';
+
+const list: listOptions[] = [
+    {
+        label: <>
+            <AdvancedSet />
+            <span>主页</span>
+        </>
+    },
+    {
+        label: <>
+            <AdvancedSet />
+            <span>管理</span>
+        </>
+    },
+    {
+        label: <>
+            <AdvancedSet />
+            <span>新建</span>
+        </>
+    }
+];
+
+<div style={{width: '100%'}}>
+    <Breadcrumbs list={list} />
+</div>
+`;
+
+export const separatorBreadcrumbs = `
+import Breadcrumbs, {listOptions} from '@para-ui/core/Breadcrumbs';
+
+const [separator, setSeparator] = useState<string>('/');
+
+const clickBtn = (type: any) => () => {
+    setSeparator(type);
+}
+
+const list: listOptions[] = [
+    {
+        label: '主页',
+    },
+    {
+        label: '管理',
+    },
+    {
+        label: '新建'
+    }
+];
+
+<div className="para-breadcrumbs-item-btn">
+    <Button variant="outlined" onClick={clickBtn('/')}>/</Button>
+    <Button variant="outlined" onClick={clickBtn('>')}>{'>'}</Button>
+    <Button variant="outlined" onClick={clickBtn('-')}>-</Button>
+</div>
+<div style={{width: '100%'}}>
+    <Breadcrumbs list={list} separator={separator} />
+</div>
+`;
+
+export const maxWidtnBreadcrumbs = `
+import Breadcrumbs, {listOptions} from '@para-ui/core/Breadcrumbs';
+
+const list: listOptions[] = [
+    {
+        label: '主页主页主页主页主页'
+    },
+    {
+        label: '主页主页主页主页主页',
+        maxWidth: '150px'
+    },
+    {
+        label: '新建新建'
+    }
+];
+
+<Breadcrumbs list={list} maxWidth={'100px'} />
+`;
+
+export const moreBreadcrumbs = `
+import Breadcrumbs, {listOptions} from '@para-ui/core/Breadcrumbs';
+
+const list: listOptions[] = [
+    {
+        label: '主页'
+    },
+    {
+        label: '组织部门'
+    },
+    {
+        label: '用户管理'
+    },
+    {
+        label: '新建用户表单'
+    },
+    {
+        label: '新建组织表单'
+    },
+    {
+        label: '当前菜单'
+    }
+];
+
+<div className="para-breadcrumbs-more-box">
+    <Breadcrumbs list={list}></Breadcrumbs>
+</div>
+
+<style>
+.para-breadcrumbs-more-box {
+    width: 60%;
+  }
+</style>
+`;
+
+export const disabledBreadcrumbs = `
+import Breadcrumbs, {listOptions} from '@para-ui/core/Breadcrumbs';
+
+const list: listOptions[] = [
+    {
+        label: '主页主页主页主页主页',
+        disabled: true
+    },
+    {
+        label: '管理管理管理',
+        disabled: true
+    },
+    {
+        label: '新建新建'
+    }
+];
+<div style={{width: '100%'}}>
+   <Breadcrumbs list={list} />
+</div>
+`;

package/docs/view/breadcrumbs/index.scss

@@ -0,0 +1,14 @@
+.paraui-breadcrumbs-demo{
+
+  .para-breadcrumbs-item-btn {
+    margin-bottom: 20px;
+
+    button {
+      margin-right: 20px;
+    }
+  }
+
+  .para-breadcrumbs-more-box {
+    width: 60%;
+  }
+}

package/docs/view/breadcrumbs/index.tsx

@@ -0,0 +1,173 @@
+import React, {FunctionComponent, useState} from 'react';
+import CodeBox from '../../components/codeBox';
+import Breadcrumbs, {listOptions} from 'src/Breadcrumbs';
+import Button from 'src/Button';
+import APITable from '../../components/apiTable';
+import Title from '../../components/title';
+import AdvancedSet from "@para-ui/icons/AdvancedSet";
+import {
+    basicBreadcrumbs,
+    iconBreadcrumbs,
+    separatorBreadcrumbs,
+    maxWidtnBreadcrumbs,
+    moreBreadcrumbs,
+    disabledBreadcrumbs
+} from './codeString';
+import apiData, {apiDataList} from './api';
+import './index.scss';
+
+const list: listOptions[] = [
+    {
+        label: '主页',
+    },
+    {
+        label: '管理',
+    },
+    {
+        label: '新建'
+    }
+];
+
+const list1: listOptions[] = [
+    {
+        label: <>
+            <AdvancedSet />
+            <span>主页</span>
+        </>
+    },
+    {
+        label: <>
+            <AdvancedSet />
+            <span>管理</span>
+        </>
+    },
+    {
+        label: <>
+            <AdvancedSet />
+            <span>新建</span>
+        </>
+    }
+];
+
+const list2: listOptions[] = [
+    {
+        label: '主页主页主页主页主页'
+    },
+    {
+        label: '主页主页主页主页主页',
+        maxWidth: '150px'
+    },
+    {
+        label: '新建新建'
+    }
+];
+
+const list3: listOptions[] = [
+    {
+        label: '主页'
+    },
+    {
+        label: '组织部门'
+    },
+    {
+        label: '用户管理'
+    },
+    {
+        label: '新建用户表单'
+    },
+    {
+        label: '新建组织表单'
+    },
+    {
+        label: '当前菜单'
+    }
+];
+
+const list4: listOptions[] = [
+    {
+        label: '主页主页主页主页主页',
+        disabled: true
+    },
+    {
+        label: '管理管理管理',
+        disabled: true
+    },
+    {
+        label: '新建新建'
+    }
+];
+
+const ParaBreadcrumbs: FunctionComponent = () => {
+    const [separator, setSeparator] = useState<string>('/');
+
+    const clickBtn = (type: any) => () => {
+        setSeparator(type);
+    }
+
+    return (
+        <div className={'paraui-breadcrumbs-demo'}>
+            <Title name={'面包屑'}>代码演示</Title>
+            <CodeBox
+                code={basicBreadcrumbs}
+                title={'基本'}
+                description={'基本。'}
+            >
+                <div style={{width: '100%'}}>
+                    <Breadcrumbs list={list} />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={iconBreadcrumbs}
+                title={'带图标'}
+                description={'带图标。'}
+            >
+                <div style={{width: '100%'}}>
+                    <Breadcrumbs list={list1} />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={separatorBreadcrumbs}
+                title={'中间符号'}
+                description={'中间符号。'}
+            >
+                <div className="para-breadcrumbs-item-btn">
+                    <Button variant="outlined" onClick={clickBtn('/')}>/</Button>
+                    <Button variant="outlined" onClick={clickBtn('>')}>{'>'}</Button>
+                    <Button variant="outlined" onClick={clickBtn('-')}>-</Button>
+                </div>
+                <div style={{width: '100%'}}>
+                    <Breadcrumbs list={list} separator={separator} />
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={maxWidtnBreadcrumbs}
+                title={'最大宽度'}
+                description={'最大宽度, 设置maxWidth属性,控制没一项的最大宽度,超出鼠标移上去显示全部内容,也可以设置item每一项的maxWidth,来具体控制没一项宽度。'}
+            >
+                <Breadcrumbs list={list2} maxWidth={'100px'} />
+            </CodeBox>
+            <CodeBox
+                code={moreBreadcrumbs}
+                title={'超出...'}
+                description={'缩小屏幕,可看到缩小模式。注意外部需要设置一个宽度,否则会出现问题。'}
+            >
+                <div className="para-breadcrumbs-more-box">
+                    <Breadcrumbs list={list3}></Breadcrumbs>
+                </div>
+            </CodeBox>
+            <CodeBox
+                code={disabledBreadcrumbs}
+                title={'禁用某一项'}
+                description={'默认都可点击,item增加disabled属性,变成不可点击。'}
+            >
+                <div style={{width: '100%'}}>
+                    <Breadcrumbs list={list4} />
+                </div>
+            </CodeBox>
+            <APITable data={apiData} />
+            <APITable data={apiDataList} showApi={false} subTitle={'listOptions'} />
+        </div>
+    );
+};
+
+export default ParaBreadcrumbs;