@chaoswise/ui 2.3.1 → 2.3.3

package/lib/DropdownDatePicker/index.js

@@ -1,3 +1,4 @@
+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); }
 import _Dropdown from "@chaoswise/ui/lib/Antd/Dropdown";
 import "@chaoswise/ui/lib/Input/index.less";
 import _Input from "@chaoswise/ui/lib/Input";
@@ -5,9 +6,18 @@ import "@chaoswise/ui/lib/DatePicker/index.less";
 import _DatePicker from "@chaoswise/ui/lib/DatePicker";
 import "@chaoswise/ui/lib/RangePicker/index.less";
 import _RangePicker from "@chaoswise/ui/lib/RangePicker";
+import "@chaoswise/ui/lib/Tooltip/index.less";
+import _Tooltip from "@chaoswise/ui/lib/Tooltip";
 import _ConfigProvider from "@chaoswise/ui/lib/ConfigProvider";
-var _excluded = ["inputPrefixIcon", "className"];
+var _excluded = ["inputPrefixIcon", "className"],
+  _excluded2 = ["value"],
+  _excluded3 = ["value"];
 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); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -21,8 +31,12 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import DropDownMenu from "./DropdownMenu";
 import LiveSvg from "./assets/live";
-import { regroupDataSourceFn, echoInputValue } from "./utils";
+import RecoverSvg from "./assets/Recover";
+import { getLocale } from "./locale";
+import _ from "lodash";
+import { regroupDataSourceFn, echoInputValue, isEmptyObject, funcValueChangeArrayValue, getCorrectValue } from "./utils";
 import moment from "moment";
+import { v4 as uuidv4 } from 'uuid';
 import "./index.less";
 var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var defaultValue = props.defaultValue,
@@ -42,6 +56,7 @@ var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var _ConfigProvider$useLo = _ConfigProvider.useLocale(),
     _ConfigProvider$useLo2 = _ConfigProvider$useLo.locale,
     locale = _ConfigProvider$useLo2 === void 0 ? "zh" : _ConfigProvider$useLo2;
+  var localeObj = getLocale(locale);
   var _menuOption$showCalen = menuOption.showCalendar,
     showCalendar = _menuOption$showCalen === void 0 ? true : _menuOption$showCalen,
     _menuOption$isRangePi = menuOption.isRangePickerCalendar,
@@ -73,14 +88,29 @@ var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     recordDateValue = _useState6[0],
     setRecordDateValue = _useState6[1];
-  // 是否切换到日历选择
-  var _useState7 = useState(false),
+  // 当前默认时间项
+  var _useState7 = useState({}),
     _useState8 = _slicedToArray(_useState7, 2),
-    isCalendar = _useState8[0],
-    setIsCalendar = _useState8[1];
+    dateValue = _useState8[0],
+    setDateValue = _useState8[1];
+  // 是否切换到日历选择
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isCalendar = _useState10[0],
+    setIsCalendar = _useState10[1];
   // 特殊时间选择器外壳容器
   var calendarRef = useRef(null);
   // 初始时记录当前时间项
