@titaui/pc 1.11.41 → 1.11.44

package/lib/components/okr-detail/index.js

@@ -17,8 +17,6 @@ var _header = _interopRequireDefault(require("./components/header"));
 
 var _tabs = _interopRequireWildcard(require("../tabs"));
 
-var _request = require("../../utils/request");
-
 var _tabPanelContent = _interopRequireDefault(require("./components/tab-panel-content"));
 
 var _baseInfo = _interopRequireDefault(require("./base-info"));
@@ -27,6 +25,8 @@ var _schedule = _interopRequireDefault(require("./schedule"));
 
 var _requestApis = require("./request-apis");
 
+var _helper = require("./helper");
+
 var _okrReview = _interopRequireDefault(require("../okr-review"));
 
 var _reportList = _interopRequireDefault(require("../eReport/eReportLists/reportList"));
@@ -173,7 +173,14 @@ function OkrDetail(props) {
   var _useState23 = (0, _react.useState)(),
       _useState24 = _slicedToArray(_useState23, 2),
       generalRoleType = _useState24[0],
-      setGeneralRoleType = _useState24[1]; // 计算元素的ref，用于实现 tabs 吸顶，点赞吸底
+      setGeneralRoleType = _useState24[1];
+
+  var _useState25 = (0, _react.useState)({
+    isOpen: false
+  }),
+      _useState26 = _slicedToArray(_useState25, 2),
+      approvalSetting = _useState26[0],
+      setApprovalSetting = _useState26[1]; // 计算元素的ref，用于实现 tabs 吸顶，点赞吸底
 
 
   var tabRef = (0, _react.useRef)();
@@ -203,9 +210,18 @@ function OkrDetail(props) {
     getData();
   };
 
+  var getApprovalShow = function getApprovalShow() {
+    (0, _requestApis.getOkrApprovalSettingInfo)().then(function (resp) {
+      if (resp.Code === 1) {
+        setApprovalSetting((0, _helper.getApprovalOpenItem)(resp.Data));
+      }
+    });
+  };
+
   (0, _react.useEffect)(function () {
     setLoading(true);
     getData();
+    getApprovalShow();
   }, []);
   (0, _react.useEffect)(function () {
     if (!okrInfo || !okrInfo.workId) return;
@@ -276,7 +292,8 @@ function OkrDetail(props) {
       changeTabActive: changeTabActive,
       refreshAll: refreshAll,
       setOkrInfo: setOkrInfo,
-      refreshKrs: refreshKrs
+      refreshKrs: refreshKrs,
+      approvalSetting: approvalSetting
     })
   }, /*#__PURE__*/_react["default"].createElement(_context.GeneralDataContext.Provider, {
     value: {

package/lib/components/okr-detail/okr-list/index.js

@@ -43,6 +43,8 @@ var _auth = require("../../../utils/auth");
 
 var _getLocale = require("../../../utils/getLocale");
 
+var _helper = require("../helper");
+
 require("./index.css");
 
 var _excluded = ["mileStoneId"];
@@ -153,7 +155,8 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       setShowOkrEvalute = _useContext.setShowOkrEvalute;
 
   var _useContext2 = (0, _react.useContext)(_context2.CommonContext),
-      refreshAll = _useContext2.refreshAll;
+      refreshAll = _useContext2.refreshAll,
+      approvalSetting = _useContext2.approvalSetting;
 
   var parentId = generalParent.parentId,
       parentOkr = generalParent.parentOkr,
@@ -442,9 +445,11 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       padding: "0 32px 0 18px"
     }, /*#__PURE__*/_react["default"].createElement(_okrTree["default"], {
       data: krs,
-      draggable: canEditOkr,
+      approvalSetting: approvalSetting,
+      okrInfo: okrInfo,
+      draggable: canEditOkr && (okrInfo === null || okrInfo === void 0 ? void 0 : okrInfo.applyState) === _helper.EApproveStatus.UnderApproval,
       onDrop: onOkrItemDropHandler
-    }))), (canEditOkr || isInnerUser) && /*#__PURE__*/_react["default"].createElement("div", {
+    }))), (canEditOkr || isInnerUser) && (0, _helper.getApprovalOkr)(approvalSetting, "createOkr", okrInfo === null || okrInfo === void 0 ? void 0 : okrInfo.applyState, okrInfo === null || okrInfo === void 0 ? void 0 : okrInfo.OkrAndKrApprovalTypes) && /*#__PURE__*/_react["default"].createElement("div", {
       ref: wrapperRef,
       className: (0, _classnames["default"])("".concat(preCls, "__addkr"))
     }, /*#__PURE__*/_react["default"].createElement(_paddingLayout["default"], null, createKrShow ? /*#__PURE__*/_react["default"].createElement(_createKrItem["default"], {

package/lib/components/okr-detail/request-apis.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.workDelete = exports.updateVisibility = exports.updateTaskStatus = exports.updateTaskPrincipal = exports.updateTaskDate = exports.updateProgressDesc = exports.updateProgress = exports.updateParentId = exports.updateOkrVisibility = exports.updateOkrPrincipal = exports.updateOkrName = exports.updateOScore = exports.updateOCommitType = exports.updateOClassify = exports.updateKrProgressAndStatus = exports.updateKrPrincipal = exports.updateKrName = exports.updateKrDate = exports.updateConfidenceIndex = exports.updateClassify = exports.updateChildOkrWeight = exports.transferPrincipal = exports.start = exports.setTaskPriority = exports.saveODesc = exports.remindAction = exports.krChangeOrder = exports.getRelWorks = exports.getRelProgress = exports.getProgress = exports.getPraiseComments = exports.getOrg = exports.getOkrUsers = exports.getOkrDetail = exports.getKrsByCondition = exports.getKrs = exports.getFeedById = exports.deleteUser = exports.deleteProgressDesc = exports.deleteKr = exports.createNewKr = exports.close = exports.cancelRel = exports.cancelPraise = exports.cancelParentOkr = exports.addUserRelation = exports.addUser = exports.addPraise = exports.addComment = void 0;
+exports.workDelete = exports.updateVisibility = exports.updateTaskStatus = exports.updateTaskPrincipal = exports.updateTaskDate = exports.updateProgressDesc = exports.updateProgress = exports.updateParentId = exports.updateOkrVisibility = exports.updateOkrPrincipal = exports.updateOkrName = exports.updateOScore = exports.updateOCommitType = exports.updateOClassify = exports.updateKrProgressAndStatus = exports.updateKrPrincipal = exports.updateKrName = exports.updateKrDate = exports.updateConfidenceIndex = exports.updateClassify = exports.updateChildOkrWeight = exports.transferPrincipal = exports.start = exports.setTaskPriority = exports.saveODesc = exports.remindAction = exports.krChangeOrder = exports.getRelWorks = exports.getRelProgress = exports.getProgress = exports.getPraiseComments = exports.getOrg = exports.getOkrUsers = exports.getOkrDetail = exports.getOkrApprovalSettingInfo = exports.getKrsByCondition = exports.getKrs = exports.getFeedById = exports.deleteUser = exports.deleteProgressDesc = exports.deleteKr = exports.createNewKr = exports.close = exports.cancelRel = exports.cancelPraise = exports.cancelParentOkr = exports.addUserRelation = exports.addUser = exports.addPraise = exports.addComment = void 0;
 
 var _qs = _interopRequireDefault(require("qs"));
 
@@ -89,7 +89,7 @@ exports.updateConfidenceIndex = updateConfidenceIndex;
 var updateOkrName = function updateOkrName(_ref4) {
   var workId = _ref4.workId,
       workName = _ref4.workName;
-  return (0, _request.rpost)("v2")("work/name", {
+  return (0, _request.rpost)("v1")("okr/name", {
     workId: workId,
     workName: workName
   });
@@ -110,6 +110,12 @@ var getOkrDetail = function getOkrDetail(_ref5) {
 
 exports.getOkrDetail = getOkrDetail;
 
+var getOkrApprovalSettingInfo = function getOkrApprovalSettingInfo() {
+  return (0, _request.rget)("v1")("WorkManageSetting/GetOkrApproval");
+};
+
+exports.getOkrApprovalSettingInfo = getOkrApprovalSettingInfo;
+
 var updateClassify = function updateClassify(_ref6) {
   var okrId = _ref6.okrId,
       okrClassify = _ref6.okrClassify;
@@ -365,7 +371,7 @@ var remindAction = function remindAction(_ref15) {
 exports.remindAction = remindAction;
 
 var getOkrUsers = function getOkrUsers(workId) {
-  return (0, _request.rget)("v2")("work/users?workId=".concat(workId));
+  return (0, _request.rget)("v1")("okr/users?workId=".concat(workId));
 };
 
 exports.getOkrUsers = getOkrUsers;
@@ -407,7 +413,7 @@ var deleteUser = function deleteUser(delUserId, okrId, relation) {
 exports.deleteUser = deleteUser;
 
 var workDelete = function workDelete(data) {
-  return (0, _request.rdelete)("v2")("work/deleteV2?workId=".concat(data.workId), {
+  return (0, _request.rdelete)("v1")("okr/deleteV2?workId=".concat(data.workId), {
     data: data
   });
 };
@@ -415,7 +421,7 @@ var workDelete = function workDelete(data) {
 exports.workDelete = workDelete;
 
 var start = function start(okrId) {
-  return (0, _request.rpost)("v1")("Work/Start", {
+  return (0, _request.rpost)("v1")("okr/Start", {
     work_id: okrId
   }, {
     headers: {
@@ -428,7 +434,7 @@ var start = function start(okrId) {
 exports.start = start;
 
 var close = function close(okrId) {
-  return (0, _request.rpost)("v1")("Work/Close", {
+  return (0, _request.rpost)("v1")("okr/Close", {
     work_id: okrId
   }, {
     headers: {
@@ -452,7 +458,7 @@ var updateOCommitType = function updateOCommitType(params) {
 exports.updateOCommitType = updateOCommitType;
 
 var saveODesc = function saveODesc(workId, description) {
-  return (0, _request.rpost)("v2")("work/description", {
+  return (0, _request.rpost)("v1")("okr/description", {
     workId: workId,
     description: description
   });
@@ -502,7 +508,7 @@ var addUserRelation = function addUserRelation(workId, relation, addUser) {
 exports.addUserRelation = addUserRelation;
 
 var getProgress = function getProgress(workId) {
-  return (0, _request.rget)("v1")("Work/GetProgress?work_id=".concat(workId, "&count=10000"));
+  return (0, _request.rget)("v1")("okr/GetProgress?work_id=".concat(workId, "&count=10000"));
 };
 
 exports.getProgress = getProgress;

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

@@ -17,6 +17,8 @@ var _selectCycle = _interopRequireDefault(require("./select-cycle"));
 
 var _requestApis = require("./request-apis");
 
+var _getLocale = require("../../utils/getLocale");
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -68,12 +70,14 @@ function _default(props) {
   }, []);
 
   var handleChangeCyecle = function handleChangeCyecle(data) {
-    (0, _requestApis.updateOCyecle)(okrId, data).then(function () {
-      _toast["default"].Success("修改成功", {
-        canClose: false
-      });
+    (0, _requestApis.updateOCyecle)(okrId, data).then(function (resp) {
+      if (resp.Code === 1) {
+        _toast["default"].Success((0, _getLocale.getLocale)('Mod_Successfuloperat'));
 
-      setCycle(data);
+        setCycle(data);
+      } else {
+        _toast["default"].Error(resp.Message);
+      }
     });
   };
 

package/lib/components/okr-period-selector/select-cycle.js

@@ -49,7 +49,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _formatCycleData(periodParams, getCycleRange) {
-  if (!periodParams) return "";
+  if (!periodParams) return '';
   var startDate = periodParams.startDate;
   var endDate = periodParams.endDate;
 
@@ -58,7 +58,7 @@ function _formatCycleData(periodParams, getCycleRange) {
     endDate = periodParams.endDate.slice(5);
   }
 
-  return "".concat(_periodSelector["default"].formatPeriod(periodParams)).concat(getCycleRange ? ",".concat(startDate, "~").concat(endDate) : "");
+  return "".concat(_periodSelector["default"].formatPeriod(periodParams)).concat(getCycleRange ? ",".concat(startDate, "~").concat(endDate) : '');
 }
 
 function CreateCycle(_ref) {
@@ -94,21 +94,21 @@ function CreateCycle(_ref) {
       setCycleSetting = _useState4[1];
 
   (0, _react.useEffect)(function () {
-    var settings = localStorage.getItem("OKR_CYCLE_SETTING");
+    var settings = localStorage.getItem('OKR_CYCLE_SETTING');
 
     if (settings) {
       setCycleSetting(JSON.parse(settings));
       return;
     }
 
-    var url = (0, _helper.getApiUrl)("okr/cycleSetting");
-    (0, _helper.taker)(url, "GET").then(function (res) {
+    var url = (0, _helper.getApiUrl)('okr/cycleSetting');
+    (0, _helper.taker)(url, 'GET').then(function (res) {
       if (res.Code == 1) {
         setCycleSetting(res.Data);
       }
     });
   }, []);
-  var cycleWrapperRef = (0, _react.useRef)(document.createElement("div"));
+  var cycleWrapperRef = (0, _react.useRef)(document.createElement('div'));
 
   var onPeriodSelectorChangeHandler = function onPeriodSelectorChangeHandler(c) {
     setSelfCycle(_objectSpread(_objectSpread({}, selfCycle), c));
@@ -148,13 +148,13 @@ function CreateCycle(_ref) {
         },
         ref: cycleWrapperRef,
         style: {
-          backgroundColor: "white",
-          boxShadow: "0px 4px 12px 0px rgb(127 145 180 / 20%)",
+          backgroundColor: 'white',
+          boxShadow: '0px 4px 12px 0px rgb(127 145 180 / 20%)',
           borderRadius: 4
         }
       }, /*#__PURE__*/_react["default"].createElement(_periodSelector["default"], {
         style: {
-          width: "100%"
+          width: '100%'
         },
         selected: selfCycle,
         showFullCycle: false,
@@ -176,9 +176,9 @@ function CreateCycle(_ref) {
       }))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "okr-detail-date-cycle__date-line",
         style: {
-          borderBottom: "1px solid #F0F2F5"
+          borderBottom: '1px solid #F0F2F5'
         }
-      }, (0, _getLocale.getLocale)("Mod_StartDate"), "\uFF1A", /*#__PURE__*/_react["default"].createElement(_rangePickerPop["default"], {
+      }, (0, _getLocale.getLocale)('Mod_StartDate'), "\uFF1A", /*#__PURE__*/_react["default"].createElement(_rangePickerPop["default"], {
         format: "YYYY/MM/DD",
         controlled: true,
         onConfirm: onStartDateConfirmHandler,
@@ -193,7 +193,7 @@ function CreateCycle(_ref) {
         className: "tu-icon-arrow-down okr-detail-date-cycle__select-time-down-icon"
       })))), /*#__PURE__*/_react["default"].createElement("div", {
         className: "okr-detail-date-cycle__date-line"
-      }, (0, _getLocale.getLocale)("Mod_EndDate"), "\uFF1A", /*#__PURE__*/_react["default"].createElement(_rangePickerPop["default"], {
+      }, (0, _getLocale.getLocale)('Mod_EndDate'), "\uFF1A", /*#__PURE__*/_react["default"].createElement(_rangePickerPop["default"], {
         format: "YYYY/MM/DD",
         controlled: true,
         onConfirm: onEndDateCOnfirmHandler,
@@ -208,8 +208,8 @@ function CreateCycle(_ref) {
         className: "tu-icon-arrow-down okr-detail-date-cycle__select-time-down-icon"
       })))), /*#__PURE__*/_react["default"].createElement("div", {
         style: {
-          display: "flex",
-          justifyContent: "flex-end"
+          display: 'flex',
+          justifyContent: 'flex-end'
         }
       }, /*#__PURE__*/_react["default"].createElement(_titaUi.Button, {
         size: "s",
@@ -217,15 +217,15 @@ function CreateCycle(_ref) {
           marginRight: 12
         },
         onClick: onCancelClickHandler
-      }, (0, _getLocale.getLocale)("Mod_Cancel")), /*#__PURE__*/_react["default"].createElement(_titaUi.Button, {
+      }, (0, _getLocale.getLocale)('Mod_Cancel')), /*#__PURE__*/_react["default"].createElement(_titaUi.Button, {
         size: "s",
         type: "primary",
         onClick: onSureClickHandler
-      }, (0, _getLocale.getLocale)("OKR_MyO_Butt_Determine"))));
+      }, (0, _getLocale.getLocale)('OKR_MyO_Butt_Determine'))));
     } else {
-      return /*#__PURE__*/_react["default"].createElement(_periodSelector["default"], {
+      return canEdit ? /*#__PURE__*/_react["default"].createElement(_periodSelector["default"], {
         style: {
-          width: "100%"
+          width: '100%'
         },
         selected: cycle,
         showFullCycle: false,
@@ -245,7 +245,11 @@ function CreateCycle(_ref) {
         btnRef: btnRef,
         clickCallback: function clickCallback() {},
         text: _formatCycleData(cycle, getCycleRange)
-      }));
+      })) : renderInnerContent({
+        btnRef: btnRef,
+        clickCallback: function clickCallback() {},
+        text: _formatCycleData(cycle, getCycleRange)
+      });
     }
   }
 

package/lib/components/operation-records/index.js

@@ -80,7 +80,7 @@ var OperationRecord = /*#__PURE__*/function (_PureComponent) {
 
           _this.setState({
             operationTrackList: newOperationTrackList,
-            operationTrackTotal: _mockData.OperationData.length
+            operationTrackTotal: (_mockData.OperationData === null || _mockData.OperationData === void 0 ? void 0 : _mockData.OperationData.length) || 0
           });
         }
       });

package/lib/components/operation-records/style.js

@@ -17,7 +17,7 @@ var OperationRecordWrapper = _styledComponents["default"].div(_templateObject ||
 
 exports.OperationRecordWrapper = OperationRecordWrapper;
 
-var OperationRecordTotal = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 8px;\n  font-size: 12px;\n  color: #8f9ca6;\n  display: inline-block;\n  cursor: pointer;\n\n  &:hover {\n    color: #2879ff;\n  }\n\n  p {\n    line-height: 17px;\n\n    &::before {\n      float: right;\n      margin-left: 4px;\n    }\n  }\n"])));
+var OperationRecordTotal = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 16px;\n  font-size: 12px;\n  color: #8f9ca6;\n  display: inline-block;\n  cursor: pointer;\n\n  &:hover {\n    color: #2879ff;\n  }\n\n  p {\n    line-height: 17px;\n\n    &::before {\n      float: right;\n      margin-left: 4px;\n    }\n  }\n"])));
 
 exports.OperationRecordTotal = OperationRecordTotal;
 

package/lib/components/task-relation-modal/index.js

@@ -235,7 +235,6 @@ function TaskRelationModal(props) {
   };
 
   var removeSelected = function removeSelected(id) {
-    debugger;
     var newSelected = selected.filter(function (item) {
       return item.id !== id;
     });

package/lib/components/task-relation-modal/request-api.js

@@ -15,7 +15,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var okrSearch = function okrSearch(params) {
   return (0, _request.rpost)("v1")("okr/search", _objectSpread(_objectSpread({}, params), {}, {
-    orderType: 1
+    orderType: 1,
+    includeCreateFailApprovalOkr: false
   })).then(function (res) {
     return res.Data;
   });

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

@@ -3,7 +3,7 @@
 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");
 
@@ -41,6 +41,18 @@ var EStatusClass2StatusTypeText = function EStatusClass2StatusTypeText() {
 };
 
 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/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;
+}