@braineet/ui
Version:
Braineet design system
109 lines (106 loc) • 4.22 kB
JavaScript
var _excluded = ["items"];
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + 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 _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; }
/* eslint-disable react/no-array-index-key */
import React from 'react';
import { useTransition } from 'react-spring';
import ModalMediaViewer from '../../modal-media-viewer/ModalMediaViewer';
import { UPLOAD_ITEM_STATUS } from '../useUploadState';
import { useUploadStore } from '../useUploadStore';
import { UploadListContainer } from './styles';
import { UploadItem } from './UploadItem';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export var UploadList = function UploadList(_ref) {
var state = _ref.state,
uploadItemStatus = _ref.uploadItemStatus,
transformItem = _ref.transformItem,
texts = _ref.texts;
var store = useUploadStore(state);
var items = store.items,
internalStore = _objectWithoutPropertiesLoose(store, _excluded);
var localItems = React.useMemo(function () {
if (!transformItem) return items;
return items.map(transformItem);
}, [items, transformItem]);
var _React$useState = React.useState(null),
mediaViewed = _React$useState[0],
setMediaViewed = _React$useState[1];
/** handles */
var handleOpenModalViewer = React.useCallback(function (media) {
setMediaViewed(media);
}, []);
var handleCloseModalViewer = React.useCallback(function () {
setMediaViewed(null);
}, []);
/** constants */
var enterStyles = function enterStyles(item) {
var _item$maxHeight, _item$maxHeight2, _item$maxHeight3;
var hasError = (item == null ? void 0 : item.status) === UPLOAD_ITEM_STATUS.ERROR && (item == null ? void 0 : item.errorText);
var itemMaxHeightByStatus = {
default: (item == null || (_item$maxHeight = item.maxHeight) == null ? void 0 : _item$maxHeight.default) || 40,
uploading: (item == null || (_item$maxHeight2 = item.maxHeight) == null ? void 0 : _item$maxHeight2.uploading) || 40,
error: (item == null || (_item$maxHeight3 = item.maxHeight) == null ? void 0 : _item$maxHeight3.error) || 40
};
return {
maxHeight: (itemMaxHeightByStatus[item.status] || itemMaxHeightByStatus.default) + (hasError ? 18 : 0),
opacity: 1,
paddingBottom: 4,
overflow: 'hidden'
};
};
var leaveStyles = function leaveStyles() {
return {
maxHeight: 0,
opacity: 0,
paddingBottom: 0,
overflow: 'hidden'
};
};
var transitions = useTransition(localItems, function (d) {
return d == null ? void 0 : d.uid;
}, {
initial: enterStyles,
from: leaveStyles,
leave: leaveStyles,
enter: enterStyles,
update: enterStyles,
config: function config(_, s) {
switch (s) {
case 'leave':
return {
tension: 300
};
default:
return {
tension: 170
};
}
}
});
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(UploadListContainer, {
as: "ul",
children: transitions.map(function (_ref2) {
var item = _ref2.item,
rest = _extends({}, (_objectDestructuringEmpty(_ref2.props), _ref2.props)),
s = _ref2.state;
return /*#__PURE__*/_jsx(UploadItem, _extends({
item: item,
state: s,
uploadItemStatus: uploadItemStatus,
style: _extends({
width: '100%',
boxSizing: 'content-box'
}, rest)
}, internalStore, {
onPreview: handleOpenModalViewer
}), item.uid);
})
}), /*#__PURE__*/_jsx(ModalMediaViewer, _extends({
isOpen: !!mediaViewed,
onClose: handleCloseModalViewer,
texts: texts
}, mediaViewed))]
});
};