@titaui/pc 1.9.48 → 1.9.49

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

@@ -1,30 +1,30 @@
-import React, { memo, HTMLAttributes, useRef } from 'react';
-import cc from 'classcat';
+import React, { memo, HTMLAttributes, useRef } from "react";
+import cc from "classcat";
 
-import { useStoreState } from '@titaui/react-flow-renderer';
-import { getRectOfNodes, getBoundsofRects } from './utils';
-import MiniNode from './mini-node';
+import { useStoreState } from "@titaui/react-flow-renderer";
+import { getRectOfNodes, getBoundsofRects } from "./utils";
+import MiniNode from "./mini-node";
 
 const defaultWidth = 200;
 const defaultHeight = 120;
 
-const MiniMap = ({
+function MiniMap({
   style,
   className,
-  nodeStrokeColor = '#555',
-  nodeColor = '#fff',
-  nodeClassName = '',
+  nodeStrokeColor = "#555",
+  nodeColor = "#fff",
+  nodeClassName = "",
   nodeBorderRadius = 5,
   nodeStrokeWidth = 2,
-  maskColor = 'rgb(240, 242, 243, 0.7)',
+  maskColor = "rgb(240, 242, 243, 0.7)",
   onMoveStart,
-}) => {
-  const containerWidth = useStoreState(s => s.width);
-  const containerHeight = useStoreState(s => s.height);
-  const [tX, tY, tScale] = useStoreState(s => s.transform);
-  const nodes = useStoreState(s => s.nodes);
+}) {
+  const containerWidth = useStoreState((s) => s.width);
+  const containerHeight = useStoreState((s) => s.height);
+  const [tX, tY, tScale] = useStoreState((s) => s.transform);
+  const nodes = useStoreState((s) => s.nodes);
 
-  const mapClasses = cc(['react-flow__minimap', className]);
+  const mapClasses = cc(["react-flow__minimap", className]);
   const elementWidth = (style && style.width) || defaultWidth;
   const elementHeight = (style && style.height) || defaultHeight;
   const nodeColorFunc = () => nodeColor;
@@ -59,8 +59,8 @@ const MiniMap = ({
         style={style}
       >
         {nodes
-          .filter(node => !node.isHidden)
-          .map(node => (
+          .filter((node) => !node.isHidden)
+          .map((node) => (
             <MiniNode
               key={node.id}
               x={node.__rf.position.x}
@@ -76,17 +76,17 @@ const MiniMap = ({
             />
           ))}
         <path
-          className='react-flow__minimap-mask'
-          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width -
-            offset * 2}zM${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
+          className="react-flow__minimap-mask"
+          d={`M${x - offset},${y - offset}h${width + offset * 2}v${height + offset * 2}h${-width
+            - offset * 2}zM${viewBB.x},${viewBB.y}h${viewBB.width}v${viewBB.height}h${-viewBB.width}z`}
           fill={maskColor}
-          fillRule='evenodd'
+          fillRule="evenodd"
         />
       </svg>
     </div>
   );
-};
+}
 
-MiniMap.displayName = 'MiniMap';
+MiniMap.displayName = "MiniMap";
 
 export default memo(MiniMap);

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

@@ -1,8 +1,8 @@
-import React, { memo, CSSProperties } from 'react';
-import classNames from 'classnames';
-import preCls from '../precls';
+import React, { memo, CSSProperties } from "react";
+import classNames from "classnames";
+import preCls from "../precls";
 
-const MiniNode = ({
+function MiniNode({
   x,
   y,
   width,
@@ -13,8 +13,7 @@ const MiniNode = ({
   strokeWidth,
   className,
   borderRadius,
-}) => {
-
+}) {
   const { background, backgroundColor } = style || {};
   const fill = color || background || backgroundColor;
 
@@ -32,8 +31,8 @@ const MiniNode = ({
       strokeWidth={strokeWidth}
     />
   );
-};
+}
 
-MiniNode.displayName = 'MiniNode';
+MiniNode.displayName = "MiniNode";
 
 export default memo(MiniNode);

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

@@ -1,4 +1,6 @@
-export const rectToBox = ({ x, y, width, height }) => ({
+export const rectToBox = ({
+  x, y, width, height,
+}) => ({
   x,
   y,
   x2: x + width,
@@ -12,21 +14,23 @@ const getBoundsOfBoxes = (box1, box2) => ({
   y2: Math.max(box1.y2, box2.y2),
 });
 
-export const boxToRect = ({ x, y, x2, y2 }) => ({
+export const boxToRect = ({
+  x, y, x2, y2,
+}) => ({
   x,
   y,
   width: x2 - x,
   height: y2 - y,
 });
 
-export const getBoundsofRects = (rect1, rect2) =>
-  boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
+export const getBoundsofRects = (rect1, rect2) => boxToRect(getBoundsOfBoxes(rectToBox(rect1), rectToBox(rect2)));
 
 export const getRectOfNodes = (nodes) => {
   const box = nodes.reduce(
-    (currBox, { __rf: { position, width, height } = {} }) =>
-      getBoundsOfBoxes(currBox, rectToBox({ ...position, width, height })),
-    { x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity }
+    (currBox, { __rf: { position, width, height } = {} }) => getBoundsOfBoxes(currBox, rectToBox({ ...position, width, height })),
+    {
+      x: Infinity, y: Infinity, x2: -Infinity, y2: -Infinity,
+    },
   );
 
   return boxToRect(box);

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

@@ -1,4 +1,6 @@
-import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import React, {
+  useState, useEffect, useRef, useImperativeHandle, forwardRef,
+} from "react";
 import ReactFlow, { ReactFlowProvider } from "@titaui/react-flow-renderer";
 import classNames from "classnames";
 import Html2Canvas from "html2canvas";
@@ -46,10 +48,9 @@ const OkrMap = forwardRef((props, ref) => {
     if (direction == "horizontal") {
       const targetY = containerHeight / 2;
       return [-160, targetY - rootNode.position.y];
-    } else {
-      const targetX = containerWidth / 2;
-      return [targetX - rootNode.position.x, -48];
     }
+    const targetX = containerWidth / 2;
+    return [targetX - rootNode.position.x, -48];
   };
   const onLoad = (reactFlowInstance) => {
     setFlowInstance(reactFlowInstance);
@@ -98,7 +99,7 @@ const OkrMap = forwardRef((props, ref) => {
         onChildExpand,
         onParentExpand,
         onChildClose,
-        darkTheme
+        darkTheme,
       }}
     >
       <div
@@ -111,7 +112,7 @@ const OkrMap = forwardRef((props, ref) => {
           {dataSource.length == 0 ? (
             <Empty />
           ) : (
-            <React.Fragment>
+            <>
               <ReactFlow
                 onLoad={onLoad}
                 elements={layoutedElements}
@@ -121,10 +122,10 @@ const OkrMap = forwardRef((props, ref) => {
                 onElementClick={handleEmementClick}
                 minZoom={0.25}
                 maxZoom={1.5}
-                panOnScroll={true}
+                panOnScroll
               />
               <MiniMap onMoveStart={() => (isMoving.current = true)} />
-            </React.Fragment>
+            </>
           )}
         </ReactFlowProvider>
       </div>

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

@@ -1,73 +1,65 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect } from "react";
 
 const WX_SOURCE = 860;
-const WX_UA_STR = 'micromessenger';
+const WX_UA_STR = "micromessenger";
 
-const getGlobal = (key) => {
-  return window.BSGlobal[key];
-};
+const getGlobal = (key) => window.BSGlobal[key];
 
-export const getSource = () => getGlobal('tenantInfo').Source;
+export const getSource = () => getGlobal("tenantInfo").Source;
 
-export const isWechat = () => {
-  return getSource() == 860;
-}
+export const isWechat = () => getSource() == 860;
 
 const getUA = () => navigator.userAgent.toLowerCase();
 
 export const getOpenId = (id, type) => {
   let openIds;
-  if (type == 'userName') {
-    openIds = getGlobal('openIds');
-  } else if (type == 'departmentName') {
-    openIds = getGlobal('openDepartmentIds');
+  if (type == "userName") {
+    openIds = getGlobal("openIds");
+  } else if (type == "departmentName") {
+    openIds = getGlobal("openDepartmentIds");
   }
   return openIds && openIds[id];
-}
+};
 
 function openData(p) {
   if (getSource() == WX_SOURCE || getUA().includes(WX_UA_STR)) {
-    return p => {
+    return function (p) {
       if (p.id === undefined) return p.name || null;
       const openId = getOpenId(p.id, p.type);
       if (!openId) return p.name || p.id || null;
       const ref = useRef(null);
       useEffect(() => {
         window.WWOpenData && window.WWOpenData.bind(ref.current);
-      })
+      });
       return (
         <div
           style={{
-            display: 'inline-block',
-            position: 'relative',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            verticalAlign: 'middle',
+            display: "inline-block",
+            position: "relative",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            verticalAlign: "middle",
           }}
         >
           <ww-open-data ref={ref} type={p.type} openid={openId} />
           <div style={{
-            'position': 'absolute',
-            'top': 0,
-            'left': 0,
-            'right': 0,
-            'bottom': 0,
-            'zIndex': 1
-          }} />
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 1,
+          }}
+          />
         </div>
       );
-    }
-  } else {
-    return p => {
-      return p.name || p.id || null;
-    }
+    };
   }
+  return (p) => p.name || p.id || null;
 }
 
 const getOpenData = openData();
 
-export const OpenUserName = (p) =>
-  getOpenData({ ...p, type: 'userName' })
+export const OpenUserName = (p) => getOpenData({ ...p, type: "userName" });
 
-export const OpenDepartmentName = (p) =>
-  getOpenData({ ...p, type: 'departmentName' })
+export const OpenDepartmentName = (p) => getOpenData({ ...p, type: "departmentName" });

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

@@ -1 +1 @@
-export default 'titaui-okr-flow';
+export default "titaui-okr-flow";

package/src/components/okr-flow/request-apis.js

@@ -1,12 +1,12 @@
-import axios from 'axios';
-import qs from 'qs';
+import axios from "axios";
+import qs from "qs";
 
 export const tenantId = (window.BSGlobal && window.BSGlobal.tenantInfo.Id) || 0;
 export const userId = (window.BSGlobal && window.BSGlobal.loginUserInfo.Id) || 0;
 
 const requestDomain = () => {
-  if (!window.location.hostname.match(/dev/)) return '';
-  return 'https://www.tita.gift';
+  if (!window.location.hostname.match(/dev/)) return "";
+  return "https://www.tita.gift";
 };
 
 export const checkTenantOkrExist = async () => {
@@ -14,18 +14,16 @@ export const checkTenantOkrExist = async () => {
   return result.data.Data;
 };
 
-export const searchOkrs = params => {
-  return axios
-    .post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/search`, {
-      ...params,
-    })
-    .then(res => {
-      return res.data.Data;
-    });
-};
+export const searchOkrs = (params) => axios
+  .post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/search`, {
+    ...params,
+  })
+  .then((res) => res.data.Data);
 
-export const expandNode = params => {
-  const { okrId = '', krId = '', childRoot = true, okrIdParent = 0,  currentOkrRole = true} = params;
+export const expandNode = (params) => {
+  const {
+    okrId = "", krId = "", childRoot = true, okrIdParent = 0, currentOkrRole = true,
+  } = params;
   return axios
     .get(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/map/expand`, {
       params: {
@@ -33,21 +31,16 @@ export const expandNode = params => {
         krId,
         childRoot, // true: 展开子节点, false: 展开父节点
         okrIdParent, //  当前选中okr 或 当前选中kr 的okrId（kr的父节点是所属okr）
-        currentOkrRole // 查看权限
+        currentOkrRole, // 查看权限
       },
     })
-    .then(res => {
-      return res.data.Data;
-    });
+    .then((res) => res.data.Data);
 };
 
-export const expandNodesByLevel = ({ level = 1, okrIds = [], showKr = 0 }) => {
+export const expandNodesByLevel = ({ level = 1, okrIds = [], showKr = 0 }) =>
   // const queryStr = qs.stringify({ okrIds, level }, { arrayFormat: 'repeat' });
-  return axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/map/generalview`, {
+  axios.post(`${requestDomain()}/api/v1/${tenantId}/${userId}/okr/map/generalview`, {
     okrIds,
     level,
-    showKr
-  }).then(res => {
-    return res.data.Data;
-  });
-};
+    showKr,
+  }).then((res) => res.data.Data);

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

@@ -9,9 +9,11 @@ import "./index.scss";
 import { getOpenData, setSize } from "../../open-data-painter";
 import { isWx } from "../../../utils/bs-global";
 
-const RootNode = (props) => {
+function RootNode(props) {
   const {
-    data: { rootName = "", rootId = 0, avatar = {}, searchType },
+    data: {
+      rootName = "", rootId = 0, avatar = {}, searchType,
+    },
   } = props;
 
   const [normalRootImg, setNormalRootImg] = useState("");
@@ -23,26 +25,26 @@ const RootNode = (props) => {
   const { direction, darkTheme } = context;
 
   const getRootIcon = () => {
-    if (searchType == "company")
+    if (searchType == "company") {
       return (
         <span className={classNames(`${preCls}--root-node-icon__company`)} />
       );
+    }
     if (searchType == "user") {
       if (hasAvatar) {
         return (
           <img src={avatar.small} width={24} style={{ borderRadius: "50%" }} />
         );
-      } else {
-        return (
-          <span
-            className={classNames(`${preCls}--root-node-icon__user`)}
-            style={{ backgroundColor: color }}
-          >
-            {/* <OpenUserName id={rootId} name={rootName} /> */}
-            {rootName[0]}
-          </span>
-        );
       }
+      return (
+        <span
+          className={classNames(`${preCls}--root-node-icon__user`)}
+          style={{ backgroundColor: color }}
+        >
+          {/* <OpenUserName id={rootId} name={rootName} /> */}
+          {rootName[0]}
+        </span>
+      );
     }
     if (searchType == "depart") {
       return (
@@ -74,13 +76,12 @@ const RootNode = (props) => {
 
   const generalCanvas = (type = "normal", rootName) => {
     const canvas = document.createElement("canvas");
-    const font =
-      "normal 14px/24px Arial,Verdana,Helvetica Neue,Helvetica,sans-serif,PingFang SC,Microsoft YaHei";
-    let ctx = canvas.getContext("2d");
+    const font = "normal 14px/24px Arial,Verdana,Helvetica Neue,Helvetica,sans-serif,PingFang SC,Microsoft YaHei";
+    const ctx = canvas.getContext("2d");
     ctx.font = font;
     // const fitStr = fittingString(ctx, rootName, 268);
     const { width } = ctx.measureText(rootName);
-    const actualWidth = Math.min(width, 268)
+    const actualWidth = Math.min(width, 268);
     setSize(canvas, ctx, actualWidth, 24); // 设置画布尺寸
     setImgWidth(actualWidth);
     ctx.textBaseline = "middle";
@@ -93,22 +94,22 @@ const RootNode = (props) => {
   };
 
   useEffect(() => {
-    (searchType == "user" || searchType == "depart") &&
-      rootName.length &&
-      getRootName();
+    (searchType == "user" || searchType == "depart")
+      && rootName.length
+      && getRootName();
   }, [rootName, rootId]);
 
   return (
     <div
       className={classNames(
         `${preCls}--root-node-wrapper`,
-        `${preCls}--root-node-wrapper__${direction}`
+        `${preCls}--root-node-wrapper__${direction}`,
       )}
     >
       <div className={classNames(`${preCls}--root-node`)}>
         {getRootIcon()}
         {searchType !== "user" && searchType !== "depart" && (
-          
+
           <span className={classNames(`${preCls}--root-node-text`)}>
             {rootName}
           </span>
@@ -138,5 +139,5 @@ const RootNode = (props) => {
       )}
     </div>
   );
-};
+}
 export default RootNode;

package/src/components/okr-flow/utils/config.js

@@ -2,7 +2,7 @@ export function getBSGlobal(name) {
   return name ? BSGlobal && BSGlobal[name] : BSGlobal;
 }
 
-export const OkrTypeSetting = getBSGlobal('OkrAdvancedSetting').KRSetting.OkrTypeSetting;
-export const OkrClassifySetting = getBSGlobal('OkrAdvancedSetting').KRSetting.OkrClassify;
+export const { OkrTypeSetting } = getBSGlobal("OkrAdvancedSetting").KRSetting;
+export const OkrClassifySetting = getBSGlobal("OkrAdvancedSetting").KRSetting.OkrClassify;
 
-export const KrWeightSetting = getBSGlobal('OkrAdvancedSetting').KRSetting.KrWeight;
+export const KrWeightSetting = getBSGlobal("OkrAdvancedSetting").KRSetting.KrWeight;

package/src/components/okr-flow/utils/helper.js

@@ -1,25 +1,26 @@
 export const debounce = (func, wait, immediate) => {
-  var timeout, result;
+  let timeout; let
+    result;
 
-  var debounced = function() {
-    var context = this;
-    var args = arguments;
+  const debounced = function () {
+    const context = this;
+    const args = arguments;
 
     if (timeout) clearTimeout(timeout);
 
-    var later = function() {
+    const later = function () {
       timeout = null;
       if (!immediate) result = func.apply(context, args);
     };
 
-    var callNow = immediate && !timeout;
+    const callNow = immediate && !timeout;
     timeout = setTimeout(later, wait);
     if (callNow) result = func.apply(this, args);
 
     return result;
   };
 
-  debounced.cancel = function() {
+  debounced.cancel = function () {
     clearTimeout(timeout);
     timeout = null;
   };

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

@@ -1,25 +1,24 @@
-import { isNode } from '@titaui/react-flow-renderer';
-import dagre from '@titaui/dagre';
+import { isNode } from "@titaui/react-flow-renderer";
+import dagre from "@titaui/dagre";
 
-import ChildNode from '../child-node';
-import RootNode from '../root-node';
+import ChildNode from "../child-node";
+import RootNode from "../root-node";
 
 export const nodeTypes = {
-  ChildNode: ChildNode,
-  RootNode: RootNode,
+  ChildNode,
+  RootNode,
 };
 
-
-export const getLayoutedElements = (elements, direction = 'horizontal') => {
-  const isHorizontal = direction === 'horizontal';
+export const getLayoutedElements = (elements, direction = "horizontal") => {
+  const isHorizontal = direction === "horizontal";
 
   const nodeWidth = 320;
   const nodeHeight = 96;
   const dagreGraph = new dagre.graphlib.Graph();
   dagreGraph.setDefaultEdgeLabel(() => ({}));
-  dagreGraph.setGraph({ rankdir: isHorizontal ? 'LR' : 'TB', ranksep: 80, nodesep: 12 });
+  dagreGraph.setGraph({ rankdir: isHorizontal ? "LR" : "TB", ranksep: 80, nodesep: 12 });
 
-  elements.forEach(el => {
+  elements.forEach((el) => {
     if (isNode(el)) {
       dagreGraph.setNode(el.id, { width: nodeWidth, height: nodeHeight });
     } else {
@@ -27,11 +26,11 @@ export const getLayoutedElements = (elements, direction = 'horizontal') => {
     }
   });
   dagre.layout(dagreGraph);
-  return elements.map(el => {
+  return elements.map((el) => {
     if (isNode(el)) {
       const nodeWithPosition = dagreGraph.node(el.id);
-      el.targetPosition = isHorizontal ? 'left' : 'top';
-      el.sourcePosition = isHorizontal ? 'right' : 'bottom';
+      el.targetPosition = isHorizontal ? "left" : "top";
+      el.sourcePosition = isHorizontal ? "right" : "bottom";
       el.position = {
         x: nodeWithPosition.x,
         y: nodeWithPosition.y,
@@ -41,4 +40,3 @@ export const getLayoutedElements = (elements, direction = 'horizontal') => {
     return el;
   });
 };
-