@titaui/pc 1.7.49 → 1.7.53

package/src/components/button/rect-btn/index.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import classNames from "classnames";
+import { RectBtnProps } from "../types";
+import "./index.scss";
+const precls = "titaui-rect-btn";
+
+const RectBtn = (props: RectBtnProps) => {
+  const {
+    type = "default",
+    icon = "",
+    size = "normal",
+    text = "确定",
+    onClick = () => {},
+    className = "",
+    disabled = false,
+  } = props;
+
+  const renderIcon = () => {
+    if (typeof icon == "string") {
+      return (
+        <span className={`${precls}__icon`}>
+          <span className={icon} />
+        </span>
+      );
+    } else {
+      return <span className={`${precls}__icon`}>{icon}</span>;
+    }
+  };
+
+  const onClickHandler = () => {
+    if (disabled) return;
+    onClick && onClick();
+  };
+  return (
+    <span
+      className={classNames(
+        precls,
+        `${precls}--${type}`,
+        `${precls}--${size}`,
+        { [`${precls}--disabled`]: disabled },
+        className
+      )}
+      onClick={onClickHandler}
+    >
+      {icon && renderIcon()}
+      {props.children || text}
+    </span>
+  );
+};
+export default RectBtn;

package/src/components/button/text-btn/index.scss

@@ -0,0 +1,27 @@
+.titaui-text-btn{
+  cursor: pointer;
+  font-size: 14px;
+  &__icon{
+    margin-right: 4px;
+  }
+  &--default{
+    color: #3F4755;
+    &:hover{
+      color: #2879FF;
+    }
+  }
+  &--primary{
+    color: #2879FF;
+    &:hover{
+      color: #5C8EFF;
+    }
+  }
+  &--disabled{
+    color: #A4ACB9;
+    cursor: not-allowed;
+    &:hover{
+      color: #A4ACB9;
+      background: unset;
+    }
+  }
+}

package/src/components/button/text-btn/index.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import classNames from "classnames";
+import { TextBtnProps } from "../types";
+import "./index.scss";
+const precls = "titaui-text-btn";
+
+const TextBtn = (props: TextBtnProps) => {
+  const {
+    type = "default",
+    icon = "",
+    text = "确定",
+    onClick = () => {},
+    className = "",
+    disabled = false,
+    style ={},
+  } = props;
+
+  const renderIcon = () => {
+    if (typeof icon == "string") {
+      return (
+        <span className={`${precls}__icon`}>
+          <span className={icon} />
+        </span>
+      );
+    } else {
+      return <span className={`${precls}__icon`}>{icon}</span>;
+    }
+  };
+
+  const onClickHandler = () => {
+    if (disabled) return;
+    onClick && onClick();
+  };
+  return (
+    <span
+      className={classNames(
+        precls,
+        `${precls}--${type}`,
+        { [`${precls}--disabled`]: disabled },
+        className
+      )}
+      onClick={onClickHandler}
+      style={style}
+    >
+      {icon && renderIcon()}
+      {text}
+    </span>
+  );
+};
+
+export default TextBtn;

package/src/components/button/types.ts

@@ -0,0 +1,30 @@
+import React from "react";
+
+export interface RectBtnProps {
+  type?: "default" | "primary" | "cancel" | "delete";
+  icon?: string | React.ReactElement;
+  text?: string | React.ReactElement;
+  size?: "small" | "normal" | "big";
+  onClick?: Function;
+  className?: string;
+  disabled?: boolean;
+  color?: string;
+  children?: any;
+}
+export interface IconBtnProps {
+  border?: boolean;
+  theme?: "gray" | "light";
+  onClick?: Function;
+  icon?: string | React.ReactElement;
+  disabled?: boolean;
+}
+export interface TextBtnProps {
+  type?: "default" | "primary" 
+  size?: number | string;
+  text?: string | React.ReactElement;
+  icon?: string | React.ReactElement;
+  onClick?: Function;
+  className?: string;
+  disabled?: boolean;
+  style?: any;
+}

package/src/components/cascader/index.scss

