@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
270 lines (269 loc) • 13 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _reactDropzone = require("react-dropzone");
var _react2 = require("@iconify/react");
var _uuid = require("uuid");
var _material = require("@mui/material");
var _styled = require("./styled");
var _input = require("../../base/input");
var _icons = require("../../helpers/icons");
var _Results = require("./Results");
var _helper = require("./helper");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["onDropElement", "onClickShape", "onDelete", "onChange", "getActualFiles", "name", "label", "variantShape", "variant", "accept", "disabled", "multiple", "error", "errorMessage", "filesDB", "iconSet", "customIcons", "shapeProps", "helperNode", "errorVariant", "addIcon", "wrapperShapeProps"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
var AttachFileDrop = function AttachFileDrop(props) {
var _files$2, _files$3;
var onDropElement = props.onDropElement,
onClickShape = props.onClickShape,
onDelete = props.onDelete,
onChange = props.onChange,
getActualFiles = props.getActualFiles,
name = props.name,
label = props.label,
variantShape = props.variantShape,
_props$variant = props.variant,
variant = _props$variant === void 0 ? 'divider' : _props$variant,
accept = props.accept,
disabled = props.disabled,
_props$multiple = props.multiple,
multiple = _props$multiple === void 0 ? false : _props$multiple,
error = props.error,
errorMessage = props.errorMessage,
filesDB = props.filesDB,
_props$iconSet = props.iconSet,
iconSet = _props$iconSet === void 0 ? 'file' : _props$iconSet,
customIcons = props.customIcons,
shapeProps = props.shapeProps,
helperNode = props.helperNode,
errorVariant = props.errorVariant,
addIcon = props.addIcon,
wrapperShapeProps = props.wrapperShapeProps,
rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
var theme = (0, _material.useTheme)();
var _React$useState = _react["default"].useState([]),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
files = _React$useState2[0],
setFiles = _React$useState2[1];
var _React$useState3 = _react["default"].useState([]),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
filesDb = _React$useState4[0],
setFilesDb = _React$useState4[1];
var _React$useState5 = _react["default"].useState(false),
_React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
onFocusInput = _React$useState6[0],
setOnFocusInput = _React$useState6[1];
var _onDropAccepted = _react["default"].useCallback(function (acceptedFiles) {
var mappedAcc = acceptedFiles.map(function (file) {
return {
id: (0, _uuid.v4)(),
file: file
};
});
if (multiple) {
var newsFiles = [].concat((0, _toConsumableArray2["default"])(files), (0, _toConsumableArray2["default"])(mappedAcc));
setFiles(newsFiles);
getActualFiles == null || getActualFiles(newsFiles);
} else {
var _final = mappedAcc.pop();
if (_final) {
setFiles([_final]);
getActualFiles == null || getActualFiles([_final]);
setFilesDb([]);
}
}
if (onDropElement) onDropElement(acceptedFiles);
}, [multiple, onDropElement]);
var _useDropzone = (0, _reactDropzone.useDropzone)({
onDropAccepted: function onDropAccepted(acceptedFiles) {
_onDropAccepted(acceptedFiles);
},
accept: accept,
disabled: disabled,
multiple: multiple
}),
getRootProps = _useDropzone.getRootProps,
getInputProps = _useDropzone.getInputProps;
var deleteFile = (0, _react.useCallback)(function (id) {
var newFiles = files == null ? void 0 : files.filter(function (file) {
return file.id !== id;
});
setFiles(newFiles);
getActualFiles == null || getActualFiles(newFiles);
onDelete == null || onDelete(id);
}, [files]);
var deleteFilesDb = (0, _react.useCallback)(function (id) {
var newFilesDb = filesDb == null ? void 0 : filesDb.filter(function (file) {
return file.id !== id;
});
setFilesDb(newFilesDb);
onDelete == null || onDelete(id);
}, [filesDb, onDelete]);
_react["default"].useEffect(function () {
if (filesDB) {
setFilesDb(filesDB);
setFiles([]);
}
}, [filesDB]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Root, {
children: [variant === 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.InputLabel, {
variant: variant,
htmlFor: props.id,
focused: onFocusInput,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_input.WrapperInputVariant, {
variant: variant,
error: error,
size: "auto",
backgroundColor: props.backgroundColor,
children: [variant !== 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.InputLabel, {
variant: variant,
htmlFor: props.id,
focused: onFocusInput,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.WrapperBody, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.Wrapper, Object.assign({
size: props.variantSize
}, wrapperShapeProps, getRootProps(), {
onClick: function onClick(e) {
var _getRootProps, _getRootProps$onClick, _wrapperShapeProps$on;
(_getRootProps = getRootProps()) == null || (_getRootProps$onClick = _getRootProps.onClick) == null || _getRootProps$onClick.call(_getRootProps, e);
onClickShape == null || onClickShape(e);
wrapperShapeProps == null || (_wrapperShapeProps$on = wrapperShapeProps.onClick) == null || _wrapperShapeProps$on.call(wrapperShapeProps, e);
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", Object.assign({}, rest, {
id: name,
name: name,
multiple: multiple,
onFocus: function onFocus() {
setOnFocusInput(true);
},
onBlur: function onBlur() {
return setOnFocusInput(false);
}
}, getInputProps({
onChange: onChange
}))), !multiple && (filesDb == null ? void 0 : filesDb.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.DeleteWrapper, {
children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.FixedElement, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
size: "small",
onClick: function onClick(e) {
e.stopPropagation();
deleteFilesDb(filesDb[0].id);
},
sx: {
width: '24px',
height: '24px',
backgroundColor: 'background.default',
'&:hover': {
backgroundColor: (0, _material.alpha)(theme.palette.background["default"], 0.9)
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.close,
color: theme.palette.text.secondary,
width: "24px"
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WrapperElement, {
variant: variantShape,
border: !(0, _helper.validateMimeImage)(filesDb[0].url),
children: (0, _helper.validateMimeImage)(filesDb[0].url) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ImageInputFile, {
src: filesDb[0].url,
alt: filesDb[0].url || 'unknown'
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: (customIcons == null ? void 0 : customIcons[iconSet]) || '',
width: "48px",
color: "inherit"
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WithoutImageLoad, {
variant: variantShape,
size: props.variantSize,
sx: Object.assign({}, !multiple && (filesDb == null ? void 0 : filesDb.length) > 0 && {
display: 'none'
}, !multiple && (files == null ? void 0 : files.length) > 0 && {
display: 'none'
}),
children: addIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.add,
color: theme.palette.text.secondary,
width: "30",
height: "30"
})
}), !multiple && (files == null ? void 0 : files.length) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.DeleteWrapper, {
onClick: function onClick(e) {
return e.stopPropagation();
},
children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.FixedElement, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
size: "small",
onClick: function onClick(e) {
var _files$;
e.stopPropagation();
deleteFile(files == null || (_files$ = files[0]) == null ? void 0 : _files$.id);
},
sx: {
width: '24px',
height: '24px',
backgroundColor: 'background.default',
'&:hover': {
backgroundColor: (0, _material.alpha)(theme.palette.background["default"], 0.9)
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: _icons.ICONS_NAME.close,
color: theme.palette.text.secondary
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WrapperElement, Object.assign({
variant: variantShape,
size: props.variantSize,
border: !(files != null && (_files$2 = files[0]) != null && (_files$2 = _files$2.file) != null && (_files$2 = _files$2.type) != null && _files$2.includes('image'))
}, shapeProps, {
onClick: function onClick(e) {
var _shapeProps$onClick;
e.stopPropagation();
shapeProps == null || (_shapeProps$onClick = shapeProps.onClick) == null || _shapeProps$onClick.call(shapeProps, e);
},
children: files != null && (_files$3 = files[0]) != null && _files$3.file.type.includes('image/') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ImageInputFile, {
src: URL.createObjectURL(files[0].file),
alt: files[0].file.name || 'unknown'
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: (customIcons == null ? void 0 : customIcons[iconSet]) || '',
width: "48px",
color: "inherit"
})
}))]
})]
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Results.Results, {
files: files,
filesDB: filesDb,
variantShape: variantShape,
variantSize: props.variantSize,
deleteFile: deleteFile,
deleteFilesDb: deleteFilesDb,
disabled: disabled,
customIcons: customIcons,
iconSet: iconSet,
multiple: multiple,
shapeProps: shapeProps
})]
})]
}), helperNode, error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_input.ErrorAlert, {
variant: errorVariant,
children: errorMessage
})]
});
};
var _default = exports["default"] = AttachFileDrop;