@kdcloudjs/kdesign 1.0.2

package/lib/menu/style/mixin.less

@@ -0,0 +1,100 @@
+// 菜单默认样式
+.menu() {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: @menu-bg-color;
+  color: @menu-font-color;
+}
+
+.menuItem(@positionStyle: static) {
+  position: @positionStyle;
+  cursor: pointer;
+
+  &-title {
+    .menuItemTitle();
+  }
+
+  &-title > span {
+    opacity: 1;
+    transition: opacity calc(@transition-duration - 0.1s) @ease-out;
+  }
+
+  &-collapsed {
+    padding: 0;
+    margin: 0;
+    text-align: center;
+
+    .@{menuitem-prefix-cls}-title,
+    .@{submenu-prefix-cls}-title {
+      // display: block;
+      & > p {
+        margin: 0 auto;
+      }
+
+      & > span {
+        opacity: 0;
+        transition: opacity calc(@transition-duration - 0.1s) @ease-out;
+      }
+    }
+  }
+
+  &-icon {
+    margin: 0 15px;
+    font-size: @menu-icon-size;
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+    color: @disabled-color;
+  }
+
+  &-active {
+    .hover();
+  }
+
+  &-arrow {
+    margin-left: auto;
+    font-size: 16px;
+    &-up {
+      transform: rotate(180deg);
+      transition: transform calc(@transition-duration - 0.1s) @ease;
+    }
+
+    &-down {
+      transform: rotate(0deg);
+      transition: transform calc(@transition-duration - 0.1s) @ease;
+    }
+  }
+}
+
+.hover {
+  background-color: @menu-subMenu-bg-color;
+  color: @white;
+}
+
+@lightColor: #212121;
+@lightHoverColor: #276ff5;
+@lightActiveColor: #5582f3;
+@lightBgColor: #f2f9ff;
+
+.light-hover {
+  background-color: @lightBgColor;
+  color: @lightHoverColor;
+  border-right: 2px solid @lightActiveColor;
+}
+
+.light-default {
+  color: @lightColor;
+  background: #ffffff;
+}
+
+.menuItemTitle() {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  .ellipsis();
+  & > span {
+    .ellipsis();
+  }
+}

package/lib/menu/subMenu.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface MenuSubMenuProps extends React.HTMLAttributes<HTMLElement> {
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    key?: string;
+    popupOffset?: number[];
+    subMenuMode?: string;
+    children?: React.ReactNode;
+    popupClassName?: string;
+    style?: React.CSSProperties;
+}
+declare const SubMenu: React.FC<MenuSubMenuProps>;
+export default SubMenu;

package/lib/menu/subMenu.js

