@titaui/pc 1.12.0-beta.1 → 1.12.0-beta.2

package/lib/components/task-relation-modal/tree-node/milestone-node/index.css

@@ -17,22 +17,6 @@
   border: 1px solid #bfc7d5;
 }
 
-.rel-milestone-node__pointer {
-  position: absolute;
-  top: -26px;
-  left: -33px;
-  width: 27px;
-  height: 34px;
-  border-left: 1px solid #e9ecf0;
-  border-bottom: 1px solid #e9ecf0;
-  border-bottom-left-radius: 6px;
-}
-
-.rel-milestone-node__pointer-first {
-  height: 26px;
-  top: -20px;
-}
-
 .rel-milestone-node__name {
   flex: 1;
   margin-right: 40px;

package/lib/components/task-relation-modal/tree-node/milestone-node/index.js

@@ -35,8 +35,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var precls = "rel-milestone-node";
 
 function MileStone(props) {
@@ -100,8 +98,6 @@ function MileStone(props) {
     id: data.mileStoneId,
     checked: checked
   })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(precls, "__pointer"), _defineProperty({}, "".concat(precls, "__pointer-first"), index === 1))
-  }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "".concat(precls, "__name")
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("tu-icon-licheng-s", "".concat(precls, "__name-icon"))

package/lib/components/task-tree/index.js

