node_modules ignore

This commit is contained in:
2025-05-08 23:43:47 +02:00
parent e19d52f172
commit 4574544c9f
65041 changed files with 10593536 additions and 0 deletions

View File

@@ -0,0 +1,20 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var reactIntl = require('react-intl');
const DialogHeader = ()=>{
const { formatMessage } = reactIntl.useIntl();
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
children: formatMessage({
id: 'global.details',
defaultMessage: 'Details'
})
})
});
};
exports.DialogHeader = DialogHeader;
//# sourceMappingURL=DialogHeader.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"DialogHeader.js","sources":["../../../../admin/src/components/EditAssetDialog/DialogHeader.tsx"],"sourcesContent":["import { Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nexport const DialogHeader = () => {\n const { formatMessage } = useIntl();\n\n return (\n <Modal.Header>\n <Modal.Title>\n {formatMessage({ id: 'global.details', defaultMessage: 'Details' })}\n </Modal.Title>\n </Modal.Header>\n );\n};\n"],"names":["DialogHeader","formatMessage","useIntl","_jsx","Modal","Header","Title","id","defaultMessage"],"mappings":";;;;;;MAGaA,YAAe,GAAA,IAAA;IAC1B,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,qBACEC,cAAA,CAACC,mBAAMC,MAAM,EAAA;gCACXF,cAAA,CAACC,mBAAME,KAAK,EAAA;sBACTL,aAAc,CAAA;gBAAEM,EAAI,EAAA,gBAAA;gBAAkBC,cAAgB,EAAA;AAAU,aAAA;;;AAIzE;;;;"}

View File

@@ -0,0 +1,18 @@
import { jsx } from 'react/jsx-runtime';
import { Modal } from '@strapi/design-system';
import { useIntl } from 'react-intl';
const DialogHeader = ()=>{
const { formatMessage } = useIntl();
return /*#__PURE__*/ jsx(Modal.Header, {
children: /*#__PURE__*/ jsx(Modal.Title, {
children: formatMessage({
id: 'global.details',
defaultMessage: 'Details'
})
})
});
};
export { DialogHeader };
//# sourceMappingURL=DialogHeader.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"DialogHeader.mjs","sources":["../../../../admin/src/components/EditAssetDialog/DialogHeader.tsx"],"sourcesContent":["import { Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nexport const DialogHeader = () => {\n const { formatMessage } = useIntl();\n\n return (\n <Modal.Header>\n <Modal.Title>\n {formatMessage({ id: 'global.details', defaultMessage: 'Details' })}\n </Modal.Title>\n </Modal.Header>\n );\n};\n"],"names":["DialogHeader","formatMessage","useIntl","_jsx","Modal","Header","Title","id","defaultMessage"],"mappings":";;;;MAGaA,YAAe,GAAA,IAAA;IAC1B,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,GAAA,CAACC,MAAMC,MAAM,EAAA;gCACXF,GAAA,CAACC,MAAME,KAAK,EAAA;sBACTL,aAAc,CAAA;gBAAEM,EAAI,EAAA,gBAAA;gBAAkBC,cAAgB,EAAA;AAAU,aAAA;;;AAIzE;;;;"}

View File

