@titaui/pc 1.9.99 → 1.9.103

package/src/components/create-okr-modal/kr-items/krItem.tsx

@@ -1,188 +0,0 @@
-import React, {
-  ReactElement,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { getBSGlobal } from "../../../utils/bs-global";
-import KrItemWeight from "./kr-item-weight";
-import NewUserSelector from "../fields/okr-new-user-selector";
-import InputWithErrPopup from "../fields/input-with-err-popup";
-import { getLocale } from "../../../utils/getLocale";
-import "./index.scss";
-
-export interface KrData {
-  uuid: string;
-  principalId: number;
-  principalName: string;
-  userAvatar: {
-    Color: string;
-    HasAvatar: boolean;
-    Medium: string;
-  };
-  mileStoneName: string;
-  krWeight: number | string;
-  confidenceIndex: number;
-}
-
-interface Props {
-  krData: KrData;
-  changeKr: Function;
-  deleteKr: Function;
-  container: any;
-  index: number;
-  onKrInputStateChange: Function;
-  onAddKr: Function;
-  domRef?: any;
-  krIsValidate: boolean;
-  setIsInputContent: Function;
-}
-
-function KrItem({
-  krData,
-  changeKr,
-  deleteKr,
-  container,
-  index,
-  onKrInputStateChange,
-  onAddKr,
-  setIsInputContent,
-  domRef,
-  krIsValidate,
-}: Props): ReactElement {
-  const setting = getBSGlobal("OkrAdvancedSetting").KRSetting;
-  const openKrWeight = setting.KrWeight;
-  const [showDelIcon, setShowDelIcon] = useState(false);
-
-  const oldKrNameRef = useRef("");
-
-  const onUserSelectorSubmitHandler = (users) => {
-    changeKr({
-      ...krData,
-      principalId: users[0].Id,
-      principalName: users[0].Name,
-      userAvatar: users[0].UserAvatar,
-    });
-  };
-
-  const onKrNameInputChangeHandler = (e) => {
-    changeKr({
-      ...krData,
-      mileStoneName: e.target.value,
-    });
-  };
-
-  const onDeleteKrClickHandler = () => {
-    deleteKr(krData.uuid);
-  };
-
-  const formatUser = useMemo(() => ({
-    Medium: krData.userAvatar.Medium,
-    Color: krData.userAvatar.Color,
-    Name: krData.principalName,
-    Id: krData.principalId,
-  }), [
-    krData.userAvatar.Medium,
-    krData.principalName,
-    krData.principalName,
-    krData.principalId,
-  ]);
-
-  const handleMouseEnter = useCallback(() => {
-    setShowDelIcon(true);
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setShowDelIcon(false);
-  }, []);
-
-  const handleInputFocus = useCallback(() => {
-    onKrInputStateChange && onKrInputStateChange(true, krData);
-  }, [krData]);
-
-  const handleInputBlur = useCallback(() => {
-    onKrInputStateChange && onKrInputStateChange(false, krData);
-  }, [krData]);
-
-  // TODO 回车创建下一个kr并且自动聚焦到下一个kr
-  // const handleKeyUp = useCallback((e) => {
-  //   e.persist()
-  //   if (13 === e.keyCode) {
-  //     onAddKr && onAddKr();
-  //   }
-  // }, [onAddKr])
-
-  const handleOnKeyDown = useCallback(() => {
-    setIsInputContent(true);
-  }, [setIsInputContent]);
-
-  const handleOnKeyUp = useCallback((e) => {
-    e.persist();
-    // 解决按功能按钮的时候一直显示检测中
-    if (e.target.value === oldKrNameRef.current) {
-      setIsInputContent(false);
-    } else {
-      oldKrNameRef.current = e.target.value;
-    }
-  }, []);
-
-  return (
-    <div
-      className="create-kr-item-wrapper"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <a
-        className={`kr-item__delete-icon tu-icon-del ${
-          showDelIcon ? "kr-item__delete-icon--show" : ""
-        }`}
-        onClick={onDeleteKrClickHandler}
-      />
-      <div
-        className={`kr-item__right-block ${
-          krIsValidate
-            ? krData.mileStoneName && krData.mileStoneName.length <= 500
-              ? ""
-              : "kr-item__right-block--error"
-            : ""
-        }`}
-      >
-        <span className="kr-item__order">
-          KR
-          {index}
-        </span>
-        <div className="kr-item__input-wrapper">
-          <InputWithErrPopup
-            strLength={krData.mileStoneName ? krData.mileStoneName.length : 0}
-            maxLength={500}
-            position="top"
-          >
-            <input
-              className="kr-item__input"
-              type="text"
-              placeholder={getLocale("OKR_MyO_Pop_Keyresults")}
-              value={krData.mileStoneName}
-              onChange={onKrNameInputChangeHandler}
-              onFocus={handleInputFocus}
-              onBlur={handleInputBlur}
-              onKeyDown={handleOnKeyDown}
-              onKeyUp={handleOnKeyUp}
-              ref={domRef}
-            />
-          </InputWithErrPopup>
-          <div className="kr-item-right-block__white-block" />
-          <div className="kr-item-right-block__text-mask" />
-        </div>
-        {openKrWeight && <KrItemWeight krData={krData} changeKr={changeKr} />}
-        <NewUserSelector
-          user={formatUser}
-          container={container}
-          changeUser={onUserSelectorSubmitHandler}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default KrItem;

package/src/components/create-okr-modal/objectType.tsx

@@ -1,202 +0,0 @@
-import React, { Component, Fragment } from "react";
-import { RadioGroup, Radio } from "../../components-v1/radio";
-import { DropDownContent } from "./style";
-import StatelessDropdown from "../../components-v1/dropDownSelector/StatelessDropdown";
-import { BaseAuth } from "../../utils/auth";
-import UserSelector from "../user-selector";
-import { OpenDepartmentName } from "../../utils/open-data";
-import { getUserInfo } from "../../utils/bs-global";
-import { getLocale } from "../../utils/getLocale";
-// 干脆把数据封闭起来, 通过ref取状态
-interface ObjectTypeProps {
-  okrType: number;
-  okrTypeName: string;
-  depth?: any; // 默认部门数据
-  departmentId: number;
-  departmentName: string;
-  onSelected?: (...args: any[]) => any;
-  groupId?: number;
-  groupName?: string;
-}
-interface ObjectTypeState {
-  okrType: number;
-  depth: any;
-  departmentId: number;
-  departmentName: string;
-  label: string;
-  groupId?: number;
-  groupName?: string;
-  auth?: boolean;
-}
-const radios = () => [
-  { label: getLocale("OKR_MyO_Pop_Company"), value: 3 },
-  { label: getLocale("Mod_Department"), value: 2 },
-  { label: getLocale("OKR_MyO_Text_Team"), value: 4 },
-  { label: getLocale("OKR_MyO_Pop_Individual"), value: 1 },
-];
-export default class ObjectType extends Component<
-  ObjectTypeProps,
-  ObjectTypeState
-> {
-  constructor(props: ObjectTypeProps) {
-    super(props);
-    this.state = {
-      okrType: 0,
-      departmentName: "",
-      departmentId: 0,
-      depth: [],
-      label: "",
-      groupId: 0,
-      groupName: "",
-      auth: false,
-    };
-    // @ts-ignore
-    this.popup = React.createRef();
-    // @ts-ignore
-    this.departPopup = React.createRef();
-  }
-
-  componentWillMount() {
-    const {
-      okrType,
-      okrTypeName,
-      departmentName,
-      departmentId,
-      groupId,
-      groupName,
-    } = this.props;
-    const baseAuth = new BaseAuth();
-    const auth = baseAuth.isBoss() || baseAuth.isManager();
-    this.setState({
-      departmentName: okrType == 2 ? departmentName : "",
-      departmentId: okrType == 2 ? departmentId : 0,
-      okrType,
-      label: okrTypeName,
-      groupName: okrType == 4 ? groupName : "",
-      groupId: okrType == 4 ? groupId : 0,
-      auth,
-    });
-  }
-
-  onTeamSelect = ([info]) => {
-    this.setState({ groupName: info.data.name, groupId: info.data.id });
-    // @ts-ignore
-    this.popup.current.close();
-  };
-
-  onDepartSelect = (_nodeKey, { node }) => {
-    const { data } = node;
-    this.setState({
-      departmentName: data.name,
-      departmentId: data.id,
-      okrType: 2,
-      label: "",
-    });
-    // @ts-ignore
-    this.departPopup.current.close();
-  };
-
-  renderTeamType = () => (
-    <UserSelector.Group
-      // @ts-ignore
-      ref={this.popup}
-      // @ts-ignore
-      onSelect={this.onTeamSelect}
-      position="center"
-      trigger={(
-        <div
-          onClick={() => this.popup.current.open()}
-          style={{ width: "100%" }}
-        >
-          <StatelessDropdown
-            className="mx-w-240"
-            overlayClassName="has-underline"
-            labelText={getLocale("OKR_MyO_Text_Team")}
-          >
-            {this.state.groupName || getLocale("OKR_MyO_Text_Team")}
-          </StatelessDropdown>
-        </div>
-      )}
-    />
-  );
-
-  renderType = () => {
-    // 只有存在选择部门的情况
-    if (this.state.okrType === 2) {
-      return (
-        <UserSelector.Depart
-          // @ts-ignore
-          onSelect={this.onDepartSelect}
-          // @ts-ignore
-          ref={this.departPopup}
-          position="center"
-          trigger={(
-            <div
-              onClick={() => this.departPopup.current.open()}
-              style={{ width: "100%" }}
-            >
-              <StatelessDropdown
-                className="mx-w-240"
-                overlayClassName="has-underline"
-                labelText={getLocale("Mod_Department")}
-              >
-                <OpenDepartmentName
-                  id={this.state.departmentId}
-                  name={this.state.departmentName}
-                />
-              </StatelessDropdown>
-            </div>
-          )}
-        />
-      );
-    }
-    if (this.state.okrType === 4) {
-      return this.renderTeamType();
-    }
-    return <div style={{ height: 10 }} />;
-  };
-
-  handleChange = (okrType: any, label: string) => {
-    const { Department, DepartmentId } = getUserInfo();
-    if (okrType === 2) {
-      this.setState({
-        okrType,
-        label: "",
-        departmentId: DepartmentId,
-        departmentName: Department,
-      });
-    } else {
-      this.setState({
-        okrType,
-        label,
-        departmentId: this.props.departmentId,
-        departmentName: this.props.departmentName,
-      });
-    }
-  };
-
-  render() {
-    return (
-      <>
-        <RadioGroup
-          name="okrType"
-          labelText={getLocale("Mod_Type")}
-          style={{ marginBottom: 8 }}
-        >
-          {radios().map(({ label, value }) => (
-            <Radio
-              key={value}
-              value={value}
-              onChange={this.handleChange}
-              checked={value === this.state.okrType}
-            >
-              {label}
-            </Radio>
-            // Radio 切换的时候就直接把默认值带上
-          ))}
-        </RadioGroup>
-        <DropDownContent>{this.renderType()}</DropDownContent>
-      </>
-    );
-  }
-}

package/src/components/create-okr-modal/request-api.ts

@@ -1,76 +0,0 @@
-import axios from "axios";
-import qs from "qs";
-import {
-  GetCycleSettingParams,
-  UpdateOkrTypeParams,
-  UpdateOkrVisibilityParams,
-} from "./interface";
-
-const tenantId = (window.BSGlobal && window.BSGlobal.tenantInfo.Id) || 0;
-const userId = (window.BSGlobal && window.BSGlobal.loginUserInfo.Id) || 0;
-
-const requestDomain = () => {
-  if (!window.location.hostname.match(/dev/)) return "";
-  return "http://www.tita.gift";
-};
-
-export const getImageBase64ByUrl = (toUserId) => axios
-  .post(
-    `${requestDomain()}/api/v1/${tenantId}/${userId}/okr/share/getBase64Str`,
-    { toUserId },
-  )
-  .then((getBase64Str) => getBase64Str.data);
-
-export const createWidthKr = async (data: any) => {
-  const url = `${requestDomain()}/api/v2/${tenantId}/${userId}/work/createWithKr`;
-  const res = await axios.post(
-    url,
-    {
-      workType: 6,
-      ...data,
-    },
-    {
-      headers: { "Content-Type": "application/x-www-form-urlencoded" },
-      transformRequest: qs.stringify,
-    },
-  );
-  return res.data.Data;
-};
-
-export const getKrAnalysisInfos = async (params) => {
-  const url = `${requestDomain()}/api/v1/${tenantId}/${userId}/okr/create/analys`;
-  return axios.post(url, params).then((res) => res.data.Data);
-};
-
-export const updateOkrVisibility = async (
-  params: UpdateOkrVisibilityParams,
-) => {
-  const url = `${requestDomain()}/api/v2/${tenantId}/${userId}/work/visiblity`;
-  return axios.post(url, params);
-};
-
-export const updateOCommitType = async (params: UpdateOkrTypeParams) => {
-  const url = `${requestDomain()}/api/v1/${tenantId}/${userId}/okr/update/okrType?okrId=${
-    params.okrId
-  }`;
-  return axios.post(url, params, {
-    headers: { "Content-Type": "application/x-www-form-urlencoded" },
-    transformRequest: qs.stringify,
-  });
-};
-
-export const getOAnalysisInfos = async (params) => {
-  const url = `${requestDomain()}/api/v1/${tenantId}/${userId}/okr/create/analys`;
-  return axios.post(url, params).then((resp) => {
-    if (resp.status === 200 && resp.data.Code === 1) {
-      return resp.data.Data;
-    }
-    return {};
-  });
-};
-
-export const getCycleSetting = async (): Promise<GetCycleSettingParams> => {
-  const url = `${requestDomain()}/api/v1/${tenantId}/${userId}/okr/cycleSetting`;
-  const res = await axios.get(url);
-  return res.data.Data;
-};

package/src/components/create-okr-modal/style.ts

@@ -1,226 +0,0 @@
-import styled from "styled-components";
-
-export const Wrapper = styled.div`
-  height: 449px;
-  padding: 0 32px;
-  overflow: auto;
-`;
-export const Line = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-export const TitleLine = styled(Line)`
-  font-size: 14px;
-  font-weight: 600;
-  text-align: left;
-  color: #3f4755;
-  padding: 15px 0 2px;
-  line-height: 22px;
-`;
-export const CaseLink = styled.a`
-  color: #2879ff;
-  font-weight: 400;
-  font-size: 14px;
-  margin-right: 34px;
-  ::before {
-    margin-right: 4px;
-  }
-  transition: color 0.5s;
-  :hover {
-    color: #5c8eff;
-  }
-  /* letter-spacing: 2px; */
-`;
-export const ItemWrapper = styled.div`
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1;
-`;
-export const Space = styled.div`
-  width: 12px;
-`;
-export const BlueBar = styled.div`
-  width: 4px;
-  height: 16px;
-  border-radius: 2px;
-  margin-right: 6px;
-  background: linear-gradient(90deg, #4e90ff, #2879ff);
-`;
-
-export const AddKrBtn = styled.a`
-  font-size: 14px;
-  font-weight: 400;
-  color: #2879ff;
-  line-height: 22px;
-  display: flex;
-  align-items: center;
-  ::before {
-    margin-right: 6px;
-    font-size: 12px;
-    font-weight: 600;
-  }
-`;
-export const KrItemWrapper = styled.div`
-  margin-bottom: 16px;
-  display: flex;
-  align-items: center;
-`;
-export const KrEditWrapper = styled.div`
-  height: 36px;
-  background: #ffffff;
-  border: 1px solid ${(p) => (p.active ? "#2879ff" : "#f0f2f5")};
-  border-radius: 4px;
-  ${(p) => (p.active
-    ? "box-shadow: 0px 0px 6px 0px rgba(40, 121, 255, 0.3) inset;"
-    : "")}
-  display: flex;
-  align-items: center;
-  flex: 1;
-  padding: 0 10px;
-  transition: border 0.2s ease 0.2s, box-shadow 0.2s ease 0.2s;
-  > span {
-    font-size: 13px;
-    font-weight: 400;
-    text-align: left;
-    color: #6f7886;
-    margin-left: 18px;
-  }
-  :hover {
-    border: 1px solid #2879ff;
-  }
-`;
-export const InputWrapper = styled.div`
-  height: 36px;
-  background: #ffffff;
-  border: 1px solid ${(p) => (p.active ? "#2879ff" : "#f0f2f5")};
-  border-radius: 4px;
-  ${(p) => (p.active
-    ? "box-shadow: 0px 0px 6px 0px rgba(40, 121, 255, 0.3) inset;"
-    : "")}
-  display: flex;
-  align-items: center;
-  flex: 1;
-  padding: 0 10px;
-  transition: border 0.2s ease 0.2s, box-shadow 0.2s ease 0.2s;
-  :hover {
-    border: 1px solid #2879ff;
-  }
-  > input {
-    flex: 1;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-`;
-export const KrNameInput = styled.input`
-  flex: 1;
-  color: #3f4755;
-  padding-left: 12px;
-  border: none;
-  ::-webkit-input-placeholder {
-    color: #bfc7d5;
-  }
-  :-ms-input-placeholder {
-    color: #bfc7d5;
-  }
-  :-moz-input-placeholder {
-    color: #bfc7d5;
-  }
-`;
-export const WeightWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: 18px;
-`;
-export const WeightInputWrpper = styled.div`
-  position: relative;
-  overflow: hidden;
-  > span {
-    color: transparent;
-  }
-  > input {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-`;
-export const SelectBtn = styled.div`
-  height: 36px;
-  width: 100%;
-  border: 1px solid #e6eaef;
-  border-radius: 3px;
-  display: flex;
-  padding: 0 12px;
-  align-items: center;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition: border 0.2s ease;
-  > .tu-icon-cross {
-    color: #bfc7d5;
-    margin: 0 20px;
-  }
-  :hover {
-    border: 1px solid #2879ff;
-  }
-  > i {
-    font-size: 12px;
-  }
-  > span {
-    flex: 1;
-    width: 0;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-break: break-all;
-    overflow: hidden;
-  }
-`;
-export const DropDownContent = styled.div`
-  /* 周期选择组件 */
-  display: flex;
-  align-items: center;
-  padding-right: 28px;
-  margin-bottom: 10px;
-  transition: 300ms;
-  .has-underline {
-    border-bottom: 1px solid rgb(227, 230, 234);
-    justify-content: space-between;
-    height: 17px;
-  }
-`;
-export const TimeSapn = styled.span`
-  > i {
-    margin-left: 12px;
-    color: #bfc7d5;
-  }
-`;
-export const CreateCycleWrapper = styled.div`
-  box-sizing: border-box;
-  padding: 15px 20px 20px;
-  width: 262px;
-`;
-export const DateLine = styled.div`
-  padding: 12px 0;
-  font-size: 12px;
-  color: #89919f;
-  line-height: 17px;
-  text-align: left;
-  span {
-    color: #3f4755;
-  }
-`;
-export const DeleteKr = styled.a`
-  color: #000000;
-  font-size: 14px;
-  margin-left: 7px;
-  margin-right: 8px;
-  :hover {
-    color: #f05e5e;
-  }
-`;