@titaui/pc 1.11.4-0 → 1.11.4-0.beta-2

package/lib/components/okr-flow/utils/tree-handler.js

@@ -28,9 +28,9 @@ var insertSort = function insertSort(arr, item) {
   var modelType = item.modelType;
   var index = arr.length;
 
-  if (modelType == "kr") {
+  if (modelType == 'kr') {
     index = arr.findIndex(function (item) {
-      return item.modelType == "work";
+      return item.modelType == 'work';
     });
   }
 
@@ -50,11 +50,11 @@ var toTree = function toTree(data, showkr) {
         data = item.data;
     var parent;
 
-    if (modelType == "work") {
+    if (modelType == 'work') {
       parent = showkr ? map[data.parentKrId || data.parentId] : map[data.parentId];
     }
 
-    if (modelType == "kr") {
+    if (modelType == 'kr') {
       parent = map[data.workId];
     }
 
@@ -108,19 +108,19 @@ var formatNodes = function formatNodes(res, showkr) {
       OkrModel = _res$OkrModel === void 0 ? [] : _res$OkrModel,
       _res$KrModel = res.KrModel,
       KrModel = _res$KrModel === void 0 ? [] : _res$KrModel;
-  OkrModel && uniqueArray(OkrModel, "workId").forEach(function (item) {
+  OkrModel && uniqueArray(OkrModel, 'workId').forEach(function (item) {
     nodes.push({
       id: item.workId,
       data: item,
-      modelType: "work",
+      modelType: 'work',
       isSearchRes: searchIds.includes(item.workId)
     });
   });
-  showkr && KrModel && uniqueArray(KrModel, "mileStoneId").forEach(function (item) {
+  showkr && KrModel && uniqueArray(KrModel, 'mileStoneId').forEach(function (item) {
     nodes.push({
       id: item.mileStoneId,
       data: item,
-      modelType: "kr"
+      modelType: 'kr'
     });
   });
   return nodes;
@@ -130,6 +130,7 @@ exports.formatNodes = formatNodes;
 
 var flatTree = function flatTree(current, elements, showkr) {
   var isParentExpand = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+  var parentId = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   if (!current) return;
   var id = current.id,
       data = current.data,
@@ -138,11 +139,16 @@ var flatTree = function flatTree(current, elements, showkr) {
       children = _current$children === void 0 ? [] : _current$children,
       isSearchRes = current.isSearchRes;
 
-  if (modelType == "root") {
+  if (modelType == 'root') {
     elements.push({
       id: "".concat(id),
-      type: "RootNode",
-      data: data
+      type: 'RootNode',
+      data: data,
+      isParent: true,
+      position: {
+        x: 0,
+        y: 0
+      }
     });
   } else {
     var isChildExpand = false;
@@ -151,10 +157,10 @@ var flatTree = function flatTree(current, elements, showkr) {
       isChildExpand = children.length > 0;
     } else {
       var childTotal = children.filter(function (item) {
-        return item.modelType == "work";
+        return item.modelType == 'work';
       }).length;
       var krChildTotal = children.filter(function (item) {
-        return item.modelType == "kr";
+        return item.modelType == 'kr';
       }).reduce(function (count, current) {
         return count += (current.children || []).length;
       }, 0);
@@ -163,12 +169,17 @@ var flatTree = function flatTree(current, elements, showkr) {
 
     elements.push({
       id: "".concat(id),
-      type: "ChildNode",
+      type: 'ChildNode',
+      position: {
+        x: 0,
+        y: 0
+      },
       data: {
         id: id,
         data: data,
         isParentExpand: isParentExpand,
         isChildExpand: isChildExpand,
+        parentId: parentId,
         modelType: modelType,
         isSearchRes: isSearchRes
       }
@@ -182,7 +193,7 @@ var flatTree = function flatTree(current, elements, showkr) {
           _child$children = child.children,
           children = _child$children === void 0 ? [] : _child$children;
 
-      if (!showkr && modelType == "kr") {
+      if (!showkr && modelType == 'kr') {
         if (children.length > 0) {
           children.forEach(function (sub) {
             if (!sub) return;
@@ -191,7 +202,7 @@ var flatTree = function flatTree(current, elements, showkr) {
               source: "".concat(id),
               target: "".concat(sub.id)
             });
-            flatTree(sub, elements, showkr, current.modelType != "root");
+            flatTree(sub, elements, showkr, current.modelType != 'root', id);
           });
         }
       } else {
@@ -200,7 +211,7 @@ var flatTree = function flatTree(current, elements, showkr) {
           source: "".concat(id),
           target: "".concat(child.id)
         });
-        flatTree(child, elements, showkr, current.modelType != "root");
+        flatTree(child, elements, showkr, current.modelType != 'root', id);
       }
     });
   }
@@ -314,7 +325,7 @@ exports.deleteKrById = deleteKrById;
 var uniqueArray = function uniqueArray(arr, id) {
   var obj = {};
   arr = arr.reduce(function (item, next) {
-    obj[next[id]] ? "" : obj[next[id]] = true && item.push(next);
+    obj[next[id]] ? '' : obj[next[id]] = true && item.push(next);
     return item;
   }, []);
   return arr;

package/lib/components/okrcase-library/index.css

@@ -647,12 +647,14 @@
 }
 
 .okr-cases-library__pay-window__commit-order {
-  background: #FFFFFF;
+  background: #ffffff;
   border-radius: 8px;
-  border: 1px solid #DFE3EA;
+  border: 1px solid #dfe3ea;
   padding: 12px 20px;
-  color: #3F4755;
+  color: #3f4755;
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 
 .okr-cases-library__pay-window__commit-order--wx {
@@ -660,7 +662,7 @@
 }
 
 .okr-cases-library__pay-window__commit-order--active {
-  border-color: #2879FF;
+  border-color: #2879ff;
   position: relative;
 }
 

package/lib/components/okrcase-library/okrcases-components/submitOkr-dialog.js

@@ -57,23 +57,23 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Fields = _form["default"].Fields;
-var precls = "okr-cases-library__pay-window";
+var precls = 'okr-cases-library__pay-window';
 
 function SubmitDialog(props) {
   var handleShowSubmitOkrWindow = props.handleShowSubmitOkrWindow,
       isShowSubmitOkrWindow = props.isShowSubmitOkrWindow;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(''),
       _useState2 = _slicedToArray(_useState, 2),
       type = _useState2[0],
       setType = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(""),
+  var _useState3 = (0, _react.useState)(''),
       _useState4 = _slicedToArray(_useState3, 2),
       job = _useState4[0],
       setJob = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(""),
+  var _useState5 = (0, _react.useState)(''),
       _useState6 = _slicedToArray(_useState5, 2),
       scene = _useState6[0],
       setScene = _useState6[1];
@@ -93,11 +93,11 @@ function SubmitDialog(props) {
 
     if (!err.length) {
       (0, _network.postSurvey)(body).then(function () {
-        _toast["default"].Success("发送成功");
+        _toast["default"].Success('发送成功');
 
         handleShowSubmitOkrWindow(false);
       })["catch"](function () {
-        _toast["default"].Warning("发送失败");
+        _toast["default"].Warning('发送失败');
       });
     }
   };
@@ -130,7 +130,7 @@ function SubmitDialog(props) {
     placeholder: "\u5982\u9500\u552E\u56E2\u961F",
     require: true,
     verifies: [{
-      tip: "OKR类型不能为空",
+      tip: 'OKR类型不能为空',
       test: /\S/
     }],
     onChange: setType
@@ -140,7 +140,7 @@ function SubmitDialog(props) {
     placeholder: "\u5982\u9500\u552EVP",
     require: true,
     verifies: [{
-      tip: "OKR岗位不能为空",
+      tip: 'OKR岗位不能为空',
       test: /\S/
     }],
     onChange: setJob
@@ -155,7 +155,7 @@ function SubmitDialog(props) {
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: "okr-cases-library__submitWindow-submitButton",
     onClick: onSubmitButtonClick
-  }, (0, _getLocale.getLocale)("Pro_detail_Submission"))));
+  }, (0, _getLocale.getLocale)('Pro_detail_Submission'))));
 }
 
 function PayDialog(props) {
@@ -176,38 +176,38 @@ function PayDialog(props) {
     var tenantType = window.BSGlobal.tenantInfo.tenantType; // 外部注冊賬號使用的產品ID不同
 
     // 外部注冊賬號使用的產品ID不同
-    if (Version === 1 && tenantType === 3) return "D9E059E4-4303-4EE2-9275-AE2FA74BBAA6";
-    return "60AFAD35-5273-4A06-B2F4-9A3193096BE7";
+    if (Version === 1 && tenantType === 3) return 'D9E059E4-4303-4EE2-9275-AE2FA74BBAA6';
+    return '60AFAD35-5273-4A06-B2F4-9A3193096BE7';
   }),
       _useState10 = _slicedToArray(_useState9, 1),
       packageId = _useState10[0];
 
-  var _useState11 = (0, _react.useState)(""),
+  var _useState11 = (0, _react.useState)(''),
       _useState12 = _slicedToArray(_useState11, 2),
       orderId = _useState12[0],
       setOrderId = _useState12[1];
 
-  var _useState13 = (0, _react.useState)("wxPay"),
+  var _useState13 = (0, _react.useState)('wxPay'),
       _useState14 = _slicedToArray(_useState13, 2),
       payCode = _useState14[0],
       setPayCode = _useState14[1];
 
-  var _useState15 = (0, _react.useState)("微信"),
+  var _useState15 = (0, _react.useState)('微信'),
       _useState16 = _slicedToArray(_useState15, 2),
       payName = _useState16[0],
       setPayName = _useState16[1];
 
   var _useState17 = (0, _react.useState)({
-    PayCode: "directPay",
-    PayName: "支付宝"
+    PayCode: 'directPay',
+    PayName: '支付宝'
   }),
       _useState18 = _slicedToArray(_useState17, 2),
       wxModel = _useState18[0],
       setWxModel = _useState18[1];
 
   var _useState19 = (0, _react.useState)({
-    PayCode: "wxPay",
-    PayName: "微信"
+    PayCode: 'wxPay',
+    PayName: '微信'
   }),
       _useState20 = _slicedToArray(_useState19, 2),
       aliModel = _useState20[0],
@@ -259,9 +259,9 @@ function PayDialog(props) {
           } else {
             // 订单已支付
             _titaUi.Modal.success({
-              title: "支付成功",
-              content: "OKR案例库已开通",
-              okText: "立即使用",
+              title: '支付成功',
+              content: 'OKR案例库已开通',
+              okText: '立即使用',
               onOk: function () {
                 var _onOk = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
                   return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -300,11 +300,17 @@ function PayDialog(props) {
   };
 
   var clickPayNowHandler = function clickPayNowHandler(e) {
-    if (payCode === "wxPay") {
+    if (payCode === 'wxPay') {
       e.preventDefault();
-      var path = window.location.href.split("#")[0];
-      var encode = encodeURIComponent("orderId=".concat(orderId, "&payCode=").concat(payCode, "&payName=").concat(payName));
-      window.open("".concat(path, "#/pay?").concat(encode), "_blank"); // postWxPayOrder({
+      var path = window.location.href.split('#')[0];
+      path = path.replace(/eLearningHome/, 'Home');
+      var encode = encodeURIComponent("orderId=".concat(orderId, "&payCode=").concat(payCode, "&payName=").concat(payName)); // if(isDingDing()){
+      // window.open(`${path}#/pay?${encode}`, "_self");
+      // window.location.reload();
+      // }else{
+
+      window.open("".concat(path, "#/pay?").concat(encode), '_blank'); // }
+      // postWxPayOrder({
       //   order_id: orderId,
       //   default_bank: payCode,
       //   default_bank_name: payName,
@@ -337,22 +343,22 @@ function PayDialog(props) {
       return handleShowPayWindow(false);
     },
     style: {
-      width: "18px",
-      height: "18px"
+      width: '18px',
+      height: '18px'
     }
   }), /*#__PURE__*/_react["default"].createElement("p", {
     className: "".concat(precls, "__head")
-  }, price, " ", "\u8D2D\u4E70\u5343\u4EFD OKR \u6848\u4F8B\u5E93"), /*#__PURE__*/_react["default"].createElement("p", {
+  }, price, " \u8D2D\u4E70\u5343\u4EFD OKR \u6848\u4F8B\u5E93"), /*#__PURE__*/_react["default"].createElement("p", {
     className: "".concat(precls, "__detail")
   }, "\u53EF\u67E5\u770B \u4F7F\u7528\u6848\u4F8B\u5E93\u6240\u6709\u884C\u4E1A\u7684\u6848\u4F8B", /*#__PURE__*/_react["default"].createElement("a", {
     href: "https://club.tita.com/okr-examples",
     target: "_blank",
     rel: "noreferrer"
-  }, (0, _getLocale.getLocale)("Mod_Checkdetails"))), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _getLocale.getLocale)('Mod_Checkdetails'))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(precls, "__amount")
   }, "\u5E94\u4ED8\u91D1\u989D\uFF1A", /*#__PURE__*/_react["default"].createElement("b", null, /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      fontSize: "32px"
+      fontSize: '32px'
     }
   }, "29.8"), "\u5143/\u5E74")), /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(precls, "__type")

package/lib/components/pagination/index.css

@@ -19,7 +19,7 @@
 .titaui-pagination-prev_text, .titaui-pagination-next_text, .titaui-pagination-jump-prev_text, .titaui-pagination-jump-next_text, .titaui-pagination-item_text {
   font-size: 14px;
   font-weight: 400;
-  line-height: 22px;
+  line-height: 28px;
   transition: all 0.3s ease;
   color: #3f4755;
 }
@@ -226,8 +226,8 @@
 }
 
 .titaui-pagination__select-selector::after {
-  content: "\ea64";
-  font-family: "tu-icon" !important;
+  content: '\ea64';
+  font-family: 'tu-icon' !important;
   font-size: 12px;
   color: #3f4755;
   speak: never;

package/lib/components/pagination/select.css

@@ -14,7 +14,8 @@
   opacity: 0.3;
 }
 
-.titaui-pagination__select-show-arrow.titaui-pagination__select-loading .titaui-pagination__select-arrow-icon::after {
+.titaui-pagination__select-show-arrow.titaui-pagination__select-loading
+.titaui-pagination__select-arrow-icon::after {
   box-sizing: border-box;
   width: 12px;
   height: 12px;
@@ -36,7 +37,8 @@
   appearance: none;
 }
 
-.titaui-pagination__select .titaui-pagination__select-selection-search-input::-webkit-search-cancel-button {
+.titaui-pagination__select
+.titaui-pagination__select-selection-search-input::-webkit-search-cancel-button {
   display: none;
   appearance: none;
 }
@@ -46,28 +48,39 @@
   position: relative;
 }
 
-.titaui-pagination__select-single .titaui-pagination__select-selector .titaui-pagination__select-selection-search {
+.titaui-pagination__select-single
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search {
   width: 100%;
 }
 
-.titaui-pagination__select-single .titaui-pagination__select-selector .titaui-pagination__select-selection-search-input {
+.titaui-pagination__select-single
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search-input {
   width: 100%;
 }
 
-.titaui-pagination__select-single .titaui-pagination__select-selector .titaui-pagination__select-selection-item,
-.titaui-pagination__select-single .titaui-pagination__select-selector .titaui-pagination__select-selection-placeholder {
+.titaui-pagination__select-single
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-item,
+.titaui-pagination__select-single
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-placeholder {
   position: absolute;
   top: 1px;
   left: 3px;
   pointer-events: none;
 }
 
-.titaui-pagination__select-single:not(.titaui-pagination__select-customize-input) .titaui-pagination__select-selector {
+.titaui-pagination__select-single:not(.titaui-pagination__select-customize-input)
+.titaui-pagination__select-selector {
   padding: 1px;
   border: 1px solid #000;
 }
 
-.titaui-pagination__select-single:not(.titaui-pagination__select-customize-input) .titaui-pagination__select-selector .titaui-pagination__select-selection-search-input {
+.titaui-pagination__select-single:not(.titaui-pagination__select-customize-input)
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search-input {
   border: none;
   outline: none;
   background: rgba(255, 0, 0, 0.2);
@@ -81,7 +94,9 @@
   border: 1px solid #000;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-item {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-item {
   flex: none;
   background: #bbb;
   border-radius: 4px;
@@ -89,34 +104,48 @@
   padding: 0 8px;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-item-disabled {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-item-disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-overflow {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-overflow {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-overflow-item {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-overflow-item {
   flex: none;
   max-width: 100%;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-search {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search {
   position: relative;
   max-width: 100%;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-search-input,
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-search-mirror {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search-input,
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search-mirror {
   padding: 1px;
   font-family: system-ui;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-search-mirror {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search-mirror {
   position: absolute;
   z-index: 999;
   white-space: nowrap;
@@ -126,14 +155,17 @@
   visibility: hidden;
 }
 
-.titaui-pagination__select-multiple .titaui-pagination__select-selector .titaui-pagination__select-selection-search-input {
+.titaui-pagination__select-multiple
+.titaui-pagination__select-selector
+.titaui-pagination__select-selection-search-input {
   border: none;
   outline: none;
   background: rgba(255, 0, 0, 0.2);
   width: 100%;
 }
 
-.titaui-pagination__select-allow-clear.titaui-pagination__select-multiple .titaui-pagination__select-selector {
+.titaui-pagination__select-allow-clear.titaui-pagination__select-multiple
+.titaui-pagination__select-selector {
   padding-right: 20px;
 }
 
@@ -143,7 +175,8 @@
   top: 0;
 }
 
-.titaui-pagination__select-show-arrow.titaui-pagination__select-multiple .titaui-pagination__select-selector {
+.titaui-pagination__select-show-arrow.titaui-pagination__select-multiple
+.titaui-pagination__select-selector {
   padding-right: 20px;
 }
 
@@ -154,7 +187,8 @@
   top: 0;
 }
 
-.titaui-pagination__select-show-arrow .titaui-pagination__select-arrow-icon::after {
+.titaui-pagination__select-show-arrow
+.titaui-pagination__select-arrow-icon::after {
   content: '';
   border: 5px solid transparent;
   width: 0;
@@ -199,7 +233,8 @@
   padding-left: 24px;
 }
 
-.titaui-pagination__select-item-option .titaui-pagination__select-item-option-state {
+.titaui-pagination__select-item-option
+.titaui-pagination__select-item-option-state {
   position: absolute;
   right: 0;
   top: 4px;
@@ -308,7 +343,7 @@
 .titaui-pagination__select-selector:before {
   position: absolute;
   display: inline-block;
-  content: "";
+  content: '';
   width: 8px;
   height: 8px;
   right: 0;
@@ -324,7 +359,7 @@
   height: 22px;
   font-size: 16px;
   font-weight: 600;
-  line-height: 22px;
+  line-height: 23px;
   color: #3f4755;
 }
 

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

@@ -2,6 +2,12 @@
   display: inline-block;
 }
 
+.titaui-period-selector__down-icon {
+  font-size: 16px;
+  transform: scale(0.5);
+  margin-left: 4px;
+}
+
 .titaui-period-selector__down-arrow {
   display: inline-block;
   vertical-align: baseline;
@@ -9,7 +15,7 @@
   height: 8px;
   margin-left: 12px;
   background: url(./images/down-arrow.svg) transparent no-repeat 50% 50%;
-  transition: all .2s;
+  transition: all 0.2s;
   cursor: pointer;
 }
 
@@ -19,7 +25,7 @@
   width: 8px;
   height: 8px;
   background: url(./images/left-arrow.svg) transparent no-repeat 50% 50%;
-  transition: all .2s;
+  transition: all 0.2s;
   cursor: pointer;
 }
 
@@ -33,7 +39,7 @@
   width: 8px;
   height: 8px;
   background: url(./images/right-arrow.svg) transparent no-repeat 50% 50%;
-  transition: all .2s;
+  transition: all 0.2s;
   cursor: pointer;
 }
 

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

@@ -73,6 +73,8 @@ function PeriodSelector(_ref) {
       wrapperStyle = _ref.wrapperStyle,
       popClass = _ref.popClass,
       style = _ref.style,
+      _ref$buttonClass = _ref.buttonClass,
+      buttonClass = _ref$buttonClass === void 0 ? '' : _ref$buttonClass,
       _ref$noBorder = _ref.noBorder,
       noBorder = _ref$noBorder === void 0 ? false : _ref$noBorder;
 
@@ -92,7 +94,7 @@ function PeriodSelector(_ref) {
 
   var _useState3 = (0, _react.useState)({
     annualNum: "".concat(new Date().getFullYear()),
-    cycleType: "2",
+    cycleType: '2',
     yqmNum: "".concat((0, _moment["default"])().quarter())
   }),
       _useState4 = _slicedToArray(_useState3, 2),
@@ -112,10 +114,10 @@ function PeriodSelector(_ref) {
   }, []);
   (0, _react.useEffect)(function () {
     if (!visible && (!isFetch || fetchRef.current)) return;
-    var url = (0, _helper.getApiUrl)("okr/cycleSetting");
+    var url = (0, _helper.getApiUrl)('okr/cycleSetting');
 
     if (isFetch) {
-      (0, _helper.taker)(url, "GET").then(function (res) {
+      (0, _helper.taker)(url, 'GET').then(function (res) {
         if (res.Code == 1) {
           fetchRef.current = true;
           setCycleSetting(res.Data);
@@ -159,7 +161,7 @@ function PeriodSelector(_ref) {
   });
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("titaui-period-selector"),
+    className: (0, _classnames["default"])('titaui-period-selector'),
     style: style
   }, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
     getPopupContainer: getPopupContainer,
@@ -174,24 +176,25 @@ function PeriodSelector(_ref) {
     className: className
   }, children || /*#__PURE__*/_react["default"].createElement(_button["default"], {
     type: "default",
+    className: buttonClass,
     style: noBorder ? {
-      padding: "0",
-      border: "none"
+      padding: '0',
+      border: 'none'
     } : {
-      padding: "6px 12px"
+      padding: '6px 12px'
     }
   }, /*#__PURE__*/_react["default"].createElement("span", {
     style: {
-      lineHeight: "18px",
-      whiteSpace: "nowrap"
+      lineHeight: '18px',
+      whiteSpace: 'nowrap'
     }
   }, (0, _common.formatPeriod)(selectedPeriod)), /*#__PURE__*/_react["default"].createElement("span", {
-    className: "titaui-period-selector__down-arrow"
+    className: "tu-icon-caret-down titaui-period-selector__down-icon"
   })))));
 }
 
 PeriodSelector.defaultProps = {
-  align: "bottomLeft",
+  align: 'bottomLeft',
   // selected: {
   //   annualNum: '2020',
   //   cycleType: '1',