@@ -0,0 +1,403 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var strapiAdmin = require('@strapi/admin/strapi-admin');
var designSystem = require('@strapi/design-system');
var formik = require('formik');
var isEqual = require('lodash/isEqual');
var reactIntl = require('react-intl');
var styledComponents = require('styled-components');
var yup = require('yup');
var useEditAsset = require('../../hooks/useEditAsset.js');
var useFolderStructure = require('../../hooks/useFolderStructure.js');
var findRecursiveFolderByValue = require('../../utils/findRecursiveFolderByValue.js');
var formatBytes = require('../../utils/formatBytes.js');
require('date-fns');
var getTrad = require('../../utils/getTrad.js');
require('qs');
var getFileExtension = require('../../utils/getFileExtension.js');
require('../../constants.js');
require('../../utils/urlYupSchema.js');
var ContextInfo = require('../ContextInfo/ContextInfo.js');
var SelectTree = require('../SelectTree/SelectTree.js');
var DialogHeader = require('./DialogHeader.js');
var PreviewBox = require('./PreviewBox/PreviewBox.js');
var ReplaceMediaButton = require('./ReplaceMediaButton.js');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
var yup__namespace = /*#__PURE__*/_interopNamespaceDefault(yup);
const LoadingBody = styledComponents.styled(designSystem.Flex)`
/* 80px are coming from the Tabs component that is not included in the ModalBody */
min-height: ${()=>`calc(60vh + 8rem)`};
`;
const fileInfoSchema = yup__namespace.object({
name: yup__namespace.string().required(),
alternativeText: yup__namespace.string(),
caption: yup__namespace.string(),
folder: yup__namespace.number()
});
const EditAssetContent = ({ onClose, asset, canUpdate = false, canCopyLink = false, canDownload = false, trackedLocation })=>{
const { formatMessage, formatDate } = reactIntl.useIntl();
const { trackUsage } = strapiAdmin.useTracking();
const submitButtonRef = React__namespace.useRef(null);
const [isCropping, setIsCropping] = React__namespace.useState(false);
const [replacementFile, setReplacementFile] = React__namespace.useState();
const { editAsset, isLoading } = useEditAsset.useEditAsset();
const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure.useFolderStructure({
enabled: true
});
const handleSubmit = async (values)=>{
const nextAsset = {
...asset,
...values,
folder: values.parent?.value
};
if (asset?.isLocal) {
onClose(nextAsset);
} else {
const editedAsset = await editAsset(nextAsset, replacementFile);
const assetType = asset?.mime?.split('/')[0];
// if the folder parent was the root of Media Library, its id is null
// we know it changed location if the new parent value exists
const didChangeLocation = asset?.folder?.id ? asset.folder.id !== values.parent?.value : asset?.folder === null && !!values.parent?.value;
trackUsage('didEditMediaLibraryElements', {
location: trackedLocation,
type: assetType,
changeLocation: didChangeLocation
});
onClose(editedAsset);
}
};
const handleStartCropping = ()=>{
setIsCropping(true);
};
const handleCancelCropping = ()=>{
setIsCropping(false);
};
const handleFinishCropping = ()=>{
setIsCropping(false);
onClose();
};
const formDisabled = !canUpdate || isCropping;
const handleConfirmClose = ()=>{
// eslint-disable-next-line no-alert
const confirm = window.confirm(formatMessage({
id: 'window.confirm.close-modal.file',
defaultMessage: 'Are you sure? Your changes will be lost.'
}));
if (confirm) {
onClose();
}
};
const activeFolderId = asset?.folder?.id;
const initialFormData = !folderStructureIsLoading && {
name: asset?.name,
alternativeText: asset?.alternativeText ?? undefined,
caption: asset?.caption ?? undefined,
parent: {
value: activeFolderId ?? undefined,
label: findRecursiveFolderByValue.findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ?? folderStructure[0].label
}
};
const handleClose = (values)=>{
if (!isEqual(initialFormData, values)) {
handleConfirmClose();
} else {
onClose();
}
};
if (folderStructureIsLoading) {
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(DialogHeader.DialogHeader, {}),
/*#__PURE__*/ jsxRuntime.jsx(LoadingBody, {
minHeight: "60vh",
justifyContent: "center",
paddingTop: 4,
paddingBottom: 4,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
children: formatMessage({
id: getTrad.getTrad('content.isLoading'),
defaultMessage: 'Content is loading.'
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Footer, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: ()=>handleClose(),
variant: "tertiary",
children: formatMessage({
id: 'cancel',
defaultMessage: 'Cancel'
})
})
})
]
});
}
return /*#__PURE__*/ jsxRuntime.jsx(formik.Formik, {
validationSchema: fileInfoSchema,
validateOnChange: false,
onSubmit: handleSubmit,
initialValues: initialFormData,
children: ({ values, errors, handleChange, setFieldValue })=>/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(DialogHeader.DialogHeader, {}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Grid.Root, {
gap: 4,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
xs: 12,
col: 6,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsx(PreviewBox.PreviewBox, {
asset: asset,
canUpdate: canUpdate,
canCopyLink: canCopyLink,
canDownload: canDownload,
onDelete: onClose,
onCropFinish: handleFinishCropping,
onCropStart: handleStartCropping,
onCropCancel: handleCancelCropping,
replacementFile: replacementFile,
trackedLocation: trackedLocation
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
xs: 12,
col: 6,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsxs(formik.Form, {
noValidate: true,
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
direction: "column",
alignItems: "stretch",
gap: 3,
children: [
/*#__PURE__*/ jsxRuntime.jsx(ContextInfo.ContextInfo, {
blocks: [
{
label: formatMessage({
id: getTrad.getTrad('modal.file-details.size'),
defaultMessage: 'Size'
}),
value: formatBytes.formatBytes(asset?.size ? asset.size : 0)
},
{
label: formatMessage({
id: getTrad.getTrad('modal.file-details.dimensions'),
defaultMessage: 'Dimensions'
}),
value: asset?.height && asset.width ? `${asset.width}${asset.height}` : null
},
{
label: formatMessage({
id: getTrad.getTrad('modal.file-details.date'),
defaultMessage: 'Date'
}),
value: formatDate(new Date(asset?.createdAt ? asset.createdAt : ''))
},
{
label: formatMessage({
id: getTrad.getTrad('modal.file-details.extension'),
defaultMessage: 'Extension'
}),
value: getFileExtension.getFileExtension(asset?.ext)
},
{
label: formatMessage({
id: getTrad.getTrad('modal.file-details.id'),
defaultMessage: 'Asset ID'
}),
value: asset?.id ? asset.id : null
}
]
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
name: "name",
error: errors.name,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
children: formatMessage({
id: getTrad.getTrad('form.input.label.file-name'),
defaultMessage: 'File name'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
value: values.name,
onChange: handleChange,
disabled: formDisabled
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
]
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
name: "alternativeText",
hint: formatMessage({
id: getTrad.getTrad('form.input.description.file-alt'),
defaultMessage: 'This text will be displayed if the asset cant be shown.'
}),
error: errors.alternativeText,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
children: formatMessage({
id: getTrad.getTrad('form.input.label.file-alt'),
defaultMessage: 'Alternative text'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
value: values.alternativeText,
onChange: handleChange,
disabled: formDisabled
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
]
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
name: "caption",
error: errors.caption,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
children: formatMessage({
id: getTrad.getTrad('form.input.label.file-caption'),
defaultMessage: 'Caption'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.TextInput, {
value: values.caption,
onChange: handleChange,
disabled: formDisabled
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
direction: "column",
alignItems: "stretch",
gap: 1,
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
name: "parent",
id: "asset-folder",
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
children: formatMessage({
id: getTrad.getTrad('form.input.label.file-location'),
defaultMessage: 'Location'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(SelectTree.SelectTree, {
name: "parent",
defaultValue: values.parent,
options: folderStructure,
onChange: (value)=>{
setFieldValue('parent', value);
},
menuPortalTarget: document.querySelector('body'),
inputId: "asset-folder",
isDisabled: formDisabled,
error: errors?.parent,
ariaErrorMessage: "folder-parent-error"
})
]
})
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
children: /*#__PURE__*/ jsxRuntime.jsx("button", {
type: "submit",
tabIndex: -1,
ref: submitButtonRef,
disabled: formDisabled,
children: formatMessage({
id: 'submit',
defaultMessage: 'Submit'
})
})
})
]
})
})
]
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Footer, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: ()=>handleClose({
...values
}),
variant: "tertiary",
children: formatMessage({
id: 'global.cancel',
defaultMessage: 'Cancel'
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 2,
children: [
/*#__PURE__*/ jsxRuntime.jsx(ReplaceMediaButton.ReplaceMediaButton, {
onSelectMedia: setReplacementFile,
acceptedMime: asset?.mime ?? '',
disabled: formDisabled,
trackedLocation: trackedLocation
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: ()=>submitButtonRef.current?.click(),
loading: isLoading,
disabled: formDisabled,
children: formatMessage({
id: 'global.finish',
defaultMessage: 'Finish'
})
})
]
})
]
})
]
})
});
};
const EditAssetDialog = ({ open, onClose, canUpdate = false, canCopyLink = false, canDownload = false, ...restProps })=>{
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
open: open,
onOpenChange: onClose,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
children: /*#__PURE__*/ jsxRuntime.jsx(EditAssetContent, {
onClose: onClose,
canUpdate: canUpdate,
canCopyLink: canCopyLink,
canDownload: canDownload,
...restProps
})
})
});
};
exports.EditAssetContent = EditAssetContent;
exports.EditAssetDialog = EditAssetDialog;
//# sourceMappingURL=EditAssetContent.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,380 @@
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as React from 'react';
import { useTracking } from '@strapi/admin/strapi-admin';
import { Flex, Modal, Loader, Button, Grid, Field, TextInput, VisuallyHidden } from '@strapi/design-system';
import { Formik, Form } from 'formik';
import isEqual from 'lodash/isEqual';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import * as yup from 'yup';
import { useEditAsset } from '../../hooks/useEditAsset.mjs';
import { useFolderStructure } from '../../hooks/useFolderStructure.mjs';
import { findRecursiveFolderByValue } from '../../utils/findRecursiveFolderByValue.mjs';
import { formatBytes } from '../../utils/formatBytes.mjs';
import 'date-fns';
import { getTrad } from '../../utils/getTrad.mjs';
import 'qs';
import { getFileExtension } from '../../utils/getFileExtension.mjs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
import { ContextInfo } from '../ContextInfo/ContextInfo.mjs';
import { SelectTree } from '../SelectTree/SelectTree.mjs';
import { DialogHeader } from './DialogHeader.mjs';
import { PreviewBox } from './PreviewBox/PreviewBox.mjs';
import { ReplaceMediaButton } from './ReplaceMediaButton.mjs';
const LoadingBody = styled(Flex)`
/* 80px are coming from the Tabs component that is not included in the ModalBody */
min-height: ${()=>`calc(60vh + 8rem)`};
`;
const fileInfoSchema = yup.object({
name: yup.string().required(),
alternativeText: yup.string(),
caption: yup.string(),
folder: yup.number()
});
const EditAssetContent = ({ onClose, asset, canUpdate = false, canCopyLink = false, canDownload = false, trackedLocation })=>{
const { formatMessage, formatDate } = useIntl();
const { trackUsage } = useTracking();
const submitButtonRef = React.useRef(null);
const [isCropping, setIsCropping] = React.useState(false);
const [replacementFile, setReplacementFile] = React.useState();
const { editAsset, isLoading } = useEditAsset();
const { data: folderStructure, isLoading: folderStructureIsLoading } = useFolderStructure({
enabled: true
});
const handleSubmit = async (values)=>{
const nextAsset = {
...asset,
...values,
folder: values.parent?.value
};
if (asset?.isLocal) {
onClose(nextAsset);
} else {
const editedAsset = await editAsset(nextAsset, replacementFile);
const assetType = asset?.mime?.split('/')[0];
// if the folder parent was the root of Media Library, its id is null
// we know it changed location if the new parent value exists
const didChangeLocation = asset?.folder?.id ? asset.folder.id !== values.parent?.value : asset?.folder === null && !!values.parent?.value;
trackUsage('didEditMediaLibraryElements', {
location: trackedLocation,
type: assetType,
changeLocation: didChangeLocation
});
onClose(editedAsset);
}
};
const handleStartCropping = ()=>{
setIsCropping(true);
};
const handleCancelCropping = ()=>{
setIsCropping(false);
};
const handleFinishCropping = ()=>{
setIsCropping(false);
onClose();
};
const formDisabled = !canUpdate || isCropping;
const handleConfirmClose = ()=>{
// eslint-disable-next-line no-alert
const confirm = window.confirm(formatMessage({
id: 'window.confirm.close-modal.file',
defaultMessage: 'Are you sure? Your changes will be lost.'
}));
if (confirm) {
onClose();
}
};
const activeFolderId = asset?.folder?.id;
const initialFormData = !folderStructureIsLoading && {
name: asset?.name,
alternativeText: asset?.alternativeText ?? undefined,
caption: asset?.caption ?? undefined,
parent: {
value: activeFolderId ?? undefined,
label: findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ?? folderStructure[0].label
}
};
const handleClose = (values)=>{
if (!isEqual(initialFormData, values)) {
handleConfirmClose();
} else {
onClose();
}
};
if (folderStructureIsLoading) {
return /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(DialogHeader, {}),
/*#__PURE__*/ jsx(LoadingBody, {
minHeight: "60vh",
justifyContent: "center",
paddingTop: 4,
paddingBottom: 4,
children: /*#__PURE__*/ jsx(Loader, {
children: formatMessage({
id: getTrad('content.isLoading'),
defaultMessage: 'Content is loading.'
})
})
}),
/*#__PURE__*/ jsx(Modal.Footer, {
children: /*#__PURE__*/ jsx(Button, {
onClick: ()=>handleClose(),
variant: "tertiary",
children: formatMessage({
id: 'cancel',
defaultMessage: 'Cancel'
})
})
})
]
});
}
return /*#__PURE__*/ jsx(Formik, {
validationSchema: fileInfoSchema,
validateOnChange: false,
onSubmit: handleSubmit,
initialValues: initialFormData,
children: ({ values, errors, handleChange, setFieldValue })=>/*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(DialogHeader, {}),
/*#__PURE__*/ jsx(Modal.Body, {
children: /*#__PURE__*/ jsxs(Grid.Root, {
gap: 4,
children: [
/*#__PURE__*/ jsx(Grid.Item, {
xs: 12,
col: 6,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsx(PreviewBox, {
asset: asset,
canUpdate: canUpdate,
canCopyLink: canCopyLink,
canDownload: canDownload,
onDelete: onClose,
onCropFinish: handleFinishCropping,
onCropStart: handleStartCropping,
onCropCancel: handleCancelCropping,
replacementFile: replacementFile,
trackedLocation: trackedLocation
})
}),
/*#__PURE__*/ jsx(Grid.Item, {
xs: 12,
col: 6,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxs(Form, {
noValidate: true,
children: [
/*#__PURE__*/ jsxs(Flex, {
direction: "column",
alignItems: "stretch",
gap: 3,
children: [
/*#__PURE__*/ jsx(ContextInfo, {
blocks: [
{
label: formatMessage({
id: getTrad('modal.file-details.size'),
defaultMessage: 'Size'
}),
value: formatBytes(asset?.size ? asset.size : 0)
},
{
label: formatMessage({
id: getTrad('modal.file-details.dimensions'),
defaultMessage: 'Dimensions'
}),
value: asset?.height && asset.width ? `${asset.width}${asset.height}` : null
},
{
label: formatMessage({
id: getTrad('modal.file-details.date'),
defaultMessage: 'Date'
}),
value: formatDate(new Date(asset?.createdAt ? asset.createdAt : ''))
},
{
label: formatMessage({
id: getTrad('modal.file-details.extension'),
defaultMessage: 'Extension'
}),
value: getFileExtension(asset?.ext)
},
{
label: formatMessage({
id: getTrad('modal.file-details.id'),
defaultMessage: 'Asset ID'
}),
value: asset?.id ? asset.id : null
}
]
}),
/*#__PURE__*/ jsxs(Field.Root, {
name: "name",
error: errors.name,
children: [
/*#__PURE__*/ jsx(Field.Label, {
children: formatMessage({
id: getTrad('form.input.label.file-name'),
defaultMessage: 'File name'
})
}),
/*#__PURE__*/ jsx(TextInput, {
value: values.name,
onChange: handleChange,
disabled: formDisabled
}),
/*#__PURE__*/ jsx(Field.Error, {})
]
}),
/*#__PURE__*/ jsxs(Field.Root, {
name: "alternativeText",
hint: formatMessage({
id: getTrad('form.input.description.file-alt'),
defaultMessage: 'This text will be displayed if the asset cant be shown.'
}),
error: errors.alternativeText,
children: [
/*#__PURE__*/ jsx(Field.Label, {
children: formatMessage({
id: getTrad('form.input.label.file-alt'),
defaultMessage: 'Alternative text'
})
}),
/*#__PURE__*/ jsx(TextInput, {
value: values.alternativeText,
onChange: handleChange,
disabled: formDisabled
}),
/*#__PURE__*/ jsx(Field.Hint, {}),
/*#__PURE__*/ jsx(Field.Error, {})
]
}),
/*#__PURE__*/ jsxs(Field.Root, {
name: "caption",
error: errors.caption,
children: [
/*#__PURE__*/ jsx(Field.Label, {
children: formatMessage({
id: getTrad('form.input.label.file-caption'),
defaultMessage: 'Caption'
})
}),
/*#__PURE__*/ jsx(TextInput, {
value: values.caption,
onChange: handleChange,
disabled: formDisabled
})
]
}),
/*#__PURE__*/ jsx(Flex, {
direction: "column",
alignItems: "stretch",
gap: 1,
children: /*#__PURE__*/ jsxs(Field.Root, {
name: "parent",
id: "asset-folder",
children: [
/*#__PURE__*/ jsx(Field.Label, {
children: formatMessage({
id: getTrad('form.input.label.file-location'),
defaultMessage: 'Location'
})
}),
/*#__PURE__*/ jsx(SelectTree, {
name: "parent",
defaultValue: values.parent,
options: folderStructure,
onChange: (value)=>{
setFieldValue('parent', value);
},
menuPortalTarget: document.querySelector('body'),
inputId: "asset-folder",
isDisabled: formDisabled,
error: errors?.parent,
ariaErrorMessage: "folder-parent-error"
})
]
})
})
]
}),
/*#__PURE__*/ jsx(VisuallyHidden, {
children: /*#__PURE__*/ jsx("button", {
type: "submit",
tabIndex: -1,
ref: submitButtonRef,
disabled: formDisabled,
children: formatMessage({
id: 'submit',
defaultMessage: 'Submit'
})
})
})
]
})
})
]
})
}),
/*#__PURE__*/ jsxs(Modal.Footer, {
children: [
/*#__PURE__*/ jsx(Button, {
onClick: ()=>handleClose({
...values
}),
variant: "tertiary",
children: formatMessage({
id: 'global.cancel',
defaultMessage: 'Cancel'
})
}),
/*#__PURE__*/ jsxs(Flex, {
gap: 2,
children: [
/*#__PURE__*/ jsx(ReplaceMediaButton, {
onSelectMedia: setReplacementFile,
acceptedMime: asset?.mime ?? '',
disabled: formDisabled,
trackedLocation: trackedLocation
}),
/*#__PURE__*/ jsx(Button, {
onClick: ()=>submitButtonRef.current?.click(),
loading: isLoading,
disabled: formDisabled,
children: formatMessage({
id: 'global.finish',
defaultMessage: 'Finish'
})
})
]
})
]
})
]
})
});
};
const EditAssetDialog = ({ open, onClose, canUpdate = false, canCopyLink = false, canDownload = false, ...restProps })=>{
return /*#__PURE__*/ jsx(Modal.Root, {
open: open,
onOpenChange: onClose,
children: /*#__PURE__*/ jsx(Modal.Content, {
children: /*#__PURE__*/ jsx(EditAssetContent, {
onClose: onClose,
canUpdate: canUpdate,
canCopyLink: canCopyLink,
canDownload: canDownload,
...restProps
})
})
});
};
export { EditAssetContent, EditAssetDialog };
//# sourceMappingURL=EditAssetContent.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,127 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var MuxPlayer = require('@mux/mux-player-react');
var designSystem = require('@strapi/design-system');
var icons = require('@strapi/icons');
var reactIntl = require('react-intl');
var styledComponents = require('styled-components');
var constants = require('../../../constants.js');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
const CardAsset = styledComponents.styled(designSystem.Flex)`
min-height: 26.4rem;
border-radius: ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius} 0 0;
background: linear-gradient(
180deg,
${({ theme })=>theme.colors.neutral0} 0%,
${({ theme })=>theme.colors.neutral100} 121.48%
);
`;
const AssetPreview = /*#__PURE__*/ React__namespace.forwardRef(({ mime, url, name, ...props }, ref)=>{
const theme = styledComponents.useTheme();
const { formatMessage } = reactIntl.useIntl();
if (mime.includes(constants.AssetType.Image)) {
return /*#__PURE__*/ jsxRuntime.jsx("img", {
ref: ref,
src: url,
alt: name,
...props
});
}
if (mime.includes(constants.AssetType.Video)) {
return /*#__PURE__*/ jsxRuntime.jsx(MuxPlayer, {
src: url,
accentColor: theme.colors.primary500
});
}
if (mime.includes(constants.AssetType.Audio)) {
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
margin: "5",
children: /*#__PURE__*/ jsxRuntime.jsx("audio", {
controls: true,
src: url,
ref: ref,
...props,
children: name
})
});
}
if (mime.includes('pdf')) {
return /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
width: "100%",
justifyContent: "center",
...props,
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 2,
direction: "column",
alignItems: "center",
children: [
/*#__PURE__*/ jsxRuntime.jsx(icons.FilePdf, {
"aria-label": name,
fill: "neutral500",
width: 24,
height: 24
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
textColor: "neutral500",
variant: "pi",
children: formatMessage({
id: 'noPreview',
defaultMessage: 'No preview available'
})
})
]
})
});
}
return /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
width: "100%",
justifyContent: "center",
...props,
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 2,
direction: "column",
alignItems: "center",
children: [
/*#__PURE__*/ jsxRuntime.jsx(icons.File, {
"aria-label": name,
fill: "neutral500",
width: 24,
height: 24
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
textColor: "neutral500",
variant: "pi",
children: formatMessage({
id: 'noPreview',
defaultMessage: 'No preview available'
})
})
]
})
});
});
AssetPreview.displayName = 'AssetPreview';
exports.AssetPreview = AssetPreview;
//# sourceMappingURL=AssetPreview.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,106 @@
import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import MuxPlayer from '@mux/mux-player-react';
import { Flex, Box, Typography } from '@strapi/design-system';
import { FilePdf, File } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled, useTheme } from 'styled-components';
import { AssetType } from '../../../constants.mjs';
const CardAsset = styled(Flex)`
min-height: 26.4rem;
border-radius: ${({ theme })=>theme.borderRadius} ${({ theme })=>theme.borderRadius} 0 0;
background: linear-gradient(
180deg,
${({ theme })=>theme.colors.neutral0} 0%,
${({ theme })=>theme.colors.neutral100} 121.48%
);
`;
const AssetPreview = /*#__PURE__*/ React.forwardRef(({ mime, url, name, ...props }, ref)=>{
const theme = useTheme();
const { formatMessage } = useIntl();
if (mime.includes(AssetType.Image)) {
return /*#__PURE__*/ jsx("img", {
ref: ref,
src: url,
alt: name,
...props
});
}
if (mime.includes(AssetType.Video)) {
return /*#__PURE__*/ jsx(MuxPlayer, {
src: url,
accentColor: theme.colors.primary500
});
}
if (mime.includes(AssetType.Audio)) {
return /*#__PURE__*/ jsx(Box, {
margin: "5",
children: /*#__PURE__*/ jsx("audio", {
controls: true,
src: url,
ref: ref,
...props,
children: name
})
});
}
if (mime.includes('pdf')) {
return /*#__PURE__*/ jsx(CardAsset, {
width: "100%",
justifyContent: "center",
...props,
children: /*#__PURE__*/ jsxs(Flex, {
gap: 2,
direction: "column",
alignItems: "center",
children: [
/*#__PURE__*/ jsx(FilePdf, {
"aria-label": name,
fill: "neutral500",
width: 24,
height: 24
}),
/*#__PURE__*/ jsx(Typography, {
textColor: "neutral500",
variant: "pi",
children: formatMessage({
id: 'noPreview',
defaultMessage: 'No preview available'
})
})
]
})
});
}
return /*#__PURE__*/ jsx(CardAsset, {
width: "100%",
justifyContent: "center",
...props,
children: /*#__PURE__*/ jsxs(Flex, {
gap: 2,
direction: "column",
alignItems: "center",
children: [
/*#__PURE__*/ jsx(File, {
"aria-label": name,
fill: "neutral500",
width: 24,
height: 24
}),
/*#__PURE__*/ jsx(Typography, {
textColor: "neutral500",
variant: "pi",
children: formatMessage({
id: 'noPreview',
defaultMessage: 'No preview available'
})
})
]
})
});
});
AssetPreview.displayName = 'AssetPreview';
export { AssetPreview };
//# sourceMappingURL=AssetPreview.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,111 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var icons = require('@strapi/icons');
var reactIntl = require('react-intl');
var styledComponents = require('styled-components');
require('byte-size');
require('date-fns');
var getTrad = require('../../../utils/getTrad.js');
require('qs');
require('../../../constants.js');
require('../../../utils/urlYupSchema.js');
var PreviewComponents = require('./PreviewComponents.js');
const CroppingActions = ({ onCancel, onValidate, onDuplicate })=>{
const { formatMessage } = reactIntl.useIntl();
const theme = styledComponents.useTheme();
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.FocusTrap, {
onEscape: onCancel,
children: /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.CroppingActionRow, {
justifyContent: "flex-end",
paddingLeft: 3,
paddingRight: 3,
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 1,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: formatMessage({
id: getTrad.getTrad('control-card.stop-crop'),
defaultMessage: 'Stop cropping'
}),
onClick: onCancel,
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Cross, {})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(Trigger, {
"aria-label": formatMessage({
id: getTrad.getTrad('control-card.crop'),
defaultMessage: 'Crop'
}),
variant: "tertiary",
paddingLeft: 2,
paddingRight: 2,
endIcon: null,
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Check, {
"aria-hidden": true,
focusable: false,
style: {
position: 'relative',
top: 2
},
fill: "#C0C0D0"
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Content, {
zIndex: theme.zIndices.dialog,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
onSelect: onValidate,
children: formatMessage({
id: getTrad.getTrad('checkControl.crop-original'),
defaultMessage: 'Crop the original asset'
})
}),
onDuplicate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
onSelect: onDuplicate,
children: formatMessage({
id: getTrad.getTrad('checkControl.crop-duplicate'),
defaultMessage: 'Duplicate & crop the asset'
})
})
]
})
]
})
]
})
})
});
};
const Trigger = styledComponents.styled(designSystem.Menu.Trigger)`
svg {
> g,
path {
fill: ${({ theme })=>theme.colors.neutral500};
}
}
&:hover {
svg {
> g,
path {
fill: ${({ theme })=>theme.colors.neutral600};
}
}
}
&:active {
svg {
> g,
path {
fill: ${({ theme })=>theme.colors.neutral400};
}
}
}
`;
exports.CroppingActions = CroppingActions;
//# sourceMappingURL=CroppingActions.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,109 @@
import { jsx, jsxs } from 'react/jsx-runtime';
import { Menu, FocusTrap, Flex, IconButton } from '@strapi/design-system';
import { Cross, Check } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled, useTheme } from 'styled-components';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../../utils/getTrad.mjs';
import 'qs';
import '../../../constants.mjs';
import '../../../utils/urlYupSchema.mjs';
import { CroppingActionRow } from './PreviewComponents.mjs';
const CroppingActions = ({ onCancel, onValidate, onDuplicate })=>{
const { formatMessage } = useIntl();
const theme = useTheme();
return /*#__PURE__*/ jsx(FocusTrap, {
onEscape: onCancel,
children: /*#__PURE__*/ jsx(CroppingActionRow, {
justifyContent: "flex-end",
paddingLeft: 3,
paddingRight: 3,
children: /*#__PURE__*/ jsxs(Flex, {
gap: 1,
children: [
/*#__PURE__*/ jsx(IconButton, {
label: formatMessage({
id: getTrad('control-card.stop-crop'),
defaultMessage: 'Stop cropping'
}),
onClick: onCancel,
children: /*#__PURE__*/ jsx(Cross, {})
}),
/*#__PURE__*/ jsxs(Menu.Root, {
children: [
/*#__PURE__*/ jsx(Trigger, {
"aria-label": formatMessage({
id: getTrad('control-card.crop'),
defaultMessage: 'Crop'
}),
variant: "tertiary",
paddingLeft: 2,
paddingRight: 2,
endIcon: null,
children: /*#__PURE__*/ jsx(Check, {
"aria-hidden": true,
focusable: false,
style: {
position: 'relative',
top: 2
},
fill: "#C0C0D0"
})
}),
/*#__PURE__*/ jsxs(Menu.Content, {
zIndex: theme.zIndices.dialog,
children: [
/*#__PURE__*/ jsx(Menu.Item, {
onSelect: onValidate,
children: formatMessage({
id: getTrad('checkControl.crop-original'),
defaultMessage: 'Crop the original asset'
})
}),
onDuplicate && /*#__PURE__*/ jsx(Menu.Item, {
onSelect: onDuplicate,
children: formatMessage({
id: getTrad('checkControl.crop-duplicate'),
defaultMessage: 'Duplicate & crop the asset'
})
})
]
})
]
})
]
})
})
});
};
const Trigger = styled(Menu.Trigger)`
svg {
> g,
path {
fill: ${({ theme })=>theme.colors.neutral500};
}
}
&:hover {
svg {
> g,
path {
fill: ${({ theme })=>theme.colors.neutral600};
}
}
}
&:active {
svg {
> g,
path {
fill: ${({ theme })=>theme.colors.neutral400};
}
}
}
`;
export { CroppingActions };
//# sourceMappingURL=CroppingActions.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,260 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var strapiAdmin = require('@strapi/admin/strapi-admin');
var designSystem = require('@strapi/design-system');
var icons = require('@strapi/icons');
var reactIntl = require('react-intl');
var constants = require('../../../constants.js');
var useCropImg = require('../../../hooks/useCropImg.js');
var useEditAsset = require('../../../hooks/useEditAsset.js');
var useUpload = require('../../../hooks/useUpload.js');
var createAssetUrl = require('../../../utils/createAssetUrl.js');
var downloadFile = require('../../../utils/downloadFile.js');
require('byte-size');
require('date-fns');
var getTrad = require('../../../utils/getTrad.js');
require('qs');
require('../../../utils/urlYupSchema.js');
var CopyLinkButton = require('../../CopyLinkButton/CopyLinkButton.js');
var UploadProgress = require('../../UploadProgress/UploadProgress.js');
var RemoveAssetDialog = require('../RemoveAssetDialog.js');
var AssetPreview = require('./AssetPreview.js');
var CroppingActions = require('./CroppingActions.js');
var PreviewComponents = require('./PreviewComponents.js');
require('cropperjs/dist/cropper.css');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
// TODO: find a better naming convention for the file that was an index file before
const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCropFinish, onCropStart, onCropCancel, replacementFile, trackedLocation })=>{
const { trackUsage } = strapiAdmin.useTracking();
const previewRef = React__namespace.useRef(null);
const [isCropImageReady, setIsCropImageReady] = React__namespace.useState(false);
const [hasCropIntent, setHasCropIntent] = React__namespace.useState(null);
const [assetUrl, setAssetUrl] = React__namespace.useState(createAssetUrl.createAssetUrl(asset, false));
const [thumbnailUrl, setThumbnailUrl] = React__namespace.useState(createAssetUrl.createAssetUrl(asset, true));
const { formatMessage } = reactIntl.useIntl();
const [showConfirmDialog, setShowConfirmDialog] = React__namespace.useState(false);
const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg.useCropImg();
const { editAsset, error, isLoading, progress, cancel } = useEditAsset.useEditAsset();
const { upload, isLoading: isLoadingUpload, cancel: cancelUpload, error: uploadError, progress: progressUpload } = useUpload.useUpload();
React__namespace.useEffect(()=>{
// Whenever a replacementUrl is set, make sure to permutate the real asset.url by
// the locally generated one
if (replacementFile) {
const fileLocalUrl = URL.createObjectURL(replacementFile);
if (asset.isLocal) {
asset.url = fileLocalUrl;
}
setAssetUrl(fileLocalUrl);
setThumbnailUrl(fileLocalUrl);
}
}, [
replacementFile,
asset
]);
React__namespace.useEffect(()=>{
if (hasCropIntent === false) {
stopCropping();
onCropCancel();
}
}, [
hasCropIntent,
stopCropping,
onCropCancel,
onCropFinish
]);
React__namespace.useEffect(()=>{
if (hasCropIntent && isCropImageReady) {
crop(previewRef.current);
onCropStart();
}
}, [
isCropImageReady,
hasCropIntent,
onCropStart,
crop
]);
const handleCropping = async ()=>{
const nextAsset = {
...asset,
width,
height,
folder: asset.folder?.id
};
const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
// Making sure that when persisting the new asset, the URL changes with width and height
// So that the browser makes a request and handle the image caching correctly at the good size
let optimizedCachingImage;
let optimizedCachingThumbnailImage;
if (asset.isLocal) {
optimizedCachingImage = URL.createObjectURL(file);
optimizedCachingThumbnailImage = optimizedCachingImage;
asset.url = optimizedCachingImage;
asset.rawFile = file;
trackUsage('didCropFile', {
duplicatedFile: null,
location: trackedLocation
});
} else {
const updatedAsset = await editAsset(nextAsset, file);
optimizedCachingImage = createAssetUrl.createAssetUrl(updatedAsset, false);
optimizedCachingThumbnailImage = createAssetUrl.createAssetUrl(updatedAsset, true);
trackUsage('didCropFile', {
duplicatedFile: false,
location: trackedLocation
});
}
setAssetUrl(optimizedCachingImage);
setThumbnailUrl(optimizedCachingThumbnailImage);
setHasCropIntent(false);
};
const isInCroppingMode = isCropping && !isLoading;
const handleDuplication = async ()=>{
const nextAsset = {
...asset,
width,
height
};
const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
await upload({
name: file.name,
rawFile: file
}, asset.folder?.id ? asset.folder.id : null);
trackUsage('didCropFile', {
duplicatedFile: true,
location: trackedLocation
});
setHasCropIntent(false);
onCropFinish();
};
const handleCropCancel = ()=>{
setHasCropIntent(false);
};
const handleCropStart = ()=>{
setHasCropIntent(true);
};
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
/*#__PURE__*/ jsxRuntime.jsxs(PreviewComponents.RelativeBox, {
hasRadius: true,
background: "neutral150",
borderColor: "neutral200",
children: [
isCropperReady && isInCroppingMode && /*#__PURE__*/ jsxRuntime.jsx(CroppingActions.CroppingActions, {
onValidate: handleCropping,
onDuplicate: asset.isLocal ? undefined : handleDuplication,
onCancel: handleCropCancel
}),
/*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.ActionRow, {
paddingLeft: 3,
paddingRight: 3,
justifyContent: "flex-end",
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 1,
children: [
canUpdate && !asset.isLocal && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: formatMessage({
id: 'global.delete',
defaultMessage: 'Delete'
}),
onClick: ()=>setShowConfirmDialog(true),
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
}),
canDownload && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: formatMessage({
id: getTrad.getTrad('control-card.download'),
defaultMessage: 'Download'
}),
onClick: ()=>downloadFile.downloadFile(assetUrl, asset.name),
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Download, {})
}),
canCopyLink && /*#__PURE__*/ jsxRuntime.jsx(CopyLinkButton.CopyLinkButton, {
url: assetUrl
}),
canUpdate && asset.mime?.includes(constants.AssetType.Image) && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: formatMessage({
id: getTrad.getTrad('control-card.crop'),
defaultMessage: 'Crop'
}),
onClick: handleCropStart,
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Crop, {})
})
]
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(PreviewComponents.Wrapper, {
children: [
isLoading && /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.UploadProgressWrapper, {
children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgress.UploadProgress, {
error: error,
onCancel: cancel,
progress: progress
})
}),
isLoadingUpload && /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.UploadProgressWrapper, {
children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgress.UploadProgress, {
error: uploadError,
onCancel: cancelUpload,
progress: progressUpload
})
}),
/*#__PURE__*/ jsxRuntime.jsx(AssetPreview.AssetPreview, {
ref: previewRef,
mime: asset.mime,
name: asset.name,
url: hasCropIntent ? assetUrl : thumbnailUrl,
onLoad: ()=>{
if (asset.isLocal || hasCropIntent) {
setIsCropImageReady(true);
}
}
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.ActionRow, {
paddingLeft: 2,
paddingRight: 2,
justifyContent: "flex-end",
$blurry: isInCroppingMode,
children: isInCroppingMode && width && height && /*#__PURE__*/ jsxRuntime.jsx(PreviewComponents.BadgeOverride, {
background: "neutral900",
color: "neutral0",
children: width && height ? `${height}${width}` : 'N/A'
})
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(RemoveAssetDialog.RemoveAssetDialog, {
open: showConfirmDialog,
onClose: ()=>{
setShowConfirmDialog(false);
onDelete(null);
},
asset: asset
})
]
});
};
exports.PreviewBox = PreviewBox;
//# sourceMappingURL=PreviewBox.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,239 @@
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useTracking } from '@strapi/admin/strapi-admin';
import { Flex, IconButton } from '@strapi/design-system';
import { Trash, Download, Crop } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { AssetType } from '../../../constants.mjs';
import { useCropImg } from '../../../hooks/useCropImg.mjs';
import { useEditAsset } from '../../../hooks/useEditAsset.mjs';
import { useUpload } from '../../../hooks/useUpload.mjs';
import { createAssetUrl } from '../../../utils/createAssetUrl.mjs';
import { downloadFile } from '../../../utils/downloadFile.mjs';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../../utils/getTrad.mjs';
import 'qs';
import '../../../utils/urlYupSchema.mjs';
import { CopyLinkButton } from '../../CopyLinkButton/CopyLinkButton.mjs';
import { UploadProgress } from '../../UploadProgress/UploadProgress.mjs';
import { RemoveAssetDialog } from '../RemoveAssetDialog.mjs';
import { AssetPreview } from './AssetPreview.mjs';
import { CroppingActions } from './CroppingActions.mjs';
import { RelativeBox, ActionRow, Wrapper, UploadProgressWrapper, BadgeOverride } from './PreviewComponents.mjs';
import 'cropperjs/dist/cropper.css';
// TODO: find a better naming convention for the file that was an index file before
const PreviewBox = ({ asset, canUpdate, canCopyLink, canDownload, onDelete, onCropFinish, onCropStart, onCropCancel, replacementFile, trackedLocation })=>{
const { trackUsage } = useTracking();
const previewRef = React.useRef(null);
const [isCropImageReady, setIsCropImageReady] = React.useState(false);
const [hasCropIntent, setHasCropIntent] = React.useState(null);
const [assetUrl, setAssetUrl] = React.useState(createAssetUrl(asset, false));
const [thumbnailUrl, setThumbnailUrl] = React.useState(createAssetUrl(asset, true));
const { formatMessage } = useIntl();
const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
const { crop, produceFile, stopCropping, isCropping, isCropperReady, width, height } = useCropImg();
const { editAsset, error, isLoading, progress, cancel } = useEditAsset();
const { upload, isLoading: isLoadingUpload, cancel: cancelUpload, error: uploadError, progress: progressUpload } = useUpload();
React.useEffect(()=>{
// Whenever a replacementUrl is set, make sure to permutate the real asset.url by
// the locally generated one
if (replacementFile) {
const fileLocalUrl = URL.createObjectURL(replacementFile);
if (asset.isLocal) {
asset.url = fileLocalUrl;
}
setAssetUrl(fileLocalUrl);
setThumbnailUrl(fileLocalUrl);
}
}, [
replacementFile,
asset
]);
React.useEffect(()=>{
if (hasCropIntent === false) {
stopCropping();
onCropCancel();
}
}, [
hasCropIntent,
stopCropping,
onCropCancel,
onCropFinish
]);
React.useEffect(()=>{
if (hasCropIntent && isCropImageReady) {
crop(previewRef.current);
onCropStart();
}
}, [
isCropImageReady,
hasCropIntent,
onCropStart,
crop
]);
const handleCropping = async ()=>{
const nextAsset = {
...asset,
width,
height,
folder: asset.folder?.id
};
const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
// Making sure that when persisting the new asset, the URL changes with width and height
// So that the browser makes a request and handle the image caching correctly at the good size
let optimizedCachingImage;
let optimizedCachingThumbnailImage;
if (asset.isLocal) {
optimizedCachingImage = URL.createObjectURL(file);
optimizedCachingThumbnailImage = optimizedCachingImage;
asset.url = optimizedCachingImage;
asset.rawFile = file;
trackUsage('didCropFile', {
duplicatedFile: null,
location: trackedLocation
});
} else {
const updatedAsset = await editAsset(nextAsset, file);
optimizedCachingImage = createAssetUrl(updatedAsset, false);
optimizedCachingThumbnailImage = createAssetUrl(updatedAsset, true);
trackUsage('didCropFile', {
duplicatedFile: false,
location: trackedLocation
});
}
setAssetUrl(optimizedCachingImage);
setThumbnailUrl(optimizedCachingThumbnailImage);
setHasCropIntent(false);
};
const isInCroppingMode = isCropping && !isLoading;
const handleDuplication = async ()=>{
const nextAsset = {
...asset,
width,
height
};
const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
await upload({
name: file.name,
rawFile: file
}, asset.folder?.id ? asset.folder.id : null);
trackUsage('didCropFile', {
duplicatedFile: true,
location: trackedLocation
});
setHasCropIntent(false);
onCropFinish();
};
const handleCropCancel = ()=>{
setHasCropIntent(false);
};
const handleCropStart = ()=>{
setHasCropIntent(true);
};
return /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsxs(RelativeBox, {
hasRadius: true,
background: "neutral150",
borderColor: "neutral200",
children: [
isCropperReady && isInCroppingMode && /*#__PURE__*/ jsx(CroppingActions, {
onValidate: handleCropping,
onDuplicate: asset.isLocal ? undefined : handleDuplication,
onCancel: handleCropCancel
}),
/*#__PURE__*/ jsx(ActionRow, {
paddingLeft: 3,
paddingRight: 3,
justifyContent: "flex-end",
children: /*#__PURE__*/ jsxs(Flex, {
gap: 1,
children: [
canUpdate && !asset.isLocal && /*#__PURE__*/ jsx(IconButton, {
label: formatMessage({
id: 'global.delete',
defaultMessage: 'Delete'
}),
onClick: ()=>setShowConfirmDialog(true),
children: /*#__PURE__*/ jsx(Trash, {})
}),
canDownload && /*#__PURE__*/ jsx(IconButton, {
label: formatMessage({
id: getTrad('control-card.download'),
defaultMessage: 'Download'
}),
onClick: ()=>downloadFile(assetUrl, asset.name),
children: /*#__PURE__*/ jsx(Download, {})
}),
canCopyLink && /*#__PURE__*/ jsx(CopyLinkButton, {
url: assetUrl
}),
canUpdate && asset.mime?.includes(AssetType.Image) && /*#__PURE__*/ jsx(IconButton, {
label: formatMessage({
id: getTrad('control-card.crop'),
defaultMessage: 'Crop'
}),
onClick: handleCropStart,
children: /*#__PURE__*/ jsx(Crop, {})
})
]
})
}),
/*#__PURE__*/ jsxs(Wrapper, {
children: [
isLoading && /*#__PURE__*/ jsx(UploadProgressWrapper, {
children: /*#__PURE__*/ jsx(UploadProgress, {
error: error,
onCancel: cancel,
progress: progress
})
}),
isLoadingUpload && /*#__PURE__*/ jsx(UploadProgressWrapper, {
children: /*#__PURE__*/ jsx(UploadProgress, {
error: uploadError,
onCancel: cancelUpload,
progress: progressUpload
})
}),
/*#__PURE__*/ jsx(AssetPreview, {
ref: previewRef,
mime: asset.mime,
name: asset.name,
url: hasCropIntent ? assetUrl : thumbnailUrl,
onLoad: ()=>{
if (asset.isLocal || hasCropIntent) {
setIsCropImageReady(true);
}
}
})
]
}),
/*#__PURE__*/ jsx(ActionRow, {
paddingLeft: 2,
paddingRight: 2,
justifyContent: "flex-end",
$blurry: isInCroppingMode,
children: isInCroppingMode && width && height && /*#__PURE__*/ jsx(BadgeOverride, {
background: "neutral900",
color: "neutral0",
children: width && height ? `${height}${width}` : 'N/A'
})
})
]
}),
/*#__PURE__*/ jsx(RemoveAssetDialog, {
open: showConfirmDialog,
onClose: ()=>{
setShowConfirmDialog(false);
onDelete(null);
},
asset: asset
})
]
});
};
export { PreviewBox };
//# sourceMappingURL=PreviewBox.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,75 @@
'use strict';
var designSystem = require('@strapi/design-system');
var styledComponents = require('styled-components');
// TODO: find a better naming convention for the file that was an index file before
const RelativeBox = styledComponents.styled(designSystem.Box)`
position: relative;
`;
const Wrapper = styledComponents.styled.div`
position: relative;
display: flex;
justify-content: center;
background: repeating-conic-gradient(
${({ theme })=>theme.colors.neutral100} 0% 25%,
transparent 0% 50%
)
50% / 20px 20px;
svg {
height: 26px;
}
img,
mux-player {
margin: 0;
padding: 0;
max-height: 26.4rem;
max-width: 100%;
}
mux-player {
--play-button: inline-flex;
--mute-button: inline-flex;
--pip-button: inline-flex;
--fullscreen-button: inline-flex;
--playback-rate-button: inline-flex;
--volume-range: inline-flex;
--time-range: inline-flex;
--time-display: inline-flex;
--duration-display: inline-flex;
}
`;
const ActionRow = styledComponents.styled(designSystem.Flex)`
height: 5.2rem;
background-color: ${({ $blurry })=>$blurry ? `rgba(33, 33, 52, 0.4)` : undefined};
`;
const CroppingActionRow = styledComponents.styled(designSystem.Flex)`
z-index: 1;
height: 5.2rem;
position: absolute;
background-color: rgba(33, 33, 52, 0.4);
width: 100%;
`;
// TODO: fix in parts, this shouldn't happen
const BadgeOverride = styledComponents.styled(designSystem.Badge)`
span {
color: inherit;
font-weight: ${({ theme })=>theme.fontWeights.regular};
}
`;
const UploadProgressWrapper = styledComponents.styled.div`
position: absolute;
z-index: 2;
height: 100%;
width: 100%;
`;
exports.ActionRow = ActionRow;
exports.BadgeOverride = BadgeOverride;
exports.CroppingActionRow = CroppingActionRow;
exports.RelativeBox = RelativeBox;
exports.UploadProgressWrapper = UploadProgressWrapper;
exports.Wrapper = Wrapper;
//# sourceMappingURL=PreviewComponents.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"PreviewComponents.js","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n position: relative;\n`;\n\nexport const Wrapper = styled.div`\n position: relative;\n display: flex;\n justify-content: center;\n background: repeating-conic-gradient(\n ${({ theme }) => theme.colors.neutral100} 0% 25%,\n transparent 0% 50%\n )\n 50% / 20px 20px;\n\n svg {\n height: 26px;\n }\n\n img,\n mux-player {\n margin: 0;\n padding: 0;\n max-height: 26.4rem;\n max-width: 100%;\n }\n\n mux-player {\n --play-button: inline-flex;\n --mute-button: inline-flex;\n --pip-button: inline-flex;\n --fullscreen-button: inline-flex;\n --playback-rate-button: inline-flex;\n --volume-range: inline-flex;\n --time-range: inline-flex;\n --time-display: inline-flex;\n --duration-display: inline-flex;\n }\n`;\n\nexport const ActionRow = styled(Flex)`\n height: 5.2rem;\n background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n z-index: 1;\n height: 5.2rem;\n position: absolute;\n background-color: rgba(33, 33, 52, 0.4);\n width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n span {\n color: inherit;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n position: absolute;\n z-index: 2;\n height: 100%;\n width: 100%;\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper"],"mappings":";;;;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,uBAAOC,CAAAA,gBAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,uBAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,uBAAOQ,CAAAA,iBAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,uBAAOQ,CAAAA,iBAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,uBAAOa,CAAAA,kBAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,uBAAOG,CAAAA,GAAG;;;;;AAK/C;;;;;;;;;"}

