@para-ui/core 2.1.32 → 2.1.35

package/docs/config/router.tsx

@@ -0,0 +1,212 @@
+// 异步路由数据
+
+import {FunctionComponent, lazy} from "react";
+
+export interface RouterConfig {
+    label: string,
+    type: 'router' | 'iframe' | 'snack' | 'snackPage' | 'redirect'
+    path: string // 通用 路由Hash
+    url?: string // iframe | iframe | snackPage 模式
+    component?: FunctionComponent // router | redirect 模式 两种模式实现方式相同，为了渲染菜单过滤重定向
+    snackType?: string // snack分类
+}
+
+export const router = async (): Promise<Array<RouterConfig>> => {
+    return [
+        {label: '主页', type: 'router', path: '/home', component: lazy(() => import('../view/home'))},
+        {label: '图标库', type: 'router', path: '/icons', component: lazy(() => import('../view/icons'))},
+        // 通用
+        {label: '通用', type: 'router', path: '/currency',},
+        {label: '按钮', type: 'router', path: '/currency/button', component: lazy(() => import('../view/button'))},
+        {
+            label: '按钮组',
+            type: 'router',
+            path: '/currency/buttonGroup',
+            component: lazy(() => import('../view/buttonGroup'))
+        },
+        {
+            label: '切换按钮',
+            type: 'router',
+            path: '/currency/toggleButton',
+            component: lazy(() => import('../view/toggleButton'))
+        },
+        {label: '容器', type: 'router', path: '/currency/container', component: lazy(() => import('../view/container'))},
+
+        // 导航
+        {label: '导航', type: 'router', path: '/nav',},
+        {label: '步骤条', type: 'router', path: '/nav/stepper', component: lazy(() => import('../view/stepper'))},
+        {label: '菜单', type: 'router', path: '/nav/menu', component: lazy(() => import('../view/menu'))},
+        {label: '页头', type: 'router', path: '/nav/pageHeader', component: lazy(() => import('../view/pageHeader'))},
+        {label: '分页', type: 'router', path: '/nav/pagination', component: lazy(() => import('../view/pagination'))},
+        {label: '面包屑', type: 'router', path: '/nav/breadcrumbs', component: lazy(() => import('../view/breadcrumbs'))},
+        // 数据录入
+        {label: '数据录入', type: 'router', path: '/dataEntry',},
+        {
+            label: '表单',
+            type: 'router',
+            path: '/dataEntry/form',
+            component: lazy(() => import('../view/form'))
+        },
+        {
+            label: '输入框',
+            type: 'router',
+            path: '/dataEntry/textField',
+            component: lazy(() => import('../view/textField'))
+        },
+        {label: '下拉框', type: 'router', path: '/dataEntry/select', component: lazy(() => import('../view/select'))},
+        {
+            label: '下拉输入',
+            type: 'router',
+            path: '/dataEntry/selectInput',
+            component: lazy(() => import('../view/selectInput'))
+        },
+        {label: '单选框', type: 'router', path: '/dataEntry/radio', component: lazy(() => import('../view/radio'))},
+        {label: '多选框', type: 'router', path: '/dataEntry/checkbox', component: lazy(() => import('../view/checkbox'))},
+        {
+            label: '数字输入框',
+            type: 'router',
+            path: '/dataEntry/inputNumber',
+            component: lazy(() => import('../view/inputNumber'))
+        },
+        {
+            label: '国际化输入框',
+            type: 'router',
+            path: '/dataEntry/inputLang',
+            component: lazy(() => import('../view/inputLang'))
+        },
+        {label: '多值框', type: 'router', path: '/dataEntry/multiBox', component: lazy(() => import('../view/multiBox'))},
+        {
+            label: '单值框',
+            type: 'router',
+            path: '/dataEntry/singleBox',
+            component: lazy(() => import('../view/singleBox'))
+        },
+        {
+            label: '日期选择框',
+            type: 'router',
+            path: '/dataEntry/datePicker',
+            component: lazy(() => import('../view/datePicker'))
+        },
+        {
+            label: '时间选择框',
+            type: 'router',
+            path: '/dataEntry/timePicker',
+            component: lazy(() => import('../view/timePicker'))
+        },
+        {
+            label: '组合选择器',
+            type: 'router',
+            path: '/dataEntry/comboSelect',
+            component: lazy(() => import('../view/comboSelect'))
+        },
+        {
+            label: '穿梭框',
+            type: 'router',
+            path: '/dataEntry/transfer',
+            component: lazy(() => import('../view/transfer'))
+        },
+        {
+            label: '级联选择器',
+            type: 'router',
+            path: '/dataEntry/cascader',
+            component: lazy(() => import('../view/cascader'))
+        },
+        {label: '开关', type: 'router', path: '/dataEntry/switch', component: lazy(() => import('../view/switch'))},
+        {label: '滑动输入条', type: 'router', path: '/dataEntry/slider', component: lazy(() => import('../view/slider'))},
+        {label: '上传', type: 'router', path: '/dataEntry/upload', component: lazy(() => import('../view/upload'))},
+        {
+            label: '颜色选择器',
+            type: 'router',
+            path: '/dataEntry/colorPicker',
+            component: lazy(() => import('../view/colorPicker'))
+        },
+        {label: '搜索', type: 'router', path: '/dataEntry/search', component: lazy(() => import('../view/search'))},
+
+        // 数据展示
+        {label: '数据展示', type: 'router', path: '/dataDisplay',},
+        {label: '表格', type: 'router', path: '/dataDisplay/table', component: lazy(() => import('../view/table'))},
+        {label: '表格操作按钮', type: 'router', path: '/dataDisplay/operateBtn', component: lazy(() => import('../view/operateBtn'))},
+        {label: '树形控件', type: 'router', path: '/dataDisplay/tree', component: lazy(() => import('../view/tree'))},
+        {label: '标签页', type: 'router', path: '/dataDisplay/tabs', component: lazy(() => import('../view/tabs'))},
+        {label: '标签', type: 'router', path: '/dataDisplay/tag', component: lazy(() => import('../view/tag'))},
+        {
+            label: '走马灯',
+            type: 'router',
+            path: '/dataDisplay/carousel',
+            component: lazy(() => import('../view/carousel'))
+        },
+        {
+            label: '折叠面板',
+            type: 'router',
+            path: '/dataDisplay/collapse',
+            component: lazy(() => import('../view/collapse'))
+        },
+        {label: '文字提示', type: 'router', path: '/dataDisplay/toolTip', component: lazy(() => import('../view/toolTip'))},
+        {
+            label: '时间轴',
+            type: 'router',
+            path: '/dataDisplay/timeLine',
+            component: lazy(() => import('../view/timeLine'))
+        },
+        {
+            label: '超出省略',
+            type: 'router',
+            path: '/dataDisplay/autoTips',
+            component: lazy(() => import('../view/autoTips'))
+        },
+        {
+            label: '超出自适应盒子',
+            type: 'router',
+            path: '/dataDisplay/autoBox',
+            component: lazy(() => import('../view/autoBox'))
+        },
+        {label: '弹出框', type: 'router', path: '/dataDisplay/popover', component: lazy(() => import('../view/popover'))},
+        {
+            label: '表单组件标题',
+            type: 'router',
+            path: '/dataDisplay/label',
+            component: lazy(() => import('../view/label'))
+        },
+        {
+            label: '表单组件错误提示',
+            type: 'router',
+            path: '/dataDisplay/helperText',
+            component: lazy(() => import('../view/helperText'))
+        },
+        {
+            label: '空状态',
+            type: 'router',
+            path: '/dataDisplay/empty',
+            component: lazy(() => import('../view/empty'))
+        },
+        {
+            label: '查询中',
+            type: 'router',
+            path: '/dataDisplay/querying',
+            component: lazy(() => import('../view/querying'))
+        },
+        // 反馈
+        {label: '反馈', type: 'router', path: '/feedback',},
+        {label: '全局提示', type: 'router', path: '/feedback/message', component: lazy(() => import('../view/message'))},
+        {label: '帮助提示', type: 'router', path: '/feedback/help', component: lazy(() => import('../view/help'))},
+        {label: '抽屉', type: 'router', path: '/feedback/drawer', component: lazy(() => import('../view/drawer'))},
+        {label: '对话框', type: 'router', path: '/feedback/modal', component: lazy(() => import('../view/modal'))},
+        {
+            label: '气泡确认框',
+            type: 'router',
+            path: '/feedback/popConfirm',
+            component: lazy(() => import('../view/popConfirm'))
+        },
+        {
+            label: '通知提醒框',
+            type: 'router',
+            path: '/feedback/notification',
+            component: lazy(() => import('../view/notification'))
+        },
+        // 其它
+        {label: '其它', type: 'router', path: '/other',},
+        {label: 'loading', type: 'router', path: '/other/loading', component: lazy(() => import('../view/loading'))},
+    ];
+}
+
+export default router;

