@titaui/pc 1.7.35 → 1.7.39

package/src/components/okr-review/components/ReviewItem/style.ts

@@ -1,52 +0,0 @@
-import styled from 'styled-components'
-
-export const ReviewItemContainer = styled.div`
-  height: ${(p: any) => p.mode === 0 ? '40px' : '36px'};
-  margin-top: ${(p: any) => p.mode === 0 ? '10px' : 0};
-  border-radius: 2px;
-  background: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  &:hover {
-    background: ${(p: any) => p.mode === 0 ? 'rgba(194, 224, 255, 0.1)' : '#ffffff'};
-  }
-`
-export const ItemName = styled.div`
-  font-size: ${(p: any) => p.mode === 0 ? '14px' : '16px'};
-  font-weight: 600;
-  color: #3B4247;
-`
-export const ItemOptions = styled.div`
-  font-size: 13px;
-  color: #2879ff;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  div {
-    cursor: pointer;
-  }
-`
-export const ItemEdit = styled.div`
-   &:hover {
-    color: #5C8EFF;
-  }
-`
-export const ItemDetail = styled.div`
-  margin-left: 20px;
-  &:hover {
-    color: #5C8EFF;
-  }
-`
-export const IconEdit = styled.span`
-  margin-right: 5px;
-  position: relative;
-  top: 1px;
-`
-export const IconDetail = styled.span`
-  margin-left: 5px;
-  position: relative;
-  top: 1px;
-`

package/src/components/okr-review/components/confirm-pop/ConfirmPop.tsx

@@ -1,81 +0,0 @@
-import React, { PureComponent } from 'react'
-import Pop from '../../../../components-v1/pop';
-import { ConfirmWrapper, ConfirmText, ConfirmBtnGroup, ButtonCancel, ButtonConfirm } from './style';
-
-interface Props {
-  className?: string
-  align?: string
-  container?: string
-
-  isShowConfirmTitle?: boolean
-  confirmTitle?: string // 提示标题
-  confirmTipText?: string // 提示文字
-
-  isShowCancelBtn?: boolean
-  btnCancelText?: string // 取消按钮文字
-
-  isShowConfirmBtn?: boolean
-  btnConfirmText?: string // 确认按钮文字
-
-  onSubmit: (event: any) => void;
-}
-
-const popContainer = document.body
-
-export default class ConfirmPop extends PureComponent<Props> {
-  static defaultProps = {
-    isShowConfirmTitle: false,
-    confirmTitle: '提示',
-    confirmTipText: '此操作不可恢复，您确定删除吗？',
-    isShowCancelBtn: true,
-    btnCancelText: '取消',
-    isShowConfirmBtn: true,
-    btnConfirmText: '确定'
-  }
-
-  handleShowPop = () => {
-    //@ts-ignore
-    this.refs.pop.show(this.refs.trigger)
-  }
-  handleHide = () => {
-    //@ts-ignore
-    this.refs.pop.hide()
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      align,
-      onSubmit,
-      isShowConfirmTitle,
-      isShowCancelBtn,
-      confirmTitle,
-      confirmTipText,
-      btnCancelText,
-      btnConfirmText
-    } = this.props
-
-    return (
-      <div style={{ 'display': 'inline-block' }}>
-        <div ref='trigger' onMouseDown={() => this.handleShowPop()}>{children}</div>
-        <Pop ref='pop' align={align} container={popContainer} className='tita-common-pop-no-shadow'>
-          <ConfirmWrapper className={`pull-screen-ignore ${className}`}>
-            {
-              isShowConfirmTitle && (
-                <div className="confirm__title">{confirmTitle}</div>
-              )
-            }
-            <ConfirmText className="confirm__content" dangerouslySetInnerHTML={{ __html: confirmTipText }}></ConfirmText>
-            <ConfirmBtnGroup className="confirm__btngroup">
-              {
-                isShowCancelBtn && (<ButtonCancel onMouseDown={() => this.handleHide()}>{btnCancelText}</ButtonCancel>)
-              }
-              <ButtonConfirm onMouseDown={(event: any) => { onSubmit(event); this.handleHide(); event.stopPropagation(); event.nativeEvent.stopImmediatePropagation() }}>{btnConfirmText}</ButtonConfirm>
-            </ConfirmBtnGroup>
-          </ConfirmWrapper>
-        </Pop>
-      </div>
-    )
-  }
-}

package/src/components/okr-review/components/confirm-pop/style.ts