View File

@@ -0,0 +1,68 @@
import { Box, Flex, Badge } from '@strapi/design-system';
import { styled } from 'styled-components';
// TODO: find a better naming convention for the file that was an index file before
const RelativeBox = styled(Box)`
position: relative;
`;
const Wrapper = styled.div`
position: relative;
display: flex;
justify-content: center;
background: repeating-conic-gradient(
${({ theme })=>theme.colors.neutral100} 0% 25%,
transparent 0% 50%
)
50% / 20px 20px;
svg {
height: 26px;
}
img,
mux-player {
margin: 0;
padding: 0;
max-height: 26.4rem;
max-width: 100%;
}
mux-player {
--play-button: inline-flex;
--mute-button: inline-flex;
--pip-button: inline-flex;
--fullscreen-button: inline-flex;
--playback-rate-button: inline-flex;
--volume-range: inline-flex;
--time-range: inline-flex;
--time-display: inline-flex;
--duration-display: inline-flex;
}
`;
const ActionRow = styled(Flex)`
height: 5.2rem;
background-color: ${({ $blurry })=>$blurry ? `rgba(33, 33, 52, 0.4)` : undefined};
`;
const CroppingActionRow = styled(Flex)`
z-index: 1;
height: 5.2rem;
position: absolute;
background-color: rgba(33, 33, 52, 0.4);
width: 100%;
`;
// TODO: fix in parts, this shouldn't happen
const BadgeOverride = styled(Badge)`
span {
color: inherit;
font-weight: ${({ theme })=>theme.fontWeights.regular};
}
`;
const UploadProgressWrapper = styled.div`
position: absolute;
z-index: 2;
height: 100%;
width: 100%;
`;
export { ActionRow, BadgeOverride, CroppingActionRow, RelativeBox, UploadProgressWrapper, Wrapper };
//# sourceMappingURL=PreviewComponents.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"PreviewComponents.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/PreviewComponents.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Badge, Box, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nexport const RelativeBox = styled(Box)`\n position: relative;\n`;\n\nexport const Wrapper = styled.div`\n position: relative;\n display: flex;\n justify-content: center;\n background: repeating-conic-gradient(\n ${({ theme }) => theme.colors.neutral100} 0% 25%,\n transparent 0% 50%\n )\n 50% / 20px 20px;\n\n svg {\n height: 26px;\n }\n\n img,\n mux-player {\n margin: 0;\n padding: 0;\n max-height: 26.4rem;\n max-width: 100%;\n }\n\n mux-player {\n --play-button: inline-flex;\n --mute-button: inline-flex;\n --pip-button: inline-flex;\n --fullscreen-button: inline-flex;\n --playback-rate-button: inline-flex;\n --volume-range: inline-flex;\n --time-range: inline-flex;\n --time-display: inline-flex;\n --duration-display: inline-flex;\n }\n`;\n\nexport const ActionRow = styled(Flex)`\n height: 5.2rem;\n background-color: ${({ $blurry }) => ($blurry ? `rgba(33, 33, 52, 0.4)` : undefined)};\n`;\n\nexport const CroppingActionRow = styled(Flex)`\n z-index: 1;\n height: 5.2rem;\n position: absolute;\n background-color: rgba(33, 33, 52, 0.4);\n width: 100%;\n`;\n\n// TODO: fix in parts, this shouldn't happen\nexport const BadgeOverride = styled(Badge)`\n span {\n color: inherit;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n }\n`;\n\nexport const UploadProgressWrapper = styled.div`\n position: absolute;\n z-index: 2;\n height: 100%;\n width: 100%;\n`;\n"],"names":["RelativeBox","styled","Box","Wrapper","div","theme","colors","neutral100","ActionRow","Flex","$blurry","undefined","CroppingActionRow","BadgeOverride","Badge","fontWeights","regular","UploadProgressWrapper"],"mappings":";;;AAAA;AAIaA,MAAAA,WAAAA,GAAcC,MAAOC,CAAAA,GAAAA,CAAI;;AAEtC;AAEaC,MAAAA,OAAAA,GAAUF,MAAOG,CAAAA,GAAG;;;;;MAK3B,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,KAAMC,CAAAA,MAAM,CAACC,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4B/C;AAEaC,MAAAA,SAAAA,GAAYP,MAAOQ,CAAAA,IAAAA,CAAK;;oBAEjB,EAAE,CAAC,EAAEC,OAAO,EAAE,GAAMA,UAAU,CAAC,qBAAqB,CAAC,GAAGC,SAAW,CAAA;AACvF;AAEaC,MAAAA,iBAAAA,GAAoBX,MAAOQ,CAAAA,IAAAA,CAAK;;;;;;AAM7C;AAEA;AACaI,MAAAA,aAAAA,GAAgBZ,MAAOa,CAAAA,KAAAA,CAAM;;;iBAGzB,EAAE,CAAC,EAAET,KAAK,EAAE,GAAKA,KAAMU,CAAAA,WAAW,CAACC,OAAO,CAAC;;AAE5D;AAEaC,MAAAA,qBAAAA,GAAwBhB,MAAOG,CAAAA,GAAG;;;;;AAK/C;;;;"}

