zarm-web/es/upload/UploadList.js

基于 React 的桌面端UI库

/* eslint-disable react/jsx-no-target-blank */
import React, { Component } from 'react';
import classnames from 'classnames';
import Icon from '../icon';
import Progress from '../progress';

class UploadList extends Component {
  render() {
    const {
      className,
      type,
      dataSource,
      isRadius,
      onDelete,
      prefixCls
    } = this.props;
    const listCls = classnames({
      [`${prefixCls}-list`]: true,
      [`${prefixCls}-list-inline`]: 'inline' in this.props,
      [`${prefixCls}-list-${type}`]: 'type' in this.props,
      [className]: !!className
    });
    const itemCls = classnames({
      [`${prefixCls}-list-item`]: true,
      radius: 'radius' in this.props || isRadius
    });
    return React.createElement("div", {
      className: prefixCls
    }, React.createElement("div", {
      className: listCls
    }, // tslint:disable-next-line:jsx-no-multiline-js
    dataSource.map((item, index) => {
      const progress = item.percent ? React.createElement(Progress, {
        className: `${prefixCls}-list-item-progress`,
        percent: item.percent,
        theme: "info",
        size: "sm"
      }) : null;
      return React.createElement("div", {
        key: `upload-list-item-${index}`,
        className: itemCls
      }, React.createElement("a", {
        className: `${prefixCls}-list-item-thumbnail`,
        href: item.url || item.thumbUrl,
        target: "_blank"
      }, React.createElement("img", {
        src: item.thumbUrl || item.url,
        alt: item.name
      })), React.createElement("span", {
        className: `${prefixCls}-list-item-name`
      }, React.createElement("a", {
        href: item.url || item.thumbUrl,
        title: item.name,
        target: "_blank"
      }, item.name)), React.createElement(Icon, {
        type: "wrong" // title="删除"
        ,
        className: `${prefixCls}-list-item-icon`,
        onClick: () => onDelete(item)
      }), progress);
    })));
  }

}

UploadList.defaultProps = {
  prefixCls: 'ui-upload',
  type: 'text',
  isRadius: false,
  dataSource: [],
  onRemove: () => {}
};
export default UploadList;