@titaui/pc 1.9.45 → 1.9.49

package/src/components/okr-flow/child-node/work-node.js

@@ -1,21 +1,21 @@
-import React, { useEffect, useState } from 'react';
-import classNames from 'classnames';
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
 
-import TooltipText from '../../tooltip/tooltip-text';
-import Tooltip from '../../tooltip';
-import Creator from './fields/creator';
-import OkrClassify from './fields/okrClassify';
-import OkrType from './fields/okrType';
-import preCls from '../precls';
-import { OpenDepartmentName } from '../open-data';
-import { fittingString, getOpenData, setSize } from '../../open-data-painter';
-import { isWx } from '../../../utils/bs-global';
+import TooltipText from "../../tooltip/tooltip-text";
+import Tooltip from "../../tooltip";
+import Creator from "./fields/creator";
+import OkrClassify from "./fields/okrClassify";
+import OkrType from "./fields/okrType";
+import preCls from "../precls";
+import { OpenDepartmentName } from "../open-data";
+import { fittingString, getOpenData, setSize } from "../../open-data-painter";
+import { isWx } from "../../../utils/bs-global";
 import { getLocale } from "../../../utils/getLocale";
 
-const WorkNode = ({ data, isSearchRes, darkTheme }) => {
+function WorkNode({ data, isSearchRes, darkTheme }) {
   const {
     workId,
-    workName = '',
+    workName = "",
     okrType,
     departmentId,
     departmentName,
@@ -34,18 +34,16 @@ const WorkNode = ({ data, isSearchRes, darkTheme }) => {
   const [whiteImg, setWhiteImg] = useState();
   const [imgWidth, setImgWidth] = useState();
 
-  const getOkrTypeMap = () => {
-    return {
-      1: getLocale('OKR_MyO_Pop_Individual'),
-      // 2: <OpenDepartmentName id={departmentId} name={departmentName} />,
-      2: <img src={darkTheme ? whiteImg: departUrl} style={{macWidth: 92}} width={imgWidth}/>,
-      3: getLocale('OKR_MyO_Pop_Company'),
-      4: groupName || getLocale('OKR_MyO_Text_Team'),
-    }
-  };
+  const getOkrTypeMap = () => ({
+    1: getLocale("OKR_MyO_Pop_Individual"),
+    // 2: <OpenDepartmentName id={departmentId} name={departmentName} />,
+    2: <img src={darkTheme ? whiteImg : departUrl} style={{ macWidth: 92 }} width={imgWidth} />,
+    3: getLocale("OKR_MyO_Pop_Company"),
+    4: groupName || getLocale("OKR_MyO_Text_Team"),
+  });
 
   const getDepartUrl = async () => {
-    let name = departmentName || '默认部门';
+    let name = departmentName || "默认部门";
     if (isWx()) {
       name = await getOpenData({
         id: departmentId,
@@ -53,62 +51,64 @@ const WorkNode = ({ data, isSearchRes, darkTheme }) => {
         type: "departmentName",
       });
     }
-    getCanvasImg('white', name);
-    getCanvasImg('dark', name);
+    getCanvasImg("white", name);
+    getCanvasImg("dark", name);
   };
-  const getCanvasImg = (theme = 'white', name) => {
+  const getCanvasImg = (theme = "white", name) => {
     const canvas = document.createElement("canvas");
-    let ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext("2d");
     const font = "normal 12px/24px -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei";
     ctx.font = font;
     // const fitStr = fittingString(ctx, name, 92);
     const { width } = ctx.measureText(name);
-    const actualWidth = Math.min(width, 92)
+    const actualWidth = Math.min(width, 92);
     setSize(canvas, ctx, actualWidth, 24);
     setImgWidth(actualWidth);
-    ctx.textBaseline = 'middle';
+    ctx.textBaseline = "middle";
     ctx.font = font;
-    ctx.fillStyle = theme == 'white' ? "#FFFFFF" : "#6f7886";
+    ctx.fillStyle = theme == "white" ? "#FFFFFF" : "#6f7886";
     ctx.fillText(name, 0, 12);
-    theme == 'white' ? setWhiteImg(canvas.toDataURL()): setDepartUrl(canvas.toDataURL());
-  }
+    theme == "white" ? setWhiteImg(canvas.toDataURL()) : setDepartUrl(canvas.toDataURL());
+  };
 
   useEffect(() => {
-    if(okrType == 2) {
-      getDepartUrl()
+    if (okrType == 2) {
+      getDepartUrl();
     }
-  }, [])
+  }, []);
 
   const getCycleTextByType = () => {
-    const { cycleType, yqmnum, annualNum, modelType, KrIndex } = data;
+    const {
+      cycleType, yqmnum, annualNum, modelType, KrIndex,
+    } = data;
     // modelType = 2 是KR
-    let cycleTypeCopy = modelType ? (modelType === 2 ? -1 : cycleType) : cycleType;
+    const cycleTypeCopy = modelType ? (modelType === 2 ? -1 : cycleType) : cycleType;
     switch (cycleTypeCopy) {
       case 0:
-        return getLocale('Mod_Customization');
+        return getLocale("Mod_Customization");
       case 1:
-        return annualNum + '年';
+        return `${annualNum}年`;
       case 2:
         return `第${yqmnum}季度`;
       case 3:
-        return yqmnum + '月';
+        return `${yqmnum}月`;
       case 4:
-        return `${yqmnum}-${(yqmnum + 1) % 12 || 12}月`
+        return `${yqmnum}-${(yqmnum + 1) % 12 || 12}月`;
       case 5:
-        return `${yqmnum == 1 ? '上':'下'}半年`
+        return `${yqmnum == 1 ? "上" : "下"}半年`;
       case -1:
-        return KrIndex ? 'KR' + KrIndex : 'KR';
+        return KrIndex ? `KR${KrIndex}` : "KR";
     }
   };
   // 1：正常 2：有风险 3：过期 4:完成 5：过期完成 ,
-  const riskLevelSuffix = ['normal', 'normal', 'risk', 'expired', 'complete', 'complete_over'];
+  const riskLevelSuffix = ["normal", "normal", "risk", "expired", "complete", "complete_over"];
 
   if (!MapOkrVisible) return <div className={classNames(`${preCls}--node`, `${preCls}--node__private`)} />;
 
   return (
     <div className={classNames(`${preCls}--node`, { [`${preCls}--node__search`]: isSearchRes })}>
 
-      <div className={classNames(`${preCls}--node-title`)} >
+      <div className={classNames(`${preCls}--node-title`)}>
         {workName}
         <OkrClassify classify={okrClassify} />
       </div>
@@ -117,18 +117,18 @@ const WorkNode = ({ data, isSearchRes, darkTheme }) => {
         <Creator creator={principalUser || {}} />
         <div className={classNames(`${preCls}--node-right`)}>
           <OkrType>
-            <span className={classNames(`${preCls}--node-type`)} >{getOkrTypeMap()[okrType]}</span>
+            <span className={classNames(`${preCls}--node-type`)}>{getOkrTypeMap()[okrType]}</span>
           </OkrType>
-          <span className={classNames(`${preCls}--node-cycle`)} >
+          <span className={classNames(`${preCls}--node-cycle`)}>
             {getCycleTextByType()}
           </span>
         </div>
       </div>
 
       <span className={classNames(`${preCls}--node-status`, `${preCls}--node-status__${riskLevelSuffix[manualRiskLevel]}`)}>
-        <TooltipText text={`${progress}%`} maxWidth={50}/>
+        <TooltipText text={`${progress}%`} maxWidth={50} />
       </span>
     </div>
   );
-};
+}
 export default WorkNode;

package/src/components/okr-flow/context.js

@@ -1,2 +1,3 @@
-import React from 'react';
+import React from "react";
+
 export const CommonContext = React.createContext();

package/src/components/okr-flow/empty/index.js

@@ -1,15 +1,18 @@
-import preCls from '../precls';
-import classNames from 'classnames';
-import { getLocale } from '.././../../utils/getLocale';
+import classNames from "classnames";
+import preCls from "../precls";
+import { getLocale } from "../../../utils/getLocale";
 
-import './index.scss';
+import "./index.scss";
 
-const Empty = () => {
+function Empty() {
   return (
     <div className={classNames(`${preCls}--empty`)}>
       <div className={classNames(`${preCls}--empty--icon`)} />
-      <div className={classNames(`${preCls}--empty--tip`)}>&nbsp;{getLocale('OKR_Ali_Text_Didntfind')}</div>
+      <div className={classNames(`${preCls}--empty--tip`)}>
+&nbsp;
+        {getLocale("OKR_Ali_Text_Didntfind")}
+      </div>
     </div>
   );
-};
+}
 export default Empty;

package/src/components/okr-flow/export-modal/index.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect, useRef, Fragment } from "react";
+import React, {
+  useState, useEffect, useRef, Fragment,
+} from "react";
 import classNames from "classnames";
 import Html2Canvas from "html2canvas";
 import ColorPicker from "rc-color-picker";
@@ -23,7 +25,7 @@ interface IProps {
   showkr: boolean;
 }
 
-const ExportMapModal = (props: IProps) => {
+function ExportMapModal(props: IProps) {
   const {
     visible = false,
     onCloseHandler,
@@ -38,12 +40,12 @@ const ExportMapModal = (props: IProps) => {
   const modalRef = useRef();
   useEffect(() => {
     if (isWx()) {
-      window["WWOpenData"] &&
-        window["WWOpenData"].enableCanvasSharing &&
-        window["WWOpenData"].enableCanvasSharing();
-      window["WWOpenData"] &&
-        window["WWOpenData"].initCanvas &&
-        window["WWOpenData"].initCanvas();
+      window.WWOpenData
+        && window.WWOpenData.enableCanvasSharing
+        && window.WWOpenData.enableCanvasSharing();
+      window.WWOpenData
+        && window.WWOpenData.initCanvas
+        && window.WWOpenData.initCanvas();
     }
   }, []);
   useEffect(() => {
@@ -51,45 +53,45 @@ const ExportMapModal = (props: IProps) => {
   }, [visible, mapInstance]);
 
   const downloadImg = async () => {
-    let okrMapRef: any = document.querySelector(".titaui-okr-flow__export") || document.createElement('div');
-    let width = okrMapRef.clientWidth; //获取dom 宽度
-    let height = okrMapRef.clientHeight; //获取dom 高度
-    let canvas = document.createElement("canvas"); //创建一个canvas节点
-    let scale = 20; //定义任意放大倍数 支持小数
-    canvas.width = width * scale; //定义canvas 宽度 * 缩放
-    canvas.height = height * scale; //定义canvas高度 *缩放
-    canvas.style.width = width + "px";
-    canvas.style.height = height + "px";
-    let opts = {
+    const okrMapRef: any = document.querySelector(".titaui-okr-flow__export") || document.createElement("div");
+    const width = okrMapRef.clientWidth; // 获取dom 宽度
+    const height = okrMapRef.clientHeight; // 获取dom 高度
+    const canvas = document.createElement("canvas"); // 创建一个canvas节点
+    const scale = 20; // 定义任意放大倍数 支持小数
+    canvas.width = width * scale; // 定义canvas 宽度 * 缩放
+    canvas.height = height * scale; // 定义canvas高度 *缩放
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const opts = {
       backgroundColor: bgColor, // 背景透明
-      scale: scale, // 添加的scale 参数
-      canvas: canvas, // 自定义 canvas
+      scale, // 添加的scale 参数
+      canvas, // 自定义 canvas
       logging: false, // 日志开关，便于查看html2canvas的内部执行流程
-      width: width, // dom 原始宽度
-      height: height,
+      width, // dom 原始宽度
+      height,
       useCORS: true, // 【重要】开启跨域配置
     };
 
     const result = await Html2Canvas(okrMapRef, opts);
     if (isWx()) {
-      window["WWOpenData"] &&
-        window["WWOpenData"].enableCanvasSharing &&
-        window["WWOpenData"].enableCanvasSharing();
-      window["WWOpenData"] &&
-        window["WWOpenData"].initCanvas &&
-        window["WWOpenData"].initCanvas();
+      window.WWOpenData
+        && window.WWOpenData.enableCanvasSharing
+        && window.WWOpenData.enableCanvasSharing();
+      window.WWOpenData
+        && window.WWOpenData.initCanvas
+        && window.WWOpenData.initCanvas();
     }
-    let imgUrl = result.toDataURL("image/png"); //得到图片的base64编码数据
+    const imgUrl = result.toDataURL("image/png"); // 得到图片的base64编码数据
     const url = await getBase64DownloadUrl(imgUrl.split(",")[1]);
-    let image = new Image();
+    const image = new Image();
 
     image.setAttribute("crossOrigin", "anonymous");
     image.onload = () => {
       if (!url.Data.obj) {
-        Toast.Error('导出失败，请稍后重试', {canClose: false})
+        Toast.Error("导出失败，请稍后重试", { canClose: false });
       }
-      let a = document.createElement("a"); // 生成一个a元素
-      let event = new MouseEvent("click"); // 创建一个单击事件
+      const a = document.createElement("a"); // 生成一个a元素
+      const event = new MouseEvent("click"); // 创建一个单击事件
       a.download = "okr地图"; // 设置图片名称
       a.href = url.Data.obj; // 将生成的URL设置为a.href属性
       a.dispatchEvent(event); // 触发a的单击事件
@@ -113,68 +115,68 @@ const ExportMapModal = (props: IProps) => {
   };
 
   const colorChangeHandler = (colors) => {
-    setBgColor(colors ? colors.color : 'none');
+    setBgColor(colors ? colors.color : "none");
   };
 
   return (
     <Dialog
-      title={getLocale('OKR_Ali_Exportmap')}
-      noFooterLine={true}
+      title={getLocale("OKR_Ali_Exportmap")}
+      noFooterLine
       visible={visible}
       width="1000px"
       onClose={onCloseHandler}
       onOk={confirmHandler}
       onCancel={onCloseHandler}
       ref={modalRef}
-      className='export-map-modal titaui-dialog'
+      className="export-map-modal titaui-dialog"
       forceRender
     >
-      <Fragment>
+      <>
         <div className="export-map-modal__setting">
-          <span style={{marginRight: 10}}>{getLocale('OKR_Ali_Selectbackground')}</span>
-            <ColorPicker
-              animation="slide-up"
-              color={"#FFFFFF"}
-              onChange={colorChangeHandler}
-              className="titaui-color-picker"
-              mode="HSB"
-            >
-              <span className='export-map-modal__color-trigger' />
-            </ColorPicker>
-            <span className='export-map-modal__color-trans' onClick={colorChangeHandler} />
+          <span style={{ marginRight: 10 }}>{getLocale("OKR_Ali_Selectbackground")}</span>
+          <ColorPicker
+            animation="slide-up"
+            color="#FFFFFF"
+            onChange={colorChangeHandler}
+            className="titaui-color-picker"
+            mode="HSB"
+          >
+            <span className="export-map-modal__color-trigger" />
+          </ColorPicker>
+          <span className="export-map-modal__color-trans" onClick={colorChangeHandler} />
         </div>
         <div>
           {/* {visible && ( */}
-            <CommonContext.Provider
-              value={{
-                direction,
-                showkr,
-                darkTheme,
-              }}
-            >
-              <ReactFlowProvider>
-                <ReactFlow
-                  onLoad={fitViewHandler}
-                  nodesDraggable={false}
-                  nodesConnectable={false}
-                  className={classNames(`${preCls}__export`, {
-                    [`${preCls}__dark`]: darkTheme,
-                  })}
-                  elements={getLayoutedElements(dataSource, direction)}
-                  nodeTypes={nodeTypes}
-                  minZoom={0.05}
-                  zoomOnScroll={false}
-                  zoomOnPinch={false}
-                  zoomOnDoubleClick={false}
-                  paneMoveable={false}
-                  style={{ height: 600, width: "100%", background: bgColor }}
-                />
-              </ReactFlowProvider>
-            </CommonContext.Provider>
+          <CommonContext.Provider
+            value={{
+              direction,
+              showkr,
+              darkTheme,
+            }}
+          >
+            <ReactFlowProvider>
+              <ReactFlow
+                onLoad={fitViewHandler}
+                nodesDraggable={false}
+                nodesConnectable={false}
+                className={classNames(`${preCls}__export`, {
+                  [`${preCls}__dark`]: darkTheme,
+                })}
+                elements={getLayoutedElements(dataSource, direction)}
+                nodeTypes={nodeTypes}
+                minZoom={0.05}
+                zoomOnScroll={false}
+                zoomOnPinch={false}
+                zoomOnDoubleClick={false}
+                paneMoveable={false}
+                style={{ height: 600, width: "100%", background: bgColor }}
+              />
+            </ReactFlowProvider>
+          </CommonContext.Provider>
           {/* )} */}
         </div>
-      </Fragment>
+      </>
     </Dialog>
   );
-};
+}
 export default ExportMapModal;

package/src/components/okr-flow/export-modules/okr-search-panel/index.js

@@ -31,8 +31,7 @@ import "./index.scss";
 
 import preCls from "../../precls";
 
-
-const OkrSearchPanel = (props, ref) => {
+function OkrSearchPanel(props, ref) {
   const {
     // 搜索条件
     searchType,
@@ -72,7 +71,7 @@ const OkrSearchPanel = (props, ref) => {
         annualNum,
         okrType,
         openLevel,
-        showkr
+        showkr,
       ) => {
         setLoading(true);
         setTreeNodes(null);
@@ -89,7 +88,7 @@ const OkrSearchPanel = (props, ref) => {
         });
         const okrIds = (works || []).reduce(
           (ids, cur) => [...ids, cur.workId],
-          []
+          [],
         );
         if (!okrIds.length) {
           setDataSource([]);
@@ -99,7 +98,7 @@ const OkrSearchPanel = (props, ref) => {
         const nodes = await expandNodesByLevel({
           okrIds,
           level: openLevel - 1,
-          showKr: showkr ? 0: 1
+          showKr: showkr ? 0 : 1,
         });
         const allNodes = formatNodes(nodes, showkr, okrIds);
         // 初始情况
@@ -122,8 +121,8 @@ const OkrSearchPanel = (props, ref) => {
         });
         setLoading(false);
       },
-      500
-    )
+      500,
+    ),
   ).current;
 
   const okrFlow = useRef();
@@ -140,7 +139,7 @@ const OkrSearchPanel = (props, ref) => {
       annualNum,
       okrType,
       openLevel,
-      showkr
+      showkr,
     );
   }, [
     searchType,
@@ -168,7 +167,8 @@ const OkrSearchPanel = (props, ref) => {
       childRoot: false,
     });
     const [parentTree] = toTree(formatNodes(res, showkr), showkr);
-    let prevIndex, prevNode;
+    let prevIndex; let
+      prevNode;
     treeNodes.children.forEach((item, index) => {
       if (!item) return false;
       if (item.id == id) {
@@ -232,7 +232,7 @@ const OkrSearchPanel = (props, ref) => {
   useImperativeHandle(ref, () => ({
     updateNodeData: ({ id, data }) => {
       if (!id) return;
-      let updateNode = findNode(treeNodes, id);
+      const updateNode = findNode(treeNodes, id);
       if (!updateNode) return;
       updateNode.data = { ...updateNode.data, ...data };
       setTreeNodes(cloneDeep(treeNodes));
@@ -247,7 +247,7 @@ const OkrSearchPanel = (props, ref) => {
   }));
   const cancelHandler = () => setExportVisible(false);
   return (
-    <React.Fragment>
+    <>
       {loading ? (
         <div className={classNames(`${preCls}--loading`)}>
           <div
@@ -257,7 +257,7 @@ const OkrSearchPanel = (props, ref) => {
           />
         </div>
       ) : (
-        <React.Fragment>
+        <>
           <OkrMap
             ref={okrFlow}
             dataSource={dataSource}
@@ -277,10 +277,10 @@ const OkrSearchPanel = (props, ref) => {
             showkr={showkr}
             dataSource={dataSource}
           />
-        </React.Fragment>
+        </>
       )}
-    </React.Fragment>
+    </>
   );
-};
+}
 
 export default forwardRef(OkrSearchPanel);

package/src/components/okr-flow/index.js

@@ -1,6 +1,6 @@
 import OkrSearchPanelComp from "./export-modules/okr-search-panel";
 
 export const OkrSearchPanel = OkrSearchPanelComp;
-export { checkTenantOkrExist } from './request-apis';
+export { checkTenantOkrExist } from "./request-apis";
 
-export default OkrSearchPanelComp
+export default OkrSearchPanelComp;

package/src/components/okr-flow/mini-map/index.js

@@ -1,15 +1,14 @@
-import React, { useState } from 'react';
-import { useZoomPanHelper } from '@titaui/react-flow-renderer';
-import classNames from 'classnames';
-import Tooltip from '../../tooltip';
-import Map from './map';
+import React, { useState } from "react";
+import { useZoomPanHelper } from "@titaui/react-flow-renderer";
+import classNames from "classnames";
+import Tooltip from "../../tooltip";
+import Map from "./map";
 import { getLocale } from "../../../utils/getLocale";
 
-import preCls from '../precls';
-import './index.scss';
+import preCls from "../precls";
+import "./index.scss";
 
-const MiniMap = props => {
-  
+function MiniMap(props) {
   const { zoomTo } = useZoomPanHelper();
 
   const [visible, setVisible] = useState(true);
@@ -34,13 +33,13 @@ const MiniMap = props => {
   return (
     <div className={classNames(`${preCls}--minimap`)}>
 
-      <div className={classNames(`${preCls}--minimap--snapshot`, { [`${preCls}--minimap--snapshot__hidden`]: !visible })} >
+      <div className={classNames(`${preCls}--minimap--snapshot`, { [`${preCls}--minimap--snapshot__hidden`]: !visible })}>
         <Map onMoveStart={props.onMoveStart} />
       </div>
 
-      <div className={classNames(`${preCls}--minimap--operat`)} >
+      <div className={classNames(`${preCls}--minimap--operat`)}>
 
-        <Tooltip placement='top' overlay={!visible ? getLocale('Mod_Unfold') : getLocale('Mod_Fold')}>
+        <Tooltip placement="top" overlay={!visible ? getLocale("Mod_Unfold") : getLocale("Mod_Fold")}>
           <span
             className={classNames(`${preCls}--minimap--icon`, {
               [`${preCls}--minimap--icon__open`]: !visible,
@@ -50,18 +49,21 @@ const MiniMap = props => {
           />
         </Tooltip>
 
-        <span className={classNames(`${preCls}--minimap--divider`)} >|</span>
+        <span className={classNames(`${preCls}--minimap--divider`)}>|</span>
 
-        <Tooltip placement='top' overlay={<span>{getLocale('OKR_Ali_Butt_Narrow')}</span>}>
+        <Tooltip placement="top" overlay={<span>{getLocale("OKR_Ali_Butt_Narrow")}</span>}>
           <span
             className={classNames(`${preCls}--minimap--size__min`, `${preCls}--minimap--icon`)}
             onClick={onZoomOut}
           />
         </Tooltip>
 
-        <span>{zoom}%</span>
+        <span>
+          {zoom}
+          %
+        </span>
 
-        <Tooltip placement='top' overlay={<span>{getLocale('OKR_Ali_Butt_Enlarge')}</span>}>
+        <Tooltip placement="top" overlay={<span>{getLocale("OKR_Ali_Butt_Enlarge")}</span>}>
           <span
             className={classNames(`${preCls}--minimap--size__max`, `${preCls}--minimap--icon`)}
             onClick={onZoomIn}
@@ -71,5 +73,5 @@ const MiniMap = props => {
       </div>
     </div>
   );
-};
+}
 export default MiniMap;