@titaui/pc 1.7.12 → 1.7.13

package/src/components/upload/index.tsx

@@ -1,375 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Tooltip } from 'tita-ui';
-import uuid from 'uuid';
-import Portals from '../../components-v1/portals/Portals';
-import { getApiUrl } from '../../utils/request-v1';
-import Toast from '../toast'
-import UploadedPreview from './components/uploadedPreview';
-import { UploadResultObj, UploadFilesObj, _dealAttachmentType } from './type';
-import { UploadFormContainer } from './style';
-import ImgViewer from '../img-viewer';
-import { getPreviewImgs } from './util';
-
-interface Props {
-  action?: string;
-  className?: string;
-  multiple?: boolean;
-  filesTotal?: number // 上传问题件总数
-  fileNumLimit?: number; // 每次上传文件个数限制
-  fileSizeLimit?: number; // 每个文件的大小限制
-  attachmentTipText?: any;
-  dragFilesList?: UploadFilesObj[]; // 拖拽上传的文件
-  attachmentPreviewBox?: string; // 附件预览容器，传id选择器
-  submitStatus: number; // 提交状态，1：成功，2：失败
-  localStroageKey?: string; // 判断是否上传成功，清空附件列表  localStorageKey
-  onSubmit: (uploadSuccessFilesPath: string[], type?: 'cancel' | 'delete' | 'reload') => void;
-  onDelete?: (uploadSuccessFilesPath: any) => void;
-  style?: React.CSSProperties;
-  attachments?: UploadResultObj[];
-}
-
-interface State {
-  uploadSuccessFiles: UploadResultObj[];
-  attachmentPreviewUrl: any[];
-  selectFiles: {
-    [key: string]: UploadFilesObj
-  };
-}
-
-export default class Upload extends PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      uploadSuccessFiles: props.attachments || [],
-      attachmentPreviewUrl: props.attachments ? getPreviewImgs(props.attachments) : [],
-      selectFiles: {},
-    };
-  }
-
-  static defaultProps = {
-    attachmentTipText:
-      '<p>支持拖拽上传</p><p>单次最多支持上传 20 个，总数不可超过 50 个</p><p>每个不超过 50MB</p>',
-    fileNumLimit: 20,
-    fileSizeLimit: 50,
-    filesTotal: 50,
-    multiple: true,
-    attachmentPreviewBox: 'MBlog__attachmentViewBox',
-  };
-
-  componentDidMount() {
-    const { attachments } = this.props;
-    this.setState({
-      uploadSuccessFiles: attachments || [],
-      attachmentPreviewUrl: attachments ? getPreviewImgs(attachments) : [],
-    });
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    if (this.props.submitStatus === 2 && nextProps.submitStatus == 1) {
-      this.setState({
-        uploadSuccessFiles: [],
-        attachmentPreviewUrl: [],
-      });
-    } else {
-      this.setState({
-        // uploadSuccessFiles: nextProps.attachments || [],
-        attachmentPreviewUrl: nextProps.attachments
-          ? getPreviewImgs(nextProps.attachments)
-          : [],
-      });
-    }
-    if (nextProps.dragFilesList && nextProps.dragFilesList.length) {
-      this.dealSelectFiles(nextProps.dragFilesList);
-    }
-  }
-
-  onFileInputChange = () => {
-    let fileInput = this.refs.fileInput;
-    // @ts-ignore
-    let selectFiles = fileInput.files; // 选择的文件
-    // @ts-ignore
-    if (!fileInput.value) return; // 未选择文件或选择文件超出个数限制时
-    this.dealSelectFiles(Array.from(selectFiles));
-    if (fileInput) {
-      // @ts-ignore
-      fileInput.value = '';
-    }
-  };
-
-  // @ts-ignore
-  dealSelectFiles = (uploadSelectFilesObj: UploadFilesObj[]) => {
-    const { uploadSuccessFiles, selectFiles } = this.state;
-    const { action, fileNumLimit, fileSizeLimit, filesTotal } = this.props;
-    let uploadSelectFilesLen = uploadSelectFilesObj.length; // 选中上传的文件数量
-    let uploadSuccessFilesLen = uploadSuccessFiles.length; // 已上传成功的文件数量
-    let allFilesTotal = uploadSuccessFilesLen + uploadSelectFilesLen;
-
-    // 把文件字节流保存，用来文件重传用
-    uploadSelectFilesObj.forEach(ele => {
-      if (!selectFiles[ele.name]) {
-        selectFiles[ele.name] = ele;
-      }
-    })
-    this.setState({
-      selectFiles: selectFiles
-    })
-
-    if (filesTotal && allFilesTotal > filesTotal) {
-      Toast.Error(`最多可上传 ${filesTotal} 个文件`, {canClose: false});
-      uploadSelectFilesObj = uploadSelectFilesObj.slice(
-        0,
-        (filesTotal as number) - uploadSuccessFilesLen,
-      );
-    }
-    if (fileNumLimit && uploadSelectFilesObj.length > fileNumLimit) {
-      Toast.Error(`单次最多可上传 ${fileNumLimit} 个文件`, {canClose: false});
-      uploadSelectFilesObj = uploadSelectFilesObj.slice(0, fileNumLimit);
-    }
-    if (!uploadSelectFilesObj.length) return;
-    let uploadSelectFilesSize = uploadSelectFilesObj
-      .map(item => item.size)
-      .reduce((total, num) => total + num); // 上传文件的大小
-    if (uploadSelectFilesSize > (fileNumLimit as number) * (fileSizeLimit as number) * 1024 * 1024)
-      return Toast.Error(`单次最多可上传 ${fileNumLimit} 个文件，每个不超过 ${fileSizeLimit}M`); // 文件大小超出限制
-
-    let uploadStartFiles: UploadResultObj[] = []; // 开始上传的文件
-    uploadSelectFilesObj.forEach((element: any, index: number) => {
-      let formData = new FormData(); // FormData 对象
-      let uploadStartFile: UploadResultObj | null = null;
-      let timestamp = new Date().getTime(); // 给每个文件加一个时间戳
-      let uploadFileType = element.name.substring(element.name.lastIndexOf('.') + 1);
-
-      uploadStartFile = {
-        FileName: element.name,
-        FileType: _dealAttachmentType(uploadFileType).FileType,
-        FileSize: element.size,
-        FileLastModified: element.lastModified,
-        IsImage: _dealAttachmentType(uploadFileType).IsImage,
-        percentComplete: 0,
-        uploadStatus: 1, // 开始上传
-        IsSuccess: false,
-        uid: uuid(),
-        _smallImageUrl: '',
-        _bigImageUrl: '',
-        MediaType: '',
-        UserId: 0,
-        MaxDocCount: 0,
-        DfsPath: '',
-        ClientUrl: '',
-        SmallImageUrl: '',
-        BigImageUrl: '',
-        DownloadUrl: '',
-        Msg: '',
-        AllowUploadAttachmentSize: 50,
-        Deleteable: true,
-        requestXHR: new XMLHttpRequest(), //在这创建是为了取消用
-      };
-      let sameFile = uploadSuccessFiles.find(file =>
-        this.isSameFile(file, uploadStartFile as UploadResultObj) && file.uploadStatus !== 4,
-      );
-      if (sameFile) {
-        return;
-      };
-      uploadStartFiles.push(uploadStartFile);
-      this._dealUploadStart(uploadStartFiles); // 处理开始上传的文件
-      formData.append('file', element);
-      let url = action || getApiUrl(`Upload/PostFiles?format=json&timestamp=${timestamp}`);
-      this._dealUploadXHRRequest(formData, url, uploadStartFile);
-    });
-  };
-
-  /**
-   * 处理文件上传请求
-   *
-   * @formData
-   * @url 上传文件请求地址
-   * @uploadStartFile 上传的文件
-   *
-   * @memberof Upload
-   */
-  _dealUploadXHRRequest = (formData: any, url: string, uploadStartFile: UploadResultObj) => {
-    if (uploadStartFile.FileSize > (this.props.fileSizeLimit as number) * 1024 * 1024) {
-      setTimeout(() => {
-        this._dealUploadSuccess({ ...uploadStartFile, ...{ Msg: '上传失败，文件过大', IsImage: false, uploadStatus: 5 } });
-      }, 300);
-      return;
-    }
-    let xhr = uploadStartFile.requestXHR;
-    xhr.onreadystatechange = () => {
-      if (xhr.readyState == 4 && xhr.status == 200) {
-        let result = Object.assign({}, { ...JSON.parse(xhr.responseText).Result[0] }); // 上传成功接口返回数据
-        result.percentComplete = 100;
-        result.IsSuccess = !!result.IsSuccess;
-        result.uploadStatus = result.IsSuccess ? 3 : 4; // 3上传成功；4上传失败
-        this._dealUploadSuccess({ ...uploadStartFile, ...result });
-      }
-    };
-    //进度条部分
-    xhr.upload.onprogress = evt => {
-      let uploadSuccessFiles = [...this.state.uploadSuccessFiles];
-      if (evt.lengthComputable) {
-        uploadSuccessFiles.forEach((item: UploadResultObj) => {
-          if (this.isSameFile(item, uploadStartFile)) {
-            item.uploadStatus = 2; // 上传中
-            item.percentComplete = Math.round((evt.loaded * 100) / evt.total);
-          }
-        });
-        this.setState({ uploadSuccessFiles });
-      }
-    };
-    xhr.upload.onerror = evt => { 
-      let uploadSuccessFiles = [...this.state.uploadSuccessFiles];
-      uploadSuccessFiles.forEach((item: UploadResultObj) => {
-        if (this.isSameFile(item, uploadStartFile)) {
-          item.uploadStatus = 4; // 上传失败
-          item.percentComplete = Math.round((evt.loaded * 100) / evt.total);
-          item.Msg = '网络异常，请重新上传'
-        }
-      });
-      this.setState({ uploadSuccessFiles });
-    };
-    xhr.open('POST', url, true);
-    xhr.send(formData); //开始上传，发送form数据
-  };
-
-  // 处理开始上传时的预览
-  _dealUploadStart = (uploadStartFiles: UploadResultObj[]) => {
-    let uploadSuccessFiles: UploadResultObj[] = [];
-    const uploadedFiles = [...this.state.uploadSuccessFiles];
-    // 处理重传文件,直接展开会导致同样的文件展示两个
-    let uploadFilesConcatArr = uploadedFiles;
-    let isReloadFile = uploadFilesConcatArr.filter(item => this.isSameFile(item, uploadStartFiles[0]))
-    if (!isReloadFile || isReloadFile.length === 0) {
-      uploadFilesConcatArr = [...uploadedFiles, ...uploadStartFiles];
-    }
-
-    uploadFilesConcatArr.forEach(item => {
-      let res = uploadSuccessFiles.filter(v => this.isSameFile(item, v));
-      uploadSuccessFiles.forEach(element => {
-        if (this.isSameFile(item, element)) {
-          element = item;
-        }
-      });
-      if (res.length === 0) {
-        uploadSuccessFiles.push(item);
-      }
-    });
-    this.setState({
-      uploadSuccessFiles,
-    });
-  };
-
-  // 处理上传成功后预览状态更新
-  _dealUploadSuccess = (uploadSuccessFile: UploadResultObj) => {
-    const { onSubmit } = this.props;
-    let uploadSuccessFiles = [...this.state.uploadSuccessFiles];
-    let uploadSuccessFilesFormat = uploadSuccessFiles.map(element =>
-      this.isSameFile(uploadSuccessFile, element) ? uploadSuccessFile : element,
-    );
-    let uploadSuccessFilesPath = uploadSuccessFilesFormat.map(item => item.DfsPath); // 获取文件上传后返回的路径
-
-    onSubmit(uploadSuccessFilesPath); // 将上传完成的文件路径传递给父组件
-    this.setState({
-      uploadSuccessFiles: uploadSuccessFilesFormat,
-      attachmentPreviewUrl: getPreviewImgs(uploadSuccessFilesFormat),
-    });
-  };
-
-  // 预览、删除附件
-  handlerUploadPreviewOptions = (index: number, options: string) => {
-    const { onSubmit, onDelete } = this.props;
-
-    if (options === 'cancel') {
-      const reUploadFileInfo = this.state.uploadSuccessFiles[index];
-      reUploadFileInfo.requestXHR.abort();
-    }
-
-    if (options === 'delete' || options === 'cancel') {
-      let uploadResultFiles = [...this.state.uploadSuccessFiles];
-      let deleteFiles = uploadResultFiles[index];
-      onDelete && onDelete(deleteFiles.documentId ? deleteFiles.documentId : deleteFiles.DfsPath);
-      uploadResultFiles.splice(index, 1);
-
-      let uploadSuccessFilesPath = uploadResultFiles.map(item => item.DfsPath);
-
-      onSubmit(uploadSuccessFilesPath, options as any);
-      this.setState({
-        uploadSuccessFiles: uploadResultFiles,
-      });
-    } else if (options === 'preview') {
-      (this.refs.imgViewerRef as any).show(index);
-    } else if (options === 'reupload') {
-      const reUploadFileInfo = this.state.uploadSuccessFiles[index];
-      const reUploadFile = this.state.selectFiles[reUploadFileInfo.FileName];
-      this.dealSelectFiles([reUploadFile]);
-    }
-  };
-
-  // 根据文件名、大小和最后编辑时间判断是否为同一个文件
-  isSameFile = (item: UploadResultObj, element: UploadResultObj) => {
-    return item.FileName === element.FileName && 
-          item.FileSize === element.FileSize && 
-          item.FileLastModified === element.FileLastModified;
-  };
-
-  renderUploadList = list => {
-    const { attachmentPreviewBox } = this.props;
-    const { attachmentPreviewUrl } = this.state;
-    if (!list.length) return;
-    return (
-      <Portals domNode={attachmentPreviewBox} className='uploadFile__preview__list'>
-        <ImgViewer data={attachmentPreviewUrl} ref='imgViewerRef' showDownload={false}/>
-        {list.map((item: UploadResultObj, index: number) => (
-          <UploadedPreview
-            uploadResultItem={item}
-            index={index}
-            key={item.uid}
-            className='uploaded__preview'
-            onSubmit={(index, options) => {
-              this.handlerUploadPreviewOptions(index, options);
-            }}
-          />
-        ))}
-      </Portals>
-    );
-  };
-
-  handleButtonClick = (e: React.MouseEvent) => {
-    e.nativeEvent.stopImmediatePropagation();
-    if (this.refs.fileInput) {
-      // @ts-ignore
-      this.refs.fileInput.click();
-    }
-  };
-
-  render() {
-    const { children, className, style, attachmentTipText } = this.props;
-    const { uploadSuccessFiles } = this.state;
-    return (
-      <>
-        <Tooltip
-          container={document.body}
-          content={<p dangerouslySetInnerHTML={{ __html: attachmentTipText }} />}
-        >
-          <UploadFormContainer className={className} style={style} onMouseUp={(e) => this.handleButtonClick(e)}>
-            <div
-              ref='uploader-trigger'
-              style={{ cursor: 'pointer' }}
-            >
-              {children}
-            </div>
-            <input
-              type='file'
-              ref='fileInput'
-              className='upload_file_input'
-              multiple={this.props.multiple}
-              style={{ display: 'none' }}
-              onChange={this.onFileInputChange}
-            />
-          </UploadFormContainer>
-        </Tooltip>
-        {this.renderUploadList(uploadSuccessFiles)}
-      </>
-    );
-  }
-}

