@titaui/pc 1.9.98 → 1.9.102

package/src/components/task-relation-modal/search/okr-type-select.tsx

@@ -1,55 +0,0 @@
-import React, { useState } from "react";
-import { getLocale } from "../../../utils/getLocale";
-
-import SelectLayer from "../../select-layer";
-// import SearchDropDown from "./search-dropdown";
-import "./search-dropdown/index.scss";
-
-function OkrTypeSelect(props) {
-  const { onChange, initValue } = props;
-  const [selectText, setSelectText] = useState(getLocale("OKR_MyO_Butt_Alltypes"));
-
-  const [OkrTypeSetting] = useState(() => window.BSGlobal.OkrAdvancedSetting.KRSetting.OkrTypeSetting);
-  const onChangeHandler = (key) => {
-    setSelectText(key.label);
-    onChange(key.value);
-  };
-  const selectOptions = [
-    {
-      label: getLocale("OKR_MyO_Butt_Alltypes"),
-      value: "",
-    },
-    {
-      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,
-    },
-  ];
-
-  if (!OkrTypeSetting) return null;
-  return (
-    <SelectLayer
-      onChangeSelect={onChangeHandler}
-      items={selectOptions}
-      initValue={initValue}
-    >
-      {/* <SearchDropDown>{selectText}</SearchDropDown> */}
-      <div className="titaui-search-dropdown">
-        <span className="titaui-search-dropdown__text">{selectText}</span>
-        <span className="tu-icon-sort-down" />
-      </div>
-    </SelectLayer>
-  );
-}
-export default OkrTypeSelect;

package/src/components/task-relation-modal/search/principal.tsx

@@ -1,65 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import UserSelector from "../../user-selector";
-import SearchDropDown from "./search-dropdown";
-import { getLocale } from "../../../utils/getLocale";
-import "./search-dropdown/index.scss";
-
-function Principal(props) {
-  const {
-    onChange, initValue = [], setRelation, position = "bottom",
-  } = props;
-  const [users, setUsers] = useState(initValue);
-  const [isInit, setIsInit] = useState(false);
-  const [selectText, setSelectText] = useState(getLocale("Pro_page_Plan_Allpersonnel"));
-
-  const userSelectorRef = useRef(document.createElement("div"));
-  const onSelectUser = ({ users }) => setUsers(users);
-
-  useEffect(() => {
-    setIsInit(true);
-  }, []);
-
-  useEffect(() => {
-    setRelation(0);
-    console.log(users);
-
-    if (users.length > 0) {
-      let text = "";
-      // 我在拼name
-      users.forEach((item, key) => {
-        if (key === users.length - 1) {
-          text += item.name;
-        } else {
-          text = `${text + item.name},`;
-        }
-      });
-      setSelectText(text);
-    } else {
-      setSelectText(getLocale("Pro_page_Plan_Allpersonnel"));
-    }
-
-    isInit && onChange(users);
-  }, [users]);
-
-  return (
-    <div ref={userSelectorRef}>
-      <UserSelector
-        multiple
-        selectNodes={{ users }}
-        onOk={onSelectUser}
-        position={position}
-        disabledDepartSelect
-        panes={{ depart: true }}
-        getPopupContainer={() => userSelectorRef.current}
-        searchedPanes={{ user: true }}
-        popClass="pull-screen-ignore"
-      >
-        <SearchDropDown>
-          <span className="titaui-search-dropdown__principal-text">{selectText}</span>
-        </SearchDropDown>
-      </UserSelector>
-    </div>
-
-  );
-}
-export default Principal;

package/src/components/task-relation-modal/search/relation.tsx