@@ -11,12 +11,6 @@ var _helper = _interopRequireDefault(require("./helper"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// import React from "react";
-// import mockData from "./mock";
 _taskTree["default"].formatTasksToTreeData = _helper["default"];
-var _default = _taskTree["default"]; // export default () => {
-//   const dataSource = formatTasksToTreeData(mockData);
-//   return <TaskTree dataSource={dataSource} />;
-// };
-
+var _default = _taskTree["default"];
 exports["default"] = _default;

package/lib/components/task-tree/task-item-node/constant.js

@@ -3,39 +3,56 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TASK_NDOE_TYPE = exports.EStatusStatus2ClassType = exports.EStatusClass2StatusTypeText = exports.EStatusClass2StatusType = void 0;
+exports.getPriorityTextMapping = exports.TASK_NDOE_TYPE = exports.EStatusStatus2ClassType = exports.EStatusClass2StatusTypeText = exports.EStatusClass2StatusType = void 0;
 
 var _getLocale = require("../../../utils/getLocale");
 
 var EStatusClass2StatusType = {
-  'tu-icon-finished': 2,
-  'tu-icon-running': 1,
-  'tu-icon-canceled': 4,
-  'tu-icon-deferred': 3,
-  'tu-icon-paused': 6,
-  'tu-icon-notstart': 0,
-  'tu-icon-jiantou-right': 5
+  "tu-icon-finished": 2,
+  "tu-icon-running": 1,
+  "tu-icon-canceled": 4,
+  "tu-icon-deferred": 3,
+  "tu-icon-paused": 6,
+  "tu-icon-notstart": 0,
+  "tu-icon-jiantou-right": 5
 };
 exports.EStatusClass2StatusType = EStatusClass2StatusType;
 var EStatusStatus2ClassType = {
-  2: 'tu-icon-finished',
-  1: 'tu-icon-running',
-  4: 'tu-icon-canceled',
-  3: 'tu-icon-deferred',
-  6: 'tu-icon-paused',
-  0: 'tu-icon-notstart',
-  5: 'tu-icon-weijieshou-right'
+  2: "tu-icon-finished",
+  1: "tu-icon-running",
+  4: "tu-icon-canceled",
+  3: "tu-icon-deferred",
+  6: "tu-icon-paused",
+  0: "tu-icon-notstart",
+  5: "tu-icon-weijieshou-right"
 };
 exports.EStatusStatus2ClassType = EStatusStatus2ClassType;
-var EStatusClass2StatusTypeText = {
-  'tu-icon-finished': (0, _getLocale.getLocale)('OKR_MyO_E_From_Completed'),
-  'tu-icon-running': (0, _getLocale.getLocale)('Per_MyRe_text_Inprogress'),
-  'tu-icon-canceled': (0, _getLocale.getLocale)('OKR_MyO_E_From_Cancelled'),
-  'tu-icon-deferred': (0, _getLocale.getLocale)('OKR_MyO_E_From_Delayed'),
-  'tu-icon-paused': (0, _getLocale.getLocale)('OKR_MyO_E_From_Suspended'),
-  'tu-icon-notstart': (0, _getLocale.getLocale)('OKR_MyO_E_From_NotStarted')
+
+var EStatusClass2StatusTypeText = function EStatusClass2StatusTypeText() {
+  return {
+    "tu-icon-finished": (0, _getLocale.getLocale)("OKR_MyO_E_From_Completed"),
+    "tu-icon-running": (0, _getLocale.getLocale)("Per_MyRe_text_Inprogress"),
+    "tu-icon-canceled": (0, _getLocale.getLocale)("OKR_MyO_E_From_Cancelled"),
+    "tu-icon-deferred": (0, _getLocale.getLocale)("OKR_MyO_E_From_Delayed"),
+    "tu-icon-paused": (0, _getLocale.getLocale)("OKR_MyO_E_From_Suspended"),
+    "tu-icon-notstart": (0, _getLocale.getLocale)("OKR_MyO_E_From_NotStarted"),
+    "tu-icon-weijieshou-right": (0, _getLocale.getLocale)("OKR_MyO_E_From_Notaccepted")
+  };
 };
+
 exports.EStatusClass2StatusTypeText = EStatusClass2StatusTypeText;
+
+var getPriorityTextMapping = function getPriorityTextMapping() {
+  return {
+    1: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Highest")),
+    2: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_High")),
+    3: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Middle")),
+    4: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Low")),
+    5: "".concat((0, _getLocale.getLocale)("OKR_MyO_E_Priority"), "\uFF1A").concat((0, _getLocale.getLocale)("OKR_MyO_E_Butt_Verylow"))
+  };
+};
+
+exports.getPriorityTextMapping = getPriorityTextMapping;
 var TASK_NDOE_TYPE;
 exports.TASK_NDOE_TYPE = TASK_NDOE_TYPE;
 

package/lib/components/task-tree/task-item-node/e-status-dropdown.js

@@ -5,16 +5,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = _default;
+exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _titaUi = require("tita-ui");
+
 var _dropSelector = _interopRequireWildcard(require("../../drop-selector"));
 
 var _getLocale = require("../../../utils/getLocale");
 
+var _constant = require("./constant");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -35,7 +39,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _default(props) {
+var EStatusDropdown = function EStatusDropdown(props) {
+  // eslint-disable-next-line react/prop-types
   var onChange = props.onChange,
       checked = props.checked,
       hasAuth = props.hasAuth;
@@ -47,25 +52,47 @@ function _default(props) {
 
   var onMenuClickHandler = function onMenuClickHandler(name) {
     setStatus(name);
-    onChange && onChange(name);
+
+    if (onChange) {
+      onChange(name);
+    }
   };
 
   (0, _react.useEffect)(function () {
     setStatus(checked);
   }, [checked]);
+
+  if (!hasAuth) {
+    return /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
+      content: (0, _constant.EStatusClass2StatusTypeText)()[status]
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        color: '#89919F',
+        fontSize: 16,
+        marginRight: 4,
+        verticalAlign: 'baseline'
+      },
+      className: (0, _classnames["default"])(status)
+    }));
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_dropSelector["default"], {
     onChange: onMenuClickHandler,
     checked: status,
     canEdit: hasAuth,
-    trigger: /*#__PURE__*/_react["default"].createElement("span", {
+    trigger: /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         color: '#89919F',
         fontSize: 16,
         marginRight: 4,
-        verticalAlign: 'baseline'
-      },
+        verticalAlign: 'baseline',
+        display: 'flex'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
+      content: (0, _constant.EStatusClass2StatusTypeText)()[status]
+    }, /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])(status)
-    })
+    })))
   }, /*#__PURE__*/_react["default"].createElement(_dropSelector.IconItem, {
     name: "tu-icon-finished",
     icon: "tu-icon-finished",
@@ -91,4 +118,7 @@ function _default(props) {
     icon: "tu-icon-notstart",
     exIconClass: "e-node-status-icon"
   }, (0, _getLocale.getLocale)('OKR_MyO_E_From_NotStarted')));
-}
+};
+
+var _default = EStatusDropdown;
+exports["default"] = _default;

package/lib/components/task-tree/task-item-node/e-task.js

