@titaui/pc 1.16.29 → 1.16.30-beta.1

package/lib/components/date-picker/BodyItem.js

@@ -47,7 +47,7 @@ var BodyItem = /*#__PURE__*/function (_Component) {
   var _super = _createSuper(BodyItem);
 
   function BodyItem() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, BodyItem);
 
@@ -55,7 +55,7 @@ var BodyItem = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.getClass = function () {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.getClass = function () {
       var _this$props = _this.props,
           isAllowSelect = _this$props.isAllowSelect,
           date = _this$props.date,
@@ -86,7 +86,7 @@ var BodyItem = /*#__PURE__*/function (_Component) {
       if (_this.disabled) return;
 
       _this.props.onSelectDate((0, _moment["default"])(date.format("YYYY/MM/DD")));
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(BodyItem, [{

package/lib/components/date-picker/CalendarHeader.js

@@ -87,7 +87,7 @@ var CalendarHeader = /*#__PURE__*/function (_Component) {
   var _super = _createSuper(CalendarHeader);
 
   function CalendarHeader() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, CalendarHeader);
 
@@ -95,7 +95,7 @@ var CalendarHeader = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.setDate = function (func) {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.setDate = function (func) {
       var date = (0, _moment["default"])(_this.props.date);
 
       for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
@@ -113,7 +113,7 @@ var CalendarHeader = /*#__PURE__*/function (_Component) {
       }
 
       return years;
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(CalendarHeader, [{

package/lib/components/delete-confirm-pop/ConfirmPop.js

@@ -49,7 +49,7 @@ var ConfirmPop = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(ConfirmPop);
 
   function ConfirmPop() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, ConfirmPop);
 
@@ -57,13 +57,13 @@ var ConfirmPop = /*#__PURE__*/function (_PureComponent) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
       // @ts-ignore
       _this.refs.pop.show(_this.refs.trigger);
     }, _this.handleHide = function () {
       // @ts-ignore
       _this.refs.pop.hide();
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(ConfirmPop, [{

package/lib/components/eReport/eReportLists/reportList.js

@@ -55,7 +55,7 @@ var EReportList = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(EReportList);
 
   function EReportList() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, EReportList);
 
@@ -63,7 +63,7 @@ var EReportList = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.state = {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.state = {
       selectedPeriodValue: '',
       showDatePick: false,
       eReportWeekList: [],
@@ -178,7 +178,7 @@ var EReportList = /*#__PURE__*/function (_React$Component) {
           return _this.handlerEReportShareSubmit(submitStatus);
         }
       })));
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(EReportList, [{

package/lib/components/emotions-selector/selector-pop.js

@@ -47,7 +47,7 @@ var EmotionsSelectorPop = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(EmotionsSelectorPop);
 
   function EmotionsSelectorPop() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, EmotionsSelectorPop);
 
@@ -55,7 +55,7 @@ var EmotionsSelectorPop = /*#__PURE__*/function (_PureComponent) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
       setTimeout(function () {
         // @ts-ignore
         _this.refs.pop.show(_this.refs.trigger);
@@ -63,7 +63,7 @@ var EmotionsSelectorPop = /*#__PURE__*/function (_PureComponent) {
     }, _this.handleHide = function () {
       // @ts-ignore
       _this.refs.pop.hide();
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(EmotionsSelectorPop, [{

package/lib/components/ereport-list/index.js

@@ -57,7 +57,7 @@ var EReportList = /*#__PURE__*/function (_React$Component) {
   var _super = _createSuper(EReportList);
 
   function EReportList() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, EReportList);
 
@@ -65,7 +65,7 @@ var EReportList = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.state = {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.state = {
       selectedPeriodValue: "",
       showDatePick: false,
       eReportWeekList: [],
@@ -178,7 +178,7 @@ var EReportList = /*#__PURE__*/function (_React$Component) {
           return _this.handlerEReportShareSubmit(submitStatus);
         }
       })));
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(EReportList, [{

package/lib/components/keyword-search/index.css

@@ -1,53 +1,71 @@
 .titaui-keyword-search {
-  background: #fff;
+  width: 36px;
   height: 36px;
   padding: 8px;
-  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
-  display: flex;
   border-radius: 18px;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
+  transition: all 0.3s cubic-bezier(0.17, 0.63, 0.32, 1.27);
+  background-color: #ffffff;
   box-sizing: border-box;
+  display: flex;
   align-items: center;
+  position: relative;
 }
 
 .titaui-keyword-search--active {
-  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1), 0px 0px 4px 0px rgba(40, 121, 255, 0.3);
-  border: 1px solid #2879ff;
+  width: 190px;
+  border: none;
+  box-shadow: 0px 0px 8px 0px rgba(127, 145, 180, 0.1);
 }
 
-.titaui-keyword-search__del-icon {
-  font-size: 20px;
-  color: #89919f;
-  margin-right: 4px;
+.titaui-keyword-search--active .titaui-keyword-search__input {
+  opacity: 1;
+  visibility: visible;
 }
 
-.titaui-keyword-search__del-icon:hover {
-  cursor: pointer;
-  color: #f05e5e;
+.titaui-keyword-search__input {
+  width: 120px;
+  padding-right: 52px;
+  opacity: 0;
+  visibility: hidden;
 }
 
-.titaui-keyword-search__search-icon.tu-icon-search {
-  font-size: 20px !important;
+.titaui-keyword-search__input input {
+  width: 100%;
+  border: none;
+}
+
+.titaui-keyword-search__del-icon {
+  font-size: 19px;
+  opacity: 0;
+  transform: scale(0);
+  transition: all .3s ease;
+  color: #c2cbd1;
   cursor: pointer;
+  visibility: hidden;
+  position: absolute;
+  right: 32px;
 }
 
-.titaui-keyword-search__search-icon.tu-icon-search:hover {
-  color: #2879ff;
+.titaui-keyword-search__del-icon--visible {
+  opacity: 1;
+  transform: scale(1);
+  visibility: visible;
 }
 
-.titaui-keyword-search__input {
-  width: 0;
-  animation: shrink 0.1s ease;
+.titaui-keyword-search__del-icon:hover {
+  color: #f05e5e;
 }
 
-.titaui-keyword-search__input input {
-  width: 100%;
-  border: none;
+.titaui-keyword-search__search-icon {
+  font-size: 20px !important;
+  cursor: pointer;
+  position: absolute;
+  right: 8px;
 }
 
-.titaui-keyword-search--active .titaui-keyword-search__input {
-  width: 120px;
-  margin-right: 12px;
-  animation: grow 0.1s ease;
+.titaui-keyword-search__search-icon:hover {
+  color: #2879ff;
 }
 
 @keyframes grow {

package/lib/components/keyword-search/index.js

@@ -9,7 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames3 = _interopRequireDefault(require("classnames"));
 
 var _getLocale = require("../../utils/getLocale");
 
@@ -35,79 +35,101 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var precls = "titaui-keyword-search";
+var precls = 'titaui-keyword-search';
 
 function KeywordSearch(props) {
-  var onSearch = props.onSearch;
-  var inputRef = (0, _react.useRef)();
+  var onSearch = props.onSearch,
+      _props$value = props.value,
+      value = _props$value === void 0 ? '' : _props$value;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       active = _useState2[0],
       setActive = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(""),
+  var _useState3 = (0, _react.useState)(''),
       _useState4 = _slicedToArray(_useState3, 2),
       keyword = _useState4[0],
       setKeyword = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searched = _useState6[0],
+      setSearched = _useState6[1];
+
+  var inputRef = (0, _react.useRef)();
+  var timerRef = (0, _react.useRef)();
+
+  var handleSearch = function handleSearch() {
+    setSearched(true);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch({
+      keyWords: keyword
+    });
+  };
+
   var handleSearchClick = function handleSearchClick() {
     if (!active) {
-      var _inputRef$current;
-
       setActive(true);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      timerRef.current = setTimeout(function () {
+        var _inputRef$current;
+
+        clearTimeout(timerRef.current);
+        inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      });
     } else {
       handleSearch();
     }
   };
 
-  var handleSearch = function handleSearch() {
-    onSearch && onSearch({
-      keyWords: keyword
-    });
-  };
-
-  var handleOnBlur = function handleOnBlur(e) {
+  var handleOnBlur = function handleOnBlur() {
     if (!keyword.length) setActive(false);
+    clearTimeout(timerRef.current);
   };
 
   var changeValue = function changeValue(e) {
-    setKeyword(e.target.value);
+    return setKeyword(e.target.value);
   };
 
   var handleOnKeyDown = function handleOnKeyDown(e) {
-    if (e.keyCode == 13) {
+    if (e.keyCode === 13) {
       handleSearch();
     }
   };
 
-  var clearKeyword = function clearKeyword(e) {
+  var clearKeyword = function clearKeyword() {
     var _inputRef$current2;
 
-    setKeyword("");
+    setKeyword('');
     inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    onSearch && onSearch({
-      keyWords: ""
-    });
+
+    if (searched || value) {
+      onSearch === null || onSearch === void 0 ? void 0 : onSearch({
+        keyWords: ''
+      });
+      setSearched(false);
+    }
   };
 
+  (0, _react.useEffect)(function () {
+    setKeyword(value);
+    setActive(!!value);
+  }, [value]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames2["default"])(precls, _defineProperty({}, "".concat(precls, "--active"), active))
+    className: (0, _classnames3["default"])(precls, _defineProperty({}, "".concat(precls, "--active"), active))
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(precls, "__input")
   }, /*#__PURE__*/_react["default"].createElement("input", {
-    value: keyword,
-    onKeyUp: handleOnKeyDown,
+    onBlur: handleOnBlur,
     onChange: changeValue,
+    onKeyUp: handleOnKeyDown,
+    placeholder: (0, _getLocale.getLocale)('Mod_Enterkeywords'),
     ref: inputRef,
-    onBlur: handleOnBlur,
-    placeholder: (0, _getLocale.getLocale)("Mod_Enterkeywords")
-  })), keyword.length > 0 && /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames2["default"])("tu-icon-cross", "".concat(precls, "__del-icon")),
+    value: keyword
+  })), /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames3["default"])('tu-icon-cross', "".concat(precls, "__del-icon"), _defineProperty({}, "".concat(precls, "__del-icon--visible"), !!keyword)),
     onClick: clearKeyword
   }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames2["default"])("tu-icon-search", "".concat(precls, "__search-icon")),
+    className: (0, _classnames3["default"])('tu-icon-search', "".concat(precls, "__search-icon")),
     onClick: handleSearchClick
   }));
 }

package/lib/components/mblog/components/MblogAction.js

@@ -83,7 +83,7 @@ var MblogAction = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(MblogAction);
 
   function MblogAction() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, MblogAction);
 
@@ -91,7 +91,7 @@ var MblogAction = /*#__PURE__*/function (_PureComponent) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.state = {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.state = {
       isSendSms: false,
       // 是否短信通知
       isShowConfirmPop: false
@@ -121,7 +121,7 @@ var MblogAction = /*#__PURE__*/function (_PureComponent) {
           isSendSms: false
         });
       }
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(MblogAction, [{

package/lib/components/okr-detail/components/okr-tree/tree-node/kr-node/kr-score-editor/edit-pop.js

@@ -81,7 +81,7 @@ var EditPop = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(EditPop);
 
   function EditPop() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, EditPop);
 
@@ -89,7 +89,7 @@ var EditPop = /*#__PURE__*/function (_PureComponent) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.state = {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.state = {
       value: _this.props.value,
       showError: false,
       errMsg: "",
@@ -152,7 +152,7 @@ var EditPop = /*#__PURE__*/function (_PureComponent) {
         errMsg: (0, _i18nFrontTranslate.inputWordTrans)(value.length, maxLength),
         disable: !!(maxLength && value.length > maxLength && disable)
       });
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(EditPop, [{

package/lib/components/okr-excel-create/index.js

@@ -342,8 +342,8 @@ var OKRExcelCreate = function OKRExcelCreate(_ref3) {
   }, /*#__PURE__*/_react["default"].createElement(_tableExcelV["default"], {
     className: (0, _classnames["default"])("".concat(preCls, "__table-excel-v2 ").concat(tableClassName), _defineProperty({}, "".concat(preCls, "--disabled-remove"), hiddenRemoveIcon)),
     rowKey: "uuid",
-    fixedHeader: true,
-    pinned: [1, 0],
+    fixedHeader: true // pinned={[1, 0]}
+    ,
     columns: columnsOption,
     dataSource: excelTableData,
     rowLastNode: /*#__PURE__*/_react["default"].createElement("div", {

package/lib/components/okr-review/components/confirm-pop/ConfirmPop.js

@@ -49,7 +49,7 @@ var ConfirmPop = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(ConfirmPop);
 
   function ConfirmPop() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, ConfirmPop);
 
@@ -57,13 +57,13 @@ var ConfirmPop = /*#__PURE__*/function (_PureComponent) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
       // @ts-ignore
       _this.refs.pop.show(_this.refs.trigger);
     }, _this.handleHide = function () {
       // @ts-ignore
       _this.refs.pop.hide();
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(ConfirmPop, [{

package/lib/components/period-selector/components/selector/style.js

@@ -13,39 +13,39 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 262px;\n    box-sizing: border-box;\n    min-height: 80px;\n    padding: 16px 0px;\n    border: 1px solid #f7f8fa;\n    border-radius: 4px;\n    box-shadow: 0px 4px 12px 0px rgba(127,145,180,0.2); \n    background: #ffffff;\n    box-sizing: content-box;\n"])));
+var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 262px;\n  box-sizing: border-box;\n  min-height: 80px;\n  padding: 16px 0px;\n  border: 1px solid #f7f8fa;\n  border-radius: 12px;\n  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);\n  background: #ffffff;\n  box-sizing: content-box;\n"])));
 
 exports.Wrapper = Wrapper;
 
-var Head = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: 36px;\n    margin: 0 20px 8px;\n    padding: 8px 15px;\n    border-radius: 3px;\n    background: #f7f8fa;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n"])));
+var Head = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 36px;\n  margin: 0 20px 8px;\n  padding: 8px 15px;\n  border-radius: 8px;\n  background: #f7f8fa;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 
 exports.Head = Head;
 
-var Title = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 1;\n    font-size: 14px;\n    height: 20px;\n    color: #3f4755;\n    cursor: default;\n    text-align: center;\n\n    &:hover {\n        color: #3f4755;\n    }\n"])));
+var Title = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1;\n  font-size: 14px;\n  height: 20px;\n  color: #3f4755;\n  cursor: default;\n  text-align: center;\n\n  &:hover {\n    color: #3f4755;\n  }\n"])));
 
 exports.Title = Title;
 
-var Icon = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    transition: all .3s ease-in;\n    color: #3f4755;\n\n    &:hover {\n        color: #2879ff;\n    }\n\n    &.disabled {\n        color: #bfc7d5;\n        cursor: default;\n\n        &:hover {\n            color: #bfc7d5;\n        }\n    }\n"])));
+var Icon = _styledComponents["default"].a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: all 0.3s ease-in;\n  color: #3f4755;\n\n  &:hover {\n    color: #2879ff;\n  }\n\n  &.disabled {\n    color: #bfc7d5;\n    cursor: default;\n\n    &:hover {\n      color: #bfc7d5;\n    }\n  }\n"])));
 
 exports.Icon = Icon;
 
-var List = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    padding: 0 11px;\n    box-sizing: border-box;\n"])));
+var List = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  padding: 0 11px;\n  box-sizing: border-box;\n"])));
 
 exports.List = List;
 
 var getItemWidthBySize = function getItemWidthBySize(size) {
-  if (size == "s") return 48;
-  if (size == "m") return 72;
+  if (size == 's') return 48;
+  if (size == 'm') return 72;
   return 72;
 };
 
-var Item = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: ", "px;\n    padding: 8px;\n    font-size: 12px;\n    line-height: 17px;\n    transition: all .3s ease-in;\n    box-sizing: border-box;\n    color: #6f7886;\n    cursor: pointer;\n    text-align: center;\n    white-space: nowrap;\n    flex-shrink: 0;\n\n    &.active,\n    &:hover {\n        color: #2879ff;\n    }\n\n    &:hover {\n        background: rgba(240,242,245,0.3);\n    }\n"])), function (p) {
+var Item = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: 8px;\n  font-size: 12px;\n  line-height: 17px;\n  border-radius: 8px;\n  transition: all 0.3s ease-in;\n  box-sizing: border-box;\n  color: #6f7886;\n  cursor: pointer;\n  text-align: center;\n  white-space: nowrap;\n  flex-shrink: 0;\n\n  &.active,\n  &:hover {\n    color: #2879ff;\n  }\n\n  &:hover {\n    background: #F7F8FA;\n  }\n"])), function (p) {
   return getItemWidthBySize(p.size);
 });
 
 exports.Item = Item;
 
-var PlaceHolder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: ", "px;\n    height: 0;\n"])), function (p) {
+var PlaceHolder = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: 0;\n"])), function (p) {
   return getItemWidthBySize(p.size);
 });
 

package/lib/components/period-selector/index.js

@@ -79,7 +79,10 @@ function PeriodSelector(_ref) {
       _ref$buttonClass = _ref.buttonClass,
       buttonClass = _ref$buttonClass === void 0 ? '' : _ref$buttonClass,
       _ref$noBorder = _ref.noBorder,
-      noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder;
+      noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder,
+      _ref$needInitPeriod = _ref.needInitPeriod,
+      needInitPeriod = _ref$needInitPeriod === void 0 ? true : _ref$needInitPeriod,
+      onPopupVisibleChange = _ref.onPopupVisibleChange;
 
   var _useState = (0, _react.useState)({
     hasSetting: true,
@@ -110,6 +113,12 @@ function PeriodSelector(_ref) {
       setVisible = _useState6[1];
 
   var fetchRef = (0, _react.useRef)(false);
+
+  var onPopupVisibleChangeHandler = function onPopupVisibleChangeHandler(popupVisible) {
+    setVisible(popupVisible);
+    onPopupVisibleChange === null || onPopupVisibleChange === void 0 ? void 0 : onPopupVisibleChange(popupVisible);
+  };
+
   (0, _react.useEffect)(function () {
     if (selected) {
       setSelectedPeriod(selected);
@@ -139,9 +148,9 @@ function PeriodSelector(_ref) {
       });
     } else if (selected) {
       setSelectedPeriod(selected);
-    } else {
+    } else if (needInitPeriod) {
       setSelectedPeriod((0, _common.getDefalutCycle)(cycleSetting));
-      onChange && onChange((0, _common.getDefalutCycle)(cycleSetting));
+      onChange === null || onChange === void 0 ? void 0 : onChange((0, _common.getDefalutCycle)(cycleSetting));
     }
   }, [visible]);
 
@@ -158,7 +167,7 @@ function PeriodSelector(_ref) {
     startMonth: isFetch ? cycleSetting.yearStartMonth : startMonth,
     onSelected: function onSelected(period) {
       setSelectedPeriod(period);
-      onChange && onChange(period);
+      onChange === null || onChange === void 0 ? void 0 : onChange(period);
       setVisible(false);
     },
     yearsRange: yearsRange,
@@ -174,9 +183,7 @@ function PeriodSelector(_ref) {
     popupPlacement: align,
     extraClass: popClass,
     popup: popup,
-    onPopupVisibleChange: function onPopupVisibleChange(visible) {
-      setVisible(visible);
-    }
+    onPopupVisibleChange: onPopupVisibleChangeHandler
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: className
   }, children || /*#__PURE__*/_react["default"].createElement(_button["default"], {

package/lib/components/range-selector-pop/RangeSelectorPop.js

@@ -45,7 +45,7 @@ var RangeSelectorPop = /*#__PURE__*/function (_PureComponent) {
   var _super = _createSuper(RangeSelectorPop);
 
   function RangeSelectorPop() {
-    var _this;
+    var _temp, _this;
 
     _classCallCheck(this, RangeSelectorPop);
 
@@ -53,7 +53,7 @@ var RangeSelectorPop = /*#__PURE__*/function (_PureComponent) {
       args[_key] = arguments[_key];
     }
 
-    return _possibleConstructorReturn(_this, (_this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
+    return _possibleConstructorReturn(_this, (_temp = _this = _super.call.apply(_super, [this].concat(args)), _this.handleShowPop = function () {
       var isDisabled = _this.props.isDisabled;
       if (isDisabled) return; // @ts-ignore
 
@@ -61,7 +61,7 @@ var RangeSelectorPop = /*#__PURE__*/function (_PureComponent) {
     }, _this.handleHide = function () {
       // @ts-ignore
       _this.refs.pop.hide();
-    }, _assertThisInitialized(_this)));
+    }, _temp));
   }
 
   _createClass(RangeSelectorPop, [{