View File

@@ -0,0 +1,27 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var strapiAdmin = require('@strapi/admin/strapi-admin');
var designSystem = require('@strapi/design-system');
var useRemoveAsset = require('../../hooks/useRemoveAsset.js');
const RemoveAssetDialog = ({ open, onClose, asset })=>{
// `null` means asset is deleted
const { removeAsset } = useRemoveAsset.useRemoveAsset(()=>{
onClose(null);
});
const handleConfirm = async (event)=>{
event?.preventDefault();
await removeAsset(asset.id);
};
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Dialog.Root, {
open: open,
onOpenChange: onClose,
children: /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.ConfirmDialog, {
onConfirm: handleConfirm
})
});
};
exports.RemoveAssetDialog = RemoveAssetDialog;
//# sourceMappingURL=RemoveAssetDialog.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"RemoveAssetDialog.js","sources":["../../../../admin/src/components/EditAssetDialog/RemoveAssetDialog.tsx"],"sourcesContent":["import { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Dialog } from '@strapi/design-system';\n\nimport { useRemoveAsset } from '../../hooks/useRemoveAsset';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ninterface RemoveAssetDialogProps {\n open: boolean;\n onClose: (open: boolean | null) => void;\n asset: File;\n}\n\nexport const RemoveAssetDialog = ({ open, onClose, asset }: RemoveAssetDialogProps) => {\n // `null` means asset is deleted\n const { removeAsset } = useRemoveAsset(() => {\n onClose(null);\n });\n\n const handleConfirm = async (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n event?.preventDefault();\n await removeAsset(asset.id);\n };\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <ConfirmDialog onConfirm={handleConfirm} />\n </Dialog.Root>\n );\n};\n"],"names":["RemoveAssetDialog","open","onClose","asset","removeAsset","useRemoveAsset","handleConfirm","event","preventDefault","id","_jsx","Dialog","Root","onOpenChange","ConfirmDialog","onConfirm"],"mappings":";;;;;;;AAaO,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAA0B,GAAA;;AAEhF,IAAA,MAAM,EAAEC,WAAW,EAAE,GAAGC,6BAAe,CAAA,IAAA;QACrCH,OAAQ,CAAA,IAAA,CAAA;AACV,KAAA,CAAA;AAEA,IAAA,MAAMI,gBAAgB,OAAOC,KAAAA,GAAAA;QAC3BA,KAAOC,EAAAA,cAAAA,EAAAA;QACP,MAAMJ,WAAAA,CAAYD,MAAMM,EAAE,CAAA;AAC5B,KAAA;IAEA,qBACEC,cAAA,CAACC,oBAAOC,IAAI,EAAA;QAACX,IAAMA,EAAAA,IAAAA;QAAMY,YAAcX,EAAAA,OAAAA;AACrC,QAAA,QAAA,gBAAAQ,cAACI,CAAAA,yBAAAA,EAAAA;YAAcC,SAAWT,EAAAA;;;AAGhC;;;;"}

