@titaui/pc 1.9.0 → 1.9.4

package/src/components/menus/components/flip-menu-card/index.tsx

@@ -1,18 +1,24 @@
-import React, { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import MenuCard from '../menu-card';
-import FlipBackHander from './flip-back-header';
-import MenuCloseBtn from '../menu-close-btn';
-import DragResize from '../drag-resize';
-import preCls from './precls';
-import './index.scss';
+import React, {
+  useState,
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+} from "react";
+import ReactDOM from "react-dom";
+import classNames from "classnames";
+import MenuCard from "../menu-card";
+import FlipBackHander from "./flip-back-header";
+import MenuCloseBtn from "../menu-close-btn";
+import DragResize from "../drag-resize";
+import preCls from "./precls";
+import "./index.scss";
 
 interface Props {
   children: any;
   defaultWidth: number;
   collapseMenu: Function;
-  onChange?: Function
+  onChange?: Function;
 }
 
 export interface flipRefIns {
@@ -22,18 +28,15 @@ export interface flipRefIns {
 }
 
 export default forwardRef((props: Props, ref) => {
-  const {
-    children,
-    defaultWidth,
-    collapseMenu,
-    onChange = () => { }
-  } = props;
+  const { children, defaultWidth, collapseMenu, onChange = () => {} } = props;
 
   const [isBack, setIsBack] = useState(false);
   const [isFloat, setIsFloat] = useState(false);
   const [isFloatHide, setIsFloatHide] = useState(false);
   const [isHideTopRightIcon, setIsHideTopRightIcon] = useState(false);
 
+  const [showMore, setShowMore] = useState(false);
+
   const hideFloatRef = useRef<any>();
   const flipCardRef = useRef<any>();
   const flipFrontRef = useRef<any>();
@@ -42,168 +45,213 @@ export default forwardRef((props: Props, ref) => {
   const goBackHandler = () => {
     if (!isBack) return;
     setMenuHideIcon(true);
-    flipBackRef.current.style.position = 'absolute';
-    flipFrontRef.current.style.display = 'block';
+    flipBackRef.current.style.position = "absolute";
+    flipFrontRef.current.style.display = "block";
     setTimeout(() => {
-      flipFrontRef.current.style.position = 'relative';
-      flipBackRef.current.style.display = 'none';
+      flipFrontRef.current.style.position = "relative";
+      flipBackRef.current.style.display = "none";
       setMenuHideIcon(false);
-    }, 600)
+    }, 600);
     setIsBack(false);
     onChange(false);
-  }
+  };
 
   const nextHandler = () => {
     if (isBack) return;
     setMenuHideIcon(true);
-    flipFrontRef.current.style.position = 'absolute';
-    flipBackRef.current.style.display = 'block';
+    flipFrontRef.current.style.position = "absolute";
+    flipBackRef.current.style.display = "block";
     setTimeout(() => {
-      flipBackRef.current.style.position = 'relative';
-      flipFrontRef.current.style.display = 'none';
+      flipBackRef.current.style.position = "relative";
+      flipFrontRef.current.style.display = "none";
       setMenuHideIcon(false);
-    }, 600)
+    }, 600);
     setIsBack(true);
     onChange(true);
-  }
+  };
 
-  const setMenuHideIcon = isHide => {
+  const setMenuHideIcon = (isHide) => {
     if (isHide === false && isFloat) return; // 如果是浮动状态则不能显示隐藏按钮
     setIsHideTopRightIcon(isHide);
-  }
+  };
 
   useEffect(() => {
     setMenuHideIcon(isFloat);
   }, [isFloat]);
 
   useImperativeHandle(ref, () => ({
-    'next': nextHandler,
-    'goback': goBackHandler,
-  }))
+    next: nextHandler,
+    goback: goBackHandler,
+  }));
 
   const onMenuHideHandler = () => {
     collapseMenu(!isFloat); // 最外层菜单with=0
-    setIsFloat(!isFloat);   // 浮动菜单，设置阴影
-    setTimeout(() => {      // 1秒后隐藏菜单到左侧
-      setIsFloatHide(!isFloatHide);
-    }, !isFloat ? 400 : 0)
-  }
+    setIsFloat(!isFloat); // 浮动菜单，设置阴影
+    setTimeout(
+      () => {
+        // 1秒后隐藏菜单到左侧
+        setIsFloatHide(!isFloatHide);
+      },
+      !isFloat ? 400 : 0
+    );
+  };
 
   const removeCloseFloat = () => {
     clearTimeout(hideFloatRef.current);
-  }
+  };
 
   // 隐藏浮动的菜单（通用）
