@titaui/pc 1.9.99 → 1.9.103

package/src/components/cascader/index.tsx

@@ -1,65 +0,0 @@
-import React, { useState, useEffect } from "react";
-import Rccascader from "rc-cascader";
-import TimeCascader from "./time";
-import { getLocale } from "../../utils/getLocale";
-import "rc-cascader/assets/index.less";
-import "./index.scss";
-
-interface Props {
-  value: any;
-  options: any;
-  onChange: any;
-  placeholder?: any;
-  initText?: any; // 想要默认值输入框的值就传进来，不要问组件里为什么不做这个事情，优化算法
-  style?: any;
-  popupClassName?: any;
-  splitSymbol?: string;
-}
-
-const preCls = "titaui-cascader";
-
-function Cascader({
-  value,
-  initText,
-  options,
-  onChange = () => {},
-  style = { width: "100px" },
-  placeholder = getLocale("Mod_Pleaseselect"),
-  splitSymbol = "",
-  popupClassName = "",
-  ...restProps
-}: Props) {
-  const [selectValue, setSelectValue] = useState(value);
-  const [inputValue, setInputValue] = useState(initText);
-
-  const handleChange = (value, selectedOptions) => {
-    onChange && onChange(value, selectedOptions);
-    setSelectValue(value);
-    const str = selectedOptions.map((o) => o.label).join(splitSymbol);
-    setInputValue(str);
-  };
-
-  useEffect(() => {
-    setSelectValue(value);
-  }, [value]);
-
-  return (
-    <Rccascader
-      options={options}
-      onChange={handleChange}
-      value={selectValue}
-      popupClassName={`${preCls}-popup ${popupClassName}`}
-      {...restProps}
-    >
-      <div className={preCls} style={style}>
-        <div className={`${preCls}-text`}>
-          {inputValue || placeholder}
-        </div>
-        <span className="tu-icon-caret-down" />
-      </div>
-    </Rccascader>
-  );
-}
-
-Cascader.TimeCascader = TimeCascader;
-export default Cascader;

package/src/components/cascader/time.js

@@ -1,13 +0,0 @@
-import React, { FC, Fragment } from "react";
-import Cascader from "./index";
-
-function TimeCascader({ ...restProps }) {
-  return (
-    <Cascader
-      popupClassName=" titaui-cascader-time-popup"
-      {...restProps}
-    />
-  );
-}
-
-export default TimeCascader;

package/src/components/change-okr-modal/Filter.tsx