View File

@@ -0,0 +1,25 @@
import { jsx } from 'react/jsx-runtime';
import { ConfirmDialog } from '@strapi/admin/strapi-admin';
import { Dialog } from '@strapi/design-system';
import { useRemoveAsset } from '../../hooks/useRemoveAsset.mjs';
const RemoveAssetDialog = ({ open, onClose, asset })=>{
// `null` means asset is deleted
const { removeAsset } = useRemoveAsset(()=>{
onClose(null);
});
const handleConfirm = async (event)=>{
event?.preventDefault();
await removeAsset(asset.id);
};
return /*#__PURE__*/ jsx(Dialog.Root, {
open: open,
onOpenChange: onClose,
children: /*#__PURE__*/ jsx(ConfirmDialog, {
onConfirm: handleConfirm
})
});
};
export { RemoveAssetDialog };
//# sourceMappingURL=RemoveAssetDialog.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"RemoveAssetDialog.mjs","sources":["../../../../admin/src/components/EditAssetDialog/RemoveAssetDialog.tsx"],"sourcesContent":["import { ConfirmDialog } from '@strapi/admin/strapi-admin';\nimport { Dialog } from '@strapi/design-system';\n\nimport { useRemoveAsset } from '../../hooks/useRemoveAsset';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ninterface RemoveAssetDialogProps {\n open: boolean;\n onClose: (open: boolean | null) => void;\n asset: File;\n}\n\nexport const RemoveAssetDialog = ({ open, onClose, asset }: RemoveAssetDialogProps) => {\n // `null` means asset is deleted\n const { removeAsset } = useRemoveAsset(() => {\n onClose(null);\n });\n\n const handleConfirm = async (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n event?.preventDefault();\n await removeAsset(asset.id);\n };\n\n return (\n <Dialog.Root open={open} onOpenChange={onClose}>\n <ConfirmDialog onConfirm={handleConfirm} />\n </Dialog.Root>\n );\n};\n"],"names":["RemoveAssetDialog","open","onClose","asset","removeAsset","useRemoveAsset","handleConfirm","event","preventDefault","id","_jsx","Dialog","Root","onOpenChange","ConfirmDialog","onConfirm"],"mappings":";;;;;AAaO,MAAMA,oBAAoB,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAEC,KAAK,EAA0B,GAAA;;AAEhF,IAAA,MAAM,EAAEC,WAAW,EAAE,GAAGC,cAAe,CAAA,IAAA;QACrCH,OAAQ,CAAA,IAAA,CAAA;AACV,KAAA,CAAA;AAEA,IAAA,MAAMI,gBAAgB,OAAOC,KAAAA,GAAAA;QAC3BA,KAAOC,EAAAA,cAAAA,EAAAA;QACP,MAAMJ,WAAAA,CAAYD,MAAMM,EAAE,CAAA;AAC5B,KAAA;IAEA,qBACEC,GAAA,CAACC,OAAOC,IAAI,EAAA;QAACX,IAAMA,EAAAA,IAAAA;QAAMY,YAAcX,EAAAA,OAAAA;AACrC,QAAA,QAAA,gBAAAQ,GAACI,CAAAA,aAAAA,EAAAA;YAAcC,SAAWT,EAAAA;;;AAGhC;;;;"}

