@para-ui/core 3.0.55 → 3.0.56

package/OperateBtn/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @author linhd
+ * @date 2022/4/13 10:49 AM
+ * @description 表格操作按钮
+ */
+import React, { FunctionComponent } from 'react';
+import './index.scss';
+/** 按钮配置 */
+export interface OperateBtnListProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** key 表示唯一值 */
+    key?: string;
+    /** 显示名 */
+    label?: React.ReactNode;
+    /** 鼠标移上去显示的内容 */
+    toolTipTitle?: React.ReactNode;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 定位方向 */
+    placement?: "top-start" | "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top";
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 设置危险按钮 */
+    danger?: boolean;
+    /** 点击事件 */
+    onClick?: (item: OperateBtnListProps, e: any) => void | Promise<boolean | any>;
+    [name: string]: any;
+}
+export interface OperateBtnProps {
+    /** 样式class */
+    className?: string;
+    /** style */
+    style?: React.CSSProperties;
+    /** listItem索引下标 */
+    key?: string;
+    /** 大小 */
+    size?: 'small' | 'medium' | 'large';
+    /** 按钮列表配置 */
+    list?: OperateBtnListProps[];
+    /** 加载对象映射 */
+    loadingMapping?: {
+        [name: string]: true | false;
+    };
+    /** 显示几个, 多余的放到更多里面 */
+    showNum?: number;
+    /** 下拉框样式 */
+    popoverClassName?: string;
+    /** 定位方向 */
+    placement?: "top-start" | "bottom-end" | "bottom-start" | "bottom" | "left-end" | "left-start" | "left" | "right-end" | "right-start" | "right" | "top-end" | "top";
+    /** 点击是否关闭更多 */
+    clickCloseMore?: boolean;
+    /** 点击事件, 如果listItem里面存在onClick事件,则不触发改事件 */
+    onClick?: (item: OperateBtnListProps, e: any) => void | Promise<boolean | any>;
+}
+declare const OperateBtn: FunctionComponent<OperateBtnProps>;
+export default OperateBtn;

package/OperateBtn/index.js

