@titaui/pc 1.7.71 → 1.7.75

package/src/components/create-okr-modal/fields/input-with-err-popup.tsx

@@ -1,56 +0,0 @@
-import React, { FC, Fragment } from "react";
-import Popup from "../../popup";
-import "./index.scss";
-
-interface IErrorPopContentProps {
-  strLength: number;
-  maxLength: number;
-}
-
-interface IStrLenOverflowPopupProps extends IErrorPopContentProps {
-  position: string;
-  forceRender?: boolean;
-  destroyPopupOnHide?: boolean;
-}
-
-const StrLengthOverflowError: FC<IErrorPopContentProps> = ({
-  strLength,
-  maxLength,
-}) => {
-  return (
-    <Fragment>
-      {strLength > maxLength ? (
-        <span className={"error-popup-text-wrapper"}>
-          {`已输入 ${strLength} 个字，最多可输入 ${maxLength} 个字`}
-        </span>
-      ) : null}
-    </Fragment>
-  );
-};
-
-const InputWithErrPopup: FC<IStrLenOverflowPopupProps> = ({
-  strLength,
-  maxLength,
-  position,
-  forceRender = false,
-  destroyPopupOnHide = true,
-  children,
-}) => {
-  return (
-    // @ts-ignore
-    <Popup
-      popup={
-        <StrLengthOverflowError strLength={strLength} maxLength={maxLength} />
-      }
-      popupVisible={true}
-      popupPlacement={position}
-      forceRender={forceRender}
-      action={["focus"]}
-      destroyPopupOnHide={destroyPopupOnHide}
-    >
-      {children}
-    </Popup>
-  );
-};
-
-export default InputWithErrPopup;

package/src/components/create-okr-modal/fields/o-new-name.tsx

