@titaui/pc 1.7.71 → 1.7.75

package/lib/components/period-selector/index.js

@@ -50,6 +50,7 @@ function PeriodSelector(_ref) {
       _ref$isFetch = _ref.isFetch,
       isFetch = _ref$isFetch === void 0 ? true : _ref$isFetch,
       onChange = _ref.onChange,
+      getPopupContainer = _ref.getPopupContainer,
       selected = _ref.selected,
       selectorClass = _ref.selectorClass,
       _ref$showCustom = _ref.showCustom,
@@ -163,6 +164,7 @@ function PeriodSelector(_ref) {
     className: (0, _classnames["default"])("titaui-period-selector"),
     style: style
   }, /*#__PURE__*/_react["default"].createElement(_popup["default"], {
+    getPopupContainer: getPopupContainer,
     popupVisible: visible,
     popupPlacement: align,
     extraClass: popClass,

package/lib/components/photo-card/index.js

@@ -21,6 +21,8 @@ var _conditionRender = _interopRequireDefault(require("../condition-render"));
 
 var _avatar = _interopRequireDefault(require("../../components/avatar"));
 
+var _openData = require("../../utils/open-data");
+
 var _bsGlobal = require("../../utils/bs-global");
 
 var _card = _interopRequireDefault(require("./components/card"));
@@ -139,7 +141,10 @@ var PhotoCard = function PhotoCard(props) {
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(prefixCls, "__name"))
   }, /*#__PURE__*/_react["default"].createElement(_tooltipText["default"], {
-    text: userInfo.name,
+    text: /*#__PURE__*/_react["default"].createElement(_openData.OpenUserName, {
+      name: userInfo.name,
+      id: userInfo.userId
+    }),
     maxWidth: 160,
     mouseEnterDelay: 0.8
   }))), /*#__PURE__*/_react["default"].createElement(_conditionRender["default"], {

package/lib/components/task-relation-modal/search/principal.js

@@ -37,7 +37,9 @@ var Principal = function Principal(props) {
   var onChange = props.onChange,
       _props$initValue = props.initValue,
       initValue = _props$initValue === void 0 ? [] : _props$initValue,
-      setRelation = props.setRelation;
+      setRelation = props.setRelation,
+      _props$position = props.position,
+      position = _props$position === void 0 ? "bottom" : _props$position;
 
   var _useState = (0, _react.useState)(initValue),
       _useState2 = _slicedToArray(_useState, 2),
@@ -54,6 +56,8 @@ var Principal = function Principal(props) {
       selectText = _useState6[0],
       setSelectText = _useState6[1];
 
+  var userSelectorRef = (0, _react.useRef)(document.createElement('div'));
+
   var onSelectUser = function onSelectUser(_ref) {
     var users = _ref.users;
     return setUsers(users);
@@ -83,24 +87,29 @@ var Principal = function Principal(props) {
 
     isInit && onChange(users);
   }, [users]);
-  return /*#__PURE__*/_react["default"].createElement(_userSelector["default"], {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: userSelectorRef
+  }, /*#__PURE__*/_react["default"].createElement(_userSelector["default"], {
     multiple: true,
     selectNodes: {
       users: users
     },
     onOk: onSelectUser,
-    position: "bottomLeft",
+    position: position,
     disabledDepartSelect: true,
     panes: {
       depart: true
     },
+    getPopupContainer: function getPopupContainer() {
+      return userSelectorRef.current;
+    },
     searchedPanes: {
       user: true
     },
     popClass: "pull-screen-ignore"
   }, /*#__PURE__*/_react["default"].createElement(_searchDropdown["default"], null, /*#__PURE__*/_react["default"].createElement("span", {
     className: "titaui-search-dropdown__principal-text"
-  }, selectText)));
+  }, selectText))));
 };
 
 var _default = Principal;

package/lib/components/task-relation-modal/tree/okr-tree/search-form.js

