@titaui/pc 1.7.52 → 1.7.56

package/src/components/okr-detail/okr-list/create-kr-item/index.scss

@@ -1,65 +0,0 @@
-.okr-list-create-kr {
-  display: flex;
-  align-items: center;
-
-  &__heart {
-    position: absolute;
-    right: 16px;
-    top: 9px;
-  }
-
-  input {
-    flex-grow: unset !important;
-    width: calc(100% - 76px) !important;
-  }
-
-  &__user {
-    height: 26px;
-    margin-left: 20px;
-  }
-
-  &__input {
-    position: relative;
-    width: 100%;
-    
-    > p {
-      background-color: #fff;
-      box-sizing: border-box;
-      padding: 12px 20px;
-      border: 1px solid rgba(245, 166, 35, 0.4);
-      border-radius: 4px;
-      position: absolute;
-      top: calc(100% + 6px);
-      width: 340px;
-      font-size: 14px;
-      font-weight: 400;
-      text-align: justify;
-      color: #344766;
-
-      > span {
-        color: #2879ff;
-      }
-
-      > p {
-        color: #657899;
-      }
-
-      > div {
-        display: flex;
-        justify-content: flex-end;
-      }
-
-      a {
-        font-size: 12px;
-        font-weight: 400;
-        text-align: right;
-        color: #c2c8d5;
-
-        &:last-child {
-          color: #2879ff;
-          margin-left: 10px;
-        }
-      }
-    }
-  }
-}

package/src/components/okr-detail/okr-list/create-kr-item/index.tsx