+  useEffect(function () {
+    var dateValue = {};
+    if (value) {
+      dateValue = value;
+    } else if (defaultValue) {
+      dateValue = defaultValue;
+    }
+    setDateValue(dateValue);
+  }, []);
+  // 初始时记录当前时间项
   useEffect(function () {
     if (value) {
       setRecordDateValue(value);
@@ -131,6 +161,45 @@ var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   }, inputPrefixIcon ? inputPrefixIcon : /*#__PURE__*/React.createElement(LiveSvg, {
     className: classnames("cw-dropdown-date-picker-prefix-icon")
   }));
+  // 恢复默认配置
+  var onRecover = function onRecover() {
+    var isEmptyObj = isEmptyObject(dateValue);
+    var values = dateValue.value,
+      key = dateValue.key;
+    var returnValue = dateValue;
+    if (!isEmptyObj) {
+      returnValue = _objectSpread(_objectSpread({}, dateValue), {}, {
+        value: funcValueChangeArrayValue(values)
+      });
+      returnValue = getCorrectValue(returnValue, key);
+    }
+    _onChange(returnValue);
+    if (!value) {
+      setRecordDateValue(returnValue);
+    }
+  };
+  var isEqual = useMemo(function () {
+    var values = recordDateValue.value,
+      rest = _objectWithoutProperties(recordDateValue, _excluded2);
+    var _values = dateValue.value,
+      dateValueRest = _objectWithoutProperties(dateValue, _excluded3);
+    if (isEmptyObject(recordDateValue) && isEmptyObject(dateValue)) {
+      return true;
+    }
+    if (!isEmptyObject(recordDateValue) && !isEmptyObject(dateValue)) {
+      if (_.isEqual(rest, dateValueRest)) {
+        return true;
+      }
+    }
+    return false;
+  }, [recordDateValue, dateValue]);
+  // 输入框尾缀图标
+  var inputSuffix = !isEqual && /*#__PURE__*/React.createElement(_Tooltip, {
+    title: localeObj.recover
+  }, /*#__PURE__*/React.createElement(RecoverSvg, {
+    onClick: onRecover,
+    className: classnames("cw-dropdown-date-picker-suffix-recover")
+  }));
   // 输入框获取焦点
   var onInputFocus = function onInputFocus(e) {
     setIsFocus(true);
@@ -166,12 +235,15 @@ var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       setIsCalendar(false);
       setIsFocus(false);
       if (_value) {
+        var key = uuidv4();
         _onChange({
-          value: _value
+          value: _value,
+          key: key
         });
         if (!value) {
           setRecordDateValue({
-            value: _value
+            value: _value,
+            key: key
           });
         }
       }
@@ -202,12 +274,15 @@ var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
       setIsCalendar(false);
       setIsFocus(false);
       if (_value) {
+        var key = uuidv4();
         _onChange({
-          value: [_value]
+          value: [_value],
+          key: key
         });
         if (!value) {
           setRecordDateValue({
-            value: [_value]
+            value: [_value],
+            key: key
           });
         }
       }
@@ -215,7 +290,8 @@ var DropdownDatePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     inputReadOnly: true
   }) : null;
   var _renderInputDom = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Input, _extends({
-    prefix: inputPrefix
+    prefix: inputPrefix,
+    suffix: inputSuffix
   }, _inputOption, {
     className: classnames("cw-dropdown-date-picker-input-wrapper", inputWrapperClassName),
     onFocus: onInputFocus,

package/lib/DropdownDatePicker/locale/en_US.js

@@ -1,4 +1,5 @@
 export default {
+  recover: "Restore default",
   s: "Second",
   m: "Minute",
   h: "Hour",

package/lib/DropdownDatePicker/locale/zh_CN.js

@@ -1,4 +1,5 @@
 export default {
+  recover: "恢复默认值",
   s: "秒",
   m: "分钟",
   h: "小时",

package/lib/DropdownDatePicker/utils/index.js

@@ -241,7 +241,11 @@ export var getCorrectValue = function getCorrectValue(value) {
   }
   if (!isRule && !returnValue.value) {
     delete returnValue.value;
-    delete returnValue.isRecently;
   }
   return returnValue;
-};
+};
+
+// 判断一个值是否为空对象
+export function isEmptyObject(value) {
+  return Object.keys(value).length === 0 && value.constructor === Object;
+}

package/lib/Header/TopNavigationMenu/index.js

@@ -0,0 +1,59 @@
+import _Dropdown from "@chaoswise/ui/lib/Antd/Dropdown";
+import _Icon from "@chaoswise/ui/lib/Antd/Icon";
+import _Menu from "@chaoswise/ui/lib/Menu";
+import "@chaoswise/ui/lib/TooltipText/index.less";
+import _TooltipText from "@chaoswise/ui/lib/TooltipText";
+import React, { useMemo } from "react";
+import classnames from "classnames";
+import "./index.less";
+// 产品直接在头部容器中展示
+var TopNavigationMenu = function TopNavigationMenu(props) {
+  var topNavigation = props.topNavigation,
+    onClickTopNavigationSelf = props.onClickTopNavigationSelf,
+    topNavigationOption = props.topNavigationOption;
+  var _topNavigationOption$ = topNavigationOption.unfoldMaxCount,
+    unfoldMaxCount = _topNavigationOption$ === void 0 ? 4 : _topNavigationOption$,
+    _topNavigationOption$2 = topNavigationOption.activeKey,
+    activeKey = _topNavigationOption$2 === void 0 ? "" : _topNavigationOption$2,
+    moreOverlayClassName = topNavigationOption.moreOverlayClassName,
+    topNavigationWrapperClassName = topNavigationOption.topNavigationWrapperClassName;
+  var _activeKey = useMemo(function () {
+    return activeKey;
+  }, [activeKey]);
+  if (!topNavigation || !topNavigation.length) {
+    return null;
+  }
+  var menu = /*#__PURE__*/React.createElement(_Menu, {
+    selectable: true,
+    selectedKeys: [_activeKey]
+  }, topNavigation.slice(unfoldMaxCount).map(function (item) {
+    return /*#__PURE__*/React.createElement(_Menu.Item, {
+      onClick: function onClick(_ref) {
+        var domEvent = _ref.domEvent;
+        onClickTopNavigationSelf(domEvent, item);
+      },
+      key: item.value
+    }, /*#__PURE__*/React.createElement(_TooltipText, null, item.name));
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("cw-header-top-navigation-menu-wrapper", topNavigationWrapperClassName)
+  }, topNavigation.slice(0, unfoldMaxCount).map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.value,
+      onClick: function onClick(e) {
+        return onClickTopNavigationSelf(e, item);
+      },
+      className: classnames("cw-header-top-navigation-menu-item", {
+        "cw-header-top-navigation-menu-item-seleted": _activeKey === item.value
+      })
+    }, item.name);
+  }), (topNavigation === null || topNavigation === void 0 ? void 0 : topNavigation.length) > unfoldMaxCount && /*#__PURE__*/React.createElement(_Dropdown, {
+    overlay: menu,
+    overlayClassName: classnames(moreOverlayClassName)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "cw-header-top-navigation-menu-more-wrapper"
+  }, /*#__PURE__*/React.createElement(_Icon, {
+    type: "ellipsis"
+  }))));
+};
+export default TopNavigationMenu;