@@ -1,46 +0,0 @@
-import styled from 'styled-components'
-
-export const ConfirmWrapper = styled.div`
-  min-width: 300px;
-  border-radius: 2px;
-  box-shadow: 0 0 4px 0 rgba(0,0,0,0.20);
-  background-color: #ffffff;
-  
-  &.bg {
-    background: url(${require('./praise-bg.png')}) no-repeat 0 0 / 101% 105%;
-    box-shadow: 0 6px 15px 0 rgba(0,0,0,0.15);
-  }
-`
-
-export const ConfirmText = styled.div`
-  padding: 12px 20px;
-  font-size: 14px;
-  line-height: 24px;
-  text-align: left;
-  word-break: break-all;
-  word-wrap: break-word;
-  word-break: break-all;
-`
-
-export const ConfirmBtnGroup = styled.div`
-  padding: 0 15px 15px 10px;
-  text-align: right;
-
-  button {
-    margin-left: 5px;
-    padding: 0px 15px;
-    font-size: 14px;
-    line-height: 30px;
-    border-radius: 2px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    border: none;
-  }
-`
-export const ButtonCancel = styled.button`
-  background-color: #f5f8fa;
-  color: #34434e;
-`
-export const ButtonConfirm = styled.button`
-  background-color: #2879FF;
-  color: #fff;
-`

package/src/components/okr-review/index.tsx

