@titaui/pc 1.9.34 → 1.9.35

package/src/components/status-time/index.tsx

@@ -1,75 +0,0 @@
-import React, { FC, useState, useEffect, useCallback } from 'react';
-import { getLocale, isEn } from '../../utils/getLocale';
-import './index.scss';
-
-interface IStatusTimeProps {
-  deadLine: string | number;
-  isLongTerm: boolean;
-  isCancel: boolean;
-  isComplete: boolean;
-}
-
-const StatusTime: FC<IStatusTimeProps> = ({ deadLine, isLongTerm, isCancel, isComplete }) => {
-
-  const [colorType, setColorType] = useState('default');
-  const [isRemainLessThan30Days, setIsRemainLessThan30Days] = useState(false);
-  const [overDue, setOverDue] = useState(false)
-  const [remainDays, setRemainDays] = useState(0);
-  const [deadDate, setDeadDate] = useState({
-    year: 0,
-    month: '01',
-    day: '01'
-  })
-
-  const getIsRemainLessThan30Days = () => {
-    const deadTime = new Date(deadLine);
-    const deadYear = deadTime.getFullYear();
-    const deadMonth = deadTime.getMonth() + 1;
-    const deadDay = deadTime.getDate();
-
-    const nowTime = new Date();
-    const difftime = (deadTime.getTime() - nowTime.getTime()) / 1000 / 60 / 60 / 24;
-    setOverDue(difftime < 0)
-    // 新创建任务到期时间是当天需要额外处理一下
-    let diffDays = Math.ceil(difftime < 0 && difftime > -1 ? -1 : difftime);
-    setIsRemainLessThan30Days(diffDays <= 3);
-    setRemainDays(diffDays);
-    setDeadDate({
-      year: deadYear,
-      month: deadMonth > 9 ? `${deadMonth}` : `0${deadMonth}`,
-      day: deadDay > 9 ? `${deadDay}` : `0${deadDay}`
-    });
-  }
-
-  useEffect(() => {
-    getIsRemainLessThan30Days();
-  }, [deadLine])
-
-  useEffect(() => {
-    if (isCancel || isComplete || isLongTerm) {
-      setColorType('finished');
-    } else if (overDue) {
-      setColorType('urgent');
-    } else {
-      setColorType('default');
-    }
-  }, [isCancel, isComplete, isLongTerm, isRemainLessThan30Days, overDue])
-
-  const parseEndDate = useCallback(() => {
-    if (!deadLine) return getLocale('Data_Notset')
-
-    if (isLongTerm) return getLocale('Pro_newpro_LongTerm');
-
-    if (isRemainLessThan30Days && remainDays > 0 && !isComplete && !isCancel) {
-      return isEn ? `${remainDays} day(s)` : `剩余${remainDays}天`;
-    }
-
-    return `${deadDate.year !== new Date().getFullYear() ? deadDate.year + '/' : ''}${deadDate.month}/${deadDate.day}`;
-  }, [isLongTerm, isRemainLessThan30Days, remainDays, deadDate, isComplete, isCancel])
-
-  return <span className={`okr-detail__status-time`}>
-    <span className={`okr-detail__status-time-${colorType}`}>{parseEndDate()}</span>
-  </span>
-}
-
-export default StatusTime;

package/src/components/switch/index.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import Switch from 'rc-switch';
-
-import './rc-switch.scss';
-import './index.scss';
-
-export default props => {
-  const {
-    label,
-    size = 'normal' ,
-    ...restProps
-  } = props;
-
-  return <div className="titaui-switch">
-    {label ?
-      <span className="titaui-switch-label">{label}</span> :
-      ''}
-    <Switch
-      prefixCls={'tui-switch'}
-      {...restProps}
-    />
-  </div>
-}

package/src/components/switch/index.scss