package/docs/context/global.tsx

@@ -0,0 +1,65 @@
+// 全局公用数据Context
+
+import React from 'react';
+import {LocaleConfig} from '../locale/index'
+import {MessageObject} from 'src/Message';
+import {ConfirmObject} from 'src/Modal';
+import {SnackSDK} from "@para-snack/core";
+
+interface GlbalProps {
+    sdk: SnackSDK,
+    // 国际化
+    setLocale: Function, // 设置语言
+    locales: LocaleConfig // 语言列表
+    locale: string // 当前语言
+
+    // 菜单
+    setMenu: Function // 设置菜单
+    menu: Array<any> // 菜单数据
+    // 全局消息提示方法
+    Message: MessageObject
+    // 全局确认框
+    Confirm: ConfirmObject
+    // 路由设置
+    router: string
+    setRouter: Function
+}
+
+export const Global = React.createContext<GlbalProps>({
+    sdk: {} as SnackSDK,
+    // 国际化
+    setLocale: () => {
+    },
+    locales: {},
+    locale: '',
+
+    // 菜单
+    setMenu: () => {
+    },
+    menu: [],
+    // 全局消息提示
+    Message: {
+        info: () => {
+        },
+        error: () => {
+        },
+        success: () => {
+        },
+        warn: () => {
+        }
+    },
+    Confirm: {
+        info: () => {
+        },
+        error: () => {
+        },
+        success: () => {
+        },
+        warn: () => {
+        }
+    },
+    router: '',
+    setRouter: () => {
+    },
+});
+export default Global;