package/lib/Header/TopNavigationMenu/index.less

@@ -0,0 +1,41 @@
+.cw-header-top-navigation-menu-wrapper {
+    margin-left: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    font-size: 12px;
+
+    .cw-header-top-navigation-menu-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 20px;
+        line-height: 20px;
+        padding: 0 12px;
+        &:hover{
+            cursor: pointer;
+        }
+        &:not(.cw-header-top-navigation-menu-item-seleted):hover {
+            color: @primary-5;
+        }
+
+        &:not(:first-child) {
+            margin-left: 8px;
+        }
+
+        &.cw-header-top-navigation-menu-item-seleted {
+            background-color: @primary-color;
+            font-weight: 500;
+            border-radius: 10px;
+        }
+    }
+
+    .cw-header-top-navigation-menu-more-wrapper {
+        margin-left: 20px;
+        &:hover{
+            cursor: pointer;
+            color: @primary-5;
+        }
+    }
+}

package/lib/Header/index.js

@@ -13,6 +13,7 @@ import PropTypes from 'prop-types';
 import { ConfigConsumer } from 'antd/es/config-provider';
 import Message from './Message';
 import Document from './Document';
+import TopNavigationMenu from './TopNavigationMenu';
 import './index.less';
 /**
  * 
@@ -106,7 +107,10 @@ function CWHeader(_ref) {
     userSetingOption = _ref.userSetingOption,
     _ref$logoSize = _ref.logoSize,
     logoSize = _ref$logoSize === void 0 ? '50%' : _ref$logoSize,
-    homeIcon = _ref.homeIcon;
+    homeIcon = _ref.homeIcon,
+    topNavigationOption = _ref.topNavigationOption;
+  var _topNavigationOption$ = topNavigationOption.topNavigationType,
+    topNavigationType = _topNavigationOption$ === void 0 ? "fold" : _topNavigationOption$;
   var logoContainerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -224,7 +228,7 @@ function CWHeader(_ref) {
         onClick: onClickHome
       }, homeIcon ? homeIcon : /*#__PURE__*/React.createElement(_Icon, {
         component: homeIconSvg
-      })) : null, showTopNavigation && /*#__PURE__*/React.createElement(_Dropdown, {
+      })) : null, showTopNavigation && (topNavigationType === "fold" ? /*#__PURE__*/React.createElement(_Dropdown, {
         trigger: topNavigationTrigger,
         overlayClassName: "".concat(prefixCls, "-cw-header-dropdown-out-wrapper ").concat(topNavigationClassName !== undefined ? topNavigationClassName : ''),
         overlay: renderTopNavigationMenu(),
@@ -239,11 +243,15 @@ function CWHeader(_ref) {
         }
       }, allProductsTitle, " ", /*#__PURE__*/React.createElement(_Icon, {
         type: "caret-down"
-      }))), /*#__PURE__*/React.createElement("div", {
+      }))) : /*#__PURE__*/React.createElement(TopNavigationMenu, {
+        onClickTopNavigationSelf: onClickTopNavigationSelf,
+        topNavigation: topNavigation,
+        topNavigationOption: topNavigationOption
+      })), topNavigationType === "fold" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "cw-division"
       }), /*#__PURE__*/React.createElement("div", {
         className: "cw-page-name"
-      }, title)), /*#__PURE__*/React.createElement("div", {
+      }, title))), /*#__PURE__*/React.createElement("div", {
         className: "cw-header-right"
       }, extra, /*#__PURE__*/React.createElement(Message, {
         option: messageOption

package/lib/InputNumber/index.js

@@ -25,6 +25,10 @@ var CWInputNumber = /*#__PURE__*/forwardRef(function (props, inputNumberRef) {
       var inputNumberInputDom = ReactDom.findDOMNode(ref.current);
       // rc-input-number底层依赖升级以后需要向上查找
       var inputNumberWrapperDom = inputNumberInputDom.closest(".".concat(prefixCls, "-input-number"));
+      var ExistingSlotDom = inputNumberWrapperDom.querySelector(".cw-input-number-custom-slot-wrapper");
+      if (ExistingSlotDom) {
+        inputNumberWrapperDom.removeChild(ExistingSlotDom);
+      }
       var divEle = document.createElement("div");
       divEle.className = "cw-input-number-custom-slot-wrapper";
       if (inputNumberWrapperDom) {

package/lib/RangePicker/components/ExtraTimeFooter.js

@@ -43,7 +43,10 @@ export default function ExtraTimeFooter(_ref) {
   }, showTime && /*#__PURE__*/React.createElement("div", {
     className: "cw-rangePicker-time"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "cw-rangePicker-leftTime"
+    className: "cw-rangePicker-leftTime",
+    onMouseDown: function onMouseDown(e) {
+      e.stopPropagation();
+    }
   }, /*#__PURE__*/React.createElement(_TimePicker, _extends({
     value: startTimeValue,
     onChange: startChange,
@@ -54,7 +57,10 @@ export default function ExtraTimeFooter(_ref) {
     type: "swap-right",
     className: "cw-rangePicker-swap-icon"
   }), /*#__PURE__*/React.createElement("div", {
-    className: "cw-rangePicker-rightTime"
+    className: "cw-rangePicker-rightTime",
+    onMouseDown: function onMouseDown(e) {
+      e.stopPropagation();
+    }
   }, /*#__PURE__*/React.createElement(_TimePicker, _extends({
     getPopupContainer: getPopupContainer,
     value: endTimeValue,

package/lib/RangePicker/index.js

@@ -165,6 +165,7 @@ var _RangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   // TimePicker开始时间改变触发的事件
   var changeStartTime = function changeStartTime(newStartTime) {
+    if (!newStartTime) return;
     setStartTimeParams(newStartTime);
     isBtnRef.current = false;
     if (Array.isArray(dateValue)) {
@@ -182,6 +183,7 @@ var _RangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   };
   // TimePicker结束时间改变触发的事件
   var changeEndTime = function changeEndTime(newEndTime) {
+    if (!newEndTime) return;
     setEndTimeParams(newEndTime);
     isBtnRef.current = false;
     if (Array.isArray(dateValue)) {
@@ -373,6 +375,9 @@ var _RangePicker = /*#__PURE__*/forwardRef(function (props, ref) {
     className: "cw-new-range-picker-wrapper",
     ref: wrapperRef
   }, /*#__PURE__*/React.createElement(RangePicker, _extends({
+    popupStyle: {
+      zIndex: 9999
+    },
     panelRender: panelRender ? panelRender : function (panelNode) {
       var rangesToArray = Object.entries(ranges);
       return /*#__PURE__*/React.createElement("div", {

package/lib/RangePicker/index.less

@@ -86,24 +86,39 @@
             }
 
             .@{ant-prefix}-time-picker-panel {
-                top: -232px !important;
-
+                bottom: -28px !important;
+                top: auto !important;
                 .@{ant-prefix}-time-picker-panel-inner {
                     border-radius: 2px !important;
                     width: 160px;
                     left: 0;
+                    display: flex;
+                    flex-direction: column-reverse;
                     .@{ant-prefix}-time-picker-panel-input-wrap {
-                        display: none;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        border: @border-width-base @border-style-base @border-color-base;
+                        padding: 0;
+                        height: 28px;
+                        &:hover{
+                            border-color: @primary-5;
+                        }
+                        &:focus-within{
+                            border-color: @primary-color;
+                        }
+                        .@{ant-prefix}-time-picker-panel-input{
+                            text-align: center;
+                        }
                     }
-
                     .@{ant-prefix}-time-picker-panel-combobox {
                         width: 100%;
-                        height: 232px;
+                        height: 200px;
 
                         .@{ant-prefix}-time-picker-panel-select {
                             width: 33.3%;
-                            height: 223px;
-                            max-height: 232px;
+                            height: 200px;
+                            max-height: 200px;
 
                             ul {
                                 width: 100%;

package/lib/SimplePagination/index.js

@@ -91,7 +91,7 @@ function SimplePagination(props) {
     }
     if (current_ < 1) return;
     if (current_ > allPage) return;
-    if (current_ === pageInfo.current) return;
+    if (current_ === _current) return;
     _onChange(current_, _pageSize);
     setPageInfo(_objectSpread(_objectSpread({}, pageInfo), {}, {
       current: current_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chaoswise/ui",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "公共UI库",
   "keywords": [
     "ui",
@@ -140,5 +140,5 @@
     "access": "public"
   },
   "license": "MIT",
-  "gitHead": "3f29b1423a4e9dc0fd1f32653b2e7e11540922f5"
+  "gitHead": "d4b92c78c796d0e79769112f642e46aaf7453ed5"
 }