-  const hideFlipCard = e => {
+  const hideFlipCard = (e) => {
     if (!isFloat) return; // 非浮动状态下不隐藏
     removeCloseFloat();
     hideFloatRef.current = setTimeout(() => {
       setIsFloatHide(true);
-    }, 400)
-  }
+    }, 400);
+  };
 
-  const onFixedHideIconMouseEnter = e => {
+  const onFixedHideIconMouseEnter = (e) => {
     e.stopPropagation();
     removeCloseFloat();
     setIsFloatHide(false);
-  }
+  };
 
-  const onFixedHideIconMouseLeave = e => {
+  const onFixedHideIconMouseLeave = (e) => {
     e.stopPropagation();
     hideFlipCard(e);
-  }
+  };
 
-  const onFixedHideIconClickHandler = e => {
+  const onFixedHideIconClickHandler = (e) => {
     e.stopPropagation();
     collapseMenu(false);
     setIsFloat(false);
     setIsFloatHide(false);
-  }
+  };
 
-  const onFlipMouseEnterHandler = e => {
+  const onFlipMouseEnterHandler = (e) => {
     e.stopPropagation();
     removeCloseFloat();
-  }
+  };
 
-  const onFlipMouseLeaveHandler = e => {
+  const onFlipMouseLeaveHandler = (e) => {
     e.stopPropagation();
-    if (e.currentTarget.className.indexOf('titaui-flip-card--is-float-hide') != -1) {
-      return
-    };
+    if (
+      e.currentTarget.className.indexOf("titaui-flip-card--is-float-hide") != -1
+    ) {
+      return;
+    }
     hideFlipCard(e);
-  }
-
-  return <React.Fragment>
-    <div
-      ref={flipCardRef}
-      onMouseEnter={onFlipMouseEnterHandler}
-      onMouseLeave={onFlipMouseLeaveHandler}
-      className={classNames(preCls, {
-        [`${preCls}--is-back`]: isBack,
-        [`${preCls}--is-float`]: isFloat,
-        [`${preCls}--is-float-hide`]: isFloatHide,
-      })}
-    >
-      <DragResize
-        minWidth={defaultWidth - 10}
-        maxWidth={600}
-        defaultWidth={defaultWidth}
+  };
+
+  useEffect(() => {
+    const targetNode = document.getElementsByClassName(
+      "simplebar-content-wrapper"
+    )[0];
+
+    const config = { attributes: true, childList: true, subtree: true };
+
+    const callback = function (_mutationsList, _observer) {
+      const scrollArea = document.getElementsByClassName(
+        "simplebar-content-wrapper"
+      )[0];
+      if (scrollArea && scrollArea.scrollHeight > scrollArea.offsetHeight) {
+        setShowMore(true);
+      } else {
+        setShowMore(false);
+      }
+    };
+    const observer = new MutationObserver(callback);
+
+    targetNode && observer.observe(targetNode, config);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <React.Fragment>
+      <div
+        ref={flipCardRef}
+        onMouseEnter={onFlipMouseEnterHandler}
+        onMouseLeave={onFlipMouseLeaveHandler}
+        className={classNames(preCls, {
+          [`${preCls}--is-back`]: isBack,
+          [`${preCls}--is-float`]: isFloat,
+          [`${preCls}--is-float-hide`]: isFloatHide,
+        })}
       >
-        <div className={classNames(`${preCls}__inner`)}>
-
-          {/* 第一屏的内容 */}
-          <div
-            ref={flipFrontRef}
-            className={classNames(`${preCls}__inner-front`)}
-          >
-            <div className={classNames(`${preCls}__inner-front-content`, {
-              [`${preCls}__inner-front-content--is-float`]: isFloat,
-              [`${preCls}__inner-front-content--is-float-hide`]: isFloatHide
-            })}>
-              <MenuCard style={{ 'padding': '28px 12px 28px 12px' }}>
-                {children[0]}
-              </MenuCard>
+        <DragResize
+          minWidth={defaultWidth - 10}
+          maxWidth={600}
+          defaultWidth={defaultWidth}
+        >
+          <div className={classNames(`${preCls}__inner`)}>
+            {/* 第一屏的内容 */}
+            <div
+              ref={flipFrontRef}
+              className={classNames(`${preCls}__inner-front`)}
+            >
+              <div
+                className={classNames(`${preCls}__inner-front-content`, {
+                  [`${preCls}__inner-front-content--is-float`]: isFloat,
+                  [`${preCls}__inner-front-content--is-float-hide`]:
+                    isFloatHide,
+                })}
+              >
+                <MenuCard style={{ padding: "28px 12px 28px 12px" }}>
+                  {children[0]}
+                </MenuCard>
+              </div>
             </div>
-          </div>
 
-          {/* 第二屏的内容 */}
-          <div
-            ref={flipBackRef}
-            className={classNames(`${preCls}__inner-back`)}
-          >
-            <div className={classNames(`${preCls}__inner-back-content`, {
-              [`${preCls}__inner-back-content--is-float`]: isFloat,
-              [`${preCls}__inner-back-content--is-float-hide`]: isFloatHide
-            })}>
-              <MenuCard style={{ 'padding': '42px 12px 28px 12px' }}>
-                <FlipBackHander onClick={goBackHandler} />
-                {children[1]}
-              </MenuCard>
+            {/* 第二屏的内容 */}
+            <div
+              ref={flipBackRef}
+              className={classNames(`${preCls}__inner-back`)}
+            >
+              <div
+                className={classNames(`${preCls}__inner-back-content`, {
+                  [`${preCls}__inner-back-content--is-float`]: isFloat,
+                  [`${preCls}__inner-back-content--is-float-hide`]: isFloatHide,
+                })}
+              >
+                <MenuCard style={{ padding: "42px 12px 28px 12px" }}>
+                  <FlipBackHander onClick={goBackHandler} />
+                  {children[1]}
+                </MenuCard>
+              </div>
             </div>
+            {showMore && (
+              <div className={`${preCls}__has-more`}>
+              </div>
+            )}
           </div>
-        </div>
-      </DragResize>
-
-      {/* 菜单右上角的隐藏ICON */}
-      {!isHideTopRightIcon && <MenuCloseBtn
-        className={classNames(`${preCls}__top-right-hide-icon`)}
-        isAutoShow={true}
-        onClick={onMenuHideHandler}
-      />}
-    </div>
-
-    {/* 页面最左侧的隐藏ICON */}
-    {isFloat && ReactDOM.createPortal(
-      <span className={classNames(`${preCls}__fixed-hide-icon`)}>
-        <MenuCloseBtn
-          isClose={true}
-          isAutoShow={false}
-          onClick={onFixedHideIconClickHandler}
-          onMouseEnter={onFixedHideIconMouseEnter}
-          onMouseLeave={onFixedHideIconMouseLeave}
-        />
-      </span>,
-      document.body
-    )}
-  </React.Fragment>
-})
+        </DragResize>
+
+        {/* 菜单右上角的隐藏ICON */}
+        {!isHideTopRightIcon && (
+          <MenuCloseBtn
+            className={classNames(`${preCls}__top-right-hide-icon`)}
+            isAutoShow={true}
+            onClick={onMenuHideHandler}
+          />
+        )}
+      </div>
+
+      {/* 页面最左侧的隐藏ICON */}
+      {isFloat &&
+        ReactDOM.createPortal(
+          <span className={classNames(`${preCls}__fixed-hide-icon`)}>
+            <MenuCloseBtn
+              isClose={true}
+              isAutoShow={false}
+              onClick={onFixedHideIconClickHandler}
+              onMouseEnter={onFixedHideIconMouseEnter}
+              onMouseLeave={onFixedHideIconMouseLeave}
+            />
+          </span>,
+          document.body
+        )}
+    </React.Fragment>
+  );
+});

