@titaui/pc 1.9.48 → 1.9.49

package/src/components/create-okr-modal/constant.ts

@@ -1,27 +1,23 @@
 import { getLocale } from "../../utils/getLocale";
 
-export const getODesc = () => [getLocale('OKR_MyO_Pop_OVerbTodo')];
+export const getODesc = () => [getLocale("OKR_MyO_Pop_OVerbTodo")];
 export const getOExample = () => [
-  getLocale('OKR_MyO_Pop_Increaserene'),
+  getLocale("OKR_MyO_Pop_Increaserene"),
+];
+export const OCheckTarget = () => [
+  getLocale("OKR_MyO_Pop_Containingverbs"),
+  getLocale("OKR_MyO_Pop_Notrecommended"),
 ];
-export const OCheckTarget = () => {
-  return [
-    getLocale("OKR_MyO_Pop_Containingverbs"),
-    getLocale("OKR_MyO_Pop_Notrecommended"),
-  ]
-};
 
 export const getKrDesc = () => [
-  getLocale('OKR_MyO_Pop_KR1'),
-  getLocale('OKR_MyO_Pop_KR2'),
+  getLocale("OKR_MyO_Pop_KR1"),
+  getLocale("OKR_MyO_Pop_KR2"),
 ];
-export const KrExample = () => {
-  return [getLocale("OKR_MyO_Pop_70to90")]
-};
+export const KrExample = () => [getLocale("OKR_MyO_Pop_70to90")];
 export const getKrCheckTarget = () => [
-  getLocale('OKR_MyO_Pop_Onekey'),
-  getLocale('OKR_MyO_Pop_Nofivekey'),
-  getLocale('OKR_MyO_Pop_Keymeasured'),
+  getLocale("OKR_MyO_Pop_Onekey"),
+  getLocale("OKR_MyO_Pop_Nofivekey"),
+  getLocale("OKR_MyO_Pop_Keymeasured"),
 ];
 
 export const CreateSuccessTips = {

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

@@ -1,13 +1,15 @@
-import React, { ReactElement, useEffect, useRef, useState } from 'react';
-import { CreateCycleWrapper, DateLine, SelectBtn, TimeSapn } from './style';
+import React, {
+  ReactElement, useEffect, useRef, useState,
+} from "react";
+import {
+  CreateCycleWrapper, DateLine, SelectBtn, TimeSapn,
+} from "./style";
 import Pop from "../../components-v1/pop";
-import Button from "../period-selector/components/button"
-import PeriodSelector from "../period-selector"
+import Button from "../period-selector/components/button";
+import PeriodSelector from "../period-selector";
 import RangePickerPop from "../range-picker-pop";
-import {getCycleSetting} from './request-api';
-import { getLocale } from '../../utils/getLocale';
-
-
+import { getCycleSetting } from "./request-api";
+import { getLocale } from "../../utils/getLocale";
 
 export interface CreateCycleData {
   cycleType: string;
@@ -23,12 +25,11 @@ interface Props {
   onChange: (cycle: CreateCycleData) => any;
 }
 
-
 function CreateCycle({ cycle, container, onChange }: Props): ReactElement {
   const popRef = useRef<Pop>() as React.RefObject<Pop>;
   const btnRef = useRef<HTMLDivElement>() as React.RefObject<HTMLDivElement>;
   const [selfCycle, setSelfCycle] = useState(cycle || {});
-  const [cycleSetting,setCycleSetting] = useState<{
+  const [cycleSetting, setCycleSetting] = useState<{
     hasSetting: boolean;
     isOpenCustom: boolean;
     isOpenMonth: boolean;
@@ -37,50 +38,54 @@ function CreateCycle({ cycle, container, onChange }: Props): ReactElement {
     isOpenBimonthly: boolean;
     isOpenHalfYear: boolean;
     yearStartMonth: number;
-}>()
+}>();
 
   useEffect(() => {
     getCycleSetting().then(setCycleSetting);
-  },[])
+  }, []);
 
   const onSelectClickHandler = () => {
     setSelfCycle(cycle || {});
     popRef.current && popRef.current.show(btnRef.current);
-  }
+  };
 
-  const onPeriodSelectorChangeHandler = c => {
+  const onPeriodSelectorChangeHandler = (c) => {
     setSelfCycle({
       ...selfCycle,
       ...c,
-      ...PeriodSelector.getDateRangeByCycle(c as any,cycleSetting?.yearStartMonth)
+      ...PeriodSelector.getDateRangeByCycle(c as any, cycleSetting?.yearStartMonth),
     } as any);
-  }
+  };
 
-  const onStartDateConfirmHandler = d => {
+  const onStartDateConfirmHandler = (d) => {
     setSelfCycle({ ...selfCycle, ...d });
-  }
+  };
 
-  const onEndDateCOnfirmHandler = d => {
+  const onEndDateCOnfirmHandler = (d) => {
     setSelfCycle({ ...selfCycle, ...d });
-  }
+  };
 
   const onSureClickHandler = () => {
     onChange(selfCycle);
     popRef.current && popRef.current.hide();
-  }
+  };
 
   const onCancelClickHandler = () => {
-    popRef.current && popRef.current.hide()
+    popRef.current && popRef.current.hide();
+  };
+  if (!cycleSetting) {
+    return (
+      <SelectBtn>
+        <span>{PeriodSelector.formatPeriod(selfCycle)}</span>
+        <i className="tu-icon-sort-down" />
+      </SelectBtn>
+    );
   }