@@ -1,326 +0,0 @@
-import React, { PureComponent } from "react";
-import ToolTip from "@beisen-phoenix/tooltip";
-import {
-  Filter, FilterBottom, FilterLeftWrapper, FilterOptionsWrapper, FilterTop, OptionItem, UserSelectorWrapper,
-} from "./styledComponents";
-import { OpenUserName } from "../../utils/open-data";
-import Search from "../../components-v1/search";
-import Select from "../../components-v1/select";
-import UserSelectorPop from "../../components-v1/userSelector/UserSelectorPop";
-import ConfirmPop from "../delete-confirm-pop/ConfirmPop";
-import FilterTab from "./filterTab";
-import { getBSGlobal } from "../../utils/bs-global";
-import { rget } from "../../utils/request";
-import {
-  getOkrTypes, getStatusType, getYear, getBimonthlyMonthKeyValue, getMonthKeyValue,
-} from "./constant";
-import { getLocale } from "../../utils/getLocale";
-
-interface Props {
-  year?: number | null;
-  cycle: string | null;
-  status: any | null;
-  okrPopType: number;
-  type: any;
-  users: any;
-  remembered: boolean;
-  departments: any;
-  onChange: Function;
-  onUserChange: (users, depts) => void;
-}
-interface State {
-  OptionsArray: FilterTabProps[];
-  cycles: any[]
-}
-
-interface FilterTabProps {
-  index: number;
-  name: string;
-  visible?: boolean;
-  valuesArray: any[];
-  value?: number | string | null;
-  title: string;
-}
-export default class FilterComp extends PureComponent<Props, State> {
-  // customizequery/condition/save
-  // 500007/500000036/customizequery/condition/get?dataKey=62_500000036&pageId=40001
-  KRSetting = getBSGlobal("OkrAdvancedSetting").KRSetting;
-
-  constructor(p: Props) {
-    super(p);
-    this.state = {
-      OptionsArray: [
-        {
-          index: 0, title: getLocale("OKR_MyO_Pop_Year"), name: "year", valuesArray: getYear(), value: p.year,
-        },
-        {
-          index: 1, title: getLocale("Mod_period"), name: "cycle", valuesArray: [], value: p.cycle,
-        },
-        {
-          index: 2, title: getLocale("Mod_States"), name: "status", valuesArray: getStatusType(), value: p.status,
-        },
-        {
-          index: 3, title: getLocale("OKR_MyO_Pop_Type"), name: "type", valuesArray: getOkrTypes(), value: p.type,
-        },
-      ],
-      cycles: [],
-    };
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    const {
-      year, cycle, status, type,
-    } = nextProps;
-
-    this.setState({
-      OptionsArray: [
-        {
-          index: 0, title: getLocale("OKR_MyO_Pop_Year"), name: "year", valuesArray: getYear(), value: year,
-        },
-        {
-          index: 1, title: getLocale("Mod_period"), name: "cycle", valuesArray: this.state.OptionsArray[1].valuesArray, value: cycle,
-        },
-        {
-          index: 2, title: getLocale("Mod_States"), name: "status", valuesArray: getStatusType(), value: status,
-        },
-        {
-          index: 3, title: getLocale("OKR_MyO_Pop_Type"), name: "type", valuesArray: getOkrTypes(), value: type,
-        },
-      ],
-    });
-  }
-
-  componentDidMount() {
-    this.getCycleTypes();
-  }
-
-  // NOTE componentWillReceiveProps 会导致筛选条件无法出现 全部周期这种默认选项
-  handleDeleteUser = (id: number) => {
-    const { onChange, users } = this.props;
-    onChange(
-      "users",
-      users.filter((u) => u.Id != id),
-    );
-  };
-
-  getCycleTypes = () => {
-    rget("v1")("okr/cycleSetting").then((res) => {
-      const data = res.Data;
-      const cycles = [{
-        title: getLocale("OKR_MyO_Butt_AllStates"),
-        value: "-1",
-      }];
-      if (data.isOpenYear) {
-        cycles.push({
-          title: getLocale("OKR_MyO_Pop_Year"),
-          value: "1",
-        });
-      }
-      if (data.isOpenHalfYear) {
-        cycles.push({
-          title: getLocale("OKR_MyO_Pop_Firsthalf"),
-          value: "5,1",
-        });
-        cycles.push({
-          title: getLocale("OKR_MyO_Pop_Secondhalf"),
-          value: "5,2",
-        });
-      }
-      if (data.isOpenQuarter) {
-        cycles.push({
-          title: getLocale("OKR_MyO_Pop_1stQuarter"),
-          value: "2,1",
-        }, {
-          title: getLocale("OKR_MyO_Pop_2ndQuarter"),
-          value: "2,2",
-        }, {
-          title: getLocale("OKR_MyO_Pop_3rdQuarter"),
-          value: "2,3",
-        }, {
-          title: getLocale("OKR_MyO_Pop_4thQuarter"),
-          value: "2,4",
-        });
-      }
-      if (data.isOpenBimonthly) {
-        cycles.push(...getBimonthlyMonthKeyValue(data.yearStartMonth));
-      }
-      if (data.isOpenMonth) {
-        cycles.push(...getMonthKeyValue());
-      }
-      if (data.isOpenCustom) {
-        cycles.push({
-          title: getLocale("Mod_Customization"),
-          value: "0,0",
-        });
-      }
-      const newOptions = [...this.state.OptionsArray];
-      newOptions[1] = { ...newOptions[1] };
-      newOptions[1].valuesArray = cycles;
-      this.setState({
-        OptionsArray: newOptions,
-        cycles,
-      });
-    });
-  };
-
-  handleDeleteDepartment = (id: number) => {
-    const { onChange, departments } = this.props;
-    onChange(
-      "departments",
-      departments.filter((d) => d.Id != id),
-    );
-  };
-
-  handleClear = () => {
-    this.props.onChange("clear");
-    const _optionArray = this.state.OptionsArray.map((option) => ({ ...option, value: null }));
-    // @ts-ignore
-    this.setState({ OptionsArray: _optionArray });
-  };
-
-  handlerFilterOptions = (option: number) => {
-    const { onChange } = this.props;
-    option == 1 ? onChange("remembered", true) : onChange("remembered", false);
-  };
-
-  handleFilterDelete = (name: string) => {
-    const newArray = this.state.OptionsArray.map((option) => {
-      if (option.name == name) {
-        return { ...option, value: null };
-      }
-      return option;
-    });
-    this.props.onChange(name, null);
-    this.setState({ OptionsArray: newArray });
-  };
-
-  handleSelected = (data: any[], value: any, filed: string) => {
-    this.props.onChange(filed, value);
-    const _optionsArray = this.state.OptionsArray.map((option) => {
-      if (option.name == filed) {
-        return { ...option, valuesArray: data, value };
-      }
-      return option;
-    });
-    this.setState({ OptionsArray: _optionsArray });
-  };
-
-  render() {
-    const {
-      year, cycle, status, type, users, onChange, departments, remembered, okrPopType,
-    } = this.props;
-    const mapper = {
-      year, cycle, status, type,
-    };
-    const { OptionsArray, cycles } = this.state;
-    return (
-      <Filter>
-        <FilterTop>
-          <FilterLeftWrapper>
-            <Select
-              container={document.body}
-              data={getYear()}
-              value={year}
-              title={getLocale("Mod_Year")}
-              textField="title"
-              valueField="value"
-              maxHeight="280px"
-              type="old"
-              width="64px"
-              onSelect={(value: any) => this.handleSelected(getYear(), value, "year")}
-            />
-            <Select
-              container={document.body}
-              data={cycles}
-              value={cycle}
-              title={getLocale("Mod_period")}
-              textField="title"
-              valueField="value"
-              maxHeight="280px"
-              type="old"
-              width="64px"
-              onSelect={(value: any) => this.handleSelected(cycles, value, "cycle")}
-            />
-            {okrPopType == 1 && (
-              <Select
-                container={document.body}
-                data={getStatusType()}
-                value={status}
-                title={getLocale("Mod_States")}
-                textField="title"
-                valueField="value"
-                maxHeight="280px"
-                type="old"
-                width="64px"
-                onSelect={(value: any) => this.handleSelected(getStatusType(), value, "status")}
-              />
-            )}
-            {this.KRSetting.OkrTypeSetting && (
-              <Select
-                container={document.body}
-                data={getOkrTypes()}
-                value={type}
-                title={getLocale("Mod_Type")}
-                textField="title"
-                valueField="value"
-                maxHeight="280px"
-                type="old"
-                width="64px"
-                onSelect={(value: any) => this.handleSelected(getOkrTypes(), value, "type")}
-              />
-            )}
-            <UserSelectorPop onSubmit={this.props.onUserChange} container={document.body}>
-              <UserSelectorWrapper ref="user">
-                <span>{getLocale("Mod_Owner")}</span>
-                <i className="tu-icon-sort-up" />
-              </UserSelectorWrapper>
-            </UserSelectorPop>
-          </FilterLeftWrapper>
-          <Search placeHolder={getLocale("OKR_MyO_Pop_Pleaenterwords")} onSearch={(keywords: string) => onChange("keywords", keywords)} />
-        </FilterTop>
-        {(OptionsArray.filter((option) => option.value !== null).length > 0 || !!users.length || !!departments.length) && (
-          <FilterBottom>
-            <FilterOptionsWrapper>
-              {OptionsArray.sort((a, b) => a.index - b.index)
-                .filter((option) => option.value !== null)
-                .map((option) => (
-                  <FilterTab title={option.title} valuesArray={option.valuesArray} name={option.name} value={mapper[option.name]} onClick={this.handleFilterDelete} />
-                ))}
-              {(!!users.length || !!departments.length) && <span style={{ marginRight: 5 }}>{getLocale("OKR_MyO_Pop_Owner")}</span>}
-              {users.map((u) => (
-                <OptionItem key={u.Id}>
-                  <OpenUserName name={u.Name} id={u.Id} />
-                  <i className="tu-icon-cross" onClick={() => this.handleDeleteUser(u.Id)} />
-                </OptionItem>
-              ))}
-              {departments.map((u) => (
-                <OptionItem key={u.Id}>
-                  {u.DepartmentName}
-                  的人员
-                  <i className="tu-icon-cross" onClick={() => this.handleDeleteDepartment(u.Id)} />
-                </OptionItem>
-              ))}
-
-              <ToolTip title={getLocale("Tasks_Tab_MyS_Clearselec")} overlayStyle={{ zIndex: 999999 }}>
-                <a onClick={this.handleClear}>{getLocale("OKR_MyO_Pop_Clearselected")}</a>
-              </ToolTip>
-              {!remembered ? (
-                <a onClick={() => this.handlerFilterOptions(1)}>
-                  <ToolTip title={getLocale("Tasks_Tab_MyS_Nextcondit")} overlayStyle={{ zIndex: 999999 }}>
-                    <span>{getLocale("OKR_MyO_Butt_Remember")}</span>
-                  </ToolTip>
-                </a>
-              ) : (
-                <ConfirmPop align="bottom left" confirmTipText={getLocale("OKR_MyO_Err_Bemembere")} onSubmit={() => this.handlerFilterOptions(2)}>
-                  <ToolTip title={getLocale("OKR_MyO_Err_Showabove")} overlayStyle={{ zIndex: 999999 }}>
-                    <a>{getLocale("OKR_MyO_Pop_Cancelremember")}</a>
-                  </ToolTip>
-                </ConfirmPop>
-              )}
-            </FilterOptionsWrapper>
-          </FilterBottom>
-        )}
-      </Filter>
-    );
-  }
-}

