@titaui/pc 1.6.11 → 1.6.15

package/lib/components/help-card/index.css

@@ -0,0 +1,219 @@
+.home-fixed-kefu {
+  cursor: pointer;
+  user-select: none;
+  z-index: 2;
+  width: 52px;
+  height: 52px;
+  background-color: #FFFFFF;
+  border-radius: 50%;
+  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.home-fixed-kefu-image {
+  width: 24px;
+  height: 24px;
+  background: url("./image/kefu.svg") 50% 50% no-repeat;
+}
+
+.home-fixed-kefu-canceled {
+  background: url("./image/canceled.svg") 50% 50% no-repeat;
+  animation-duration: 0.3s;
+  animation-name: kefuActive;
+}
+
+.home-fixed-kefu-canceled .home-fixed-kefu-image {
+  background: unset;
+}
+
+.help-card {
+  width: 332px;
+  height: 520px;
+  border-radius: 24px;
+  background: #FFFFFF;
+  box-shadow: 0px 0px 16px 0px rgba(127, 145, 180, 0.1);
+}
+
+.help-card__header {
+  width: 332px;
+  height: 72px;
+  background: #5C8EFF;
+  border-radius: 24px 24px 0px 0px;
+  box-sizing: border-box;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  color: #FFFFFF;
+}
+
+.help-card__header-avatar {
+  width: 40px;
+  height: 40px;
+  background: #03C2FC;
+  border: 1px solid #FFFFFF;
+  margin-right: 12px;
+  border-radius: 50%;
+}
+
+.help-card__body {
+  box-sizing: border-box;
+  padding: 0 20px;
+  margin: 24px 0 30px;
+}
+
+.help-card__body-item {
+  box-sizing: border-box;
+  width: 292px;
+  height: 148px;
+  border-radius: 8px;
+  padding: 12px;
+  margin-top: 12px;
+  background: rgba(240, 244, 250, 0.6) url("./image/question.svg") 100% 100% no-repeat;
+}
+
+.help-card__body-item-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.help-card__body-item-title-left {
+  width: 64px;
+  height: 24px;
+  font-size: 16px;
+  color: #2879FF;
+  line-height: 24px;
+  z-index: 2;
+  position: relative;
+}
+
+.help-card__body-item-title-left::before {
+  content: '';
+  width: 81px;
+  height: 7px;
+  background: linear-gradient(90deg, #2879FF 0%, #F6F8FC 100%);
+  z-index: -1;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+
+.help-card__body-item-title-right {
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 400;
+  color: #89919F;
+  line-height: 22px;
+}
+
+.help-card__body-item-title-right > .tu-icon-gengxin1 {
+  margin-right: 4px;
+}
+
+.help-card__body-item-content-item {
+  cursor: pointer;
+  margin-top: 12px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #3F4755;
+  line-height: 22px;
+}
+
+.help-card__footer {
+  width: 332px;
+  height: 86px;
+  background: #FFFFFF;
+  box-shadow: 0px -4px 8px 0px rgba(127, 145, 180, 0.1);
+  padding: 12px;
+  border-radius: 24px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+}
+
+.help-card__footer-item {
+  width: 77px;
+  height: 62px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  font-family: Resource-Han-Rounded-CN-Normal, Resource-Han-Rounded-CN;
+  font-weight: 400;
+  color: #141C28;
+  cursor: pointer;
+}
+
+.help-card__footer-item > img {
+  width: 20px;
+  height: 20px;
+  margin-bottom: 5px;
+}
+
+.tita-popup-zoom-left-bottom-enter,
+.tita-popup-zoom-left-bottom-appear {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-play-state: paused;
+}
+
+.tita-popup-zoom-left-bottom-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  animation-play-state: paused;
+}
+
+.tita-popup-zoom-left-bottom-enter.tita-popup-zoom-left-bottom-enter-active,
+.tita-popup-zoom-left-bottom-appear.tita-popup-zoom-left-bottom-appear-active {
+  animation-name: titaZoomInLB;
+  animation-play-state: running;
+}
+
+.tita-popup-zoom-left-bottom-leave.tita-popup-zoom-left-bottom-leave-active {
+  animation-name: titaZoomOutLB;
+  animation-play-state: running;
+}
+
+@keyframes kefuActive {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
+@keyframes titaZoomInLB {
+  0% {
+    opacity: 0;
+    transform-origin: 0 100%;
+    transform: scale(0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform-origin: 0 100%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes titaZoomOutLB {
+  0% {
+    opacity: 1;
+    transform-origin: 0 100%;
+    transform: scale(1, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform-origin: 0 100%;
+    transform: scale(0, 0);
+  }
+}

package/lib/components/help-card/index.js

@@ -0,0 +1,286 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _pointDemo = _interopRequireDefault(require("../point-demo"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _openData = require("../../utils/open-data");
+
+var _bsGlobal = require("../../utils/bs-global");
+
+var _requestApi = require("./request-api");
+
+require("./index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+var preCls = "help-card";
+
+var HelpCard = function HelpCard(_ref) {
+  var restProps = _extends({}, _ref);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pageNum = _useState4[0],
+      setPageNum = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      pointVisible = _useState6[0],
+      setPointVisible = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      listType1 = _useState8[0],
+      setListType1 = _useState8[1];
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listType2 = _useState10[0],
+      setListType2 = _useState10[1];
+
+  var isTrial = (0, _bsGlobal.getVersion)() == 1;
+  var userId = window.BSGlobal && window.BSGlobal.loginUserInfo.Id || 0;
+  var kefuUrl = isTrial ? "https://wpa1.qq.com/vZYKN3kT?_type=wpa&qidian=true" : "https://wpa1.qq.com/o6X4XD1n?_type=wpa&qidian=true";
+
+  var handleSkip = function handleSkip(url) {
+    setVisible(false);
+    window.open(url);
+  };
+
+  var sliceArray = function sliceArray(data, pageNum) {
+    return data.slice((pageNum - 1) * 3, pageNum * 3);
+  };
+
+  var formatQuestionList = function formatQuestionList(data) {
+    var type1 = [];
+    var type2 = [];
+    var questionList = [];
+    data.forEach(function (item) {
+      if (item.questionType === 1) {
+        type1.push(item);
+      } else if (item.questionType === 2) {
+        type2.push(item);
+      }
+    });
+    questionList = [{
+      type: type1,
+      pageNum: 1
+    }, {
+      type: type2,
+      pageNum: 1
+    }];
+    setListType1(sliceArray(type1, 1));
+    setListType2(sliceArray(type2, 1));
+    window.sessionStorage.setItem("questionList_".concat(userId), JSON.stringify(questionList));
+  };
+
+  (0, _react.useEffect)(function () {
+    (0, _requestApi.getQuestionList)(pageNum).then(function (res) {
+      console.log(res); // formatQuestionList(res.Data);
+    });
+  }, []);
+
+  var handlePoint = function handlePoint() {
+    setVisible(false);
+    setPointVisible(true);
+  };
+
+  var handleHelpCenter = function handleHelpCenter() {
+    setVisible(false);
+
+    if ((0, _openData.isPlatform)("dd")) {
+      window.open("https://wiki.tita.com/pages/viewpage.action?pageId=4915206");
+    } else if ((0, _openData.isPlatform)("feishu")) {
+      window.open("https://wiki.tita.com/pages/viewpage.action?pageId=12026137");
+    } else {
+      window.open("https://wiki.tita.com/display/TITA1/Tita");
+    }
+  };
+
+  var handleKnowledgeCommunity = function handleKnowledgeCommunity() {
+    setVisible(false);
+    window.open("https://club.tita.com/");
+  };
+
+  var handleCustomerService = function handleCustomerService() {
+    setVisible(false);
+    window.open(kefuUrl);
+  };
+
+  var handleUpgrade = function handleUpgrade() {
+    setVisible(false);
+    window.open("https://wiki.tita.com/pages/viewpage.action?pageId=15696164");
+  };
+
+  var chageBatch = function chageBatch() {
+    var questionList = window.sessionStorage.getItem("questionList_".concat(userId)) || "[]";
+    var data = JSON.parse(questionList);
+    var type1 = data[0].type;
+    var type2 = data[1].type;
+    var pageNum1 = data[0].pageNum + 1;
+    var pageNum2 = data[1].pageNum + 1;
+
+    if ((pageNum1 - 1) * 3 >= type1.length) {
+      pageNum1 = 1;
+    }
+
+    if ((pageNum2 - 1) * 3 >= type2.length) {
+      pageNum2 = 1;
+    }
+
+    setListType1(sliceArray(type1, pageNum1));
+    setListType2(sliceArray(type2, pageNum2));
+    data = [{
+      type: type1,
+      pageNum: pageNum1
+    }, {
+      type: type2,
+      pageNum: pageNum2
+    }];
+    window.sessionStorage.setItem("questionList_".concat(userId), JSON.stringify(data));
+  };
+
+  var popupContent = function popupContent() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: preCls
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__header")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__header-avatar")
+    }), "Tita\u5C0F\u52A9\u624B"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item-title")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item-title-left")
+    }, "\u731C\u4F60\u60F3\u95EE"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item-title-right")
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "tu-icon-gengxin1",
+      onClick: chageBatch
+    }), "\u6362\u4E00\u6279")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item-content")
+    }, listType1.map(function (item, key) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(preCls, "__body-item-content-item"),
+        onClick: function onClick() {
+          return handleSkip(item.questionUrl);
+        },
+        key: key
+      }, item.questionName);
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item-title")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item-title-left")
+    }, "\u5E38\u89C1\u95EE\u9898")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__body-item-content")
+    }, listType2.map(function (item, key) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "".concat(preCls, "__body-item-content-item"),
+        onClick: function onClick() {
+          return handleSkip(item.questionUrl);
+        },
+        key: key
+      }, item.questionName);
+    })))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__footer")
+    }, isTrial && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__footer-item"),
+      onClick: handlePoint
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: require("./image/yuyueyanshi.svg"),
+      alt: "\u9884\u7EA6\u6F14\u793A"
+    }), "\u9884\u7EA6\u6F14\u793A"), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__footer-item"),
+      onClick: handleHelpCenter
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: require("./image/helpzx.svg"),
+      alt: "\u5E2E\u52A9\u4E2D\u5FC3"
+    }), "\u5E2E\u52A9\u4E2D\u5FC3"), !isTrial && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__footer-item"),
+      onClick: handleUpgrade
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: require("./image/yuyueyanshi.svg"),
+      alt: "\u5347\u7EA7\u901A\u77E5"
+    }), "\u5347\u7EA7\u901A\u77E5"), !(0, _openData.isPlatform)("feishu") && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__footer-item"),
+      onClick: handleKnowledgeCommunity
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: require("./image/okr-shequ.svg"),
+      alt: "\u77E5\u8BC6\u793E\u533A"
+    }), "\u77E5\u8BC6\u793E\u533A"), !(0, _openData.isPlatform)("feishu") && !(0, _openData.isPlatform)("dd") && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "".concat(preCls, "__footer-item"),
+      onClick: handleCustomerService
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: require("./image/kefu1.svg"),
+      alt: "\u8054\u7CFB\u5BA2\u670D"
+    }), "\u8054\u7CFB\u5BA2\u670D")));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", restProps, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    popupTransitionName: "tita-popup-zoom-left-bottom",
+    placement: "topRight",
+    popupAlign: {
+      offset: [-32, -10],
+      overflow: {
+        adjustX: 1,
+        adjustY: 1
+      }
+    },
+    popup: popupContent(),
+    popupVisible: visible,
+    onPopupVisibleChange: function onPopupVisibleChange(bol) {
+      return setVisible(bol);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("home-fixed-kefu")
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("home-fixed-kefu-image", {
+      "home-fixed-kefu-canceled": visible
+    })
+  }))), pointVisible && /*#__PURE__*/_react["default"].createElement(_pointDemo["default"], {
+    setVisible: setPointVisible
+  }));
+};
+
+var _default = HelpCard;
+exports["default"] = _default;

