@titaui/pc 1.7.71 → 1.7.75

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

@@ -1,248 +0,0 @@
-import React, { FC, useCallback, useState } from "react";
-import "./index.scss";
-import { CreateSuccessTips } from "./constant";
-import Shower from "./img/shower.png";
-import Light from "./img/light.svg";
-import Target from "./img/target.svg";
-import CreateSuccessLeftQuotation from "./img/create-success-left-quotation.svg";
-import CreateSuccessRightQuotation from "./img/create-success-right-quotation.svg";
-import CreateSuccessWords from "./img/create-success-message.svg";
-import QRCode from "./img/qr-code.png";
-import CreateSuccessHeader from "./img/create-success-head.png";
-import CreateSuccessShadow from "./img/create-success-shadow.svg";
-import Html2Canvas from "html2canvas";
-
-interface ICreateSuccessCmpProps {
-  createdSuccessInfo: any;
-  isDownload: boolean;
-  onCloseModel: Function;
-  onShowDetail: Function;
-  tipIndex: number;
-  downLoadRef?: any;
-}
-
-const CreateSuccessCmp: FC<ICreateSuccessCmpProps> = ({
-  createdSuccessInfo,
-  isDownload,
-  onCloseModel,
-  onShowDetail,
-  tipIndex,
-  downLoadRef,
-}) => {
-  const [dontShowValue, setDontShowValue] = useState(false);
-
-  const handleCloseModel = useCallback(() => {
-    onCloseModel && onCloseModel(dontShowValue);
-  }, [dontShowValue, onCloseModel]);
-
-  const handleShowDetail = useCallback(() => {
-    onShowDetail && onShowDetail(dontShowValue, createdSuccessInfo.workId);
-  }, [dontShowValue, onCloseModel]);
-
-  const handleInputChange = (e) => {
-    e.persist();
-    setDontShowValue(e.target.checked);
-  };
-
-  const handleDownloadPic = useCallback(() => {
-    let shareContent = downLoadRef.current, //需要截图的包裹的（原生的）DOM 对象
-      // @ts-ignore
-      width = shareContent.clientWidth, //获取dom 宽度
-      // @ts-ignore
-      height = shareContent.clientHeight, //获取dom 高度
-      canvas = document.createElement("canvas"), //创建一个canvas节点
-      scale = 2; //定义任意放大倍数 支持小数
-    canvas.width = width * scale; //定义canvas 宽度 * 缩放
-    canvas.height = height * scale; //定义canvas高度 *缩放
-    // @ts-ignore
-    canvas.style.width = width + "px";
-    // @ts-ignore
-    canvas.style.height = height + "px";
-    // @ts-ignore
-    let opts = {
-      backgroundColor: null, // 背景透明
-      scale: scale, // 添加的scale 参数
-      canvas: canvas, // 自定义 canvas
-      logging: false, // 日志开关，便于查看html2canvas的内部执行流程
-      width: width, // dom 原始宽度
-      height: height,
-      useCORS: true, // 【重要】开启跨域配置
-    };
-
-    Html2Canvas(downLoadRef.current as any, opts).then((canvas) => {
-      let imgUrl = canvas.toDataURL("image/png"); //得到图片的base64编码数据
-      let image = new Image();
-      image.setAttribute("crossOrigin", "anonymous");
-      image.onload = () => {
-        let a = document.createElement("a"); // 生成一个a元素
-        let event = new MouseEvent("click"); // 创建一个单击事件
-        a.download = "分享"; // 设置图片名称
-        a.href = imgUrl; // 将生成的URL设置为a.href属性
-        a.dispatchEvent(event); // 触发a的单击事件
-      };
-      image.src = imgUrl;
-    });
-  }, []);
-// console.log(createdSuccessInfo)
-  return (
-    <div className="create-success-model">
-      <div
-        className="create-success-model__card"
-        ref={isDownload ? downLoadRef : null}
-      >
-        {isDownload ? null : (
-          <div
-            className="tu-icon-cross2 create-success-model__close"
-            onClick={handleCloseModel}
-          ></div>
-        )}
-        <div className="create-success-model__top-block">
-          <img
-            src={Light}
-            className={`create-success-model__light ${
-              isDownload ? "create-success-model--animation-unset" : ""
-            }`}
-          />
-          {isDownload ? null : (
-            <img
-              src={Shower}
-              className={`create-success-model__shower ${
-                isDownload ? "create-success-model--animation-unset" : ""
-              }`}
-            />
-          )}
-          <img
-            src={CreateSuccessHeader}
-            className="create-success-model__create-head"
-          />
-          {isDownload ? null : (
-            <img
-              src={CreateSuccessWords}
-              className="create-success-model__create-success-words"
-            />
-          )}
-          <div className="create-success-model__avatar">
-            {createdSuccessInfo.principalUser.avatar.hasAvatar ? (
-              <img
-                className="create-success-model__img"
-                src={`${
-                  createdSuccessInfo.userAvatarBase64Url
-                    ? "data:image/png;base64," +
-                      createdSuccessInfo.userAvatarBase64Url
-                    : ""
-                }`}
-              />
-            ) : (
-              <div
-                className="create-success-model__text-avatar"
-                style={{
-                  background: createdSuccessInfo.principalUser.avatar.color,
-                }}
-              >
-                {createdSuccessInfo.principalUser.name[0]}
-              </div>
-            )}
-          </div>
-        </div>
-        <div className="create-success-model__bottom-block">
-          <img
-            src={CreateSuccessLeftQuotation}
-            className="create-success-model__left-quotation"
-          />
-          <div className="create-success-model__tip">
-            {CreateSuccessTips[tipIndex]}
-          </div>
-          <div className="create-success-model__right-quotation">
-            <img src={CreateSuccessRightQuotation} />
-          </div>
-          <div className="create-success-model__congratulation">
-            已超过&nbsp;Tita&nbsp;&nbsp;
-            <span className="create-success-model__percent">
-              {createdSuccessInfo.countSurpassPercentage}%
-            </span>
-            &nbsp;&nbsp;的人创建&nbsp;OKR
-          </div>
-          <div
-            className={`create-success-model__okr-info ${
-              isDownload ? "" : "create-success-model--fix-height"
-            }`}
-          >
-            {isDownload ? null : (
-              <img
-                className="create-success-model__shadow-img"
-                src={CreateSuccessShadow}
-              />
-            )}
-            <div className="create-success-model__o-name">
-              <img src={Target} className="create-success-model__o-name-icon" />
-              <span className="create-success-model__o-name-text">
-                {createdSuccessInfo.workName}
-              </span>
-            </div>
-            {createdSuccessInfo.Krs.map((kr, index) => {
-              // if(!isDownload && index > 2) {
-              //   return null;
-              // }
-              return (
-                <div className="create-success-model__kr-wrapper">
-                  <span className="create-success-model__dot"></span>
-                  <li
-                    className={`create-success-model__kr ${
-                      isDownload ? "create-success-model__kr--no-wrap" : ""
-                    }`}
-                  >
-                    {kr.mileStoneName}
-                  </li>
-                </div>
-              );
-            })}
-          </div>
-          {isDownload ? (
-            <div
-              className={`create-success-model__qrcode ${
-                isDownload ? "create-success-model--hidden-box-shadow" : ""
-              }`}
-            >
-              <img src={QRCode} width="275" />
-            </div>
-          ) : null}
-        </div>
-        {isDownload ? null : (
-          <div className="create-success-model__func-btns-wrapper">
-            <div className="create-success-model__primary-btns">
-              <span
-                className="create-success-model__common-btn-style create-success-model__return-list"
-                onClick={handleShowDetail}
-              >
-                查看详情
-              </span>
-              <span
-                className="create-success-model__common-btn-style create-success-model__download-img"
-                onClick={handleDownloadPic}
-              >
-                下载图片
-              </span>
-            </div>
-            <div className="create-success-model__checkbox-wrapper">
-              <input
-                id="dontShowCreateSucess"
-                checked={dontShowValue}
-                type="checkbox"
-                onChange={handleInputChange}
-                className="create-success-model__checkbox"
-              />
-              <label
-                htmlFor="dontShowCreateSucess"
-                className="create-success-model__label"
-              >
-                下次不再提示
-              </label>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default CreateSuccessCmp;

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

@@ -1,8 +0,0 @@
-import React, { FC } from "react";
-import ReactDOM from "react-dom";
-
-const CreateSuccessCmpWrapper: FC = ({ children }) => {
-  return <div>{ReactDOM.createPortal(children, document.body)}</div>;
-};
-
-export default CreateSuccessCmpWrapper;

package/src/components/create-okr-modal/fields/date-cycle.tsx

@@ -1,86 +0,0 @@
-import React, { useEffect, Fragment } from "react";
-import moment from "moment";
-import CreateCycle, { CreateCycleData } from "../createCycle";
-import { ItemWrapper, SelectBtn, Space, TitleLine } from "../style";
-import PeriodSelector from "../../period-selector"
-import { OpenUserName } from "../../../utils/open-data";
-import UserSelectorPop from "../../../components-v1/userSelector/UserSelectorPop";
-import { getCycleSetting } from "../request-api";
-import "./index.scss";
-
-interface Props {
-  user: any;
-  setUser: Function;
-  cycle: CreateCycleData | undefined;
-  setCycle: (cycle: CreateCycleData) => any;
-  modalRef: any;
-  isCreateModal: boolean;
-}
-
-export default ({
-  cycle,
-  setCycle,
-  modalRef,
-  setUser,
-  user,
-  isCreateModal,
-}: Props) => {
-  useEffect(() => {
-    // 若果外部提供了配置，则不调用默认季度配置
-    if (cycle && cycle.yqmNum != undefined) return;
-    getCycleSetting().then((res) => {
-      let cycleData = PeriodSelector.getDefalutCycle(res);
-      setCycle(cycleData);
-    });
-  }, []);
-
-  return (
-    <Fragment>
-      <div className="create-modal__sub-block">
-        {!isCreateModal ? (
-          <TitleLine>周期</TitleLine>
-        ) : (
-          <div className="create-modal__sub-title">周期</div>
-        )}
-        <CreateCycle
-          onChange={setCycle}
-          container={modalRef.current && modalRef.current.getRef()}
-          cycle={cycle}
-        />
-      </div>
-      {!isCreateModal ? (
-        <Fragment>
-          <Space />
-          <ItemWrapper>
-            <TitleLine>负责人</TitleLine>
-            <UserSelectorPop
-              onSubmit={([u]) => {
-                let avatar = {
-                  color: u.UserAvatar.Color,
-                  small: u.UserAvatar.Small,
-                };
-                setUser({
-                  name: u.Name,
-                  id: u.Id,
-                  avatar,
-                  departmentName: u.Department,
-                  departmentId: u.DepartmentId,
-                });
-              }}
-              style={{ width: "100%" }}
-              container={modalRef.current && modalRef.current.getRef()}
-              multi={false}
-            >
-              <SelectBtn>
-                <span>
-                  <OpenUserName name={user.name} id={user.id} />
-                </span>
-                <i className="tu-icon-sort-down" />
-              </SelectBtn>
-            </UserSelectorPop>
-          </ItemWrapper>
-        </Fragment>
-      ) : null}
-    </Fragment>
-  );
-};

package/src/components/create-okr-modal/fields/index.js

@@ -1,5 +0,0 @@
-import OkrVisibility from "./okr-visibility-detail";
-import OkrType from "./okr-type-detail";
-
-export const OkrFieldVisibility = OkrVisibility;
-export const OkrFieldType = OkrType;

package/src/components/create-okr-modal/fields/index.scss

@@ -1,364 +0,0 @@
-$FontFamily: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-
-@keyframes suggestOpacity {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.okr-create-cases-modal {
-  overflow: auto;
-  height: 100%;
-  width: 100%;
-  margin: 0 auto;
-  margin-bottom: 30px;
-
-  #tt-modal-container {
-    // height: auto !important;
-    height: 100%;
-    .tita-show-modal {
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
-
-.create-okr__okr-case {
-  width: 100%;
-  height: 100%;
-  margin-top: 40px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.okr-field-visible {
-  display: inline-block;
-  & > div {
-    display: none !important;
-  }
-}
-.visibility,
-.okr-type {
-  display: inline-block;
-  & > div {
-    display: none !important;
-  }
-  .edit-icon {
-    display: inline-block;
-    visibility: hidden;
-    width: 30px;
-    height: 30px;
-    border-radius: 2px;
-    border: 1px solid transparent;
-    text-align: center;
-    vertical-align: middle;
-    font-size: 18px;
-    color: #647481;
-    cursor: pointer;
-    line-height: 30px;
-    background-color: white;
-    &:hover {
-      background-color: #f5f8fa !important;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
-      color: #1687d9;
-    }
-  }
-  &:hover {
-    .edit-icon {
-      visibility: visible;
-    }
-  }
-}
-
-.okr-o-new-name {
-  flex: 1;
-  height: 48px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px 0 rgba(127, 145, 180, 0.15);
-  margin-top: 24px;
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-family: $FontFamily;
-  width: 536px;
-  .okr-o-new-name__left-block {
-    flex: 1;
-    display: flex;
-    position: relative;
-    .left-block__title {
-      font-size: 18px;
-      line-height: 22px;
-      padding-left: 12px;
-      padding-right: 10px;
-      color: #2879ff;
-      font-weight: 600;
-    }
-    .left-block__input {
-      border: none;
-      outline: none;
-      flex: 1;
-      color: #141c28;
-      font-weight: 600;
-      font-size: 16px;
-      margin-right: 8px;
-      font-family: $FontFamily;
-      &::placeholder {
-        color: #bfc7d5;
-        font-weight: 400;
-      }
-    }
-    .left-block__right-text-mask {
-      width: 30px;
-      height: 24px;
-      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
-      position: absolute;
-      right: 8px;
-    }
-  }
-}
-
-.user-info {
-  font-family: $FontFamily;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  :hover {
-    cursor: pointer;
-  }
-  .user__name {
-    width: 48px;
-    color: #6f7886;
-    font-size: 12px;
-    line-height: 22px;
-    margin-left: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-right: 10px;
-    word-break: keep-all;
-  }
-  .user__name--hidden {
-    font-size: 12px;
-    visibility: hidden;
-    position: absolute;
-  }
-}
-
-.error-popup-text-wrapper {
-  color: #f05e5e;
-  font-family: $FontFamily;
-  font-size: 12px;
-  line-height: 22px;
-  display: inline-block;
-  background: white;
-  padding: 5px 12px;
-  box-shadow: 0 4px 12px 0 rgba(127, 145, 180, 0.2);
-  position: relative;
-  margin-bottom: 5px;
-  &::after {
-    content: "";
-    display: block;
-    border: 6px solid transparent;
-    position: absolute;
-    border-top-color: #ffffff;
-    bottom: -11px;
-    left: 50%;
-  }
-}
-
-.create-modal__sub-title {
-  font-size: 14px;
-  font-family: $FontFamily;
-  font-weight: 400;
-  color: #89919f;
-  line-height: 20px;
-  margin-bottom: 6px;
-}
-
-.modal-centered .zoom-enter-done {
-  overflow: visible !important;
-}
-
-.okr-create-suggest {
-  width: 262px;
-  height: 523px;
-  position: absolute;
-  left: 100%;
-  top: 58px;
-  background: linear-gradient(180deg, #ffffff 0%, #fff8e4 100%);
-  border: 1px solid #f6bd16;
-  padding: 20px 16px;
-  box-sizing: border-box;
-  border-radius: 4px;
-  font-family: $FontFamily;
-  will-change: opacity;
-  animation: suggestOpacity 0.7s 1 forwards;
-
-  .okr-create-suggest__triangle {
-    position: absolute;
-    left: -6px;
-    top: 40px;
-    background: #fffffd;
-    &::after {
-      content: "";
-      display: block;
-      border: 8px solid #fffffd;
-      border-top: 8px solid transparent;
-      border-left: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      position: absolute;
-      top: -1px;
-      left: -9px;
-    }
-    &::before {
-      content: "";
-      display: block;
-      border: 8px solid #f6bd16;
-      border-top: 8px solid transparent;
-      border-left: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      position: absolute;
-      top: -1px;
-      left: -10px;
-    }
-  }
-  .okr-create-suggest__descs {
-    .okr-create-suggest__desc {
-      margin-bottom: 12px;
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .okr-create-suggest__triangle--iskr {
-    top: 92px;
-  }
-  .okr-create-suggest__descs {
-    font-size: 16px;
-    font-weight: 500;
-    color: #f6bd16;
-    line-height: 24px;
-    padding: 0 16px;
-  }
-  .okr-create-suggest__right-quotation {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 14px;
-  }
-  .okr-create-suggest__block {
-    font-size: 12px;
-    color: #6f7886;
-    line-height: 18px;
-    margin-bottom: 24px;
-    .okr-create-suggest__block-title {
-      font-size: 14px;
-      color: #3f4755;
-      display: flex;
-      align-items: center;
-      margin-bottom: 8px;
-      .okr-create-suggest__block-title-icon {
-        margin-right: 4px;
-      }
-    }
-  }
-  .okr-create-suggest__check-item {
-    margin-left: 16px;
-    display: flex;
-    align-items: center;
-    margin-bottom: 4px;
-    .okr-create-suggest__check-item-icon {
-      margin-right: 8px;
-    }
-  }
-  .okr-create-suggest__example {
-    margin: 0 16px;
-  }
-  .okr-create-suggest__pack-up {
-    position: absolute;
-    bottom: 20px;
-    right: 32px;
-    font-size: 12px;
-    font-weight: normal;
-    color: #3f4755;
-    line-height: 22px;
-    display: flex;
-    align-items: center;
-    &:hover {
-      color: #2879ff;
-      cursor: pointer;
-    }
-    .okr-create-suggest__pack-up-text {
-      margin-left: 4px;
-    }
-  }
-  .okr-create-suggest__animation-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 42px;
-    margin-bottom: 20px;
-    .okr-create-suggest__animation-wave {
-      display: flex;
-      height: 32px;
-    }
-    .okr-create-suggest__animation-wave--hidden {
-      position: absolute;
-      z-index: -1;
-    }
-    .okr-create-suggest__animation-wave--static {
-      height: 32px;
-      width: 228px;
-    }
-    .okr-create-suggest__animation-text {
-      position: absolute;
-      font-size: 12px;
-      color: #f6bd16;
-      line-height: 18px;
-    }
-  }
-}
-
-.rc-dialog-slide-fade-up-appear,
-.rc-dialog-slide-fade-up-enter {
-  transform: translateY(25%);
-}
-
-.rc-dialog-slide-fade-up-appear,
-.rc-dialog-slide-fade-up-enter,
-.rc-dialog-slide-fade-up-leave {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
-  animation-timing-function: ease-out;
-  animation-play-state: paused;
-}
-
-.rc-dialog-slide-fade-up-appear.rc-dialog-slide-fade-up-appear-active,
-.rc-dialog-slide-fade-up-enter.rc-dialog-slide-fade-up-enter-active {
-  animation-name: rcDialogSlideFadeInUp;
-  animation-play-state: running;
-}
-
-.rc-dialog-slide-fade-up-leave.rc-dialog-slide-fade-up-leave-active {
-  animation-name: rcDialogSlideFadeOutUp;
-  animation-play-state: running;
-}
-
-@keyframes rcDialogSlideFadeInUp {
-  0% {
-    transform: translateY(25%);
-  }
-
-  to {
-    transform: translate(0);
-  }
-}
-
-@keyframes rcDialogSlideFadeOutUp {
-  0% {
-    transform: translate(0);
-  }
-
-  to {
-    transform: translateY(25%);
-  }
-}