@@ -1,188 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import Toast from "../../toast";
-import { OCheckTarget } from "../constant";
-import InputWithErrPopup from "./input-with-err-popup";
-import { EOkrCreateSuggestResultType } from "./okr-create-suggest";
-import NewUserSelector from "./okr-new-user-selector";
-import { getOAnalysisInfos } from "../request-api";
-import "./index.scss";
-
-interface Props {
-  okrName: string;
-  setOkrName: Function;
-  user: any;
-  setUser: Function;
-  container: any;
-  onOInputFocusStateChange: Function;
-  setONameCheckResult: Function;
-  setIsInputContent: Function;
-}
-
-const initOCheckResult = OCheckTarget.map((item) => {
-  return {
-    text: item,
-    result: EOkrCreateSuggestResultType.normal,
-  };
-});
-
-export default ({
-  okrName,
-  setOkrName,
-  container,
-  user,
-  setUser,
-  onOInputFocusStateChange,
-  setONameCheckResult,
-  setIsInputContent,
-}: Props) => {
-  let oCheckId = 0;
-
-  const timerRef = useRef<any>();
-  const okrNameIsEmpty = useRef(!okrName);
-  const oldONameRef = useRef("");
-
-  const formatUser = useMemo(() => {
-    const medium = user.avatar
-      ? user.avatar.Medium
-        ? user.avatar.Medium
-        : user.avatar.medium
-      : undefined;
-    const color = user.avatar
-      ? user.avatar.Color
-        ? user.avatar.Color
-        : user.avatar.color
-      : undefined;
-    return {
-      Medium: medium,
-      Color: color,
-      Name: user.name,
-      Id: user.id,
-    };
-  }, [user.avatar, user.avatar, user.name, user.id]);
-
-  const changeUser = useCallback(
-    ([user]) => {
-      let avatar = {
-        Color: user.UserAvatar.Color,
-        Small: user.UserAvatar.Small,
-        Medium: user.UserAvatar.Medium,
-      };
-      setUser && setUser({ name: user.Name, id: user.Id, avatar });
-    },
-    [setUser]
-  );
-
-  const getOAnalysisInfo = useCallback(() => {
-    oCheckId++;
-    const tempCheckId = oCheckId;
-    // @ts-ignore
-    return getOAnalysisInfos({ text: okrName })
-      //@ts-ignore
-      .then((data: { hasVtWords: string; hasNumWords: string }) => {
-        if (tempCheckId !== oCheckId) {
-          return;
-        }
-        const result = OCheckTarget.map((item, index) => {
-          if (index === 0) {
-            return {
-              text: item,
-              result: data.hasVtWords
-                ? EOkrCreateSuggestResultType.correct
-                : EOkrCreateSuggestResultType.wrong,
-            };
-          } else {
-            return {
-              text: item,
-              result: data.hasNumWords
-                ? EOkrCreateSuggestResultType.wrong
-                : EOkrCreateSuggestResultType.correct,
-            };
-          }
-        });
-        // 如果已经清空了okr，则赋给默认值
-        if (okrNameIsEmpty.current) {
-          setONameCheckResult(initOCheckResult);
-        } else {
-          setONameCheckResult(result);
-        }
-      })
-      .catch((err) => {
-        Toast.Error(err);
-      })
-      .finally(() => {
-        setIsInputContent(false);
-      });
-  }, [okrName, setIsInputContent]);
-
-  useEffect(() => {
-    // 防抖
-    okrNameIsEmpty.current = !okrName;
-    if (!okrName) {
-      setONameCheckResult(initOCheckResult);
-      setIsInputContent(false);
-      return;
-    }
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(getOAnalysisInfo, 1000);
-      return;
-    }
-    timerRef.current = setTimeout(getOAnalysisInfo, 1000);
-    return () => {
-      clearTimeout(timerRef.current);
-    };
-  }, [okrName]);
-
-  const handleInputFocus = useCallback(() => {
-    onOInputFocusStateChange && onOInputFocusStateChange(true);
-  }, []);
-
-  const handleInputBlur = useCallback(() => {
-    onOInputFocusStateChange && onOInputFocusStateChange(false);
-  }, []);
-
-  const handleOnKeyDown = useCallback(() => {
-    setIsInputContent(true);
-  }, [setIsInputContent]);
-
-  const handleOnKeyUp = useCallback((e) => {
-    e.persist();
-    // 解决按功能按钮的时候一直显示检测中
-    if (e.target.value === oldONameRef.current) {
-      setIsInputContent(false);
-    } else {
-      oldONameRef.current = e.target.value;
-    }
-  }, []);
-
-  return (
-    <div className={`okr-o-new-name`}>
-      <div className={`okr-o-new-name__left-block`}>
-        <span className={`left-block__title`}>O</span>
-        <InputWithErrPopup
-          strLength={okrName.length}
-          maxLength={500}
-          position={"top"}
-        >
-          <input
-            onFocus={handleInputFocus}
-            onBlur={handleInputBlur}
-            className={`left-block__input`}
-            placeholder="请输入鼓舞人心的目标"
-            type="text"
-            value={okrName}
-            onChange={(e) => setOkrName(e.target.value)}
-            onKeyDown={handleOnKeyDown}
-            onKeyUp={handleOnKeyUp}
-          />
-        </InputWithErrPopup>
-        <div className={`left-block__right-text-mask`}></div>
-      </div>
-      <NewUserSelector
-        user={formatUser}
-        container={container}
-        changeUser={changeUser}
-      />
-    </div>
-  );
-};

package/src/components/create-okr-modal/fields/okr-case.tsx

@@ -1,72 +0,0 @@
-import React, { useState } from "react";
-import { CaseLink, Line } from "../style";
-import OKRCases from "../../okrcase-library";
-import Dialog from "../../dialog";
-import Toast from "../../toast";
-import "./index.scss";
-import { isLocal } from "../../../utils/helpers";
-interface Props {
-  onOkrApply?: Function;
-  okrTemplateEnabled: boolean;
-}
-
-export default ({ onOkrApply, okrTemplateEnabled }: Props) => {
-  const [visible, setVisible] = useState(false);
-
-  const okrCaseClickHandler = () => {
-    setVisible(true);
-  };
-
-  const onCasesCloseHandler = () => {
-    setVisible(false);
-  };
-
-  const OnOkrApplyHandler = (data) => {
-    onOkrApply && onOkrApply(data);
-    setVisible(false);
-    Toast.Success("成功套用");
-  };
-
-  return (
-    <Line>
-      {okrTemplateEnabled && !isLocal() ? (
-        <CaseLink onClick={okrCaseClickHandler} className="tu-icon-shoushi">
-          从OKR案例库添加
-        </CaseLink>
-      ) : null}
-      {okrTemplateEnabled && (
-        <Dialog
-          zIndex={99999}
-          noHeadLine
-          visible={visible}
-          onClose={onCasesCloseHandler}
-          animation="slide-fade-up"
-          noFooter
-          noCloseIcon
-          destroyOnClose
-          style={{ width: "100%", height: "100%" }}
-          maskClosable
-        >
-          <div className={"create-okr__okr-case"}>
-            <OKRCases
-              onClose={onCasesCloseHandler}
-              onApplyTpl={OnOkrApplyHandler}
-            />
-          </div>
-        </Dialog>
-      )}
-    </Line>
-  );
-};
-
-// <OldModal
-//     ref={okrCaseModalRef}
-//     modalRootCls='okr-create-cases-modal'
-//     mask={false}
-//     offsetPosition={{ 'top': 41 }}
-//     fullSize={true}
-// >
-{
-  /* <OKRCases onClose={onCasesCloseHandler} onApplyTpl={OnOkrApplyHandler} /> */
-}
-// </OldModal>

