zarm/lib/file-picker/index.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _bem = require("@zarm-design/bem");

var _handleFileInfo = _interopRequireDefault(require("./utils/handleFileInfo"));

var _configProvider = require("../config-provider");

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

/**
 * 设置选择前的方法，获取选择文件的相关信息，需要时可以对图片进行压缩、改变图片尺寸。
 *
 * multiple: 默认为 false，设置为 true 之后一次可以选择多张，onChange 事件调用之后返回一个数组，
 *           不设置或者设置为 false，onChange 事件调用之后返回一个对象。
 * disabled: 传递之后不可以点击上传，整个选择组件会设置为半透明状态，透明度为 0.5。
 * quality: 没有默认值，不设置不会进行压缩。
 * accept: 设置选择的文件类型，默认为所有类型，只有文件类型为图片（image/*）的时候会有本地预览图。
 * onChange: () => { file, fileType, fileSize, fileName, thumbnail }。
 * onBeforeSelect: () => boolean，返回 false 的时候阻止后续的选择事件。
 */
var FilePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var fileRef = ref || /*#__PURE__*/_react.default.createRef();

  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = (0, _bem.createBEM)('file-picker', {
    prefixCls: prefixCls
  });
  var className = props.className,
      multiple = props.multiple,
      accept = props.accept,
      capture = props.capture,
      disabled = props.disabled,
      children = props.children,
      onBeforeSelect = props.onBeforeSelect,
      onChange = props.onChange,
      quality = props.quality,
      restProps = (0, _objectWithoutProperties2.default)(props, ["className", "multiple", "accept", "capture", "disabled", "children", "onBeforeSelect", "onChange", "quality"]);
  var cls = bem([{
    disabled: disabled
  }, className]);
  var handleClick = (0, _react.useCallback)(function () {
    fileRef === null || fileRef === void 0 ? void 0 : fileRef.current.click();
  }, [fileRef]);
  var handleDefaultInput = (0, _react.useCallback)(function (e) {
    // 防止选择同一张图片两次造成 onChange 事件不触发
    e.currentTarget.value = '';

    if (typeof onBeforeSelect !== 'function') {
      return;
    } // 阻止 input onChange 默认事件


    if (onBeforeSelect() === false || disabled) {
      e.preventDefault();
    }
  }, [onBeforeSelect, disabled]);

  var handleChange = function handleChange(e) {
    var files = [].slice.call(e.target.files);
    var fileList = [];

    var getFileInfo = function getFileInfo(data) {
      if (multiple) {
        fileList.push(data);

        if (files.length === fileList.length && typeof onChange === 'function') {
          onChange(fileList);
        }
      } else {
        typeof onChange === 'function' && onChange(data);
      }
    };

    if (files) {
      files.map(function (file) {
        return (0, _handleFileInfo.default)({
          file: file,
          quality: quality
        }, getFileInfo);
      });
    }
  };

  var content = /*#__PURE__*/(0, _react.cloneElement)(children, {
    onClick: handleClick,
    className: [children.props.className, 'needsclick'].filter(Boolean).join(' ') // 修复加载fastClick库后引起的合成事件问题

  });
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: cls
  }, restProps), /*#__PURE__*/_react.default.createElement("input", {
    className: bem('input'),
    type: "file",
    ref: fileRef,
    accept: accept,
    multiple: multiple,
    capture: capture,
    onClick: handleDefaultInput,
    onChange: handleChange
  }), content);
});

FilePicker.displayName = 'FilePicker';
FilePicker.defaultProps = {
  disabled: false,
  multiple: false,
  onBeforeSelect: function onBeforeSelect() {
    return true;
  }
};
var _default = FilePicker;
exports.default = _default;