@@ -1,217 +0,0 @@
-import React, { PureComponent } from 'react';
-import RangePickerPop from '../range-picker-pop';
-import ReviewItem from './components/ReviewItem';
-import { isFeishu } from '../../utils/platform';
-import Portals from '../../components-v1/portals/Portals';
-import ReviewPop from './ReviewPop';
-import Transition from '../../components-v1/transition';
-import { getApiUrl, taker } from '../../utils/request-v1';
-import { isHavePermission } from './common';
-import { ReviewContainer, ReviewHead, ReviewAdd, IconAdd, ReviewFilter, IconFilter, FilterTime, ReviewEmpty, IconWiki, ReviewList } from './style';
-import { isPlatform } from '../../utils/open-data';
-
-interface Props {
-  className?: string;
-  feedId: any;
-  editAble: boolean;
-  isCompactMode?: boolean; // 页面样式判断：0：推屏，1：宽页面
-  ObjData: ObjDataObject;
-  defaultRange: DefaultRangeObject; // 时间筛选范围
-  createTask?: (node: any, view: any, option: any, mileStoneId: number, parent: any) => void;
-  isOkrPanel?: boolean; // 用于设置复盘创建计划弹层位置
-  popContainer?: any;
-}
-
-interface State {
-  isShowReviewPop: boolean;
-  startDate: string;
-  endDate: string;
-  editType: number; // 编辑类型：0-新建，1-编辑
-  replayId: number;
-  reviewList: ReviewListObject[];
-}
-
-interface DefaultRangeObject {
-  startDate: string;
-  endDate: string;
-}
-interface ReviewListObject {
-  replayId: number;
-  creatDate: string;
-  editable: boolean;
-}
-export interface ObjDataObject {
-  ObjId: number;
-  ObjType: number;
-  ObjIndex: number;
-  ObjName: string;
-}
-export default class Review extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      'isShowReviewPop': false,
-      'startDate': '',
-      'endDate': '',
-      'editType': 0,
-      'replayId': 0,
-      'reviewList': [{
-        'replayId': 0,
-        'creatDate': '',
-        'editable': true,
-      }],
-    };
-  }
-
-  static defaultProps = {
-    isCompactMode: false,
-  };
-
-  componentDidMount() {
-    this.getReviewList();
-  }
-
-  componentWillReceiveProps(newProps: Props) {
-    this.getReviewList();
-  }
-
-  // 获取复盘了列表
-  getReviewList = (startDate?: string, endDate?: string) => {
-    const { ObjData } = this.props;
-    let url = getApiUrl(`replay/getByObjId?objId=${ObjData.ObjId}&objType=${ObjData.ObjType}&startDate=${startDate || ''}&endDate=${endDate || ''}`);
-    taker(url, 'GET').then(res => {
-      if (res.Code == 1) {
-        this.setState({
-          reviewList: res.Data||[],
-        });
-      }
-    });
-  };
-
-  // 时间筛选
-  _handleTimePickConfirm = (date: any) => {
-    const { startDate, endDate } = date;
-    this.getReviewList(startDate, endDate);
-    this.setState({
-      startDate: this._enFormatDate(startDate),
-      endDate: this._enFormatDate(endDate),
-    });
-  };
-
-  // 处理弹层时间
-  _handlerReviewPopChange = (submitType: string) => {
-    if (submitType) {
-      this.setState(
-        {
-          startDate: '',
-          endDate: '',
-        },
-        () => this.getReviewList(),
-      );
-    }
-    this.setState({ isShowReviewPop: false });
-  };
-
-  // 将2019/12/3改为2019年12月3日
-  _enFormatDate = (date: string) => date && date.replace(/\//, '年').replace(/\//, '月') + '日';
-  // 将2019年12月3日改为2019/12/3
-  _deFormatDate = (date: string) =>
-    date &&
-    date
-      .replace(/年/, '/')
-      .replace(/月/, '/')
-      .replace(/日/, '');
-
-  stopPropagation = (e: any) => {
-    e.nativeEvent.stopImmediatePropagation();
-    e.stopPropagation();
-  };
-
-  render() {
-    let { isShowReviewPop, startDate, endDate, editType, reviewList, replayId } = this.state;
-    const { className, isCompactMode, defaultRange, ObjData, editAble, feedId, createTask, isOkrPanel } = this.props;
-    let isFiltered = startDate && endDate; // 判断是否筛选过
-
-    return (
-      <ReviewContainer className={className} mode={isCompactMode ? 0 : 1}>
-        <ReviewHead mode={isCompactMode ? 0 : 1}>
-          <ReviewAdd
-            style={{ 'visibility': isHavePermission || editAble ? 'visible' : 'hidden' }}
-            onClick={() => this.setState({ 'isShowReviewPop': true, 'editType': 0 })}
-          >
-            <IconAdd className='tu-icon-add' mode={isCompactMode ? 0 : 1}></IconAdd>
-            <span>添加复盘</span>
-          </ReviewAdd>
-          {(reviewList.length > 0 || isFiltered) && (
-            <ReviewFilter>
-              <RangePickerPop
-                align={'bottom right'}
-                format={'YYYY/MM/DD'}
-                defaultRange={defaultRange}
-                container={this.props.popContainer}
-                onConfirm={this._handleTimePickConfirm}
-                popupPlacement={'bottomRight'}
-              >
-                {!isFiltered && <span>时间筛选</span>}
-                <IconFilter className='tu-icon-calendar'></IconFilter>
-                {isFiltered && <FilterTime>{`${startDate} - ${endDate}`}</FilterTime>}
-              </RangePickerPop>
-            </ReviewFilter>
-          )}
-        </ReviewHead>
-        {reviewList.length === 0 ? (
-          <ReviewEmpty mode={isCompactMode ? 0 : 1}>
-            {isFiltered ? <p>没有找到你想要的</p> : <p>尚未复盘过</p>}
-            {!isPlatform('dd') && (
-              <p className='learnmore'>
-                <a href={
-                  isFeishu('https://wiki.tita.com/x/vIK3') || 'https://docs.tita.com/tita-how-to-write-review-summary/'
-                } target='_blank'>
-                  <IconWiki className='tu-icon-wiki' mode={isCompactMode ? 0 : 1}></IconWiki>
-                  <span>了解复盘的重要性</span>
-                </a>
-              </p>
-            )}
-          </ReviewEmpty>
-        ) : (
-          <ReviewList>
-            {reviewList.map((item: any, index: number) => {
-              return (
-                <React.Fragment key={index}>
-                  <ReviewItem
-                    isCompactMode={isCompactMode}
-                    feedId={feedId}
-                    editAble={editAble}
-                    reviewItemData={item}
-                    krIndex={ObjData.ObjIndex}
-                    editReview={() => this.setState({ 'isShowReviewPop': true, 'editType': 1, 'replayId': item.replayId })}
-                  />
-                </React.Fragment>
-              );
-            })}
-          </ReviewList>
-        )}
-        <Portals>
-          <Transition
-            visible={isShowReviewPop}
-            animate={true}
-            transitionName='modal'
-            enterActiveTimeout={300}
-            enterEndTimeout={100}
-            leaveActiveTimeout={100}
-            leaveEndTimeout={300}
-          >
-            <ReviewPop
-              ObjData={ObjData}
-              EditType={editType}
-              ReplayId={replayId}
-              createTask={createTask}
-              isOkrPanel={isOkrPanel}
-              onSubmit={(submitType: string) => this._handlerReviewPopChange(submitType)}
-            />
-          </Transition>
-        </Portals>
-      </ReviewContainer>
-    );
-  }
-}

package/src/components/okr-review/style.ts

