@procore/core-react/dist/FileSelect/FileSelectDropzone/FileSelectDropzone.js

React library of Procore Design Guidelines

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React, { useImperativeHandle, useRef } from 'react';
import { Button } from '../../Button/Button';
import { useDropzone } from '../../Dropzone/Dropzone.hooks';
import { dropErrors } from '../../Dropzone/Dropzone.types';
import { Flex } from '../../Flex/Flex';
import { Tooltip } from '../../Tooltip/Tooltip';
import { useI18nContext } from '../../_hooks/I18n';
import { dropzoneContainerAttr, StyledDropzone, StyledDropzoneMessage, StyledUploadButtonWrapper } from './FileSelectDropzone.styles';
var DefaultContent = /*#__PURE__*/React.forwardRef(function DefaultContent(_ref, ref) {
  var disabled = _ref.disabled,
    errorMessage = _ref.errorMessage,
    _ref$hideDropzone = _ref.hideDropzone,
    hideDropzone = _ref$hideDropzone === void 0 ? false : _ref$hideDropzone,
    multiple = _ref.multiple,
    onAttachFromProject = _ref.onAttachFromProject,
    tooltip = _ref.tooltip,
    qa = _ref.qa;
  var I18n = useI18nContext();
  var attachFilesButton = /*#__PURE__*/React.createElement(Tooltip, {
    trigger: hideDropzone && tooltip ? 'hover' : 'none',
    placement: "right",
    overlay: tooltip
  }, /*#__PURE__*/React.createElement(StyledUploadButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
    ref: ref,
    variant: "secondary",
    onClick: onAttachFromProject,
    disabled: disabled,
    "data-qa": qa === null || qa === void 0 ? void 0 : qa.attachFiles
  }, I18n.t('core.fileAttacher.attachFiles', {
    count: multiple ? Infinity : 1
  }))));
  return hideDropzone ? attachFilesButton : /*#__PURE__*/React.createElement(Flex, {
    direction: "column",
    justifyContent: "center",
    alignItems: "center"
  }, attachFilesButton, /*#__PURE__*/React.createElement(StyledDropzoneMessage, {
    error: Boolean(errorMessage)
  }, errorMessage || I18n.t('core.dropzone.dragAndDrop')));
});
export var FileSelectDropzone = /*#__PURE__*/React.forwardRef(function FileSelectDropzone(_ref2, ref) {
  var accept = _ref2.accept,
    maxFileNumber = _ref2.maxFileNumber,
    maxFileSize = _ref2.maxFileSize,
    minFileSize = _ref2.minFileSize,
    disabled = _ref2.disabled,
    value = _ref2.value,
    onDrop = _ref2.onDrop,
    multiple = _ref2.multiple,
    noDrag = _ref2.noDrag,
    onAttachFromProject = _ref2.onAttachFromProject,
    contentRenderer = _ref2.contentRenderer,
    _ref2$hideDropzone = _ref2.hideDropzone,
    hideDropzone = _ref2$hideDropzone === void 0 ? false : _ref2$hideDropzone,
    tooltip = _ref2.tooltip,
    qa = _ref2.qa;
  var dropzoneState = useDropzone({
    accept: accept,
    maxFileNumber: maxFileNumber,
    maxFileSize: maxFileSize,
    minFileSize: minFileSize,
    disabled: disabled,
    value: value,
    onDrop: onDrop,
    multiple: multiple,
    noDrag: noDrag
  });
  var attachButtonRef = useRef(null);
  useImperativeHandle(ref, function () {
    return {
      clearErrors: function clearErrors() {
        dropzoneState.dispatchDropError(dropErrors.reset);
      },
      attachButton: attachButtonRef.current
    };
  });
  var defaultContent = function defaultContent(props) {
    return /*#__PURE__*/React.createElement(DefaultContent, _extends({}, props, {
      ref: attachButtonRef,
      tooltip: tooltip,
      hideDropzone: hideDropzone,
      multiple: multiple,
      onAttachFromProject: onAttachFromProject,
      qa: {
        attachFiles: qa === null || qa === void 0 ? void 0 : qa.attachFiles
      }
    }));
  };
  var dropzoneContent = contentRenderer || defaultContent;
  return /*#__PURE__*/React.createElement(StyledDropzone, _extends({}, dropzoneState, {
    tooltip: hideDropzone ? null : tooltip,
    contentRenderer: dropzoneContent,
    hidden: hideDropzone,
    rootProps: _defineProperty({}, dropzoneContainerAttr, '')
  }, hideDropzone ? {
    isIconVisible: false
  } : {}));
});
FileSelectDropzone.displayName = 'FileSelectDropzone';
//# sourceMappingURL=FileSelectDropzone.js.map