zarm/es/file-picker/index.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

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

  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var 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 = _objectWithoutProperties(props, ["className", "multiple", "accept", "capture", "disabled", "children", "onBeforeSelect", "onChange", "quality"]);

  var cls = bem([{
    disabled: disabled
  }, className]);
  var handleClick = useCallback(function () {
    fileRef === null || fileRef === void 0 ? void 0 : fileRef.current.click();
  }, [fileRef]);
  var handleDefaultInput = 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 handleFileInfo({
          file: file,
          quality: quality
        }, getFileInfo);
      });
    }
  };

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

  });
  return /*#__PURE__*/React.createElement("div", _extends({
    className: cls
  }, restProps), /*#__PURE__*/React.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;
  }
};
export default FilePicker;