@@ -1,51 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { getLocale } from "../../../utils/getLocale";
-import SelectLayer from "../../select-layer";
-import "./search-dropdown/index.scss";
-
-function Relation(props) {
-  const { onChange, initValue } = props;
-  const [selectText, setSelectText] = useState(getLocale("Pro_page_Plan_FullRange"));
-
-  useEffect(() => {
-    if (initValue === 0) {
-      setSelectText(getLocale("Pro_page_Plan_FullRange"));
-    }
-  }, [initValue]);
-
-  const onChangeHandler = (key) => {
-    setSelectText(key.label);
-    onChange(key.value);
-  };
-  const selectOptions = [
-    {
-      label: getLocale("Pro_page_Plan_FullRange"),
-      value: 0,
-    },
-    {
-      label: getLocale("OKR_Menu_Title03_Owned"),
-      value: 1,
-    },
-    {
-      label: getLocale("OKR_Menu_Title_Collaborator"),
-      value: 2,
-    },
-    {
-      label: getLocale("OKR_Menu_Title_FollowingOKRs"),
-      value: 3,
-    },
-  ];
-  return (
-    <SelectLayer
-      onChangeSelect={onChangeHandler}
-      items={selectOptions}
-      initValue={initValue}
-    >
-      <div className="titaui-search-dropdown">
-        <span className="titaui-search-dropdown__text">{selectText}</span>
-        <span className="tu-icon-sort-down" />
-      </div>
-    </SelectLayer>
-  );
-}
-export default Relation;

package/src/components/task-relation-modal/search/search-dropdown/index.scss

