@pinuts/bsr-uikit-relaunch
Version:
BSR UI-KIT Relaunch
188 lines (186 loc) • 9.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _reactI18next = require("react-i18next");
var _reactDropzone = require("react-dropzone");
var _formBuilder = require("@pinuts/form-builder");
var _reactBootstrap = require("react-bootstrap");
var _FormFieldChildPropTypes = _interopRequireDefault(require("../FormFieldWrapper/FormFieldChildPropTypes.jsx"));
var _FormFieldWrapper = _interopRequireDefault(require("../FormFieldWrapper/FormFieldWrapper.jsx"));
var _withFieldGroup = _interopRequireDefault(require("../../hooks/withFieldGroup.jsx"));
var _Icon = _interopRequireDefault(require("../Icon/Icon.jsx"));
var _DropzoneUploadFieldModule = _interopRequireDefault(require("./DropzoneUploadField.module.scss"));
var _acceptedUploadTypeMapping = require("./acceptedUploadTypeMapping.js");
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 && {}.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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); } // form-builder
const {
useField,
useFormikContext
} = _formBuilder.formik;
const {
getClassNames
} = _formBuilder.utils;
//accept-prop needs an object mit mimeType as keys and an array of file extensions as values
const getFormattedAcceptesFileTypes = acceptedFileTypes => acceptedFileTypes?.reduce((newObj, type) => _acceptedUploadTypeMapping.ACCEPTED_UPLOAD_TYPE_MAPPING?.[type] ? {
...newObj,
[type]: _acceptedUploadTypeMapping.ACCEPTED_UPLOAD_TYPE_MAPPING[type] || []
} : newObj, {});
const DropzoneUploadField = _ref => {
let {
viewMode,
field,
onChange = () => {},
ariaAttributes,
isInvalid,
readOnly,
disabled,
fieldIds,
label,
localeRejected,
acceptedFileTypes
} = _ref;
const [t] = (0, _reactI18next.useTranslation)();
// eslint-disable-next-line no-unused-vars
const [formikField, _meta, helpers] = useField(field.name);
const usedViewMode = (0, _react.useMemo)(() => readOnly || disabled || viewMode, [readOnly, disabled, viewMode]);
const {
status,
setStatus
} = useFormikContext();
const onDrop = (0, _react.useCallback)(acceptedFiles => {
helpers.setTouched(true);
helpers.setValue('');
setStatus({
...status,
[formikField.name]: {
file: acceptedFiles[0]
}
});
onChange(acceptedFiles[0]);
}, [status, formikField.name, helpers, onChange, setStatus]);
const {
fileRejections,
getRootProps,
getInputProps
} = (0, _reactDropzone.useDropzone)({
onDrop: !usedViewMode ? onDrop : () => {},
noClick: usedViewMode,
noKeyboard: usedViewMode,
accept: getFormattedAcceptesFileTypes(acceptedFileTypes || []) || {}
});
const removeFile = e => {
e.preventDefault();
e.stopPropagation();
helpers.setTouched(true);
if (status[formikField.name]) {
setStatus({
...status,
[formikField.name]: null
});
} else {
helpers.setValue('');
}
onChange('');
};
return /*#__PURE__*/_react.default.createElement("section", {
className: getClassNames([!usedViewMode && 'container-fluid', _DropzoneUploadFieldModule.default.dropZoneWrapper, isInvalid && _DropzoneUploadFieldModule.default.isInvalid, usedViewMode && _DropzoneUploadFieldModule.default.disabled]),
"aria-labelledby": fieldIds.label
}, /*#__PURE__*/_react.default.createElement("div", {
className: "d-flex justify-content-between"
}, /*#__PURE__*/_react.default.createElement("div", getRootProps({
onDrop,
className: getClassNames(['dropzone', 'flex-fill', _DropzoneUploadFieldModule.default.fakeButton]),
role: 'button',
'aria-disabled': usedViewMode,
tabIndex: usedViewMode ? '-1' : '0',
...ariaAttributes,
'aria-controls': fieldIds.fieldId,
'aria-labelledby': ''
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("input", _extends({}, getInputProps({
id: fieldIds.fieldId
}), {
accept: acceptedFileTypes?.join(',')
})), /*#__PURE__*/_react.default.createElement("div", {
className: getClassNames([_DropzoneUploadFieldModule.default.insideDropzone, usedViewMode && _DropzoneUploadFieldModule.default.disabled, 'flex-fill', (status[formikField.name] || formikField.value || usedViewMode) && 'd-flex justify-content-start'])
}, /*#__PURE__*/_react.default.createElement("span", {
className: "sr-only"
}, label), !status[formikField.name] && !formikField.value ? /*#__PURE__*/_react.default.createElement("div", {
className: "text-schwarz-60"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "d-flex justify-content-center align-items-center text-gray"
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: usedViewMode ? 'lock' : 'circlePlus',
height: "32",
width: "32",
className: "me-2"
}), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, usedViewMode ? 'Kein Dokument hochgeladen' : 'Datei auswählen oder in dieses Feld ziehen'), localeRejected && fileRejections.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
className: "text-danger"
}, t(`${localeRejected}.${fileRejections[0]?.errors[0].code}`, {
filename: fileRejections[0]?.file.path
}))))) : /*#__PURE__*/_react.default.createElement("div", {
className: "d-flex mw-100 align-items-center"
}, /*#__PURE__*/_react.default.createElement("div", {
className: getClassNames(['flex-shrink-0 flex-grow-0 align-items center me-0 pe-2', usedViewMode && 'ps-0'])
}, status[formikField.name] ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Spinner, {
animation: "grow",
role: "status",
variant: "secondary",
style: {
width: '48px',
height: '48px'
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: "sr-only"
}, t(label), "...")) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: "fileText",
height: "48",
width: "48"
})), /*#__PURE__*/_react.default.createElement("div", {
className: "flex-fill"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "d-flex justify-content-between"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex-fill text-truncate",
title: status[formikField.name]?.file?.name || formikField?.value?.name
}, status[formikField.name]?.file?.name || formikField?.value?.name)), /*#__PURE__*/_react.default.createElement("div", {
className: "text-gray"
}, [(status[formikField.name]?.file?.size || formikField?.value?.size) && `${(parseInt(status[formikField.name]?.file?.size || formikField?.value?.size, 10) / (1024 * 1024)).toFixed(2)}MB`, status[formikField.name]?.file?.type || formikField?.value?.type].filter(Boolean).join(', '))))))), !usedViewMode && (status[formikField.name] || formikField?.value) && /*#__PURE__*/_react.default.createElement("aside", {
className: "flex-shrink-0 flex-grow-0 d-flex align-items-center"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "p-1"
}, /*#__PURE__*/_react.default.createElement("button", {
type: "button",
"aria-label": 'Ausgewählte Datei entfernen',
className: "btn btn-tuerkis-20 btn-circular",
onClick: removeFile
}, /*#__PURE__*/_react.default.createElement(_Icon.default, {
icon: "trash",
height: "16",
width: "16"
}))))));
};
DropzoneUploadField.propTypes = {
..._FormFieldChildPropTypes.default,
acceptedFileTypes: _propTypes.default.arrayOf(_propTypes.default.string),
localeRejected: _propTypes.default.string,
onChange: _propTypes.default.func,
key: _propTypes.default.string
};
DropzoneUploadField.formFieldConfig = {
labelIsLegend: true,
isFieldset: true
};
const HigherOrderDropzoneUploadField = (0, _withFieldGroup.default)(DropzoneUploadField);
// wrap the field label, error message help text and more
const WrappedDropzoneUploadField = props => {
return /*#__PURE__*/_react.default.createElement(_FormFieldWrapper.default, props, /*#__PURE__*/_react.default.createElement(HigherOrderDropzoneUploadField, props));
};
(0, _formBuilder.registerComponent)('DropzoneUploadField', WrappedDropzoneUploadField);
(0, _formBuilder.registerComponent)('DropzoneUploadFieldBasic', HigherOrderDropzoneUploadField);
var _default = exports.default = HigherOrderDropzoneUploadField;