@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
229 lines (226 loc) • 9.5 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Results = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _material = require("@mui/material");
var _react2 = require("@iconify/react");
var _styled = require("./styled");
var _icons = require("../../helpers/icons");
var _helper = require("./helper");
var _jsxRuntime = require("react/jsx-runtime");
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 icons = {
file: 'akar-icons:file',
audio: 'akar-icons:music',
document: 'carbon:document',
video: 'akar-icons:video'
};
var Results = exports.Results = function Results(_ref) {
var multiple = _ref.multiple,
files = _ref.files,
disabled = _ref.disabled,
variantShape = _ref.variantShape,
variantSize = _ref.variantSize,
filesDb = _ref.filesDB,
deleteFile = _ref.deleteFile,
deleteFilesDb = _ref.deleteFilesDb,
_ref$iconSet = _ref.iconSet,
iconSet = _ref$iconSet === void 0 ? 'file' : _ref$iconSet,
_ref$customIcons = _ref.customIcons,
customIcons = _ref$customIcons === void 0 ? icons : _ref$customIcons,
shapeProps = _ref.shapeProps;
var theme = (0, _material.useTheme)();
var ref = _react["default"].useRef(null);
var _React$useState = _react["default"].useState({
isDragging: false,
lastClientX: 0
}),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
dragHelpers = _React$useState2[0],
setDragHelpers = _React$useState2[1];
// Mouse Events compatible with desktop devices
var handleMouseDown = (0, _react.useCallback)(function (e) {
setDragHelpers(function (prev) {
return Object.assign({}, prev, {
isDragging: true,
lastClientX: e.clientX
});
});
}, []);
var handleMouseMove = (0, _react.useCallback)(function (e) {
if (dragHelpers.isDragging && ref.current) {
var deltaX = e.clientX - dragHelpers.lastClientX;
var _ref$current = ref.current,
clientWidth = _ref$current.clientWidth,
scrollWidth = _ref$current.scrollWidth;
var maxScrollLeft = scrollWidth - clientWidth;
if (deltaX !== 0) {
ref.current.scrollLeft -= deltaX;
}
if (deltaX !== 0 && ref.current.scrollLeft <= 0) {
ref.current.scrollLeft = 0;
}
if (deltaX !== 0 && ref.current.scrollLeft >= maxScrollLeft) {
ref.current.scrollLeft = maxScrollLeft;
}
setDragHelpers(function (prev) {
return Object.assign({}, prev, {
lastClientX: e.clientX
});
});
}
}, [ref, dragHelpers]);
var handleMouseUp = (0, _react.useCallback)(function (_e) {
setDragHelpers(function (prev) {
return Object.assign({}, prev, {
isDragging: false
});
});
}, []);
// Touch Events compatible with mobile devices
var handleTouchStart = (0, _react.useCallback)(function (e) {
setDragHelpers(function (prev) {
return Object.assign({}, prev, {
isDragging: true,
lastClientX: e.touches[0].clientX
});
});
}, []);
var handleTouchMove = (0, _react.useCallback)(function (e) {
if (dragHelpers.isDragging && ref.current) {
var deltaX = e.touches[0].clientX - dragHelpers.lastClientX;
var _ref$current2 = ref.current,
clientWidth = _ref$current2.clientWidth,
scrollWidth = _ref$current2.scrollWidth;
var maxScrollLeft = scrollWidth - clientWidth;
if (deltaX !== 0) {
ref.current.scrollLeft -= deltaX;
}
if (deltaX !== 0 && ref.current.scrollLeft <= 0) {
ref.current.scrollLeft = 0;
}
if (deltaX !== 0 && ref.current.scrollLeft >= maxScrollLeft) {
ref.current.scrollLeft = maxScrollLeft;
}
ref.current.scrollLeft -= deltaX;
setDragHelpers(function (prev) {
return Object.assign({}, prev, {
lastClientX: e.touches[0].clientX
});
});
}
}, [ref, dragHelpers]);
var handleTouchEnd = (0, _react.useCallback)(function (_e) {
setDragHelpers(function (prev) {
return Object.assign({}, prev, {
isDragging: false
});
});
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.WrapperResults, {
ref: ref,
onMouseUp: handleMouseUp,
onMouseMove: handleMouseMove,
onMouseDown: handleMouseDown,
onTouchStart: handleTouchStart,
onTouchEnd: handleTouchEnd,
onTouchMove: handleTouchMove,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [multiple && (files == null ? void 0 : files.map(function (_ref2) {
var id = _ref2.id,
file = _ref2.file;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.DeleteWrapper, {
children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.FixedElement, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.IconButton, {
size: "small",
onClick: function onClick(e) {
e.stopPropagation();
deleteFile == null || deleteFile(id);
},
sx: {
backgroundColor: 'background.default',
width: '24px',
height: '24px',
'&: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: variantSize,
border: !file.type.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: file.type.includes('image/') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ImageInputFile, {
src: URL.createObjectURL(file),
alt: file.name || 'unknown'
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: customIcons[iconSet],
width: "48px",
color: "inherit"
})
}))]
}, id);
})), multiple && (filesDb == null ? void 0 : filesDb.map(function (_ref3) {
var id = _ref3.id,
url = _ref3.url;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.DeleteWrapper, {
children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.FixedElement, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.IconButton, {
size: "small",
onClick: function onClick(e) {
e.stopPropagation();
deleteFilesDb == null || deleteFilesDb(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({
size: variantSize,
variant: variantShape,
border: !(0, _helper.validateMimeImage)(url)
}, shapeProps, {
onClick: function onClick(e) {
var _shapeProps$onClick2;
e.stopPropagation();
shapeProps == null || (_shapeProps$onClick2 = shapeProps.onClick) == null || _shapeProps$onClick2.call(shapeProps, e);
},
children: (0, _helper.validateMimeImage)(url) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.ImageInputFile, {
src: url,
alt: url || 'unknown'
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
icon: customIcons[iconSet],
width: "48px",
color: "inherit"
})
}))]
}, id);
}))]
})
});
};