@@ -0,0 +1,72 @@
+.titaui-cascader{
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 36px;
+  background: #FFFFFF;
+  border-radius: 8px;
+  border: 1px solid #DFE3EA;
+  padding:0 12px;
+  &-text{
+    font-size: 14px;
+    color: #3F4755;
+  }
+  &-popup{
+    z-index: 2000;
+    box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+    border: 1px solid #F0F2F5;
+    border-radius: 12px;
+    overflow: hidden;
+    .rc-cascader-menu{
+      width: 139px;
+      box-sizing: border-box;
+      border: 1px solid #F0F2F5;
+      padding: 16px 0 16px 6px;
+      &::-webkit-scrollbar{
+        width: 6px !important;
+      }
+    
+    }
+    .rc-cascader-menu-item-active{
+      background: unset;
+      color: #2879ff !important;
+    }
+    .rc-cascader-menu-item{
+      box-sizing: border-box;
+      cursor: pointer;
+      padding: 0 6px;
+      height: 36px;
+      align-items: center;
+      color: #3F4755;
+      &:hover{
+        color: #2879ff;
+        background: #F7F8FA;
+        border-radius: 8px;
+      }
+    }
+    .rc-cascader-menu-item-disabled{
+      opacity:1;
+      cursor: auto;
+      &:hover{
+        color: #3F4755;
+        background: #FFFFFF;
+        border-radius: 8px;
+      }
+    }
+    .rc-cascader-menu-item-expand-icon{
+      display: none;
+    }
+  }
+  .tu-icon-caret-down{
+    font-size: 16px;
+    transform: scale(0.5);
+  }
+}
+.titaui-cascader-time-popup{
+  .rc-cascader-menu{
+    width: 80px;
+    text-align: center;
+  }
+}

package/src/components/cascader/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from "react";
+import Rccascader from "rc-cascader";
+import TimeCascader from "./time";
+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";
+
+const Cascader = ({
+  value,
+  initText,
+  options,
+  onChange = () => {},
+  style = { width: "100px" },
+  placeholder = "请选择",
+  splitSymbol = "",
+  popupClassName = "",
+  ...restProps
+}: Props) => {
+  const [selectValue, setSelectValue] = useState(value);
+  const [inputValue, setInputValue] = useState(initText);
+
+  const handleChange = (value, selectedOptions) => {
+    onChange && onChange(value, selectedOptions);
+    setSelectValue(value);
+    let 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 ? inputValue : placeholder}
+        </div>
+        <span className="tu-icon-caret-down" />
+      </div>
+    </Rccascader>
+  );
+};
+
+Cascader.TimeCascader = TimeCascader;
+export default Cascader;

package/src/components/cascader/time.js

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

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

