@lemon-fe/kits 1.0.0-21 → 1.0.0-211

package/es/components/Popup/index.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-var _excluded = ["value", "onChange", "component", "children", "formatLabel", "disabled", "allowClear", "autoFocus", "showLabel", "beforeOk", "beforeOkCheck", "placeholder", "onClick", "disabledTip", "bordered", "emptyValue"];
+var _excluded = ["value", "onChange", "component", "children", "formatLabel", "disabled", "allowClear", "autoFocus", "showLabel", "beforeOk", "beforeOkCheck", "placeholder", "onClick", "disabledTip", "bordered", "emptyValue", "onCancel", "modal", "open", "readOnly", "beforeOpen", "renderFooter", "onOpenChange", "triggerChangeAfterClose"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -26,11 +26,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { useState, cloneElement, useRef, isValidElement, useEffect } from 'react';
-import { Modal, Input, message } from 'antd';
-import { CloseCircleFilled } from '@ant-design/icons';
-import { PREFIX_CLS } from "../../constants";
+import { Modal, Input, message, ConfigProvider } from 'antd';
+import React, { useState, cloneElement, useRef, useEffect, useContext } from 'react';
+import Icons from "../Icons";
 import SearchIcon from "../Icons/Search";
+import { prefixClassName } from "../utils";
+var prefix = prefixClassName('popup');
 
 function Popup(props) {
   var valueProp = props.value,
@@ -53,111 +54,175 @@ function Popup(props) {
       _props$bordered = props.bordered,
       bordered = _props$bordered === void 0 ? true : _props$bordered,
       emptyValue = props.emptyValue,
+      onCancel = props.onCancel,
+      modal = props.modal,
+      openProp = props.open,
+      readOnly = props.readOnly,
+      beforeOpen = props.beforeOpen,
+      renderFooter = props.renderFooter,
+      onOpenChange = props.onOpenChange,
+      triggerChangeAfterClose = props.triggerChangeAfterClose,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var prefixCls = "".concat(PREFIX_CLS, "-popup");
-
-  var _useState = useState(valueProp || emptyValue),
+  var _useState = useState(valueProp),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],
       setValue = _useState2[1];
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      visible = _useState4[0],
-      setVisible = _useState4[1];
+      open = _useState4[0],
+      setOpen = _useState4[1];
 
   var inputRef = useRef(null);
-
-  var handleCancel = function handleCancel() {
-    setVisible(false);
-  };
-
-  var handleOpen = function handleOpen() {
-    if (onClick) {
-      onClick();
+  var closeAction = useRef();
+  var shouldModalOpen = openProp !== null && openProp !== void 0 ? openProp : open;
+  useEffect(function () {
+    setValue(valueProp);
+  }, [valueProp]);
+  useEffect(function () {
+    if (shouldModalOpen) {
+      setValue(valueProp);
     }
+  }, [shouldModalOpen]);
 
-    if (disabled) {
-      if (disabledTip) {
-        message.warning(disabledTip);
-      }
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls;
 
-      return;
-    }
-
-    if (valueProp) {
-      setValue(valueProp);
-    }
+  var handleCancel = function handleCancel() {
+    var _inputRef$current;
 
-    setVisible(true);
+    setOpen(false);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   };
 
-  var handleOk = /*#__PURE__*/function () {
+  var handleOpen = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var checkResult, res;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              if (!beforeOkCheck) {
-                _context.next = 6;
+              onClick === null || onClick === void 0 ? void 0 : onClick();
+
+              if (!disabled) {
+                _context.next = 4;
                 break;
               }
 
-              _context.next = 3;
-              return beforeOkCheck(value);
+              if (disabledTip) {
+                message.warning(disabledTip);
+              }
 
-            case 3:
-              checkResult = _context.sent;
+              return _context.abrupt("return");
 
-              if (checkResult) {
-                _context.next = 6;
+            case 4:
+              if (!(beforeOpen !== undefined)) {
+                _context.next = 9;
+                break;
+              }
+
+              _context.next = 7;
+              return beforeOpen();
+
+            case 7:
+              if (_context.sent) {
+                _context.next = 9;
                 break;
               }
 
               return _context.abrupt("return");
 
-            case 6:
-              setVisible(false);
+            case 9:
+              onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
+              setOpen(true);
+
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handleOpen() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var handleOk = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(payload) {
+      var result, checkResult, change, res;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              result = payload === undefined ? value : payload;
 
-              if (!onChange) {
-                _context.next = 16;
+              if (!beforeOkCheck) {
+                _context2.next = 7;
                 break;
               }
 
-              if (!(beforeOk && value)) {
-                _context.next = 15;
+              _context2.next = 4;
+              return beforeOkCheck(result);
+
+            case 4:
+              checkResult = _context2.sent;
+
+              if (checkResult) {
+                _context2.next = 7;
                 break;
               }
 
-              _context.next = 11;
-              return beforeOk(value);
+              return _context2.abrupt("return");
 
-            case 11:
-              res = _context.sent;
-              onChange(res);
-              _context.next = 16;
-              break;
+            case 7:
+              handleCancel();
 
-            case 15:
-              onChange(value);
+              if (!(onChange !== undefined)) {
+                _context2.next = 18;
+                break;
+              }
 
-            case 16:
-              if (inputRef.current) {
-                inputRef.current.focus();
+              change = function change(val) {
+                if (triggerChangeAfterClose) {
+                  closeAction.current = function () {
+                    onChange(val);
+                  };
+                } else {
+                  onChange(val);
+                }
+              };
+
+              if (!(beforeOk && result)) {
+                _context2.next = 17;
+                break;
               }
 
+              _context2.next = 13;
+              return beforeOk(result);
+
+            case 13:
+              res = _context2.sent;
+              change(res);
+              _context2.next = 18;
+              break;
+
             case 17:
+              change(result);
+
+            case 18:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     }));
 
-    return function handleOk() {
-      return _ref.apply(this, arguments);
+    return function handleOk(_x) {
+      return _ref2.apply(this, arguments);
     };
   }();
 
@@ -169,18 +234,65 @@ function Popup(props) {
     }
   };
 
-  var label = valueProp ? formatLabel ? formatLabel(valueProp) : valueProp : null;
+  var handleAfterClose = function handleAfterClose() {
+    if (closeAction.current !== undefined) {
+      closeAction.current();
+      closeAction.current = undefined;
+    }
+  };
+
+  var modalElm = /*#__PURE__*/React.createElement(Modal, _extends({
+    destroyOnClose: true,
+    open: shouldModalOpen,
+    width: 1000,
+    bodyStyle: {
+      height: 500
+    },
+    centered: true,
+    onCancel: handleCancel,
+    afterClose: handleAfterClose,
+    onOk: function onOk() {
+      return handleOk();
+    },
+    footer: renderFooter ? renderFooter({
+      onCancel: handleCancel,
+      onOk: function onOk() {
+        return handleOk();
+      }
+    }) : undefined
+  }, restProps), component({
+    value: value !== null && value !== void 0 ? value : emptyValue,
+    readOnly: readOnly,
+    onChange: function onChange(val, closePopup) {
+      if (closePopup === true) {
+        handleOk(val);
+      } else {
+        setValue(val);
+      }
+    }
+  }));
+
+  if (modal) {
+    return modalElm;
+  }
+
+  var label = valueProp !== null && valueProp !== undefined ? formatLabel ? formatLabel(valueProp) : valueProp : '';
   var trigger;
 
   if (typeof children === 'function') {
     trigger = children({
-      value: valueProp
+      value: valueProp,
+      readOnly: readOnly,
+      disabled: disabled
     });
-  } else if ( /*#__PURE__*/isValidElement(children)) {
-    trigger = showLabel ? /*#__PURE__*/cloneElement(children, undefined, label) : children;
+  } else if (children !== undefined && children !== null) {
+    trigger = showLabel ? /*#__PURE__*/cloneElement(children, {
+      readOnly: readOnly,
+      disabled: disabled
+    }, label) : children;
   } else {
     trigger = /*#__PURE__*/React.createElement(Input, {
-      className: "".concat(prefixCls, "-input"),
+      className: prefix('input'),
       value: label,
       readOnly: true,
       ref: inputRef,
@@ -188,36 +300,18 @@ function Popup(props) {
       autoFocus: autoFocus,
       placeholder: placeholder,
       bordered: bordered,
-      suffix: /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && allowClear && label && /*#__PURE__*/React.createElement(CloseCircleFilled, {
-        className: "ant-input-clear-icon",
+      allowClear: allowClear,
+      suffix: /*#__PURE__*/React.createElement(React.Fragment, null, !disabled && !readOnly && allowClear && label && /*#__PURE__*/React.createElement(Icons.Clear, {
+        className: "".concat(getPrefixCls('input'), "-clear-icon ").concat(prefix('input-clear')),
         onClick: handleClear
       }), /*#__PURE__*/React.createElement(SearchIcon, null))
     });
   }
 
-  useEffect(function () {
-    if (value !== valueProp && valueProp) {
-      setValue(valueProp);
-    }
-  }, [valueProp]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-wrapper"),
+    className: prefix('wrapper'),
     onClick: handleOpen
-  }, trigger), /*#__PURE__*/React.createElement(Modal, _extends({
-    destroyOnClose: true,
-    visible: visible,
-    width: 994,
-    centered: true,
-    onCancel: handleCancel,
-    onOk: handleOk,
-    bodyStyle: {
-      height: '549px',
-      padding: 0
-    }
-  }, restProps), component({
-    value: value,
-    onChange: setValue
-  })));
+  }, trigger), modalElm);
 }
 
 export default Popup;

package/es/components/Popup/index.less

@@ -3,7 +3,29 @@
 
   &-wrapper {
     width: 100%;
-    height: 100%;
+    min-width: 0;
+
+    .@{ant-prefix}-input-suffix {
+      position: relative;
+
+      .@{ant-prefix}-input-clear-icon:first-child {
+        display: none;
+      }
+    }
+  }
+
+  &-input-clear {
+    position: absolute;
+    top: 50%;
+    padding: 1px;
+    background-color: #fff;
+    transform: translateY(-50%);
+    opacity: 0;
+    transition: opacity 0.3s, color 0.3s !important;
+  }
+
+  &-wrapper:hover &-input-clear {
+    opacity: 1;
   }
 
   &-input input {

package/es/components/Portal/index.d.ts

@@ -1,17 +1,18 @@
-import type { ReactElement } from 'react';
-declare type ContentType = ReactElement | null;
+import React from 'react';
+import type { ReactNode } from 'react';
+declare type ContentType = ReactNode;
 declare function PortalHost(props: {
     children: ContentType;
 }): JSX.Element;
-declare function PortalSlot(props: {
-    slot: string;
-}): ContentType;
 declare function Portal(props: {
     children: ContentType;
     slot: string;
 }): null;
 declare namespace Portal {
     var Host: typeof PortalHost;
-    var Slot: typeof PortalSlot;
+    var Slot: React.NamedExoticComponent<{
+        slot: string;
+        render?: ((children: React.ReactNode) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
+    }>;
 }
 export default Portal;

package/es/components/Portal/index.js

@@ -1,3 +1,11 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -10,9 +18,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { uniqueId } from 'lodash';
+import React, { createContext, memo, useContext, useEffect, useMemo, useState, Fragment } from 'react';
 var Slot = /*#__PURE__*/memo(function Content(props) {
-  return props.children;
+  var children = props.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
 var Context = /*#__PURE__*/createContext({
   set: function set() {},
@@ -72,17 +82,28 @@ function PortalHost(props) {
   }, []);
   var portal = useMemo(function () {
     return {
-      set: function set(key, node) {
+      set: function set(slot, id, node) {
         setNodes(function (prev) {
           var next = new Map(prev);
-          next.set(key, node);
+          var elms = new Map(next.get(slot));
+          elms.set(id, node);
+          next.set(slot, elms);
           return next;
         });
       },
-      delete: function _delete(key) {
+      delete: function _delete(slot, id) {
         setNodes(function (prev) {
           var next = new Map(prev);
-          next.delete(key);
+          var elms = new Map(next.get(slot));
+
+          if (elms) {
+            elms.delete(id);
+          }
+
+          if (elms.size <= 0) {
+            next.delete(slot);
+          }
+
           return next;
         });
       },
@@ -97,8 +118,9 @@ function PortalHost(props) {
   }, /*#__PURE__*/React.createElement(Slot, null, children));
 }
 
-function PortalSlot(props) {
-  var slot = props.slot;
+var PortalSlot = /*#__PURE__*/memo(function PortalSlotContent(props) {
+  var slot = props.slot,
+      render = props.render;
 
   var _useContext = useContext(Context),
       observable = _useContext.observable;
@@ -118,20 +140,43 @@ function PortalSlot(props) {
 
     return unsubscribe;
   }, [slot]);
-  return node;
-}
+  var result = useMemo(function () {
+    if (node === null) {
+      return null;
+    }
+
+    return _toConsumableArray(node).map(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+          id = _ref2[0],
+          elm = _ref2[1];
+
+      return /*#__PURE__*/React.createElement(Fragment, {
+        key: id
+      }, elm);
+    });
+  }, [node]);
+
+  if (render) {
+    return result ? render(result) : null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, result);
+});
 
 function Portal(props) {
   var slot = props.slot,
       children = props.children;
   var portal = useContext(Context);
+  var id = useMemo(function () {
+    return uniqueId('slot');
+  }, []);
   useEffect(function () {
     return function () {
-      portal.delete(slot);
+      portal.delete(slot, id);
     };
   }, [slot]);
   useEffect(function () {
-    portal.set(slot, children);
+    portal.set(slot, id, children);
   }, [slot, children]);
   return null;
 }

package/es/components/Section/TabBar.d.ts

@@ -1,8 +1,9 @@
+import { type ReactNode } from 'react';
 import type { MouseEvent } from 'react';
 interface Props {
     prefixCls: string;
     tabs: {
-        title?: string;
+        title?: ReactNode;
         key: string;
     }[];
     activeKey?: string;

package/es/components/Section/index.d.ts

@@ -1,6 +1,6 @@
 import type { Key } from 'react';
 import type { ReactNode, CSSProperties } from 'react';
-import { TabsProps } from 'antd';
+import { type TabsProps } from 'antd';
 interface Props extends Pick<TabsProps, 'activeKey' | 'onTabClick'> {
     /**
      * @description 标题
@@ -30,10 +30,14 @@ interface Props extends Pick<TabsProps, 'activeKey' | 'onTabClick'> {
      * @description tabs
      */
     tabs?: {
-        title?: string;
+        title?: ReactNode;
         key: string;
         forceRender?: boolean;
     }[];
+    /**
+     * 是否隐藏TabBar
+     */
+    hideTabBar?: boolean;
     /**
      * @description body元素的样式
      */

package/es/components/Section/index.js

@@ -8,8 +8,9 @@ import React from 'react';
 import classNames from 'classnames';
 import { Tabs } from 'antd';
 import { mapChildren } from "../utils";
-import { PREFIX_CLS } from "../../constants";
 import TabBar from "./TabBar";
+import { prefixClassName } from "../utils";
+var prefix = prefixClassName('section');
 export default function Section(props) {
   var _classNames;
 
@@ -24,8 +25,8 @@ export default function Section(props) {
       actions = props.actions,
       flex = props.flex,
       activeKey = props.activeKey,
-      _onTabClick = props.onTabClick;
-  var prefixCls = PREFIX_CLS + '-section';
+      _onTabClick = props.onTabClick,
+      hideTabBar = props.hideTabBar;
   var containerStyle = style;
 
   if (flex) {
@@ -36,22 +37,40 @@ export default function Section(props) {
 
   var hasActions = !!actions;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-").concat(type), !!type), _defineProperty(_classNames, "".concat(prefixCls, "-flex"), !!flex), _classNames), className),
+    className: classNames(prefix(), (_classNames = {}, _defineProperty(_classNames, prefix(type), !!type), _defineProperty(_classNames, prefix('flex'), !!flex), _classNames), className),
     style: containerStyle
   }, title || hasActions ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-header")
+    className: prefix('header')
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-title")
+    className: prefix('title')
   }, title), actions) : null, tabs !== undefined && tabs.length > 0 ? Array.isArray(children) && children.length > 1 ? /*#__PURE__*/React.createElement(Tabs, {
     activeKey: activeKey,
     onTabClick: _onTabClick,
+    items: mapChildren(children, function (child, index) {
+      var _tabs$index = tabs[index],
+          tab = _tabs$index.title,
+          key = _tabs$index.key,
+          forceRender = _tabs$index.forceRender;
+      return {
+        key: key,
+        label: tab,
+        className: prefix('body'),
+        style: bodyStyle,
+        forceRender: forceRender,
+        children: child
+      };
+    }),
     renderTabBar: function renderTabBar(tabProps) {
+      if (hideTabBar) {
+        return null;
+      }
+
       var mKey = tabProps.activeKey,
           mClick = tabProps.onTabClick;
       return /*#__PURE__*/React.createElement(TabBar, {
         activeKey: mKey,
         tabs: tabs,
-        prefixCls: prefixCls,
+        prefixCls: prefix(),
         onTabClick: function onTabClick(key, index, e) {
           mClick(key, e);
 
@@ -63,22 +82,10 @@ export default function Section(props) {
         }
       });
     }
-  }, mapChildren(children, function (child, index) {
-    var _tabs$index = tabs[index],
-        tab = _tabs$index.title,
-        key = _tabs$index.key,
-        forceRender = _tabs$index.forceRender;
-    return /*#__PURE__*/React.createElement(Tabs.TabPane, {
-      tab: tab,
-      key: key,
-      className: "".concat(prefixCls, "-body"),
-      style: bodyStyle,
-      forceRender: true
-    }, child);
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, {
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TabBar, {
     activeKey: activeKey,
     tabs: tabs,
-    prefixCls: prefixCls,
+    prefixCls: prefix(),
     onTabClick: function onTabClick(key, index, e) {
       if (_onTabClick) {
         _onTabClick(key, e);
@@ -89,10 +96,10 @@ export default function Section(props) {
       }
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-body"),
+    className: prefix('body'),
     style: bodyStyle
   }, children)) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-body"),
+    className: prefix('body'),
     style: bodyStyle
   }, children));
 }