@procore/core-react
Version:
React library of Procore Design Guidelines
263 lines (256 loc) • 14.8 kB
JavaScript
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); }
var _excluded = ["error", "onDismiss", "qa", "fileRejections"];
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); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { Ban, Image } from '@procore/core-icons/dist';
import { equals, omit } from 'ramda';
import React from 'react';
import styled from 'styled-components';
import { Banner } from '../Banner';
import { Box } from '../Box';
import { Button } from '../Button';
import { Token } from '../Token';
import { Tooltip } from '../Tooltip';
import { Typography } from '../Typography';
import { useI18nContext } from '../_hooks/I18n';
import { useResizeObserver } from '../_hooks/ResizeObserver';
import { useFocusWithin } from '../_hooks/useFocusWithin';
import { StyledDropzoneCaption, StyledDropzoneContainer, StyledDropzoneFocusDetector, StyledDropzoneIcon, StyledDropzoneMessage, StyledDropzoneWrapper, StyledErrorBanner, StyledErrorBannerDetails, StyledUploadButton } from './Dropzone.styles';
import { dropErrors, fileRejectionReason } from './Dropzone.types';
import { getFileDetail, isZeroSize } from './Dropzone.utils';
var extendedViewHeightBreakpoint = 172;
var DropzoneErrorBannerBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var error = _ref.error,
onDismiss = _ref.onDismiss,
qa = _ref.qa,
fileRejections = _ref.fileRejections,
props = _objectWithoutProperties(_ref, _excluded);
var I18n = useI18nContext();
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
isExpanded = _React$useState2[0],
setExpanded = _React$useState2[1];
React.useEffect(function () {
setExpanded(false);
}, [error.title, error.body, error.message]);
if (error.type === dropErrors.reset) {
return null;
}
return /*#__PURE__*/React.createElement(StyledErrorBanner, _extends({}, props, {
ref: ref
}), /*#__PURE__*/React.createElement(Banner.Content, null, /*#__PURE__*/React.createElement(Banner.Title, null, error.title), /*#__PURE__*/React.createElement(Banner.Body, null, error.message)), error.body ? /*#__PURE__*/React.createElement(Banner.Action, null, /*#__PURE__*/React.createElement(Button, {
"data-qa": qa === null || qa === void 0 ? void 0 : qa.showErrorDetails,
onClick: function onClick() {
return setExpanded(function (prev) {
return !prev;
});
}
}, isExpanded ? I18n.t('core.dropzone.hideDetails') : I18n.t('core.dropzone.showDetails'))) : null, /*#__PURE__*/React.createElement(Banner.Dismiss, {
onClick: onDismiss,
"data-qa": qa === null || qa === void 0 ? void 0 : qa.hideError
}), error.body ? /*#__PURE__*/React.createElement(Banner.ExpandableContent, {
expanded: isExpanded
}, error.body) : null);
});
export function MultipleErrors(props) {
var I18n = useI18nContext();
var filesByErrorType = props.fileRejections.reduce(function (acc, rejection) {
rejection.errors.forEach(function (error) {
var dropErrorType = dropErrorsByReason[error.code];
acc[dropErrorType].push(rejection.file);
});
return acc;
}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, dropErrors.fileAmount, []), dropErrors.minFileSize, []), dropErrors.maxFileSize, []), dropErrors.fileType, []), dropErrors.oneFileAtATime, []), dropErrors.reset, []), dropErrors.multipleErrors, []));
var messages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, dropErrors.fileAmount, I18n.t('core.dropzone.maxFileNumberErrorGroup', {
count: props.maxFiles
})), dropErrors.minFileSize, isZeroSize(props.minSize) ? I18n.t('core.dropzone.zeroFileSizeErrorGroup') : I18n.t('core.dropzone.minFileSizeErrorGroup', {
sizeInMegabytes: getSizeInMB(props.minSize)
})), dropErrors.maxFileSize, I18n.t('core.dropzone.maxFileSizeErrorGroup', {
sizeInMegabytes: getSizeInMB(props.maxSize)
})), dropErrors.fileType, I18n.t('core.dropzone.wrongFileTypeErrorGroup')), dropErrors.reset, ''), dropErrors.multipleErrors, ''), dropErrors.oneFileAtATime, '');
return /*#__PURE__*/React.createElement("div", null, [dropErrors.fileAmount, dropErrors.fileType, dropErrors.maxFileSize, dropErrors.minFileSize].map(function (errorType) {
var files = filesByErrorType[errorType];
return files.length ? /*#__PURE__*/React.createElement("div", {
key: errorType
}, /*#__PURE__*/React.createElement(Typography, {
weight: "bold"
}, messages[errorType]), /*#__PURE__*/React.createElement(StyledErrorBannerDetails, null, filesByErrorType[errorType].map(function (file) {
return /*#__PURE__*/React.createElement("li", {
key: file.name
}, getFileDetail(file));
}))) : null;
}));
}
// make error banner accessible as a styled-components selector
export var DropzoneErrorBanner = /*#__PURE__*/styled(DropzoneErrorBannerBase).withConfig({
displayName: "DropzoneErrorBanner",
componentId: "core-12_44_0__sc-l4fojb-0"
})([""]);
function DropzoneContainer(_ref2) {
var active = _ref2.active,
disabled = _ref2.disabled,
getRootProps = _ref2.getRootProps,
rootProps = _ref2.rootProps,
children = _ref2.children;
return /*#__PURE__*/React.createElement(StyledDropzoneContainer, _extends({}, getRootProps(rootProps), {
$active: active,
$disabled: disabled
}), children);
}
function DropzoneContent(_ref3) {
var disabled = _ref3.disabled,
isIconVisible = _ref3.isIconVisible,
contentMessage = _ref3.contentMessage;
return /*#__PURE__*/React.createElement(StyledDropzoneMessage, null, isIconVisible && /*#__PURE__*/React.createElement(StyledDropzoneIcon, {
$disabled: disabled
}, disabled ? /*#__PURE__*/React.createElement(Ban, null) : /*#__PURE__*/React.createElement(Image, null)), contentMessage);
}
export function DropzoneDefaultMessage(_ref4) {
var open = _ref4.open,
disabled = _ref4.disabled,
multiple = _ref4.multiple,
errorMessage = _ref4.errorMessage;
var I18n = useI18nContext();
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledUploadButton, {
variant: "secondary",
onClick: open,
disabled: disabled
}, I18n.t('core.dropzone.uploadFiles', {
count: multiple ? Infinity : 1
})), /*#__PURE__*/React.createElement(StyledDropzoneCaption, {
$error: !!errorMessage
}, errorMessage || I18n.t('core.dropzone.dragAndDrop')));
}
var dropErrorsByReason = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, fileRejectionReason.maxFiles, dropErrors.fileAmount), fileRejectionReason.maxFileSize, dropErrors.maxFileSize), fileRejectionReason.minFileSize, dropErrors.minFileSize), fileRejectionReason.fileType, dropErrors.fileType);
var getSizeInMB = function getSizeInMB(maxSize) {
return maxSize / 10e5;
};
var Dropzone_ = /*#__PURE__*/React.forwardRef(function Dropzone(_ref5, ref) {
var forceIconVisibility = _ref5.isIconVisible,
contentRenderer = _ref5.contentRenderer,
disabled = _ref5.disabled,
tooltip = _ref5.tooltip,
rootRef = _ref5.rootRef,
inputRef = _ref5.inputRef,
dragError = _ref5.dragError,
dropError = _ref5.dropError,
dispatchDropError = _ref5.dispatchDropError,
getRootProps = _ref5.getRootProps,
getInputProps = _ref5.getInputProps,
isDragActive = _ref5.isDragActive,
multiple = _ref5.multiple,
fileRejections = _ref5.fileRejections,
open = _ref5.open,
_ref5$rootProps = _ref5.rootProps,
rootProps = _ref5$rootProps === void 0 ? {} : _ref5$rootProps,
_ref5$inputProps = _ref5.inputProps,
inputProps = _ref5$inputProps === void 0 ? {} : _ref5$inputProps,
className = _ref5.className,
qa = _ref5.qa,
tokens = _ref5.tokens,
onClear = _ref5.onClear;
var _React$useState3 = React.useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
isIconVisible = _React$useState4[0],
setIsIconVisible = _React$useState4[1];
var _useFocusWithin = useFocusWithin(),
isFocusWithin = _useFocusWithin.isFocusWithin,
containerProps = _useFocusWithin.containerProps;
var toggleIconVisibility = React.useCallback(function (entries) {
var _ref6 = entries[0].target,
height = _ref6.offsetHeight;
setIsIconVisible(height >= extendedViewHeightBreakpoint);
}, [setIsIconVisible]);
var setResizeObserverTarget = useResizeObserver(toggleIconVisibility);
React.useEffect(function () {
setResizeObserverTarget(rootRef.current);
}, [rootRef, setResizeObserverTarget]);
React.useImperativeHandle(ref, function () {
return {
rootRef: rootRef,
inputRef: inputRef,
open: open
};
});
var isDropzoneDisabled = disabled || Boolean(dragError);
var contentMessage = React.useMemo(function () {
return contentRenderer ? contentRenderer({
open: open,
disabled: isDropzoneDisabled,
errorMessage: dragError
}) : /*#__PURE__*/React.createElement(DropzoneDefaultMessage, {
open: open,
disabled: isDropzoneDisabled,
errorMessage: dragError,
multiple: multiple
});
}, [contentRenderer, open, isDropzoneDisabled, dragError, multiple]);
var validRootProps = React.useMemo(function () {
return omit(['disabled'], rootProps);
}, [rootProps]);
var validInputProps = React.useMemo(function () {
return omit(['accept', 'multiple', 'type'], inputProps);
}, [inputProps]);
return /*#__PURE__*/React.createElement(StyledDropzoneWrapper, {
direction: "column",
alignItems: "stretch",
className: className
}, /*#__PURE__*/React.createElement(Tooltip, {
trigger: Boolean(tooltip) ? 'hover' : 'none',
overlay: tooltip || ''
}, /*#__PURE__*/React.createElement(StyledDropzoneFocusDetector, containerProps, /*#__PURE__*/React.createElement(DropzoneContainer, {
rootProps: validRootProps,
active: isDragActive || isFocusWithin,
disabled: isDropzoneDisabled,
getRootProps: getRootProps
}, /*#__PURE__*/React.createElement("input", _extends({
type: "file"
}, getInputProps(validInputProps))), /*#__PURE__*/React.createElement(DropzoneContent, {
disabled: isDropzoneDisabled,
isIconVisible: typeof forceIconVisibility === 'undefined' ? isIconVisible : forceIconVisibility,
contentMessage: contentMessage
})))), /*#__PURE__*/React.createElement(DropzoneErrorBanner, {
qa: qa,
error: dropError,
fileRejections: fileRejections,
onDismiss: function onDismiss() {
return dispatchDropError(dropErrors.reset);
}
}), tokens && tokens.length > 0 && /*#__PURE__*/React.createElement(Box, {
as: "ul",
display: "flex",
flexWrap: "wrap",
gap: "sm",
paddingTop: "lg"
}, tokens.map(function (token) {
return /*#__PURE__*/React.createElement("li", {
key: token.name
}, /*#__PURE__*/React.createElement(Token, null, /*#__PURE__*/React.createElement(Token.Label, null, getFileDetail(token)), onClear && /*#__PURE__*/React.createElement(Token.Remove, {
onClick: function onClick() {
return onClear(token);
}
})));
})));
});
DropzoneContainer.displayName = 'DropzoneContainer';
DropzoneContent.displayName = 'DropzoneContent';
Dropzone_.displayName = 'Dropzone';
/**
Dropzones allow users to quickly upload files from their computers, as well
as optionally launch the file select component.
@since 10.19.0
@see [Storybook](https://stories.core.procore.com/?path=/story/core-react_demos-dropzone--demo)
@see [Design Guidelines](https://design.procore.com/dropzone)
*/
export var Dropzone = /*#__PURE__*/React.memo(Dropzone_, equals);
//# sourceMappingURL=Dropzone.js.map