View File

@@ -0,0 +1,79 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var strapiAdmin = require('@strapi/admin/strapi-admin');
var designSystem = require('@strapi/design-system');
var reactIntl = require('react-intl');
require('byte-size');
require('date-fns');
var getTrad = require('../../utils/getTrad.js');
require('qs');
require('../../constants.js');
require('../../utils/urlYupSchema.js');
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...props })=>{
const { formatMessage } = reactIntl.useIntl();
const inputRef = React__namespace.useRef(null);
const { trackUsage } = strapiAdmin.useTracking();
const handleClick = (e)=>{
e.preventDefault();
if (trackedLocation) {
trackUsage('didReplaceMedia', {
location: trackedLocation
});
}
inputRef.current?.click();
};
const handleChange = ()=>{
const file = inputRef.current?.files?.[0];
onSelectMedia(file);
};
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
variant: "secondary",
onClick: handleClick,
...props,
children: formatMessage({
id: getTrad.getTrad('control-card.replace-media'),
defaultMessage: 'Replace media'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
children: /*#__PURE__*/ jsxRuntime.jsx("input", {
accept: acceptedMime,
type: "file",
name: "file",
"data-testid": "file-input",
tabIndex: -1,
ref: inputRef,
onChange: handleChange,
"aria-hidden": true
})
})
]
});
};
exports.ReplaceMediaButton = ReplaceMediaButton;
//# sourceMappingURL=ReplaceMediaButton.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ReplaceMediaButton.js","sources":["../../../../admin/src/components/EditAssetDialog/ReplaceMediaButton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Button, VisuallyHidden, ButtonProps } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\ninterface ReplaceMediaButtonProps extends ButtonProps {\n acceptedMime: string;\n onSelectMedia: (file?: File) => void;\n trackedLocation?: string;\n}\n\nexport const ReplaceMediaButton = ({\n onSelectMedia,\n acceptedMime,\n trackedLocation,\n ...props\n}: ReplaceMediaButtonProps) => {\n const { formatMessage } = useIntl();\n const inputRef = React.useRef<HTMLInputElement>(null);\n const { trackUsage } = useTracking();\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n\n if (trackedLocation) {\n trackUsage('didReplaceMedia', { location: trackedLocation });\n }\n\n inputRef.current?.click();\n };\n\n const handleChange = () => {\n const file = inputRef.current?.files?.[0];\n\n onSelectMedia(file);\n };\n\n return (\n <>\n <Button variant=\"secondary\" onClick={handleClick} {...props}>\n {formatMessage({\n id: getTrad('control-card.replace-media'),\n defaultMessage: 'Replace media',\n })}\n </Button>\n <VisuallyHidden>\n <input\n accept={acceptedMime}\n type=\"file\"\n name=\"file\"\n data-testid=\"file-input\"\n tabIndex={-1}\n ref={inputRef}\n onChange={handleChange}\n aria-hidden\n />\n </VisuallyHidden>\n </>\n );\n};\n"],"names":["ReplaceMediaButton","onSelectMedia","acceptedMime","trackedLocation","props","formatMessage","useIntl","inputRef","React","useRef","trackUsage","useTracking","handleClick","e","preventDefault","location","current","click","handleChange","file","files","_jsxs","_Fragment","_jsx","Button","variant","onClick","id","getTrad","defaultMessage","VisuallyHidden","input","accept","type","name","data-testid","tabIndex","ref","onChange","aria-hidden"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,kBAAqB,GAAA,CAAC,EACjCC,aAAa,EACbC,YAAY,EACZC,eAAe,EACf,GAAGC,KACqB,EAAA,GAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAMC,QAAAA,GAAWC,gBAAMC,CAAAA,MAAM,CAAmB,IAAA,CAAA;IAChD,MAAM,EAAEC,UAAU,EAAE,GAAGC,uBAAAA,EAAAA;AAEvB,IAAA,MAAMC,cAAc,CAACC,CAAAA,GAAAA;AACnBA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;AAEhB,QAAA,IAAIX,eAAiB,EAAA;AACnBO,YAAAA,UAAAA,CAAW,iBAAmB,EAAA;gBAAEK,QAAUZ,EAAAA;AAAgB,aAAA,CAAA;AAC5D;AAEAI,QAAAA,QAAAA,CAASS,OAAO,EAAEC,KAAAA,EAAAA;AACpB,KAAA;AAEA,IAAA,MAAMC,YAAe,GAAA,IAAA;AACnB,QAAA,MAAMC,OAAOZ,QAASS,CAAAA,OAAO,EAAEI,KAAAA,GAAQ,CAAE,CAAA;QAEzCnB,aAAckB,CAAAA,IAAAA,CAAAA;AAChB,KAAA;IAEA,qBACEE,eAAA,CAAAC,mBAAA,EAAA;;0BACEC,cAACC,CAAAA,mBAAAA,EAAAA;gBAAOC,OAAQ,EAAA,WAAA;gBAAYC,OAASd,EAAAA,WAAAA;AAAc,gBAAA,GAAGR,KAAK;0BACxDC,aAAc,CAAA;AACbsB,oBAAAA,EAAAA,EAAIC,eAAQ,CAAA,4BAAA,CAAA;oBACZC,cAAgB,EAAA;AAClB,iBAAA;;0BAEFN,cAACO,CAAAA,2BAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAP,cAACQ,CAAAA,OAAAA,EAAAA;oBACCC,MAAQ9B,EAAAA,YAAAA;oBACR+B,IAAK,EAAA,MAAA;oBACLC,IAAK,EAAA,MAAA;oBACLC,aAAY,EAAA,YAAA;AACZC,oBAAAA,QAAAA,EAAU,CAAC,CAAA;oBACXC,GAAK9B,EAAAA,QAAAA;oBACL+B,QAAUpB,EAAAA,YAAAA;oBACVqB,aAAW,EAAA;;;;;AAKrB;;;;"}

