bi-open-menu-sdk - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

declaration/components.d.ts

@@ -6,2 +6,4 @@ /**
 import './index.scss';
+export declare const CUSTOM_MENU_TOOLTIP_EVENT = "CUSTOM_MENU_TOOLTIP_EVENT";
+export declare const CUSTOM_MENU_RENDERED_EVENT = "CUSTOM_MENU_RENDERED_EVENT";
 export declare type IconComponent<P = React.HTMLAttributes<HTMLElement>> = React.FC<P>;
@@ -14,9 +16,2 @@ export declare const IconWrapper: IconComponent;
 /**
- * tooltip 提示
- * 注意根节点的 position 要保证为 relative
- */
-export declare const Tooltip: React.FC<{
-    title?: string;
-}>;
-/**
  * 默认自定义菜单
@@ -27,3 +22,5 @@ * @param param0
 export declare const MenuItem: React.FC<{
+    /** root element className */
     className?: string;
+    /** root element style */
     style?: React.StyleHTMLAttributes<HTMLDivElement>['style'];
@@ -30,0 +27,0 @@ /** 菜单标题 */

declaration/index.d.ts

 export { I18n, getStringRealLength, getAliasName, formatNumberWithConfig, formatNumber, transposeData, LATEST_VERSION, CHANGE_LOGS, revisal, OLDEST_VERSION, getRivisalRange, } from 'bi-open';
 export { Interfaces } from './interfaces';
 export { createBIComponent } from 'bi-open-react-sdk';
-export { IconDefault, IconLoading, IconWrapper, Tooltip, MenuItem } from './components';
+export { IconDefault, IconLoading, IconWrapper, MenuItem } from './components';

dist/main/components.js

@@ -10,3 +10,3 @@ "use strict";
 });
-exports.MenuItem = exports.Tooltip = exports.IconLoading = exports.IconDefault = exports.IconWrapper = void 0;
+exports.MenuItem = exports.IconLoading = exports.IconDefault = exports.IconWrapper = exports.CUSTOM_MENU_RENDERED_EVENT = exports.CUSTOM_MENU_TOOLTIP_EVENT = void 0;
 
@@ -19,2 +19,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray.js"));
 