-  if(!cycleSetting) return <SelectBtn>
-  <span>{PeriodSelector.formatPeriod(selfCycle)}</span>
-  <i className='tu-icon-sort-down' />
-</SelectBtn>
   return (
     <>
       <SelectBtn ref={btnRef} onClick={onSelectClickHandler}>
         <span>{PeriodSelector.formatPeriod(cycle)}</span>
-        <i className='tu-icon-sort-down' />
+        <i className="tu-icon-sort-down" />
       </SelectBtn>
 
       <Pop ref={popRef} container={container}>
@@ -100,59 +105,65 @@ function CreateCycle({ cycle, container, onChange }: Props): ReactElement {
             showBimonthly={cycleSetting.isOpenBimonthly}
             showHalfYear={cycleSetting.isOpenHalfYear}
             startMonth={cycleSetting.yearStartMonth}
-            style={{width:'100%'}}
+            style={{ width: "100%" }}
             // wrapperStyle={{ 'width': 200, }}
           >
             <SelectBtn>
               <span>{PeriodSelector.formatPeriod(selfCycle)}</span>
-              <i className='tu-icon-sort-down' />
+              <i className="tu-icon-sort-down" />
             </SelectBtn>
           </PeriodSelector>
 
-          <DateLine style={{ borderBottom: '1px solid #F0F2F5' }}>
-            {getLocale('Mod_StartDate')}：
+          <DateLine style={{ borderBottom: "1px solid #F0F2F5" }}>
+            {getLocale("Mod_StartDate")}
+            ：
             <RangePickerPop
-              format='YYYY/MM/DD'
+              format="YYYY/MM/DD"
               controlled
               onConfirm={onStartDateConfirmHandler}
-              defaultRange={{ 'startDate': selfCycle.startDate, 'endDate': selfCycle.endDate }}
+              defaultRange={{ startDate: selfCycle.startDate, endDate: selfCycle.endDate }}
               container={container}
             >
               <TimeSapn>
                 {selfCycle.startDate}
-                <i className='tu-icon-arrow-down' />
+                <i className="tu-icon-arrow-down" />
               </TimeSapn>
             </RangePickerPop>
           </DateLine>
 
           <DateLine>
-            {getLocale('Mod_EndDate')}：
+            {getLocale("Mod_EndDate")}
+            ：
             <RangePickerPop
-              format='YYYY/MM/DD'
+              format="YYYY/MM/DD"
               controlled
               onConfirm={onEndDateCOnfirmHandler}
-              defaultRange={{ 'startDate': selfCycle.startDate, 'endDate': selfCycle.endDate }}
+              defaultRange={{ startDate: selfCycle.startDate, endDate: selfCycle.endDate }}
               container={container}
             >
               <TimeSapn>
                 {selfCycle.endDate}
-                <i className='tu-icon-arrow-down' />
+                <i className="tu-icon-arrow-down" />
               </TimeSapn>
             </RangePickerPop>
           </DateLine>
 
-          <div style={{ 'display': 'flex', 'justifyContent': 'flex-end' }}>
+          <div style={{ display: "flex", justifyContent: "flex-end" }}>
             <Button
-              size='s'
-              style={{ 'marginRight': 12 }}
+              size="s"
+              style={{ marginRight: 12 }}
               onClick={onCancelClickHandler}
-            >{getLocale('Mod_Cancel')}</Button>
+            >
+              {getLocale("Mod_Cancel")}
+            </Button>
 
             <Button
-              size='s'
-              type='primary'
+              size="s"
+              type="primary"
               onClick={onSureClickHandler}
-            >{getLocale('OKR_MyO_Butt_Determine')}</Button>
+            >
+              {getLocale("OKR_MyO_Butt_Determine")}
+            </Button>
           </div>
         </CreateCycleWrapper>
       </Pop>

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

@@ -1,5 +1,6 @@
 import React, { FC, useCallback, useState } from "react";
 import "./index.scss";
+import Html2Canvas from "html2canvas";
 import { CreateSuccessTips } from "./constant";
 import Shower from "./img/shower.png";
 import Light from "./img/light.svg";
@@ -10,7 +11,6 @@ import CreateSuccessWords from "./img/create-success-message.svg";
 import QRCode from "./img/qr-code.png";
 import CreateSuccessHeader from "./img/create-success-head.png";
 import CreateSuccessShadow from "./img/create-success-shadow.svg";
-import Html2Canvas from "html2canvas";
 import { getLocale } from "../../utils/getLocale";
 
 interface ICreateSuccessCmpProps {
@@ -46,45 +46,45 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
   };
 
   const handleDownloadPic = useCallback(() => {
-    let shareContent = downLoadRef.current, //需要截图的包裹的（原生的）DOM 对象
-      // @ts-ignore
-      width = shareContent.clientWidth, //获取dom 宽度
-      // @ts-ignore
-      height = shareContent.clientHeight, //获取dom 高度
-      canvas = document.createElement("canvas"), //创建一个canvas节点
-      scale = 2; //定义任意放大倍数 支持小数
-    canvas.width = width * scale; //定义canvas 宽度 * 缩放
-    canvas.height = height * scale; //定义canvas高度 *缩放
+    const shareContent = downLoadRef.current; // 需要截图的包裹的（原生的）DOM 对象
+    // @ts-ignore
+    const width = shareContent.clientWidth; // 获取dom 宽度
     // @ts-ignore
-    canvas.style.width = width + "px";
+    const height = shareContent.clientHeight; // 获取dom 高度
+    const canvas = document.createElement("canvas"); // 创建一个canvas节点
+    const scale = 2; // 定义任意放大倍数 支持小数
+    canvas.width = width * scale; // 定义canvas 宽度 * 缩放
+    canvas.height = height * scale; // 定义canvas高度 *缩放
     // @ts-ignore
-    canvas.style.height = height + "px";
+    canvas.style.width = `${width}px`;
     // @ts-ignore
-    let opts = {
+    canvas.style.height = `${height}px`;
+    // @ts-ignore
+    const opts = {
       backgroundColor: null, // 背景透明
-      scale: scale, // 添加的scale 参数
-      canvas: canvas, // 自定义 canvas
+      scale, // 添加的scale 参数
+      canvas, // 自定义 canvas
       logging: false, // 日志开关，便于查看html2canvas的内部执行流程
-      width: width, // dom 原始宽度
-      height: height,
+      width, // dom 原始宽度
+      height,
       useCORS: true, // 【重要】开启跨域配置
     };
 
     Html2Canvas(downLoadRef.current as any, opts).then((canvas) => {
-      let imgUrl = canvas.toDataURL("image/png"); //得到图片的base64编码数据
-      let image = new Image();
+      const imgUrl = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
+      const image = new Image();
       image.setAttribute("crossOrigin", "anonymous");
       image.onload = () => {
-        let a = document.createElement("a"); // 生成一个a元素
-        let event = new MouseEvent("click"); // 创建一个单击事件
-        a.download = getLocale('OKR_MyO_Share'); // 设置图片名称
+        const a = document.createElement("a"); // 生成一个a元素
+        const event = new MouseEvent("click"); // 创建一个单击事件
+        a.download = getLocale("OKR_MyO_Share"); // 设置图片名称
         a.href = imgUrl; // 将生成的URL设置为a.href属性
         a.dispatchEvent(event); // 触发a的单击事件
       };
       image.src = imgUrl;
     });
   }, []);
-// console.log(createdSuccessInfo)
+  // console.log(createdSuccessInfo)
   return (
     <div className="create-success-model">
       <div
@@ -95,7 +95,7 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
           <div
             className="tu-icon-cross2 create-success-model__close"
             onClick={handleCloseModel}
-          ></div>
+          />
         )}
         <div className="create-success-model__top-block">
           <img
@@ -128,8 +128,8 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
                 className="create-success-model__img"
                 src={`${
                   createdSuccessInfo.userAvatarBase64Url
-                    ? "data:image/png;base64," +
-                      createdSuccessInfo.userAvatarBase64Url
+                    ? `data:image/png;base64,${
+                      createdSuccessInfo.userAvatarBase64Url}`
                     : ""
                 }`}
               />
@@ -157,11 +157,14 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
             <img src={CreateSuccessRightQuotation} />
           </div>
           <div className="create-success-model__congratulation">
-            {getLocale('OKR_MyO_Pop_OKRscreated')}&nbsp;&nbsp;
+            {getLocale("OKR_MyO_Pop_OKRscreated")}
+&nbsp;&nbsp;
             <span className="create-success-model__percent">
-              {createdSuccessInfo.countSurpassPercentage}%
+              {createdSuccessInfo.countSurpassPercentage}
+              %
             </span>
-            &nbsp;&nbsp;{getLocale('OKR_MyO_Pop_ofpeople')}
+            &nbsp;&nbsp;
+            {getLocale("OKR_MyO_Pop_ofpeople")}
           </div>
           <div
             className={`create-success-model__okr-info ${
@@ -180,13 +183,13 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
                 {createdSuccessInfo.workName}
               </span>
             </div>
-            {createdSuccessInfo.Krs.map((kr, index) => {
+            {createdSuccessInfo.Krs.map((kr, index) =>
               // if(!isDownload && index > 2) {
               //   return null;
               // }
-              return (
+              (
                 <div className="create-success-model__kr-wrapper">
-                  <span className="create-success-model__dot"></span>
+                  <span className="create-success-model__dot" />
                   <li
                     className={`create-success-model__kr ${
                       isDownload ? "create-success-model__kr--no-wrap" : ""
@@ -195,8 +198,7 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
                     {kr.mileStoneName}
                   </li>
                 </div>
-              );
-            })}
+              ))}
           </div>
           {isDownload ? (
             <div
@@ -215,13 +217,13 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
                 className="create-success-model__common-btn-style create-success-model__return-list"
                 onClick={handleShowDetail}
               >
-                {getLocale('Mod_Checkdetails')}
+                {getLocale("Mod_Checkdetails")}
               </span>
               <span
                 className="create-success-model__common-btn-style create-success-model__download-img"
                 onClick={handleDownloadPic}
               >
-                {getLocale('OKR_MyO_Popup_Download')}
+                {getLocale("OKR_MyO_Popup_Download")}
               </span>
             </div>
             <div className="create-success-model__checkbox-wrapper">
@@ -236,7 +238,7 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
                 htmlFor="dontShowCreateSucess"
                 className="create-success-model__label"
               >
-                {getLocale('OKR_MyO_Pop_Nomore')}
+                {getLocale("OKR_MyO_Pop_Nomore")}
               </label>
             </div>
           </div>

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

@@ -1,8 +1,6 @@
 import React, { FC } from "react";
 import ReactDOM from "react-dom";
 
-const CreateSuccessCmpWrapper: FC = ({ children }) => {
-  return <div>{ReactDOM.createPortal(children, document.body)}</div>;
-};
+const CreateSuccessCmpWrapper: FC = ({ children }) => <div>{ReactDOM.createPortal(children, document.body)}</div>;
 
 export default CreateSuccessCmpWrapper;

package/src/components/create-okr-modal/fields/date-cycle.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, Fragment } from "react";
 import moment from "moment";
 import CreateCycle, { CreateCycleData } from "../createCycle";
-import { ItemWrapper, SelectBtn, Space, TitleLine } from "../style";
-import PeriodSelector from "../../period-selector"
+import {
+  ItemWrapper, SelectBtn, Space, TitleLine,
+} from "../style";
+import PeriodSelector from "../../period-selector";
 import { OpenUserName } from "../../../utils/open-data";
 import UserSelectorPop from "../../../components-v1/userSelector/UserSelectorPop";
 import { getCycleSetting } from "../request-api";
@@ -18,30 +20,30 @@ interface Props {
   isCreateModal: boolean;
 }
 
-export default ({
+export default function ({
   cycle,
   setCycle,
   modalRef,
   setUser,
   user,
   isCreateModal,
-}: Props) => {
+}: Props) {
   useEffect(() => {
     // 若果外部提供了配置，则不调用默认季度配置
     if (cycle && cycle.yqmNum != undefined) return;
     getCycleSetting().then((res) => {
-      let cycleData = PeriodSelector.getDefalutCycle(res);
+      const cycleData = PeriodSelector.getDefalutCycle(res);
       setCycle(cycleData);
     });
   }, []);
 
   return (
-    <Fragment>
+    <>
       <div className="create-modal__sub-block">
         {!isCreateModal ? (
-          <TitleLine>{getLocale('Mod_period')}</TitleLine>
+          <TitleLine>{getLocale("Mod_period")}</TitleLine>
         ) : (
-          <div className="create-modal__sub-title">{getLocale('Mod_period')}</div>
+          <div className="create-modal__sub-title">{getLocale("Mod_period")}</div>
         )}
         <CreateCycle
           onChange={setCycle}
@@ -50,13 +52,13 @@ export default ({
         />
       </div>
       {!isCreateModal ? (
-        <Fragment>
+        <>
           <Space />
           <ItemWrapper>
-            <TitleLine>{getLocale('Mod_Owner')}</TitleLine>
+            <TitleLine>{getLocale("Mod_Owner")}</TitleLine>
             <UserSelectorPop
               onSubmit={([u]) => {
-                let avatar = {
+                const avatar = {
                   color: u.UserAvatar.Color,
                   small: u.UserAvatar.Small,
                 };
@@ -80,8 +82,8 @@ export default ({
               </SelectBtn>
             </UserSelectorPop>
           </ItemWrapper>
-        </Fragment>
+        </>
       ) : null}
-    </Fragment>
+    </>
   );
-};
+}

package/src/components/create-okr-modal/fields/index.js

@@ -2,4 +2,4 @@ import OkrVisibility from "./okr-visibility-detail";
 import OkrType from "./okr-type-detail";
 
 export const OkrFieldVisibility = OkrVisibility;
-export const OkrFieldType = OkrType;
+export const OkrFieldType = OkrType;

package/src/components/create-okr-modal/fields/input-with-err-popup.tsx

@@ -17,17 +17,15 @@ interface IStrLenOverflowPopupProps extends IErrorPopContentProps {
 const StrLengthOverflowError: FC<IErrorPopContentProps> = ({
   strLength,
   maxLength,
-}) => {
-  return (
-    <Fragment>
-      {strLength > maxLength ? (
-        <span className={"error-popup-text-wrapper"}>
-          {inputWordTrans(strLength, maxLength)}
-        </span>
-      ) : null}
-    </Fragment>
-  );
-};
+}) => (
+  <>
+    {strLength > maxLength ? (
+      <span className="error-popup-text-wrapper">
+        {inputWordTrans(strLength, maxLength)}
+      </span>
+    ) : null}
+  </>
+);
 
 const InputWithErrPopup: FC<IStrLenOverflowPopupProps> = ({
   strLength,
@@ -36,22 +34,20 @@ const InputWithErrPopup: FC<IStrLenOverflowPopupProps> = ({
   forceRender = false,
   destroyPopupOnHide = true,
   children,
-}) => {
-  return (
-    // @ts-ignore
-    <Popup
-      popup={
-        <StrLengthOverflowError strLength={strLength} maxLength={maxLength} />
+}) => (
+  // @ts-ignore
+  <Popup
+    popup={
+      <StrLengthOverflowError strLength={strLength} maxLength={maxLength} />
       }
-      popupVisible={true}
-      popupPlacement={position}
-      forceRender={forceRender}
-      action={["focus"]}
-      destroyPopupOnHide={destroyPopupOnHide}
-    >
-      {children}
-    </Popup>
-  );
-};
+    popupVisible
+    popupPlacement={position}
+    forceRender={forceRender}
+    action={["focus"]}
+    destroyPopupOnHide={destroyPopupOnHide}
+  >
+    {children}
+  </Popup>
+);
 
 export default InputWithErrPopup;