package/src/components/upload/style.ts

@@ -1,114 +0,0 @@
-import styled from 'styled-components'
-
-export const UploadFormContainer = styled.div`
-  width: auto;
-  position: relative;
-`
-
-export const UploadForm = styled.form`
-  width: 100%;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-
-  input {
-    width: 100%;
-  }
-`
-
-export const PreviewContent = styled.div`
-  width: 320px;
-  height: 60px;
-  padding: 10px;
-  box-sizing: border-box;
-  font-size: 12px;
-  background-color: #f7f8fa;
-  display: flex;
-  align-items: center;
-`
-
-export const PreviewImageWrapper = styled.div`
-  width: 36px;
-  height: 36px;
-  line-height: 36px;
-  margin-right: 8px;
-  text-align: center;
-  border-radius: 4px;
-
-  img {
-    max-width: 36px;
-    max-height: 36px;
-    border-radius: 4px;
-  }
-`
-
-export const PreviewImageIcon = styled.img`
-  width: 36px;
-  height: 36px;
-`
-
-export const PreviewMessageWrapper = styled.div`
-  flex: 1;
-  display: flex;
-  /* justify-content: space-between; */
-  align-items: center;
-`
-
-export const PreviewFileTitle = styled.div`
-  width: 184px;
-  font-size: 14px;
-  line-height: 22px;
-  color: #3F4755;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  word-break: keep-all;
-  .upload-file-size {
-    font-size: 12px;
-    color: #89919F;
-    line-height: 18px;
-  }
-  .upload-file-size--error {
-    color: #f05e5e;
-  }
-`
-
-export const UploadProgress = styled.div`
-  margin-top: 8px;
-  width: 100%;
-  height: 4px;
-  border-radius: 2px;
-  background: #E9ECF0;
-
-  div {
-    height: 100%;
-    border-radius: 2px;
-  }
-  .upload-file--progress {
-    background: #2879ff;
-  }
-`
-
-export const UploadStatus = styled.span`
-  width: 48px;
-  line-height: 14px;
-  transition: opacity 1s ease-in-out;
-  display: inline-block;
-  white-space: nowrap;
-  &.preview__status-end {
-    opacity: 1;
-  }
-`
-export const PreviewOptionsWrapper = styled.div`
-  margin-left: 6px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  span {
-    font-size: 14px;
-    color: #a9b8bf;
-    vertical-align: middle;
-    cursor: pointer;
-  }
-`