@@ -1,50 +0,0 @@
-.titaui-switch {
-  font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-
-  &-label {
-    vertical-align: bottom;
-    margin-right: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    color: #3F4755;
-    line-height: 22px;
-  }
-
-  .tui-switch-checked {
-    border: 1px solid #2879FF;
-    background-color: #2879FF;
-  }
-  .tui-switch:focus {
-    box-shadow: unset !important;
-  }
-
-  .tui-switch-checked:after {
-    left: 20px;
-  }
-
-  .tui-switch {
-    width: 32px;
-    height: 16px;
-    border: 1px solid #BFC7D5;
-    background-color: #BFC7D5;
-
-    &:after {
-      box-shadow: none;
-      left: 1px;
-    }
-
-    &.tui-switch-checked {
-      border: 1px solid #2879FF;
-      background-color: #2879FF;
-
-      &:after {
-        left: 17px;
-      }
-    }
-  }
-
-  .tui-switch:after {
-    width: 12px;
-    height: 12px;
-  }
-}

package/src/components/switch/rc-switch.scss

@@ -1,101 +0,0 @@
-.tui-switch {
-    position: relative;
-    display: inline-block;
-    box-sizing: border-box;
-    width: 32px;
-    height: 16px;
-    line-height: 20px;
-    padding: 0;
-    vertical-align: middle;
-    border-radius: 20px 20px;
-    border: 1px solid #ccc;
-    background-color: #ccc;
-    cursor: pointer;
-    transition: all .3s cubic-bezier(0.35, 0, 0.25, 1);
-  }
-  .tui-switch-inner {
-    color: #fff;
-    font-size: 12px;
-    position: absolute;
-    left: 24px;
-    top: 0;
-  }
-  .tui-switch:after {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    left: 2px;
-    top: 1px;
-    border-radius: 50% 50%;
-    background-color: #fff;
-    content: " ";
-    cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
-    transform: scale(1);
-    transition: left .3s cubic-bezier(0.35, 0, 0.25, 1);
-    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
-    animation-duration: .3s;
-    animation-name: rcSwitchOff;
-  }
-  .tui-switch:hover:after {
-    transform: scale(1.1);
-    animation-name: rcSwitchOn;
-  }
-  .tui-switch:focus {
-    box-shadow: 0 0 0 2px #d5f1fd;
-    outline: none;
-  }
-  .tui-switch-checked {
-    border: 1px solid #87d068;
-    background-color: #87d068;
-  }
-  .tui-switch-checked .tui-switch-inner {
-    left: 6px;
-  }
-  .tui-switch-checked:after {
-    left: 22px;
-  }
-  .tui-switch-disabled {
-    cursor: no-drop;
-    background: #ccc;
-    border-color: #ccc;
-  }
-  .tui-switch-disabled:after {
-    background: #9e9e9e;
-    animation-name: none;
-    cursor: no-drop;
-  }
-  .tui-switch-disabled:hover:after {
-    transform: scale(1);
-    animation-name: none;
-  }
-  .tui-switch-label {
-    display: inline-block;
-    line-height: 20px;
-    font-size: 14px;
-    padding-left: 10px;
-    vertical-align: middle;
-    white-space: normal;
-    pointer-events: none;
-    user-select: text;
-  }
-  @keyframes rcSwitchOn {
-    0% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.25);
-    }
-    100% {
-      transform: scale(1.1);
-    }
-  }
-  @keyframes rcSwitchOff {
-    0% {
-      transform: scale(1.1);
-    }
-    100% {
-      transform: scale(1);
-    }
-  }
-  

package/src/components/table/index.js

