@kdcloudjs/kdesign 1.0.2

package/es/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/es/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/es/menu/subMenu.js

@@ -0,0 +1,373 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+
+var __rest = this && this.__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 _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(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;
+};
+
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import { getCompProps } from '../_utils';
+import { toArray } from '../_utils/react-children';
+import classNames from 'classnames';
+import { isString, getWrapWidth, getItemWidth, renderReactNodeFunction, isElementInViewport, DEFAUTL_PADDING } from './util';
+import { useOnClickOutside } from '../_utils/hooks';
+import { Icon } from '../index';
+import devWarning from '../_utils/devwarning';
+
+var SubMenu = function SubMenu(props) {
+  var _classNames2;
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      pkgPrefixCls = _React$useContext.prefixCls,
+      userDefaultProps = _React$useContext.compDefaultProps; // 属性需要合并一遍用户定义的默认属性
+
+
+  var _a = 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 = [];
+  }
+
+  devWarning(!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 = _slicedToArray(_React$useState, 2),
+      isVisible = _React$useState2[0],
+      setIsVisible = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (openKeys.length > 0) {
+      setIsVisible(_includesInstanceProperty(openKeys).call(openKeys, keyValue));
+    }
+  }, [keyValue]);
+  React.useEffect(function () {
+    if (!isVisible) return;
+    var subMenuWrapperEle = subMenuWrapperRef.current;
+    var subMenuEle = subMenuRef.current;
+
+    if (subMenuWrapperEle && 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 DEFAUTL_PADDING;
+  };
+
+  var getPaddingLeft = function getPaddingLeft() {
+    if (restProps.level > 1 && mode !== 'inline') {
+      return 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 = _concatInstanceProperty(popupOffsetPosition).call(popupOffsetPosition, 0);
+    }
+
+    return _extends(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);
+  }; // 点击区域外的地方关闭
+
+
+  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 = _concatInstanceProperty(_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 && isString(title)) {
+      return /*#__PURE__*/React.createElement("p", null, title.charAt(0));
+    }
+
+    if (isString(title)) {
+      return /*#__PURE__*/React.createElement("span", null, title);
+    }
+
+    return renderReactNodeFunction(title);
+  };
+
+  var renderItemArrow = function renderItemArrow() {
+    var _context2;
+
+    if (mode !== 'inline' || collapsed) return null;
+    return /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down",
+      className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, _concatInstanceProperty(_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: classNames("".concat(prefixCls, "-sub"), restProps.popupClassName, motionClassName)
+    }, _mapInstanceProperty(_context3 = 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: classNames("".concat(prefixCls, "-thrid")),
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      style: {
+        width: getWrapWidth(children)
+      }
+    }, _mapInstanceProperty(_context4 = 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 = getItemWidth(children);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-thrid-item")),
+      style: {
+        width: width
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames("".concat(prefixCls, "-thrid-title"))
+    }, /*#__PURE__*/React.createElement("span", null, title)), /*#__PURE__*/React.createElement("ul", {
+      className: classNames("".concat(prefixCls, "-thrid-list"), restProps.popupClassName)
+    }, _mapInstanceProperty(_context5 = 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", _extends({
+    ref: subMenuRef,
+    className: classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-collapsed"), collapsed), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-hover"), !disabled && isVisible), _classNames2)),
+    key: keyValue,
+    title: title
+  }, mouseEvent, {
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(prefixCls, "-title")),
+    style: titleStyle
+  }, icon && /*#__PURE__*/React.cloneElement(renderReactNodeFunction(icon), {
+    className: classNames("".concat(prefixCls, "-icon"))
+  }), renderItemTitle(), renderItemArrow()), restProps.subMenuMode === 'horizontal' ? renderThridMenu() : renderSubMenu());
+};
+
+SubMenu.displayName = 'SubMenu';
+export default SubMenu;

package/es/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/es/menu/util.js

