@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
431 lines • 20.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["fileInputCustomAppearanceContainerConfigurationSettings", "fileInputContentContainerHoverConfigurationSettings", "fileInputContentContainerConfigurationSettings", "fileInputLabelContainerConfigurationSettings", "fileInputTextContainerConfigurationSettings", "fileInputIconContainerConfigurationSettings", "fileInputHoverEffectConfigurationSettings", "fileInputContainerConfigurationSettings", "fileInputFilesListConfigurationSettings", "fileInputSubLabelConfigurationSettings", "fileInputPaletteConfigurationSettings", "fileInputLabelConfigurationSettings", "fileInputIconConfigurationSettings", "fileInputContainerConfigurations", "appearanceContent", "initialFiles", "renderFileChip", "onTooMany", "onTooBig", "onChange", "id", "allowDirectory", "multiple", "disabled", "capture", "accept", "sublabel", "iconName", "label", "showSelected", "variant", "appearance", "size", "maxSizeBytes", "maxFiles"];
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useState, useRef, useMemo, useCallback } from "react";
import HUDFileChip from "./HUDFileChip.js";
import HUDIcon from "./HUDIcon.js";
function iconForType(t) {
switch (t) {
case "image":
return "file-image";
case "video":
return "file-video";
case "audio":
return "file-audio";
case "text":
return "file-alt";
case "application":
return "file";
default:
return "file";
}
}
;
function HUDFileInput(_ref) {
var _ref$fileInputCustomA = _ref.fileInputCustomAppearanceContainerConfigurationSettings,
fileInputCustomAppearanceContainerConfigurationSettings = _ref$fileInputCustomA === void 0 ? {} : _ref$fileInputCustomA,
_ref$fileInputContent = _ref.fileInputContentContainerHoverConfigurationSettings,
fileInputContentContainerHoverConfigurationSettings = _ref$fileInputContent === void 0 ? {} : _ref$fileInputContent,
_ref$fileInputContent2 = _ref.fileInputContentContainerConfigurationSettings,
fileInputContentContainerConfigurationSettings = _ref$fileInputContent2 === void 0 ? {} : _ref$fileInputContent2,
_ref$fileInputLabelCo = _ref.fileInputLabelContainerConfigurationSettings,
fileInputLabelContainerConfigurationSettings = _ref$fileInputLabelCo === void 0 ? {} : _ref$fileInputLabelCo,
_ref$fileInputTextCon = _ref.fileInputTextContainerConfigurationSettings,
fileInputTextContainerConfigurationSettings = _ref$fileInputTextCon === void 0 ? {} : _ref$fileInputTextCon,
_ref$fileInputIconCon = _ref.fileInputIconContainerConfigurationSettings,
fileInputIconContainerConfigurationSettings = _ref$fileInputIconCon === void 0 ? {} : _ref$fileInputIconCon,
_ref$fileInputHoverEf = _ref.fileInputHoverEffectConfigurationSettings,
fileInputHoverEffectConfigurationSettings = _ref$fileInputHoverEf === void 0 ? {} : _ref$fileInputHoverEf,
_ref$fileInputContain = _ref.fileInputContainerConfigurationSettings,
fileInputContainerConfigurationSettings = _ref$fileInputContain === void 0 ? {} : _ref$fileInputContain,
_ref$fileInputFilesLi = _ref.fileInputFilesListConfigurationSettings,
fileInputFilesListConfigurationSettings = _ref$fileInputFilesLi === void 0 ? {} : _ref$fileInputFilesLi,
_ref$fileInputSubLabe = _ref.fileInputSubLabelConfigurationSettings,
fileInputSubLabelConfigurationSettings = _ref$fileInputSubLabe === void 0 ? {} : _ref$fileInputSubLabe,
_ref$fileInputPalette = _ref.fileInputPaletteConfigurationSettings,
fileInputPaletteConfigurationSettings = _ref$fileInputPalette === void 0 ? {} : _ref$fileInputPalette,
_ref$fileInputLabelCo2 = _ref.fileInputLabelConfigurationSettings,
fileInputLabelConfigurationSettings = _ref$fileInputLabelCo2 === void 0 ? {} : _ref$fileInputLabelCo2,
_ref$fileInputIconCon2 = _ref.fileInputIconConfigurationSettings,
fileInputIconConfigurationSettings = _ref$fileInputIconCon2 === void 0 ? {} : _ref$fileInputIconCon2,
_ref$fileInputContain2 = _ref.fileInputContainerConfigurations,
fileInputContainerConfigurations = _ref$fileInputContain2 === void 0 ? {} : _ref$fileInputContain2,
appearanceContent = _ref.appearanceContent,
_ref$initialFiles = _ref.initialFiles,
initialFiles = _ref$initialFiles === void 0 ? [] : _ref$initialFiles,
renderFileChip = _ref.renderFileChip,
onTooMany = _ref.onTooMany,
onTooBig = _ref.onTooBig,
onChange = _ref.onChange,
id = _ref.id,
_ref$allowDirectory = _ref.allowDirectory,
allowDirectory = _ref$allowDirectory === void 0 ? false : _ref$allowDirectory,
_ref$multiple = _ref.multiple,
multiple = _ref$multiple === void 0 ? false : _ref$multiple,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
capture = _ref.capture,
accept = _ref.accept,
_ref$sublabel = _ref.sublabel,
sublabel = _ref$sublabel === void 0 ? "Drag & drop or click to select" : _ref$sublabel,
_ref$iconName = _ref.iconName,
iconName = _ref$iconName === void 0 ? "cloud-upload-alt" : _ref$iconName,
_ref$label = _ref.label,
label = _ref$label === void 0 ? "Upload files" : _ref$label,
_ref$showSelected = _ref.showSelected,
showSelected = _ref$showSelected === void 0 ? "chips" : _ref$showSelected,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? "appTile" : _ref$variant,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? "icon" : _ref$appearance,
_ref$size = _ref.size,
size = _ref$size === void 0 ? "md" : _ref$size,
maxSizeBytes = _ref.maxSizeBytes,
maxFiles = _ref.maxFiles,
rest = _objectWithoutProperties(_ref, _excluded);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
dragging = _useState2[0],
setDragging = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
focused = _useState4[0],
setFocused = _useState4[1];
var _useState5 = useState(initialFiles),
_useState6 = _slicedToArray(_useState5, 2),
files = _useState6[0],
setFiles = _useState6[1];
var inputRef = useRef(null);
var rootRef = useRef(null);
var sizes = {
sm: {
pad: 12,
icon: 22,
font: 13,
radius: 14
},
md: {
pad: 16,
icon: 26,
font: 14,
radius: 18
},
lg: {
pad: 22,
icon: 32,
font: 16,
radius: 22
}
}[size];
var palette = useMemo(function () {
return _objectSpread({
stroke: variant === "ghost" ? "rgba(80, 90, 130, 0.45)" : "rgba(60, 70, 110, 0.55)",
bg: variant === "ghost" ? "transparent" : "rgba(12, 14, 22, 0.65)",
hoverStroke: "rgba(90, 120, 255, 0.85)",
chipStroke: "rgba(255,255,255,0.12)",
danger: "rgba(255, 80, 110, 0.95)",
chipBg: "rgba(255,255,255,0.06)",
glow: "rgba(26, 115, 232, 0.45)",
subtext: "rgba(210,220,255,0.75)",
text: "rgba(230,238,255,0.96)"
}, fileInputPaletteConfigurationSettings !== null && fileInputPaletteConfigurationSettings !== void 0 ? fileInputPaletteConfigurationSettings : {});
}, [variant, fileInputPaletteConfigurationSettings]);
var ring = focused || dragging ? "0 0 0 2px ".concat(palette.glow, ", 0 0 0 6px rgba(26, 115, 232, 0.15)") : "0 2px 12px rgba(0, 0, 0, 0.35)";
var baseStyle = _objectSpread({
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
cursor: disabled ? "not-allowed" : "pointer",
userSelect: "none",
outline: "none",
transition: "box-shadow 160ms ease, border-color 160ms ease, transform 120ms ease",
transform: dragging ? "scale(1.01)" : "none",
WebkitBackdropFilter: "blur(8px)",
backdropFilter: "blur(8px)",
border: "1px solid ".concat(dragging ? palette.hoverStroke : palette.stroke),
borderRadius: sizes.radius,
boxShadow: ring,
background: palette.bg,
maxWidth: "8.69rem",
minWidth: variant === "pill" ? 0 : 280,
gap: 12,
padding: sizes.pad
}, fileInputContentContainerConfigurationSettings !== null && fileInputContentContainerConfigurationSettings !== void 0 ? fileInputContentContainerConfigurationSettings : {});
var hoverStyle = _objectSpread({
border: "1px solid ".concat(palette.hoverStroke),
boxShadow: "0 0 0 2px ".concat(palette.glow, ", 0 0 0 6px rgba(26,115,232,0.12), 0 8px 22px rgba(0,0,0,0.45)")
}, fileInputContentContainerHoverConfigurationSettings !== null && fileInputContentContainerHoverConfigurationSettings !== void 0 ? fileInputContentContainerHoverConfigurationSettings : {});
var labelWrap = _objectSpread({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
lineHeight: 1.15,
gap: 2
}, fileInputLabelContainerConfigurationSettings !== null && fileInputLabelContainerConfigurationSettings !== void 0 ? fileInputLabelContainerConfigurationSettings : {});
var labelStyle = _objectSpread({
fontWeight: 600,
fontSize: sizes.font + 1,
color: palette.text
}, fileInputLabelConfigurationSettings !== null && fileInputLabelConfigurationSettings !== void 0 ? fileInputLabelConfigurationSettings : {});
var sublabelStyle = _objectSpread({
fontWeight: 400,
fontSize: sizes.font - 1,
color: palette.subtext
}, fileInputSubLabelConfigurationSettings !== null && fileInputSubLabelConfigurationSettings !== void 0 ? fileInputSubLabelConfigurationSettings : {});
var hiddenInputProps = {
id: id,
ref: inputRef,
style: {
position: "absolute",
overflow: "hidden",
clipPath: "inset(50%)",
clip: "rect(1px, 1px, 1px, 1px)",
height: 1,
width: 1
},
type: "file",
multiple: multiple,
disabled: disabled,
capture: capture,
accept: accept
};
var applyGuards = useCallback(function (nextFiles) {
var arr = Array.from(nextFiles || []);
if (typeof maxFiles === "number" && multiple && arr.length > maxFiles) {
onTooMany && onTooMany(arr.length, maxFiles);
arr = arr.slice(0, maxFiles);
}
if (typeof maxSizeBytes === "number") {
var filtered = [];
var _iterator = _createForOfIteratorHelper(arr),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var f = _step.value;
if (f.size > maxSizeBytes) {
onTooBig && onTooBig(f, maxSizeBytes);
continue;
}
filtered.push(f);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
arr = filtered;
}
return arr;
}, [maxFiles, multiple, maxSizeBytes, onTooMany, onTooBig]);
var mergeFiles = useCallback(function (picked) {
var next = multiple ? [].concat(_toConsumableArray(files), _toConsumableArray(picked)) : picked.slice(0, 1);
setFiles(next);
onChange && onChange(next);
}, [files, multiple, onChange]);
var openPicker = useCallback(function () {
var _inputRef$current;
if (disabled) {
return;
}
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
}, [disabled]);
var onInputChange = useCallback(function (e) {
var f = e.target.files;
if (!f) {
return;
}
var guarded = applyGuards(f);
mergeFiles(guarded);
e.target.value = "";
}, [applyGuards, mergeFiles]);
var onDrop = useCallback(function (e) {
e.preventDefault();
e.stopPropagation();
setDragging(false);
if (disabled) {
return;
}
var dt = e.dataTransfer;
var f = dt === null || dt === void 0 ? void 0 : dt.files;
if (!f) {
return;
}
var guarded = applyGuards(f);
mergeFiles(guarded);
}, [applyGuards, mergeFiles, disabled]);
var onDragOver = useCallback(function (e) {
e.preventDefault();
e.stopPropagation();
if (!disabled) {
setDragging(true);
}
}, [disabled]);
var onDragLeave = useCallback(function (e) {
e.preventDefault();
e.stopPropagation();
setDragging(false);
}, []);
var onKeyDown = useCallback(function (e) {
if (disabled) {
return;
}
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
openPicker();
}
}, [disabled, openPicker]);
var removeAt = useCallback(function (idx) {
var next = files.filter(function (_, i) {
return i !== idx;
});
setFiles(next);
onChange && onChange(next);
}, [files, onChange]);
var customAppearanceContent = useMemo(function () {
var state = {
dragging: dragging,
focused: focused,
files: files,
disabled: disabled
};
if (typeof appearanceContent === "function") {
return appearanceContent(state);
}
return appearanceContent;
}, [appearanceContent, dragging, focused, files, disabled]);
var directoryProps = allowDirectory ? {
webkitdirectory: "true",
directory: "true"
} : {};
return /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "inline-flex",
flexDirection: "column",
gap: 10
}, fileInputContainerConfigurationSettings !== null && fileInputContainerConfigurationSettings !== void 0 ? fileInputContainerConfigurationSettings : {})
}, /*#__PURE__*/React.createElement("div", _extends({
ref: rootRef,
style: baseStyle,
role: "button",
tabIndex: disabled ? -1 : 0,
"aria-describedby": id ? "".concat(id, "-hint") : undefined,
"aria-disabled": disabled,
onMouseLeave: function onMouseLeave(e) {
if (!disabled) {
Object.assign(e.currentTarget.style, {
border: baseStyle.border,
boxShadow: baseStyle.boxShadow
});
}
},
onMouseEnter: function onMouseEnter(e) {
if (!disabled) {
Object.assign(e.currentTarget.style, hoverStyle);
}
},
onFocus: function onFocus() {
return setFocused(true);
},
onBlur: function onBlur() {
return setFocused(false);
},
onDragLeave: onDragLeave,
onDragOver: onDragOver,
onDrop: onDrop,
onKeyDown: onKeyDown,
onClick: openPicker
}, fileInputContainerConfigurations !== null && fileInputContainerConfigurations !== void 0 ? fileInputContainerConfigurations : {}), /*#__PURE__*/React.createElement("input", _extends({}, hiddenInputProps, {
onChange: onInputChange
}, directoryProps)), appearance === "icon" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "grid",
placeItems: "center",
border: "1px solid ".concat(palette.stroke),
borderRadius: 20,
boxShadow: dragging ? "0 0 0 2px ".concat(palette.glow) : "none",
background: "linear-gradient(135deg, rgba(26, 115, 232, 0.25), rgba(26, 115, 232, 0.05))",
height: sizes.icon * 2.1,
width: sizes.icon * 2.1
}, fileInputIconContainerConfigurationSettings !== null && fileInputIconContainerConfigurationSettings !== void 0 ? fileInputIconContainerConfigurationSettings : {})
}, /*#__PURE__*/React.createElement(HUDIcon, {
iconConfigurationSettings: _objectSpread({
height: sizes.icon,
width: sizes.icon
}, fileInputIconConfigurationSettings !== null && fileInputIconConfigurationSettings !== void 0 ? fileInputIconConfigurationSettings : {}),
color: palette.text,
name: iconName
})), /*#__PURE__*/React.createElement("div", {
style: labelWrap
}, /*#__PURE__*/React.createElement("div", {
style: labelStyle
}, label), sublabel && /*#__PURE__*/React.createElement("div", {
id: id ? "".concat(id, "-hint") : undefined,
style: sublabelStyle
}, sublabel))), appearance === "text" && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
alignItems: "center",
gap: 12
}, fileInputTextContainerConfigurationSettings !== null && fileInputTextContainerConfigurationSettings !== void 0 ? fileInputTextContainerConfigurationSettings : {})
}, /*#__PURE__*/React.createElement("div", {
style: labelStyle
}, label), sublabel && /*#__PURE__*/React.createElement("div", {
id: id ? "".concat(id, "-hint") : undefined,
style: _objectSpread({
fontWeight: 500
}, sublabelStyle)
}, sublabel)), appearance === "custom" && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%"
}, fileInputCustomAppearanceContainerConfigurationSettings !== null && fileInputCustomAppearanceContainerConfigurationSettings !== void 0 ? fileInputCustomAppearanceContainerConfigurationSettings : {})
}, customAppearanceContent), /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "absolute",
inset: 0,
mixBlendMode: "screen",
pointerEvents: "none",
borderRadius: sizes.radius - 1,
background: "linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02))"
}, fileInputHoverEffectConfigurationSettings !== null && fileInputHoverEffectConfigurationSettings !== void 0 ? fileInputHoverEffectConfigurationSettings : {}),
"aria-hidden": true
})), showSelected === "chips" && files.length > 0 && /*#__PURE__*/React.createElement("div", {
style: _objectSpread({
position: "relative",
display: "flex",
flexWrap: "wrap",
msOverflowStyle: "none",
scrollbarWidth: "none",
overflowY: "auto",
maxHeight: "4.69rem",
width: "calc(100%)",
gap: 8,
marginBottom: "0.69rem"
}, fileInputFilesListConfigurationSettings !== null && fileInputFilesListConfigurationSettings !== void 0 ? fileInputFilesListConfigurationSettings : {})
}, files.map(function (file, idx) {
return renderFileChip ? renderFileChip(file, idx, function () {
return removeAt(idx);
}) : /*#__PURE__*/React.createElement(HUDFileChip, _extends({
key: idx,
file: file,
onRemove: function onRemove() {
return removeAt(idx);
},
palette: palette,
sizes: sizes
}, rest));
})));
}
;
export default HUDFileInput;