package/src/components/change-okr-modal/Item.tsx

@@ -1,233 +0,0 @@
-import React, { PureComponent } from "react";
-import {
-  ItemWrapper, Radio, Tag, ItemObjectiveContainer, ItemKrContainer, ItemTop, WorkNameWrapper, OkrName, ItemBottom, PricipleName, Separator,
-} from "./styledComponents";
-import { OkrData } from "./types";
-import { OpenUserName } from "../../utils/open-data";
-import { getTypeMap } from "./constant";
-import { getMonth } from "../../utils/constant";
-import Tooltip from "../tooltip";
-import { getLocale, isEn } from "../../utils/getLocale";
-
-interface Props {
-  data: OkrData,
-  active: any,
-  onSelect: (data: any) => void,
-  isShowKr: boolean,
-  keywords: string
-}
-interface State {
-  isExpand: boolean
-}
-const colorMap = {
-  1: "132,117,255",
-  2: "79,115,255",
-  3: "46,156,255",
-  4: "12,192,201",
-};
-
-const formatKeywordsFunc = (str: string, key: string) => {
-  const reg = new RegExp(`(${key})`, "g");
-  const newstr = str.replace(reg, `<span style="color: #2879ff;">${key}</span>`);
-  return newstr;
-};
-
-const unFormatKeywordsFunc = (str: string, key: string) => {
-  const regExpKey = `<span style="color: #2879ff;">${key}</span>`;
-  const reg = new RegExp(`(${regExpKey})`, "g");
-  const newstr = str.replace(reg, key);
-  return newstr;
-};
-
-const htmlToText = (text) => {
-  const div = document.createElement("div");
-  div.innerHTML = text;
-  const newtext = div.innerText || div.textContent;
-  return newtext;
-};
-
-const dealOkrData = (data: OkrData, keyWords: string) => {
-  const newData = data;
-  if (keyWords) {
-    newData.workName = formatKeywordsFunc(data.workName, keyWords);
-    newData.Krs = newData.Krs.map((item) => ({
-      ...item,
-      mileStoneName: formatKeywordsFunc(item.mileStoneName, keyWords),
-    }));
-  }
-  return data;
-};
-export default class Item extends PureComponent<Props, State> {
-  // @ts-ignore
-  isObjectiveRelevanceKr: boolean = window.BSGlobal.OkrAdvancedSetting.KRSetting.ObjectiveRelevanceKr;
-  // const {data,keywords} = props
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      isExpand: false,
-    };
-  }
-
-  componentDidMount() {
-    this.isExtend();
-  }
-
-  componentWillReceiveProps() {
-    this.isExtend();
-  }
-
-  onSelect = (e: any, pdata: any) => {
-    e.stopPropagation();
-    e.nativeEvent.stopImmediatePropagation();
-    const { keywords, onSelect, data } = this.props;
-    const unFormatData = { ...pdata };
-    if (keywords) {
-      if (unFormatData.workName) {
-        unFormatData.workName = unFormatKeywordsFunc(unFormatData.workName, keywords);
-      } else {
-        unFormatData.mileStoneName = unFormatKeywordsFunc(unFormatData.mileStoneName, keywords);
-      }
-    }
-    onSelect({ selectData: unFormatData, okrInfo: data });
-  };
-
-  // 判断是否展开KR
-  isExtend = () => {
-    const { data, active } = this.props;
-    const { isExpand } = this.state;
-    if (data.Krs.length > 0) {
-      const isRelatedKr = data.Krs.some((item) => item.mileStoneId === (active.workId || active.mileStoneId));
-      this.setState({
-        isExpand: isRelatedKr ? true : isExpand || data.isOpen,
-      });
-    }
-  };
-
-  getCycleText = () => {
-    const { data } = this.props;
-    const hzNum = [
-      getLocale("OKR_MyO_Pop_1stQuarter"),
-      getLocale("OKR_MyO_Pop_2ndQuarter"),
-      getLocale("OKR_MyO_Pop_3rdQuarter"),
-      getLocale("OKR_MyO_Pop_4thQuarter"),
-    ];
-    switch (data.cycleType) {
-      case 1: return `${data.annualNum}${isEn ? "" : "年"}`;
-      case 2: return hzNum[data.yqmnum - 1];
-      case 3: return getMonth()[data.yqmnum - 1];
-      case 4: return `${getMonth()[data.yqmnum - 1]}-${getMonth()[((data.yqmnum + 1) % 12 || 12) - 1]}月`;
-      case 5: return data.yqmnum === 1 ? getLocale("OKR_MyO_Pop_Firsthalf") : getLocale("OKR_MyO_Pop_Secondhalf");
-      default: return getLocale("Mod_Customization");
-    }
-  };
-
-  renderItemKr = () => {
-    const {
-      data, active, isShowKr, keywords,
-    } = this.props;
-    const okrData: any = dealOkrData(data, keywords);
-    if (okrData.Krs.length > 0) {
-      return okrData.Krs.map((item: any, index: number) => {
-        if (this.isObjectiveRelevanceKr) {
-          return (
-            <ItemTop key={item.mileStoneId}>
-              <Radio onClick={(e: any) => this.onSelect(e, data.Krs[index])} active={active && item.mileStoneId === (active.workId || active.mileStoneId)} />
-              <WorkNameWrapper isShowKr={isShowKr}>
-                <Tooltip placement="top" overlay={htmlToText(item.mileStoneName)}>
-                  <OkrName isKr isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: `KR${index + 1}：${item.mileStoneName}` }} />
-                </Tooltip>
-              </WorkNameWrapper>
-            </ItemTop>
-          );
-        } if (active && item.mileStoneId === (active.workId || active.mileStoneId)) {
-          return (
-            <ItemTop key={item.mileStoneId}>
-              <Radio onClick={(e: any) => this.onSelect(e, data.Krs[index])} active={active && item.mileStoneId === (active.workId || active.mileStoneId)} />
-              <WorkNameWrapper isShowKr={isShowKr}>
-                <Tooltip placement="top" overlay={htmlToText(item.mileStoneName)}>
-                  <OkrName isKr isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: `KR${index + 1}：${item.mileStoneName}` }} />
-                </Tooltip>
-              </WorkNameWrapper>
-            </ItemTop>
-          );
-        }
-        return "";
-      });
-    }
-    return <span />;
-  };
-
-  render() {
-    const {
-      data, active, isShowKr, keywords,
-    } = this.props;
-    const { isExpand } = this.state;
-    const okrData: any = dealOkrData(data, keywords);
-    return (
-      <ItemWrapper>
-        <ItemObjectiveContainer onClick={() => this.setState({ isExpand: !isExpand })}>
-          <ItemTop>
-            <Radio onClick={(e: any) => this.onSelect(e, data)} active={active && data.workId === active.workId} />
-            <Tag color={colorMap[data.cycleType] || colorMap[4]}>{this.getCycleText()}</Tag>
-            <WorkNameWrapper isShowKr={isShowKr}>
-              <Tooltip placement="top" overlay={htmlToText(okrData.workName)}>
-                <OkrName isKr={false} isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: okrData.workName }} />
-              </Tooltip>
-            </WorkNameWrapper>
-            {this.isObjectiveRelevanceKr && isShowKr && data.Krs.length > 0 && <span className={`${isExpand ? "tu-icon-arrow-up" : "tu-icon-arrow-down"}`} />}
-          </ItemTop>
-          <ItemBottom>
-            {
-              !isShowKr && [
-                <span>{getTypeMap()[data.okrType]}</span>,
-                <Separator />,
-              ]
-            }
-            <PricipleName><OpenUserName name={data.principalUser.name} id={data.principalUser.userId} /></PricipleName>
-            <Separator />
-            <span>
-              {data.startDate}
-              -
-              {data.endDate}
-            </span>
-            {
-              isShowKr && [
-                <Separator />,
-                <span>{data.statusName}</span>,
-              ]
-            }
-          </ItemBottom>
-        </ItemObjectiveContainer>
-        {
-          isShowKr && (this.isObjectiveRelevanceKr || (!this.isObjectiveRelevanceKr && okrData.hasSub)) && (
-            <ItemKrContainer className={`${isExpand ? "slideIn" : "slideOut"}`}>
-              {/* {
-                okrData.Krs.length > 0 && okrData.Krs.map((item: any, index: number) => (this.isObjectiveRelevanceKr ? (
-                  <ItemTop key={item.mileStoneId}>
-                    <Radio onClick={(e: any) => this.onSelect(e, data.Krs[index])} active={active && item.mileStoneId === (active.workId || active.mileStoneId)} />
-                    <WorkNameWrapper isShowKr={isShowKr}>
-                      <Tooltip placement="top" overlay={htmlToText(item.mileStoneName)}>
-                        <OkrName isKr isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: `KR${index + 1}：${item.mileStoneName}` }} />
-                      </Tooltip>
-                    </WorkNameWrapper>
-                  </ItemTop>
-                ) : active && item.mileStoneId === (active.workId || active.mileStoneId) ? (
-                  <ItemTop key={item.mileStoneId}>
-                    <Radio onClick={(e: any) => this.onSelect(e, data.Krs[index])} active={active && item.mileStoneId === (active.workId || active.mileStoneId)} />
-                    <WorkNameWrapper isShowKr={isShowKr}>
-                      <Tooltip placement="top" overlay={htmlToText(item.mileStoneName)}>
-                        <OkrName isKr isShowKr={isShowKr} dangerouslySetInnerHTML={{ __html: `KR${index + 1}：${item.mileStoneName}` }} />
-                      </Tooltip>
-                    </WorkNameWrapper>
-                  </ItemTop>
-                ) : ""))
-              } */}
-              {this.renderItemKr()}
-            </ItemKrContainer>
-          )
-        }
-      </ItemWrapper>
-    );
-  }
-}