@arco-design/mobile-react 2.19.1 → 2.21.0

package/cjs/show-monitor/index.js

@@ -123,6 +123,34 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           offset: offset,
           threshold: threshold
         }, true);
+      },
+
+      /**
+       * 重置元素初始可见态为false，并重新对元素可见度发起检测，优先级低于disabled（通常用在对ShowMonitor内部元素变化时发起的重新监听）
+       * @en Reset the initial visible state of the element to false, and re-detect the visibility of the element, the priority is lower than 'disabled'(Usually used to re-listen when elements inside ShowMonitor change)
+       */
+      flushVisibleStatus: function flushVisibleStatus() {
+        isVisible.current = false;
+
+        if (isSupportNativeApi && io.current && domRef.current) {
+          disabled ? io.current.unobserve(domRef.current) : io.current.observe(domRef.current);
+        } else if (listener.current) {
+          var _key = wrapperKey.current;
+
+          if (once && onOnceEmittedListeners != null && onOnceEmittedListeners[_key]) {
+            onOnceEmittedListeners[_key] = onOnceEmittedListeners[_key].filter(function (emitListener) {
+              return emitListener !== listener.current;
+            });
+          }
+
+          if (!disabled && !listeners[_key].find(function (_listener) {
+            return _listener === listener.current;
+          })) {
+            listeners[_key].push(listener.current);
+          }
+
+          !disabled && _checkVisible(listener.current);
+        }
       }
     };
   });
@@ -390,8 +418,8 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           }
         }
 
