@aliretail/react-materials-components/es/FormComponents/upload/index.js

B 端物料组件库

import _Button from "@alifd/next/es/button";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _extends from "@babel/runtime/helpers/extends";
import _Upload from "@alifd/next/es/upload";
var _excluded = ["listType", "locale", "children"];

var _class, _temp;

import * as React from 'react';
import { connect } from '@formily/next';
import { toArr, isArr, isEqual } from '@formily/shared';
import { mapStyledProps } from "../shared";
import Preview from "./Preview";
var UploadCard = _Upload.Card,
    UploadDragger = _Upload.Dragger;
var exts = [{
  ext: /\.docx?/i,
  icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png'
}, {
  ext: /\.pptx?/i,
  icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png'
}, {
  ext: /\.jpe?g/i,
  icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
}, {
  ext: /pdf/i,
  icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png'
}, {
  ext: /\.png/i,
  icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
}, {
  ext: /\.eps/i,
  icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png'
}, {
  ext: /\.ai/i,
  icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png'
}, {
  ext: /\.gif/i,
  icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png'
}, {
  ext: /\.svg/i,
  icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png'
}, {
  ext: /\.xlsx?/i,
  icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png'
}, {
  ext: /\.psd?/i,
  icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png'
}, {
  ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)/i,
  icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png'
}, {
  ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)/i,
  icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png'
}, {
  ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)/i,
  icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png'
}, {
  ext: /\..+/i,
  icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png'
}];

var testOpts = function testOpts(ext, options) {
  if (options && isArr(options.include)) {
    return options.include.some(function (url) {
      return ext.test(url);
    });
  }

  if (options && isArr(options.exclude)) {
    return !options.exclude.some(function (url) {
      return ext.test(url);
    });
  }

  return true;
};

var getImageByUrl = function getImageByUrl(url, options) {
  for (var i = 0; i < exts.length; i++) {
    if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) {
      return exts[i].icon;
    }
  }

  return url;
};

var normalizeFileList = function normalizeFileList(fileList) {
  if (fileList && fileList.length) {
    return fileList.map(function (file) {
      return _extends({
        name: file.name,
        downloadURL: file.downloadURL || file.imgURL
      }, file.response, {
        imgURL: getImageByUrl(file.imgURL, {
          exclude: ['.png', '.jpg', '.jpeg', '.gif']
        })
      });
    });
  }

  return [];
}; // eslint-disable-next-line no-nested-ternary


var shallowClone = function shallowClone(val) {
  return isArr(val) ? [].concat(val) : typeof val === 'object' ? _extends({}, val) : val;
};

var mapProps = function mapProps(props, fieldProps) {
  mapStyledProps(props, fieldProps);

  if (props.readOnly || 'editable' in props && !props.editable) {
    props.isPreview = true;
  } // fusion的Upload组件需要value是一个对象


  if (props.isPreview && typeof props.value === 'string') {
    props.value = {
      url: props.value
    };
  }

  if (props.isImage) {
    props.renderPreview = function () {
      return /*#__PURE__*/React.createElement(Preview, {
        value: props.value
      });
    };
  }
};

export var Upload = connect({
  getProps: mapProps
})((_temp = _class = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Uploader, _React$Component);

  function Uploader() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {
      value: toArr(_this.props.value)
    };

    _this.onChangeHandler = function (fileList) {
      var onChange = _this.props.onChange;
      fileList = toArr(fileList);

      if (fileList.every(function (file) {
        return file.state === 'done' || file.imgURL || file.downloadURL;
      })) {
        fileList = normalizeFileList(fileList);

        _this.setState({
          value: fileList
        }, function () {
          onChange(fileList.length > 0 ? fileList : undefined);
        });
      } else {
        _this.setState({
          value: fileList
        });
      }
    };

    return _this;
  }

  var _proto = Uploader.prototype;

  _proto.componentDidUpdate = function componentDidUpdate(preProps) {
    if (this.props.value && !isEqual(this.props.value, preProps.value)) {
      this.setState({
        value: this.props.value
      });
    }
  };

  _proto.render = function render() {
    var _this$props = this.props,
        listType = _this$props.listType,
        locale = _this$props.locale,
        children = _this$props.children,
        others = _objectWithoutPropertiesLoose(_this$props, _excluded);

    if (listType.indexOf('card') > -1) {
      return /*#__PURE__*/React.createElement(UploadCard, _extends({}, others, {
        value: shallowClone(this.state.value),
        onChange: this.onChangeHandler,
        listType: "card"
      }));
    }

    if (listType.indexOf('dragger') > -1) {
      return (
        /*#__PURE__*/
        // @ts-ignore 感觉是 next 那边对于 Dragger 的 props 定义错了
        React.createElement(UploadDragger, _extends({}, others, {
          value: shallowClone(this.state.value),
          onChange: this.onChangeHandler,
          listType: listType.indexOf('image') > -1 ? 'image' : 'text'
        }))
      );
    }

    return /*#__PURE__*/React.createElement(_Upload, _extends({}, others, {
      value: shallowClone(this.state.value),
      onChange: this.onChangeHandler,
      listType: listType
    }), children || /*#__PURE__*/React.createElement(_Button, {
      style: {
        margin: '0 0 10px'
      }
    }, locale && locale.uploadText || '上传文件'));
  };

  return Uploader;
}(React.Component), _class.defaultProps = {
  action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',
  listType: 'text',
  multiple: true
}, _temp));
export default Upload;