@titaui/pc 1.9.48 → 1.9.49

package/src/components/create-okr-modal/index.tsx

@@ -16,7 +16,9 @@ import { RoundWeight } from "../../utils/roundWeight";
 import Toast from "../toast";
 import KrDatas from "./kr-items/krDatas";
 import { KrData } from "./kr-items/krItem";
-import { Wrapper, Line, Space, BlueBar } from "./style";
+import {
+  Wrapper, Line, Space, BlueBar,
+} from "./style";
 import { CreateCycleData } from "./createCycle";
 import { OkrCase } from "./interface";
 import FieldONewName from "./fields/o-new-name";
@@ -73,18 +75,16 @@ interface Props {
   visible?: boolean;
 }
 
-const initOCheckResult = () => {
-  return OCheckTarget().map((item) => {
-    return {
-      text: item,
-      result: EOkrCreateSuggestResultType.normal,
-    };
-  })
-};
+const initOCheckResult = () => OCheckTarget().map((item) => ({
+  text: item,
+  result: EOkrCreateSuggestResultType.normal,
+}));
 
 function CreateOkrModal(
-  { initCycle, userInfo, onSuccess, isHiddenCreatedCard = false, handleCreatedClose = () => {}, visible = false,onClose = () => {}}: Props,
-  ref: Ref<CreateOkrRefObject>
+  {
+    initCycle, userInfo, onSuccess, isHiddenCreatedCard = false, handleCreatedClose = () => {}, visible = false, onClose = () => {},
+  }: Props,
+  ref: Ref<CreateOkrRefObject>,
 ) {
   const [isVisible, setVisible] = useState(visible);
   // @ts-ignore
@@ -100,9 +100,9 @@ function CreateOkrModal(
   const [isCustomWeight, setIsCustomWeight] = useState(false); // 是否自定义权重
   const [dept, setDept] = useState({ departmentId: 0, departmentName: "" }); // 部门信息 用于目标类型为部门时
   const [team, setTeam] = useState({ groupId: 0, groupName: "" }); // 团队信息 用于目标类型为团队时
-  const [type, setType] = useState({ typeName: getLocale('OKR_MyO_Pop_Individual'), typeId: 1 }); // 目标类型
+  const [type, setType] = useState({ typeName: getLocale("OKR_MyO_Pop_Individual"), typeId: 1 }); // 目标类型
   const [cycle, setCycle] = useState<CreateCycleData>(
-    initCycle as CreateCycleData
+    initCycle as CreateCycleData,
   ); // 目标周期信息
   const [okrClassify, setOkrClassify] = useState(); // 目标类别
   const [visibility, setVisibility] = useState(1); // 可见性
@@ -150,28 +150,26 @@ function CreateOkrModal(
   const downloadDomRef = useRef(document.createElement("div"));
   const newOkrDataRef = useRef<any>();
 
-  //kr权重总计
+  // kr权重总计
   let total = 0;
   krDatas.forEach((kr) => (total += Number(kr.krWeight)));
 
-  //权重未自定义过或总计为100为合法权重
-  const krWeightValid =
-    !isCustomWeight || Number(total.toFixed(1)) == 100 || krDatas.length == 0 || !openKrWeight;
-  const allKrHasName =
-    krDatas.filter((kr) => !kr.mileStoneName.trim().length).length == 0;
+  // 权重未自定义过或总计为100为合法权重
+  const krWeightValid = !isCustomWeight || Number(total.toFixed(1)) == 100 || krDatas.length == 0 || !openKrWeight;
+  const allKrHasName = krDatas.filter((kr) => !kr.mileStoneName.trim().length).length == 0;
 
   const showCreateOkrModal = useCallback(() => {
     setVisible(true);
   }, []);
 
   const hideCreateOkrModal = useCallback(() => {
-    onClose && onClose()
+    onClose && onClose();
     setVisible(false);
   }, []);
 
-  useEffect(()=>{
-    setVisible(visible)
-  },[visible])
+  useEffect(() => {
+    setVisible(visible);
+  }, [visible]);
 
   useImperativeHandle(ref, () => ({
     setCase: (data: OkrCase) => {
@@ -186,7 +184,7 @@ function CreateOkrModal(
           krWeight: RoundWeight(100 / subelements.length),
           mileStoneName: s.name,
           confidenceIndex: 5,
-        }))
+        })),
       );
       setIsCustomWeight(false);
     },