@@ -1,222 +0,0 @@
-import React, { ReactElement, useCallback, useEffect, useRef, useState } from 'react';
-import { Avatar, Input, Tooltip } from 'tita-ui';
-import classNames from 'classnames';
-import UserSelector from '../../../user-selector';
-import Confidence from '../../../confidence';
-import { getUserInfo } from '../../../../utils/bs-global';
-import { hasAncestorElement } from './dom';
-import { createNewKr } from '../../request-apis';
-
-import './index.scss';
-interface Props {
-  endDate: string;
-  startDate: string;
-  workId: string | number;
-  addKr: Function;
-  getWrapperRef: Function;
-  onHide: Function;
-}
-
-const preCls = 'okr-list-create-kr';
-
-function CreateKr({
-  startDate,
-  endDate,
-  workId,
-  addKr,
-  getWrapperRef,
-  onHide,
-}: Props): ReactElement {
-
-  const dataRef = useRef<any>();
-  const [krName, setKrName] = useState('');
-  const [showTip, setShowTip] = useState(false);
-  const tipsEnable = localStorage.getItem('list_create_kr_tips_' + getUserInfo().Id) != 'false';
-  const [confidenceIndex, setConfidenceIndex] = useState(5);
-  const [user, setUser] = useState(() => { // 负责人
-    const { Name, Id, UserAvatar } = getUserInfo();
-    return {
-      'name': Name,
-      'id': Id,
-      'avatar': {
-        'medium': UserAvatar.Medium,
-        'color': UserAvatar.Color
-      }
-    }
-  });
-
-  const inputRef = useRef<HTMLInputElement>() as React.RefObject<HTMLInputElement>;
-
-  dataRef.current = {
-    ...dataRef.current,
-    krName,
-    user,
-    startDate,
-    endDate,
-    workId,
-    addKr,
-    getWrapperRef,
-    onHide,
-  };
-
-  const create = useCallback((e: MouseEvent) => {
-    // 选中了选人组件中的item
-    if (hasAncestorElement(e.target, "titaui-popup")) return;
-    if (
-      dataRef.current.getWrapperRef().current &&
-      dataRef.current.getWrapperRef().current.contains(e.target as Node)
-    ) {
-      return;
-    }
-    if (dataRef.current.krName.trim()) {
-      createNewKr({
-        'PrincipalId': dataRef.current.user.id,
-        'mileStoneName': dataRef.current.krName,
-        'startDate': dataRef.current.startDate,
-        'endDate': dataRef.current.endDate,
-        'workId': dataRef.current.workId,
-        confidenceIndex
-      }).then(res => {
-        dataRef.current.addKr(res);
-        dataRef.current.onHide();
-      });
-    } else {
-      dataRef.current.onHide();
-    }
-  }, []);
-
-  const focus = () => {
-    setTimeout(() => {
-      inputRef.current && inputRef.current.focus();
-    }, 0);
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', create, false);
-    return () => document.removeEventListener('click', create);
-  }, []);
-
-  useEffect(() => {
-    focus();
-  }, []);
-
-  const onInputKeyDown = e => {
-    if (e.key.toLocaleLowerCase() == 'enter') {
-      if (krName.trim()) {
-        createNewKr({
-          'PrincipalId': user.id,
-          'mileStoneName': krName,
-          'startDate': startDate,
-          'endDate': endDate,
-          'workId': workId,
-          confidenceIndex,
-        }).then(res => {
-          addKr(res);
-          onHide();
-        });
-      } else {
-        onHide();
-      }
-    }
-  }
-
-  const onBlur = () => {
-    setTimeout(() => {
-      setShowTip(false);
-    }, 200);
-  }
-
-  const onFocus = () => {
-    tipsEnable && !dataRef.current.hideTips && setShowTip(true);
-  }
-
-  const stopPropagation = e => {
-    e.nativeEvent.stopImmediatePropagation();
-    e.stopPropagation();
-  }
-
-  const onNextTalk = () => {
-    setShowTip(false);
-    dataRef.current.hideTips = true;
-  }
-
-  const onNoMoreShow = () => {
-    setShowTip(false);
-    localStorage.setItem('list_create_kr_tips_' + getUserInfo().Id, 'false');
-  }
-
-  const onUserSubmit = ([user]) => {
-    const { data } = user;
-    setUser({
-      'name': data.name,
-      'id': data.userId,
-      'avatar': data.avatar,
-    });
-  }
-
-  const onConfidenceChange = index => {
-    setConfidenceIndex(index);
-  }
-
-  return (
-    <div className={preCls}>
-      <div className={classNames(`${preCls}__input`)}>
-        <Input
-          placeholder='创建关键成果KR，回车即可创建成功'
-          inputRef={inputRef}
-          value={krName}
-          onChange={e => setKrName(e.target.value)}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onKeyDown={onInputKeyDown}
-        />
-        <p
-          style={{ 'display': showTip ? 'block' : 'none', 'zIndex': 1 }}
-          onClick={stopPropagation}
-        >
-          书写建议：KR是<span>可量化</span>的，需要体现行动结果
-          <br />
-          <p>示例：完成4篇宣传文案的发布，实现至少一篇宣传稿出现在某网站搜索「OKR」 的首屏</p>
-          <div>
-            <a onClick={onNextTalk}>下次再说</a>
-            <a onClick={onNoMoreShow}>不再提示</a>
-          </div>
-        </p>
-        <span className={classNames(`${preCls}__heart`)}>
-          <Tooltip content='修改信心指数1'>
-            <span style={{ display: 'inline-flex' }}>
-              <Confidence
-                editable
-                value={confidenceIndex}
-                onValueChange={onConfidenceChange} />
-            </span>
-          </Tooltip>
-        </span>
-      </div>
-      <div
-        className={classNames(`${preCls}__user`)}
-        onClick={stopPropagation}
-      >
-        <UserSelector           multiple={false}
-          selectNodes={{}}
-          position="bottomLeft"
-          onSelect={onUserSubmit}
-          disabledDepartSelect={true}
-          panes={{ depart: true }}
-          searchedPanes={{ user: true }}
-        >
-          <Avatar
-            name={user.name}
-            userId={user.id}
-            color={user.avatar.color}
-            src={user.avatar.medium}
-            size={Avatar.size(7)}
-          />
-        </UserSelector>
-
-      </div>
-    </div>
-  );
-}
-
-export default CreateKr;

package/src/components/okr-detail/okr-list/create-kr-item/style.ts