@@ -1,197 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import RcTable from 'rc-table';
-import classNames from 'classnames';
-
-import Pagination from '../pagination'
-import Checkbox from '../checkbox';
-import { getLocale } from '../../utils/getLocale';
-import 'rc-table/assets/index.css';
-
-import './index.scss';
-
-const preCls = 'tita-pc'
-
-const initTableData = (tableData) => {
-  let data = tableData
-  if (data && data.length > 0) {
-    data.map((item, i) => {
-      data[i]['key'] = i
-    })
-  }
-  return data;
-}
-
-export default props => {
-
-  const {
-    prefixCls,
-    columns,
-    tableData,
-    tableLayout,
-    total,
-    rowSelection,
-    pageNum,
-    setPageNum,
-    disablePagination,
-    pageSize,
-    setPageSize,
-    id = '',
-    setTableXScroll
-  } = props;
-
-  const [tdata, setTdata] = useState(() => initTableData(tableData))
-  const { rowSelected = [], setRowSelected } = rowSelection || {};
-  const [hasXScroll, setHasXScroll] = useState(true);
-  const tableRef = useRef();
-  const scrollTimerRef = useRef();
-  const resizeTimerRef = useRef();
-
-  const has = (id) => {
-    let status = false
-    rowSelected.map(item => {
-      if (item === id) {
-        status = true
-      }
-    })
-    return status
-  }
-
-  const deleteTdata = (data) => {
-    let newData = data.filter(item => {
-      return !tDataHasId(item)
-    })
-
-    return newData
-  }
-
-  const tDataHasId = (id) => {
-    let status = false
-    tdata.map(item => {
-      if (item.id === id) {
-        return status = true
-      }
-    })
-    return status
-  }
-
-  const onCheckAllHandler = (checked) => {
-    let arr = deleteTdata([...rowSelected])
-    if (checked) {
-      for (let i = 0; i < tdata.length; i++) {
-        arr.push(tdata[i].id)
-      }
-    }
-    setRowSelected(arr)
-  }
-
-  const onCheckHandler = (checked, id) => {
-    let arr = [...rowSelected]
-    if (checked) {
-      arr.push(id)
-      arr.sort((a, b) => a - b)
-    } else {
-      arr.map((item, i) => {
-        if (item === id) {
-          arr.splice(i, 1)
-        }
-      })
-    }
-    setRowSelected(arr)
-  }
-
-  const checkedAll = () => {
-    let status = true
-    tdata.map(item => {
-      if (!has(item.id)) {
-        return status = false
-      }
-    })
-    return status
-  }
-
-  const getColumns = () => {
-    if (rowSelection) {
-      const selectCloumn = {
-        title: <span className={classNames(`${preCls}__select-td`)}> <Checkbox className="tita-checkbox" checked={checkedAll()} onChange={onCheckAllHandler} /> </span>,
-        dataIndex: 'key',
-        key: 'key',
-        width: 23,
-        fixed: 'left',
-        render: (id, data) => {
-          return (
-            <span key={id} className={classNames(`${preCls}__select-td`)}>
-              <Checkbox className="tita-checkbox" checked={has(data.id)} name={data.id} onChange={onCheckHandler} />
-            </span>
-          )
-        }
-      }
-      return [selectCloumn, ...columns]
-    }
-    return columns
-  }
-
-  useEffect(() => {
-    setTdata(() => initTableData(tableData))
-  }, [tableData])
-
-  useEffect(() => {
-    if (!id) return;
-    tableRef.current = document.querySelector(`#${id}`)
-    tableRef.current.onscroll = () => {
-      setTableXScroll && setTableXScroll(hasXScroll && tableRef.current.clientWidth < tableRef.current.scrollWidth && tableRef.current.scrollLeft > 0);
-    }
-  }, [setTableXScroll, hasXScroll])
-
-  useEffect(() => {
-    if (!id) return;
-    tableRef.current = document.querySelector(`#${id}`)
-    window.onresize = () => {
-      if (resizeTimerRef.current) {
-        clearTimeout(resizeTimerRef.current);
-      }
-      resizeTimerRef.current = setTimeout(() => {
-        setHasXScroll(tableRef.current.clientWidth < tableRef.current.scrollWidth);
-      }, 100)
-    }
-  }, [])
-
-  if (!tableData || !tableData.length) return null;
-
-  return <div className={classNames(`${preCls}__table`)}>
-    <RcTable
-      id={id}
-      className={classNames(`${preCls}__table`)}
-      prefixCls={prefixCls || 'rc-table'}
-      columns={getColumns()}
-      data={tdata}
-      tableLayout={tableLayout || "auto"}
-    />
-    {!disablePagination
-      && <div className={classNames(`${preCls}__table-pagination`)}>
-        <div className={classNames(`${preCls}__table-pagination-left`)}>
-          {(rowSelected && rowSelected.length > 0)
-            && <span>
-              已选择&nbsp;
-              <span className={classNames(`${preCls}__table-pagination-left-text`)}>{rowSelected.length}</span> 项
-              &nbsp;&nbsp;
-              <span
-                className={classNames(`${preCls}__table-pagination-left-btn`)}
-                onClick={() => setRowSelected([])}>
-                {getLocale('OKR_MyO_Pop_Clearselected')}
-              </span>
-            </span>
-          }
-        </div>
-        {!!total&&<Pagination
-          className={classNames({[`${preCls}__pagination-only-one`]:pageSize>total})}
-          pageSize={pageSize}
-          total={total}
-          current={pageNum}
-          onChange={current => setPageNum(current)}
-          onShowSizeChange={(cur, size) => setPageSize(size)}
-          pageSizeOptions={['10', '20', '50', '100']}
-        />}
-      </div>
-    }
-  </div>
-}

