@titaui/pc 1.9.18 → 1.9.22

package/src/components/okr-detail/base-info/base-info.tsx

@@ -58,7 +58,10 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
 
   const { okrInfo, setOkrInfo } = useContext(CommonContext);
 
-  const originDesc = decodeURI(encodeURI(okrInfo.description)) === 'null' ? '' : decodeURI(encodeURI(okrInfo.description));
+  const originDesc =
+    decodeURI(encodeURI(okrInfo.description)) === "null"
+      ? ""
+      : decodeURI(encodeURI(okrInfo.description));
   const [originalDesc, setOriginalDesc] = useState(originDesc || "");
   const [participant, setParticipant] = useState<IUser[]>([]);
   const [followers, setFollowers] = useState<IUser[]>([]);
@@ -82,6 +85,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
   const oldGeneralRoleTypeRef = useRef(generalRoleType);
   const loginUser = getUserInfo();
   const setting = getOkrAdvancedSetting().KRSetting;
+  console.log(setting.TargetFollowers);
 
   useEffect(() => {
     setOriginalDesc(okrInfo.description);
@@ -92,7 +96,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
       if (desc.trim().length > 5000) return;
       saveODesc(okrInfo.workId, desc).then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
+          Toast.Success(getLocale("Mod_Successfuloperat"), { canClose: false });
           setOkrInfo({ ...okrInfo, description: desc });
         } else {
           Toast.Error("操作失败", { canClose: false });
@@ -106,7 +110,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
     (user) => {
       transferPrincipal(okrInfo.workId, user.email, user.id).then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
+          Toast.Success(getLocale("Mod_Successfuloperat"), { canClose: false });
           let tempParticipant = [...participant];
           // 当前登录的是有权限的人，将负责人转为参与人或者关注人中的一个
           const isParticipantIndex = findUserIndex(tempParticipant, user.id);
@@ -144,7 +148,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
   const handleChangeClassify = useCallback((classify) => {
     updateOClassify(classify, okrInfo.workId).then((resp) => {
       if (resp.Code === 1) {
-        Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
+        Toast.Success(getLocale("Mod_Successfuloperat"), { canClose: false });
         setGeneralOkrClassify(classify);
       } else {
         Toast.Error(resp.Message, { canClose: false });
@@ -170,7 +174,7 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
         areaGroupIds
       ).then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success(getLocale('Mod_Successfuloperat'), { canClose: false });
+          Toast.Success(getLocale("Mod_Successfuloperat"), { canClose: false });
           setGeneralVisibility({
             visibility: visiableValue,
             visibilityScope: data,
@@ -287,7 +291,9 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
     deleteUser(delUser.id, okrInfo.workId, delUserType === 1 ? 2 : 3)
       .then((resp) => {
         if (resp.Code === 1) {
-          Toast.Success(getLocale('Pro_detail_Deletsuccess'), { canClose: false });
+          Toast.Success(getLocale("Pro_detail_Deletsuccess"), {
+            canClose: false,
+          });
           setGeneralRoleType(delUser.id === loginUser.Id ? 0 : generalRoleType);
           if (delUserType === 1) {
             participant.splice(userIndex, 1);
@@ -371,13 +377,14 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
       <DialogConfirm visible={showDialogConfirm} type="warning">
         {/* @ts-ignore */}
         <span type="title">
-          确定删除此{delUserType === 1 ? "参与" : getLocale('OKR_MyO_Butt_Follow')}人吗？
+          确定删除此
+          {delUserType === 1 ? "参与" : getLocale("OKR_MyO_Butt_Follow")}人吗？
         </span>
         <CancelButton type="button" onClick={cancelDelPerson}>
-          {getLocale('Mod_Cancel')}
+          {getLocale("Mod_Cancel")}
         </CancelButton>
         <WarningButton type="button" onClick={ensureDelPerson}>
-          {getLocale('Mod_Delete')}
+          {getLocale("Mod_Delete")}
         </WarningButton>
       </DialogConfirm>
     );
@@ -418,7 +425,9 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
           !canEditAllInfo &&
           participant.length === 0 ? null : (
             <>
-              <span className="base-info__person-block-title">{getLocale('Mod_Participants')}</span>
+              <span className="base-info__person-block-title">
+                {getLocale("Mod_Participants")}
+              </span>
               <Person
                 users={participant}
                 canEdit={canEditPerson}
@@ -428,23 +437,26 @@ const BaseInfo: FC<IBaseInfoProps> = ({ okrId }) => {
             </>
           )}
         </div>
-        <div className="base-info__person-block">
-          {!canEditFocusPerson &&
-          !canEditAllInfo &&
-          setting.TargetFollowers &&
-          followers.length === 0 ? null : (
-            <>
-              <span className="base-info__person-block-title">{getLocale('Mod_Followers')}</span>
-              <Person
-                type="followers"
-                users={followers}
-                canEdit={canEditFocusPerson}
-                onAddUser={handleAddUser}
-                onDelUser={handleDelFollower}
-              />
-            </>
-          )}
-        </div>
+        {setting.TargetFollowers && (
+          <div className="base-info__person-block">
+            {!canEditFocusPerson &&
+            !canEditAllInfo &&
+            followers.length === 0 ? null : (
+              <>
+                <span className="base-info__person-block-title">
+                  {getLocale("Mod_Followers")}
+                </span>
+                <Person
+                  type="followers"
+                  users={followers}
+                  canEdit={canEditFocusPerson}
+                  onAddUser={handleAddUser}
+                  onDelUser={handleDelFollower}
+                />
+              </>
+            )}
+          </div>
+        )}
       </div>
       {renderDialogConfirm}
     </div>

package/src/components/okr-detail/base-info/o-desc/index.scss

@@ -6,7 +6,7 @@
   .o-desc__title {
     margin-top: 12px;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 600;
     color: #141C28;
     line-height: 22px;
     padding-left: 10px;

package/src/components/okr-detail/components/header/index.js

@@ -7,7 +7,7 @@ import OAvatar from "./o-avatar";
 import OType from "../okr-type";
 import OCycle from "./o-cycle";
 import EditNameCmp from "./edit-name";
-import Score from "../score";
+import Score from "./o-score";
 import Progress from "../../../progress";
 import { OkrRiskMapping } from "../../../progress/utils";
 
@@ -34,7 +34,7 @@ const Header = (props) => {
     setGeneralOkrClassify,
     showOkrEvalute,
   } = useContext(GeneralDataContext);
-
+  const showOScore = window.BSGlobal.OkrAdvancedSetting.KRSetting.OScore
   const { progressGrow = 0, progress } = okrInfo;
 
   const [auth, setAuth] = useState(false);
@@ -115,6 +115,7 @@ const Header = (props) => {
       </span>
     );
   };
+
   return (
     <div className={precls} draggable={false}>
       <div className={`${precls}__avatar`}>
@@ -148,7 +149,7 @@ const Header = (props) => {
               <OCycle editable={editable} okrId={okrInfo.workId} />
             </span>
             <span className={`${precls}__action-item`}>
-              {showOkrEvalute && <Score score={okrInfo.evaluateValue} />}
+              {(showOkrEvalute || showOScore) && <Score editable={editable} okrId={okrInfo.workId} score={okrInfo.evaluateValue} isEvaluate={okrInfo.manualEvaluateValue||!!okrInfo.evaluateValue} />}
             </span>
           </span>
           <OProgressUpdate okrInfo={okrInfo} renderContent={renderContent} />

package/src/components/okr-detail/components/header/index.scss

@@ -163,3 +163,8 @@ $lignt-color: #2879ff;
     width: auto!important;
   }
 }
+.okr-detail-o-score{
+  &__form{
+    padding: 10px 32px 8px;
+  }
+}

package/src/components/okr-detail/components/header/o-score.tsx

@@ -0,0 +1,115 @@
+import React, { Fragment, useState, useRef, useContext } from "react";
+import { CommonContext } from "../../context";
+import { getLocale } from "../../../../utils/getLocale";
+import Score from "../score";
+import Toast from "../../../toast";
+import Dialog from "../../../dialog";
+import Form from "../../../form";
+import { updateOScore } from "../../request-apis";
+import "./index.scss";
+
+const FormFields = Form.Fields;
+const preCls = "okr-detail-o-score";
+
+interface IOScoreProps {
+  score: number;
+  okrId: string | number;
+  editable: any;
+}
+interface FormFields {
+  score: string | number;
+  describe: string;
+}
+const OScore = (props: IOScoreProps) => {
+  const { score, okrId, editable, ...restProps } = props;
+  const [visible, setVisible] = useState(false);
+  const { refreshAll } = useContext(CommonContext);
+  const [formFiedlsValue, setFormFiedlsValue] = useState<FormFields>({
+    score: score.toFixed(2),
+    describe: "",
+  });
+  const formContainerRef = useRef<any>();
+  const formRef = useRef<any>();
+  const changeOScore = () => {
+    setVisible(true);
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  const handleOk = () => {
+    updateOScore(formFiedlsValue.score, okrId)
+      .then((res) => {
+        if (!!res.Code) {
+          Toast.Success(`${getLocale("OKR_MyO_Ew_Success")}`);
+          handleCancel();
+          refreshAll();
+        } else {
+          Toast.Error(res.Message || `${getLocale("OKR_MyO_Ew_Fail")}`);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        Toast.Error(`${getLocale("OKR_MyO_Ew_Fail")}`);
+      });
+  };
+
+  const onFieldsChangeHandler = (fields) => {
+    const newFields = { ...fields };
+    setFormFiedlsValue(newFields);
+  };
+
+  return (
+    <Fragment>
+      <Score
+        editable={editable}
+        score={score}
+        onClick={changeOScore}
+        {...restProps}
+      />
+      <Dialog
+        title={`O ${getLocale("Per_Ass_New_Appr_detail_Scor")}`}
+        visible={visible}
+        animation="slide-fade"
+        maskAnimation="fade"
+        destroyOnClose={true}
+        width={538}
+        onClose={handleCancel}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        noHeadLine
+        noFooterLine
+      >
+        <div ref={formContainerRef} className={`${preCls}__form`}>
+          <Form
+            ref={formRef}
+            getFormContainer={() => formContainerRef.current}
+            onFieldsChange={onFieldsChangeHandler}
+          >
+            <FormFields.Input
+              name="score"
+              label={`${getLocale("Per_Ass_New_Appr_detail_Scor")}`}
+              className={`${preCls}__form-item`}
+              placeholder={`${getLocale("OKR_MyO_Ew_PleaEnterRat")}`}
+              value={formFiedlsValue.score}
+              require={true}
+              layout="row"
+              verifies={[
+                {
+                  tip: `${getLocale("OKR_MyO_Ew_RatEmpty")}`,
+                  test: /^[\s\S]+$/,
+                },
+                {
+                  tip: `${getLocale("OKR_MyO_KRP_Please0and1")}`,
+                  test: /^(1|0(\.\d{1,2})?)$/,
+                },
+              ]}
+            />
+          </Form>
+        </div>
+      </Dialog>
+    </Fragment>
+  );
+};
+export default OScore;

package/src/components/okr-detail/components/okr-tree/tree-node/e-kr-node/index.js

@@ -88,7 +88,7 @@ export default (props) => {
           setTimeout(refreshEList, 2000);
         })
         .catch((e) => {
-          Toast.Error(e.errorMsg, { canClose: false });
+          Toast.Error(e, { canClose: false });
         });
     } else {
       window

package/src/components/okr-detail/components/okr-tree/tree-node/index.scss

@@ -11,7 +11,7 @@
     height: 22px;
     font-size: 14px;
     font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-    font-weight: 500;
+    font-weight: 600;
     color: #a4acb9;
     line-height: 22px;
   }

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/index.scss

@@ -90,7 +90,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
       margin-left: 8px;
       font-size: 14px;
       font-family: $font-family;
-      font-weight: 500;
+      font-weight: 600;
       color: #3f4755;
       line-height: 22px;
       vertical-align: top;

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/kr-score-editor/edit-pop.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import Popup from '../../../../../../popup';
 import styled from 'styled-components'
-import { getLocale } from "../../../../../../../utils/getLocale";
+import { getLocale, isEn } from "../../../../../../../utils/getLocale";
 
 const Wrapper = styled.div`
   min-width: 343px;
@@ -207,7 +207,7 @@ export default class EditPop extends PureComponent<Props> {
       </Header>
       <Body>
         <Line>
-          <InputName style={type == 'line' ? undefined : { position: 'relative', top: '3px' }}>{inputName}</InputName>
+          <InputName style={type == 'line' ? {width: isEn ? '75px' : '30px'} : { position: 'relative', top: '3px' ,width: isEn ? '75px' : '30px'}}>{inputName}</InputName>
           {
             type == 'line' &&
             <LineInputWrapper style={showError ? { borderColor: '#D0021B' } : undefined}>

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/kr-score-editor/kr-push-score.tsx

@@ -17,7 +17,7 @@ import {
   AvatarWrapper,
   IconEdit
 } from './style';
-import { getLocale } from "../../../../../../../utils/getLocale";
+import { getLocale, isEn } from "../../../../../../../utils/getLocale";
 
 interface Props {
   setRefInParent: Function
@@ -219,7 +219,7 @@ export default class Score extends PureComponent<Props, State> {
       information: (this.state.showScoreInfoError ?
 
         <ScoreInfoWrapperError data-length={`已输入 ${this.state.areaLength} 个字，最多可输入 1000 个字`}>
-          <ScoreInfoSpanText>{getLocale('OKR_MyO_Description')}</ScoreInfoSpanText>
+          <ScoreInfoSpanText style={{minWidth: isEn ? '75px' : '30px'}}>{getLocale('OKR_MyO_Description')}</ScoreInfoSpanText>
           <ScoreInfoSpanTextareaError
             ref={this.state.scoreInfoErrorRef}
             placeholder={getLocale('OKR_MyO_scoredescription')}
@@ -227,7 +227,7 @@ export default class Score extends PureComponent<Props, State> {
             value={htmlDecodeByRegExp(this.state.scoreInfoText)} />
         </ScoreInfoWrapperError> :
         <ScoreInfoWrapper>
-          <ScoreInfoSpanText>{getLocale('OKR_MyO_Description')}</ScoreInfoSpanText>
+          <ScoreInfoSpanText style={{minWidth: isEn ? '75px' : '30px'}}>{getLocale('OKR_MyO_Description')}</ScoreInfoSpanText>
           <ScoreInfoSpanTextarea
             ref={this.state.scoreInfoRef}
             placeholder={getLocale('OKR_MyO_scoredescription')}

package/src/components/okr-detail/components/okr-tree/tree-node/kr-node/kr-score-editor/style.js

@@ -17,14 +17,12 @@ export const ExtraWrapper = styled.div`
 新增评分弹层的div --start
 */
 export const ScoreInfoWrapper = styled.div`
-  width: 312px;
   height: 75px;
   display: flex;
   margin-bottom: 20px;
 `;
 
 export const ScoreInfoWrapperError = styled.div`
-  width: 312px;
   height: 75px;
   display: flex;
   margin-bottom: 20px;
@@ -43,14 +41,13 @@ export const ScoreInfoWrapperError = styled.div`
 export const ScoreInfoSpanText = styled.span`
   width: 30px;
   height: 20px;
-  font-family: PingFangSC-Regular;
   font-size: 14px;
   color: #83898F;
   margin-right: 4px;
 `;
 
 export const ScoreInfoSpanTextarea = styled.textarea`
-  width: 297px;
+  width: 100%;
   box-sizing: border-box;
   padding: 1px 7px;
   border: 1px solid #F0F2F5;
@@ -60,7 +57,7 @@ export const ScoreInfoSpanTextarea = styled.textarea`
 `;
 
 export const ScoreInfoSpanTextareaError = styled.textarea`
-  width: 297px;
+  width: 100%;
   box-sizing: border-box;
   padding: 1px 7px;
   border: 1px solid #F0F2F5;
@@ -74,7 +71,6 @@ export const ScoreInfoSpanTextareaError = styled.textarea`
 新增评分弹层的div --end
 */
 export const CallSomeoneSpan = styled.span`
-  font-family: PingFangSC-Regular;
   font-size: 14px;
   color: #83898F;
   padding-right: 15px;

package/src/components/okr-detail/components/okr-tree/tree-node/kr-parent-node/index.scss

@@ -96,7 +96,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
       margin-left: 8px;
       font-size: 14px;
       font-family: $font-family;
-      font-weight: 500;
+      font-weight: 600;
       color: #3f4755;
       line-height: 22px;
       vertical-align: top;

package/src/components/okr-detail/components/okr-tree/tree-node/o-child-node/index.scss

@@ -7,7 +7,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
   height: 22px;
   font-size: 14px;
   font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
+  font-weight: 600;
   color: #3f4755;
   line-height: 22px;
 }

package/src/components/okr-detail/components/okr-tree/tree-node/o-parent-node/index.scss

@@ -6,7 +6,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   height: 22px;
   font-size: 14px;
   font-family: $font-family;
-  font-weight: 500;
+  font-weight: 600;
   color: #3f4755;
   line-height: 22px;
 }

package/src/components/okr-detail/detail-footer/index.scss

@@ -21,7 +21,7 @@
 .okr-detail-drawer-bottom-mblog-wrapper {
   background: #FFFFFF;
   box-shadow: 0px -2px 8px 0px rgba(127, 145, 180, 0.15);
-  padding: 18px 32px 3px;
+  padding: 18px 32px 20px;
   z-index: 11;
   .okr-detail-reply-to-user {
   //   height: ${(p: any) => p.height};

package/src/components/okr-detail/e-list/search-form/fields/index.scss

@@ -8,6 +8,7 @@
 
     &-text {
       display: inline-block;
+      margin-right: 20px;
     }
 
     &-o {

package/src/components/okr-detail/okr-list/index.scss

@@ -4,7 +4,7 @@ $font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-ser
   height: 22px;
   font-size: 14px;
   font-family: $font-family;
-  font-weight: 500;
+  font-weight: 600;
   color: #a4acb9;
   line-height: 22px;
 }

package/src/components/okr-detail/request-apis.ts

@@ -414,3 +414,10 @@ export const updateChildOkrWeight = (data: { OkrId: number, Weight: number }[])
     "transformRequest": qs.stringify,
   })
 }
+
+export const updateOScore = (score,workId) => {
+  return rpost('v2')('work/score', {
+    manualScore: score,
+    workId:workId
+  })
+}

package/src/components/okr-progress-modal/helper.js

@@ -25,7 +25,7 @@ export const getO_SETTING = () => {
         const { childOkrProgress, childkrProgress } = recommandProgressObj;
         const textArr = [];
         childkrProgress !== -1 && textArr.push(`${getLocale('OKR_MyO_Pop_Upd_KRCom')}${childkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
-        childOkrProgress !== -1 && textArr.push(`子目标完成度${childOkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
+        childOkrProgress !== -1 && textArr.push(`${getLocale('OKR_MyO_Ew_SubobjCom')}${childOkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
         if (textArr.length == 0) return '';
         return (
           <Fragment>
@@ -62,7 +62,7 @@ export const getKR_SETTING = () => {
         const { childOkrProgress, childEProgress } = recommandProgressObj;
         const textArr = [];
         childEProgress !== -1 && textArr.push(`${getLocale('OKR_MyO_Ecompletion')}${childEProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
-        childOkrProgress !== -1 && textArr.push(`子目标完成度${childOkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
+        childOkrProgress !== -1 && textArr.push(`${getLocale('OKR_MyO_Ew_SubobjCom')}${childOkrProgress}${getLocale('OKR_MyO_Pop_Upd_Percentage')}`);
         if (textArr.length == 0) return '';
         return (
           <Fragment>

package/src/components/okr-progress-modal/index.scss

@@ -5,7 +5,7 @@
       margin-bottom: 0;
       margin-right: 16px;
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 600;
       line-height: 20px;
       color: #3f4755;
       text-align: right;
@@ -28,7 +28,7 @@
             border-color: #E9ECF0;
           }
           input {
-            color: #BFC7D5 !important;
+            color: #A4ACB9 !important;
           }
         }
         &__suffix {

package/src/components/okrcase-library/index.scss

@@ -559,7 +559,7 @@
     &__head {
       margin-top: 46px;
       font-size: 26px;
-      font-weight: 500;
+      font-weight: 600;
       color: #141c28;
     }
     &__detail {

package/src/components/pagination/select.scss

@@ -279,7 +279,7 @@
     left: unset !important;
     height: 22px;
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 600;
     line-height: 22px;
     color: #3f4755;
   }

package/src/components/search-dropdown/index.scss

@@ -42,7 +42,7 @@
       left: unset !important;
       height: 22px;
       font-size: 16px;
-      font-weight: 500;
+      font-weight: 600;
       line-height: 22px;
       color: #3f4755;
     }

package/src/components/switch/index.scss

@@ -5,7 +5,7 @@
     vertical-align: bottom;
     margin-right: 8px;
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 600;
     color: #3F4755;
     line-height: 22px;
   }

package/src/components/tabs/index.scss

@@ -4,7 +4,7 @@
   &--big {
     div.rc-tabs-tab-btn {
       font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-      font-weight: 500;
+      font-weight: 600;
       color: #89919f;
       margin-bottom: 8px;
     }

package/src/components/tita-chart/charts/pie.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PieChart from '../plots/pie';
+import { getLocale } from '../../../utils/getLocale';
 
 interface Props {
   size?: React.CSSProperties;//容器样式
@@ -71,7 +72,7 @@ export default function TitaPieChart(props: Props) {
           fontSize: '12px'
         },
         offsetY: -10,
-        content: '目标数'
+        content: getLocale('HP_Onumber')
       },
       content: {
         style: {

package/src/components/tooltip/tooltip-text/index.tsx

@@ -11,18 +11,18 @@ interface ITooltipTextProps {
   minusWidth?: number;
   overlayClassName?: string;
   mouseEnterDelay?: number;
-  
 }
 
 const TooltipText: FC<ITooltipTextProps> = ({
   text,
-  overlayText="",
+  overlayText = "",
   maxWidth = 0,
   exClass,
   isPercent = false,
   minusWidth = 0,
   overlayClassName = "",
   mouseEnterDelay = 0,
+  children,
 }) => {
   const [hasTooltip, setHasTooltip] = useState(false);
   const domRef = useRef<any>();
@@ -59,7 +59,7 @@ const TooltipText: FC<ITooltipTextProps> = ({
       {hasTooltip && (
         <Tooltip
           overlayClassName={overlayClassName}
-          overlay={!!overlayText?overlayText:text}
+          overlay={overlayText ? overlayText : text}
           placement="top"
           mouseEnterDelay={mouseEnterDelay}
         >
@@ -69,18 +69,20 @@ const TooltipText: FC<ITooltipTextProps> = ({
               maxWidth: isPercent ? `calc(100% - ${minusWidth}px)` : maxWidth,
             }}
           >
-            {text}
+            {children ? children : text}
           </span>
         </Tooltip>
       )}
       {!hasTooltip && (
-        <span className={`tooltip-text-wrapper ${exClass}`}>{text}</span>
+        <span className={`tooltip-text-wrapper ${exClass}`}>
+          {children ? children : text}
+        </span>
       )}
       <span
         className={`tooltip-text-wrapper tooltip-text-wrapper--hidden ${exClass}`}
         ref={domRef}
       >
-        {text}
+        {children ? children : text}
       </span>
       {isPercent && (
         <span