package/src/components/create-okr-modal/fields/okr-classify.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import { Select } from "tita-ui";
-import { getBSGlobal } from "../../../utils/bs-global";
-import { TitleLine } from "../style";
-import "./index.scss";
-
-interface Props {
-  okrClassify: any;
-  setOkrClassify: Function;
-  isCreateModal: boolean;
-}
-const okrClassifyList = [
-  { value: 1, lable: "承诺型" },
-  { value: 2, lable: "愿景型" },
-];
-
-export default ({
-  okrClassify,
-  setOkrClassify,
-  isCreateModal = false,
-}: Props) => {
-  const setting = getBSGlobal("OkrAdvancedSetting").KRSetting;
-  const openOkrType = setting.OkrTypeSetting;
-
-  return (
-    <div
-      className="create-modal__sub-block"
-      style={{ flex: openOkrType ? 1 : 2 }}
-    >
-      {isCreateModal ? (
-        <div className="create-modal__sub-title">类别</div>
-      ) : (
-        <TitleLine>类别</TitleLine>
-      )}
-      <Select
-        value={okrClassify}
-        onChange={(v) => {
-          setOkrClassify(v);
-        }}
-        options={okrClassifyList}
-      />
-    </div>
-  );
-};

package/src/components/create-okr-modal/fields/okr-create-suggest.tsx

@@ -1,156 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef } from "react";
-import Lottie from "lottie-web";
-import ExampleSvg from "../img/example.svg";
-import PackUp from "../img/pack-up";
-import LeftQuotationSvg from "../img/left-quotation.svg";
-import RightQuotationSvg from "../img/right-quotation.svg";
-import CorrectSvg from "../img/check-right.svg";
-import WrongSvg from "../img/check-wrong.svg";
-import NormalSvg from "../img/check-normal.svg";
-import animationData from "../animation/check-animation";
-import WaveSvg from "../img/wave.png";
-
-export enum EOkrCreateSuggestResultType {
-  normal = "normal",
-  wrong = "wrong",
-  correct = "correct",
-}
-
-interface IOkrCreateSuggestProps {
-  descs: string[];
-  example: string[];
-  results: {
-    text: string;
-    result: EOkrCreateSuggestResultType;
-  }[];
-  handleClose: Function;
-  isOSuggest: boolean;
-  isInput: boolean;
-}
-
-const OkrCreateSuggest: FC<IOkrCreateSuggestProps> = ({
-  descs,
-  example,
-  results,
-  handleClose,
-  isOSuggest,
-  isInput,
-}) => {
-  const handleCloseCheck = useCallback(() => {
-    handleClose && handleClose();
-  }, [handleClose]);
-
-  const animationRef = useRef(document.createElement("div"));
-
-  const renderCheckIcon = useCallback((result) => {
-    switch (result) {
-      case "wrong":
-        return (
-          <img
-            className={"okr-create-suggest__check-item-icon"}
-            src={WrongSvg}
-          />
-        );
-      case "correct":
-        return (
-          <img
-            className={"okr-create-suggest__check-item-icon"}
-            src={CorrectSvg}
-          />
-        );
-      default:
-        return (
-          <img
-            className={"okr-create-suggest__check-item-icon"}
-            src={NormalSvg}
-          />
-        );
-    }
-  }, []);
-
-  useEffect(() => {
-    Lottie.loadAnimation({
-      container: animationRef.current, // 容器节点
-      renderer: "svg",
-      loop: true,
-      autoplay: true,
-      animationData: animationData, // JSON数据
-    });
-  }, []);
-
-  return (
-    <div className="okr-create-suggest">
-      <span
-        className={`okr-create-suggest__triangle ${
-          isOSuggest ? "" : "okr-create-suggest__triangle--iskr"
-        }`}
-      ></span>
-      <img src={LeftQuotationSvg} />
-      <div className="okr-create-suggest__descs">
-        {descs.map((desc, key) => {
-          return (
-            <div className="okr-create-suggest__desc" key={key}>
-              {desc}
-            </div>
-          );
-        })}
-      </div>
-      <div className="okr-create-suggest__right-quotation">
-        <img src={RightQuotationSvg} />
-      </div>
-      <div className="okr-create-suggest__block">
-        <div className="okr-create-suggest__block-title">
-          <img
-            className="okr-create-suggest__block-title-icon"
-            src={ExampleSvg}
-          />
-          示例
-        </div>
-        {example.map((item, index) => {
-          return (
-            <div className={"okr-create-suggest__example"} key={index}>
-              {item}
-            </div>
-          );
-        })}
-      </div>
-      <div className="okr-create-suggest__animation-wrapper">
-        <div
-          ref={animationRef}
-          className={
-            isInput
-              ? "okr-create-suggest__animation-wave"
-              : "okr-create-suggest__animation-wave--hidden"
-          }
-        ></div>
-        {isInput ? null : (
-          <img
-            className="okr-create-suggest__animation-wave--static"
-            src={WaveSvg}
-          />
-        )}
-        <div className="okr-create-suggest__animation-text">
-          {isInput
-            ? "智能检测中"
-            : `等待输入${isOSuggest ? "目标" : "关键成果"}`}
-        </div>
-      </div>
-      <div className="okr-create-suggest__block">
-        {results.map((item, index) => {
-          return (
-            <div className={"okr-create-suggest__check-item"} key={index}>
-              {renderCheckIcon(item.result)}
-              {item.text}
-            </div>
-          );
-        })}
-      </div>
-      <div className="okr-create-suggest__pack-up" onClick={handleCloseCheck}>
-        <PackUp color="currentColor" />{" "}
-        <span className="okr-create-suggest__pack-up-text">收起</span>
-      </div>
-    </div>
-  );
-};
-
-export default OkrCreateSuggest;

