@titaui/pc 1.9.53 → 1.9.57

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

@@ -1,23 +1,27 @@
 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"),
-];
-export const OCheckTarget = () => [
-  getLocale("OKR_MyO_Pop_Containingverbs"),
-  getLocale("OKR_MyO_Pop_Notrecommended"),
+  getLocale('OKR_MyO_Pop_Increaserene'),
 ];
+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 = () => [getLocale("OKR_MyO_Pop_70to90")];
+export const KrExample = () => {
+  return [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,15 +1,13 @@
-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;
@@ -25,11 +23,12 @@ 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;
@@ -38,54 +37,50 @@ 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();
-  };
-  if (!cycleSetting) {
-    return (
-      <SelectBtn>
-        <span>{PeriodSelector.formatPeriod(selfCycle)}</span>
-        <i className="tu-icon-sort-down" />
-      </SelectBtn>
-    );
+    popRef.current && popRef.current.hide()
   }
+  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}>
@@ -105,65 +100,59 @@ 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,6 +1,5 @@
 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";
@@ -11,6 +10,7 @@ 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(() => {
-    const shareContent = downLoadRef.current; // 需要截图的包裹的（原生的）DOM 对象
-    // @ts-ignore
-    const width = shareContent.clientWidth; // 获取dom 宽度
+    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高度 *缩放
     // @ts-ignore
-    const height = shareContent.clientHeight; // 获取dom 高度
-    const canvas = document.createElement("canvas"); // 创建一个canvas节点
-    const scale = 2; // 定义任意放大倍数 支持小数
-    canvas.width = width * scale; // 定义canvas 宽度 * 缩放
-    canvas.height = height * scale; // 定义canvas高度 *缩放
+    canvas.style.width = width + "px";
     // @ts-ignore
-    canvas.style.width = `${width}px`;
+    canvas.style.height = height + "px";
     // @ts-ignore
-    canvas.style.height = `${height}px`;
-    // @ts-ignore
-    const opts = {
+    let opts = {
       backgroundColor: null, // 背景透明
-      scale, // 添加的scale 参数
-      canvas, // 自定义 canvas
+      scale: scale, // 添加的scale 参数
+      canvas: canvas, // 自定义 canvas
       logging: false, // 日志开关，便于查看html2canvas的内部执行流程
-      width, // dom 原始宽度
-      height,
+      width: width, // dom 原始宽度
+      height: height,
       useCORS: true, // 【重要】开启跨域配置
     };
 
     Html2Canvas(downLoadRef.current as any, opts).then((canvas) => {
-      const imgUrl = canvas.toDataURL("image/png"); // 得到图片的base64编码数据
-      const image = new Image();
+      let imgUrl = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+      let image = new Image();
       image.setAttribute("crossOrigin", "anonymous");
       image.onload = () => {
-        const a = document.createElement("a"); // 生成一个a元素
-        const event = new MouseEvent("click"); // 创建一个单击事件
-        a.download = getLocale("OKR_MyO_Share"); // 设置图片名称
+        let a = document.createElement("a"); // 生成一个a元素
+        let 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,14 +157,11 @@ 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 ${
@@ -183,13 +180,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 className="create-success-model__dot"></span>
                   <li
                     className={`create-success-model__kr ${
                       isDownload ? "create-success-model__kr--no-wrap" : ""
@@ -198,7 +195,8 @@ const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
                     {kr.mileStoneName}
                   </li>
                 </div>
-              ))}
+              );
+            })}
           </div>
           {isDownload ? (
             <div
@@ -217,13 +215,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">
@@ -238,7 +236,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,6 +1,8 @@
 import React, { FC } from "react";
 import ReactDOM from "react-dom";
 
-const CreateSuccessCmpWrapper: FC = ({ children }) => <div>{ReactDOM.createPortal(children, document.body)}</div>;
+const CreateSuccessCmpWrapper: FC = ({ children }) => {
+  return <div>{ReactDOM.createPortal(children, document.body)}</div>;
+};
 
 export default CreateSuccessCmpWrapper;

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

@@ -1,10 +1,8 @@
 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";
@@ -20,30 +18,30 @@ interface Props {
   isCreateModal: boolean;
 }
 
-export default function ({
+export default ({
   cycle,
   setCycle,
   modalRef,
   setUser,
   user,
   isCreateModal,
-}: Props) {
+}: Props) => {
   useEffect(() => {
     // 若果外部提供了配置，则不调用默认季度配置
     if (cycle && cycle.yqmNum != undefined) return;
     getCycleSetting().then((res) => {
-      const cycleData = PeriodSelector.getDefalutCycle(res);
+      let 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}
@@ -52,13 +50,13 @@ export default function ({
         />
       </div>
       {!isCreateModal ? (
-        <>
+        <Fragment>
           <Space />
           <ItemWrapper>
-            <TitleLine>{getLocale("Mod_Owner")}</TitleLine>
+            <TitleLine>{getLocale('Mod_Owner')}</TitleLine>
             <UserSelectorPop
               onSubmit={([u]) => {
-                const avatar = {
+                let avatar = {
                   color: u.UserAvatar.Color,
                   small: u.UserAvatar.Small,
                 };
@@ -82,8 +80,8 @@ export default function ({
               </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,15 +17,17 @@ interface IStrLenOverflowPopupProps extends IErrorPopContentProps {
 const StrLengthOverflowError: FC<IErrorPopContentProps> = ({
   strLength,
   maxLength,
-}) => (
-  <>
-    {strLength > maxLength ? (
-      <span className="error-popup-text-wrapper">
-        {inputWordTrans(strLength, maxLength)}
-      </span>
-    ) : null}
-  </>
-);
+}) => {
+  return (
+    <Fragment>
+      {strLength > maxLength ? (
+        <span className={"error-popup-text-wrapper"}>
+          {inputWordTrans(strLength, maxLength)}
+        </span>
+      ) : null}
+    </Fragment>
+  );
+};
 
 const InputWithErrPopup: FC<IStrLenOverflowPopupProps> = ({
   strLength,
@@ -34,20 +36,22 @@ const InputWithErrPopup: FC<IStrLenOverflowPopupProps> = ({
   forceRender = false,
   destroyPopupOnHide = true,
   children,
-}) => (
-  // @ts-ignore
-  <Popup
-    popup={
-      <StrLengthOverflowError strLength={strLength} maxLength={maxLength} />
+}) => {
+  return (
+    // @ts-ignore
+    <Popup
+      popup={
+        <StrLengthOverflowError strLength={strLength} maxLength={maxLength} />
       }
-    popupVisible
-    popupPlacement={position}
-    forceRender={forceRender}
-    action={["focus"]}
-    destroyPopupOnHide={destroyPopupOnHide}
-  >
-    {children}
-  </Popup>
-);
+      popupVisible={true}
+      popupPlacement={position}
+      forceRender={forceRender}
+      action={["focus"]}
+      destroyPopupOnHide={destroyPopupOnHide}
+    >
+      {children}
+    </Popup>
+  );
+};
 
 export default InputWithErrPopup;