@para-ui/core 3.0.55 → 3.0.56

package/Breadcrumbs/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @author linhd
+ * @date 2021/8/3 10:59
+ * @description 面包屑
+ */
+import React, { FunctionComponent, ReactNode } from 'react';
+import './index.scss';
+export interface listOptions {
+    /** 每一项显示名 */
+    label: ReactNode;
+    /** 每一项最大宽度 */
+    maxWidth?: string;
+    /** 是否可点击 */
+    disabled?: boolean;
+    [name: string]: any;
+}
+export interface BreadcrumbsProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** 每一项最大宽度 */
+    maxWidth?: string;
+    /** 初始化数据 */
+    list: listOptions[];
+    /** 中间符号 */
+    separator?: string;
+    /** 弹出框样式class */
+    popoverClassName?: string;
+    /** 是否收缩 */
+    isShrink?: boolean;
+    /** 最后最少显示数 */
+    minNum?: number;
+    /** 是否显示返回 */
+    isBack?: boolean;
+    /** 自定义返回内容 */
+    backRender?: ReactNode;
+    /** 弹窗方式 */
+    trigger?: 'hover' | 'click';
+    /** 弹窗方向 */
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    /**
+     * 点击菜单
+     * @param ops 当前点击菜单数据
+     */
+    onClickItem?: (ops: listOptions) => void;
+    /**
+     * 点击返回
+     * */
+    onBack?: () => void;
+}
+export declare const Breadcrumbs: FunctionComponent<BreadcrumbsProps>;
+export default Breadcrumbs;

package/Breadcrumbs/index.js

