@para-ui/core 3.0.0 → 3.0.2

package/AutoBox/index.js

@@ -1,9 +1,11 @@
 import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect, useMemo, Fragment } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, Fragment as Fragment$1 } from 'react';
 import { Popover } from '../Popover/index.js';
-import More from '@para-ui/icons/More';
+import { createPortal } from 'react-dom';
 import { UUID } from '@paraview/lib';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
+import More from '@para-ui/icons/More';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Tooltip/index.js';
@@ -11,7 +13,117 @@ import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-auto-box {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.paraui-auto-box > .auto-box-more {\n  display: inline-block;\n  height: 100%;\n  cursor: pointer;\n}\n\n.paraui-auto-box-popover .auto-box-popover-content {\n  display: flex;\n  flex-direction: column;\n}";
+var Protal = function Protal(props) {
+  var children = props.children,
+      className = props.className,
+      anchorEl = props.anchorEl,
+      onClose = props.onClose;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      styleCom = _useState2[0],
+      setStyleCom = _useState2[1];
+
+  var constData = useRef({
+    uuid: $prefixCls + '-protal-box-content-' + UUID()
+  });
+  var domRef = useRef();
+  var contentRef = useRef();
+  useEffect(function () {
+    handStyle();
+    window.addEventListener('click', clickFunc);
+    return function () {
+      domRef && domRef.current && domRef.current.remove();
+      window.removeEventListener('click', clickFunc);
+    };
+  }, []);
+  /**
+   * 查找元素
+   * @param el 当前元素
+   * @param selector 查找元素class
+   */
+
+  var closest = function closest(el, selector) {
+    var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+
+    while (el) {
+      if (matchesSelector.call(el, selector)) {
+        break;
+      }
+
+      el = el.parentElement;
+    }
+
+    return el;
+  };
+  /** 全局监听点击事件 */
+
+
+  var clickFunc = function clickFunc(e) {
+    if (!constData.current) return;
+    var bol = closest(e.target, '.' + constData.current.uuid); // 是否存在下拉当中
+
+    if (!bol) onClose && onClose();
+  };
+  /** 处理内容的定位样式 */
+
+
+  var handStyle = function handStyle() {
+    if (!anchorEl || !contentRef.current) return;
+    var posDomRect = anchorEl.getBoundingClientRect();
+    var contentDomRect = contentRef.current.getBoundingClientRect();
+    var json = {
+      opacity: 1,
+      left: posDomRect.left,
+      top: posDomRect.top + posDomRect.height
+    };
+    var winHeight = window.innerHeight;
+    var winWidth = window.innerWidth;
+
+    if (json.left + contentDomRect.width > winWidth) {
+      json.left = winWidth - contentDomRect.width - 8;
+      if (json.left < 0) json.left = 0;
+    }
+
+    if (json.top + contentDomRect.height > winHeight) {
+      json.top = winHeight - contentDomRect.height - 8;
+      if (json.top < 0) json.top = 0;
+    }
+
+    setStyleCom(json);
+  };
+  /** 处理className */
+
+
+  var handClass = function handClass() {
+    var str = $prefixCls + '-protal-box';
+    if (className) str += ' ' + className;
+    return str;
+  };
+
+  var handContent = function handContent() {
+    return jsxs("div", Object.assign({
+      className: handClass(),
+      ref: domRef
+    }, {
+      children: [jsx("div", {
+        className: "protal-mask"
+      }), jsx("div", Object.assign({
+        className: 'protal-content ' + constData.current.uuid,
+        style: styleCom,
+        ref: contentRef
+      }, {
+        children: children
+      }))]
+    }));
+  };
+
+  return jsx(Fragment, {
+    children: /*#__PURE__*/createPortal(handContent(), document.getElementsByTagName('body')[0])
+  });
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-auto-box {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.paraui-v3-auto-box > .auto-box-more {\n  display: inline-block;\n  height: 100%;\n  cursor: pointer;\n}\n\n.paraui-v3-auto-box-popover .auto-box-popover-content {\n  display: flex;\n  flex-direction: column;\n}\n\n.paraui-v3-protal-box {\n  position: fixed;\n  z-index: 1500;\n  inset: 0px;\n}\n.paraui-v3-protal-box .protal-mask {\n  z-index: -1;\n  position: fixed;\n  inset: 0px;\n  background-color: transparent;\n}\n.paraui-v3-protal-box .protal-content {\n  border-radius: 4px;\n  box-shadow: 0px 2px 8px 0px rgba(171, 176, 185, 0.4);\n  background-color: white;\n  outline: 0;\n  position: absolute;\n  max-width: calc(100% - 32px);\n  min-width: 16px;\n  max-height: calc(100% - 32px);\n  min-height: 16px;\n  overflow-x: hidden;\n  overflow-y: auto;\n  opacity: 0;\n  transform: none;\n  transition: opacity 243ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 162ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
 styleInject(css_248z);
 
 var AutoBox = function AutoBox(props) {
@@ -45,15 +157,9 @@ var AutoBox = function AutoBox(props) {
       setOpenMoreCom = _useState6[1]; // 显示更多
 
 
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      anchorElCom = _useState8[0],
-      setAnchorElCom = _useState8[1]; // 更多定位元素
-
-
-  var _useState9 = useState({}),
-      _useState10 = _slicedToArray(_useState9, 1),
-      timer = _useState10[0];
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 1),
+      timer = _useState8[0];
 
   var posDom = useRef(); // 监听打开更多
 
@@ -61,11 +167,7 @@ var AutoBox = function AutoBox(props) {
     if (props.openMore !== undefined) {
       setOpenMoreCom(props.openMore);
     }
-  }, [props.openMore]); // 监听更多定位元素
-
-  useEffect(function () {
-    if (anchorEl) setAnchorElCom(anchorEl);
-  }, [anchorEl]);
+  }, [props.openMore]);
   useEffect(function () {
     if (props.showNum !== undefined) return;
     changeSize();
@@ -87,17 +189,17 @@ var AutoBox = function AutoBox(props) {
     } else {
       onShowMore && onShowMore(false);
     }
-  }, [list, morePos, onShowMore]); // 关闭显示更多
+  }, [list, morePos, onShowMore]);
+
+  var onVisibleChange = function onVisibleChange(bol) {
+    if (bol) return setOpenMoreCom(true);
+    closeMore();
+  }; // 关闭显示更多
+
 
   var closeMore = function closeMore() {
     setOpenMoreCom(false);
     onCloseMore && onCloseMore();
-  }; // 点击显示更多
-
-
-  var clickMore = function clickMore(e) {
-    setOpenMoreCom(true);
-    setAnchorElCom(posDom.current);
   }; // 关闭显示更多
 
 