@@ -0,0 +1,75 @@
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import isArray from 'lodash/isArray';
+import { toArray } from '../_utils/react-children';
+var DEFAULT_ITEM_WIDTH = 160;
+var DEFAULT_MAX_WIDTH = 800;
+var DEFAULT_MARGIN_WIDTH = 40;
+var DEFAULT_ITEM_NUM = 5;
+export var isString = function isString(value) {
+  return typeof value === 'string';
+};
+export var isNumber = function isNumber(value) {
+  return typeof value === 'number';
+};
+export var getColumnWidthList = function getColumnWidthList(nodeList) {
+  var _context;
+
+  if (!nodeList) return [];
+  var columnWidthList = [];
+
+  _mapInstanceProperty(_context = 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
+
+export var getWrapWidth = function getWrapWidth(nodelist) {
+  var wrapWidth = 0;
+  var totalWidth = 0;
+  var columnWidthList = getColumnWidthList(nodelist);
+
+  _mapInstanceProperty(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;
+}; // 计算子项的宽度
+
+export var getItemWidth = function getItemWidth(children) {
+  if (!isArray(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;
+  }
+};
+export var renderReactNodeFunction = function renderReactNodeFunction(reactNode) {
+  if (typeof reactNode === 'function') {
+    return reactNode();
+  }
+
+  return reactNode;
+};
+export 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);
+};
+export var DEFAUTL_PADDING = 15;

package/es/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;

package/es/message/content.js

@@ -0,0 +1,87 @@
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useContext } from 'react';
+import { ConfigContext } from '../config-provider';
+import Icon from '../icon';
+
+var Content = function Content(args) {
+  var _context;
+
+  var icon = args.icon,
+      content = args.content,
+      closable = args.closable,
+      suffixCls = args.suffixCls,
+      type = args.type,
+      contentClose = args.contentClose,
+      closeNode = args.closeNode;
+
+  var _useContext = useContext(ConfigContext),
+      prefixCls = _useContext.prefixCls;
+
+  var classPrefix = _concatInstanceProperty(_context = "".concat(prefixCls, "-")).call(_context, suffixCls, "-content");
+
+  var iconMap = {
+    success: /*#__PURE__*/React.createElement(Icon, {
+      type: "right-solid"
+    }),
+    warning: /*#__PURE__*/React.createElement(Icon, {
+      type: "warning-solid"
+    }),
+    error: /*#__PURE__*/React.createElement(Icon, {
+      type: "warning-solid"
+    }),
+    info: /*#__PURE__*/React.createElement(Icon, {
+      type: "tips-solid"
+    })
+  };
+
+  var renderIcon = function renderIcon() {
+    if (icon) return /*#__PURE__*/React.createElement("div", null, icon);
+    return iconMap[type] ? /*#__PURE__*/React.createElement("div", null, iconMap[type]) : null;
+  };
+
+  var handleClick = function handleClick(e) {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    contentClose && contentClose();
+  };
+
+  var renderCloseIcon = function renderCloseIcon() {
+    if (!closable) return null;
+
+    if (closeNode) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-close"),
+        onClick: handleClick
+      }, closeNode);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-close"),
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "close"
+    }));
+  };
+
+  var getMainElement = function getMainElement() {
+    if (typeof content === 'string') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-main")
+      }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-text")
+      }, content)), renderCloseIcon());
+    }
+
+    if ( /*#__PURE__*/React.isValidElement(content)) {
+      return content;
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, getMainElement());
+};
+
+export default Content;

package/es/message/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { NotificationProps } from '../notification-base/notification';
+import { NotificationType } from '../notification-base/notice';
+export declare type ConfigContent = React.ReactNode | string;
+export declare type JointContent = ConfigContent | ArgsProps;
+export interface ContentProps {
+    closable?: boolean;
+    icon?: ConfigContent;
+    closeNode?: ConfigContent;
+    content: ConfigContent;
+    contentClose: () => void;
+    suffixCls: string;
+    type: NotificationType;
+}
+export interface ArgsProps extends Partial<NotificationProps> {
+    content: ConfigContent;
+    icon?: ConfigContent;
+    closeNode?: ConfigContent;
+}
+declare const Message: any;
+export default Message;