@@ -201,38 +199,38 @@ function CreateOkrModal(
     data.userAvatarBase64Url = userAvatarBase64Url;
     setCreatedSuccessInfo(data);
     if (
-      !localStorage.getItem(`dontShowValue${userId}`) &&
-      !isHiddenCreatedCard &&
-      !isApplyTpl
+      !localStorage.getItem(`dontShowValue${userId}`)
+      && !isHiddenCreatedCard
+      && !isApplyTpl
     ) {
       setShowCreatedSuccessInfo(true);
       setTipIndex(Math.floor(Math.random() * 6));
     } else {
-      Toast.Success(getLocale('OKR_Db_Success'), { duration: 3000 });
+      Toast.Success(getLocale("OKR_Db_Success"), { duration: 3000 });
       onSuccess && onSuccess(data);
     }
   }, [userAvatarBase64Url, isApplyTpl]);
 
   const formatVisiableLimit = () => {
     const { users = [], departments = [], groups = [] } = visiableLimit;
-    let areaUserIds = (users || []).reduce(
+    const areaUserIds = (users || []).reduce(
       (res, cur) => [...res, cur.userId],
-      []
+      [],
     );
-    let areaOrgIds = (departments || []).reduce(
+    const areaOrgIds = (departments || []).reduce(
       (res, cur) => [...res, cur.id],
-      []
+      [],
     );
-    let areaGroupIds = (groups || []).reduce(
+    const areaGroupIds = (groups || []).reduce(
       (res, cur) => [...res, cur.id],
-      []
+      [],
     );
     return { areaUserIds, areaOrgIds, areaGroupIds };
   };
   // 表单保存功能
   const onModalOkHandler = async () => {
     if (!okrName) {
-      Toast.Error(getLocale('OKR_MyO_Pop_Targetname'), { canClose: false });
+      Toast.Error(getLocale("OKR_MyO_Pop_Targetname"), { canClose: false });
       return;
     }
     if (okrName.length > 500) {
@@ -244,15 +242,14 @@ function CreateOkrModal(
       setKrIsValidate(true);
       return;
     }
-    const orkNameLengthValidate =
-      krDatas.filter((kr) => kr.mileStoneName.trim().length > 500).length == 0;
+    const orkNameLengthValidate = krDatas.filter((kr) => kr.mileStoneName.trim().length > 500).length == 0;
     if (!orkNameLengthValidate) {
       Toast.Error("关键成果不能超过500字", { canClose: false });
       return;
     }
     setKrIsValidate(false);
     if (!krWeightValid) {
-      Toast.Error(getLocale('OKR_MyO_Pop_Totalkrnot100'), { canClose: false });
+      Toast.Error(getLocale("OKR_MyO_Pop_Totalkrnot100"), { canClose: false });
       return;
     }
     if (!cycle) return;
@@ -285,32 +282,26 @@ function CreateOkrModal(
       // 带上超过创建okr人数的计算值
       const krNum = krDatas.length;
       let krTotalLength = 0;
-      krDatas &&
-        krDatas.forEach((kr) => {
+      krDatas
+        && krDatas.forEach((kr) => {
           // 计算平均长度要去掉百分号和数字
           krTotalLength += kr.mileStoneName.replace(/(%|\d)/g, "").length;
         });
-      const krAvarageLength =
-        krDatas.length > 0 ? krTotalLength / krDatas.length : 0;
-      const krMeasurableLength = krsCheckResult.friendlyResult.filter((kr) => {
-        return kr.hasNumWords === true;
-      }).length;
-      const oHasVtWords =
-        oNameCheckResult[0].result === EOkrCreateSuggestResultType.correct
-          ? true
-          : false;
+      const krAvarageLength = krDatas.length > 0 ? krTotalLength / krDatas.length : 0;
+      const krMeasurableLength = krsCheckResult.friendlyResult.filter((kr) => kr.hasNumWords === true).length;
+      const oHasVtWords = oNameCheckResult[0].result === EOkrCreateSuggestResultType.correct;
       const callData = data;
       callData.countSurpassPercentage = getCreateOkrSurpassPercent(
         okrName.replace(/(%|\d)/g, "").length,
         oHasVtWords,
         krNum,
         krMeasurableLength,
-        Number.parseInt(krAvarageLength.toString())
+        Number.parseInt(krAvarageLength.toString()),
       );
       newOkrDataRef.current = callData;
       handleOnSuccess();
     } else {
-      let workId = data.workId;
+      const { workId } = data;
       drawerManager.open("okrDetail", { okrId: workId });
     }
     setIsApplyTpl(false);
@@ -329,7 +320,7 @@ function CreateOkrModal(
         krWeight: RoundWeight(100 / subelements.length),
         mileStoneName: s.name,
         confidenceIndex: 5,
-      }))
+      })),
     );
     setIsCustomWeight(false);
     setIsApplyTpl(true);
@@ -352,7 +343,7 @@ function CreateOkrModal(
       setUser({ name: Name, id: Id, avatar: UserAvatar });
       setIsCustomWeight(false);
       setDept({ departmentId: 0, departmentName: "" });
-      setType({ typeName: getLocale('OKR_MyO_Pop_Individual'), typeId: 1 });
+      setType({ typeName: getLocale("OKR_MyO_Pop_Individual"), typeId: 1 });
       setCycle(cycle);
       setOkrClassify(undefined);
       setVisibility(1);
@@ -464,41 +455,36 @@ function CreateOkrModal(
     setONameIsInput(false);
   }, [krIsInput, krIsInput]);
 
-  const ModalTitle = useMemo(() => {
-    return (
-      <Line>
-        <span className="create-modal__title">{getLocale('OKR_MyO_Pop_Title_Newobjective')}</span>
-        <OKRCASE okrTemplateEnabled={true} onOkrApply={OnOkRApplyTplHandler} />
-      </Line>
-    );
-  }, []);
-
-  const krCheckFinalResult = useMemo(() => {
-    return getKrCheckTarget().map((item, index) => {
-      if (index === 0) {
-        return {
-          text: item,
-          result:
+  const ModalTitle = useMemo(() => (
+    <Line>
+      <span className="create-modal__title">{getLocale("OKR_MyO_Pop_Title_Newobjective")}</span>
+      <OKRCASE okrTemplateEnabled onOkrApply={OnOkRApplyTplHandler} />
+    </Line>
+  ), []);
+
+  const krCheckFinalResult = useMemo(() => getKrCheckTarget().map((item, index) => {
+    if (index === 0) {
+      return {
+        text: item,
+        result:
             krDatas.length > 0
               ? EOkrCreateSuggestResultType.correct
               : EOkrCreateSuggestResultType.wrong,
-        };
-      } else if (index === 1) {
-        return {
-          text: item,
-          result:
+      };
+    } if (index === 1) {
+      return {
+        text: item,
+        result:
             krDatas.length <= 5
               ? EOkrCreateSuggestResultType.correct
               : EOkrCreateSuggestResultType.wrong,
-        };
-      } else {
-        return {
-          text: item,
-          result: krsCheckResult.finalResult,
-        };
-      }
-    });
-  }, [krDatas, krsCheckResult.finalResult]);
+      };
+    }
+    return {
+      text: item,
+      result: krsCheckResult.finalResult,
+    };
+  }), [krDatas, krsCheckResult.finalResult]);
 
   const handleCloseShowSuccessInfo = useCallback((dontShowValue) => {
     if (dontShowValue) {
@@ -518,30 +504,30 @@ function CreateOkrModal(
   }, []);
 
   useEffect(() => {
-    if(!isVisible) return;
+    if (!isVisible) return;
     // @ts-ignore
     getImageBase64ByUrl(user.id)
       .then((data) => {
-        console.log(data)
+        console.log(data);
         setUserAvatarBase64Url(data.Data.obj);
       })
       .catch((err) => {
         Toast.Error(err);
       });
-  }, [user,isVisible]);
-  
+  }, [user, isVisible]);
+
   const trackAction = () => {
     // @ts-ignore
-    window.titaTracker && window.titaTracker('action').record({
-        actionName: '点击【教你写OKR】',
-        actionGroup: getLocale('OKR_MyO_Collr_Butt_CreatOKR'),
-        productName: getLocale('Menu_Title_OKRs')
-      })
-  }
+    window.titaTracker && window.titaTracker("action").record({
+      actionName: "点击【教你写OKR】",
+      actionGroup: getLocale("OKR_MyO_Collr_Butt_CreatOKR"),
+      productName: getLocale("Menu_Title_OKRs"),
+    });
+  };
 
   const renderFooterTeachWriteOKr = useMemo(() => {
     {
-      /*钉钉用  https://wiki.tita.com/pages/viewpage.action?pageId=15696093 */
+      /* 钉钉用  https://wiki.tita.com/pages/viewpage.action?pageId=15696093 */
     }
     return (
       <a
@@ -553,9 +539,10 @@ function CreateOkrModal(
         }
         target="_blank"
         onClick={trackAction}
+        rel="noreferrer"
       >
         <img className="teact-write-okr__icon" src={TeachOkr} />
-        <span className="teact-write-okr__text">{getLocale('OKR_MyO_Pop_TeachwriteOKR')}</span>
+        <span className="teact-write-okr__text">{getLocale("OKR_MyO_Pop_TeachwriteOKR")}</span>
       </a>
     );
   }, []);