@@ -135,7 +237,7 @@ var AutoBox = function AutoBox(props) {
 
 
   var handClass = function handClass() {
-    var str = 'auto-box paraui-auto-box';
+    var str = $prefixCls + '-auto-box';
     if (classOne) str += ' ' + classOne;
     if (className) str += ' ' + className;
     return str;
@@ -143,60 +245,70 @@ var AutoBox = function AutoBox(props) {
 
 
   var handClassPopover = function handClassPopover() {
-    var str = 'auto-box-popover paraui-auto-box-popover';
+    var str = $prefixCls + '-auto-box-popover';
     if (popoverClassName) str += ' ' + popoverClassName;
     return str;
-  };
-  /* 更多下拉 */
-
-
-  var MoreMemo = useMemo(function () {
-    return openMoreCom && jsx(Popover, Object.assign({
-      open: openMoreCom,
-      anchorEl: anchorElCom,
-      onClose: closeMore,
-      anchorOrigin: {
-        vertical: 'bottom',
-        horizontal: 'left'
-      },
-      transformOrigin: {
-        vertical: 'top',
-        horizontal: 'left'
-      },
-      className: handClassPopover()
+  }; // 处理更多内容
+
+
+  var handMoreDom = function handMoreDom() {
+    return jsx("div", Object.assign({
+      className: "auto-box-popover-content"
     }, {
-      children: jsx("div", Object.assign({
-        className: "auto-box-popover-content"
-      }, {
-        children: list && list.map(function (item, index) {
-          if (morePos !== null && morePos > index) return null;
-          return jsx(Fragment, {
-            children: item
-          }, index);
-        })
-      }))
+      children: list && list.map(function (item, index) {
+        if (morePos !== null && morePos > index) return null;
+        return jsx(Fragment$1, {
+          children: item
+        }, index);
+      })
     }));
-  }, [openMoreCom, anchorElCom, list, morePos, popoverClassName]);
+  };
+  /** 处理更多按钮 */
+
+
+  var handMoreBtn = function handMoreBtn() {
+    if (morePos !== null && list.length > morePos && !hideMore) {
+      return jsx(Popover, Object.assign({
+        open: openMoreCom,
+        content: handMoreDom(),
+        overlayClassName: handClassPopover(),
+        placement: "bottomLeft",
+        onVisibleChange: onVisibleChange
+      }, {
+        children: jsx("div", Object.assign({
+          className: "auto-box-more",
+          ref: posDom
+        }, {
+          children: moreCustomize ? moreCustomize : jsx(More, {})
+        }))
+      }));
+    }
+  };
+  /** 自定义更多按钮 */
+
+
+  var handCustomDialog = function handCustomDialog() {
+    if (anchorEl && openMoreCom) {
+      return jsx(Protal, Object.assign({
+        className: handClassPopover(),
+        anchorEl: anchorEl,
+        onClose: closeMore
+      }, {
+        children: handMoreDom()
+      }));
+    }
+  };
+
   return jsxs("div", Object.assign({
     className: handClass(),
     style: style
   }, {
     children: [list.map(function (item, index) {
       if (morePos !== null && morePos <= index) return null;
-      return jsx(Fragment, {
+      return jsx(Fragment$1, {
         children: item
       }, index);
-    }), function () {
-      if (morePos !== null && list.length > morePos && !hideMore) {
-        return jsx("div", Object.assign({
-          className: "auto-box-more",
-          ref: posDom,
-          onClick: clickMore
-        }, {
-          children: moreCustomize ? moreCustomize : jsx(More, {})
-        }));
-      }
-    }(), MoreMemo]
+    }), handMoreBtn(), handCustomDialog()]
   }));
 };
 

package/AutoBox/protal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @author linhd
+ * @date 2022/8/10 10:32 AM
+ * @description 全局弹窗-自定义用的
+ */
+import { FunctionComponent, ReactNode } from 'react';
+export interface ProtalBoxProps {
+    className?: string;
+    /** 定位元素 */
+    anchorEl?: any;
+    /** 关闭事件 */
+    onClose?: () => void;
+    children?: ReactNode;
+    [name: string]: any;
+}
+export declare const Protal: FunctionComponent<ProtalBoxProps>;
+export default Protal;

package/AutoTips/index.js

@@ -2,13 +2,14 @@ import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import { Tooltip } from '../Tooltip/index.js';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2021/11/1 20:28\n* @description 文字隐藏...\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-auto-tips {\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-auto-tips > .auto-tips-content {\n  display: inline;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.paraui-auto-tips-tooltip > div {\n  max-height: calc(100vh - 25px);\n  overflow: auto;\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author linhd\n* @date 2021/11/1 20:28\n* @description 文字隐藏...\n*/\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-auto-tips {\n  max-width: 100%;\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.paraui-v3-auto-tips > .auto-tips-content {\n  display: inline;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.paraui-v3-auto-tips-tooltip > div {\n  max-height: calc(100vh - 25px);\n  overflow: auto;\n}";
 styleInject(css_248z);
 
 var AutoTips = function AutoTips(props) {
@@ -53,7 +54,7 @@ var AutoTips = function AutoTips(props) {
 
 
   var handClass = function handClass() {
-    var str = 'paraui-auto-tips';
+    var str = $prefixCls + '-auto-tips';
     if (className) str += ' ' + className;
     return str;
   };
@@ -70,7 +71,7 @@ var AutoTips = function AutoTips(props) {
       placement: placement,
       interactive: interactive,
       boundariesElement: 'viewport',
-      className: 'paraui-auto-tips-tooltip'
+      className: $prefixCls + '-auto-tips-tooltip'
     }, {
       children: jsx("div", Object.assign({
         className: "auto-tips-content"

package/Breadcrumbs/index.js

@@ -6,6 +6,7 @@ import { Popover } from '../Popover/index.js';
 import AutoTips from '../AutoTips/index.js';
 import More from '@para-ui/icons/More';
 import { UUID } from '@paraview/lib';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
 import '../_verture/tslib.es6-55ed4bd2.js';
 import '../Tooltip/index.js';
@@ -13,7 +14,7 @@ import 'rc-tooltip';
 import 'rc-tooltip/lib/placements';
 import 'clsx';
 
-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-breadcrumbs {\n  display: inline-block;\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  line-height: 0;\n  height: 17px;\n}\n.paraui-breadcrumbs.paraui-breadcrumbs-shrink {\n  white-space: nowrap;\n}\n.paraui-breadcrumbs > div {\n  display: inline-block;\n  line-height: 17px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-breadcrumbs > div svg {\n  font-size: 14px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-breadcrumbs > div span {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-breadcrumbs > div .paraui-auto-tips {\n  line-height: 0;\n}\n.paraui-breadcrumbs > div .paraui-auto-tips .auto-tips-content {\n  line-height: 17px;\n}\n.paraui-breadcrumbs > div .paraui-auto-tips span {\n  line-height: 17px;\n}\n.paraui-breadcrumbs > .breadcrumbs-separator {\n  user-select: none;\n  margin: 0 8px;\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click {\n  cursor: pointer;\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-click:hover span {\n  color: rgb(54, 102, 214);\n}\n.paraui-breadcrumbs > .breadcrumbs-item-disabled {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-breadcrumbs > .more-breadcrumbs {\n  cursor: pointer;\n}\n.paraui-breadcrumbs > .current-breadcrumbs {\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n}\n\n.paraui-breadcrumbs-popover > .paraui-popover-content > .paraui-popover-inner {\n  display: flex;\n  align-items: center;\n  height: 36px;\n  line-height: 0;\n  padding: 0 12px;\n}";
+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/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-breadcrumbs {\n  display: inline-block;\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  line-height: 0;\n  height: 17px;\n}\n.paraui-v3-breadcrumbs.paraui-v3-breadcrumbs-shrink {\n  white-space: nowrap;\n}\n.paraui-v3-breadcrumbs > div {\n  display: inline-block;\n  line-height: 17px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > div svg {\n  font-size: 14px;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > div span {\n  display: inline-block;\n  line-height: 0;\n  vertical-align: middle;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-breadcrumbs > div .breadcrumbs-auto-tips {\n  line-height: 0;\n}\n.paraui-v3-breadcrumbs > div .breadcrumbs-auto-tips .auto-tips-content {\n  line-height: 17px;\n}\n.paraui-v3-breadcrumbs > div .breadcrumbs-auto-tips span {\n  line-height: 17px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-separator {\n  user-select: none;\n  margin: 0 8px;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click:hover svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-click:hover span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-breadcrumbs > .breadcrumbs-item-disabled {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-breadcrumbs > .more-breadcrumbs {\n  cursor: pointer;\n}\n.paraui-v3-breadcrumbs > .current-breadcrumbs {\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n}\n\n.paraui-v3-breadcrumbs-popover > .component-popover-content > .component-popover-inner {\n  display: flex;\n  align-items: center;\n  height: 36px;\n  line-height: 0;\n  padding: 0 12px;\n}";
 styleInject(css_248z);
 
 var Breadcrumbs = function Breadcrumbs(props) {
@@ -29,7 +30,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
       onClickItem = props.onClickItem,
       style = props.style;
 
-  var _useState = useState('breadcrumbs-' + UUID()),
+  var _useState = useState($prefixCls + '-breadcrumbs-' + UUID()),
       _useState2 = _slicedToArray(_useState, 1),
       classStr = _useState2[0];
 
@@ -113,7 +114,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
 
 
   var popoverHandClass = function popoverHandClass() {
-    var str = 'paraui-breadcrumbs-popover';
+    var str = $prefixCls + '-breadcrumbs-popover';
     if (popoverClassName) str += ' ' + popoverClassName;
     return str;
   }; // 关闭弹出菜单
@@ -125,8 +126,8 @@ var Breadcrumbs = function Breadcrumbs(props) {
 
 
   var handClass = function handClass() {
-    var str = 'paraui-breadcrumbs ' + classStr;
-    if (isShrink) str += ' paraui-breadcrumbs-shrink';
+    var str = $prefixCls + '-breadcrumbs ' + classStr;
+    if (isShrink) str += " ".concat($prefixCls, "-breadcrumbs-shrink");
     if (className) str += ' ' + className;
     return str;
   };
@@ -198,9 +199,11 @@ var Breadcrumbs = function Breadcrumbs(props) {
             onClick: handleClick(item),
             className: handClassItem(item, index, listCom)
           }, {
-            children: jsx(AutoTips, {
+            children: jsx(AutoTips, Object.assign({
+              className: 'breadcrumbs-auto-tips'
+            }, {
               children: item.label
-            })
+            }))
           })), showSeparator && jsx("div", Object.assign({
             className: "breadcrumbs-separator"
           }, {

package/Button/index.d.ts

@@ -35,6 +35,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
     endIcon?: React.ReactNode;
     /** 前置图标 */
     startIcon?: React.ReactNode;
+    /** 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 */
+    href?: string;
+    /** target */
+    target?: string;
     [name: string]: any;
 }
 export interface IconButtonProps extends React.ButtonHTMLAttributes<any> {
@@ -59,6 +63,10 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<any> {
     disabled?: boolean;
     /** content */
     children?: React.ReactNode;
+    /** 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 */
+    href?: string;
+    /** target */
+    target?: string;
     [name: string]: any;
 }
 declare const InternalButton: FunctionComponent<ButtonProps>;