View File

@@ -0,0 +1,58 @@
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useTracking } from '@strapi/admin/strapi-admin';
import { Button, VisuallyHidden } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../utils/getTrad.mjs';
import 'qs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
const ReplaceMediaButton = ({ onSelectMedia, acceptedMime, trackedLocation, ...props })=>{
const { formatMessage } = useIntl();
const inputRef = React.useRef(null);
const { trackUsage } = useTracking();
const handleClick = (e)=>{
e.preventDefault();
if (trackedLocation) {
trackUsage('didReplaceMedia', {
location: trackedLocation
});
}
inputRef.current?.click();
};
const handleChange = ()=>{
const file = inputRef.current?.files?.[0];
onSelectMedia(file);
};
return /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(Button, {
variant: "secondary",
onClick: handleClick,
...props,
children: formatMessage({
id: getTrad('control-card.replace-media'),
defaultMessage: 'Replace media'
})
}),
/*#__PURE__*/ jsx(VisuallyHidden, {
children: /*#__PURE__*/ jsx("input", {
accept: acceptedMime,
type: "file",
name: "file",
"data-testid": "file-input",
tabIndex: -1,
ref: inputRef,
onChange: handleChange,
"aria-hidden": true
})
})
]
});
};
export { ReplaceMediaButton };
//# sourceMappingURL=ReplaceMediaButton.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ReplaceMediaButton.mjs","sources":["../../../../admin/src/components/EditAssetDialog/ReplaceMediaButton.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Button, VisuallyHidden, ButtonProps } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../utils';\n\ninterface ReplaceMediaButtonProps extends ButtonProps {\n acceptedMime: string;\n onSelectMedia: (file?: File) => void;\n trackedLocation?: string;\n}\n\nexport const ReplaceMediaButton = ({\n onSelectMedia,\n acceptedMime,\n trackedLocation,\n ...props\n}: ReplaceMediaButtonProps) => {\n const { formatMessage } = useIntl();\n const inputRef = React.useRef<HTMLInputElement>(null);\n const { trackUsage } = useTracking();\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n\n if (trackedLocation) {\n trackUsage('didReplaceMedia', { location: trackedLocation });\n }\n\n inputRef.current?.click();\n };\n\n const handleChange = () => {\n const file = inputRef.current?.files?.[0];\n\n onSelectMedia(file);\n };\n\n return (\n <>\n <Button variant=\"secondary\" onClick={handleClick} {...props}>\n {formatMessage({\n id: getTrad('control-card.replace-media'),\n defaultMessage: 'Replace media',\n })}\n </Button>\n <VisuallyHidden>\n <input\n accept={acceptedMime}\n type=\"file\"\n name=\"file\"\n data-testid=\"file-input\"\n tabIndex={-1}\n ref={inputRef}\n onChange={handleChange}\n aria-hidden\n />\n </VisuallyHidden>\n </>\n );\n};\n"],"names":["ReplaceMediaButton","onSelectMedia","acceptedMime","trackedLocation","props","formatMessage","useIntl","inputRef","React","useRef","trackUsage","useTracking","handleClick","e","preventDefault","location","current","click","handleChange","file","files","_jsxs","_Fragment","_jsx","Button","variant","onClick","id","getTrad","defaultMessage","VisuallyHidden","input","accept","type","name","data-testid","tabIndex","ref","onChange","aria-hidden"],"mappings":";;;;;;;;;;;;AAcO,MAAMA,kBAAqB,GAAA,CAAC,EACjCC,aAAa,EACbC,YAAY,EACZC,eAAe,EACf,GAAGC,KACqB,EAAA,GAAA;IACxB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAMC,QAAAA,GAAWC,KAAMC,CAAAA,MAAM,CAAmB,IAAA,CAAA;IAChD,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;AAEvB,IAAA,MAAMC,cAAc,CAACC,CAAAA,GAAAA;AACnBA,QAAAA,CAAAA,CAAEC,cAAc,EAAA;AAEhB,QAAA,IAAIX,eAAiB,EAAA;AACnBO,YAAAA,UAAAA,CAAW,iBAAmB,EAAA;gBAAEK,QAAUZ,EAAAA;AAAgB,aAAA,CAAA;AAC5D;AAEAI,QAAAA,QAAAA,CAASS,OAAO,EAAEC,KAAAA,EAAAA;AACpB,KAAA;AAEA,IAAA,MAAMC,YAAe,GAAA,IAAA;AACnB,QAAA,MAAMC,OAAOZ,QAASS,CAAAA,OAAO,EAAEI,KAAAA,GAAQ,CAAE,CAAA;QAEzCnB,aAAckB,CAAAA,IAAAA,CAAAA;AAChB,KAAA;IAEA,qBACEE,IAAA,CAAAC,QAAA,EAAA;;0BACEC,GAACC,CAAAA,MAAAA,EAAAA;gBAAOC,OAAQ,EAAA,WAAA;gBAAYC,OAASd,EAAAA,WAAAA;AAAc,gBAAA,GAAGR,KAAK;0BACxDC,aAAc,CAAA;AACbsB,oBAAAA,EAAAA,EAAIC,OAAQ,CAAA,4BAAA,CAAA;oBACZC,cAAgB,EAAA;AAClB,iBAAA;;0BAEFN,GAACO,CAAAA,cAAAA,EAAAA;AACC,gBAAA,QAAA,gBAAAP,GAACQ,CAAAA,OAAAA,EAAAA;oBACCC,MAAQ9B,EAAAA,YAAAA;oBACR+B,IAAK,EAAA,MAAA;oBACLC,IAAK,EAAA,MAAA;oBACLC,aAAY,EAAA,YAAA;AACZC,oBAAAA,QAAAA,EAAU,CAAC,CAAA;oBACXC,GAAK9B,EAAAA,QAAAA;oBACL+B,QAAUpB,EAAAA,YAAAA;oBACVqB,aAAW,EAAA;;;;;AAKrB;;;;"}