burdy
Version:
Open Source Headless Platform
152 lines (151 loc) • 9.57 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("@fluentui/react");
const react_2 = __importStar(require("react"));
const utility_1 = require("../../../helpers/utility");
const rhf_components_1 = require("../../../components/rhf-components");
const react_hook_form_1 = require("react-hook-form");
const tags_picker_control_1 = __importDefault(require("../../tags/components/tags-picker-control"));
const assets_context_1 = require("../context/assets.context");
const snackbar_1 = require("../../../context/snackbar");
const misc_1 = require("../../../helpers/misc");
const stackItemStyles = {
root: {
padding: '1rem 0',
},
};
const useStyles = (0, react_1.makeStyles)((theme) => ({
wrapper: {
display: 'grid',
gridTemplateColumns: '1fr 1fr',
columnGap: '2rem',
},
heading: {
paddingTop: '2rem',
fontWeight: '600',
},
itemHeading: {
fontWeight: '600',
},
previewImage: {
maxHeight: 256,
maxWidth: '100%',
marginRight: 'auto',
border: `1px solid ${theme.palette.neutralLight}`
}
}));
const AssetsDetails = () => {
const styles = useStyles();
const { update, selectedAssets, stateData, setStateData, assetSrc } = (0, assets_context_1.useAssets)();
const { openSnackbar } = (0, snackbar_1.useSnackbar)();
const selectedAsset = (0, react_2.useMemo)(() => {
return selectedAssets[0];
}, [selectedAssets]);
const { control, reset, handleSubmit } = (0, react_hook_form_1.useForm)();
(0, react_2.useEffect)(() => {
var _a, _b;
if (stateData === null || stateData === void 0 ? void 0 : stateData.assetDetailsOpen) {
update.reset();
reset({
alt: (_a = (0, utility_1.getMeta)(selectedAsset, 'alt')) === null || _a === void 0 ? void 0 : _a.value,
copyright: (_b = (0, utility_1.getMeta)(selectedAsset, 'copyright')) === null || _b === void 0 ? void 0 : _b.value,
tags: selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.tags,
});
}
}, [stateData === null || stateData === void 0 ? void 0 : stateData.assetDetailsOpen]);
const isImage = (0, react_2.useMemo)(() => {
return assets_context_1.IMAGE_MIME_TYPES.indexOf(selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.mimeType) > -1 || (selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.mimeType) === 'image/svg+xml';
}, [selectedAsset]);
(0, react_2.useEffect)(() => {
if (update === null || update === void 0 ? void 0 : update.result) {
setStateData('assetDetailsOpen', false);
}
}, [update === null || update === void 0 ? void 0 : update.result]);
const Footer = (0, react_2.useCallback)(() => (react_2.default.createElement(react_1.Stack, { horizontal: true, tokens: { childrenGap: 10 } },
react_2.default.createElement(react_1.PrimaryButton, { type: "submit", disabled: update.loading, onClick: () => {
handleSubmit((data) => {
update.execute(selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.id, data);
})();
}, "data-cy": "assets-details-submit" }, "Save"),
react_2.default.createElement(react_1.DefaultButton, { onClick: () => setStateData('assetDetailsOpen', false), "data-cy": "assets-details-close" }, "Close"))), [selectedAsset, isImage, stateData]);
const commandItems = (0, react_2.useMemo)(() => [
{
key: 'download',
text: 'Download',
disabled: (selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets.length) !== 1 ||
(selectedAssets[0] &&
selectedAssets[0].mimeType === assets_context_1.FOLDER_MIME_TYPE),
iconProps: { iconName: 'Download' },
onClick: () => window
.open(`/api/assets/${selectedAssets[0].id}?attachment=true`, '_blank')
.focus(),
},
{
key: 'copy',
text: 'Copy URL',
disabled: (selectedAssets === null || selectedAssets === void 0 ? void 0 : selectedAssets.length) !== 1 ||
(selectedAssets[0] &&
selectedAssets[0].mimeType === assets_context_1.FOLDER_MIME_TYPE),
iconProps: { iconName: 'Copy' },
onClick: () => {
var _a;
(0, utility_1.copyToClipboard)(`${window.location.origin}/api/uploads/${(_a = selectedAssets[0]) === null || _a === void 0 ? void 0 : _a.npath}`);
openSnackbar({
message: 'Successfully copied URL to clipboard!',
messageBarType: react_1.MessageBarType.success,
duration: 1000,
});
},
},
], [selectedAssets]);
return (react_2.default.createElement(react_1.Panel, { isLightDismiss: true, isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.assetDetailsOpen, onDismiss: () => setStateData('assetDetailsOpen', false), headerText: "View asset", closeButtonAriaLabel: "Close", type: react_1.PanelType.custom, customWidth: 400, onRenderFooterContent: Footer, isFooterAtBottom: true },
react_2.default.createElement(react_1.Stack, { tokens: {
childrenGap: 10,
} },
react_2.default.createElement(react_1.Text, { className: styles.heading, variant: "mediumPlus", block: true }, selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.name),
isImage && (react_2.default.createElement("img", { className: styles.previewImage, src: assetSrc(selectedAsset), alt: "Preview" })),
react_2.default.createElement(react_1.CommandBar, { items: commandItems, styles: {
root: {
padding: 0,
},
} }),
(update === null || update === void 0 ? void 0 : update.error) && (react_2.default.createElement(react_1.MessageBar, { messageBarType: react_1.MessageBarType.error, isMultiline: false, onDismiss: () => update.reset(), dismissButtonAriaLabel: "Close" }, "Name already exist")),
react_2.default.createElement("div", { className: styles.wrapper },
(selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.mimeType) !== assets_context_1.FOLDER_MIME_TYPE && (react_2.default.createElement(react_1.Stack, { styles: stackItemStyles },
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "File Size"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true }, (0, utility_1.humanFileSize)(selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.contentLength)))),
react_2.default.createElement(react_1.Stack, { styles: stackItemStyles },
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Mime Type"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true, "data-cy": "assets-details-mimeType" }, selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.mimeType)),
react_2.default.createElement(react_1.Stack, { styles: stackItemStyles },
react_2.default.createElement(react_1.Text, { className: styles.itemHeading, variant: "medium", block: true }, "Date Created"),
react_2.default.createElement(react_1.Text, { variant: "medium", block: true }, (0, misc_1.formatDate)(selectedAsset === null || selectedAsset === void 0 ? void 0 : selectedAsset.createdAt)))),
react_2.default.createElement(react_1.Stack, { tokens: { childrenGap: 10, maxWidth: 330 } },
isImage && (react_2.default.createElement(react_2.default.Fragment, null,
react_2.default.createElement(rhf_components_1.ControlledTextField, { name: "alt", label: "Alt", control: control }),
react_2.default.createElement(rhf_components_1.ControlledTextField, { name: "copyright", label: "Copyright", control: control }))),
react_2.default.createElement(tags_picker_control_1.default, { name: "tags", label: "Tags", control: control })))));
};
exports.default = AssetsDetails;