@@ -0,0 +1,407 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _configProvider = require("../config-provider");
+
+var _utils = require("../_utils");
+
+var _reactChildren = require("../_utils/react-children");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _util = require("./util");
+
+var _hooks = require("../_utils/hooks");
+
+var _index = require("../index");
+
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var SubMenu = function SubMenu(props) {
+  var _classNames2;
+
+  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
+
+
+  var _a = (0, _utils.getCompProps)('MenuSubMenu', userDefaultProps, props),
+      customPrefixcls = _a.prefixCls,
+      mode = _a.mode,
+      title = _a.title,
+      icon = _a.icon,
+      disabled = _a.disabled,
+      children = _a.children,
+      collapsed = _a.collapsed,
+      keyValue = _a.keyValue,
+      selectedKey = _a.selectedKey,
+      openKeys = _a.openKeys,
+      triggerSubMenuAction = _a.triggerSubMenuAction,
+      forceSubMenuRender = _a.forceSubMenuRender,
+      inlineIndent = _a.inlineIndent,
+      className = _a.className,
+      style = _a.style,
+      handleOnOpenChange = _a.handleOnOpenChange,
+      _a$paddingLeft = _a.paddingLeft,
+      paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
+      restProps = __rest(_a, ["prefixCls", "mode", "title", "icon", "disabled", "children", "collapsed", "keyValue", "selectedKey", "openKeys", "triggerSubMenuAction", "forceSubMenuRender", "inlineIndent", "className", "style", "handleOnOpenChange", "paddingLeft"]); // 初始化level
+
+
+  if (!restProps.level) {
+    restProps.level = 1;
+  }
+
+  if (mode === 'inline') {
+    restProps.subMenuMode = 'vertical';
+    restProps.popupOffset = [];
+  }
+
+  (0, _devwarning.default)(!children, 'submenu', 'cannot found children in Menu.SubMenu'); // className前缀
+
+  var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-submenu', customPrefixcls);
+  var subMenuRef = React.useRef(null);
+  var subMenuWrapperRef = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      isVisible = _React$useState2[0],
+      setIsVisible = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (openKeys.length > 0) {
+      setIsVisible((0, _includes.default)(openKeys).call(openKeys, keyValue));
+    }
+  }, [keyValue]);
+  React.useEffect(function () {
+    if (!isVisible) return;
+    var subMenuWrapperEle = subMenuWrapperRef.current;
+    var subMenuEle = subMenuRef.current;
+
+    if (subMenuWrapperEle && (0, _util.isElementInViewport)(subMenuEle)) {
+      var position = subMenuWrapperEle.getBoundingClientRect();
+      var windowHeight = document.body.offsetHeight;
+
+      if (position.bottom > windowHeight) {
+        subMenuWrapperEle.style.transform = "translate(0px,-".concat(position.bottom - windowHeight, "px)");
+      }
+    }
+  });
+
+  var getPaddingRight = function getPaddingRight() {
+    if (collapsed && restProps.level === 1) {
+      return 0;
+    }
+
+    return _util.DEFAUTL_PADDING;
+  };
+
+  var getPaddingLeft = function getPaddingLeft() {
+    if (restProps.level > 1 && mode !== 'inline') {
+      return _util.DEFAUTL_PADDING;
+    }
+
+    if (restProps.level === 1 && icon) {
+      return 0;
+    } // 无图标显示首个字符不需要paddingleft
+
+
+    if (!icon && collapsed && restProps.level === 1 && typeof title === 'string') {
+      return 0;
+    }
+
+    return inlineIndent + paddingLeft;
+  };
+
+  var curPaddingRight = getPaddingRight();
+  var curPaddingLeft = getPaddingLeft();
+  var getCurrentStyle = React.useCallback(function () {
+    var _a; // 内嵌模式height主要是用来动画的，必须要设置overflow溢出隐藏
+
+
+    if (mode === 'inline') {
+      var height = ((_a = subMenuWrapperRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) || 0;
+      return {
+        height: isVisible && !collapsed ? "".concat(height, "px") : '0px',
+        overflow: 'hidden',
+        opacity: isVisible && !collapsed ? 1 : 0,
+        transition: 'all 0.2s cubic-bezier(0,.4,.4,1)'
+      };
+    }
+
+    var style = {
+      visibility: forceSubMenuRender && !isVisible ? 'visible' : 'hidden'
+    };
+
+    if (restProps.subMenuMode === 'horizontal') {
+      style.display = 'flex';
+    }
+
+    var _ref = subMenuRef.current || {
+      offsetTop: 0
+    },
+        offsetTop = _ref.offsetTop;
+
+    var popupOffsetPosition = restProps.popupOffset;
+
+    if (!Array.isArray(popupOffsetPosition) || popupOffsetPosition.length === 0) {
+      popupOffsetPosition = [0, 0];
+    }
+
+    if (popupOffsetPosition.length === 1) {
+      popupOffsetPosition = (0, _concat.default)(popupOffsetPosition).call(popupOffsetPosition, 0);
+    }
+
+    return (0, _extends2.default)(style, {
+      position: 'absolute',
+      top: "".concat(offsetTop, "px"),
+      left: '100%',
+      paddingLeft: "".concat(popupOffsetPosition[0], "px"),
+      paddingTop: "".concat(popupOffsetPosition[1], "px")
+    });
+  }, [subMenuRef, restProps.popupOffset, forceSubMenuRender, isVisible, mode, restProps.subMenuMode]);
+
+  var closeSubMenu = function closeSubMenu() {
+    setIsVisible(false);
+    handleOnOpenChange(keyValue);
+  }; // 点击区域外的地方关闭
+
+
+  (0, _hooks.useOnClickOutside)([subMenuRef], function () {
+    if (triggerSubMenuAction === 'click' && mode === 'vertical') {
+      closeSubMenu();
+    }
+  }); // 缩略模式自动关闭子菜单
+
+  if (triggerSubMenuAction === 'click' && mode === 'vertical' && collapsed) {
+    closeSubMenu();
+  }
+
+  var handleMouseEvent = function handleMouseEvent(status) {
+    if (disabled || triggerSubMenuAction === 'click') return;
+    handleOnOpenChange(keyValue);
+    setIsVisible(status);
+  };
+
+  var handleOnMouseEnter = function handleOnMouseEnter() {
+    handleMouseEvent(true);
+  };
+
+  var handleOnMouseLeave = function handleOnMouseLeave() {
+    handleMouseEvent(false);
+  };
+
+  var handleOnClick = function handleOnClick(info) {
+    var _context;
+
+    // 保存路径
+    info.keyPath = (0, _concat.default)(_context = info.keyPath).call(_context, [keyValue]);
+    restProps.handleOnClick && restProps.handleOnClick(info);
+  }; // 子菜单展开收缩
+
+
+  var handleOnClickSubMenu = function handleOnClickSubMenu(e) {
+    if (disabled || triggerSubMenuAction === 'hover') return;
+    e.stopPropagation();
+    handleOnOpenChange(keyValue);
+    setIsVisible(!isVisible);
+  };
+
+  var renderItemTitle = function renderItemTitle() {
+    if (!icon && collapsed && restProps.level === 1 && (0, _util.isString)(title)) {
+      return /*#__PURE__*/React.createElement("p", null, title.charAt(0));
+    }
+
+    if ((0, _util.isString)(title)) {
+      return /*#__PURE__*/React.createElement("span", null, title);
+    }
+
+    return (0, _util.renderReactNodeFunction)(title);
+  };
+
+  var renderItemArrow = function renderItemArrow() {
+    var _context2;
+
+    if (mode !== 'inline' || collapsed) return null;
+    return /*#__PURE__*/React.createElement(_index.Icon, {
+      type: "arrow-down",
+      className: (0, _classnames.default)("".concat(prefixCls, "-arrow"), (0, _defineProperty2.default)({}, (0, _concat.default)(_context2 = "".concat(prefixCls, "-arrow-")).call(_context2, isVisible ? 'up' : 'down'), true))
+    });
+  };
+
+  var renderSubMenu = function renderSubMenu() {
+    var _context3;
+
+    var style = getCurrentStyle(); // 展开收缩动画。针对二级三级菜单目前使用单一的样式去区分了
+
+    var motionClassName = {};
+
+    if (mode !== 'inline') {
+      var prefixClsMotion = "".concat(prefixCls, "-sub");
+
+      if (isVisible) {
+        motionClassName["".concat(prefixClsMotion, "-second")] = restProps.level === 1;
+        motionClassName["".concat(prefixClsMotion, "-third")] = restProps.level === 2;
+      } else {
+        motionClassName["".concat(prefixClsMotion, "-hide")] = true;
+      }
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      style: style,
+      ref: subMenuWrapperRef
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-sub"), restProps.popupClassName, motionClassName)
+    }, (0, _map.default)(_context3 = (0, _reactChildren.toArray)(children)).call(_context3, function (item, index) {
+      var key = item.key || index;
+      return /*#__PURE__*/React.cloneElement(item, {
+        key: key,
+        level: restProps.level + 1,
+        keyValue: key,
+        collapsed: collapsed,
+        mode: mode,
+        selectedKey: selectedKey,
+        openKeys: openKeys,
+        forceSubMenuRender: forceSubMenuRender,
+        triggerSubMenuAction: triggerSubMenuAction,
+        handleOnOpenChange: handleOnOpenChange,
+        handleOnClick: handleOnClick,
+        inlineIndent: inlineIndent,
+        paddingLeft: curPaddingLeft
+      });
+    })));
+  };
+
+  var renderThridMenu = function renderThridMenu() {
+    var _context4;
+
+    var style = getCurrentStyle();
+    return /*#__PURE__*/React.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-thrid")),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      style: {
+        width: (0, _util.getWrapWidth)(children)
+      }
+    }, (0, _map.default)(_context4 = (0, _reactChildren.toArray)(children)).call(_context4, function (item, i) {
+      return /*#__PURE__*/React.cloneElement(item, {
+        level: restProps.level + 1,
+        subMenuMode: restProps.subMenuMode,
+        keyValue: item.key || i,
+        collapsed: collapsed,
+        mode: mode,
+        selectedKey: selectedKey,
+        openKeys: openKeys,
+        forceSubMenuRender: forceSubMenuRender,
+        triggerSubMenuAction: triggerSubMenuAction,
+        handleOnOpenChange: handleOnOpenChange,
+        handleOnClick: handleOnClick
+      });
+    })));
+  };
+
+  if (restProps.subMenuMode === 'horizontal' && restProps.level > 1 && children) {
+    var _context5;
+
+    var width = (0, _util.getItemWidth)(children);
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-thrid-item")),
+      style: {
+        width: width
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-thrid-title"))
+    }, /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("ul", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-thrid-list"), restProps.popupClassName)
+    }, (0, _map.default)(_context5 = (0, _reactChildren.toArray)(children)).call(_context5, function (item, i) {
+      return /*#__PURE__*/React.cloneElement(item, {
+        level: restProps.level + 1,
+        subMenuMode: restProps.subMenuMode,
+        keyValue: item && item.key || i,
+        collapsed: collapsed,
+        mode: mode,
+        selectedKey: selectedKey,
+        openKeys: openKeys,
+        forceSubMenuRender: forceSubMenuRender,
+        triggerSubMenuAction: triggerSubMenuAction,
+        handleOnOpenChange: handleOnOpenChange,
+        handleOnClick: handleOnClick
+      });
+    })));
+  }
+
+  var mouseEvent = {
+    onMouseLeave: handleOnMouseLeave,
+    onMouseEnter: handleOnMouseEnter,
+    onClick: handleOnClickSubMenu
+  };
+  var titleStyle = {
+    paddingRight: "".concat(curPaddingRight, "px"),
+    paddingLeft: "".concat(curPaddingLeft, "px")
+  };
+  return /*#__PURE__*/React.createElement("li", (0, _extends2.default)({
+    ref: subMenuRef,
+    className: (0, _classnames.default)(prefixCls, className, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls, "-hover"), !disabled && isVisible), _classNames2)),
+    key: keyValue,
+    title: title
+  }, mouseEvent, {
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-title")),
+    style: titleStyle
+  }, icon && /*#__PURE__*/React.cloneElement((0, _util.renderReactNodeFunction)(icon), {
+    className: (0, _classnames.default)("".concat(prefixCls, "-icon"))
+  }), renderItemTitle(), renderItemArrow()), restProps.subMenuMode === 'horizontal' ? renderThridMenu() : renderSubMenu());
+};
+
+SubMenu.displayName = 'SubMenu';
+var _default = SubMenu;
+exports.default = _default;