package/docs/index.tsx

@@ -0,0 +1,42 @@
+import 'react-app-polyfill/ie11';
+import 'core-js';
+import React from "react";
+import ReactDOM from "react-dom";
+import {SnackSDK} from '@para-snack/core';
+import {Context} from '@paraview/lib';
+import App from "./App";
+
+// import '@para-ui/core/style.css';
+import './styles/index.scss';
+
+/* @dynamic debug */
+
+import Debugger from '@paraview/lib/debugger';/* @dynamic end */
+
+/* @dynamic version */
+window.ParaWeb = {name:'@para-ui/core',version: '2.1.35', env: 'dev', buildTime: '5/23/2022, 11:09:16 AM'}
+/* @dynamic end */
+
+const init = async (debug: Array<string> = []) => {
+    /* @dynamic Debugger */
+    await Debugger.init(debug);
+    /* @dynamic end */
+
+    const sdk = new SnackSDK({
+        service: Context.get('snackbar'),
+        importMaps: {
+            'react': React,
+            'react-dom': ReactDOM
+        },
+        runtime: true
+    });
+
+    ReactDOM.render(
+        <App sdk={sdk}/>,
+        document.getElementById('root')
+    );
+};
+
+/* @dynamic init */
+init(["http://192.168.7.27","http://192.168.3.1:10000","http://192.168.2.83:10000","http://10.10.2.48:10000","http://10.10.2.252:5554"])
+/* @dynamic end */