-        var _key = wrapperKey.current;
-        var curListeners = listeners[_key];
+        var _key2 = wrapperKey.current;
+        var curListeners = listeners[_key2];
 
         if (curListeners) {
           // 不在监听队列中，移除
@@ -401,7 +429,7 @@ var ShowMonitor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           // @en When the listening queue is empty, unbind scroll and resize events
 
           if (curListeners.length === 0) {
-            delete listeners[_key];
+            delete listeners[_key2];
 
             if (scrollPort.current) {
               scrollPort.current.removeEventListener('scroll', throttlingVisibleChange);

package/cjs/slider/index.d.ts

@@ -143,7 +143,7 @@ export interface SliderRef {
  * @en Slide input component, displays the current value and optional range.
  * @name 滑动输入条
  * @name_en Slider
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 declare const SliderWrapper: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<SliderRef>>;

package/cjs/slider/index.js

@@ -173,7 +173,7 @@ var Slider = /*#__PURE__*/(0, _react.forwardRef)(function (_, ref) {
  * @en Slide input component, displays the current value and optional range.
  * @name 滑动输入条
  * @name_en Slider
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 

package/cjs/steps/demo/style/css/mobile.css

@@ -61,5 +61,5 @@
   background: #165DFF;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
-  font-size: 12PX;
+  font-size: 11PX;
 }

package/cjs/steps/demo/style/mobile.less

@@ -30,7 +30,7 @@
             }
             .set-steps-color(#165DFF);
             .@{prefix}-steps-item-custom-icon {
-                font-size: 12PX;
+                font-size: 11PX;
             }
         }
     }

package/cjs/steps/index.d.ts

@@ -13,7 +13,7 @@ declare const _default: React.ForwardRefExoticComponent<StepsProps & React.RefAt
  * @en Display the progress of a task, or guide users to complete a complex task.
  * @name 步骤条
  * @name_en Steps
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 export default _default;

package/cjs/steps/index.js

@@ -114,7 +114,7 @@ var Steps = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
  * @en Display the progress of a task, or guide users to complete a complex task.
  * @name 步骤条
  * @name_en Steps
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 

package/cjs/steps/style/css/index.css

@@ -59,7 +59,7 @@
 .vertical .arco-steps-item-tail {
   height: 100%;
   width:  18PX ;
-  top: 0.18rem;
+  top:  0.18rem ;
   padding:  0.28rem 0 ;
 }
 .vertical .arco-steps-item-tail:after {
@@ -73,19 +73,7 @@
 .finish .arco-steps-item-tail:after {
   background:  #165dff ;
 }
-.arco-steps-item-custom-icon {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-  width:  20PX ;
-  height:  20PX ;
-}
+.arco-steps-item-custom-icon,
 .arco-steps-item-icon {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -96,10 +84,12 @@
   -webkit-box-pack: center;
   -webkit-justify-content: center;
           justify-content: center;
-  border-radius: 50%;
   width:  18PX ;
   height:  18PX ;
 }
+.arco-steps-item-icon {
+  border-radius: 50%;
+}
 .number.finish .arco-steps-item-icon {
   background:  #E8F3FF ;
 }

package/cjs/steps/style/index.less

@@ -47,7 +47,7 @@
             .vertical & {
                 height: 100%;
                 .use-var(width, steps-icon-width);
-                .rem(top, 9);
+                .use-var(top, steps-tail-vertical-top);
                 .use-var(padding, steps-tail-vertical-padding);
 
                 &:after {
@@ -65,21 +65,17 @@
             }
         }
 
-        &-custom-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .use-var(width, steps-custom-icon-width);
-            .use-var(height, steps-custom-icon-height);
-        }
-
+        &-custom-icon,
         &-icon {
             display: inline-flex;
             align-items: center;
             justify-content: center;
-            border-radius: 50%;
             .use-var(width, steps-icon-width);
             .use-var(height, steps-icon-height);
+        }
+
+        &-icon {
+            border-radius: 50%;
 
             .number.finish & {
                 .use-var(background, steps-finish-icon-num-background);

package/cjs/sticky/index.d.ts

@@ -118,7 +118,7 @@ export interface StickyProps {
      */
     getContainer?: () => HTMLElement | string;
     /**
-     * 指定滚动容器，如果指定该值则relative属性始终认定为false；如果返回string则使用querySelector选取容器
+     * 指定滚动容器；如果返回string则使用querySelector选取容器
      * @en Specifies the scrolling container. If this value is specified, the relative property is always regarded as false; if a string is input, use querySelector to select the container
      * @default () => window
      */

package/cjs/style.d.ts

@@ -22,6 +22,7 @@ import './ellipsis/style';
 import './grid/style';
 import './image/style';
 import './show-monitor/style';
+import './image-picker/style';
 import './image-preview/style';
 import './input/style';
 import './load-more/style';
@@ -41,8 +42,10 @@ import './pull-refresh/style';
 import './radio/style';
 import './rate/style';
 import './slider/style';
+import './search-bar/style';
 import './steps/style';
 import './sticky/style';
+import './swipe-action/style';
 import './swipe-load/style';
 import './tab-bar/style';
 import './tag/style';

package/cjs/style.js

@@ -48,6 +48,8 @@ require("./image/style");
 
 require("./show-monitor/style");
 
+require("./image-picker/style");
+
 require("./image-preview/style");
 
 require("./input/style");
@@ -86,10 +88,14 @@ require("./rate/style");
 
 require("./slider/style");
 
+require("./search-bar/style");
+
 require("./steps/style");
 
 require("./sticky/style");
 
+require("./swipe-action/style");
+
 require("./swipe-load/style");
 
 require("./tab-bar/style");

package/cjs/swipe-action/demo/style/css/mobile.css

@@ -0,0 +1,5 @@
+#demo-swipe-action .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+  overflow: hidden;
+}

package/cjs/swipe-action/demo/style/mobile.less

@@ -0,0 +1,9 @@
+@import '../../../../style/mixin.less';
+
+#demo-swipe-action {
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+        overflow: hidden;
+    }
+}

package/cjs/swipe-action/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SwipeActionProps, SwipeActionRef } from './type';
+/**
+ * 滑动操作组件，左右滑动拉出菜单栏
+ * @en SwipeAction component, slide left and right to pull out the menu bar
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 滑动操作
+ * @name_en SwipeAction
+ */
+declare const SwipeAction: React.ForwardRefExoticComponent<SwipeActionProps & React.RefAttributes<SwipeActionRef>>;
+export default SwipeAction;

package/cjs/swipe-action/index.js

@@ -0,0 +1,339 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("@arco-design/mobile-utils/utils");
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+var _contextProvider = require("../context-provider");
+
+var _item = _interopRequireDefault(require("./item"));
+
+var _helpers = require("../_helpers");
+
+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; }
+
+/**
+ * 滑动操作组件，左右滑动拉出菜单栏
+ * @en SwipeAction component, slide left and right to pull out the menu bar
+ * @type 反馈
+ * @type_en FeedBack
+ * @name 滑动操作
+ * @name_en SwipeAction
+ */
+var SwipeAction = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+      className = _props$className === void 0 ? '' : _props$className,
+      style = props.style,
+      children = props.children,
+      leftActions = props.leftActions,
+      rightActions = props.rightActions,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$threshold = props.threshold,
+      threshold = _props$threshold === void 0 ? 0.15 : _props$threshold,
+      closeOnTouchOutside = props.closeOnTouchOutside,
+      _props$transitionDura = props.transitionDuration,
+      transitionDuration = _props$transitionDura === void 0 ? 300 : _props$transitionDura,
+      _props$dampRate = props.dampRate,
+      dampRate = _props$dampRate === void 0 ? 15 : _props$dampRate,
+      _props$openStyleType = props.openStyleType,
+      openStyleType = _props$openStyleType === void 0 ? 'layer' : _props$openStyleType,
+      onClose = props.onClose,
+      onOpen = props.onOpen;
+  var domRef = (0, _react.useRef)(null);
+  var leftRef = (0, _react.useRef)(null);
+  var rightRef = (0, _react.useRef)(null);
+  var isOpen = (0, _react.useRef)(false);
+  var leftMenuWidthRef = (0, _react.useRef)(0);
+
+  var _useState = (0, _react.useState)([]),
+      leftMenuWidthArr = _useState[0],
+      setLeftMenuWidthArr = _useState[1];
+
+  var rightMenuWidthRef = (0, _react.useRef)(0);
+
+  var _useState2 = (0, _react.useState)([]),
+      rightMenuWidthArr = _useState2[0],
+      setRightMenuWidthArr = _useState2[1];
+
+  var dampRateRef = (0, _helpers.useLatestRef)(dampRate);
+  var forbidClick = (0, _react.useRef)(false);
+
+  var _useRefState = (0, _helpers.useRefState)(false),
+      moving = _useRefState[0],
+      movingRef = _useRefState[1],
+      setMoving = _useRefState[2];
+
+  var _useRefState2 = (0, _helpers.useRefState)(0),
+      offset = _useRefState2[0],
+      offsetRef = _useRefState2[1],
+      setOffset = _useRefState2[2];
+
+  var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var startRef = (0, _react.useRef)(0);
+  var startX = (0, _react.useRef)(0);
+  var slideX = (0, _react.useRef)(0);
+  var isLayer = openStyleType === 'layer';
+  var transitionStyle = (0, _react.useMemo)(function () {
+    return (0, _helpers.getStyleWithVendor)({
+      transitionDuration: moving ? '0ms' : transitionDuration + "ms"
+    });
+  }, [moving, transitionDuration]);
+
+  function resetMoveData() {
+    startX.current = 0;
+    slideX.current = 0;
+  }
+
+  function getMenuCurrentWidth(a, min, max) {
+    var buffer = Math.abs(a) / dampRateRef.current;
+    return Math.min(Math.max(a, min - buffer), max + buffer);
+  }
+
+  function touchstart(e) {
+    startRef.current = offsetRef.current;
+    resetMoveData();
+    startX.current = e.touches[0].pageX;
+  }
+
+  function touchmove(e) {
+    e.preventDefault();
+    slideX.current = e.touches[0].pageX - startX.current;
+    forbidClick.current = true;
+    setMoving(true);
+    setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
+  }
+
+  function touchend() {
+    if (movingRef.current) {
+      var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
+      changeMenu(currentMenu);
+      setMoving(false);
+      (0, _utils.nextTick)(function () {
+        forbidClick.current = false;
+      });
+    }
+  }
+
+  function changeMenu(dir) {
+    var cookedThreshold = isOpen.current ? 1 - threshold : threshold;
+    var width = dir === 'left' ? leftMenuWidthRef.current : rightMenuWidthRef.current;
+
+    if (width && Math.abs(offsetRef.current) > width * cookedThreshold) {
+      open(dir);
+    } else {
+      close(dir);
+    }
+  }
+
+  function getWidthByRef(widthRef) {
+    if (!widthRef.current) {
+      return {
+        totalWidth: 0,
+        widthArr: []
+      };
+    }
+
+    var totalWidth = 0;
+    var widthArr = [];
+    var allEle = widthRef.current.getElementsByClassName(prefixCls + "-swipe-action-menu-action-info-container");
+    Array.prototype.forEach.call(allEle, function (ele) {
+      var _ele$getBoundingClien;
+
+      var w = (_ele$getBoundingClien = ele.getBoundingClientRect().width) != null ? _ele$getBoundingClien : 0;
+      totalWidth += w;
+      widthArr.push(w);
+    });
+    return {
+      totalWidth: totalWidth,
+      widthArr: widthArr
+    };
+  }
+
+  (0, _react.useEffect)(function () {
+    var container = domRef.current;
+
+    if (!disabled && container) {
+      container.addEventListener('touchstart', touchstart);
+      container.addEventListener('touchmove', touchmove);
+      container.addEventListener('touchend', touchend);
+    }
+
+    return function () {
+      if (!disabled && container) {
+        container.removeEventListener('touchstart', touchstart);
+        container.removeEventListener('touchmove', touchmove);
+        container.removeEventListener('touchend', touchend);
+      }
+    };
+  }, [disabled]); // 获取左右菜单的宽度
+  // @en Get the width of the left and right menu
+
+  (0, _react.useEffect)(function () {
+    var _getWidthByRef = getWidthByRef(leftRef),
+        leftTotalWidth = _getWidthByRef.totalWidth,
+        leftWidthArr = _getWidthByRef.widthArr;
+
+    leftMenuWidthRef.current = leftTotalWidth;
+    setLeftMenuWidthArr(leftWidthArr);
+
+    var _getWidthByRef2 = getWidthByRef(rightRef),
+        rightTotalWidth = _getWidthByRef2.totalWidth,
+        rightWidthArr = _getWidthByRef2.widthArr;
+
+    rightMenuWidthRef.current = rightTotalWidth;
+    setRightMenuWidthArr(rightWidthArr);
+  }, [leftActions, rightActions]); // 点击外部区域事件
+  // @en Event when clicking outside of the element
+
+  (0, _react.useEffect)(function () {
+    var handle = function handle(e) {
+      var _domRef$current;
+
+      if (!((_domRef$current = domRef.current) != null && _domRef$current.contains(e.target)) && isOpen.current) {
+        close();
+      }
+    };
+
+    closeOnTouchOutside && document.addEventListener('touchstart', handle);
+    return function () {
+      closeOnTouchOutside && document.removeEventListener('touchstart', handle);
+    };
+  }, [closeOnTouchOutside]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      dom: domRef.current,
+      close: close,
+      open: open
+    };
+  });
+
+  function close(dir) {
+    setOffset(0);
+
+    if (isOpen.current) {
+      isOpen.current = false;
+
+      if (!dir && offsetRef.current !== 0) {
+        var noDir = offsetRef.current > 0 ? 'left' : 'right';
+        handleClose(noDir);
+        return;
+      }
+
+      handleClose(dir);
+    }
+  }
+
+  function open(dir) {
+    if (dir === void 0) {
+      dir = 'right';
+    }
+
+    if (!isOpen.current) {
+      isOpen.current = true;
+      handleOpen(dir);
+    }
+
+    setOffset(dir === 'left' ? leftMenuWidthRef.current : -rightMenuWidthRef.current);
+  }
+
+  function handleOpen(dir) {
+    setTimeout(function () {
+      onOpen == null ? void 0 : onOpen(dir);
+    }, transitionDuration);
+  }
+
+  function handleClose(dir) {
+    setTimeout(function () {
+      onClose == null ? void 0 : onClose(dir);
+    }, transitionDuration);
+  }
+
+  function actionClick(e) {
+    var _leftRef$current, _rightRef$current;
+
+    if (isOpen.current && !forbidClick.current && !((_leftRef$current = leftRef.current) != null && _leftRef$current.contains(e.target)) && !((_rightRef$current = rightRef.current) != null && _rightRef$current.contains(e.target))) {
+      close();
+    }
+  }
+
+  function getActionRightByIndex(index) {
+    var preWidth = leftMenuWidthArr.slice(index + 1).reduce(function (acc, cur) {
+      return acc + cur;
+    }, 0);
+    return (preWidth / leftMenuWidthRef.current || 0) * 100 + "%";
+  }
+
+  function getActionLeftByIndex(index) {
+    var preWidth = rightMenuWidthArr.slice(0, index).reduce(function (acc, cur) {
+      return acc + cur;
+    }, 0);
+    return (preWidth / rightMenuWidthRef.current || 0) * 100 + "%";
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action", className, offset === 0 ? 'action-close' : 'action-open'),
+    style: (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, style || {}, transitionStyle, {
+      transform: "translateX(" + offset + "px)"
+    })),
+    ref: domRef,
+    onClick: actionClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action-menu-left", prefixCls + "-swipe-action-menu", offset > 0 ? 'action-open' : 'action-close'),
+    ref: leftRef,
+    style: isLayer && offset >= 0 ? (0, _extends2.default)({
+      width: offset
+    }, transitionStyle) : {}
+  }, leftActions == null ? void 0 : leftActions.map(function (action, index) {
+    return /*#__PURE__*/_react.default.createElement(_item.default, {
+      action: (0, _extends2.default)({}, action || {}, {
+        style: (0, _extends2.default)({}, isLayer ? {
+          right: getActionRightByIndex(index)
+        } : {}, action.style || {}),
+        className: (0, _mobileUtils.cls)(action.className, "open-style-" + openStyleType)
+      }),
+      prefixCls: prefixCls + "-swipe-action-menu-action",
+      index: leftActions.length - index,
+      type: "left",
+      close: close,
+      key: index
+    });
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-swipe-action-content"
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-swipe-action-menu-right", prefixCls + "-swipe-action-menu", offset < 0 ? 'action-open' : 'action-close'),
+    ref: rightRef,
+    style: isLayer && offset <= 0 ? (0, _extends2.default)({
+      width: -1 * offset
+    }, transitionStyle) : {}
+  }, rightActions == null ? void 0 : rightActions.map(function (action, index) {
+    return /*#__PURE__*/_react.default.createElement(_item.default, {
+      action: (0, _extends2.default)({}, action || {}, {
+        style: (0, _extends2.default)({}, isLayer ? {
+          left: getActionLeftByIndex(index)
+        } : {}, action.style || {}),
+        className: (0, _mobileUtils.cls)(action.className, "open-style-" + openStyleType)
+      }),
+      prefixCls: prefixCls + "-swipe-action-menu-action",
+      index: index + 1,
+      type: "right",
+      close: close,
+      key: index
+    });
+  })));
+});
+var _default = SwipeAction;
+exports.default = _default;

