@titaui/pc 1.7.41 → 1.7.45

package/lib/components/nav-top/components/user-message/index.js

@@ -166,13 +166,10 @@ var UserMessage = function UserMessage() {
           }; // @ts-ignore
 
           window.util.openGift(options);
-        }
-
-        if (weeklyReportIndicator.length) {
-          var _window;
+        } // if(weeklyReportIndicator.length){
+        // 	window?.Talent.app.vent.trigger('open-weekly-report-modal')
+        // }
 
-          (_window = window) === null || _window === void 0 ? void 0 : _window.Talent.app.vent.trigger('open-weekly-report-modal');
-        }
       }
     });
   };

package/lib/components/nav-top/request.apis.js

@@ -60,7 +60,7 @@ var clearInforms = function clearInforms() {
 exports.clearInforms = clearInforms;
 
 var clearReplys = function clearReplys() {
-  return (0, _request.rdelete)("v1")("Indicator/Clear?message_type=0&indicator_type=17");
+  return (0, _request.rdelete)("v1")("Indicator/Clear?message_type=0&indicator_type=mLeaveandComment");
 };
 
 exports.clearReplys = clearReplys;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@titaui/pc",
-  "version": "1.7.41",
+  "version": "1.7.45",
   "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;

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

@@ -0,0 +1,35 @@
+
+.titaui-text-avatar {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  vertical-align: middle;
+  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
+  color: #89919f;
+  font-size: 12px;
+  line-height: 18px;
+  border: 1px solid transparent;
+  padding: 3px 4px;
+  box-sizing: border-box;
+  &__icon {
+    vertical-align: middle;
+    display: inline-block;
+    width: 11px;
+    height: 12px;
+    margin-right: 7px;
+    background: url("../liebiao-geren.svg") no-repeat;
+    background-size: contain;
+  }
+  &__name {
+    vertical-align: middle;
+  }
+  &--editable {
+    &:hover {
+      cursor: pointer;
+      border-radius: 4px;
+      border-color: #e9ecf0;
+    }
+  }
+}