@@ -1,78 +0,0 @@
-import styled from 'styled-components'
-
-export const ReviewContainer = styled.div`
-  height: 100%;
-  background: ${(p: any) => p.mode === 0 ? '#ffffff' : 'transparent'};
-`
-export const ReviewHead = styled.div`
-  padding: ${(p: any) => p.mode === 0 ? '0 15px 0 10px' : 0};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
-export const ReviewAdd = styled.div`
-  font-size: 14px;
-  line-height: 24px;
-  color: #2879ff;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  &:hover {
-    color: #5C8EFF;
-  }
-  .tu-icon-add {
-    font-weight: bold;
-  }
-`
-export const IconAdd = styled.span`
-  margin-right: 5px;
-  font-weight: 900 !important;
-  font-size: ${(p: any) => p.mode === 0 ? '10px' : '12px'};
-`
-export const ReviewFilter = styled.div`
-  font-size: 13px;
-  line-height: 24px;
-  color: #83898F;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-`
-export const IconFilter = styled.span`
-  margin-left: 4px;
-  font-size: 15px;
-  position: relative;
-  top: 2px;
-`
-export const FilterTime = styled.span`
-  margin-left: 4px;
-  font-size: 14px;
-  color: #565E66;
-`
-export const ReviewEmpty = styled.div`
-  width: ${(p: any) => p.mode === 0 ? 'calc(100% - 20px)' : 'calc(100% - 10px)'};
-  height: ${(p: any) => p.mode === 0 ? '89px' : '136px'};
-  margin: ${(p: any) => p.mode === 0 ? '6px auto 0' : '20px auto 0'};
-  font-size: ${(p: any) => p.mode === 0 ? '16px' : '20px'};
-  border: 1px dashed #c5c5c5;
-  border-radius: 3px;
-  color: #BFC3C7;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  .learnmore {
-    margin-top: ${(p: any) => p.mode === 0 ? '5px' : '10px'};
-    font-size: ${(p: any) => p.mode === 0 ? '12px' : '14px'};
-    a {
-      color: #2879ff;
-    }
-  }
-`
-export const IconWiki = styled.span`
-  margin-right: 5px;
-  position: relative;
-  top: 2px;
-`
-export const ReviewList = styled.div`
-`

package/src/components/okr-share/common-painter/darwAvatar.ts

@@ -1,65 +0,0 @@
-import openDataPainter from "./openDataPainter";
-import { drawImage } from "./utils";
-
-interface avatarParms {
-  url?: string;
-  color?: string;
-  name: string;
-  id: number;
-  width: number;
-  height: number;
-  x: number;
-  y: number;
-  maxNameWidth?: number;
-}
-export default async function(ctx: CanvasRenderingContext2D, params: avatarParms):Promise<number> {
-  ctx.save();
-  ctx.beginPath();
-  ctx.arc(
-    params.width / 2 + params.x,
-    params.height / 2 + params.y,
-    params.width / 2,
-    0,
-    Math.PI * 2,
-    false,
-  );
-  ctx.clip();
-  ctx.closePath();
-  params.url ? await drawImageAvatar(ctx, params) : await drawTextAvatar(ctx, params);
-  ctx.restore();
-  return params.y + params.height;
-  
-}
-function drawImageAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
-  return  drawImage(ctx,avatar.url as string,avatar.x,avatar.y,avatar.width,avatar.height)
-}
-function drawTextAvatar(ctx: CanvasRenderingContext2D, avatar: avatarParms) {
-  const maxNameWidth = avatar.maxNameWidth || 28;
-  return new Promise<void>(async resolve => {
-    ctx.fillStyle = avatar.color as string;
-    ctx.fill();
-
-    ctx.closePath();
-    ctx.fillStyle = 'white';
-    ctx.font = '14px arial';
-    ctx.textBaseline = 'bottom';
-    let namePainter = await openDataPainter(ctx,{id:avatar.id,name:avatar.name,type:'userName'},22,maxNameWidth);
-    const { width, height } = namePainter;
-    // const textWidth = Math.min(maxNameWidth, width);
-    // ctx.beginPath();
-    // ctx.rect(
-    //   avatar.x + avatar.width / 2 - maxNameWidth / 2,
-    //   avatar.y + avatar.height / 2 - height / 2,
-    //   maxNameWidth,
-    //   height,
-    // );
-    // ctx.clip();
-    namePainter.draw(
-      ctx,
-      avatar.x + avatar.width / 2 - width / 2,
-      avatar.y + avatar.height / 2 - height / 2,
-    );
-    ctx.closePath();
-    resolve();
-  });
-}