+var CUSTOM_MENU_TOOLTIP_EVENT = 'CUSTOM_MENU_TOOLTIP_EVENT';
+exports.CUSTOM_MENU_TOOLTIP_EVENT = CUSTOM_MENU_TOOLTIP_EVENT;
+var CUSTOM_MENU_RENDERED_EVENT = 'CUSTOM_MENU_RENDERED_EVENT';
+exports.CUSTOM_MENU_RENDERED_EVENT = CUSTOM_MENU_RENDERED_EVENT;
+
 var IconWrapper = function IconWrapper(props) {
@@ -48,53 +53,2 @@ return React.createElement("i", props, React.createElement("svg", {
 
-var Tooltip = function Tooltip(props) {
-  var _React$useState = React.useState({
-    left: 0,
-    top: 0
-  }),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      pos = _React$useState2[0],
-      setPos = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      visible = _React$useState4[0],
-      setVisible = _React$useState4[1];
-
-  var ref = React.useRef();
-  var childRef = React.useRef();
-  React.useEffect(function () {
-    if (childRef.current && ref.current) {
-      setPos({
-        left: (childRef.current.offsetLeft + childRef.current.offsetWidth - ref.current.offsetWidth) / 2,
-        top: -ref.current.offsetHeight
-      });
-    }
-  }, []);
-  var handleMouseEnter = React.useCallback(function () {
-    setVisible(true);
-  }, []);
-  var handleMouseLeave = React.useCallback(function () {
-    setVisible(false);
-  }, []);
-  return React.createElement(React.Fragment, null, React.createElement("div", {
-    ref: ref,
-    className: "custom-menu-tooltip",
-    style: {
-      visibility: visible ? 'visible' : 'hidden',
-      left: pos.left,
-      top: pos.top
-    }
-  }, React.createElement("div", {
-    className: "custom-menu-tooltip-arrow"
-  }), React.createElement("div", {
-    className: "custom-menu-tooltip-content"
-  }, props.title)), React.cloneElement(React.Children.only(props.children), {
-    ref: childRef,
-    onMouseOver: handleMouseEnter,
-    onMouseOut: handleMouseLeave
-  }));
-};
-
-exports.Tooltip = Tooltip;
-
 var MenuItem = function MenuItem(_ref) {
@@ -113,23 +67,57 @@ var className = _ref.className,
 
-  var _React$useState5 = React.useState(''),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      icon = _React$useState6[0],
-      setIcon = _React$useState6[1];
+  var _React$useState = React.useState(''),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      icon = _React$useState2[0],
+      setIcon = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      hoverTipVisible = _React$useState4[0],
+      setHoverTipVisible = _React$useState4[1];
+
   var ref = React.useRef();
   React.useEffect(function () {
     if (ref.current) {
+      var _window$globalConfig;
+
       var doc = ref.current.getRootNode();
-      var container = doc === null || doc === void 0 ? void 0 : doc.querySelector('[data-custom-component-root]');
+      var sandboxId = (_window$globalConfig = window.globalConfig) === null || _window$globalConfig === void 0 ? void 0 : _window$globalConfig.sandboxId;
+      var iconElem = doc.querySelector("#custom-component-icon");
 
-      if (container) {
-        var componentType = container.getAttribute('data-custom-component-type');
-        var iconElem = doc.querySelector("#custom-component-icon");
+      if (iconElem && iconElem.textContent.indexOf(".icon-".concat(sandboxId)) >= 0) {
+        setIcon("icon-".concat(sandboxId));
+      }
+    }
+  }, []);
+  React.useEffect(function () {
+    if (ref.current) {
+      var container = ref.current.closest('[data-custom-component-root]');
 
-        if (iconElem) {
-          setIcon("icon-".concat(componentType));
-        }
+      if (typeof hoverTip === 'string' && container) {
+        container.dispatchEvent(new CustomEvent(CUSTOM_MENU_TOOLTIP_EVENT, {
+          detail: {
+            title: hoverTip,
+            visible: hoverTipVisible
+          }
+        }));
       }
     }
+  }, [hoverTip, hoverTipVisible]);
+  React.useEffect(function () {
+    if (ref.current) {
+      var container = ref.current.closest('[data-custom-component-root]');
+
+      if (container) {
+        setTimeout(function () {
+          container.dispatchEvent(new CustomEvent(CUSTOM_MENU_RENDERED_EVENT));
+        }, 1000);
+      }
+    }
   }, []);
+  var handleMouseEnter = React.useCallback(function (e) {
+    setHoverTipVisible(true);
+  }, []);
+  var handleMouseLeave = React.useCallback(function (e) {
+    setHoverTipVisible(false);
+  }, []);
   var iconContent = React.createElement(IconDefault, {
@@ -156,4 +144,8 @@ className: "default-icon"
   }, [disabled, onClick]);
-  var content = React.createElement("div", {
-    className: "custom-card-menu ".concat(disabled ? 'disabled' : ''),
+  return React.createElement("div", {
+    ref: ref,
+    className: "custom-card-menu ".concat(disabled ? 'disabled' : '', " ").concat(className || ''),
+    onMouseOver: handleMouseEnter,
+    onMouseOut: handleMouseLeave,
+    style: style,
     onClick: handleClick
@@ -166,16 +158,4 @@ }, React.createElement("div", {
   }, title));
-
-  if (hoverTip) {
-    content = React.createElement(Tooltip, {
-      title: hoverTip
-    }, content);
-  }
-
-  return React.createElement("div", {
-    ref: ref,
-    style: style,
-    className: "custom-card-menu-wraper ".concat(className)
-  }, content);
 };
 
 exports.MenuItem = MenuItem;

dist/main/index.js

@@ -102,8 +102,2 @@ "use strict";
 });
-Object.defineProperty(exports, "Tooltip", {
-  enumerable: true,
-  get: function get() {
-    return _components.Tooltip;
-  }
-});
 Object.defineProperty(exports, "MenuItem", {
@@ -110,0 +104,0 @@ enumerable: true,

dist/module/components.js

 import _slicedToArray from "@babel/runtime/helpers/slicedToArray.js";
 import * as React from 'react';
 import './index.scss';
+export var CUSTOM_MENU_TOOLTIP_EVENT = 'CUSTOM_MENU_TOOLTIP_EVENT';
+export var CUSTOM_MENU_RENDERED_EVENT = 'CUSTOM_MENU_RENDERED_EVENT';
 export var IconWrapper = function IconWrapper(props) {
@@ -23,50 +25,2 @@ return React.createElement("i", props, React.createElement("svg", {
 };
-export var Tooltip = function Tooltip(props) {
-  var _React$useState = React.useState({
-    left: 0,
-    top: 0
-  }),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      pos = _React$useState2[0],
-      setPos = _React$useState2[1];
-
-  var _React$useState3 = React.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      visible = _React$useState4[0],
-      setVisible = _React$useState4[1];
-
-  var ref = React.useRef();
-  var childRef = React.useRef();
-  React.useEffect(function () {
-    if (childRef.current && ref.current) {
-      setPos({
-        left: (childRef.current.offsetLeft + childRef.current.offsetWidth - ref.current.offsetWidth) / 2,
-        top: -ref.current.offsetHeight
-      });
-    }
-  }, []);
-  var handleMouseEnter = React.useCallback(function () {
-    setVisible(true);
-  }, []);
-  var handleMouseLeave = React.useCallback(function () {
-    setVisible(false);
-  }, []);
-  return React.createElement(React.Fragment, null, React.createElement("div", {
-    ref: ref,
-    className: "custom-menu-tooltip",
-    style: {
-      visibility: visible ? 'visible' : 'hidden',
-      left: pos.left,
-      top: pos.top
-    }
-  }, React.createElement("div", {
-    className: "custom-menu-tooltip-arrow"
-  }), React.createElement("div", {
-    className: "custom-menu-tooltip-content"
-  }, props.title)), React.cloneElement(React.Children.only(props.children), {
-    ref: childRef,
-    onMouseOver: handleMouseEnter,
-    onMouseOut: handleMouseLeave
-  }));
-};
 export var MenuItem = function MenuItem(_ref) {
@@ -85,23 +39,57 @@ var className = _ref.className,
 
-  var _React$useState5 = React.useState(''),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      icon = _React$useState6[0],
-      setIcon = _React$useState6[1];
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      icon = _React$useState2[0],
+      setIcon = _React$useState2[1];
 
+  var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      hoverTipVisible = _React$useState4[0],
+      setHoverTipVisible = _React$useState4[1];
+
   var ref = React.useRef();
   React.useEffect(function () {
     if (ref.current) {
+      var _window$globalConfig;
+
       var doc = ref.current.getRootNode();
-      var container = doc === null || doc === void 0 ? void 0 : doc.querySelector('[data-custom-component-root]');
+      var sandboxId = (_window$globalConfig = window.globalConfig) === null || _window$globalConfig === void 0 ? void 0 : _window$globalConfig.sandboxId;
+      var iconElem = doc.querySelector("#custom-component-icon");
 
-      if (container) {
-        var componentType = container.getAttribute('data-custom-component-type');
-        var iconElem = doc.querySelector("#custom-component-icon");
+      if (iconElem && iconElem.textContent.indexOf(".icon-".concat(sandboxId)) >= 0) {
+        setIcon("icon-".concat(sandboxId));
+      }
+    }
+  }, []);
+  React.useEffect(function () {
+    if (ref.current) {
+      var container = ref.current.closest('[data-custom-component-root]');
 
-        if (iconElem) {
-          setIcon("icon-".concat(componentType));
-        }
+      if (typeof hoverTip === 'string' && container) {
+        container.dispatchEvent(new CustomEvent(CUSTOM_MENU_TOOLTIP_EVENT, {
+          detail: {
+            title: hoverTip,
+            visible: hoverTipVisible
+          }
+        }));
       }
     }
+  }, [hoverTip, hoverTipVisible]);
+  React.useEffect(function () {
+    if (ref.current) {
+      var container = ref.current.closest('[data-custom-component-root]');
+
+      if (container) {
+        setTimeout(function () {
+          container.dispatchEvent(new CustomEvent(CUSTOM_MENU_RENDERED_EVENT));
+        }, 1000);
+      }
+    }
   }, []);
+  var handleMouseEnter = React.useCallback(function (e) {
+    setHoverTipVisible(true);
+  }, []);
+  var handleMouseLeave = React.useCallback(function (e) {
+    setHoverTipVisible(false);
+  }, []);
   var iconContent = React.createElement(IconDefault, {
@@ -128,4 +116,8 @@ className: "default-icon"
   }, [disabled, onClick]);
-  var content = React.createElement("div", {
-    className: "custom-card-menu ".concat(disabled ? 'disabled' : ''),
+  return React.createElement("div", {
+    ref: ref,
+    className: "custom-card-menu ".concat(disabled ? 'disabled' : '', " ").concat(className || ''),
+    onMouseOver: handleMouseEnter,
+    onMouseOut: handleMouseLeave,
+    style: style,
     onClick: handleClick
@@ -138,14 +130,2 @@ }, React.createElement("div", {
   }, title));
-
-  if (hoverTip) {
-    content = React.createElement(Tooltip, {
-      title: hoverTip
-    }, content);
-  }
-
-  return React.createElement("div", {
-    ref: ref,
-    style: style,
-    className: "custom-card-menu-wraper ".concat(className)
-  }, content);
 };

dist/module/index.js

 export { I18n, getStringRealLength, getAliasName, formatNumberWithConfig, formatNumber, transposeData, LATEST_VERSION, CHANGE_LOGS, revisal, OLDEST_VERSION, getRivisalRange } from 'bi-open';
 export { Interfaces } from './interfaces';
 export { createBIComponent } from 'bi-open-react-sdk';
-export { IconDefault, IconLoading, IconWrapper, Tooltip, MenuItem } from './components';
+export { IconDefault, IconLoading, IconWrapper, MenuItem } from './components';

package.json

 {
   "name": "bi-open-menu-sdk",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "peerDependencies": {
@@ -17,3 +17,3 @@ "react": "^16.12.0",
   "dependencies": {
-    "bi-open-react-sdk": "^2.1.11"
+    "bi-open-react-sdk": "^2.1.12"
   },
@@ -20,0 +20,0 @@ "main": "dist/main",

No alert changes

Worsened metrics

Total package byte prevSize

19085

-12.93%

Lines of code

470

-17.11%

Dependency changes

• Updated

  bi-open-react-sdk@^2.1.12