package/src/components/menus/components/flip-menu-card/light.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 4</title>
+    <g id="整体框架" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-98.000000, -504.000000)" id="编组-4">
+            <g transform="translate(98.000000, 504.000000)">
+                <rect id="矩形" x="0" y="0" width="16" height="16" rx="1"></rect>
+                <g id="double-left" transform="translate(8.333333, 8.000000) rotate(-90.000000) translate(-8.333333, -8.000000) translate(2.333333, 1.000000)" fill="#2879FF" fill-rule="nonzero">
+                    <path d="M-1.76793705,3.3938889 L-1.75125494,3.40915022 L3.65139574,8.51106147 L9.06523913,3.41309131 C9.34060773,3.15378577 9.78335553,3.14884771 10.0651005,3.39816722 L10.0818093,3.41343148 C10.0819295,3.41354477 10.0820495,3.41365807 10.0821696,3.41377143 C10.3568954,3.67320717 10.3619721,4.09038252 10.0976325,4.35565042 L10.0814489,4.37138173 L4.18879147,9.92030247 C4.05610644,10.0452476 3.88456021,10.111135 3.7108896,10.1179771 C3.50761457,10.1410503 3.29591324,10.0821891 3.13579683,9.94151673 L3.11683434,9.92424333 L-2.76746471,4.36744057 C-3.04244275,4.1077667 -3.04767927,3.69025351 -2.78329081,3.42456679 L-2.76710395,3.40881027 L-2.76674348,3.40847055 C-2.49162737,3.14940283 -2.04923783,3.1446155 -1.76793705,3.3938889 Z" id="路径" transform="translate(3.657203, 6.666667) scale(-1, 1) rotate(-90.000000) translate(-3.657203, -6.666667) "></path>
+                    <path d="M5.14583122,4.27441254 L5.1580251,4.28556785 L9.10712094,8.01483661 L13.0643981,4.28844864 C13.2656802,4.0989079 13.5893091,4.09529839 13.795252,4.2775398 L13.8074654,4.2886973 C13.8075532,4.2887801 13.8076409,4.28886292 13.8077287,4.28894578 C14.008541,4.47858168 14.0122519,4.78351817 13.8190315,4.97741714 L13.8072019,4.98891602 L9.49993314,9.04492868 C9.40294634,9.13625801 9.27755368,9.18441881 9.15060828,9.18942001 C9.00202328,9.20628554 8.84727914,9.16326061 8.73024121,9.06043534 L8.71638048,9.04780928 L4.41522124,4.98603523 C4.2142246,4.79622525 4.21039694,4.49104178 4.40365307,4.2968367 L4.41548494,4.28531938 L4.41574843,4.28507108 C4.61684599,4.09570415 4.94021294,4.09220485 5.14583122,4.27441254 Z" id="路径" fill-opacity="0.3" transform="translate(9.111366, 6.666667) scale(-1, 1) rotate(-90.000000) translate(-9.111366, -6.666667) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/menus/components/menu-tree/tree-node/follower/index.tsx

