@titaui/pc 1.9.45 → 1.9.49

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

@@ -1,4 +1,6 @@
-import React, { FC, useState, useEffect, useRef, useCallback } from "react";
+import React, {
+  FC, useState, useEffect, useRef, useCallback,
+} from "react";
 import { inputWordTrans } from "../../../../utils/i18n-front-translate";
 import { getLocale } from "../../../../utils/getLocale";
 import "./index.scss";
@@ -53,7 +55,7 @@ const ODesc: FC<IODescProps> = ({
       setIsFocus(true);
       textareaRef.current.focus();
     },
-    [canEdit]
+    [canEdit],
   );
 
   const handleEnsureDesc = useCallback(
@@ -66,7 +68,7 @@ const ODesc: FC<IODescProps> = ({
       if (originalDesc === desc) return;
       onChangeDesc && onChangeDesc(desc);
     },
-    [originalDesc, desc, onChangeDesc, hasError]
+    [originalDesc, desc, onChangeDesc, hasError],
   );
 
   useEffect(() => {
@@ -91,7 +93,7 @@ const ODesc: FC<IODescProps> = ({
   };
 
   const renderError = () => {
-    if (!hasError) return <span></span>;
+    if (!hasError) return <span />;
     return (
       <span className="o-desc__errror-tips">
         {inputWordTrans(desc.trim().length, maxLength)}
@@ -103,7 +105,7 @@ const ODesc: FC<IODescProps> = ({
     <>
       {canEdit || desc ? (
         <div className="base-info-o-desc-wrapper">
-          <div className="o-desc__title">{getLocale('OKR_MyO_Es_Targetdescri')}</div>
+          <div className="o-desc__title">{getLocale("OKR_MyO_Es_Targetdescri")}</div>
           {!isAddDesc ? (
             <div
               className={`o-desc__text-area-box 
@@ -121,7 +123,7 @@ const ODesc: FC<IODescProps> = ({
                 ref={textRef}
               >
                 {!desc ? (
-                  <span className="o-desc__add-desc">{getLocale('OKR_MyO_Es_AddOdescription')}</span>
+                  <span className="o-desc__add-desc">{getLocale("OKR_MyO_Es_AddOdescription")}</span>
                 ) : (
                   desc
                 )}
@@ -137,13 +139,13 @@ const ODesc: FC<IODescProps> = ({
             >
               {isShowMore ? (
                 <span className="o-desc__show-more--up">
-                  {getLocale('Mod_Fold')}
-                  <span className="o-desc-arrow-icon tu-icon-arrow-up"></span>
+                  {getLocale("Mod_Fold")}
+                  <span className="o-desc-arrow-icon tu-icon-arrow-up" />
                 </span>
               ) : (
                 <span className="o-desc__show-more--down">
                   查看全部
-                  <span className="o-desc-arrow-icon tu-icon-arrow-down"></span>
+                  <span className="o-desc-arrow-icon tu-icon-arrow-down" />
                 </span>
               )}
             </div>
@@ -157,8 +159,8 @@ const ODesc: FC<IODescProps> = ({
               value={desc}
               onChange={handleTextareaChange}
               onFocus={handleODescWrapperFocus}
-              placeholder={getLocale('OKR_MyO_Es_AddOdescription')}
-            ></textarea>
+              placeholder={getLocale("OKR_MyO_Es_AddOdescription")}
+            />
           )}
           {isFocus && canEdit ? (
             <div className="o-desc__add-bottom">
@@ -168,13 +170,13 @@ const ODesc: FC<IODescProps> = ({
                   className="o-desc__btn o-desc__btn--cancel"
                   onClick={handleCancelInputDesc}
                 >
-                  {getLocale('Mod_Cancel')}
+                  {getLocale("Mod_Cancel")}
                 </div>
                 <div
                   className="o-desc__btn o-desc__btn--ensure"
                   onClick={handleEnsureDesc}
                 >
-                  {getLocale('OKR_MyO_Butt_Determine')}
+                  {getLocale("OKR_MyO_Butt_Determine")}
                 </div>
               </div>
             </div>

package/src/components/okr-detail/base-info/other-infos/classify/index.tsx

@@ -1,15 +1,15 @@
 import React, { FC, useCallback } from "react";
-import SelectLayer from '../../../../select-layer';
-import PromiseSvg from '../../img/promise.svg';
-import DesireSvg from '../../img/desire.svg';
+import SelectLayer from "../../../../select-layer";
+import PromiseSvg from "../../img/promise.svg";
+import DesireSvg from "../../img/desire.svg";
 import { getLocale } from "../../../../../utils/getLocale";
 
-import './index.scss';
+import "./index.scss";
 
 const getOkrClassifyList = () => [
-  { label: getLocale('OKR_MyO_Es_Commitment'), value: 1 },
-  { label: getLocale('OKR_MyO_Es_Visiontype'), value: 2 }
-]
+  { label: getLocale("OKR_MyO_Es_Commitment"), value: 1 },
+  { label: getLocale("OKR_MyO_Es_Visiontype"), value: 2 },
+];
 
 interface IClassifyProps {
   initValue?: number;
@@ -19,28 +19,27 @@ interface IClassifyProps {
 
 const IconMap = {
   1: <img src={PromiseSvg} />,
-  2: <img src={DesireSvg} />
-}
+  2: <img src={DesireSvg} />,
+};
 
 const Classify: FC<IClassifyProps> = ({ initValue, onChangeClassify, canEdit = false }) => {
-
   const handleSelectOkrClassify = useCallback((item) => {
-    onChangeClassify && onChangeClassify(item.value)
-  }, [onChangeClassify])
+    onChangeClassify && onChangeClassify(item.value);
+  }, [onChangeClassify]);
 
   return (
-    <div className='base-info-other-infos__classify'>
+    <div className="base-info-other-infos__classify">
       <div className="base-info-other-infos__classify-title">
-        {getLocale('OKR_MyO_Es_Category')}
+        {getLocale("OKR_MyO_Es_Category")}
       </div>
       <div>
         <SelectLayer
           canEdit={canEdit}
-          renderSuffixIconClass='base-info-other-infos__classify-icon'
+          renderSuffixIconClass="base-info-other-infos__classify-icon"
           renderSuffixIcon={IconMap}
           items={getOkrClassifyList()}
           initValue={initValue}
-          initText={getLocale('OKR_MyO_E_Temporarilynone')}
+          initText={getLocale("OKR_MyO_E_Temporarilynone")}
           onChangeSelect={handleSelectOkrClassify}
         />
       </div>

package/src/components/okr-detail/base-info/other-infos/common/border-wrapper/index.tsx

@@ -1,33 +1,33 @@
-import React, { useCallback, useState, forwardRef, useImperativeHandle } from "react";
-import './index.scss';
+import React, {
+  useCallback, useState, forwardRef, useImperativeHandle,
+} from "react";
+import "./index.scss";
 
 const BorderWrapper = forwardRef(({ children }, ref) => {
-
   const [isFocus, setIsFocus] = useState(false);
 
   const handleBorderWrapperFocus = useCallback(() => {
     setIsFocus(true);
-  }, [])
+  }, []);
 
   const handleBorderWrapperBlur = useCallback(() => {
     setIsFocus(false);
-  }, [])
+  }, []);
 
   const changeFocusState = useCallback((state) => {
-    setIsFocus(state)
-  }, [])
+    setIsFocus(state);
+  }, []);
 
-  useImperativeHandle(ref, () => {
-    return {
-      changeFocusState
-    }
-  })
+  useImperativeHandle(ref, () => ({
+    changeFocusState,
+  }));
 
   return (
-    <button 
+    <button
       onFocus={handleBorderWrapperFocus}
       onBlur={handleBorderWrapperBlur}
-      className={`tataui-base-info-border-wrapper ${isFocus ? 'tataui-base-info-border-wrapper--focus' : ''}`}>
+      className={`tataui-base-info-border-wrapper ${isFocus ? "tataui-base-info-border-wrapper--focus" : ""}`}
+    >
       {children}
     </button>
   );

package/src/components/okr-detail/base-info/other-infos/date-cycle/index.tsx

@@ -1,8 +1,8 @@
-import React, { FC, useState, useCallback } from 'react';
-import OkrPeriodSelector from '../../../../okr-period-selector';
-import { SelectCycleData } from '../../../../okr-period-selector/select-cycle';
-import { getLocale } from '../../../../../utils/getLocale';
-import './index.scss';
+import React, { FC, useState, useCallback } from "react";
+import OkrPeriodSelector from "../../../../okr-period-selector";
+import { SelectCycleData } from "../../../../okr-period-selector/select-cycle";
+import { getLocale } from "../../../../../utils/getLocale";
+import "./index.scss";
 
 interface IDateCycleProps {
   cycle: SelectCycleData | undefined;
@@ -11,29 +11,37 @@ interface IDateCycleProps {
   canEdit?: boolean;
 }
 
-const DateCycle: FC<IDateCycleProps> = ({cycle, setCycle, okrId, canEdit = false}) => {
-
+const DateCycle: FC<IDateCycleProps> = ({
+  cycle, setCycle, okrId, canEdit = false,
+}) => {
   const [isFocus, setIsFocus] = useState(false);
   const handleButtonFocus = useCallback(() => {
     canEdit && setIsFocus(true);
-  }, [canEdit])
+  }, [canEdit]);
 
   const handleButtonBlur = useCallback(() => {
     setIsFocus(false);
-  }, [])
+  }, []);
 
-  const renderClickArea = ({btnRef, clickCallback, text}) => {
-    return <button onFocus={handleButtonFocus} onBlur={handleButtonBlur} className={`base-info-date-cycle__button ${isFocus ? 'base-info-date-cycle__button--focus' : ''} ${!canEdit && 'base-info-date-cycle__button--disable'}`} ref={btnRef} onClick={clickCallback as any}>
-      <span className='base-info-date-cycle__format-text'>{text.split(',')[0]}<span className='base-info-date-cycle__format-text-range'>（{text.split(',')[1]}）</span></span>
+  const renderClickArea = ({ btnRef, clickCallback, text }) => (
+    <button onFocus={handleButtonFocus} onBlur={handleButtonBlur} className={`base-info-date-cycle__button ${isFocus ? "base-info-date-cycle__button--focus" : ""} ${!canEdit && "base-info-date-cycle__button--disable"}`} ref={btnRef} onClick={clickCallback as any}>
+      <span className="base-info-date-cycle__format-text">
+        {text.split(",")[0]}
+        <span className="base-info-date-cycle__format-text-range">
+          （
+          {text.split(",")[1]}
+          ）
+        </span>
+      </span>
     </button>
-  }
+  );
 
   return (
-    <div className='base-info-cycle-wrapper'>
-      <div className='base-info-cycle-title'>{getLocale('Mod_period')}</div>
-      <OkrPeriodSelector renderInnerContent={renderClickArea} cycle={cycle} setCycle={setCycle} okrId={okrId} canEdit={canEdit} getCycleRange={true}/>
+    <div className="base-info-cycle-wrapper">
+      <div className="base-info-cycle-title">{getLocale("Mod_period")}</div>
+      <OkrPeriodSelector renderInnerContent={renderClickArea} cycle={cycle} setCycle={setCycle} okrId={okrId} canEdit={canEdit} getCycleRange />
     </div>
-  )
-}
+  );
+};
 
-export default DateCycle;
+export default DateCycle;

package/src/components/okr-detail/base-info/other-infos/index.tsx

@@ -1,3 +1,3 @@
-import OtherInfos from './other-infos';
+import OtherInfos from "./other-infos";
 
-export default OtherInfos;
+export default OtherInfos;

package/src/components/okr-detail/base-info/other-infos/okr-type/index.tsx

@@ -1,4 +1,6 @@
-import React, { FC, useState, useCallback, useContext } from "react";
+import React, {
+  FC, useState, useCallback, useContext,
+} from "react";
 import { OpenDepartmentName } from "../../../../../utils/open-data";
 import BaseOkrType from "../../../components/base-okr-type";
 import { getLocale } from "../../../../../utils/getLocale";
@@ -24,13 +26,13 @@ const OkrType: FC<IOkrTypeProps> = ({ okrId, canEdit = false }) => {
   const [isFocus, setIsFocus] = useState(false);
 
   const okrTypeMap = {
-    1: { icon: "tu-icon-liebiao-geren", text: getLocale('OKR_MyO_Pop_Individual') }, // 个人
+    1: { icon: "tu-icon-liebiao-geren", text: getLocale("OKR_MyO_Pop_Individual") }, // 个人
     2: {
       icon: "tu-icon-liebiao-xiashu",
-      text: departmentId == -1 ? '默认部门' : <OpenDepartmentName id={departmentId} name={departmentName} />,
+      text: departmentId == -1 ? "默认部门" : <OpenDepartmentName id={departmentId} name={departmentName} />,
     }, // 部门
-    3: { icon: "tu-icon-gong_si", text: getLocale('OKR_MyO_Pop_Company') }, // 公司
-    4: { icon: "tu-icon-liebiao-tuandui", text: groupName || getLocale('OKR_MyO_Text_Team') }, // 团队
+    3: { icon: "tu-icon-gong_si", text: getLocale("OKR_MyO_Pop_Company") }, // 公司
+    4: { icon: "tu-icon-liebiao-tuandui", text: groupName || getLocale("OKR_MyO_Text_Team") }, // 团队
   };
 
   const handleButtonFocus = useCallback(() => {
@@ -41,26 +43,24 @@ const OkrType: FC<IOkrTypeProps> = ({ okrId, canEdit = false }) => {
     setIsFocus(false);
   }, []);
 
-  const renderInnerContent = () => {
-    return (
-      <button
-        onFocus={handleButtonFocus}
-        onBlur={handleButtonBlur}
-        className={`base-info-type__button ${
-          isFocus ? "base-info-type__button--focus" : ""
-        } ${!canEdit && "base-info-type__button--disable"}`}
-      >
-        <span className="base-info-type__format-text">
-          <i className={`${okrTypeMap[okrType].icon} base-info-type__format-text-icon`}></i>
-          {okrTypeMap[okrType].text}
-        </span>
-      </button>
-    );
-  };
+  const renderInnerContent = () => (
+    <button
+      onFocus={handleButtonFocus}
+      onBlur={handleButtonBlur}
+      className={`base-info-type__button ${
+        isFocus ? "base-info-type__button--focus" : ""
+      } ${!canEdit && "base-info-type__button--disable"}`}
+    >
+      <span className="base-info-type__format-text">
+        <i className={`${okrTypeMap[okrType].icon} base-info-type__format-text-icon`} />
+        {okrTypeMap[okrType].text}
+      </span>
+    </button>
+  );
 
   return (
     <div className="base-info-type-wrapper">
-      <div className="base-info-type-title">{getLocale('Mod_Type')}</div>
+      <div className="base-info-type-title">{getLocale("Mod_Type")}</div>
       {canEdit ? (
         <BaseOkrType
           renderInnerContent={renderInnerContent}

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

@@ -32,7 +32,7 @@ const OtherInfos: FC<IOtherInfosProps> = ({
   canEdit = false,
 }) => {
   const setting = getOkrAdvancedSetting();
-  const {generalCycle, setGeneralCycle} = useContext(GeneralDataContext);
+  const { generalCycle, setGeneralCycle } = useContext(GeneralDataContext);
 
   const handleChangeUser = (data) => {
     setPrincipalUser({

package/src/components/okr-detail/base-info/other-infos/principal/index.tsx

@@ -1,12 +1,12 @@
 import React, { FC, useRef, useState } from "react";
 // @ts-ignore
-import Toast from '../../../../toast';
-import Avatar from '../../../../avatar';
-import BorderWrapper from '../common/border-wrapper';
+import Toast from "../../../../toast";
+import Avatar from "../../../../avatar";
+import BorderWrapper from "../common/border-wrapper";
 import UserSelector from "../../../../user-selector/index";
-import PopConfirm from '../../../../../components-v1/popConfirm';
+import PopConfirm from "../../../../../components-v1/popConfirm";
 import { getLocale } from "../../../../../utils/getLocale";
-import './index.scss';
+import "./index.scss";
 
 interface IPrincipalProps {
   user: any;
@@ -14,28 +14,27 @@ interface IPrincipalProps {
   canEdit?: boolean;
 }
 
-const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) => {
-
+const Principal: FC<IPrincipalProps> = ({ user, onChangeUser, canEdit = false }) => {
   const selectorRef = useRef();
   const borderWrapper = useRef();
   const popConfirmRef = useRef();
-  const selectUserRef = useRef(document.createElement('div'));
+  const selectUserRef = useRef(document.createElement("div"));
   const [selectUser, setSelectUser] = useState(user);
 
   const handleSelected = ([user]) => {
     if (user.nodeType !== "person") {
-      Toast.Error(`请选择具体负责人`)
+      Toast.Error("请选择具体负责人");
       return;
     }
     setSelectUser(user.data);
     // @ts-ignore
     popConfirmRef.current && popConfirmRef.current.getRef().show(selectUserRef.current);
   };
-  
+
   const cancelHandler = () => {
-    //@ts-ignore
+    // @ts-ignore
     popConfirmRef.current && popConfirmRef.current.getRef().hide();
-  }
+  };
 
   const confirmHandler = async () => {
     onChangeUser && onChangeUser(selectUser);
@@ -43,13 +42,13 @@ const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) =
     selectorRef.current && selectorRef.current.close();
     // @ts-ignore
     borderWrapper.current.changeFocusState(false);
-    //@ts-ignore
+    // @ts-ignore
     popConfirmRef.current && popConfirmRef.current.getRef().hide();
   };
 
   return (
     <div className="base-info-other-infos__principal">
-      <div className="base-info-other-infos__principal-title">{getLocale('Mod_Owner')}</div>
+      <div className="base-info-other-infos__principal-title">{getLocale("Mod_Owner")}</div>
       <div
         className="base-info-other-infos__principal-user"
         ref={selectUserRef}
@@ -59,7 +58,7 @@ const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) =
             ref={popConfirmRef}
             showArrow={false}
             style={{ width: 300 }}
-            title={getLocale('OKR_MyO_Err_Transfer')}
+            title={getLocale("OKR_MyO_Err_Transfer")}
             onCancel={cancelHandler}
             onConfirm={confirmHandler}
           >
@@ -72,7 +71,7 @@ const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) =
                 position="centerRight"
                 selectNodes={4}
                 onSelect={handleSelected}
-                disabledDepartSelect={true}
+                disabledDepartSelect
                 panes={{ depart: true }}
                 searchedPanes={{ user: true }}
                 popupAlign={{
@@ -81,14 +80,14 @@ const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) =
                   targetOffset: [12, 209],
                 }}
                 trigger={
-                  <div className="base-info-other-infos__principal-trigger-content"></div>
+                  <div className="base-info-other-infos__principal-trigger-content" />
                 }
               />
               <Avatar.Name
                 showNameTips
                 textWidth={317}
                 size={{ width: 24, textNum: 1, fontSize: 14 }}
-                textClass={'base-info-other-infos__principal-text'}
+                textClass="base-info-other-infos__principal-text"
                 name={user.name}
                 src={user.avatar.src || user.avatar.medium}
                 color={user.avatar.color}
@@ -102,7 +101,7 @@ const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) =
               showNameTips
               textWidth={317}
               size={{ width: 24, textNum: 1, fontSize: 14 }}
-              textClass={'base-info-other-infos__principal-text'}
+              textClass="base-info-other-infos__principal-text"
               name={user.name}
               src={user.avatar.src || user.avatar.medium}
               color={user.avatar.color}

package/src/components/okr-detail/base-info/other-infos/visibility/index.tsx

@@ -1,24 +1,26 @@
-import React, { FC, useRef, useMemo, useCallback, useState, useEffect } from "react";
+import React, {
+  FC, useRef, useMemo, useCallback, useState, useEffect,
+} from "react";
 import UserSelector from "../../../../user-selector/index";
-import SelectLayer from '../../../../select-layer';
-import './index.scss';
+import SelectLayer from "../../../../select-layer";
+import "./index.scss";
 import Tooltip from "../../../../tooltip";
 import { OpenDepartmentName, OpenUserName } from "../../../../../utils/open-data";
 import { getLocale } from "../../../../../utils/getLocale";
 
 const visibilityList = [
-  { value: 1, label: getLocale('OKR_MyO_Pop_Public') },
-  { value: 2, label: getLocale('OKR_MyO_From_Associatedmem') },
-  { value: 3, label: getLocale('OKR_MyO_Pop_Directrep') },
-  { value: 4, label: getLocale('OKR_MyO_Pop_Specified') },
+  { value: 1, label: getLocale("OKR_MyO_Pop_Public") },
+  { value: 2, label: getLocale("OKR_MyO_From_Associatedmem") },
+  { value: 3, label: getLocale("OKR_MyO_Pop_Directrep") },
+  { value: 4, label: getLocale("OKR_MyO_Pop_Specified") },
 ];
 
 const visibilityMapText = {
-  1: getLocale('OKR_MyO_Pop_Public'),
-  2: getLocale('OKR_MyO_From_Associatedmem'),
-  3: getLocale('OKR_MyO_Pop_Directrep'),
-  4: getLocale('OKR_MyO_Pop_Specified')
-}
+  1: getLocale("OKR_MyO_Pop_Public"),
+  2: getLocale("OKR_MyO_From_Associatedmem"),
+  3: getLocale("OKR_MyO_Pop_Directrep"),
+  4: getLocale("OKR_MyO_Pop_Specified"),
+};
 
 interface IVisibilityProps {
   visibility: any;
@@ -27,13 +29,15 @@ interface IVisibilityProps {
   canEdit?: boolean;
 }
 
-const Visibility: FC<IVisibilityProps> = ({visibility, visiableLimit, onChangeVisiableLimit, canEdit = false}) => {
+const Visibility: FC<IVisibilityProps> = ({
+  visibility, visiableLimit, onChangeVisiableLimit, canEdit = false,
+}) => {
   const [visibilityState, setVisibilityState] = useState(visibility);
   const oldSelect = useRef();
   const selectorRef = useRef();
-  const titleRef = useRef(document.createElement('div'));
+  const titleRef = useRef(document.createElement("div"));
 
-  const onOk = useCallback(selectNodes => {
+  const onOk = useCallback((selectNodes) => {
     const { departments, groups, users } = selectNodes;
     if (departments.length === 0 && groups.length === 0 && users.length === 0) {
       setVisibilityState(oldSelect.current);
@@ -41,59 +45,58 @@ const Visibility: FC<IVisibilityProps> = ({visibility, visiableLimit, onChangeVi
       selectorRef.current && selectorRef.current.close();
       return;
     }
-    onChangeVisiableLimit && onChangeVisiableLimit(4, selectNodes)
+    onChangeVisiableLimit && onChangeVisiableLimit(4, selectNodes);
     // @ts-ignore
     selectorRef.current && selectorRef.current.close();
-  }, [onChangeVisiableLimit])
+  }, [onChangeVisiableLimit]);
 
   const handleChangeVisibility = useCallback((data) => {
     setVisibilityState(data.value);
-    if(data.value === 4) {
+    if (data.value === 4) {
       // @ts-ignore
-      selectorRef.current && selectorRef.current.open()
+      selectorRef.current && selectorRef.current.open();
     } else {
       oldSelect.current = data.value;
-      onChangeVisiableLimit && onChangeVisiableLimit(data.value)
+      onChangeVisiableLimit && onChangeVisiableLimit(data.value);
     }
-  }, [onChangeVisiableLimit])
+  }, [onChangeVisiableLimit]);
 
   const renderText = useMemo(() => {
-    let result = [];
+    const result = [];
     if (visiableLimit) {
       visiableLimit.users && visiableLimit.users.length > 0 && visiableLimit.users.forEach((item, index) => {
-        if(index !== 0) {result.push('、')}
-        result.push(<OpenUserName name={item.name} id={item.userId} />)
-      }
-      );
+        if (index !== 0) { result.push("、"); }
+        result.push(<OpenUserName name={item.name} id={item.userId} />);
+      });
       visiableLimit.departments && visiableLimit.departments.length > 0 ? visiableLimit.departments.forEach((item, index) => {
-        result.push(index === 0 && result.length === 0 ? '' : '、')
-        result.push(<OpenDepartmentName name={item.name} id={item.id} />)
-      }) : ''
+        result.push(index === 0 && result.length === 0 ? "" : "、");
+        result.push(<OpenDepartmentName name={item.name} id={item.id} />);
+      }) : "";
       visiableLimit.groups && visiableLimit.groups.length > 0 ? visiableLimit.groups.forEach((item, index) => {
-        result.push(index === 0 && result.length === 0 ? '' : '、')
+        result.push(index === 0 && result.length === 0 ? "" : "、");
         result.push(item.name);
-      }) : '' 
+      }) : "";
     }
     return result.length > 0 ? result : visibilityMapText[visibilityState];
-  }, [visiableLimit, visibilityState])
+  }, [visiableLimit, visibilityState]);
 
   useEffect(() => {
     setVisibilityState(visibility);
-  }, [visibility])
-  
+  }, [visibility]);
+
   return (
     <div className="base-info-other-infos__visibility-wrapper">
       <div className="base-info-other-infos__visibility-title" ref={titleRef}>
-        {getLocale('OKR_MyO_Pop_Title_Perm')}
+        {getLocale("OKR_MyO_Pop_Title_Perm")}
         <Tooltip
           overlay={
-            getLocale('OKR_MyO_Pop_Inadditiontot')
+            getLocale("OKR_MyO_Pop_Inadditiontot")
           }
           placement="top"
-          align={{offset: [0, 0]}}
+          align={{ offset: [0, 0] }}
         >
           <span
-            className={"tu-icon-question-mark"}
+            className="tu-icon-question-mark"
             style={{
               display: "inline-block",
               marginLeft: 8,
@@ -114,13 +117,14 @@ const Visibility: FC<IVisibilityProps> = ({visibility, visiableLimit, onChangeVi
         onChangeSelect={handleChangeVisibility}
       />
       {canEdit ? (
-        <UserSelector           ref={selectorRef}
+        <UserSelector
+          ref={selectorRef}
           // @ts-ignore
-          multiple={true}
+          multiple
           onOk={onOk}
           position="centerRight"
           selectNodes={visiableLimit || {}}
-          trigger={<div></div>}
+          trigger={<div />}
         />
       ) : null}
     </div>