package/cjs/swipe-action/item.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Action } from './type';
+interface IProps {
+    action: Action;
+    prefixCls: string;
+    index: number;
+    type: 'left' | 'right';
+    close: () => void;
+}
+export default function renderAction({ action, prefixCls, index, type, close }: IProps): JSX.Element;
+export {};

package/cjs/swipe-action/item.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = renderAction;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mobileUtils = require("@arco-design/mobile-utils");
+
+function renderAction(_ref) {
+  var action = _ref.action,
+      prefixCls = _ref.prefixCls,
+      index = _ref.index,
+      type = _ref.type,
+      close = _ref.close;
+  var text = action.text,
+      actionStyle = action.style,
+      className = action.className,
+      onClick = action.onClick,
+      icon = action.icon,
+      children = action.children;
+
+  function click() {
+    var result = (onClick == null ? void 0 : onClick()) || null;
+
+    if (!result || typeof result === 'boolean') {
+      !result && close();
+    } else if (result && result.then) {
+      result.then(function (res) {
+        return !res && close();
+      });
+    }
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _mobileUtils.cls)(prefixCls + "-" + type + " " + prefixCls + "-info-container", className),
+    style: (0, _extends2.default)({
+      zIndex: index
+    }, actionStyle),
+    onClick: click
+  }, children || /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-info"
+  }, icon ? /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-info-icon"
+  }, icon) : null, text ? /*#__PURE__*/_react.default.createElement("div", {
+    className: prefixCls + "-info-text"
+  }, text) : null));
+}