@alifd/meet-react/es/upload/item/card.js

Fusion Mobile React UI System Component

import { rpx2vw4style as __rpx2vw__ } from "@alifd/babel-runtime-jsx-style-transform";
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { createElement, memo } from "react";
import classNames from 'classnames';
import View from '../../view';
import Icon from '../../icon';
import Progress from '../../progress';
var Card = /*#__PURE__*/memo(function (props) {
  var file = props.file,
    _onClick = props.onClick,
    onReUpload = props.onReUpload,
    onRemove = props.onRemove,
    _props$hasRemove = props.hasRemove,
    hasRemove = _props$hasRemove === void 0 ? true : _props$hasRemove,
    _props$progressProps = props.progressProps,
    progressProps = _props$progressProps === void 0 ? {} : _props$progressProps,
    style = props.style,
    reUpload = props.reUpload;
  var clsPrefix = props.prefix || 'mt-upload';
  return /*#__PURE__*/React.createElement(View, {
    key: file.uid,
    className: classNames("".concat(clsPrefix, "-item"), "".concat(clsPrefix, "-item--card"), "".concat(clsPrefix, "-item--").concat(file.state)),
    style: __rpx2vw__(style)
  }, file.state !== 'error' && (file.imgURL ? /*#__PURE__*/React.createElement(View, {
    className: "".concat(clsPrefix, "-item-preview"),
    onClick: function onClick(e) {
      return _onClick && _onClick(file, e);
    },
    style: __rpx2vw__({
      backgroundImage: "url(".concat(file.imgURL, ")")
    })
  }) : /*#__PURE__*/React.createElement(View, {
    className: "".concat(clsPrefix, "-item-waiting")
  }, /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(clsPrefix, "-item-icon"),
    name: "picture"
  }))), file.state === 'uploading' && /*#__PURE__*/React.createElement(Progress, _extends({
    className: "".concat(clsPrefix, "-item-progress"),
    percent: file.percent || 0
  }, progressProps)), file.state === 'error' && /*#__PURE__*/React.createElement(View, {
    className: "".concat(clsPrefix, "-item-error"),
    onClick: function onClick() {
      return onReUpload && onReUpload(file);
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    className: classNames("".concat(clsPrefix, "-item-icon"), "".concat(clsPrefix, "-item-icon--small"), "".concat(clsPrefix, "-item-icon--error")),
    name: "upload"
  }), reUpload), (file.state === 'done' || file.state === 'error') && hasRemove && /*#__PURE__*/React.createElement(View, {
    className: "".concat(clsPrefix, "-item-remove"),
    onClick: function onClick() {
      return onRemove && onRemove(file);
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    className: "".concat(clsPrefix, "-item-remove-icon"),
    name: "minus"
  })));
});
export default Card;