@titaui/pc 1.7.45 → 1.7.49

package/src/components/okr-detail/base-info/other-infos/date-cycle/index.tsx

@@ -1,38 +0,0 @@
-import React, { FC, useState, useCallback } from 'react';
-import OkrPeriodSelector from '../../../../okr-period-selector';
-import { SelectCycleData } from '../../../../okr-period-selector/select-cycle';
-import './index.scss';
-
-interface IDateCycleProps {
-  cycle: SelectCycleData | undefined;
-  setCycle: (cycle: SelectCycleData) => any;
-  okrId: number;
-  canEdit?: boolean;
-}
-
-const DateCycle: FC<IDateCycleProps> = ({cycle, setCycle, okrId, canEdit = false}) => {
-
-  const [isFocus, setIsFocus] = useState(false);
-  const handleButtonFocus = useCallback(() => {
-    canEdit && setIsFocus(true);
-  }, [canEdit])
-
-  const handleButtonBlur = useCallback(() => {
-    setIsFocus(false);
-  }, [])
-
-  const renderClickArea = ({btnRef, clickCallback, text}) => {
-    return <button onFocus={handleButtonFocus} onBlur={handleButtonBlur} className={`base-info-date-cycle__button ${isFocus ? 'base-info-date-cycle__button--focus' : ''} ${!canEdit && 'base-info-date-cycle__button--disable'}`} ref={btnRef} onClick={clickCallback as any}>
-      <span className='base-info-date-cycle__format-text'>{text.split(',')[0]}<span className='base-info-date-cycle__format-text-range'>（{text.split(',')[1]}）</span></span>
-    </button>
-  }
-
-  return (
-    <div className='base-info-cycle-wrapper'>
-      <div className='base-info-cycle-title'>周期</div>
-      <OkrPeriodSelector renderInnerContent={renderClickArea} cycle={cycle} setCycle={setCycle} okrId={okrId} canEdit={canEdit} getCycleRange={true}/>
-    </div>
-  )
-}
-
-export default DateCycle;

package/src/components/okr-detail/base-info/other-infos/index.tsx

@@ -1,3 +0,0 @@
-import OtherInfos from './other-infos';
-
-export default OtherInfos;

package/src/components/okr-detail/base-info/other-infos/okr-type/index.scss

@@ -1,61 +0,0 @@
-$font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-
-.base-info-type__button {
-  height: 36px;
-  width: 100%;
-  border: 1px solid transparent;
-  border-radius: 3px;
-  display: flex;
-  padding: 0 10px;
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: border 0.2s ease;
-  background: #ffffff;
-  &:hover {
-    border: 1px solid #e6eaef;
-  }
-  .base-info-type__format-text {
-    flex: 1;
-    width: 0;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
-    overflow: hidden;
-    font-size: 14px;
-    color: #6f7886;
-    line-height: 20px;
-    font-weight: 400;
-    .base-info-type__format-text-icon {
-      margin-right: 4px;
-    }
-  }
-}
-.base-info-type__button--focus {
-  border: 1px solid #e6eaef;
-}
-
-.base-info-type-wrapper {
-  font-family: $font-family;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 50%;
-  padding-right: 30px;
-  .base-info-type-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #141c28;
-    line-height: 22px;
-    padding-left: 10px;
-    position: relative;
-    margin-top: 12px;
-  }
-}
-
-.base-info-type__button--disable {
-  &:hover {
-    border: 1px solid transparent;
-    cursor: text;
-  }
-}

package/src/components/okr-detail/base-info/other-infos/okr-type/index.tsx