@@ -6,6 +6,7 @@ import Tooltip from '../../../../../tooltip';
 import { OkrMenusContext } from '../../../../context';
 import Avatar from '../avatar';
 import preCls from "../../precls";
+import { getLocale } from "../../../../../../utils/getLocale";
 
 import "./index.scss";
 
@@ -35,7 +36,7 @@ export default (props) => {
 
     <span className={classNames(`${preCls}__follower-node-cancel`)} onClick={onCancelFollowHandler}>
       <Tooltip
-        overlay={<span>{locale.unsubscribe}</span>}
+        overlay={<span>{getLocale(locale.unsubscribe)}</span>}
         placement="top"
         align={{ 'offset': [0, 5] }}
       >

package/src/components/menus/export-modules/appraisal-menus/index.scss

@@ -1,5 +1,5 @@
 @mixin boxScroll {
-  height: 100%;
+  height: auto;
   overflow: overlay;
 
   &::-webkit-scrollbar {

package/src/components/upload-photo-modal/index.scss

@@ -220,7 +220,6 @@
       &--show {
         display: block;
         opacity: 0;
-        cursor: pointer;
         width: 56px;
         height: 22px;
         position: absolute;
@@ -235,14 +234,13 @@
       color: #bfc7d5;
       line-height: 22px;
       &--show {
-        cursor: pointer;
         color: #2879ff;
         &:hover {
-          color: #DFE3EA;
+          color: #5C8EFF;
         }
       }
       &--hover {
-        color: #DFE3EA;
+        color: #5C8EFF;
       }
     }
     &-preview {

package/src/pages/personal-info/components/base-info/index.scss

@@ -34,7 +34,7 @@
       font-size: 14px;
       font-weight: normal;
       color: #2879FF;
-      line-height: 26px;
+      line-height: 28px;
       background: rgba(40, 121, 255, 0.2);
       &:hover {
         color: #fff;
@@ -65,6 +65,7 @@
     width: 342px;
     .form-field-input__border--disabled input:disabled {
       color: #6F7886;
+      cursor: default;
     }
   }
   .form-field-input__label {

package/src/pages/personal-info/components/edit-base-info/index.tsx

@@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect } from 'react';
 import Form from '../../../../components/form';
 import { getUserInfoFun, saveUserInfo } from '../../request-api';
 import Toast from '../../../../components/toast';
-// import Input from './input';
 import Dialog from '../../../../components/dialog';
 import './index.scss';
 
@@ -26,6 +25,11 @@ const EditBaseInfo = (props) => {
 			...userInfo,
 			name: value || ''
 		});
+    if(value.length > 50 || value.length === 0) {
+      setIsDisable(true);
+    } else {
+      setIsDisable(false);
+    }
 		setIsEdit(true);
 	};
 
@@ -34,6 +38,11 @@ const EditBaseInfo = (props) => {
 			...userInfo,
 			mobile: value || ''
 		});
+    if(value.length !== 11 ) {
+      setIsDisable(true);
+    }else {
+      setIsDisable(false);
+    }
 		setIsEdit(true);
 	};
 