package/src/components/create-okr-modal/fields/okr-new-user-selector.tsx

@@ -1,86 +0,0 @@
-import React, { ReactElement, useEffect, useRef, useState } from "react";
-import { Avatar, Tooltip } from "tita-ui";
-import UserSelectorPop from "../../../components-v1/userSelector/UserSelectorPop";
-import { OpenUserName } from "../../../utils/open-data";
-import "./index.scss";
-
-export interface UserData {
-  Medium: string;
-  Color: string;
-  Name: string;
-  Id: number;
-}
-
-interface INewUserSelectorProps {
-  user: UserData;
-  changeUser: Function;
-  container: any;
-  style?: any;
-}
-
-function NewUserSelector({
-  user,
-  changeUser,
-  container,
-  style = {},
-}: INewUserSelectorProps): ReactElement {
-  const [widthOverflow, setWidthOverflow] = useState(false);
-  const spanRef = useRef<HTMLSpanElement>(document.createElement("span"));
-
-  const onUserSelectorSubmitHandler = (users) => {
-    changeUser && changeUser(users);
-  };
-
-  useEffect(() => {
-    if (spanRef.current.offsetWidth > 48) {
-      setWidthOverflow(true);
-    } else {
-      setWidthOverflow(false);
-    }
-  }, [user.Name]);
-
-  return (
-    <UserSelectorPop
-      stopPropagation
-      onSubmit={onUserSelectorSubmitHandler}
-      onCancel={() => {}}
-      container={container.current && container.current.getRef()}
-      multi={false}
-      style={style}
-    >
-      <div className="user-info">
-        <Avatar
-          size={{
-            width: 24,
-            textNum: 1,
-            fontSize: 12,
-          }}
-          src={user.Medium}
-          color={user.Color}
-          // @ts-ignore
-          name={user.Name}
-          userId={user.Id}
-        />
-        {widthOverflow ? (
-          <Tooltip
-            content={<OpenUserName name={user.Name} id={user.Id} />}
-            container={document.body}
-          >
-            <span className={"user__name"}>
-              <OpenUserName name={user.Name} id={user.Id} />
-            </span>
-          </Tooltip>
-        ) : (
-          <span className={"user__name"}>
-            <OpenUserName name={user.Name} id={user.Id} />
-          </span>
-        )}
-        <span className={`user__name--hidden`} ref={spanRef}>
-          {user.Name}
-        </span>
-      </div>
-    </UserSelectorPop>
-  );
-}
-
-export default NewUserSelector;