@@ -1,79 +0,0 @@
-import React, { FC, useState, useCallback, useContext } from "react";
-import { OpenDepartmentName } from "../../../../../utils/open-data";
-import BaseOkrType from "../../../components/base-okr-type";
-import { GeneralDataContext } from "../../../context";
-
-import "./index.scss";
-
-interface IOkrTypeProps {
-  okrId: number;
-  canEdit?: boolean;
-}
-
-const OkrType: FC<IOkrTypeProps> = ({ okrId, canEdit = false }) => {
-  const { generalOkrType, setGeneralOkrType } = useContext(GeneralDataContext);
-  const {
-    okrType,
-    departmentId,
-    departmentName,
-    groupId,
-    groupName,
-  } = generalOkrType;
-
-  const [isFocus, setIsFocus] = useState(false);
-
-  const okrTypeMap = {
-    1: { icon: "tu-icon-liebiao-geren", text: "个人" }, // 个人
-    2: {
-      icon: "tu-icon-liebiao-xiashu",
-      text: departmentId == -1 ? '默认部门' : <OpenDepartmentName id={departmentId} name={departmentName} />,
-    }, // 部门
-    3: { icon: "tu-icon-gong_si", text: "公司" }, // 公司
-    4: { icon: "tu-icon-liebiao-tuandui", text: groupName || "团队" }, // 团队
-  };
-
-  const handleButtonFocus = useCallback(() => {
-    canEdit && setIsFocus(true);
-  }, [canEdit]);
-
-  const handleButtonBlur = useCallback(() => {
-    setIsFocus(false);
-  }, []);
-
-  const renderInnerContent = () => {
-    return (
-      <button
-        onFocus={handleButtonFocus}
-        onBlur={handleButtonBlur}
-        className={`base-info-type__button ${
-          isFocus ? "base-info-type__button--focus" : ""
-        } ${!canEdit && "base-info-type__button--disable"}`}
-      >
-        <span className="base-info-type__format-text">
-          <i className={`${okrTypeMap[okrType].icon} base-info-type__format-text-icon`}></i>
-          {okrTypeMap[okrType].text}
-        </span>
-      </button>
-    );
-  };
-
-  return (
-    <div className="base-info-type-wrapper">
-      <div className="base-info-type-title">类型</div>
-      {canEdit ? (
-        <BaseOkrType
-          renderInnerContent={renderInnerContent}
-          dept={{ departmentId, departmentName }}
-          type={{ typeId: okrType, typeName: okrTypeMap[okrType].text }}
-          team={{ groupId, groupName }}
-          okrId={okrId}
-          onTypeChange={setGeneralOkrType}
-        />
-      ) : (
-        renderInnerContent()
-      )}
-    </div>
-  );
-};
-
-export default OkrType;

package/src/components/okr-detail/base-info/other-infos/other-infos.scss

@@ -1,5 +0,0 @@
-.other-info-wrapper {
-  margin-bottom: 8px;
-  display: flex;
-  flex-wrap: wrap;
-}

package/src/components/okr-detail/base-info/other-infos/other-infos.tsx

@@ -1,77 +0,0 @@
-import React, { FC, useContext } from "react";
-import Classify from "./classify";
-import Principal from "./principal";
-import Visibility from "./visibility";
-import OkrType from "./okr-type";
-import DateCycle from "./date-cycle";
-import "./other-infos.scss";
-import { getOkrAdvancedSetting } from "../../../../utils/bs-global";
-import { GeneralDataContext } from "../../context";
-
-interface IOtherInfosProps {
-  classifyValue: number;
-  setClassifyValue: Function;
-  principalUser: any;
-  setPrincipalUser: Function;
-  visibility: number;
-  visiableLimit: any;
-  onChangeVisiableLimit: Function;
-  canEdit?: boolean;
-  okrId: number;
-}
-
-const OtherInfos: FC<IOtherInfosProps> = ({
-  okrId,
-  classifyValue = 0,
-  setClassifyValue,
-  principalUser,
-  setPrincipalUser,
-  visibility = 1,
-  visiableLimit,
-  onChangeVisiableLimit,
-  canEdit = false,
-}) => {
-  const setting = getOkrAdvancedSetting();
-  const {generalCycle, setGeneralCycle} = useContext(GeneralDataContext);
-
-  const handleChangeUser = (data) => {
-    setPrincipalUser({
-      name: data.name,
-      avatar: data.avatar,
-      id: data.userId,
-      ...data,
-    });
-  };
-
-  return (
-    <div className="other-info-wrapper">
-      <DateCycle okrId={okrId} cycle={generalCycle} setCycle={setGeneralCycle} canEdit={canEdit} />
-      <Principal
-        canEdit={canEdit}
-        user={principalUser}
-        onChangeUser={handleChangeUser}
-      />
-      <Visibility
-        canEdit={canEdit}
-        visibility={visibility}
-        visiableLimit={visiableLimit}
-        onChangeVisiableLimit={onChangeVisiableLimit}
-      />
-      {setting.KRSetting.OkrTypeSetting && (
-        <OkrType
-          okrId={okrId}
-          canEdit={canEdit}
-        />
-      )}
-      {setting.KRSetting.OkrClassify && (
-        <Classify
-          initValue={classifyValue}
-          onChangeClassify={setClassifyValue}
-          canEdit={canEdit}
-        />
-      )}
-    </div>
-  );
-};
-
-export default OtherInfos;