@@ -0,0 +1,357 @@
+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';
+
+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[]
+}
+
+const years: any = [
+  {
+    title: '全部年份',
+    value: -1,
+  },
+];
+for (let i = 2013; i < 2051; i++) {
+  years.push({ title: i + '年', value: i });
+}
+
+
+
+const statusType = [
+  {
+    title: '全部状态',
+    value: 0,
+  },
+  {
+    title: '进行中',
+    value: 1,
+  },
+  {
+    title: '已结束',
+    value: 2,
+  },
+];
+const okrTypes = [
+  {
+    title: '全部类型',
+    value: -1,
+  },
+  {
+    title: '公司',
+    value: 3,
+  },
+  {
+    title: '部门',
+    value: 2,
+  },
+  {
+    /**
+      新增的团队 --- start
+    */
+    title: '团队',
+    value: 4,
+    /**
+      新增的团队 --- end
+    */
+  },
+  {
+    title: '个人',
+    value: 1,
+  },
+];
+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: '年份', name: 'year', valuesArray: years, value: p.year },
+        { index: 1, title: '周期', name: 'cycle', valuesArray: [], value: p.cycle },
+        { index: 2, title: '状态', name: 'status', valuesArray: statusType, value: p.status },
+        { index: 3, title: '类型', name: 'type', valuesArray: okrTypes, value: p.type },
+      ],
+      cycles: []
+    };
+  }
+  componentWillReceiveProps(nextProps: Props) {
+    const { year, cycle, status, type } = nextProps;
+    
+    this.setState({
+      OptionsArray: [
+        { index: 0, title: '年份', name: 'year', valuesArray: years, value: year },
+        { index: 1, title: '周期', name: 'cycle', valuesArray: this.state.OptionsArray[1].valuesArray, value: cycle },
+        { index: 2, title: '状态', name: 'status', valuesArray: statusType, value: status },
+        { index: 3, title: '类型', name: 'type', valuesArray: okrTypes, 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
+      let cycles = [{
+        title: '全部周期',
+        value: '-1',
+      }]
+      if(data.isOpenYear){
+        cycles.push({
+          title: '年度',
+          value: '1'
+        })
+      }
+      if(data.isOpenHalfYear){
+        cycles.push({
+          title: '上半年',
+          value: '5,1'
+        })
+        cycles.push({
+          title: '下半年',
+          value: '5,2'
+        })
+      }
+      if(data.isOpenQuarter){
+        const num = ['一','二','三','四']
+        for(let i = 0; i < 4; i++){
+          cycles.push({
+            title: `第${num[i]}季度`,
+            value: `2,${i+1}`
+          })
+        }
+      }
+      if(data.isOpenBimonthly){
+        const start = data.yearStartMonth % 2 == 1 ? 1 : 2;
+        let month = start;
+        while(1){
+          const next = (month + 1) % 12 || 12;
+          cycles.push({
+            title: `${month}-${next}月`,
+            value: `4,${month}`
+          })
+          month = (month + 2) % 12 || 12;
+          if(month == start) break
+        }
+      }
+      if(data.isOpenMonth){
+        for(let i = 1; i <=12; i++){
+          cycles.push({
+            title: `${i}月`,
+            value: `3,${i}`
+          })
+        }
+      }
+      if(data.isOpenCustom){
+        cycles.push({
+          title: `自定义`,
+          value: `0,0`
+        })
+      }
+      const newOptions = [...this.state.OptionsArray];
+      newOptions[1] = {...newOptions[1]}
+      newOptions[1].valuesArray = cycles
+      console.log(newOptions)
+      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');
+    let _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) => {
+    let 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);
+    let _optionsArray = this.state.OptionsArray.map(option => {
+      if (option.name == filed) {
+        return { ...option, valuesArray: data, value };
+      } else {
+        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={years}
+              value={year}
+              title='年份  '
+              textField='title'
+              valueField='value'
+              maxHeight='280px'
+              type='old'
+              width='64px'
+              onSelect={(value: any) => this.handleSelected(years, value, 'year')}
+            />
+            <Select
+              container={document.body}
+              data={cycles}
+              value={cycle}
+              title='周期  '
+              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={statusType}
+                value={status}
+                title='状态  '
+                textField='title'
+                valueField='value'
+                maxHeight='280px'
+                type='old'
+                width='64px'
+                onSelect={(value: any) => this.handleSelected(statusType, value, 'status')}
+              />
+            )}
+            {this.KRSetting.OkrTypeSetting && (
+              <Select
+                container={document.body}
+                data={okrTypes}
+                value={type}
+                title='类型  '
+                textField='title'
+                valueField='value'
+                maxHeight='280px'
+                type='old'
+                width='64px'
+                onSelect={(value: any) => this.handleSelected(okrTypes, value, 'type')}
+              />
+            )}
+            <UserSelectorPop onSubmit={this.props.onUserChange} container={document.body}>
+              <UserSelectorWrapper ref='user'>
+                <span>负责人</span>
+                <i className='tu-icon-sort-up' />
+              </UserSelectorWrapper>
+            </UserSelectorPop>
+          </FilterLeftWrapper>
+          <Search placeHolder='请输入关键字' 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}></FilterTab>
+                ))}
+              {(!!users.length || !!departments.length) && <span style={{ marginRight: 5 }}>负责人</span>}
+              {users.map(u => {
+                return (
+                  <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 => {
+                return (
+                  <OptionItem key={u.Id}>
+                    {u.DepartmentName}的人员
+                    <i className='tu-icon-cross' onClick={() => this.handleDeleteDepartment(u.Id)} />
+                  </OptionItem>
+                );
+              })}
+
+              <ToolTip title='清空本次选择' overlayStyle={{ zIndex: 999999 }}>
+                <a onClick={this.handleClear}>清空所选</a>
+              </ToolTip>
+              {!remembered ? (
+                <a onClick={() => this.handlerFilterOptions(1)}>
+                  <ToolTip title='下次进入显示以上条件' overlayStyle={{ zIndex: 999999 }}>
+                    <span>记住选择</span>
+                  </ToolTip>
+                </a>
+              ) : (
+                <ConfirmPop align='bottom left' confirmTipText='确定取消吗？取消后将不再记住以上条件' onSubmit={() => this.handlerFilterOptions(2)}>
+                  <ToolTip title='不再显示以上条件' overlayStyle={{ zIndex: 999999 }}>
+                    <a>取消记住</a>
+                  </ToolTip>
+                </ConfirmPop>
+              )}
+            </FilterOptionsWrapper>
+          </FilterBottom>
+        )}
+      </Filter>
+    );
+  }
+}