@@ -1,46 +0,0 @@
-.titaui-search-dropdown {
-  display: inline-block;
-  min-width: 104px;
-  height: 32px;
-  box-sizing: border-box;
-  border: 1px solid #e9ecf0;
-  padding: 7px 28px 7px 12px;
-  position: relative;
-  border-radius: 4px;
-  font-size: 0;
-  cursor: pointer;
-  transition: color 0.3s ease, border 0.3s ease;
-  &__principal-text{
-    display: block;
-    max-width: 68px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis ;
-  }
-  &__text {
-    display: inline-block;
-    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica,
-      sans-serif, PingFang SC, Microsoft YaHei;
-    font-size: 14px;
-    line-height: 16px;
-    color: #3f4755;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  &:hover {
-    border-color: #2879ff;
-    color: #2879ff;
-    .titaui-search-dropdown__text {
-      color: #2879ff;
-    }
-  }
-
-  .tu-icon-sort-down {
-    font-size: 14px;
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}

package/src/components/task-relation-modal/search/search-dropdown/index.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import "./index.scss";
-
-const preCls = "titaui-search-dropdown";
-
-function SearchDropDown(props) {
-  const { children, maxWidth } = props;
-  return (
-    <div className={preCls}>
-      <span className={`${preCls}__text`} style={{ maxWidth }}>
-        {children}
-      </span>
-      <span className="tu-icon-sort-down" />
-    </div>
-  );
-}
-export default SearchDropDown;

package/src/components/task-relation-modal/tree/category-tree/index.scss

@@ -1,83 +0,0 @@
-.rel-category-tree {
-  &__empty {
-    color: #a4acb9;
-    font-size: 16px;
-    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-    width: 100%;
-    height: 400px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    &-btn{
-      margin-top: 16px;
-      width: 90px;
-      height: 36px;
-      font-size: 14px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #FFFFFF;
-      line-height: 36px;
-      background: #2879FF;
-      border-radius: 4px;
-      &:hover{
-        background: #5c8eff;
-      }
-    }
-  }
-  &__pagination {
-    padding: 12px 32px 0;
-    margin-left: -32px;
-    margin-right: -32px;
-  }
-  &__pagination--shadow {
-    box-shadow: 0px -1px 6px 0px #e9eef3;
-  }
-  &__content {
-    height: 325px;
-    overflow-y: scroll;
-    .rc-tree-treenode {
-      // border-bottom: 1px solid #e9ecf0;
-      margin-bottom: 8px;
-      // margin-top: 7px;
-      padding-left: 28px;
-    }
-  }
-
-  &__header {
-    padding: 11px 0;
-    margin-bottom: 15px;
-    color: #a4acb9;
-    font-size: 12px;
-    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-    line-height: 18px;
-    display: flex;
-    border-bottom: 1px solid #e9ecf0;
-    &-obj {
-      flex: 1;
-      margin-right: 40px;
-    }
-    &-principle {
-      width: 60px;
-      margin-right: 40px;
-    }
-    &-time {
-      width: 194px;
-    }
-  }
-  &__search-item {
-    display: inline-block;
-    margin-right: 10px;
-
-    &-keyword {
-      float: right;
-    }
-  }
-  &__catetory-set {
-    cursor: pointer;
-    color: #2879ff;
-    font-size: 14px;
-    line-height: 22px;
-  }
-}

package/src/components/task-relation-modal/tree/category-tree/index.tsx

@@ -1,180 +0,0 @@
-import React, {
-  useState,
-  useEffect,
-  useContext,
-  Fragment,
-  useRef,
-} from "react";
-import classNames from "classnames";
-import cloneDeep from "clone-deep";
-import Pagination from "../../../pagination";
-import Tree from "../../../tree";
-import { getCategory } from "../../request-api";
-import { Context } from "../../context";
-import NodeRender from "../../tree-node";
-import SearchForm from "./search-form";
-import { getLocale } from "../../../../utils/getLocale";
-import "./index.scss";
-
-const precls = "rel-category-tree";
-
-function CategoryTree() {
-  const { multiple, selected, setIsCategory } = useContext(Context);
-  const [lables, setLables] = useState([]);
-  const [treeNodes, setTreeNodes] = useState([]);
-  const [total, setTotal] = useState(0);
-  const [pageSize, setPageSize] = useState(200);
-  const [pageNum, setPageNum] = useState(1);
-  const [query, setQuery] = useState({});
-  const [isInit, setIsInit] = useState(false);
-
-  const [isScorll, setIsScorll] = useState(false);
-
-  const contentRef = useRef(document.createElement("div"));
-
-  let timer = null;
-
-  const setScorll = (e) => {
-    if (!e.target && timer) return;
-    setIsScorll(true);
-    // @ts-ignore
-    timer = setTimeout(() => {
-      setIsScorll(false);
-    }, 1000);
-  };
-
-  useEffect(() => {
-    if (contentRef.current) {
-      contentRef.current.addEventListener("scroll", setScorll, true);
-    }
-    return () => {
-      contentRef.current && contentRef.current.removeEventListener("scroll", setScorll, true);
-    };
-  }, [treeNodes]);
-
-  const transToTree = (data) => {
-    const cloneData = cloneDeep(data);
-    const map = {};
-    const res: any = [];
-    const formatNodes = cloneData.map((item) => {
-      const obj = {
-        key: item.id,
-        nodeType: "category",
-        title: "",
-        data: item,
-        checked: !!selected.find((i) => i.id == item.id),
-        parentId: item.parent_id,
-        isParent: item.parent_id === "0",
-      };
-      map[item.id] = obj;
-      return obj;
-    });
-    formatNodes.forEach((item) => {
-      const parent = map[item.parentId];
-      if (parent) {
-        if (!parent.children) parent.children = [];
-        parent.children.push(map[item.key]);
-      } else {
-        res.push(map[item.key]);
-      }
-    });
-    return res;
-  };
-
-  const getTreeNodes = async () => {
-    const { Total = 0, lables = [] } = await getCategory({
-      pageNum,
-      pageSize,
-      ...query,
-    });
-    setTotal(Total);
-    setLables(lables || []);
-  };
-
-  useEffect(() => {
-    setTreeNodes(transToTree(lables));
-  }, [selected, lables]);
-
-  useEffect(() => {
-    setIsInit(true);
-  }, []);
-
-  useEffect(() => {
-    if (treeNodes.length > 0) {
-      setIsCategory(true);
-    } else {
-      setIsCategory(false);
-    }
-  }, [treeNodes]);
-
-  useEffect(() => {
-    isInit && getTreeNodes();
-  }, [pageNum, pageSize, query]);
-
-  const onQueryChangeHandler = (values) => {
-    setPageNum(1);
-    setQuery({
-      ...query,
-      ...values,
-    });
-  };
-
-  const onPageChangeHandler = (current: number, pageSize: number) => {
-    setPageNum(current);
-    setPageSize(pageSize);
-  };
-
-  const openLableSetting = () => {
-    window.open("#set?page_id=class", "_blank");
-  };
-
-  return (
-    <div className={`${precls} pull-screen-ignore`}>
-      <SearchForm onChange={onQueryChangeHandler} />
-      {treeNodes.length == 0 && (
-        <div className={`${precls}__empty`}>
-          {getLocale("OKR_MyO_Text_Noclassifica")}
-          <div className={`${precls}__empty-btn`} onClick={openLableSetting}>
-            {getLocale("Tasks_Menu_Category")}
-          </div>
-        </div>
-      )}
-      {treeNodes.length > 0 && (
-        <>
-          <div className={`${precls}__header`}>
-            <span className={`${precls}__header-obj`}>{getLocale("Pro_detail_AssociatedObject")}</span>
-          </div>
-          <div
-            ref={contentRef}
-            className={`${precls}__content`}
-          >
-            <Tree
-              multiple={multiple}
-              treeData={treeNodes}
-              titleRender={NodeRender}
-              checkStrictly
-            />
-          </div>
-        </>
-      )}
-      {total !== 0 && (
-        <div
-          className={classNames(`${precls}__pagination`, {
-            [`${precls}__pagination--shadow`]: isScorll,
-          })}
-        >
-          <Pagination
-            size="sm"
-            total={total}
-            onChange={onPageChangeHandler}
-            current={pageNum}
-            pageSize={pageSize}
-            showSizeChanger={false}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default CategoryTree;

package/src/components/task-relation-modal/tree/category-tree/search-form.tsx

@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from "react";
-import SearchInput from "../../../search-input";
-import CategorySelect from "../../search/category-select";
-import { getLocale } from "../../../../utils/getLocale";
-import "./index.scss";
-
-interface IProps {
-  onChange: Function;
-}
-
-function SearchForm(props: IProps) {
-  const { onChange } = props;
-
-  const [keyWords, setKeyWords] = useState("");
-  const [type, setType] = useState(0);
-
-  useEffect(() => {
-    onChange({
-      keyWords,
-      type,
-    });
-  }, [keyWords, type]);
-
-  return (
-    <div>
-      <div className="rel-okr-tree__search-item">
-        <CategorySelect onChange={setType} initValue={type} />
-      </div>
-      <div className="rel-okr-tree__search-item-keyword">
-        <SearchInput
-          onSearch={setKeyWords}
-          placeholder={getLocale("Mod_Enterkeywords")}
-          style={{ height: 32, width: 240 }}
-        />
-      </div>
-    </div>
-  );
-}
-export default SearchForm;

package/src/components/task-relation-modal/tree/okr-tree/index.scss

@@ -1,59 +0,0 @@
-.rel-okr-tree {
-  &__empty {
-    color: #a4acb9;
-    font-size: 16px;
-    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-    width: 100%;
-    height: 400px;
-    line-height: 400px;
-    text-align: center;
-  }
-  &__pagination {
-    padding: 12px 32px 0;
-    margin-left: -32px;
-    margin-right: -32px;
-  }
-  &__pagination--shadow {
-    box-shadow: 0px -1px 6px 0px #e9eef3;
-  }
-  &__content {
-    height: 322px;
-    overflow-y: scroll;
-    .rc-tree-treenode {
-      // border-bottom: 1px solid #e9ecf0;
-      margin-bottom: 8px;
-      // margin-top: 7px;
-      padding-left: 28px;
-    }
-  }
-
-  &__header {
-    padding: 11px 0;
-    margin-bottom: 15px;
-    color: #a4acb9;
-    font-size: 12px;
-    font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-    line-height: 18px;
-    display: flex;
-    border-bottom: 1px solid #e9ecf0;
-    &-obj {
-      flex: 1;
-      margin-right: 40px;
-    }
-    &-principle {
-      width: 60px;
-      margin-right: 40px;
-    }
-    &-time {
-      width: 194px;
-    }
-  }
-  &__search-item {
-    display: inline-block;
-    margin-right: 10px;
-
-    &-keyword {
-      float: right;
-    }
-  }
-}