@@ -0,0 +1,266 @@
+import { _ as _toConsumableArray } from '../_verture/toConsumableArray-81040c9e.js';
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, Fragment } from 'react';
+import { Popover } from '../Popover/index.js';
+import AutoTips from '../AutoTips/index.js';
+import More from '@para-ui/icons/More';
+import Return from '@para-ui/icons/Return';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../_verture/tslib.es6-55ed4bd2.js';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import 'clsx';
+import '../_verture/usePopupContainer-87febeb9.js';
+import '@paraview/lib';
+import '@para-ui/core/GlobalContext';
+
+var en = {
+  back: 'Back'
+};
+
+var zh = {
+  back: '返回'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n * @author linhd\n * @date 2021年10月25日 14:58:12\n * @description 面包屑\n */\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-breadcrumbs {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item {\n  padding: 0 4px;\n  border-radius: 2px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item .breadcrumbs-item-content {\n  white-space: nowrap;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item .breadcrumbs-item-content svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  margin-right: 4px;\n  vertical-align: -2px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click .breadcrumbs-item-content {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover .breadcrumbs-item-content {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-click:hover .breadcrumbs-item-content svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-current .breadcrumbs-item-content {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-current .breadcrumbs-item-content svg {\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled .breadcrumbs-item-content {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item.breadcrumbs-item-disabled .breadcrumbs-item-content svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 4px;\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more svg {\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .breadcrumbs-item-more:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-list > .separator {\n  color: rgba(171, 176, 185, 0.4);\n  margin: 0 4px;\n  position: relative;\n  top: -1px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back {\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .line {\n  display: inline-block;\n  width: 1px;\n  height: 14px;\n  background-color: rgba(171, 176, 185, 0.2);\n  margin: 0 8px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  height: 100%;\n  color: rgba(46, 55, 67, 0.7);\n  padding: 0 4px;\n  border-radius: 2px;\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content svg {\n  color: rgba(46, 55, 67, 0.7);\n  font-size: 14px;\n  margin-right: 4px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-back > .breadcrumbs-back-content span {\n  white-space: nowrap;\n}\n.paraui-v3-breadcrumbs.paraui-v3-breadcrumbs-calculation {\n  overflow: hidden;\n  opacity: 0;\n}\n\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content {\n  padding: 8px 0;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  height: 36px;\n  line-height: 36px;\n  padding: 0 12px;\n  color: rgb(46, 55, 67);\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item svg {\n  color: rgb(46, 55, 67);\n  margin-right: 4px;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-click {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-click:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-disabled {\n  cursor: not-allowed;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs-popover .breadcrumbs-popover-content .breadcrumbs-popover-content-item.breadcrumbs-popover-content-item-disabled svg {\n  color: rgba(46, 55, 67, 0.4);\n}";
+styleInject(css_248z);
+
+var Breadcrumbs = function Breadcrumbs(props) {
+  var _props$maxWidth = props.maxWidth,
+    maxWidth = _props$maxWidth === void 0 ? '160px' : _props$maxWidth,
+    className = props.className,
+    list = props.list,
+    _props$separator = props.separator,
+    separator = _props$separator === void 0 ? '/' : _props$separator,
+    popoverClassName = props.popoverClassName,
+    _props$isShrink = props.isShrink,
+    isShrink = _props$isShrink === void 0 ? true : _props$isShrink,
+    _props$isBack = props.isBack,
+    isBack = _props$isBack === void 0 ? false : _props$isBack,
+    _props$minNum = props.minNum,
+    minNum = _props$minNum === void 0 ? 2 : _props$minNum,
+    _props$trigger = props.trigger,
+    trigger = _props$trigger === void 0 ? 'hover' : _props$trigger,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomLeft' : _props$placement,
+    backRender = props.backRender,
+    onClickItem = props.onClickItem,
+    onBack = props.onBack,
+    style = props.style;
+  var intl = useFormatMessage('Breadcrumbs', localeJson);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMore = _useState2[0],
+    setShowMore = _useState2[1]; // 是否显示更多按钮
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hideArr = _useState4[0],
+    setHideArr = _useState4[1]; // 是否隐藏面包屑
+  var boxRef = useRef();
+  var constData = useRef({
+    minNum: minNum,
+    isBack: isBack,
+    isShrink: isShrink,
+    timer: null,
+    showMore: false,
+    hideArr: [],
+    hidePos: 0
+  });
+  constData.current.isBack = isBack;
+  constData.current.showMore = showMore;
+  constData.current.isShrink = isShrink;
+  constData.current.minNum = minNum;
+  useEffect(function () {
+    window.addEventListener("resize", winResize);
+    return function () {
+      clearTimeout(constData.current.timer);
+      window.removeEventListener("resize", winResize);
+    };
+  }, []);
+  useEffect(function () {
+    var arr = new Array(props.list.length).fill(false);
+    constData.current.hideArr = arr;
+    setHideArr(arr);
+    changeSize();
+  }, [list]);
+  /** 点击面包屑 */
+  var clickItem = function clickItem(item, index) {
+    return function () {
+      if (props.list.length - 1 === index || item.disabled) return;
+      onClickItem && onClickItem(item);
+    };
+  };
+  /** 点击返回, 又返回执行返回事件,否则默认返回上级 */
+  var clickBack = function clickBack() {
+    if (onBack) return onBack();
+    if (props.list.length < 2) return;
+    var item = props.list[props.list.length - 2];
+    clickItem(item, props.list.length - 2)();
+  };
+  /** 改变屏幕 */
+  var winResize = function winResize() {
+    changeSize();
+  };
+  /** 去除遮罩 */
+  var hideMask = function hideMask() {
+    boxRef.current.classList.remove($prefixCls + '-breadcrumbs-calculation');
+  };
+  var changeSize = function changeSize(bol) {
+    if (!constData.current.isShrink) return hideMask();
+    // 不自动计算
+    clearTimeout(constData.current.timer);
+    // 恢复初始状态
+    if (!bol) {
+      constData.current.hidePos = 0;
+      constData.current.showMore = false;
+      var arr = new Array(props.list.length).fill(false);
+      constData.current.hideArr = arr;
+      setHideArr(arr);
+      setShowMore(false);
+    }
+    if (props.list.length <= constData.current.minNum + 1) return hideMask();
+    // 面包屑数组长度必须大于最少显示数
+    if (constData.current.hidePos === props.list.length - constData.current.minNum - 1) return hideMask();
+    // 隐藏到最小显示数,停止
+    boxRef.current.classList.add($prefixCls + '-breadcrumbs-calculation');
+    constData.current.timer = setTimeout(function () {
+      var boxWidth = boxRef.current.clientWidth;
+      var listWidth = boxRef.current.querySelector('.breadcrumbs-list').clientWidth;
+      var backWidth = constData.current.isBack ? boxRef.current.querySelector('.breadcrumbs-back').clientWidth : 0;
+      if (boxWidth > listWidth + backWidth) {
+        // 没有超出
+        hideMask();
+      } else {
+        constData.current.hidePos += 1;
+        constData.current.hideArr[constData.current.hidePos] = true;
+        setHideArr(_toConsumableArray(constData.current.hideArr));
+        setShowMore(true);
+        changeSize(true);
+        /*// 超出
+        if (constData.current.showMore) {
+            // 超出情况下,在超出,继续减一个面包屑
+        } else {
+            // 没有超出-> 变超出
+        }*/
+      }
+    }, 50);
+  };
+  /** 处理弹窗内容 */
+  var handContent = function handContent() {
+    return jsx("div", Object.assign({
+      className: "breadcrumbs-popover-content"
+    }, {
+      children: list.map(function (item, index) {
+        if (!hideArr[index]) return null;
+        var str = 'breadcrumbs-popover-content-item';
+        if (index !== list.length - 1 && !item.disabled) str += ' breadcrumbs-popover-content-item-click';
+        if (index === list.length - 1) str += ' breadcrumbs-popover-content-item-current';
+        if (item.disabled) str += ' breadcrumbs-popover-content-item-disabled';
+        return jsx("div", Object.assign({
+          className: str,
+          onClick: clickItem(item, index)
+        }, {
+          children: item.label
+        }), index);
+      })
+    }));
+  };
+  // 处理弹出框className
+  var popoverHandClass = function popoverHandClass() {
+    var str = $prefixCls + '-breadcrumbs-popover';
+    if (popoverClassName) str += ' ' + popoverClassName;
+    return str;
+  };
+  // 处理className
+  var handClass = function handClass() {
+    var str = $prefixCls + '-breadcrumbs';
+    if (isShrink) str += " ".concat($prefixCls, "-breadcrumbs-shrink");
+    if (className) str += ' ' + className;
+    return str;
+  };
+  return jsxs("div", Object.assign({
+    className: handClass(),
+    style: style,
+    ref: boxRef
+  }, {
+    children: [jsx("ul", Object.assign({
+      className: "breadcrumbs-list"
+    }, {
+      children: list.map(function (item, index) {
+        if (hideArr[index]) return;
+        var str = 'breadcrumbs-item';
+        if (index === list.length - 1) str += ' breadcrumbs-item-current';
+        if (index !== list.length - 1 && !item.disabled) str += ' breadcrumbs-item-click';
+        if (item.disabled) str += ' breadcrumbs-item-disabled';
+        return jsxs(Fragment, {
+          children: [jsx("li", Object.assign({
+            className: str,
+            style: {
+              maxWidth: item.maxWidth || maxWidth
+            },
+            onClick: clickItem(item, index)
+          }, {
+            children: jsx(AutoTips, {
+              children: jsx("span", Object.assign({
+                className: 'breadcrumbs-item-content'
+              }, {
+                children: item.label
+              }))
+            })
+          })), index !== list.length - 1 && jsx("li", Object.assign({
+            className: 'separator'
+          }, {
+            children: separator
+          })), showMore && index === 0 && jsxs(Fragment$1, {
+            children: [jsx(Popover, Object.assign({
+              content: handContent(),
+              overlayClassName: popoverHandClass(),
+              trigger: trigger,
+              placement: placement,
+              destroyTooltipOnHide: true
+            }, {
+              children: jsx("li", Object.assign({
+                className: 'breadcrumbs-item-more'
+              }, {
+                children: jsx(More, {})
+              }))
+            })), !hideArr[list.length - 1] && jsx("li", Object.assign({
+              className: 'separator'
+            }, {
+              children: separator
+            }))]
+          })]
+        }, index);
+      })
+    })), isBack && jsxs("div", Object.assign({
+      className: 'breadcrumbs-back'
+    }, {
+      children: [jsx("span", {
+        className: 'line'
+      }), jsx("div", Object.assign({
+        className: 'breadcrumbs-back-content',
+        onClick: clickBack
+      }, {
+        children: backRender ? backRender : jsxs(Fragment$1, {
+          children: [jsx(Return, {}), jsx("span", {
+            children: intl({
+              id: 'back'
+            })
+          })]
+        })
+      }))]
+    }))]
+  }));
+};
+
+export { Breadcrumbs, Breadcrumbs as default };

package/Breadcrumbs/lang/en_US.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    back: string;
+};
+export default _default;

package/Breadcrumbs/lang/index.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    zh: {
+        back: string;
+    };
+    en: {
+        back: string;
+    };
+};
+export default _default;

package/Breadcrumbs/lang/zh_CN.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    back: string;
+};
+export default _default;

package/Button/SplitButton.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @author Hanz
+ * @date 2021/8/4 上午10:22
+ * @description 分体式按钮组
+ */
+import React from 'react';
+import { ButtonProps } from '../Button';
+import { Placement } from '../Dropdown';
+import './index.scss';
+interface Option {
+    /**
+     * 按钮文字
+     */
+    label: string;
+    /**
+     * 按钮value
+     */
+    value?: any;
+    /**
+     * 禁用按钮
+     */
+    disabled?: boolean;
+    [name: string]: any;
+}
+type GroupOption = Array<Option>;
+export interface SplitButtonProps {
+    /**
+     * 分体式按钮文本
+     */
+    buttonText?: React.ReactNode;
+    /** 按钮选项数组 */
+    options?: Option[] | GroupOption[];
+    /** cls */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** popperClassName */
+    popperClassName?: string;
+    /** popperStyle */
+    popperStyle?: React.CSSProperties;
+    /** 禁用按钮组 */
+    disabled?: boolean;
+    /** 浮层位置 */
+    placement?: Placement;
+    /** button props */
+    buttonProps?: ButtonProps;
+    /**
+     * click callback
+     * @param option
+     * @param evt
+     */
+    onClick?: (option: Option, evt?: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * 自定义选项渲染
+     * @param option
+     */
+    optionRender?: (option: Option) => React.ReactNode;
+    /** 图标按钮 */
+    iconButton?: boolean;
+    /** 浮层渲染容器，默认body */
+    getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+}
+export default function SplitButton(props: SplitButtonProps): JSX.Element;
+export {};

package/Button/index.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @author Hanz
+ * @date 2021/8/4 上午10:21
+ * @description 按钮
+ */
+import React, { FunctionComponent } from 'react';
+import { TooltipProps } from '../Tooltip';
+import SplitButton from "./SplitButton";
+import './index.scss';
+export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
+    variant?: 'contained' | 'outlined' | 'text';
+    /** 设置按钮载入状态 */
+    loading?: boolean | {
+        delay: number;
+    };
+    /**
+     * 禁用时提示文字 disabled 为true有效
+     */
+    toolTipTitle?: NonNullable<React.ReactNode>;
+    /**
+     * tooltip props
+     */
+    TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
+    /**
+     * 设置危险按钮
+     */
+    danger?: boolean;
+    /** content */
+    children?: React.ReactNode;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 后置图标 */
+    endIcon?: React.ReactNode;
+    /** 前置图标 */
+    startIcon?: React.ReactNode;
+    /** 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 */
+    href?: string;
+    /** target */
+    target?: string;
+    [name: string]: any;
+}
+export interface IconButtonProps extends React.ButtonHTMLAttributes<any> {
+    /** 按钮形状 */
+    variant?: 'contained' | 'outlined' | 'text';
+    size?: 'small' | 'medium' | 'large';
+    /** tooltip title */
+    toolTipTitle?: NonNullable<React.ReactNode>;
+    /** 设置按钮载入状态 */
+    loading?: boolean | {
+        delay: number;
+    };
+    /**
+     * tooltip props
+     */
+    TooltipProps?: Omit<TooltipProps, 'title' | 'children'>;
+    /**
+     * 设置危险按钮
+     */
+    danger?: boolean;
+    /** 禁用 */
+    disabled?: boolean;
+    /** content */
+    children?: React.ReactNode;
+    /** 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 */
+    href?: string;
+    /** target */
+    target?: string;
+    [name: string]: any;
+}
+declare const InternalButton: FunctionComponent<ButtonProps>;
+declare const IconButton: FunctionComponent<IconButtonProps>;
+type mergedButtonType = typeof InternalButton & {
+    IconButton: typeof IconButton;
+    SplitButton: typeof SplitButton;
+};
+export declare const Button: mergedButtonType;
+export default Button;