package/src/components/okr-share/common-painter/openDataPainter.ts

@@ -1,46 +0,0 @@
-import { getOpenId } from "../../../utils/open-data";
-import { isWx } from "../../../utils/bs-global";
-
-interface openDataParam {
-  id: number; name: string; type: 'userName' | 'departmentName'
-}
-
-export default async function (
-  ctx: CanvasRenderingContext2D,
-  openDataParams: openDataParam,
-  lineHeight: number,
-  maxWidth: number = Infinity
-) {
-  let name = openDataParams.name
-  if (isWx()) {
-    name = await getOpenData(openDataParams)
-  }
-  const { width } = ctx.measureText(name);
-  let actualWidth = Math.min(width, maxWidth)
-  return {
-    width: actualWidth,
-    height: lineHeight,
-    draw: function (ctx: CanvasRenderingContext2D, x: number, y: number) {
-      ctx.save()
-      ctx.textBaseline = 'middle';
-      ctx.beginPath();
-      ctx.rect(x, y, actualWidth, lineHeight);
-      ctx.clip();
-      ctx.fillText(name, x, y + lineHeight / 2);
-      ctx.closePath()
-      ctx.restore()
-    }
-  }
-}
-const getOpenData = ({ id, name, type }: openDataParam) => {
-  const openId = getOpenId(id, type)
-  if (!window['WWOpenData'] || !openId) return Promise.resolve(name)
-  return new Promise<string>((resolve, reject) => {
-    window['WWOpenData'].prefetch({ items: [{ id: openId, type }] }, (err, data) => {
-      if (err) {
-        return reject(err)
-      }
-      resolve(data.items[0].data)
-    })
-  })
-}

package/src/components/okr-share/common-painter/setSize.ts

@@ -1,12 +0,0 @@
-export default function (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, width, height) {
-  const devicePixelRatio = window.devicePixelRatio || 1;
-  const data = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  //要将 canvas 的宽高设置成容器宽高的 2 倍
-  canvas.width = width * devicePixelRatio;
-  canvas.height = height * devicePixelRatio;
-  canvas.style.width = width + 'px';
-  canvas.style.height = height + 'px';
-  //然后将画布缩放，将图像放大两倍画到画布上
-  ctx.scale(devicePixelRatio, devicePixelRatio);
-  ctx.putImageData(data, 0, 0);
-}

package/src/components/okr-share/common-painter/utils.ts

@@ -1,83 +0,0 @@
-export function drawImage(
-  ctx: CanvasRenderingContext2D,
-  url: string,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-) {
-  return new Promise<void>(res => {
-    const img = new Image();
-    img.src = url;
-    img.onload = function () {
-      ctx.drawImage(img, x, y, width, height);
-      res();
-    };
-  });
-}
-export function drawTextMiddle(
-  ctx: CanvasRenderingContext2D,
-  text: string,
-  x: number,
-  y: number,
-  lineHeight: number,
-  maxWidth?: number,
-  textAlign?: 'left' | 'center'
-) {
-  ctx.textBaseline = 'middle';
-  if (!maxWidth) {
-
-    ctx.fillText(text, x, y + lineHeight / 2);
-    return y + lineHeight;
-  }
-  const lines = breakLinesForCanvas(ctx, text, maxWidth);
-  lines.forEach((l) => {
-    const { width } = ctx.measureText(l)
-    let left = x;
-    if (textAlign == 'center' && maxWidth) {
-      console.log(maxWidth, width)
-      left = (maxWidth - width) / 2 + x
-    }
-    ctx.fillText(l, left, y + lineHeight / 2);
-
-    y = y + lineHeight;
-  })
-  return y
-}
-function findBreakPoint(text, width, context) {
-  var min = 0;
-  var max = text.length - 1;
-
-  while (min <= max) {
-    var middle = Math.floor((min + max) / 2);
-    var middleWidth = context.measureText(text.substr(0, middle)).width;
-    var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
-    if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
-      return middle;
-    }
-    if (middleWidth < width) {
-      min = middle + 1;
-    } else {
-      max = middle - 1;
-    }
-  }
-
-  return -1;
-}
-
-export function breakLinesForCanvas(ctx: CanvasRenderingContext2D, text: string, width: number) {
-  var result: string[] = [];
-  var breakPoint = 0;
-
-
-  while ((breakPoint = findBreakPoint(text, width, ctx)) !== -1) {
-    result.push(text.substr(0, breakPoint));
-    text = text.substr(breakPoint);
-  }
-
-  if (text) {
-    result.push(text);
-  }
-
-  return result;
-}