package/lib/components/help-card/request-api.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getQuestionList = void 0;
+
+var _axios = _interopRequireDefault(require("axios"));
+
+var _bsGlobal = require("../../utils/bs-global");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var tenantId = BSGlobal && BSGlobal.tenantInfo.Id || 0;
+var userId = BSGlobal && BSGlobal.loginUserInfo.Id || 0;
+
+var requestDomain = function requestDomain() {
+  if (!window.location.hostname.match(/dev/)) return '';
+  return "".concat(location.protocol, "//www.tita.gift");
+};
+
+var getQuestionList = function getQuestionList(pageNum) {
+  var source = (0, _bsGlobal.getSource)();
+
+  if (source !== 860 || source !== 861 || source !== 862) {
+    source = 0;
+  }
+
+  return _axios["default"].get("".concat(requestDomain(), "/api/v1/").concat(tenantId, "/").concat(userId, "/const/question?source=").concat(source, "&pageSize=", 3, "&pageNum=").concat(pageNum)).then(function (res) {
+    return res.data;
+  });
+};
+
+exports.getQuestionList = getQuestionList;

package/lib/components/img-viewer/index.css

@@ -78,6 +78,10 @@
   background: #f7f9fb;
 }
 
+.titaui-img-viewer__body-img {
+  max-width: 800px;
+}
+
 .titaui-img-viewer__body-operate-btn {
   position: absolute;
   width: 48px;

package/lib/components/img-viewer/index.js

@@ -188,8 +188,9 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         transform: "rotate(".concat(currentRotateDeg, "deg)")
       }
     }, /*#__PURE__*/_react["default"].createElement("img", {
+      className: prefix + '__body-img',
       ref: imgRef,
-      src: currentImgData.bigImageUrl,
+      src: currentImgData.previewUrl || currentImgData.bigImageUrl,
       style: {
         transform: "scale(".concat(currentScale, ")")
       }

package/lib/components/menus/components/drag-resize/index.css

@@ -1,13 +1,13 @@
-.titaui-drag-width {
+.titaui-drag-resize__bar {
   display: inline-block;
   position: absolute;
   width: 10px;
-  height: calc(100% - 12px);
-  top: 8px;
+  height: calc(100% - 52px);
+  top: 40px;
   right: -5px;
 }
 
-.titaui-drag-width__darg {
+.titaui-drag-resize__bar-darg {
   position: absolute;
   width: 3px;
   height: 100%;

package/lib/components/menus/components/drag-resize/index.js

@@ -19,32 +19,20 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var preCls = 'titaui-drag-width';
+var preCls = 'titaui-drag-resize';
 
 var _default = function _default(props) {
-  var container = props.container;
+  var children = props.children,
+      _props$defaultWidth = props.defaultWidth,
+      defaultWidth = _props$defaultWidth === void 0 ? 180 : _props$defaultWidth,
+      _props$onResize = props.onResize,
+      onResize = _props$onResize === void 0 ? function () {} : _props$onResize,
+      _props$minWidth = props.minWidth,
+      minWidth = _props$minWidth === void 0 ? 180 : _props$minWidth,
+      _props$maxWidth = props.maxWidth,
+      maxWidth = _props$maxWidth === void 0 ? 600 : _props$maxWidth;
   var dragRef = (0, _react.useRef)();
-
-  var _useState = (0, _react.useState)(180),
-      _useState2 = _slicedToArray(_useState, 1),
-      minWidth = _useState2[0];
-
-  var _useState3 = (0, _react.useState)(600),
-      _useState4 = _slicedToArray(_useState3, 1),
-      maxWidth = _useState4[0]; // 拖拽
-
+  var container = (0, _react.useRef)(); // 拖拽
 
   (0, _react.useEffect)(function () {
     var m_pos;
@@ -55,23 +43,40 @@ var _default = function _default(props) {
       var width = parseInt(getComputedStyle(container.current, '').width) - dx;
       if (width < minWidth) return;
       if (width > maxWidth) return;
-      container.current.style.width = parseInt(getComputedStyle(container.current, '').width) - dx + 'px';
+      container.current.style.width = "".concat(width, "px");
+      onResize({
+        width: width
+      });
     };
 
     dragRef.current.addEventListener('mousedown', function (e) {
       m_pos = e.x;
       document.addEventListener('mousemove', resize, false);
     }, false);
-    document.addEventListener('mouseup', function () {
-      document.removeEventListener('mousemove', resize, false);
-    }, false);
+
+    var removeHandler = function removeHandler() {
+      return document.removeEventListener('mousemove', resize, false);
+    };
+
+    document.addEventListener('mouseup', removeHandler, false);
+    return function () {
+      document.removeEventListener('mouseup', removeHandler);
+    };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])(preCls)
+    ref: container,
+    className: (0, _classnames["default"])(preCls),
+    style: {
+      'width': defaultWidth
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__container"))
+  }, children), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(preCls, "__bar"))
   }, /*#__PURE__*/_react["default"].createElement("div", {
     ref: dragRef,
-    className: (0, _classnames["default"])("".concat(preCls, "__darg"))
-  }));
+    className: (0, _classnames["default"])("".concat(preCls, "__bar-darg"))
+  })));
 };
 
 exports["default"] = _default;