package/src/components/table/index.scss

@@ -1,114 +0,0 @@
-.tita-pc {
-  &__select-td{
-    display: flex;
-    align-items:center ;
-    width: 24px;
-    position: relative;
-    top: 4px;
-  }
-  &__table {
-    width: 100%;
-    overflow: auto;
-    min-height: 200px;
-    &-pagination {
-      padding: 10px 0 0 0;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      font-size: 14px;
-      &-left{
-        font-size: 12px;
-        color: #a4acb9;
-        &-text{
-          color: #2879FF;
-        }
-        &-btn{
-          cursor: pointer;
-          color: #2879FF;
-        }
-      }
-      .titaui-pagination{
-        width: unset
-      }
-    }
-
-    .tita-checkbox{
-      margin-right: 4px;
-      top: -1px;
-    }
-    .rc-table th {
-      padding: 16px 4px;
-    }
-    .rc-table td {
-      font-size: 14px;
-      padding: 13px 4px;
-      overflow: hidden;
-    }
-
-    .rc-table-content {
-      border: none;
-    }
-
-    .rc-table-row {
-      border-bottom: solid 1px #e9ecf0;
-      &:hover {
-        background: #F7F8FA;
-        .rc-table-cell-fix-left {
-          background: #F7F8FA;
-        }
-      }
-    }
-
-    .rc-table-cell {
-      background: transparent;
-      box-sizing: border-box;
-      text-align: left;
-      border: none;
-      font-weight: 400;
-      padding-right: 20px;
-      white-space: nowrap;
-      color: #3f4755;
-      font-size: 14px;
-      border-bottom: 1px solid #e9edf0;
-      border-width: 1px;
-      &-fix-left {
-        background: #ffffff;
-        &:hover {
-          background: #F7F8FA;
-        }
-      }
-      a{
-        color: #3f4755;
-        &:hover {
-          color: #2879ff;
-        }
-      }
-    }
-    &__select-td {
-      display: inline-block;
-      min-width: 23px;
-    }
-
-    .rc-pagination-prev button:after {
-      position: relative;
-      top: -3px;
-      font-size: 24px;
-    }
-    .rc-pagination-next button:after {
-      position: relative;
-      top: -3px;
-      font-size: 24px;
-    }
-    .rc-table thead td,
-    .rc-table thead th {
-      background-color: #fff;
-      color: #a4acb9;
-      font-size: 12px;
-    }
-  }
-  &__pagination-only-one{
-    .titaui-pagination__select-selector{
-      margin-right: 26px;
-    }
-  }
-}