@@ -46,7 +55,7 @@ const EditBaseInfo = (props) => {
 	};
 
 	const handleSaveUserInfo = () => {
-		if (!userInfo.email || !userInfo.mobile || !userInfo.name || isDisable) {
+		if (!userInfo.email || !userInfo.mobile || !userInfo.name || userInfo.name.length > 50) {
       setIsDisable(true);
 			return;
 		} else {
@@ -70,17 +79,6 @@ const EditBaseInfo = (props) => {
 		});
 	}, []);
 
-	useEffect(
-		() => {
-			if (userInfo.name && userInfo.mobile && isEdit) {
-				setIsDisable(false);
-			} else {
-				setIsDisable(true);
-			}
-		},
-		[ userInfo, isEdit ]
-	);
-
 	return (
 		<Dialog
 			visible={visible}
@@ -115,7 +113,11 @@ const EditBaseInfo = (props) => {
 					{
 						tip: '姓名只能为中文，英文字母和数字及下划线的组合',
 						test: /^((?!(\uff08|\uff09)).)*$/g
-					}
+					},
+          {
+            tip: `姓名不能超过${50}个字`,
+            test: /^[\s\S]{0,50}$/,
+          },
 				]}
 				value={userInfo.name}
 				onChange={handleNameChange}
@@ -134,7 +136,7 @@ const EditBaseInfo = (props) => {
 						test: /^[\s\S]+$/
 					},
 					{
-						tip: '请输入11位手机号',
+						tip: '格式错误，海外手机格式如：(+852)52345678',
 						test: /^1[3456789]\d{9}$/
 					}
 				]}

package/yarn-error.log