@@ -82,6 +82,7 @@ var SearchForm = function SearchForm(props) {
       relation = _useState10[0],
       setRelation = _useState10[1];
 
+  var dilagRef = (0, _react.useRef)(document.createElement('div'));
   (0, _react.useEffect)(function () {
     onChange(_objectSpread({
       okrType: okrType,
@@ -93,12 +94,17 @@ var SearchForm = function SearchForm(props) {
       relation: relation
     }, cycle));
   }, [okrType, users, keyWords, cycle, relation]);
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: dilagRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "rel-okr-tree__search-item"
   }, /*#__PURE__*/_react["default"].createElement(_periodSelector["default"], {
     selected: cycle,
     yearsRange: [2019, 2030],
     onChange: setCycle,
+    getPopupContainer: function getPopupContainer() {
+      return dilagRef.current;
+    },
     popClass: "pull-screen-ignore"
   }, /*#__PURE__*/_react["default"].createElement(_searchDropdown["default"], null, (0, _common.formatPeriod)(cycle)))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "rel-okr-tree__search-item"

package/lib/components/task-relation-modal/tree/work-tree/search-form.js

@@ -79,6 +79,7 @@ var SearchForm = function SearchForm(props) {
     className: "rel-work-tree__search-item"
   }, /*#__PURE__*/_react["default"].createElement(_principal["default"], {
     onChange: setUsers,
+    position: "bottomLeft",
     initValue: [],
     setRelation: setRelation
   })), /*#__PURE__*/_react["default"].createElement("div", {

package/lib/components/user-selector/category-selector-panel/group-tree.js

@@ -49,7 +49,7 @@ var _default = function _default(props) {
       isGetRoot: isGetRoot,
       sourceFrom: sourceFrom
     }).then(function (groups) {
-      return (0, _utils.translateGroupsToTreeNode)(groups.Data);
+      return (0, _utils.translateGroupsToTreeNode)(groups.Data || []);
     });
   };
 

package/lib/components/user-selector/export-modules/group-selector/index.js

@@ -105,7 +105,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       sourceFrom: sourceFrom,
       getUsedGroups: getUsedGroups
     }).then(function (groups) {
-      return (0, _utils.translateGroupsToTreeNode)(groups.Data);
+      return (0, _utils.translateGroupsToTreeNode)(groups.Data || []);
     });
   };
 
@@ -113,7 +113,7 @@ var _default = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _requestApis.searchGroups)({
       searchKey: searchKey
     }).then(function (groups) {
-      return (0, _utils.translateGroupsToTreeNode)(groups.Data);
+      return (0, _utils.translateGroupsToTreeNode)(groups.Data || []);
     });
   };
 

package/lib/components/user-selector/searched-panel/index.js

@@ -94,9 +94,9 @@ var _default = function _default(props) {
           departments = _res$Data.departments,
           groups = _res$Data.groups,
           users = _res$Data.users;
-      setPerson((0, _utils.translateUsersToTreeNode)(users));
-      setGroup((0, _utils.translateGroupsToTreeNode)(groups));
-      setDeparts((0, _utils.translateDepartsToTreeNode)(departments));
+      setPerson((0, _utils.translateUsersToTreeNode)(users || []));
+      setGroup((0, _utils.translateGroupsToTreeNode)(groups || []));
+      setDeparts((0, _utils.translateDepartsToTreeNode)(departments || []));
       setLoading(false);
     });
   }, [searchKey]); // 计算结果，是否显示空值

package/lib/components/user-selector/select-tree/tree-nodes/tree-group-node/index.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _tooltip = _interopRequireDefault(require("../../../../tooltip"));
+
 var _context = require("../../../context");
 
 require("./index.css");
@@ -40,7 +42,10 @@ var _default = function _default(props) {
   }), /*#__PURE__*/_react["default"].createElement("span", {
     className: "perspm-group__name",
     title: ""
-  }, data.name), !departOnly && /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react["default"].createElement(_tooltip["default"].Text, {
+    text: data.name,
+    isPercent: true
+  })), !departOnly && /*#__PURE__*/_react["default"].createElement("span", {
     className: "perspm-group__member-count",
     title: ""
   }, data.groupUserNums ? "".concat(data.groupUserNums, "\u4EBA") : ''), !isSelectedPanel ? /*#__PURE__*/_react["default"].createElement("span", {

package/package.json

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

@@ -1,173 +0,0 @@
-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

@@ -1,13 +0,0 @@
-.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

@@ -1,42 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

@@ -1,3 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<!-- 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

@@ -1,55 +0,0 @@
-$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;
-  }
-}