package/docs/locale/index.ts

@@ -0,0 +1,64 @@
+// 国际化语言包
+
+import en from './lang/en_US';
+import zh from './lang/zh_CN';
+
+// 默认语言
+const defaultLanguage = 'zh'
+
+export type languages = 'en' | 'zh';
+
+export interface LangConfig {
+    readonly [name: string]: string
+}
+
+export interface LocaleConfig {
+    [language: string]: {
+        name: string
+        pack: LangConfig
+    },
+}
+
+// 语言列表
+export const locales = {
+    en: {
+        name: 'English',
+        pack: en
+    },
+    zh: {
+        name: '中文',
+        pack: zh
+    }
+} as LocaleConfig;
+
+// 获取浏览器默认语言
+const getBrowserLanguage = (): string => {
+    let lang: string = navigator.language;
+    if (locales[lang]) return lang;
+    try {
+        lang = navigator.language.split('-')[0];
+    } catch (e) {
+    }
+    return lang;
+}
+// 获取当前语言
+const getLanguage = (): string => {
+    return String(locales[localStorage.getItem('language') || ''] ? localStorage.getItem('language') : (getBrowserLanguage() || defaultLanguage));
+}
+// 默认语言
+export const defaultLocale: string = getLanguage();
+
+// 设置语言
+export const saveDefaultLocale = (locale: languages) => {
+    localStorage.setItem('language', locale)
+}
+
+// 获取国际化文本方法
+export const intl = (ops: string | { id: string }) => {
+    if (typeof ops === 'object') ops = ops.id;
+    const langugae: string = getLanguage();
+    const pack = locales[langugae]?.pack
+    return pack[ops] || ops;
+}
+
+export default locales;

package/docs/locale/lang/en_US.ts

@@ -0,0 +1,16 @@
+import {LangConfig} from '../index';
+
+export default {
+    // en ...
+    403: 'Sorry, you do not have access rights!',
+    404: 'Sorry, Not Found!',
+    500: 'Sorry, Service Error！',
+    unknown: 'Unknown Error!',
+    networkError: 'Network Error',
+    loading: 'Loading',
+    notFound: 'Sorry, the page is missing',
+    // demo
+    name: 'Para FED Docs',
+    powered: 'Powered by Para FED',
+    menu: 'Menu'
+} as LangConfig

package/docs/locale/lang/zh_CN.ts

@@ -0,0 +1,16 @@
+import {LangConfig} from '../index';
+
+export default {
+    // zh ...
+    403: '您无权限访问！',
+    404: '您访问的内容不存在！',
+    500: '服务器内部错误！',
+    unknown: '未知服务器错误！',
+    networkError: '网络错误',
+    loading: '加载中',
+    notFound: '抱歉，您访问的页面不存在',
+    // demo
+    name: 'Para FED 文档',
+    powered: '由派拉软件前端团队提供技术支持',
+    menu: '菜单'
+} as LangConfig;

package/docs/react-app-env.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react-scripts" />
+declare interface Window {
+    ParaWeb: {
+        name: string
+        version: string
+        env: string
+        buildTime: string
+    },
+    SnackD: any
+}
+
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.bmp'
+declare module '*.tiff'

package/docs/services/api.ts

@@ -0,0 +1,6 @@
+// 统一API管理，请求数据处理
+
+export const api = async () => {
+
+}
+

package/docs/styles/index.scss

@@ -0,0 +1,31 @@
+#root {
+  width: 100%;
+  height: 100%;
+
+  & > .para-container {
+    display: flex !important;
+
+    & > .para-body {
+      width: 100% !important;
+      height: 100% !important;
+      display: inline-block !important;
+
+      & > .para-container-top {
+        z-index: 1;
+        position: relative;
+      }
+
+      & > .para-container-right {
+        position: relative;
+        padding: 32px 180px 32px 64px;
+        height: calc(100% - 60px);
+      }
+    }
+
+    &.para-react-padding {
+      .para-container-right {
+        padding: 32px 64px;
+      }
+    }
+  }
+}