@@ -1,348 +0,0 @@
-import styled from 'styled-components';
-
-export const Wrapper = styled.div`
-
-`;
-export const DivideLine = styled.div`
-  height: 11px;
-  margin: 0 0 0 30px;
-  border-bottom: 1px solid #f0f2f5;
-`;
-export const IconGroup = styled.span`
-    height: 18px;
-    display: flex;
-    align-items: center;
-    position: relative;
-    top: 4px;
-`
-export const Icon = styled.span`
-  font-size: 12px;
-  color: ${(p: any) => p.color || '#89919F'};
-
-  &.tu-icon-diot {
-    color: #a4acb9;
-  }
-
-  // &.okr-type {
-  //   font-size: 16px;
-  //   color: #7f91b4;
-  //   position: relative;
-  //   top: ${(p: any) => p.top};
-  // }
-
-  // &.tu-icon-bianji2 {
-  //   margin-left: 6px;
-  //   font-size: 14px;
-  //   color: #2879ff;
-  //   cursor: pointer;
-  // }
-
-  // &.tu-icon-heart-solid {
-  //   margin-right: 6px;
-  //   color: #ff8c00;
-  // }
-
-  &.execute-icon {
-    font-size: 14px;
-    cursor: pointer;
-    position: relative;
-    top: 2px;
-  }
-
-  &.tu-icon-singlebox-have,
-  &.tu-icon-singlebox-avtive {
-    font-size: 14px;
-    color: #2879ff;
-  }
-
-  &.tu-icon-warning {
-    font-size: 14px;
-    color: #acb7bf;
-  }
-
-  &.tu-icon-more-diji {
-      position: relative;
-
-      &::after {
-          content: '';
-          
-      }
-  }
-`;
-export const OClassify = styled.span`
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
-  min-height: 20px;
-  margin-left: 6px;
-  background-image: url(${(p: any) => p.src});
-  background-repeat: no-repeat;
-  background-size: contain;
-  display: inline-block;
-`;
-export const Item = styled.div`
-
-
-  // &:hover {
-  //   .tu-icon-placeholder {
-  //     opacity: 0 !important;
-  //     visibility: hidden !important;
-  //   }
-  //   .oItem-options {
-  //     opacity: 1;
-  //     visibility: visible;
-  //   }
-  // }
-`;
-export const Toggle = styled.div`
-    width: 16px;
-    min-width: 16px;
-    height: 16px;
-    min-height: 16px;
-    margin-top: 4px;
-    margin-right: 14px;
-    border-radius: 2px;
-    // background: #f7f8fa;
-    color: #89919f;
-    cursor: pointer;
-    display: ${(p: any) => p.display || 'flex'};
-    align-items: center;
-    align-self: flex-start;
-    justify-content: center;
-    visibility: ${(p: any) => p.visibility};
-`
-export const OName = styled.div`
-    flex: 1;
-    font-size: 16px;
-    line-height: 26px;
-    transition: color .3s ease-in;
-    color: rgb(20, 28, 40);
-    cursor: pointer;
-    position: relative;
-    display: flex;
-    .name-content {
-      width: auto;
-      display: flex;
-
-      &:hover {
-        .tu-icon-bianji2 {
-          opacity: 1;
-          visibility: visible;
-        }
-      }
-    }
-
-  .name {
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    font-weight:500;
-    &:hover {
-      color: #2879ff;
-    }
-  }
-
-  .tu-icon-bianji2 {
-    opacity: 0;
-    transition: all 0.3s ease-in;
-    visibility: hidden;
-  }
-`;
-export const ONameWrapper = styled.div`
-  flex: 1;
-  margin-right: 40px;
-  display: flex;
-  align-items: ${(p: any) => p.alignItems};
-`;
-export const OScore = styled.div`
-  width: 42px;
-  height: 18px;
-  margin-right: 40px;
-  font-size: 12px;
-  border-radius: 9px;
-  background: rgba(246, 189, 22, 0.1);
-  color: #f6bd16;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  visibility: ${(p: any) => p.visibility};
-`;
-export const AvatarWrapper = styled.div`
-  margin-right: 40px;
-  display: flex;
-  cursor: ${(p: any) => p.cursor};
-`;
-export const ProgressWrapper = styled.div`
-  width: 160px;
-  margin-right: 18px;
-  font-size: 12px;
-  color: #89919f;
-  position: relative;
-`;
-export const Progress = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  position: relative;
-  cursor: ${(p: any) => p.cursor || 'default'};
-`;
-export const ProgressDate = styled.div`
-  font-size: 12px;
-  line-height: 14px;
-  position: absolute;
-  bottom: -17px;
-  left: 6px;
-`;
-export const ProgressStatus = styled.span`
-  font-size: 12px;
-  line-height: 16px;
-  color: ${(p: any) => p.color || '#89919f'};
-  position: absolute;
-  right: 0;
-
-  span {
-    margin-right: 3px;
-  }
-`;
-export const Percent = styled.p`
-  margin-bottom: 0;
-  font-size: 12px;
-  line-height: 18px;
-  color: ${(p: any) => p.color || '#89919f'};
-  position: absolute;
-  top: 50%;
-  left: 6px;
-  transform: translateY(-50%);
-`;
-
-export const InputWrapper = styled.div`
-  flex: 1;
-
-  input {
-    width: calc(100% - 10px);
-  }
-`;
-export const AddKrBtn = styled.a`
-  font-size: 13px;
-  font-weight: 400;
-  text-align: left;
-  color: #89919f;
-  ::before {
-    margin-right: 9px;
-  }
-`;
-export const OptionsWrapper = styled.div`
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-`;
-export const Options = styled.div`
-  width: 57px;
-  height: 20px;
-  padding-left: 23px;
-  opacity: 0;
-  transition: all 0.3s cubic-bezier(0.6, -0.28, 0.74, 0.05);
-  transform-origin: right left;
-  background: linear-gradient(270deg, #ffffff 72%, rgba(255, 255, 255, 0));
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  visibility: hidden;
-  position: absolute;
-  top: 0;
-  right: 0;
-`;
-export const Option = styled.div`
-  span {
-    font-size: 17px;
-    transition: all 0.3s ease-in;
-    color: #89919F;
-    cursor: pointer;
-
-    &:hover {
-        color: #7f91b4;
-    }
-  }
-`;
-export const InputTipsWrapper = styled.div`
-  position: relative;
-  flex: 1;
-  >p {
-      background-color: #FFF;
-    box-sizing: border-box;
-    padding: 12px 20px;
-    border: 1px solid rgba(245, 166, 35, 0.4);
-    border-radius: 4px;
-    position: absolute;
-    top: calc(100% + 6px);
-    width: 340px;
-    font-size: 14px;
-    font-weight: 400;
-    text-align: justify;
-    color: #344766;
-    >span {
-      color: #2879FF;
-    }
-    >p {
-      color: #657899;
-    }
-    > div {
-      display: flex;
-      justify-content: flex-end;
-    }
-    a {
-      font-size: 12px;
-      font-weight: 400;
-      text-align: right;
-      color: #c2c8d5;
-      :last-child{
-        color: #2879FF;
-        margin-left: 10px;
-      }
-    }
-  }
-`
-export const Content = styled.div`
-    width: 300px;
-    
-    p {
-        margin-bottom: 6px;
-        font-size: 14px;
-        line-height: 22px;
-        color: #344766;
-        word-break: break-all;
-    }
-`
-export const Link = styled.a`
-    width: 100%;
-    font-size: 12px;
-    line-height: 17px;
-    transition: all .3s ease-in;
-    color: #2879ff;
-    display: inline-block;
-    text-align: right;
-
-    &:hover {
-        color: #1B6CF1;
-    }
-`
-export const OBadge = styled.span`
-    height: 18px;
-    margin-left: 6px;
-    padding: 2px 8px;
-    font-size: 12px;
-    line-height: 14px;
-    border-radius: 9px;
-    background: #F7F8FA;
-    box-sizing: border-box;
-    color: #A4ACB9;
-    display: inline-block;
-    white-space: nowrap;
-`

package/src/components/okr-detail/okr-list/drag-order-kr.js

@@ -1,41 +0,0 @@
-
-export const removeKr = (krs, index) => {
-  let newKrs = [];
-  for (let i = 0; i < krs.length; i++) {
-    if (krs[i].index !== index) newKrs.push(krs[i]);
-  }
-  return newKrs;
-}
-
-export const moveFront = (krs, dragNode) => {
-  let newKrs = removeKr(krs, dragNode.index);
-
-  newKrs.unshift(dragNode);
-
-  const pureNewKrs = newKrs.map(it => it.data);
-  return pureNewKrs;
-}
-
-export const moveNext = (krs, dropNode, dragNode) => {
-  let newDragNode = { ...dragNode };
-  let removedKrs = removeKr(krs, dragNode.index);
-  let newKrs = [];
-
-  for (let i = 0; i < removedKrs.length; i++) {
-
-    if (i > 0 && removedKrs[i - 1].index == dropNode.index) {
-      newKrs.push(newDragNode);
-      newKrs.push(removedKrs[i]);
-
-    } else {
-      newKrs.push(removedKrs[i]);
-    }
-  }
-
-  if (newKrs.length == krs.length - 1) {
-    newKrs.push(newDragNode);
-  }
-
-  const pureNewKrs = newKrs.map(it => it.data);
-  return pureNewKrs;
-}

package/src/components/okr-detail/okr-list/empty/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import './index.scss';
-
-const preCls = "okr-detail-olist-empty";
-
-export default ({ onCreateKr, canEditOkr, style={} }) => {
-
-  return <div className={preCls} style={style}>
-    <div className={classNames(`${preCls}__icon`)}>
-      <span />
-    </div>
-    <div className={classNames(`${preCls}__desp`)}>
-      <div className={classNames(`${preCls}__desp-h1`)}>目标已创建，赶快制定衡量目标达成的关键成果吧~</div>
-      <div className={classNames(`${preCls}__desp-h2`)}>
-        <span>请先了解</span>
-        <a href="https://wiki.tita.com/pages/viewpage.action?pageId=852060" target="_blank">什么是关键成果？</a>
-      </div>
-    </div>
-    {canEditOkr && 
-      <div className={classNames(`${preCls}__action`)}>
-        <span className={classNames(`${preCls}__action-btn`)} onClick={() => onCreateKr()}>
-          <span>添加关键成果</span>
-        </span>
-      </div>
-    }
-  </div>
-}