package/src/components/okr-detail/base-info/other-infos/principal/index.scss

@@ -1,32 +0,0 @@
-
-.base-info-other-infos__principal {
-  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-  margin-top: 12px;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 50%;
-  padding-right: 30px;
-  .base-info-other-infos__principal-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #141c28;
-    line-height: 22px;
-    padding-left: 10px;
-    position: relative;
-  }
-  .base-info-other-infos__principal-text {
-    margin-left: 6px;
-  }
-  .base-info-other-infos__principal-trigger-content {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-  }
-  .base-info-other-infos__principal-text--disable {
-    padding-left: 10px;
-    padding-top: 6px;
-  }
-}

package/src/components/okr-detail/base-info/other-infos/principal/index.tsx

@@ -1,117 +0,0 @@
-import React, { FC, useRef, useState } from "react";
-// @ts-ignore
-import Toast from '../../../../toast';
-import Avatar from '../../../../avatar';
-import BorderWrapper from '../common/border-wrapper';
-import UserSelector from "../../../../user-selector/index";
-import PopConfirm from '../../../../../components-v1/popConfirm';
-import './index.scss';
-
-interface IPrincipalProps {
-  user: any;
-  onChangeUser: Function;
-  canEdit?: boolean;
-}
-
-const Principal: FC<IPrincipalProps> = ({user, onChangeUser, canEdit = false}) => {
-
-  const selectorRef = useRef();
-  const borderWrapper = useRef();
-  const popConfirmRef = useRef();
-  const selectUserRef = useRef(document.createElement('div'));
-  const [selectUser, setSelectUser] = useState(user);
-
-  const handleSelected = ([user]) => {
-    if (user.nodeType !== "person") {
-      Toast.Error(`请选择具体负责人`)
-      return;
-    }
-    setSelectUser(user.data);
-    // @ts-ignore
-    popConfirmRef.current && popConfirmRef.current.getRef().show(selectUserRef.current);
-  };
-  
-  const cancelHandler = () => {
-    //@ts-ignore
-    popConfirmRef.current && popConfirmRef.current.getRef().hide();
-  }
-
-  const confirmHandler = async () => {
-    onChangeUser && onChangeUser(selectUser);
-    // @ts-ignore
-    selectorRef.current && selectorRef.current.close();
-    // @ts-ignore
-    borderWrapper.current.changeFocusState(false);
-    //@ts-ignore
-    popConfirmRef.current && popConfirmRef.current.getRef().hide();
-  };
-
-  return (
-    <div className="base-info-other-infos__principal">
-      <div className="base-info-other-infos__principal-title">负责人</div>
-      <div
-        className="base-info-other-infos__principal-user"
-        ref={selectUserRef}
-      >
-        {canEdit ? (
-          <PopConfirm
-            ref={popConfirmRef}
-            showArrow={false}
-            style={{ width: 300 }}
-            title="您确定把负责人的权限转交吗?"
-            onCancel={cancelHandler}
-            onConfirm={confirmHandler}
-          >
-            {/* @ts-ignore */}
-            <BorderWrapper ref={borderWrapper}>
-              <UserSelector
-                ref={selectorRef}
-                // @ts-ignore
-                multiple={false}
-                position="centerRight"
-                selectNodes={4}
-                onSelect={handleSelected}
-                disabledDepartSelect={true}
-                panes={{ depart: true }}
-                searchedPanes={{ user: true }}
-                popupAlign={{
-                  offset: [0, 0],
-                  overflow: { adjustX: true, adjustY: true },
-                  targetOffset: [12, 209],
-                }}
-                trigger={
-                  <div className="base-info-other-infos__principal-trigger-content"></div>
-                }
-              />
-              <Avatar.Name
-                showNameTips
-                textWidth={317}
-                size={{ width: 24, textNum: 1, fontSize: 14 }}
-                textClass={'base-info-other-infos__principal-text'}
-                name={user.name}
-                src={user.avatar.src || user.avatar.medium}
-                color={user.avatar.color}
-                userId={user.userId}
-              />
-            </BorderWrapper>
-          </PopConfirm>
-        ) : (
-          <div className="base-info-other-infos__principal-text--disable">
-            <Avatar.Name
-              showNameTips
-              textWidth={317}
-              size={{ width: 24, textNum: 1, fontSize: 14 }}
-              textClass={'base-info-other-infos__principal-text'}
-              name={user.name}
-              src={user.avatar.src || user.avatar.medium}
-              color={user.avatar.color}
-              userId={user.id}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Principal;

package/src/components/okr-detail/base-info/other-infos/visibility/index.scss

@@ -1,23 +0,0 @@
-
-.base-info-other-infos__visibility-wrapper {
-  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-  margin-top: 12px;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 50%;
-  padding-right: 30px;
-  .base-info-other-infos__visibility-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #141c28;
-    line-height: 22px;
-    padding-left: 10px;
-    position: relative;
-  }
-  .base-info-other-infos__visibility-select-text {
-    white-space: nowrap;
-    word-break: keep-all;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}

package/src/components/okr-detail/base-info/other-infos/visibility/index.tsx

@@ -1,129 +0,0 @@
-import React, { FC, useRef, useMemo, useCallback, useState, useEffect } from "react";
-import UserSelector from "../../../../user-selector/index";
-import SelectLayer from '../../../../select-layer';
-import './index.scss';
-import Tooltip from "../../../../tooltip";
-import { OpenDepartmentName, OpenUserName } from "../../../../../utils/open-data";
-
-const visibilityList = [
-  { value: 1, label: '全公司' },
-  { value: 2, label: '仅相关成员' },
-  { value: 3, label: '仅直接下属' },
-  { value: 4, label: '指定范围' },
-];
-
-const visibilityMapText = {
-  1: '全公司',
-  2: '仅相关成员',
-  3: '仅直接下属',
-  4: '指定范围'
-}
-
-interface IVisibilityProps {
-  visibility: any;
-  visiableLimit: any;
-  onChangeVisiableLimit: Function;
-  canEdit?: boolean;
-}
-
-const Visibility: FC<IVisibilityProps> = ({visibility, visiableLimit, onChangeVisiableLimit, canEdit = false}) => {
-  const [visibilityState, setVisibilityState] = useState(visibility);
-  const oldSelect = useRef();
-  const selectorRef = useRef();
-  const titleRef = useRef(document.createElement('div'));
-
-  const onOk = useCallback(selectNodes => {
-    const { departments, groups, users } = selectNodes;
-    if (departments.length === 0 && groups.length === 0 && users.length === 0) {
-      setVisibilityState(oldSelect.current);
-      // @ts-ignore
-      selectorRef.current && selectorRef.current.close();
-      return;
-    }
-    onChangeVisiableLimit && onChangeVisiableLimit(4, selectNodes)
-    // @ts-ignore
-    selectorRef.current && selectorRef.current.close();
-  }, [onChangeVisiableLimit])
-
-  const handleChangeVisibility = useCallback((data) => {
-    setVisibilityState(data.value);
-    if(data.value === 4) {
-      // @ts-ignore
-      selectorRef.current && selectorRef.current.open()
-    } else {
-      oldSelect.current = data.value;
-      onChangeVisiableLimit && onChangeVisiableLimit(data.value)
-    }
-  }, [onChangeVisiableLimit])
-
-  const renderText = useMemo(() => {
-    let result = [];
-    if (visiableLimit) {
-      visiableLimit.users && visiableLimit.users.length > 0 && visiableLimit.users.forEach((item, index) => {
-        if(index !== 0) {result.push('、')}
-        result.push(<OpenUserName name={item.name} id={item.userId} />)
-      }
-      );
-      visiableLimit.departments && visiableLimit.departments.length > 0 ? visiableLimit.departments.forEach((item, index) => {
-        result.push(index === 0 && result.length === 0 ? '' : '、')
-        result.push(<OpenDepartmentName name={item.name} id={item.id} />)
-      }) : ''
-      visiableLimit.groups && visiableLimit.groups.length > 0 ? visiableLimit.groups.forEach((item, index) => {
-        result.push(index === 0 && result.length === 0 ? '' : '、')
-        result.push(item.name);
-      }) : '' 
-    }
-    return result.length > 0 ? result : visibilityMapText[visibilityState];
-  }, [visiableLimit, visibilityState])
-
-  useEffect(() => {
-    setVisibilityState(visibility);
-  }, [visibility])
-  
-  return (
-    <div className="base-info-other-infos__visibility-wrapper">
-      <div className="base-info-other-infos__visibility-title" ref={titleRef}>
-        可见范围
-        <Tooltip
-          overlay={
-            "除所选范围外，超级管理员、目标管理员、目标负责人的部门负责人以及目标负责人、内部成员、关注者上级领导也可见"
-          }
-          placement="top"
-          align={{offset: [0, 0]}}
-        >
-          <span
-            className={"tu-icon-question-mark"}
-            style={{
-              display: "inline-block",
-              marginLeft: 8,
-              marginBottom: 3,
-              color: "#bfc7d5",
-              verticalAlign: "middle",
-            }}
-          />
-        </Tooltip>
-      </div>
-      <SelectLayer
-        canEdit={canEdit}
-        textClass="base-info-other-infos__visibility-select-text"
-        forceRenderText={visibility === 4}
-        initText={renderText as any}
-        items={visibilityList}
-        initValue={visibilityState}
-        onChangeSelect={handleChangeVisibility}
-      />
-      {canEdit ? (
-        <UserSelector           ref={selectorRef}
-          // @ts-ignore
-          multiple={true}
-          onOk={onOk}
-          position="centerRight"
-          selectNodes={visiableLimit || {}}
-          trigger={<div></div>}
-        />
-      ) : null}
-    </div>
-  );
-};
-
-export default Visibility;

package/src/components/okr-detail/base-info/person/index.scss

@@ -1,29 +0,0 @@
-.base-info__person-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  .base-info__person-item {
-    margin-right: 16px;
-    margin-bottom: 12px;
-  }
-  .base-info__person-text {
-    margin-left: 4px;
-    font-size: 14px;
-    font-weight: 400;
-    color: #6F7886;
-    line-height: 20px;
-  }
-  .base-info__person-add {
-    position: relative;
-    width: 70px;
-    &:hover {
-      cursor: pointer;
-    }
-  }
-  .base-info-other-infos__principal-trigger-content {
-    height: 100%;
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-  }
-}

package/src/components/okr-detail/base-info/person/index.tsx

@@ -1,69 +0,0 @@
-import React, { FC, useRef } from 'react';
-import Avatar from '../../../avatar';
-import UserSelector from '../../../user-selector';
-import AddSvg from '../img/base-info-add.svg';
-import Tooltip from "../../../tooltip";
-import './index.scss';
-
-interface IPersonProps {
-  users: any[];
-  canEdit?: boolean;
-  onAddUser?: Function;
-  onDelUser?: Function;
-  type?: 'participant' | 'followers'
-}
-
-const Person: FC<IPersonProps> = ({users, canEdit, onAddUser, onDelUser, type = 'participant'}) => {
-
-  const selectorRef = useRef();
-
-  const handleSelected = (data) => {
-    onAddUser && onAddUser(data, type);
-    // @ts-ignore
-    selectorRef.current && selectorRef.current.close();
-  };
-
-  return (
-    <div className='base-info__person-wrapper'>
-      {users && users.length > 0 && users.map(user => {
-        return (
-          <div className="base-info__person-item" key={user.id}>
-            <Avatar.Name
-              textClass={'base-info__person-text'}
-              showNameTips
-              canDelUser={canEdit}
-              textWidth={42}
-              onDelUser={onDelUser}
-              size={{ width: 24, textNum: 1, fontSize: 12 }}
-              name={user.name}
-              src={user.avatar.medium || user.avatar.Medium}
-              color={user.avatar.color}
-              userId={user.userId || user.id}
-            />
-          </div>
-        );
-      })}
-      {canEdit ? (
-        <div className='base-info__person-item base-info__person-add'>
-          <img src={AddSvg} />
-          <UserSelector             ref={selectorRef}
-            // @ts-ignore
-            multiple={true}
-            position="centerRight"
-            selectNodes={{}}
-            onOk={handleSelected}
-            destroyPopupOnHide={true}
-            trigger={
-              <div className='base-info-other-infos__principal-trigger-content'>
-                <Tooltip overlay={`添加${type === 'participant' ? '参与' : '关注'}人`} placement="top">
-                  <div style={{width: '24px', height: '24px'}}></div>
-                </Tooltip>
-              </div>
-            }/>
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-export default Person;