package/docs/view/autoBox/api.tsx

@@ -0,0 +1,67 @@
+/**
+ * @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: 'list',
+        desc: '选项',
+        type: 'any[]'
+    },
+    {
+        name: 'showNum',
+        desc: '指定渲染几项,存在这个参数,则不自适应',
+        type: 'number'
+    },
+    {
+        name: 'popoverClassName',
+        desc: '下拉框样式',
+        type: 'string'
+    },
+    {
+        name: 'moreCustomize',
+        desc: '自定义更多内容',
+        type: 'ReactNode'
+    },
+    {
+        name: 'hideMore',
+        desc: '隐藏更多按钮',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'openMore',
+        desc: '打开下拉框',
+        type: 'boolean',
+        default: 'false'
+    },
+    {
+        name: 'anchorEl',
+        desc: '定位元素',
+        type: 'any'
+    },
+    {
+        name: 'onCloseMore',
+        desc: '关闭弹窗',
+        type: '() => void'
+    },
+    {
+        name: 'onShowMore',
+        desc: '显示更多',
+        type: '(bol: boolean) => void'
+    }
+];
+export default apiData;

package/docs/view/autoBox/codeString.tsx

@@ -0,0 +1,137 @@
+/**
+ * @author linhd
+ * @date 2022/2/14 2:04 PM
+ * @description 源码字符串
+ */
+export const basicAutoBox = `
+import AutoBox from '@para-ui/core/AutoBox';
+
+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>,
+]
+
+return (
+    <AutoBox list={list} />
+)
+
+<style>
+    .paraui-auto-box {
+        & > button {
+          margin-right: 10px;
+        }
+    }
+</style>
+`;
+
+export const showNumAutoBox = `
+import AutoBox from '@para-ui/core/AutoBox';
+
+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>,
+]
+
+return (
+    <AutoBox list={list} showNum={3}/>
+)
+
+<style>
+    .paraui-auto-box {
+        & > button {
+          margin-right: 10px;
+        }
+    }
+</style>
+`;
+
+export const customContentAutoBox = `
+import AutoBox from '@para-ui/core/AutoBox';
+
+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>,
+]
+
+return (
+    <AutoBox
+        list={list}
+        moreCustomize={<Button variant={"outlined"}>更多</Button>}
+    />
+)
+
+<style>
+    .paraui-auto-box {
+        & > button {
+          margin-right: 10px;
+        }
+    }
+</style>
+`;
+
+export const customMoreAutoBox = `
+import AutoBox from '@para-ui/core/AutoBox';
+const [open, setOpen] = useState<boolean>(false)
+const [moreBol, setMoreBol] = useState<boolean>(false)
+const [list] = 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 clickbtn = () => {
+    if (!moreBol) return;
+    console.log('打开')
+    setOpen(true);
+}
+
+const closeFunc = () => {
+    console.log('关闭')
+    setOpen(false);
+}
+
+const showMore = (bol: boolean) => {
+    setMoreBol(bol);
+}
+
+return (
+    <div className={'custom-parui-auto-box'}>
+        <AutoBox
+            list={list}
+            anchorEl={posDom.current}
+            hideMore={true}
+            openMore={open}
+            onCloseMore={closeFunc}
+            onShowMore={showMore}
+        />
+        <div ref={posDom} onClick={clickbtn}>
+            <Button variant={"outlined"}>更多</Button>
+        </div>
+    </div>
+)
+
+<style>
+    .custom-parui-auto-box {
+        display: flex;
+        
+        .paraui-auto-box {
+            & > button {
+                margin-right: 10px;
+            }
+            width: calc(100% - 70px);
+        }
+    }
+</style>
+`;