package/lib/menu/util.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export declare const isString: (value: any) => boolean;
+export declare const isNumber: (value: any) => boolean;
+export declare const getColumnWidthList: (nodeList: React.ReactElement) => number[];
+export declare const getWrapWidth: (nodelist: React.ReactElement) => number;
+export declare const getItemWidth: (children: React.ReactElement) => number;
+export declare const renderReactNodeFunction: (reactNode: React.ReactNode) => any;
+export declare const isElementInViewport: (el: any) => boolean;
+export declare const DEFAUTL_PADDING = 15;

package/lib/menu/util.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderReactNodeFunction = exports.isString = exports.isNumber = exports.isElementInViewport = exports.getWrapWidth = exports.getItemWidth = exports.getColumnWidthList = exports.DEFAUTL_PADDING = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _isArray = _interopRequireDefault(require("lodash/isArray"));
+
+var _reactChildren = require("../_utils/react-children");
+
+var DEFAULT_ITEM_WIDTH = 160;
+var DEFAULT_MAX_WIDTH = 800;
+var DEFAULT_MARGIN_WIDTH = 40;
+var DEFAULT_ITEM_NUM = 5;
+
+var isString = function isString(value) {
+  return typeof value === 'string';
+};
+
+exports.isString = isString;
+
+var isNumber = function isNumber(value) {
+  return typeof value === 'number';
+};
+
+exports.isNumber = isNumber;
+
+var getColumnWidthList = function getColumnWidthList(nodeList) {
+  var _context;
+
+  if (!nodeList) return [];
+  var columnWidthList = [];
+  (0, _map.default)(_context = (0, _reactChildren.toArray)(nodeList)).call(_context, function (item) {
+    if (!item || isString(item) || isNumber(item)) return item;
+    var width = getItemWidth(item.props.children);
+    columnWidthList.push(width);
+    return item;
+  });
+  return columnWidthList;
+}; // 计算外层面板的总宽度 DEFAULT_MAX_WIDTH: 824px, 最多四列（790px），
+// 每列160px+40px
+// 其中160px是width,40px是marginRight
+
+
+exports.getColumnWidthList = getColumnWidthList;
+
+var getWrapWidth = function getWrapWidth(nodelist) {
+  var wrapWidth = 0;
+  var totalWidth = 0;
+  var columnWidthList = getColumnWidthList(nodelist);
+  (0, _map.default)(columnWidthList).call(columnWidthList, function (width) {
+    totalWidth += width + DEFAULT_MARGIN_WIDTH;
+
+    if (totalWidth < DEFAULT_MAX_WIDTH) {
+      wrapWidth = totalWidth;
+    } else {
+      wrapWidth = DEFAULT_MAX_WIDTH;
+    }
+
+    return width;
+  });
+  return wrapWidth + 10;
+}; // 计算子项的宽度
+
+
+exports.getWrapWidth = getWrapWidth;
+
+var getItemWidth = function getItemWidth(children) {
+  if (!(0, _isArray.default)(children)) {
+    return DEFAULT_ITEM_WIDTH;
+  }
+
+  if (!children || children.length <= DEFAULT_ITEM_NUM) {
+    return DEFAULT_ITEM_WIDTH;
+  } else {
+    var width = (DEFAULT_ITEM_WIDTH + DEFAULT_MARGIN_WIDTH) * Math.ceil(children.length / DEFAULT_ITEM_NUM) - DEFAULT_MARGIN_WIDTH;
+    return width > DEFAULT_MAX_WIDTH ? DEFAULT_MAX_WIDTH : width;
+  }
+};
+
+exports.getItemWidth = getItemWidth;
+
+var renderReactNodeFunction = function renderReactNodeFunction(reactNode) {
+  if (typeof reactNode === 'function') {
+    return reactNode();
+  }
+
+  return reactNode;
+};
+
+exports.renderReactNodeFunction = renderReactNodeFunction;
+
+var isElementInViewport = function isElementInViewport(el) {
+  var rect = el.getBoundingClientRect();
+  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+};
+
+exports.isElementInViewport = isElementInViewport;
+var DEFAUTL_PADDING = 15;
+exports.DEFAUTL_PADDING = DEFAUTL_PADDING;

package/lib/message/content.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ContentProps } from './index';
+export interface IconMap {
+    [key: string]: React.ReactNode;
+}
+declare const Content: React.FC<ContentProps>;
+export default Content;