@@ -138,7 +138,7 @@ function ETaskNode(props) {
       setDataInfo = _useState14[1];
 
   var _useState15 = (0, _react.useState)(function () {
-    return (0, _bsGlobal.getBSGlobal)("TaskAdvancedSetting").TaskFunctionSetting.TaskPriority;
+    return (0, _bsGlobal.getBSGlobal)('TaskAdvancedSetting').TaskFunctionSetting.TaskPriority;
   }),
       _useState16 = _slicedToArray(_useState15, 1),
       isShowPriority = _useState16[0];
@@ -152,8 +152,8 @@ function ETaskNode(props) {
   var hasEditAuth = new _auth.EAuth({
     principalUser: data.principalUser,
     user: data.user
-  }).hasAuth() // || extraEditAuth
-  && data.status !== 5;
+  }).hasAuth() && // || extraEditAuth
+  data.status !== 5;
   var isParticipant = ((_okrInfo$authority = okrInfo.authority) === null || _okrInfo$authority === void 0 ? void 0 : _okrInfo$authority.roleRelation) && okrInfo.authority.roleRelation.roleType === 2;
   var hasRelativeAuth = new _auth.KRAuth({
     user: krUser,
@@ -174,7 +174,7 @@ function ETaskNode(props) {
       if (data.Code === 1) {
         setUser(user.data);
 
-        _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
+        _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
           canClose: false
         });
       } else {
@@ -183,7 +183,7 @@ function ETaskNode(props) {
         });
       }
     })["catch"](function () {
-      _toast["default"].Error("网络异常", {
+      _toast["default"].Error('网络异常', {
         canClose: false
       });
     });
@@ -195,7 +195,7 @@ function ETaskNode(props) {
       status: _constant.EStatusClass2StatusType[statusType]
     }).then(function (resp) {
       if (resp.Code === 1) {
-        _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
+        _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
           canClose: false
         });
 
@@ -210,7 +210,7 @@ function ETaskNode(props) {
         });
       }
     })["catch"](function () {
-      _toast["default"].Error("网络异常", {
+      _toast["default"].Error('网络异常', {
         canClose: false
       });
     });
@@ -224,7 +224,7 @@ function ETaskNode(props) {
       taskId: data.taskId
     }).then(function (resp) {
       if (resp.Code === 1) {
-        _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
+        _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
           canClose: false
         });
       } else {
@@ -233,7 +233,7 @@ function ETaskNode(props) {
         });
       }
     })["catch"](function () {
-      _toast["default"].Error("网络异常", {
+      _toast["default"].Error('网络异常', {
         canClose: false
       });
     })["finally"](setUnConnectVisible(false));
@@ -279,7 +279,7 @@ function ETaskNode(props) {
                     status: resp.Data.status
                   }));
 
-                  _toast["default"].Success((0, _getLocale.getLocale)("Mod_Successfuloperat"), {
+                  _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'), {
                     canClose: false
                   });
                 } else {
@@ -288,7 +288,7 @@ function ETaskNode(props) {
                   });
                 }
               })["catch"](function () {
-                _toast["default"].Error("网络异常", {
+                _toast["default"].Error('网络异常', {
                   canClose: false
                 });
               });
@@ -322,7 +322,7 @@ function ETaskNode(props) {
   };
 
   var handleShowTaskDetail = function handleShowTaskDetail() {
-    if ((0, _platform.isPlatform)("dd")) {
+    if ((0, _platform.isPlatform)('dd')) {
       _drawerManager["default"].close();
     }
 
@@ -333,7 +333,7 @@ function ETaskNode(props) {
       (_window$Talent2 = window.Talent) === null || _window$Talent2 === void 0 ? void 0 : _window$Talent2.app.vent.on("global-pull-screen:closed:".concat(data.taskId), function () {// refreshEList && refreshEList();
       }); // 任务：打开推屏
 
-      window.Talent.app.vent.trigger("global-pull-screen", data.taskId, "task");
+      window.Talent.app.vent.trigger('global-pull-screen', data.taskId, 'task');
     } else {
       window.open("//".concat(window.location.host).concat(window.location.pathname, "#more/taskinfo?id=").concat(data.taskId));
     }
@@ -347,7 +347,7 @@ function ETaskNode(props) {
   }, /*#__PURE__*/_react["default"].createElement(_eStatusDropdown["default"], {
     onChange: onEStatusChangeHandler,
     checked: _constant.EStatusStatus2ClassType[dataInfo.status],
-    hasAuth: hasEditAuth
+    hasAuth: hasEditAuth && data.editStatusable
   })), isShowPriority && /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-priority"))
   }, /*#__PURE__*/_react["default"].createElement(_ePriority["default"], {
@@ -356,7 +356,7 @@ function ETaskNode(props) {
     hasAuth: hasEditAuth,
     status: data.status
   })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-title ").concat(isCancel ? "".concat(_precls["default"], "__e-project-node-gray") : "")),
+    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-title"), _defineProperty({}, "".concat(_precls["default"], "__e-project-node-gray"), isCancel || isGray)),
     onClick: handleShowTaskDetail
   }, /*#__PURE__*/_react["default"].createElement(TooltipText, {
     text: (0, _helpers.escapeHtml)(title),
@@ -376,7 +376,7 @@ function ETaskNode(props) {
     avatar: user === null || user === void 0 ? void 0 : user.avatar,
     extraCls: (isCancel || isGray) && "".concat(_precls["default"], "__e-project-node-gray")
   })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-actions-date")),
+    className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-actions-date"), _defineProperty({}, "".concat(_precls["default"], "__e-task-node-actions-date--canedit"), dataInfo.status !== 2 && hasEditAuth)),
     onClick: updateDateHandler
   }, /*#__PURE__*/_react["default"].createElement(_statusTime["default"], {
     deadLine: dataInfo.deadLine,
@@ -391,11 +391,11 @@ function ETaskNode(props) {
     percent: progress,
     linear: true,
     linearId: data.taskId,
-    linearStartColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, "linearStartColor", dataInfo.status),
-    linearEndColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, "linearEndColor", dataInfo.status),
-    backgroundColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, "backgroundColor", dataInfo.status)
+    linearStartColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, 'linearStartColor', dataInfo.status),
+    linearEndColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, 'linearEndColor', dataInfo.status),
+    backgroundColor: (0, _getProcessColor["default"])(dataInfo.riskLevel, 'backgroundColor', dataInfo.status)
   })), okrInfo.status === 1 && hasRelation && (hasRelativeAuth || isParticipant) ? /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
