baseui
Version:
A React Component library implementing the Base design language
173 lines (171 loc) • 9.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactDropzone = _interopRequireDefault(require("react-dropzone"));
var _locale = require("../locale");
var _styles = require("../styles");
var _button = require("../button");
var _overrides = require("../helpers/overrides");
var _progressBar = require("../progress-bar");
var _spinner = require("../spinner");
var _styledComponents = require("./styled-components");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && Object.prototype.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; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @ts-ignore
function prependStyleProps(styleProps) {
return Object.keys(styleProps).reduce((nextStyleProps, currentKey) => {
// @ts-ignore
nextStyleProps[`$${currentKey}`] = styleProps[currentKey];
return nextStyleProps;
}, {});
}
function FileUploaderBasic(props) {
const {
overrides = {}
} = props;
const [, theme] = (0, _styles.useStyletron)();
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const [FileDragAndDrop, fileDragAndDropProps] = (0, _overrides.getOverrides)(overrides.FileDragAndDrop, _styledComponents.StyledFileDragAndDrop);
const [ContentMessage, contentMessageProps] = (0, _overrides.getOverrides)(overrides.ContentMessage, _styledComponents.StyledContentMessage);
const [ContentSeparator, contentSeparatorProps] = (0, _overrides.getOverrides)(overrides.ContentSeparator, _styledComponents.StyledContentSeparator);
const [ErrorMessage, errorMessageProps] = (0, _overrides.getOverrides)(overrides.ErrorMessage, _styledComponents.StyledErrorMessage);
const [HiddenInput, hiddenInputProps] = (0, _overrides.getOverrides)(overrides.HiddenInput, _styledComponents.StyledHiddenInput);
const [ButtonComponent, buttonProps] = (0, _overrides.getOverrides)(overrides.ButtonComponent, _button.Button);
const [RetryButtonComponent, retryButtonProps] = (0, _overrides.getOverrides)(overrides.RetryButtonComponent, _button.Button);
const [CancelButtonComponent, cancelButtonProps] = (0, _overrides.getOverrides)(overrides.CancelButtonComponent, _button.Button);
const [SpinnerComponent, spinnerProps] = (0, _overrides.getOverrides)(overrides.Spinner, _spinner.Spinner);
const [ProgressBarComponent, progressBarProps] = (0, _overrides.getOverrides)(overrides.ProgressBar, _progressBar.ProgressBar);
const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
let accept;
if (Array.isArray(props.accept)) {
accept = props.accept.join(',');
} else if (typeof props.accept === 'string') {
accept = props.accept;
}
let displayButtonIcon = null;
if (props.buttonIcon) {
displayButtonIcon = props.buttonIcon();
}
return /*#__PURE__*/React.createElement(_reactDropzone.default, _extends({}, props, {
accept: accept,
disabled: props.disabled || afterFileDrop
}), renderProps => {
const {
getRootProps,
getInputProps,
open,
...styleProps
} = renderProps;
const prefixedStyledProps = prependStyleProps({
...styleProps,
isDisabled: props.disabled,
afterFileDrop
});
const getRootPropsArgs = {
...(props.disableClick ? {
onClick: evt => evt.preventDefault()
} : {}),
tabIndex: -1
};
return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
"data-baseweb": "file-uploader-basic"
}, prefixedStyledProps, rootProps), /*#__PURE__*/React.createElement(FileDragAndDrop, _extends({}, getRootProps(getRootPropsArgs), prefixedStyledProps, fileDragAndDropProps), !afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, props.swapButtonAndMessage ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonComponent, _extends({
disabled: props.disabled,
kind: _button.KIND.secondary,
shape: _button.SHAPE.pill,
size: _button.SIZE.compact,
onClick: open,
overrides: {
BaseButton: {
// @ts-ignore
style: ({
$theme
}) => ({
display: 'flex',
flexDirection: 'row',
gap: '8px',
marginTop: $theme.sizing.scale500
})
}
}
}, prefixedStyledProps, buttonProps), displayButtonIcon, props.buttonText ? props.buttonText : locale.fileuploaderbasic.browseFiles), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploaderbasic.or), /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.contentMessage ? props.contentMessage : locale.fileuploaderbasic.dropFilesToUpload)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.contentMessage ? props.contentMessage : locale.fileuploaderbasic.dropFilesToUpload), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploaderbasic.or), /*#__PURE__*/React.createElement(ButtonComponent, _extends({
disabled: props.disabled,
kind: _button.KIND.secondary,
shape: _button.SHAPE.pill,
size: _button.SIZE.compact,
onClick: open,
overrides: {
BaseButton: {
// @ts-ignore
style: ({
$theme
}) => ({
display: 'flex',
flexDirection: 'row',
gap: '8px',
marginTop: $theme.sizing.scale500
})
}
}
}, prefixedStyledProps, buttonProps), displayButtonIcon, props.buttonText ? props.buttonText : locale.fileuploaderbasic.browseFiles))), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBarComponent, _extends({
value: props.progressAmount,
overrides: {
BarProgress: {
// @ts-ignore
style: ({
$theme
}) => ({
backgroundColor: props.errorMessage ? $theme.colors.negative : $theme.colors.accent
})
}
}
}, progressBarProps)) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
$size: _spinner.SIZE.medium,
$style: {
marginBottom: theme.sizing.scale300
}
}, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(RetryButtonComponent, _extends({
kind: _button.KIND.tertiary,
onClick: () => {
props.onRetry && props.onRetry();
},
"aria-invalid": Boolean(props.errorMessage),
"aria-describedby": props['aria-describedby'],
"aria-errormessage": props.errorMessage
}, retryButtonProps), locale.fileuploaderbasic.retry) : /*#__PURE__*/React.createElement(CancelButtonComponent, _extends({
kind: _button.KIND.tertiary,
onClick: () => {
props.onCancel && props.onCancel();
},
"aria-describedby": props['aria-describedby'],
overrides: {
BaseButton: {
// @ts-ignore
style: ({
$theme
}) => ({
color: $theme.colors.contentNegative
})
}
}
}, cancelButtonProps), locale.fileuploaderbasic.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
"aria-invalid": Boolean(props.errorMessage) || null,
"aria-describedby": props['aria-describedby'],
"aria-errormessage": props.errorMessage || null
}, getInputProps(), prefixedStyledProps, hiddenInputProps))));
});
}
FileUploaderBasic.defaultProps = {
disableClick: true,
overrides: {}
};
var _default = exports.default = FileUploaderBasic;