@@ -1,103 +0,0 @@
-Arguments: 
-  /usr/local/bin/node /usr/local/bin/yarn
-
-PATH: 
-  /opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/opt/homebrew/bin:/opt/homebrew/sbin
-
-Yarn version: 
-  1.22.10
-
-Node version: 
-  12.22.1
-
-Platform: 
-  darwin x64
-
-Trace: 
-  SyntaxError: /Users/yang/tita/titaui-pc/package.json: Unexpected token < in JSON at position 26
-      at JSON.parse (<anonymous>)
-      at /usr/local/lib/node_modules/yarn/lib/cli.js:1625:59
-      at Generator.next (<anonymous>)
-      at step (/usr/local/lib/node_modules/yarn/lib/cli.js:310:30)
-      at /usr/local/lib/node_modules/yarn/lib/cli.js:321:13
-
-npm manifest: 
-  {
-    "name": "@titaui/pc",
-  <<<<<<< HEAD
-    "version": "1.2.22",
-  =======
-    "version": "1.2.13",
-  >>>>>>> master
-    "nameCN": "",
-    "description": "",
-    "main": "src/index.js",
-    "scripts": {
-      "storybook": "start-storybook -p 6006 --no-dll",
-      "start": "dev_server=on webpack-dev-server --disableHostCheck=true --progress --colors  --config webpack-stories.config.js",
-      "build-storybook": "build-storybook --docs --no-dll",
-      "build:es": "babel src -d es --ignore **/__tests__",
-      "build:lib": "cross-env OUTPUT_MODULE=commonjs babel src -d lib --ignore **/__tests__",
-      "build:umd": "webpack --config ./.scripts/webpack.umd.js",
-      "build": "npm run build:lib && npm run build:es && npm run build:umd"
-    },
-    "author": "",
-    "license": "ISC",
-    "devDependencies": {
-      "del": "^6.0.0",
-      "gulp": "^3.x",
-      "gulp-autoprefixer": "^7.0.1",
-      "gulp-babel": "^8.0.0",
-      "gulp-concat": "^2.6.1",
-      "gulp-cssbeautify": "^3.0.0",
-      "gulp-cssnano": "^2.1.3",
-      "gulp-filesize": "0.0.6",
-      "gulp-postcss": "^9.0.0",
-      "gulp-rename": "^2.0.0",
-      "gulp-replace": "^1.0.0",
-      "gulp-sass": "^4.1.0",
-      "gulp-sourcemaps": "^2.6.5",
-      "sass-resources-loader": "^2.2.1"
-    },
-    "dependencies": {
-      "@titaui/dagre": "^0.8.8-pre",
-      "@titaui/rc-tree2": "^4.1.15",
-      "@titaui/rc-trigger": "^5.2.5",
-      "@titaui/react-flow-renderer": "9.5.4",
-      "@titaui/toast": "^1.0.0",
-      "axios": "^0.21.1",
-      "classnames": "^2.2.6",
-      "clone-deep": "^4.0.1",
-      "d3-cloud": "^1.2.5",
-      "dayjs": "^1.10.4",
-      "html2canvas": "^1.0.0-rc.7",
-      "moment": "^2.29.1",
-      "qs": "^6.10.1",
-      "rc-checkbox": "^2.3.2",
-      "rc-dialog": "8.5.2",
-      "rc-drawer": "^4.3.1",
-      "rc-input-number": "^5.0.0",
-      "rc-pagination": "^3.1.6",
-      "rc-queue-anim": "1.4.1",
-      "rc-select": "^12.1.7",
-      "rc-switch": "^3.2.2",
-      "rc-table": "^7.13.2",
-      "rc-tabs": "^11.7.3",
-      "rc-tooltip": "^5.1.1",
-      "rc-tree": "^4.1.5",
-      "rc-trigger": "^5.2.3",
-      "rc-upload": "^4.2.0-alpha.0",
-      "rc-util": "^5.13.1",
-      "react-collapse": "^5.1.0",
-      "react-perfect-scrollbar": "^1.5.2",
-      "url-parse": "^1.5.1",
-      "uuid": "^3.1.0",
-      "wordcloud": "^1.2.2"
-    }
-  }
-
-yarn manifest: 
-  No manifest
-
-Lockfile: 
-  No lockfile