-    overlay: (0, _getLocale.getLocale)("OKR_MyO_Text_Cancel"),
+    overlay: (0, _getLocale.getLocale)('OKR_MyO_Text_Cancel'),
     placement: "top"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "__e-task-node-actions-connect")),
@@ -409,17 +409,17 @@ function ETaskNode(props) {
     type: "warning"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     type: "title"
-  }, (0, _getLocale.getLocale)("OKR_MyO_Text_Cancelass")), /*#__PURE__*/_react["default"].createElement("span", {
+  }, (0, _getLocale.getLocale)('OKR_MyO_Text_Cancelass')), /*#__PURE__*/_react["default"].createElement("span", {
     type: "content"
-  }, (0, _getLocale.getLocale)("OKR_MyO_Text_TtasknotO")), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.CancelButton, {
+  }, (0, _getLocale.getLocale)('OKR_MyO_Text_TtasknotO')), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.CancelButton, {
     type: "button",
     onClick: function onClick() {
       return setUnConnectVisible(false);
     }
-  }, (0, _getLocale.getLocale)("Mod_Cancel")), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.SureButton, {
+  }, (0, _getLocale.getLocale)('Mod_Cancel')), /*#__PURE__*/_react["default"].createElement(_dialogConfirm.SureButton, {
     type: "button",
     onClick: onSureUnConnectHandler
-  }, (0, _getLocale.getLocale)("OKR_MyO_Butt_Determine"))));
+  }, (0, _getLocale.getLocale)('OKR_MyO_Butt_Determine'))));
 }
 
 var _default = ETaskNode;

package/lib/components/task-tree/task-item-node/index.css

@@ -72,8 +72,8 @@
 
 .titaui-task-tree__e-task-node-actions-user {
   display: inline-block;
-  width: 64px;
-  margin-left: 16px;
+  width: 92px;
+  margin-left: 24px;
 }
 
 .titaui-task-tree__e-task-node-actions-date {
@@ -83,27 +83,32 @@
   line-height: 18px;
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
   box-sizing: border-box;
-  width: 78px;
-  height: 26px;
+  width: 82px;
+  height: 32px;
   padding: 4px;
   text-align: left;
-  line-height: 26px;
+  line-height: 32px;
+  margin-left: 28px;
 }
 
 .titaui-task-tree__e-task-node-actions-date > span {
   vertical-align: text-bottom;
 }
 