@@ -0,0 +1,237 @@
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { r as regenerator } from '../_verture/index-beef914f.js';
+import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useState, Fragment } from 'react';
+import More from '@para-ui/icons/More';
+import { Button } from '../Button/index.js';
+import { Popover } from '../Popover/index.js';
+import AutoTips from '../AutoTips/index.js';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '../_verture/typeof-498dd2b1.js';
+import 'clsx';
+import '@para-ui/icons/LoadingF';
+import '@para-ui/icons/Forbid';
+import '../Tooltip/index.js';
+import 'rc-tooltip';
+import 'rc-tooltip/lib/placements';
+import '@para-ui/icons/Down';
+import '../_verture/index-77f9e0fb.js';
+import 'rc-dropdown';
+import '../_verture/usePopupContainer-87febeb9.js';
+import 'dayjs';
+import '@paraview/lib';
+import '../_verture/useFormatMessage-703f8b20.js';
+import '@para-ui/core/GlobalContext';
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2022/4/13 10:48 AM\n* @description 表格操作按钮\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-operate-btn {\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  align-items: center;\n}\n.paraui-v3-operate-btn > .operate-btn-line {\n  display: inline-block;\n  width: 1px;\n  background-color: rgba(54, 102, 214, 0.2);\n  margin: 0 12px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-small > .operate-btn-line {\n  height: 12px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-small button svg {\n  font-size: 18px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-medium > .operate-btn-line {\n  height: 14px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-medium button svg {\n  font-size: 24px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-large > .operate-btn-line {\n  height: 16px;\n}\n.paraui-v3-operate-btn.paraui-v3-operate-btn-large button > svg {\n  font-size: 28px;\n}\n\n.paraui-v3-operate-btn-popover .operate-btn-list {\n  padding: 8px 0;\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item {\n  padding: 0 12px;\n  max-width: 120px;\n  cursor: pointer;\n  color: rgb(46, 55, 67);\n  line-height: 36px;\n  text-align: left;\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item:hover {\n  background-color: rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item-disabled {\n  cursor: not-allowed;\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-operate-btn-popover .operate-btn-list > .operate-btn-list-item-danger {\n  color: rgb(235, 96, 84);\n}";
+styleInject(css_248z);
+
+var OperateBtn = function OperateBtn(props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    style = props.style,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'small' : _props$size,
+    list = props.list,
+    _props$showNum = props.showNum,
+    showNum = _props$showNum === void 0 ? 3 : _props$showNum,
+    popoverClassName = props.popoverClassName,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottom-end' : _props$placement,
+    _props$clickCloseMore = props.clickCloseMore,
+    clickCloseMore = _props$clickCloseMore === void 0 ? true : _props$clickCloseMore,
+    onClick = props.onClick,
+    loadingMapping = props.loadingMapping,
+    _props$key = props.key,
+    key = _props$key === void 0 ? 'key' : _props$key;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    openMoreCom = _useState2[0],
+    setOpenMoreCom = _useState2[1]; // 显示更多
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loadingInside = _useState4[0],
+    setLoadingInside = _useState4[1]; // 内部loading
+  // 点击选项
+  var clickItem = function clickItem(item, index) {
+    return function (e) {
+      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
+        var handKey, loading, result;
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(item.disabled || handLoadStatus(item, index))) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              if (clickCloseMore) closeMore();
+              handKey = item[key];
+              loading = loadingMapping && loadingMapping[handKey]; // 不存在外部loading
+              if (loading === undefined) {
+                loadingInside[index] = true;
+                setLoadingInside(Object.assign({}, loadingInside));
+              }
+              if (!item.onClick) {
+                _context.next = 12;
+                break;
+              }
+              _context.next = 9;
+              return item.onClick(item, e);
+            case 9:
+              result = _context.sent;
+              _context.next = 16;
+              break;
+            case 12:
+              if (!onClick) {
+                _context.next = 16;
+                break;
+              }
+              _context.next = 15;
+              return onClick(item, e);
+            case 15:
+              result = _context.sent;
+            case 16:
+              // 不存在外部loading
+              if (loading === undefined) {
+                loadingInside[index] = result;
+                setLoadingInside(Object.assign({}, loadingInside));
+              }
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+    };
+  };
+  // 点击更多
+  var clickMore = function clickMore() {
+    setOpenMoreCom(true);
+  };
+  // 关闭显示更多
+  var closeMore = function closeMore(bol) {
+    if (bol) return;
+    setOpenMoreCom(false);
+  };
+  // 处理loading
+  var handLoadStatus = function handLoadStatus(item, index) {
+    var loading;
+    var handKey = item[key];
+    loading = loadingMapping && loadingMapping[handKey];
+    // 外部没有传laoding
+    if (loading === undefined) {
+      loading = loadingInside[index];
+    }
+    return loading;
+  };
+  // 处理handClassPopover
+  var handClassPopover = function handClassPopover() {
+    var str = $prefixCls + '-operate-btn-popover';
+    if (popoverClassName) str += ' ' + popoverClassName;
+    return str;
+  };
+  var morePopoverContent = function morePopoverContent() {
+    var arr = (list === null || list === void 0 ? void 0 : list.slice(showNum, list === null || list === void 0 ? void 0 : list.length)) || [];
+    var handPopoverClass = function handPopoverClass(item) {
+      var str = 'operate-btn-list-item';
+      if (item.disabled) str += ' operate-btn-list-item-disabled';
+      if (item.danger) str += ' operate-btn-list-item-danger';
+      if (item.className) str += ' ' + className;
+      return str;
+    };
+    return jsx("div", Object.assign({
+      className: "operate-btn-list"
+    }, {
+      children: arr.map(function (item, index) {
+        return jsx("div", Object.assign({
+          className: handPopoverClass(item),
+          onClick: clickItem(item, index + showNum),
+          style: style
+        }, {
+          children: jsx(AutoTips, {
+            children: item.label || item.toolTipTitle
+          })
+        }), index);
+      })
+    }));
+  };
+  // 更多按钮
+  var moreRender = function moreRender() {
+    return jsx(Fragment$1, {
+      children: list && list.length > showNum + 1 && jsx(Popover, Object.assign({
+        placement: "bottom-end",
+        visible: openMoreCom,
+        content: morePopoverContent(),
+        onVisibleChange: closeMore,
+        overlayClassName: handClassPopover()
+      }, {
+        children: jsx(Button.IconButton, Object.assign({
+          variant: 'text',
+          toolTipTitle: !openMoreCom && '更多',
+          TooltipProps: {
+            placement: placement,
+            arrow: false
+          },
+          onClick: clickMore,
+          className: 'operate-btn-more'
+        }, {
+          children: jsx(More, {})
+        }))
+      }))
+    });
+  };
+  var handClass = function handClass() {
+    var str = $prefixCls + '-operate-btn';
+    if (className) str += ' ' + className;
+    if (size) str += " ".concat($prefixCls, "-operate-btn-").concat(size);
+    return str;
+  };
+  return jsxs("div", Object.assign({
+    className: handClass(),
+    style: style
+  }, {
+    children: [list === null || list === void 0 ? void 0 : list.map(function (item, index) {
+      var bol = true;
+      // 满足这个条件,有更多按钮
+      if (list.length > showNum + 1) {
+        // 超出显示个数不显示
+        if (showNum < index + 1) {
+          return null;
+        }
+      } else {
+        // 显示在外面
+        // 最后一个
+        if (list.length === index + 1) {
+          bol = false;
+        }
+      }
+      return jsxs(Fragment, {
+        children: [jsx(Button.IconButton, Object.assign({
+          className: item.className,
+          style: item.style,
+          variant: 'text',
+          toolTipTitle: item.toolTipTitle || item.label || '',
+          TooltipProps: {
+            placement: item.placement || placement,
+            arrow: false
+          },
+          loading: handLoadStatus(item, index),
+          disabled: item.disabled,
+          danger: item.danger,
+          onClick: clickItem(item, index)
+        }, {
+          children: item.icon
+        })), bol && jsx("span", {
+          className: 'operate-btn-line'
+        })]
+      }, index);
+    }), moreRender()]
+  }));
+};
+
+export { OperateBtn as default };

package/OperateBtn/lang/en_US.d.ts

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

package/OperateBtn/lang/index.d.ts

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

package/OperateBtn/lang/zh_CN.d.ts

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

package/PageHeader/horizontalMeun.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author linhd
+ * @date 2021/8/10 15:34
+ * @description 横向菜单详情list
+ */
+import { FunctionComponent } from 'react';
+import { MenuListProps } from './interface';
+export declare const HorizontalMenu: FunctionComponent<MenuListProps>;
+export default HorizontalMenu;

package/PageHeader/horizontalMeunRight.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author linhd
+ * @date 2021/8/10 16:16
+ * @description 横向菜单右侧
+ */
+import { FunctionComponent } from 'react';
+import { FooterProps } from './interface';
+export declare const HorizontalMeunRight: FunctionComponent<FooterProps>;
+export default HorizontalMeunRight;

package/PageHeader/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @author linhd
+ * @date 2021/11/17 14:30
+ * @description 页头
+ */
+import { FunctionComponent } from 'react';
+import { PageHeaderProps } from './interface';
+import './index.scss';
+export declare const PageHeader: FunctionComponent<PageHeaderProps>;
+export default PageHeader;