@titaui/pc 1.7.56 → 1.7.60

package/lib/components/img-viewer/index.js

@@ -150,7 +150,7 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var renderPreviewer = function renderPreviewer() {
     if (!visible) return null;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: prefix
+      className: (0, _classnames["default"])(prefix, 'document-mouse-event-ignore')
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: prefix + "__header"
     }, /*#__PURE__*/_react["default"].createElement("span", {

package/lib/components/menus/export-modules/manage-menus/index.js

@@ -78,7 +78,7 @@ var ManageMenus = function ManageMenus(props) {
     var search = history.location.search;
     var activeMenu = new _handleHighlight.JudgeManageHighLightMenu(search).getHighLightMenu();
     setSelectedMenuKeys([activeMenu]);
-  }, [history]);
+  }, [history.location.pathname, history.location.search]);
 
   var onSelectHandler = function onSelectHandler(selectedKyes, _ref) {
     var node = _ref.node;

package/lib/components/okr-detail/components/icon-text/index.js

@@ -74,8 +74,12 @@ var IconText = function IconText(props) {
     }
   }, [content]);
 
-  var clickHandler = function clickHandler() {
-    if (!editable) return;
+  var clickHandler = function clickHandler(e) {
+    if (!editable) {
+      e.stopPropagation();
+      return;
+    }
+
     onTextClick();
   };
 

package/lib/components/okr-detail/components/okr-tree/tree-node/kr-parent-node/index.js

@@ -196,8 +196,11 @@ var _default = function _default(props) {
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: "tu-icon-okr"
   })), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "__kr-parent-node-target-title"))
-  }, data.parentOkr.workName)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(_precls["default"], "__kr-parent-node-target-title")),
+    dangerouslySetInnerHTML: {
+      __html: data.parentOkr.workName
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "__kr-parent-node-h1"))
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "__kr-parent-node-prefix"))

package/lib/components/okr-flow/child-node/index.js