+.titaui-task-tree__e-task-node-actions-date--canedit:hover {
+  border-radius: 8px;
+  border: 1px solid #dfe3ea;
+  padding: 3px;
+}
+
 .titaui-task-tree__e-task-node-actions-progress {
   position: relative;
   top: 3px;
   color: #89919f;
   cursor: auto;
-  width: 64px;
-  margin-left: 16px;
-  margin-right: 4px;
+  width: 68px;
+  margin-left: 20px;
 }
 
 .titaui-task-tree__e-task-node-actions-progress .tooltip-text-wrapper {
@@ -223,8 +228,8 @@
 
 .titaui-task-tree__e-project-node-actions-user {
   display: inline-block;
-  width: 64px;
-  margin-left: 16px;
+  width: 92px;
+  margin-left: 24px;
 }
 
 .titaui-task-tree__e-project-node-actions-date {
@@ -234,27 +239,32 @@
   line-height: 18px;
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
   box-sizing: border-box;
-  width: 78px;
-  height: 26px;
+  width: 82px;
+  height: 32px;
   padding: 4px;
   text-align: left;
-  line-height: 26px;
+  line-height: 32px;
+  margin-left: 28px;
 }
 
 .titaui-task-tree__e-project-node-actions-date > span {
   vertical-align: text-bottom;
 }
 
+.titaui-task-tree__e-project-node-actions-date--canedit:hover {
+  border-radius: 8px;
+  border: 1px solid #dfe3ea;
+  padding: 3px;
+}
+
 .titaui-task-tree__e-project-node-actions-progress {
   position: relative;
   top: 3px;
   color: #89919f;
   cursor: auto;
-  width: 64px;
-  margin-left: 16px;
-  margin-right: 4px;
+  width: 68px;
+  margin-left: 20px;
 }
 
 .titaui-task-tree__e-project-node-actions-progress .tooltip-text-wrapper {

package/lib/components/task-tree/task-tree.css

@@ -12,5 +12,5 @@
 }
 
 .titaui-task-tree .rc-tree-treenode-switcher-close:hover {
-  background: #f7f8fa;
+  background: #f0f4fa;
 }

package/lib/components/textarea/index.css

@@ -0,0 +1,142 @@
+.titaui-textArea {
+  box-sizing: border-box;
+  position: relative;
+  min-height: 36px;
+  background: #ffffff;
+  cursor: text;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding: 7px 0;
+  transition: border 0.2s ease 0.2s, box-shadow 0.2s ease 0.2s;
+}
+
+.titaui-textArea.has-error {
+  border: 1px solid #f05e5e !important;
+}
+
+.titaui-textArea:hover {
+  border: 1px solid #2879ff;
+}
+
+.titaui-textArea > input {
+  flex-grow: 1;
+  border: none;
+  padding: 0 12px;
+  margin: 0;
+  outline: none;
+  width: 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: #3f4755;
+}
+
+.titaui-textArea > input ::-webkit-input-placeholder {
+  color: #bfc7d5;
+}
+
+.titaui-textArea > input :-ms-input-placeholder {
+  color: #bfc7d5;
+}
+
+.titaui-textArea > input :-moz-input-placeholder {
+  color: #bfc7d5;
+}
+
+.titaui-textArea textarea {
+  flex: 1;
+  line-height: 20px;
+  min-height: 20px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  resize: none;
+  padding: 0 12px;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: #3f4755;
+  word-break: break-all;
+}
+
+.titaui-textArea textarea ::-webkit-input-placeholder {
+  color: #bfc7d5;
+}
+
+.titaui-textArea textarea :-ms-input-placeholder {
+  color: #bfc7d5;
+}
+
+.titaui-textArea textarea :-moz-input-placeholder {
+  color: #bfc7d5;
+}
+
+.titaui-textArea.disabled {
+  background-color: rgba(240, 242, 245, 0.4);
+  border-color: #f0f2f5;
+  color: #bfc7d5;
+  cursor: default;
+}
+
+.titaui-textArea.disabled > input,
+    .titaui-textArea.disabled textarea,
+    .titaui-textArea.disabled .tail-wrapper {
+  color: #bfc7d5;
+}
+
+.titaui-textArea.disabled:hover {
+  border-color: #f0f2f5;
+}
+
+.area-error {
+  border: 1px solid #f05e5e !important;
+  box-shadow: 0px 0px 6px 0px rgba(240, 94, 94, 0.3);
+}
+
+.area-focus {
+  border: 1px solid #2879ff !important;
+  box-shadow: 0px 0px 6px 0px rgba(40, 121, 255, 0.3);
+}
+
+.area-normal {
+  border: 1px solid #e9ecf0 !important;
+  box-shadow: none;
+}
+
+.inner {
+  overflow: auto;
+  display: flex;
+  flex: 1;
+  width: 0;
+}
+
+.err-color {
+  font-size: 12px;
+  font-weight: 400;
+  color: #f05e5e;
+  line-height: 18px;
+  padding-left: 12px;
+}
+
+.commonTextAreaWrapperTopShadow::before {
+  content: '';
+  border-radius: 8px;
+  height: 30px;
+  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.commonTextAreaWrapperBottomShadow::after {
+  content: '';
+  border-radius: 8px;
+  height: 30px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 2;
+}