@@ -568,7 +555,7 @@ function CreateOkrModal(
   }, []);
 
   return (
-    <Fragment>
+    <>
       <div>
         <Modal
           ref={modalRef}
@@ -576,15 +563,15 @@ function CreateOkrModal(
           mask
           centered
           onOk={onModalOkHandler}
-          okText={getLocale('OKR_MyO_Pop_Createnow')}
-          cancelText={getLocale('Mod_Cancel')}
+          okText={getLocale("OKR_MyO_Pop_Createnow")}
+          cancelText={getLocale("Mod_Cancel")}
           title={ModalTitle}
           visible={isVisible}
           onCancel={hideCreateOkrModal}
           maskClosable={false}
           footerLeftContent={renderFooterTeachWriteOKr}
           zIndex={1200}
-          bodyStyle={{flexBasis: 'auto'}}
+          bodyStyle={{ flexBasis: "auto" }}
         >
           <Wrapper ref={wrapperRef}>
             <FieldONewName
@@ -613,14 +600,14 @@ function CreateOkrModal(
             />
             <div className="create-modal__title-line">
               <BlueBar />
-              {getLocale('Per_Ass_New_Appr_detail_moreS')}
+              {getLocale("Per_Ass_New_Appr_detail_moreS")}
             </div>
-            <div className={`space-between-row`}>
+            <div className="space-between-row">
               <FieldOkrParent
                 parent={parent}
                 modalRef={modalRef}
                 setParent={setParent}
-                isCreateModal={true}
+                isCreateModal
               />
               <FieldDateCycle
                 cycle={cycle}
@@ -633,7 +620,7 @@ function CreateOkrModal(
             </div>
 
             <div
-              className={`space-between-row space-between-row--margin-bottom-4`}
+              className="space-between-row space-between-row--margin-bottom-4"
             >
               <FieldVisibility
                 visibility={visibility}
@@ -643,7 +630,7 @@ function CreateOkrModal(
                 isCreateModal
               />
               {openOkrType && <Space />}
-              <div className={`space-between-row okr-type-classify`}>
+              <div className="space-between-row okr-type-classify">
                 {openOkrType && (
                   <FieldOkrType
                     dept={dept}
@@ -710,20 +697,20 @@ function CreateOkrModal(
           />
         </CreateSuccessCmpWrapper>
       ) : null}
-      {/* 如果 isVisible 是 hidden，则因为无法获取到样式截取不到图片导致下载下来白图*/}
+      {/* 如果 isVisible 是 hidden，则因为无法获取到样式截取不到图片导致下载下来白图 */}
       {!isApplyTpl && !isHiddenCreatedCard && showCreatedSuccessInfo ? (
         <div className="download-dom--hidden">
           <CreateSuccessCmp
             tipIndex={tipIndex}
             createdSuccessInfo={createdSuccessInfo}
-            isDownload={true}
+            isDownload
             onCloseModel={handleCloseShowSuccessInfo}
             onShowDetail={handleCloseAndShowDetail}
             downLoadRef={downloadDomRef}
           />
         </div>
       ) : null}
-    </Fragment>
+    </>
   );
 }
 

package/src/components/create-okr-modal/kr-items/kr-item-weight.tsx

@@ -18,21 +18,19 @@ interface Props {
   changeKr: Function;
 }
 
-const ErrorContent: FC<{ hasErr: boolean }> = ({ hasErr }) => {
-  return (
-    <Fragment>
-      {hasErr ? (
-        <span className={"kr-weight__error-popup-text-wrapper"}>
-          {getLocale('OKR_MyO_KRP_Please0and100')}
-        </span>
-      ) : null}
-    </Fragment>
-  );
-};
+const ErrorContent: FC<{ hasErr: boolean }> = ({ hasErr }) => (
+  <>
+    {hasErr ? (
+      <span className="kr-weight__error-popup-text-wrapper">
+        {getLocale("OKR_MyO_KRP_Please0and100")}
+      </span>
+    ) : null}
+  </>
+);
 
 function KrItem({ krData, changeKr }: Props): ReactElement {
   const [weightEditing, setWeightEditing] = useState(false);
-  const [editedWeight, setEditedWeight] = useState(krData.krWeight + "");
+  const [editedWeight, setEditedWeight] = useState(`${krData.krWeight}`);
   const [hasErr, setHasErr] = useState(false);
   const [weightClass, setWeightClass] = useState("");
   const weightRef = useRef<HTMLInputElement>() as React.RefObject<
@@ -41,13 +39,13 @@ function KrItem({ krData, changeKr }: Props): ReactElement {
 
   // 为了解决 react diff 对象没变值变了导致组件不重新渲染的问题
   useEffect(() => {
-    setEditedWeight(krData.krWeight + "");
+    setEditedWeight(`${krData.krWeight}`);
   }, [krData.krWeight]);
 
   const onWeightClickHandler = () => {
     setWeightClass("");
     if (!weightEditing) {
-      setEditedWeight(krData.krWeight + "");
+      setEditedWeight(`${krData.krWeight}`);
       setWeightEditing(true);
       if (!hasErr) {
         setWeightClass("kr-item-weight--focus");
@@ -124,11 +122,11 @@ function KrItem({ krData, changeKr }: Props): ReactElement {
     // @ts-ignore
     <Popup
       popup={<ErrorContent hasErr={hasErr && weightEditing} />}
-      popupVisible={true}
-      popupPlacement={"top"}
-      forceRender={true}
+      popupVisible
+      popupPlacement="top"
+      forceRender
       action={["focus"]}
-      destroyPopupOnHide={true}
+      destroyPopupOnHide
     >
       <div
         className={`kr-item-weight ${weightClass}`}
@@ -136,7 +134,7 @@ function KrItem({ krData, changeKr }: Props): ReactElement {
         onMouseEnter={handleMouseEnter}
         onClick={onWeightClickHandler}
       >
-        <img className="kr-item-weight__icon" src={Weight} alt={getLocale('Per_details_Weights')} />
+        <img className="kr-item-weight__icon" src={Weight} alt={getLocale("Per_details_Weights")} />
         {weightEditing ? (
           <input
             className="kr-item-weight__input"

package/src/components/create-okr-modal/kr-items/krDatas.tsx

@@ -31,7 +31,7 @@ interface Props {
 }
 
 function KrDatas(props: Props): ReactElement {
-  let {
+  const {
     krs,
     isCustomWeight,
     wrapperRef,
@@ -49,7 +49,7 @@ function KrDatas(props: Props): ReactElement {
 
   const [inputKrInfo, setInputKrInfo] = useState<any>();
   const [krsCheckFriendlyResult, setKrsCheckFriendlyResult] = useState<any[]>(
-    []
+    [],
   ); // 存储每条kr的校验结果，用了统计最后的校验结果
 
   const timerRef = useRef<any>();
@@ -112,15 +112,13 @@ function KrDatas(props: Props): ReactElement {
     krCheckId++;
     const tempCheckId = krCheckId;
     getKrAnalysisInfos({ text: inputKrInfo.mileStoneName })
-      //@ts-ignore
+      // @ts-ignore
       .then((data: { hasVtWords: string; hasNumWords: string }) => {
         if (tempCheckId !== krCheckId) {
           return;
         }
         const tempKrCheckResult = [...krsCheckFriendlyResult];
-        const targetKrIndex = tempKrCheckResult.findIndex((kr) => {
-          return kr.uuid === inputKrInfo.uuid;
-        });
+        const targetKrIndex = tempKrCheckResult.findIndex((kr) => kr.uuid === inputKrInfo.uuid);
         if (targetKrIndex !== -1) {
           tempKrCheckResult.splice(targetKrIndex, 1, {
             uuid: inputKrInfo.uuid,
@@ -201,9 +199,7 @@ function KrDatas(props: Props): ReactElement {
     }
     setKrDatas(newKrDatas);
     const tempKrCheckResult = [...krsCheckFriendlyResult];
-    const targetKrIndex = tempKrCheckResult.findIndex((kr) => {
-      return kr.uuid === inputKrInfo.uuid;
-    });
+    const targetKrIndex = tempKrCheckResult.findIndex((kr) => kr.uuid === inputKrInfo.uuid);
     if (targetKrIndex !== -1) {
       tempKrCheckResult.splice(targetKrIndex, 1);
     }
@@ -239,10 +235,15 @@ function KrDatas(props: Props): ReactElement {
       <div className="krs-info">
         <a className="add-kr-btn" onClick={addKr}>
           <img className="add-kr-btn__icon" src={KrAdd} />
-          {getLocale('OKR_MyO_Pop_Butt_AddKR')}
+          {getLocale("OKR_MyO_Pop_Butt_AddKR")}
         </a>
         {krs.length > 0 && openKrWeight && (
-          <span className="krs-info__total-weight">{getLocale('OKR_MyO_Pop_Text_Total')}：{total}%</span>
+          <span className="krs-info__total-weight">
+            {getLocale("OKR_MyO_Pop_Text_Total")}
+            ：
+            {total}
+            %
+          </span>
         )}
       </div>
     </div>

package/src/components/create-okr-modal/kr-items/krItem.tsx

@@ -77,14 +77,12 @@ function KrItem({
     deleteKr(krData.uuid);
   };
 
-  const formatUser = useMemo(() => {
-    return {
-      Medium: krData.userAvatar.Medium,
-      Color: krData.userAvatar.Color,
-      Name: krData.principalName,
-      Id: krData.principalId,
-    };
-  }, [
+  const formatUser = useMemo(() => ({
+    Medium: krData.userAvatar.Medium,
+    Color: krData.userAvatar.Color,
+    Name: krData.principalName,
+    Id: krData.principalId,
+  }), [
     krData.userAvatar.Medium,
     krData.principalName,
     krData.principalName,
@@ -140,7 +138,7 @@ function KrItem({
           showDelIcon ? "kr-item__delete-icon--show" : ""
         }`}
         onClick={onDeleteKrClickHandler}
-      ></a>
+      />
       <div
         className={`kr-item__right-block ${
           krIsValidate
@@ -150,17 +148,20 @@ function KrItem({
             : ""
         }`}
       >
-        <span className="kr-item__order">KR{index}</span>
+        <span className="kr-item__order">
+          KR
+          {index}
+        </span>
         <div className="kr-item__input-wrapper">
           <InputWithErrPopup
             strLength={krData.mileStoneName ? krData.mileStoneName.length : 0}
             maxLength={500}
-            position={"top"}
+            position="top"
           >
             <input
               className="kr-item__input"
               type="text"
-              placeholder={getLocale('OKR_MyO_Pop_Keyresults')}
+              placeholder={getLocale("OKR_MyO_Pop_Keyresults")}
               value={krData.mileStoneName}
               onChange={onKrNameInputChangeHandler}
               onFocus={handleInputFocus}
@@ -170,8 +171,8 @@ function KrItem({
               ref={domRef}
             />
           </InputWithErrPopup>
-          <div className="kr-item-right-block__white-block"></div>
-          <div className="kr-item-right-block__text-mask"></div>
+          <div className="kr-item-right-block__white-block" />
+          <div className="kr-item-right-block__text-mask" />
         </div>
         {openKrWeight && <KrItemWeight krData={krData} changeKr={changeKr} />}
         <NewUserSelector