package/src/components/upload/type.ts

@@ -1,57 +0,0 @@
-export interface UploadResultObj {
-  _smallImageUrl: string;
-  _bigImageUrl: string;
-  FileName: string;
-  FileType: string;
-  FileSize: number;
-  FileLastModified: number;
-  MediaType: string;
-  UserId: number;
-  MaxDocCount: number;
-  DfsPath: string;
-  ClientUrl: string;
-  SmallImageUrl: string;
-  BigImageUrl: string;
-  DownloadUrl: string;
-  IsSuccess: boolean;
-  Msg: string;
-  AllowUploadAttachmentSize: number;
-  Deleteable: boolean;
-  percentComplete: number;
-  uploadStatus: number;
-  IsImage: boolean;
-  uid: any;
-  documentId?: number;
-  requestXHR: XMLHttpRequest;
-}
-export interface UploadFilesObj {
-  name: string;
-  lastModified: number;
-  lastModifiedDate: Object;
-  webkitRelativePath: string;
-  size: number;
-  type: string;
-}
-
-export const _dealAttachmentType = (fileType) => {
-  let IsImage = false;
-  let FileType = fileType;
-  // if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
-  //   IsImage = true;
-  //   IconColor = '#44CF85';
-  // } else if (/^(exe|pdf|txt|doc|docx|ppt|pptx|xls|xlsx)$/.test(fileType)) {
-  //   IconColor = '#49B9DD';
-  // } else if (/^(rar|zip)$/.test(fileType)) {
-  //   IconColor = '#FFBA46';
-  // } else if (/^(mp3|wma|wav|flac|ape|ogg|aac|m4a)$/.test(fileType)) {
-  //   IconColor = '#8479D6';
-  // } else if (/^(mp4|mkv|rm|rmvb|avi|3gp|flv|wmv|asf|mpeg|mpg|mov|ts|m4v)$/.test(fileType)) {
-  //   IconColor = '#3EBBA8';
-  // } else {
-  //   FileType = 'none'
-  // }
-  if (/^(jpg|png|gif|jpeg|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
-    IsImage = true;
-  }
-  return { IsImage, FileType }
-}

package/src/components/upload/util.ts

@@ -1,72 +0,0 @@
-import DocSvg from './img/doc.svg';
-import OtherSvg from './img/other.svg';
-import PdfSvg from './img/pdf.svg';
-import PptSvg from './img/ppt.svg';
-import RadioSvg from './img/radio.svg';
-import VideoSvg from './img/video.svg';
-import XlsSvg from './img/xls.svg';
-import { UploadResultObj } from './type';
-
-export const getFileSize = (fileSize) => {
-  if (fileSize < 1024) {
-    return fileSize + "B";
-  } else if (fileSize < 1024 * 1024) {
-    let temp = fileSize / 1024;
-    temp = Number(temp.toFixed(2));
-    return temp + "KB";
-  } else if (fileSize < 1024 * 1024 * 1024) {
-    let temp = fileSize / (1024 * 1024);
-    temp = Number(temp.toFixed(2));
-    return temp + "M";
-  } else {
-    let temp = fileSize / (1024 * 1024 * 1024);
-    temp = Number(temp.toFixed(2));
-    return temp + "GB";
-  }
-};
-
-export const getFileTypeMapIcon = (fileType: string) => {
-  // if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
-  //   return 
-  // } else 
-  if (/^(mp3|ogg|ape|flac)$/.test(fileType.toLowerCase())) {
-    return RadioSvg;
-  } else if (/^(avi|wmv|mov|mp4|rmvb)$/.test(fileType.toLowerCase())) {
-    return VideoSvg;
-  } else if (/^(pptx|ppt)$/.test(fileType.toLowerCase())) {
-    return PptSvg;
-  } else if (/^(doc|docx)$/.test(fileType.toLowerCase())) {
-    return DocSvg;
-  } else if (/^(xls|xlsx)$/.test(fileType.toLowerCase())) {
-    return XlsSvg;
-  } else if (/^(pdf)$/.test(fileType.toLowerCase())) {
-    return PdfSvg;
-  }
-  return OtherSvg; 
-}
-
-export const isImg = (fileType: string) => {
-  if (/^(jpg|png|gif|jpeg|image|JPG|PNG|GIF|JPEG)$/.test(fileType)) {
-    return true;
-  }
-  return false;
-}
-
-export const getPreviewImgs = (files: UploadResultObj[]) => {
-  return files.filter(file => isImg(file.FileType)).map(file => ({
-    documentId: file.documentId,
-    bigImageUrl: file.ClientUrl,
-    fileName: file.FileName,
-    fileType: file.FileType,
-    previewUrl: file.ClientUrl,
-    deleteable: file.Deleteable,
-    smallImageUrl: file.ClientUrl,
-    createDate: '',
-    documentSource: '',
-    downloadUrl: file.DownloadUrl,
-    imageUrl: file.ClientUrl,
-    relatedFileId: null,
-    size: file.FileSize,
-    thumbnailGenerated: null,
-  }))
-}

package/src/components/upvote/attitude.ts

@@ -1,32 +0,0 @@
-export default [
-  {
-    type: 2,
-    tittle: '祝贺',
-    img: require('./img/welldone.svg'),
-  },
-  {
-    type: 4,
-    tittle: '加油',
-    img: require('./img/fighting.svg'),
-  },
-  {
-    type: 3,
-    tittle: '比心',
-    img: require('./img/bixin.svg'),
-  },
-  {
-    type: 6,
-    tittle: '666',
-    img: require('./img/666.svg'),
-  },
-  {
-    type: 5,
-    tittle: '有见地',
-    img: require('./img/nice.svg'),
-  },
-  {
-    type: 1,
-    tittle: '点赞',
-    img: require('./img/thumb-up.svg'),
-  },
-];