@@ -71,12 +71,12 @@ var ChildNode = function ChildNode(props) {
 
   var expandChild = function expandChild(e) {
     e.stopPropagation();
-    isChildExpand ? onChildClose(id) : onChildExpand(data);
+    isChildExpand ? onChildClose && onChildClose(id) : onChildExpand && onChildExpand(data);
   };
 
   var expandParent = function expandParent(e) {
     e.stopPropagation();
-    onParentExpand(data);
+    onParentExpand && onParentExpand(data);
   };
 
   var NodeTypeComp = modelType == 'kr' ? _krNode["default"] : _workNode["default"];

package/lib/components/upload/components/uploadedPreview.js

@@ -195,7 +195,7 @@ var UploadedPreview = /*#__PURE__*/function (_PureComponent) {
           uploadResultItem = _this$props.uploadResultItem,
           index = _this$props.index;
       return /*#__PURE__*/_react["default"].createElement(_style.PreviewContent, {
-        className: ['preview__content', className].join(' ')
+        className: ['preview__content document-mouse-event-ignore', className].join(' ')
       }, /*#__PURE__*/_react["default"].createElement(_style.PreviewImageWrapper, null, this.renderPreviewThumbnail()), /*#__PURE__*/_react["default"].createElement(_style.PreviewMessageWrapper, null, /*#__PURE__*/_react["default"].createElement(_titaUi.Tooltip, {
         content: uploadResultItem.FileName,
         container: document.body

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@titaui/pc",
-  "version": "1.7.56",
+  "version": "1.7.60",
   "nameCN": "",
   "description": "",
-  "main": "lib/index.js",
+  "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",

package/src/components/avatar/default.tsx

@@ -0,0 +1,173 @@
+import React, { FC, useState, useCallback } from "react";
+import { isWechat, OpenUserName } from "../../utils/open-data";
+import Tooltip from "../tooltip";
+import CloseSvg from "./img/avatar-close-normal.svg";
+import CloseRedSvg from './img/avatar-close-red.svg';
+
+import "./index.scss";
+interface IAvatarProps {
+  src?: string;
+  name: string;
+  color: string;
+  size?: Size;
+  userId?: number;
+  style?: React.CSSProperties;
+  nameTips?: (string) => React.ReactElement;
+  showNameTips?: boolean;
+  onClick?: any;
+  onMouseEnter?: any;
+  onMouseLeave?: any;
+  canDelUser?: boolean;
+  onDelUser?: Function;
+}
+
+interface Size {
+  width: number;
+  textNum: number;
+  fontSize: number;
+}
+
+const Avatar: FC<IAvatarProps> = (props) => {
+  const {
+    size = { width: 24, textNum: 1, fontSize: 12 },
+    src,
+    userId,
+    style,
+    name,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    nameTips = (name) => name,
+    showNameTips = false,
+    color,
+    canDelUser,
+    onDelUser,
+  } = props;
+
+  const [mouseIsEnter, setMouseIsEnter] = useState(false);
+  const [mouseIsEnterCloseIcon, setMouseIsEnterCloseIcon] = useState(false);
+
+  const handleDelUser = () => {
+    onDelUser && onDelUser({ name, id: userId });
+  };
+
+  const handleMouseEnter = useCallback(() => {
+    setMouseIsEnter(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setMouseIsEnter(false);
+  }, []);
+
+  const handleCloseIconMouseEnter = useCallback(() => {
+    setMouseIsEnterCloseIcon(true);
+  }, []);
+
+  const handleCloseIconMouseLeave = useCallback(() => {
+    setMouseIsEnterCloseIcon(false);
+  }, []);
+
+  const renderImgAvatar = () => {
+    return (
+      <img
+        style={{ width: size.width, height: size.width, verticalAlign: "top" }}
+        src={src}
+      />
+    );
+  };
+  const renderTextAvatar = () => {
+    if (isWechat())
+      return (
+        <div
+          className="titaui-pc-avatar--text"
+          style={{
+            width: size.width,
+            height: size.width,
+            backgroundColor: color,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-block",
+              width: size.fontSize + "px",
+              margin: "0 auto",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              fontSize: size.fontSize + "px",
+              lineHeight: size.width + "px",
+            }}
+          >
+            <OpenUserName name={name} id={userId} />
+          </div>
+        </div>
+      );
+    let cuttedName = "";
+    let cuttedNameLen = 0;
+    for (let i = 0, lent = name.length; i < lent; i++) {
+      let len = 1;
+      name[i].match(/[0-9a-z]/) && (len = 0.6);
+      if (cuttedNameLen + len > size.textNum) break;
+      cuttedNameLen += len;
+      cuttedName += name[i];
+    }
+
+    return (
+      <div
+        className="titaui-pc-avatar--text"
+        style={{
+          width: size.width,
+          height: size.width,
+          backgroundColor: color,
+          fontSize: size.fontSize + "px",
+        }}
+      >
+        {cuttedName}
+      </div>
+    );
+  };
+
+  const hasAvatar = src && !src.match(/default\w*.jpg$/);
+  const avatarContent = hasAvatar ? renderImgAvatar() : renderTextAvatar();
+
+  let avatar = (
+    <div
+      className="titaui-pc-avator-container"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        onClick={handleDelUser}
+        onMouseLeave={handleCloseIconMouseLeave}
+        onMouseEnter={handleCloseIconMouseEnter}
+        className={`titaui-pc-avator__delete-wrapper ${canDelUser && mouseIsEnter ? "titaui-pc-avator--enter" : ""
+          }`}
+      >
+        <img width={6} height={6} src={mouseIsEnterCloseIcon ? CloseRedSvg : CloseSvg} />
+      </div>
+      <div
+        className="titaui-pc-avator-wrapper"
+        style={style}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {avatarContent}
+      </div>
+    </div>
+  );
+
+  if (showNameTips) {
+    avatar = (
+      <Tooltip
+        overlay={nameTips(<OpenUserName name={name} id={userId} />)}
+        placement="top"
+        align={{ offset: [0, 5] }}
+      >
+        {avatar}
+      </Tooltip>
+    );
+  }
+  return avatar;
+};
+
+export default Avatar;

package/src/components/avatar/icon-avatar/index.scss

@@ -0,0 +1,13 @@
+.tita-icon-avatar{
+  position: relative;
+  .titaui-pc-avator-container{
+    display: inline-flex;
+  }
+  &-image{
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    bottom: -3px;
+    right: -2px;
+  }
+}

package/src/components/avatar/icon-avatar/index.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from "react";
+import Avatar from "../default";
+import attitudeArr from "../../upvote/attitude";
+
+import "./index.scss";
+
+interface IconAvatarProps {
+  userId?: any;
+  avatar?: any;
+  name?: any;
+  type?: Number;
+  [key: string]: any;
+}
+
+const IconAvatar: FC<IconAvatarProps> = ({
+  userId,
+  avatar,
+  name,
+  type,
+  ...restProps
+}) => {
+  return (
+    <div className={`tita-icon-avatar`}>
+      <Avatar
+        userId={userId}
+        src={avatar.HasAvatar || avatar.hasAvatar ? avatar.medium : ""}
+        color={avatar.color}
+        name={name}
+        {...restProps}
+      />
+      <img
+        className={`tita-icon-avatar-image`}
+        src={
+          // @ts-ignore
+          attitudeArr.find((att) => att.type == type).img
+        }
+      />
+    </div>
+  );
+};
+
+export default IconAvatar;

package/src/components/avatar/img/avatar-close-normal.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+	<path d="M5.873 5.872c-.163.163-.42.17-.573.017L3 3.59l-2.3 2.3c-.154.154-.41.146-.573-.017-.163-.162-.17-.419-.017-.572L2.41 3 .11.7C-.043.546-.036.29.127.127.29-.036.547-.043.7.11L3 2.41 5.3.11c.154-.153.41-.146.573.017.163.163.17.42.017.573L3.59 3l2.3 2.3c.153.153.146.41-.017.572z" fill="#A4ACB9" fill-rule="nonzero" />
+</svg>

package/src/components/avatar/img/avatar-close-red.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+	<path d="M5.873 5.872c-.163.163-.42.17-.573.017L3 3.59l-2.3 2.3c-.154.154-.41.146-.573-.017-.163-.162-.17-.419-.017-.572L2.41 3 .11.7C-.043.546-.036.29.127.127.29-.036.547-.043.7.11L3 2.41 5.3.11c.154-.153.41-.146.573.017.163.163.17.42.017.573L3.59 3l2.3 2.3c.153.153.146.41-.017.572z" fill="#F05E5E" fill-rule="nonzero" />
+</svg>

package/src/components/avatar/index.scss

@@ -0,0 +1,41 @@
+.titaui-pc-avator-container {
+  position: relative;
+  display: inline-block;
+}
+.titaui-pc-avator-wrapper {
+  display: inline-block;
+  border-radius: 50%;
+  overflow: hidden;
+  position: relative; 
+}
+.titaui-pc-avatar--text {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 1;
+  color: #fff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.titaui-pc-avator__delete-wrapper {
+  position: absolute;
+  top: -2px;
+  right: 0;
+  z-index: 1;
+  width: 14px;
+  height: 14px;
+  background: #F0F2F5;
+  box-shadow: 0px 2px 4px 0px rgba(127, 145, 180, 0.2);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  display: none;
+  &:hover {
+    cursor: pointer;
+  }
+}
+.titaui-pc-avator--enter {
+  display: flex;
+}

package/src/components/avatar/index.tsx

@@ -0,0 +1,12 @@
+import Avatar from './default';
+import IconAvatarCmp from './icon-avatar';
+import NameAvatarCmp from './name-avatar';
+import NumAvatarCmp from './num-avatar';
+import TextAvatarCmp from './text-avatar';
+
+Avatar.Icon = IconAvatarCmp;
+Avatar.Name = NameAvatarCmp;
+Avatar.Num = NumAvatarCmp;
+Avatar.Text = TextAvatarCmp;
+
+export default Avatar;

package/src/components/avatar/liebiao-geren.svg

@@ -0,0 +1,7 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="951" height="1024" viewBox="0 0 951 1024">
+<title></title>
+<g id="icomoon-ignore">
+</g>
+<path fill='#89919F' d="M456.229 569.371c-153.829 0-279.086-125.257-279.086-279.086s125.257-279.086 279.086-279.086c153.829 0 279.086 125.029 279.086 279.086s-125.257 279.086-279.086 279.086zM456.229 75.2c-118.629 0-215.086 96.457-215.086 215.086s96.457 215.086 215.086 215.086c118.629 0 215.086-96.457 215.086-215.086s-96.457-215.086-215.086-215.086zM828.8 1015.543h-745.143c-42.743 0-77.714-34.971-77.714-77.714 0-187.2 152.229-339.429 339.429-339.429h221.943c187.2 0 339.429 152.229 339.429 339.429-0.229 42.743-34.971 77.714-77.943 77.714zM345.371 662.4c-73.143 0-142.171 28.8-194.514 80.914-52.114 52.114-80.914 121.143-80.914 194.514 0 7.543 6.171 13.714 13.714 13.714h745.143c7.543 0 13.714-6.171 13.714-13.714 0-73.143-28.8-142.171-80.914-194.514-52.114-52.114-121.143-80.914-194.514-80.914h-221.714z"></path>
+</svg>

package/src/components/avatar/name-avatar/index.scss

@@ -0,0 +1,55 @@
+$fontFamily: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+
+.titaui-pc-avator__name-avatar-container {
+  position: relative;
+  display: inline-block;
+  display: flex;
+  align-items: center;
+  .titaui-pc-avator-wrapper {
+    display: inline-block;
+    border-radius: 50%;
+    overflow: hidden;
+    position: relative;
+  }
+  .titaui-pc-avatar--text {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 1;
+    color: #fff;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .titaui-pc-avator__delete-wrapper {
+    position: absolute;
+    top: -2px;
+    z-index: 1;
+    width: 14px;
+    height: 14px;
+    background: #f0f2f5;
+    box-shadow: 0px 2px 4px 0px rgba(127, 145, 180, 0.2);
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    display: none;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  .titaui-pc-avator--enter {
+    display: flex;
+  }
+  
+  .titaui-pc-avator__name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    font-size: 14px;
+    font-family: $fontFamily;
+    color: #6F7886;
+    line-height: 20px;
+  }
+}

package/src/components/avatar/name-avatar/index.tsx

@@ -0,0 +1,183 @@
+import React, { FC, useState, useCallback, useRef, useEffect } from "react";
+import { isWechat, OpenUserName } from "../../../utils/open-data";
+import Tooltip from "../../tooltip";
+import CloseSvg from "../img/avatar-close-normal.svg";
+import CloseRedSvg from '../img/avatar-close-red.svg';
+
+import "./index.scss";
+interface INameAvatarProps {
+  src?: string;
+  name: string;
+  color: string;
+  size?: Size;
+  userId?: number;
+  style?: React.CSSProperties;
+  showNameTips?: boolean;
+  onClick?: any;
+  onMouseEnter?: any;
+  onMouseLeave?: any;
+  canDelUser?: boolean;
+  onDelUser?: Function;
+  textWidth?: number;
+  textClass?: string;
+}
+
+interface Size {
+  width: number;
+  textNum: number;
+  fontSize: number;
+}
+
+const NameAvatar: FC<INameAvatarProps> = (props) => {
+  const {
+    size = { width: 24, textNum: 1, fontSize: 12 },
+    src,
+    userId,
+    style,
+    name,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    showNameTips = false,
+    color,
+    canDelUser,
+    onDelUser,
+    textWidth = 42,
+    textClass
+  } = props;
+  const hasAvatar = src && !src.match(/default\w*.jpg$/);
+
+  const [mouseIsEnterUser, setMouseIsEnterUser] = useState(false);
+  const [isNameOverflow, setIsNameOverflow] = useState(false);
+  const [mouseIsEnterCloseIcon, setMouseIsEnterCloseIcon] = useState(false);
+  const textRef = useRef();
+
+  const handleDelUser = () => {
+    onDelUser && onDelUser({ name, id: userId });
+  };
+
+  const handleMouseEnter = useCallback(() => {
+    setMouseIsEnterUser(true);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setMouseIsEnterUser(false);
+  }, []);
+
+  const handleCloseIconMouseEnter = useCallback(() => {
+    setMouseIsEnterCloseIcon(true);
+  }, []);
+
+  const handleCloseIconMouseLeave = useCallback(() => {
+    setMouseIsEnterCloseIcon(false);
+  }, []);
+
+  const renderImgAvatar = () => {
+    return (
+      <img
+        style={{ width: size.width, height: size.width, verticalAlign: "top" }}
+        src={src}
+      />
+    );
+  };
+  const renderTextAvatar = () => {
+    if (isWechat())
+      return (
+        <div
+          className="titaui-pc-avatar--text"
+          style={{
+            width: size.width,
+            height: size.width,
+            backgroundColor: color,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-block",
+              width: size.fontSize + "px",
+              margin: "0 auto",
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              fontSize: size.fontSize + "px",
+              lineHeight: size.width + "px",
+            }}
+          >
+            <OpenUserName name={name} id={userId} />
+          </div>
+        </div>
+      );
+    let cuttedName = "";
+    let cuttedNameLen = 0;
+    for (let i = 0, lent = name.length; i < lent; i++) {
+      let len = 1;
+      name[i].match(/[0-9a-z]/) && (len = 0.6);
+      if (cuttedNameLen + len > size.textNum) break;
+      cuttedNameLen += len;
+      cuttedName += name[i];
+    }
+
+    return (
+      <div
+        className="titaui-pc-avatar--text"
+        style={{
+          width: size.width,
+          height: size.width,
+          backgroundColor: color,
+          fontSize: size.fontSize + "px",
+        }}
+      >
+        {cuttedName}
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    if(textRef.current.getBoundingClientRect().width > textWidth) {
+      setIsNameOverflow(true);
+    } else {
+      setIsNameOverflow(false);
+    }
+  }, [textWidth, name])
+
+  return (
+    <div
+      className="titaui-pc-avator__name-avatar-container"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        onClick={handleDelUser}
+        onMouseLeave={handleCloseIconMouseLeave}
+        onMouseEnter={handleCloseIconMouseEnter}
+        className={`titaui-pc-avator__delete-wrapper ${
+          canDelUser && mouseIsEnterUser ? "titaui-pc-avator--enter" : ""
+        }`}
+
+        style={{left: size.width - 14 + 'px'}}
+      >
+        <img width={6} height={6} src={mouseIsEnterCloseIcon ? CloseRedSvg : CloseSvg} />
+      </div>
+      <div
+        className="titaui-pc-avator-wrapper"
+        style={style}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {hasAvatar ? renderImgAvatar() : renderTextAvatar()}
+      </div>
+      {showNameTips && isNameOverflow ? 
+        <Tooltip overlay={<OpenUserName name={name} id={userId} />} placement="top">
+          <span className={`titaui-pc-avator__name ${textClass}`} style={{width: textWidth}}>
+            <span ref={textRef}>{name}</span>
+          </span>
+        </Tooltip>
+        : 
+        <span className={`titaui-pc-avator__name ${textClass}`} style={{width: textWidth}}>
+          <span ref={textRef}><OpenUserName name={name} id={userId} /></span>
+        </span>}
+    </div>
+  );
+};
+
+export default NameAvatar;

package/src/components/avatar/num-avatar/index.scss

@@ -0,0 +1,12 @@
+.tita-num-avatar{
+  cursor: pointer;
+  width: 28px;
+  height: 28px;
+  background: #2879FF;
+  border-radius: 15px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 28px;
+  text-align: center;
+}

package/src/components/avatar/num-avatar/index.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from "react";
+import { formatNum } from "../../../utils/bs-global";
+
+import "./index.scss";
+
+interface IconAvatarProps {
+  num?: number;
+  [key: string]: any;
+}
+
+const IconAvatar: FC<IconAvatarProps> = ({ num, ...restProps }) => {
+  return (
+    <div className={`tita-num-avatar`} {...restProps}>
+      {formatNum(num)}
+    </div>
+  );
+};
+
+export default IconAvatar;