package/src/components/tabs/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import Tabs, { TabPane as TPane } from 'rc-tabs';
-
-import 'rc-tabs/assets/index.css';
-import './index.scss';
-
-const preCls = 'titaui-tabs';
-
-const TitaTabs = props => {
-  const { size, noBottomLine, tabWrapperClass, ...restProps } = props;
-  
-  return <div className={classNames(preCls, {
-    [`${preCls}--big`]: size == 'big',
-    [`${preCls}--no-bottom-line`]: noBottomLine
-  }, tabWrapperClass)}>
-    <Tabs
-      tabBarStyle={{ 'borderBottom': 'solid 1px #E9ECF0' }}
-      animated={{ 'inkBar': true, 'tabPane': true }}
-      {...restProps}
-    />
-  </div>
-}
-
-export const TabPane = TPane;
-
-TitaTabs.Pane = TPane;
-
-export default TitaTabs;

package/src/components/tabs/index.scss

@@ -1,71 +0,0 @@
-.titaui-tabs {
-  display: inline-block;
-
-  &--big {
-    div.rc-tabs-tab-btn {
-      font-family: -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei;
-      font-weight: 600;
-      color: #89919f;
-      margin-bottom: 8px;
-    }
-  }
-
-  &--no-bottom-line {
-    .rc-tabs-nav {
-      border-bottom: unset !important;
-    }
-  }
-
-  .rc-tabs-tab-active {
-    color: #2879FF;
-  }
-
-  .rc-tabs {
-    border: none;
-  }
-  .rc-tabs-tab {
-    margin: 0 12px;
-  }
-  .rc-tabs-tab::after {
-    content: "";
-    height: 4px;
-    background: #2879ff;
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    right: 50%;
-    visibility: hidden;
-    border-radius: 2px;
-    transition: left 0.3s ease, right 0.3s ease;
-  }
-  .rc-tabs-tab-active::after {
-    visibility: visible;
-    left: calc(50% - 12px);
-    right: calc(50% - 12px);
-  }
-
-  .rc-tabs-tab-active > div {
-    font-weight: 600;
-    color: #2879ff;
-  }
-  .rc-tabs div:focus {
-    outline: 0;
-  }
-  .rc-tabs-ink-bar {
-    display: none;
-  }
-  .rc-tabs-tab-btn {
-    height: 22px;
-    font-size: 14px;
-    font-weight: 400;
-    color: #3f4755;
-    line-height: 22px;
-    margin-bottom: 4px;
-  }
-  .rc-tabs-content {
-    height: 100%;
-  }
-  .rc-tabs-content-holder {
-    height: calc(100% - 27px);
-  }
-}

package/src/components/task-relation-modal/context.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export const Context = React.createContext({});

package/src/components/task-relation-modal/helper.ts

@@ -1,24 +0,0 @@
-import { getAppHead, getBSGlobal } from "../../utils/bs-global";
-
-export const preCls = "titaui-task-relation";
-
-export const isOpenOkrManage = getAppHead("113"); // 开通OKR
-export const isOpenWorkManage = getAppHead("112"); // 开通项目
-const TaskAdvancedSetting = getBSGlobal("TaskAdvancedSetting");
-export const isOpenLabel = TaskAdvancedSetting.TaskPlanSetting.TaskLabel; // 开启分类
-
-export const lableTypeMap = { // 分类的类型（4：项目 17：普通分类 62:目标
-  'okr': 62,
-  'kr': 62,
-  'work': 4,
-  'milestone': 4,
-  'lable': 17
-}
-
-export const formatDateStr = (str) => {
-  const currentYear = (new Date()).getFullYear();
-  if(str.indexOf(currentYear) !== -1) {
-    return str.substr(5)
-  }
-  return str;
-}