node_modules ignore

This commit is contained in:
oier committed 2025-05-08 23:43:47 +02:00
1 parent e19d52f172
commit 4574544c9f
65041 files changed
+10593536

No files matched your search

@@ -0,0 +1,84 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
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');
var FromComputerForm = require('./FromComputerForm.js');
var FromUrlForm = require('./FromUrlForm.js');
const AddAssetStep = ({ onClose, onAddAsset, trackedLocation })=>{
const { formatMessage } = reactIntl.useIntl();
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
children: formatMessage({
id: getTrad.getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.Root, {
variant: "simple",
defaultValue: "computer",
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
paddingLeft: 8,
paddingRight: 8,
paddingTop: 6,
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.List, {
"aria-label": formatMessage({
id: getTrad.getTrad('tabs.title'),
defaultMessage: 'How do you want to upload your assets?'
}),
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Trigger, {
value: "computer",
children: formatMessage({
id: getTrad.getTrad('modal.nav.computer'),
defaultMessage: 'From computer'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Trigger, {
value: "url",
children: formatMessage({
id: getTrad.getTrad('modal.nav.url'),
defaultMessage: 'From URL'
})
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
value: "computer",
children: /*#__PURE__*/ jsxRuntime.jsx(FromComputerForm.FromComputerForm, {
onClose: onClose,
onAddAssets: onAddAsset,
trackedLocation: trackedLocation
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
value: "url",
children: /*#__PURE__*/ jsxRuntime.jsx(FromUrlForm.FromUrlForm, {
onClose: onClose,
onAddAsset: onAddAsset,
trackedLocation: trackedLocation
})
})
]
})
]
});
};
exports.AddAssetStep = AddAssetStep;
//# sourceMappingURL=AddAssetStep.js.map
@@ -0,0 +1 @@
{"version":3,"file":"AddAssetStep.js","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/AddAssetStep.tsx"],"sourcesContent":["import { Box, Divider, Modal, Tabs } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../utils';\n\nimport { FromComputerForm } from './FromComputerForm';\nimport { FromUrlForm } from './FromUrlForm';\n\nimport type { RawFile, File } from '../../../../../shared/contracts/files';\n\nexport interface FileWithRawFile extends Omit<File, 'id' | 'hash'> {\n id?: string;\n hash?: string;\n rawFile: RawFile;\n}\n\ninterface AddAssetStepProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }: AddAssetStepProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <>\n <Modal.Header>\n <Modal.Title>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Modal.Title>\n </Modal.Header>\n <Tabs.Root variant=\"simple\" defaultValue=\"computer\">\n <Box paddingLeft={8} paddingRight={8} paddingTop={6}>\n <Tabs.List\n aria-label={formatMessage({\n id: getTrad('tabs.title'),\n defaultMessage: 'How do you want to upload your assets?',\n })}\n >\n <Tabs.Trigger value=\"computer\">\n {formatMessage({\n id: getTrad('modal.nav.computer'),\n defaultMessage: 'From computer',\n })}\n </Tabs.Trigger>\n <Tabs.Trigger value=\"url\">\n {formatMessage({\n id: getTrad('modal.nav.url'),\n defaultMessage: 'From URL',\n })}\n </Tabs.Trigger>\n </Tabs.List>\n\n <Divider />\n </Box>\n <Tabs.Content value=\"computer\">\n <FromComputerForm\n onClose={onClose}\n onAddAssets={onAddAsset}\n trackedLocation={trackedLocation}\n />\n </Tabs.Content>\n <Tabs.Content value=\"url\">\n <FromUrlForm\n onClose={onClose}\n onAddAsset={onAddAsset}\n trackedLocation={trackedLocation}\n />\n </Tabs.Content>\n </Tabs.Root>\n </>\n );\n};\n"],"names":["AddAssetStep","onClose","onAddAsset","trackedLocation","formatMessage","useIntl","_jsxs","_Fragment","_jsx","Modal","Header","Title","id","getTrad","defaultMessage","Tabs","Root","variant","defaultValue","Box","paddingLeft","paddingRight","paddingTop","List","aria-label","Trigger","value","Divider","Content","FromComputerForm","onAddAssets","FromUrlForm"],"mappings":";;;;;;;;;;;;;;AAsBO,MAAMA,eAAe,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,eAAe,EAAqB,GAAA;IACtF,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,qBACEC,eAAA,CAAAC,mBAAA,EAAA;;AACE,0BAAAC,cAAA,CAACC,mBAAMC,MAAM,EAAA;wCACXF,cAAA,CAACC,mBAAME,KAAK,EAAA;8BACTP,aAAc,CAAA;AACbQ,wBAAAA,EAAAA,EAAIC,eAAQ,CAAA,2BAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;;;AAGJ,0BAAAR,eAAA,CAACS,kBAAKC,IAAI,EAAA;gBAACC,OAAQ,EAAA,QAAA;gBAASC,YAAa,EAAA,UAAA;;kCACvCZ,eAACa,CAAAA,gBAAAA,EAAAA;wBAAIC,WAAa,EAAA,CAAA;wBAAGC,YAAc,EAAA,CAAA;wBAAGC,UAAY,EAAA,CAAA;;AAChD,0CAAAhB,eAAA,CAACS,kBAAKQ,IAAI,EAAA;AACRC,gCAAAA,YAAAA,EAAYpB,aAAc,CAAA;AACxBQ,oCAAAA,EAAAA,EAAIC,eAAQ,CAAA,YAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;;AAEA,kDAAAN,cAAA,CAACO,kBAAKU,OAAO,EAAA;wCAACC,KAAM,EAAA,UAAA;kDACjBtB,aAAc,CAAA;AACbQ,4CAAAA,EAAAA,EAAIC,eAAQ,CAAA,oBAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;AAEF,kDAAAN,cAAA,CAACO,kBAAKU,OAAO,EAAA;wCAACC,KAAM,EAAA,KAAA;kDACjBtB,aAAc,CAAA;AACbQ,4CAAAA,EAAAA,EAAIC,eAAQ,CAAA,eAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;;;0CAIJN,cAACmB,CAAAA,oBAAAA,EAAAA,EAAAA;;;AAEH,kCAAAnB,cAAA,CAACO,kBAAKa,OAAO,EAAA;wBAACF,KAAM,EAAA,UAAA;AAClB,wBAAA,QAAA,gBAAAlB,cAACqB,CAAAA,iCAAAA,EAAAA;4BACC5B,OAASA,EAAAA,OAAAA;4BACT6B,WAAa5B,EAAAA,UAAAA;4BACbC,eAAiBA,EAAAA;;;AAGrB,kCAAAK,cAAA,CAACO,kBAAKa,OAAO,EAAA;wBAACF,KAAM,EAAA,KAAA;AAClB,wBAAA,QAAA,gBAAAlB,cAACuB,CAAAA,uBAAAA,EAAAA;4BACC9B,OAASA,EAAAA,OAAAA;4BACTC,UAAYA,EAAAA,UAAAA;4BACZC,eAAiBA,EAAAA;;;;;;;AAM7B;;;;"}
@@ -0,0 +1,82 @@
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { Modal, Tabs, Box, Divider } 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';
import { FromComputerForm } from './FromComputerForm.mjs';
import { FromUrlForm } from './FromUrlForm.mjs';
const AddAssetStep = ({ onClose, onAddAsset, trackedLocation })=>{
const { formatMessage } = useIntl();
return /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(Modal.Header, {
children: /*#__PURE__*/ jsx(Modal.Title, {
children: formatMessage({
id: getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
})
}),
/*#__PURE__*/ jsxs(Tabs.Root, {
variant: "simple",
defaultValue: "computer",
children: [
/*#__PURE__*/ jsxs(Box, {
paddingLeft: 8,
paddingRight: 8,
paddingTop: 6,
children: [
/*#__PURE__*/ jsxs(Tabs.List, {
"aria-label": formatMessage({
id: getTrad('tabs.title'),
defaultMessage: 'How do you want to upload your assets?'
}),
children: [
/*#__PURE__*/ jsx(Tabs.Trigger, {
value: "computer",
children: formatMessage({
id: getTrad('modal.nav.computer'),
defaultMessage: 'From computer'
})
}),
/*#__PURE__*/ jsx(Tabs.Trigger, {
value: "url",
children: formatMessage({
id: getTrad('modal.nav.url'),
defaultMessage: 'From URL'
})
})
]
}),
/*#__PURE__*/ jsx(Divider, {})
]
}),
/*#__PURE__*/ jsx(Tabs.Content, {
value: "computer",
children: /*#__PURE__*/ jsx(FromComputerForm, {
onClose: onClose,
onAddAssets: onAddAsset,
trackedLocation: trackedLocation
})
}),
/*#__PURE__*/ jsx(Tabs.Content, {
value: "url",
children: /*#__PURE__*/ jsx(FromUrlForm, {
onClose: onClose,
onAddAsset: onAddAsset,
trackedLocation: trackedLocation
})
})
]
})
]
});
};
export { AddAssetStep };
//# sourceMappingURL=AddAssetStep.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"AddAssetStep.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/AddAssetStep.tsx"],"sourcesContent":["import { Box, Divider, Modal, Tabs } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../utils';\n\nimport { FromComputerForm } from './FromComputerForm';\nimport { FromUrlForm } from './FromUrlForm';\n\nimport type { RawFile, File } from '../../../../../shared/contracts/files';\n\nexport interface FileWithRawFile extends Omit<File, 'id' | 'hash'> {\n id?: string;\n hash?: string;\n rawFile: RawFile;\n}\n\ninterface AddAssetStepProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const AddAssetStep = ({ onClose, onAddAsset, trackedLocation }: AddAssetStepProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <>\n <Modal.Header>\n <Modal.Title>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Modal.Title>\n </Modal.Header>\n <Tabs.Root variant=\"simple\" defaultValue=\"computer\">\n <Box paddingLeft={8} paddingRight={8} paddingTop={6}>\n <Tabs.List\n aria-label={formatMessage({\n id: getTrad('tabs.title'),\n defaultMessage: 'How do you want to upload your assets?',\n })}\n >\n <Tabs.Trigger value=\"computer\">\n {formatMessage({\n id: getTrad('modal.nav.computer'),\n defaultMessage: 'From computer',\n })}\n </Tabs.Trigger>\n <Tabs.Trigger value=\"url\">\n {formatMessage({\n id: getTrad('modal.nav.url'),\n defaultMessage: 'From URL',\n })}\n </Tabs.Trigger>\n </Tabs.List>\n\n <Divider />\n </Box>\n <Tabs.Content value=\"computer\">\n <FromComputerForm\n onClose={onClose}\n onAddAssets={onAddAsset}\n trackedLocation={trackedLocation}\n />\n </Tabs.Content>\n <Tabs.Content value=\"url\">\n <FromUrlForm\n onClose={onClose}\n onAddAsset={onAddAsset}\n trackedLocation={trackedLocation}\n />\n </Tabs.Content>\n </Tabs.Root>\n </>\n );\n};\n"],"names":["AddAssetStep","onClose","onAddAsset","trackedLocation","formatMessage","useIntl","_jsxs","_Fragment","_jsx","Modal","Header","Title","id","getTrad","defaultMessage","Tabs","Root","variant","defaultValue","Box","paddingLeft","paddingRight","paddingTop","List","aria-label","Trigger","value","Divider","Content","FromComputerForm","onAddAssets","FromUrlForm"],"mappings":";;;;;;;;;;;;AAsBO,MAAMA,eAAe,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,eAAe,EAAqB,GAAA;IACtF,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,IAAA,CAAAC,QAAA,EAAA;;AACE,0BAAAC,GAAA,CAACC,MAAMC,MAAM,EAAA;wCACXF,GAAA,CAACC,MAAME,KAAK,EAAA;8BACTP,aAAc,CAAA;AACbQ,wBAAAA,EAAAA,EAAIC,OAAQ,CAAA,2BAAA,CAAA;wBACZC,cAAgB,EAAA;AAClB,qBAAA;;;AAGJ,0BAAAR,IAAA,CAACS,KAAKC,IAAI,EAAA;gBAACC,OAAQ,EAAA,QAAA;gBAASC,YAAa,EAAA,UAAA;;kCACvCZ,IAACa,CAAAA,GAAAA,EAAAA;wBAAIC,WAAa,EAAA,CAAA;wBAAGC,YAAc,EAAA,CAAA;wBAAGC,UAAY,EAAA,CAAA;;AAChD,0CAAAhB,IAAA,CAACS,KAAKQ,IAAI,EAAA;AACRC,gCAAAA,YAAAA,EAAYpB,aAAc,CAAA;AACxBQ,oCAAAA,EAAAA,EAAIC,OAAQ,CAAA,YAAA,CAAA;oCACZC,cAAgB,EAAA;AAClB,iCAAA,CAAA;;AAEA,kDAAAN,GAAA,CAACO,KAAKU,OAAO,EAAA;wCAACC,KAAM,EAAA,UAAA;kDACjBtB,aAAc,CAAA;AACbQ,4CAAAA,EAAAA,EAAIC,OAAQ,CAAA,oBAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;AAEF,kDAAAN,GAAA,CAACO,KAAKU,OAAO,EAAA;wCAACC,KAAM,EAAA,KAAA;kDACjBtB,aAAc,CAAA;AACbQ,4CAAAA,EAAAA,EAAIC,OAAQ,CAAA,eAAA,CAAA;4CACZC,cAAgB,EAAA;AAClB,yCAAA;;;;0CAIJN,GAACmB,CAAAA,OAAAA,EAAAA,EAAAA;;;AAEH,kCAAAnB,GAAA,CAACO,KAAKa,OAAO,EAAA;wBAACF,KAAM,EAAA,UAAA;AAClB,wBAAA,QAAA,gBAAAlB,GAACqB,CAAAA,gBAAAA,EAAAA;4BACC5B,OAASA,EAAAA,OAAAA;4BACT6B,WAAa5B,EAAAA,UAAAA;4BACbC,eAAiBA,EAAAA;;;AAGrB,kCAAAK,GAAA,CAACO,KAAKa,OAAO,EAAA;wBAACF,KAAM,EAAA,KAAA;AAClB,wBAAA,QAAA,gBAAAlB,GAACuB,CAAAA,WAAAA,EAAAA;4BACC9B,OAASA,EAAAA,OAAAA;4BACTC,UAAYA,EAAAA,UAAAA;4BACZC,eAAiBA,EAAAA;;;;;;;AAM7B;;;;"}
@@ -0,0 +1,203 @@
'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 styledComponents = require('styled-components');
var constants = require('../../../constants.js');
require('byte-size');
require('date-fns');
var getTrad = require('../../../utils/getTrad.js');
require('qs');
var rawFileToAsset = require('../../../utils/rawFileToAsset.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 Wrapper = styledComponents.styled(designSystem.Flex)`
flex-direction: column;
`;
const IconWrapper = styledComponents.styled.div`
font-size: 6rem;
svg path {
fill: ${({ theme })=>theme.colors.primary600};
}
`;
const MediaBox = styledComponents.styled(designSystem.Box)`
border-style: dashed;
`;
const OpaqueBox = styledComponents.styled(designSystem.Box)`
opacity: 0;
cursor: pointer;
`;
const FromComputerForm = ({ onClose, onAddAssets, trackedLocation })=>{
const { formatMessage } = reactIntl.useIntl();
const [dragOver, setDragOver] = React__namespace.useState(false);
const inputRef = React__namespace.useRef(null);
const { trackUsage } = strapiAdmin.useTracking();
const handleDragOver = (event)=>{
event.preventDefault();
};
const handleDragEnter = (event)=>{
event.preventDefault();
setDragOver(true);
};
const handleDragLeave = ()=>setDragOver(false);
const handleClick = (e)=>{
e.preventDefault();
inputRef.current?.click();
};
const handleChange = ()=>{
const files = inputRef.current?.files;
const assets = [];
if (files) {
for(let i = 0; i < files.length; i++){
const file = files.item(i);
if (file) {
const asset = rawFileToAsset.rawFileToAsset(file, constants.AssetSource.Computer);
assets.push(asset);
}
}
}
if (trackedLocation) {
trackUsage('didSelectFile', {
source: 'computer',
location: trackedLocation
});
}
onAddAssets(assets);
};
const handleDrop = (e)=>{
e.preventDefault();
if (e?.dataTransfer?.files) {
const files = e.dataTransfer.files;
const assets = [];
for(let i = 0; i < files.length; i++){
const file = files.item(i);
if (file) {
const asset = rawFileToAsset.rawFileToAsset(file, constants.AssetSource.Computer);
assets.push(asset);
}
}
onAddAssets(assets);
}
setDragOver(false);
};
return /*#__PURE__*/ jsxRuntime.jsxs("form", {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingLeft: 8,
paddingRight: 8,
paddingTop: 6,
paddingBottom: 6,
children: /*#__PURE__*/ jsxRuntime.jsx("label", {
children: /*#__PURE__*/ jsxRuntime.jsx(MediaBox, {
paddingTop: 11,
paddingBottom: 11,
hasRadius: true,
justifyContent: "center",
borderColor: dragOver ? 'primary500' : 'neutral300',
background: dragOver ? 'primary100' : 'neutral100',
position: "relative",
onDragEnter: handleDragEnter,
onDragLeave: handleDragLeave,
onDragOver: handleDragOver,
onDrop: handleDrop,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
justifyContent: "center",
children: /*#__PURE__*/ jsxRuntime.jsxs(Wrapper, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(IconWrapper, {
children: /*#__PURE__*/ jsxRuntime.jsx(icons.PlusCircle, {
"aria-hidden": true,
width: "3.2rem",
height: "3.2rem"
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingTop: 3,
paddingBottom: 5,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
variant: "delta",
textColor: "neutral600",
tag: "span",
children: formatMessage({
id: getTrad.getTrad('input.label'),
defaultMessage: 'Drag & Drop here or'
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(OpaqueBox, {
tag: "input",
position: "absolute",
left: 0,
right: 0,
bottom: 0,
top: 0,
width: "100%",
type: "file",
multiple: true,
name: "files",
"aria-label": formatMessage({
id: getTrad.getTrad('input.label'),
defaultMessage: 'Drag & Drop here or'
}),
tabIndex: -1,
ref: inputRef,
zIndex: 1,
onChange: handleChange
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
position: "relative",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
type: "button",
onClick: handleClick,
children: formatMessage({
id: getTrad.getTrad('input.button.label'),
defaultMessage: 'Browse files'
})
})
})
]
})
})
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Footer, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: onClose,
variant: "tertiary",
children: formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'cancel'
})
})
})
]
});
};
exports.FromComputerForm = FromComputerForm;
//# sourceMappingURL=FromComputerForm.js.map
@@ -0,0 +1 @@
{"version":3,"file":"FromComputerForm.js","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Flex, Modal, Typography } from '@strapi/design-system';\nimport { PlusCircle as PicturePlus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetSource } from '../../../constants';\nimport { getTrad, rawFileToAsset } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\nconst Wrapper = styled(Flex)`\n flex-direction: column;\n`;\n\nconst IconWrapper = styled.div`\n font-size: 6rem;\n\n svg path {\n fill: ${({ theme }) => theme.colors.primary600};\n }\n`;\n\nconst MediaBox = styled(Box)`\n border-style: dashed;\n`;\n\nconst OpaqueBox = styled(Box)`\n opacity: 0;\n cursor: pointer;\n`;\n\ninterface FromComputerFormProps {\n onClose: () => void;\n onAddAssets: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromComputerForm = ({\n onClose,\n onAddAssets,\n trackedLocation,\n}: FromComputerFormProps) => {\n const { formatMessage } = useIntl();\n const [dragOver, setDragOver] = React.useState(false);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const { trackUsage } = useTracking();\n\n const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n event.preventDefault();\n };\n\n const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {\n event.preventDefault();\n setDragOver(true);\n };\n\n const handleDragLeave = () => setDragOver(false);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n inputRef.current?.click();\n };\n\n const handleChange = () => {\n const files = inputRef.current?.files;\n const assets: FileWithRawFile[] = [];\n\n if (files) {\n for (let i = 0; i < files.length; i++) {\n const file = files.item(i);\n if (file) {\n const asset = rawFileToAsset(file, AssetSource.Computer);\n assets.push(asset);\n }\n }\n }\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'computer', location: trackedLocation });\n }\n\n onAddAssets(assets);\n };\n\n const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n if (e?.dataTransfer?.files) {\n const files = e.dataTransfer.files;\n const assets = [];\n\n for (let i = 0; i < files.length; i++) {\n const file = files.item(i);\n if (file) {\n const asset = rawFileToAsset(file, AssetSource.Computer);\n assets.push(asset);\n }\n }\n\n onAddAssets(assets);\n }\n\n setDragOver(false);\n };\n\n return (\n <form>\n <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>\n <label>\n <MediaBox\n paddingTop={11}\n paddingBottom={11}\n hasRadius\n justifyContent=\"center\"\n borderColor={dragOver ? 'primary500' : 'neutral300'}\n background={dragOver ? 'primary100' : 'neutral100'}\n position=\"relative\"\n onDragEnter={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n >\n <Flex justifyContent=\"center\">\n <Wrapper>\n <IconWrapper>\n <PicturePlus aria-hidden width=\"3.2rem\" height=\"3.2rem\" />\n </IconWrapper>\n\n <Box paddingTop={3} paddingBottom={5}>\n <Typography variant=\"delta\" textColor=\"neutral600\" tag=\"span\">\n {formatMessage({\n id: getTrad('input.label'),\n defaultMessage: 'Drag & Drop here or',\n })}\n </Typography>\n </Box>\n\n <OpaqueBox\n tag=\"input\"\n position=\"absolute\"\n left={0}\n right={0}\n bottom={0}\n top={0}\n width=\"100%\"\n type=\"file\"\n multiple\n name=\"files\"\n aria-label={formatMessage({\n id: getTrad('input.label'),\n defaultMessage: 'Drag & Drop here or',\n })}\n tabIndex={-1}\n ref={inputRef}\n zIndex={1}\n onChange={handleChange}\n />\n\n <Box position=\"relative\">\n <Button type=\"button\" onClick={handleClick}>\n {formatMessage({\n id: getTrad('input.button.label'),\n Line truncated
@@ -0,0 +1,182 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useTracking } from '@strapi/admin/strapi-admin';
import { Flex, Box, Typography, Button, Modal } from '@strapi/design-system';
import { PlusCircle } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import { AssetSource } from '../../../constants.mjs';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../../utils/getTrad.mjs';
import 'qs';
import { rawFileToAsset } from '../../../utils/rawFileToAsset.mjs';
import '../../../utils/urlYupSchema.mjs';
const Wrapper = styled(Flex)`
flex-direction: column;
`;
const IconWrapper = styled.div`
font-size: 6rem;
svg path {
fill: ${({ theme })=>theme.colors.primary600};
}
`;
const MediaBox = styled(Box)`
border-style: dashed;
`;
const OpaqueBox = styled(Box)`
opacity: 0;
cursor: pointer;
`;
const FromComputerForm = ({ onClose, onAddAssets, trackedLocation })=>{
const { formatMessage } = useIntl();
const [dragOver, setDragOver] = React.useState(false);
const inputRef = React.useRef(null);
const { trackUsage } = useTracking();
const handleDragOver = (event)=>{
event.preventDefault();
};
const handleDragEnter = (event)=>{
event.preventDefault();
setDragOver(true);
};
const handleDragLeave = ()=>setDragOver(false);
const handleClick = (e)=>{
e.preventDefault();
inputRef.current?.click();
};
const handleChange = ()=>{
const files = inputRef.current?.files;
const assets = [];
if (files) {
for(let i = 0; i < files.length; i++){
const file = files.item(i);
if (file) {
const asset = rawFileToAsset(file, AssetSource.Computer);
assets.push(asset);
}
}
}
if (trackedLocation) {
trackUsage('didSelectFile', {
source: 'computer',
location: trackedLocation
});
}
onAddAssets(assets);
};
const handleDrop = (e)=>{
e.preventDefault();
if (e?.dataTransfer?.files) {
const files = e.dataTransfer.files;
const assets = [];
for(let i = 0; i < files.length; i++){
const file = files.item(i);
if (file) {
const asset = rawFileToAsset(file, AssetSource.Computer);
assets.push(asset);
}
}
onAddAssets(assets);
}
setDragOver(false);
};
return /*#__PURE__*/ jsxs("form", {
children: [
/*#__PURE__*/ jsx(Box, {
paddingLeft: 8,
paddingRight: 8,
paddingTop: 6,
paddingBottom: 6,
children: /*#__PURE__*/ jsx("label", {
children: /*#__PURE__*/ jsx(MediaBox, {
paddingTop: 11,
paddingBottom: 11,
hasRadius: true,
justifyContent: "center",
borderColor: dragOver ? 'primary500' : 'neutral300',
background: dragOver ? 'primary100' : 'neutral100',
position: "relative",
onDragEnter: handleDragEnter,
onDragLeave: handleDragLeave,
onDragOver: handleDragOver,
onDrop: handleDrop,
children: /*#__PURE__*/ jsx(Flex, {
justifyContent: "center",
children: /*#__PURE__*/ jsxs(Wrapper, {
children: [
/*#__PURE__*/ jsx(IconWrapper, {
children: /*#__PURE__*/ jsx(PlusCircle, {
"aria-hidden": true,
width: "3.2rem",
height: "3.2rem"
})
}),
/*#__PURE__*/ jsx(Box, {
paddingTop: 3,
paddingBottom: 5,
children: /*#__PURE__*/ jsx(Typography, {
variant: "delta",
textColor: "neutral600",
tag: "span",
children: formatMessage({
id: getTrad('input.label'),
defaultMessage: 'Drag & Drop here or'
})
})
}),
/*#__PURE__*/ jsx(OpaqueBox, {
tag: "input",
position: "absolute",
left: 0,
right: 0,
bottom: 0,
top: 0,
width: "100%",
type: "file",
multiple: true,
name: "files",
"aria-label": formatMessage({
id: getTrad('input.label'),
defaultMessage: 'Drag & Drop here or'
}),
tabIndex: -1,
ref: inputRef,
zIndex: 1,
onChange: handleChange
}),
/*#__PURE__*/ jsx(Box, {
position: "relative",
children: /*#__PURE__*/ jsx(Button, {
type: "button",
onClick: handleClick,
children: formatMessage({
id: getTrad('input.button.label'),
defaultMessage: 'Browse files'
})
})
})
]
})
})
})
})
}),
/*#__PURE__*/ jsx(Modal.Footer, {
children: /*#__PURE__*/ jsx(Button, {
onClick: onClose,
variant: "tertiary",
children: formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'cancel'
})
})
})
]
});
};
export { FromComputerForm };
//# sourceMappingURL=FromComputerForm.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"FromComputerForm.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Flex, Modal, Typography } from '@strapi/design-system';\nimport { PlusCircle as PicturePlus } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetSource } from '../../../constants';\nimport { getTrad, rawFileToAsset } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\nconst Wrapper = styled(Flex)`\n flex-direction: column;\n`;\n\nconst IconWrapper = styled.div`\n font-size: 6rem;\n\n svg path {\n fill: ${({ theme }) => theme.colors.primary600};\n }\n`;\n\nconst MediaBox = styled(Box)`\n border-style: dashed;\n`;\n\nconst OpaqueBox = styled(Box)`\n opacity: 0;\n cursor: pointer;\n`;\n\ninterface FromComputerFormProps {\n onClose: () => void;\n onAddAssets: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromComputerForm = ({\n onClose,\n onAddAssets,\n trackedLocation,\n}: FromComputerFormProps) => {\n const { formatMessage } = useIntl();\n const [dragOver, setDragOver] = React.useState(false);\n const inputRef = React.useRef<HTMLInputElement>(null);\n const { trackUsage } = useTracking();\n\n const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n event.preventDefault();\n };\n\n const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {\n event.preventDefault();\n setDragOver(true);\n };\n\n const handleDragLeave = () => setDragOver(false);\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n inputRef.current?.click();\n };\n\n const handleChange = () => {\n const files = inputRef.current?.files;\n const assets: FileWithRawFile[] = [];\n\n if (files) {\n for (let i = 0; i < files.length; i++) {\n const file = files.item(i);\n if (file) {\n const asset = rawFileToAsset(file, AssetSource.Computer);\n assets.push(asset);\n }\n }\n }\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'computer', location: trackedLocation });\n }\n\n onAddAssets(assets);\n };\n\n const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n\n if (e?.dataTransfer?.files) {\n const files = e.dataTransfer.files;\n const assets = [];\n\n for (let i = 0; i < files.length; i++) {\n const file = files.item(i);\n if (file) {\n const asset = rawFileToAsset(file, AssetSource.Computer);\n assets.push(asset);\n }\n }\n\n onAddAssets(assets);\n }\n\n setDragOver(false);\n };\n\n return (\n <form>\n <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>\n <label>\n <MediaBox\n paddingTop={11}\n paddingBottom={11}\n hasRadius\n justifyContent=\"center\"\n borderColor={dragOver ? 'primary500' : 'neutral300'}\n background={dragOver ? 'primary100' : 'neutral100'}\n position=\"relative\"\n onDragEnter={handleDragEnter}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n >\n <Flex justifyContent=\"center\">\n <Wrapper>\n <IconWrapper>\n <PicturePlus aria-hidden width=\"3.2rem\" height=\"3.2rem\" />\n </IconWrapper>\n\n <Box paddingTop={3} paddingBottom={5}>\n <Typography variant=\"delta\" textColor=\"neutral600\" tag=\"span\">\n {formatMessage({\n id: getTrad('input.label'),\n defaultMessage: 'Drag & Drop here or',\n })}\n </Typography>\n </Box>\n\n <OpaqueBox\n tag=\"input\"\n position=\"absolute\"\n left={0}\n right={0}\n bottom={0}\n top={0}\n width=\"100%\"\n type=\"file\"\n multiple\n name=\"files\"\n aria-label={formatMessage({\n id: getTrad('input.label'),\n defaultMessage: 'Drag & Drop here or',\n })}\n tabIndex={-1}\n ref={inputRef}\n zIndex={1}\n onChange={handleChange}\n />\n\n <Box position=\"relative\">\n <Button type=\"button\" onClick={handleClick}>\n {formatMessage({\n id: getTrad('input.button.label'),\nLine truncated
@@ -0,0 +1,127 @@
'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 reactIntl = require('react-intl');
require('byte-size');
require('date-fns');
var getTrad = require('../../../utils/getTrad.js');
require('qs');
require('../../../constants.js');
var urlsToAssets = require('../../../utils/urlsToAssets.js');
var urlYupSchema = 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 FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
const [loading, setLoading] = React__namespace.useState(false);
const [error, setError] = React__namespace.useState(undefined);
const { formatMessage } = reactIntl.useIntl();
const { trackUsage } = strapiAdmin.useTracking();
const handleSubmit = async ({ urls })=>{
setLoading(true);
const urlArray = urls.split(/\r?\n/);
try {
const assets = await urlsToAssets.urlsToAssets(urlArray);
if (trackedLocation) {
trackUsage('didSelectFile', {
source: 'url',
location: trackedLocation
});
}
// no need to set the loading to false since the component unmounts
onAddAsset(assets);
} catch (e) {
setError(e);
setLoading(false);
}
};
return /*#__PURE__*/ jsxRuntime.jsx(formik.Formik, {
enableReinitialize: true,
initialValues: {
urls: ''
},
onSubmit: handleSubmit,
validationSchema: urlYupSchema.urlSchema,
validateOnChange: false,
children: ({ values, errors, handleChange })=>/*#__PURE__*/ jsxRuntime.jsxs(formik.Form, {
noValidate: true,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingLeft: 8,
paddingRight: 8,
paddingBottom: 6,
paddingTop: 6,
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
hint: formatMessage({
id: getTrad.getTrad('input.url.description'),
defaultMessage: 'Separate your URL links by a carriage return.'
}),
error: error?.message || (errors.urls ? formatMessage({
id: errors.urls,
defaultMessage: 'An error occured'
}) : undefined),
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
children: formatMessage({
id: getTrad.getTrad('input.url.label'),
defaultMessage: 'URL'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Textarea, {
name: "urls",
onChange: handleChange,
value: values.urls
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Hint, {}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Error, {})
]
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Footer, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: onClose,
variant: "tertiary",
children: formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'cancel'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
type: "submit",
loading: loading,
children: formatMessage({
id: getTrad.getTrad('button.next'),
defaultMessage: 'Next'
})
})
]
})
]
})
});
};
exports.FromUrlForm = FromUrlForm;
//# sourceMappingURL=FromUrlForm.js.map
@@ -0,0 +1 @@
{"version":3,"file":"FromUrlForm.js","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState<Error | undefined>(undefined);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const handleSubmit = async ({ urls }: { urls: string }) => {\n setLoading(true);\n const urlArray = urls.split(/\\r?\\n/);\n try {\n const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n }\n\n // no need to set the loading to false since the component unmounts\n onAddAsset(assets);\n } catch (e: unknown) {\n setError(e as Error);\n setLoading(false);\n }\n };\n\n return (\n <Formik\n enableReinitialize\n initialValues={{\n urls: '',\n }}\n onSubmit={handleSubmit}\n validationSchema={urlSchema}\n validateOnChange={false}\n >\n {({ values, errors, handleChange }) => (\n <Form noValidate>\n <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n <Field.Root\n hint={formatMessage({\n id: getTrad('input.url.description'),\n defaultMessage: 'Separate your URL links by a carriage return.',\n })}\n error={\n error?.message ||\n (errors.urls\n ? formatMessage({ id: errors.urls, defaultMessage: 'An error occured' })\n : undefined)\n }\n >\n <Field.Label>\n {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n </Field.Label>\n <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n <Field.Hint />\n <Field.Error />\n </Field.Root>\n </Box>\n\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {formatMessage({\n id: getTrad('button.next'),\n defaultMessage: 'Next',\n })}\n </Button>\n </Modal.Footer>\n </Form>\n )}\n </Formik>\n );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,eAAe,EAAoB,GAAA;AACpF,IAAA,MAAM,CAACC,OAASC,EAAAA,UAAAA,CAAW,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,KAAOC,EAAAA,QAAAA,CAAS,GAAGH,gBAAAA,CAAMC,QAAQ,CAAoBG,SAAAA,CAAAA;IAC5D,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,uBAAAA,EAAAA;AAEvB,IAAA,MAAMC,YAAe,GAAA,OAAO,EAAEC,IAAI,EAAoB,GAAA;QACpDX,UAAW,CAAA,IAAA,CAAA;QACX,MAAMY,QAAAA,GAAWD,IAAKE,CAAAA,KAAK,CAAC,OAAA,CAAA;QAC5B,IAAI;YACF,MAAMC,MAAAA,GAA4B,MAAMC,yBAAaH,CAAAA,QAAAA,CAAAA;AAErD,YAAA,IAAId,eAAiB,EAAA;AACnBU,gBAAAA,UAAAA,CAAW,eAAiB,EAAA;oBAAEQ,MAAQ,EAAA,KAAA;oBAAOC,QAAUnB,EAAAA;AAAgB,iBAAA,CAAA;AACzE;;YAGAD,UAAWiB,CAAAA,MAAAA,CAAAA;AACb,SAAA,CAAE,OAAOI,CAAY,EAAA;YACnBd,QAASc,CAAAA,CAAAA,CAAAA;YACTlB,UAAW,CAAA,KAAA,CAAA;AACb;AACF,KAAA;AAEA,IAAA,qBACEmB,cAACC,CAAAA,aAAAA,EAAAA;QACCC,kBAAkB,EAAA,IAAA;QAClBC,aAAe,EAAA;YACbX,IAAM,EAAA;AACR,SAAA;QACAY,QAAUb,EAAAA,YAAAA;QACVc,gBAAkBC,EAAAA,sBAAAA;QAClBC,gBAAkB,EAAA,KAAA;kBAEjB,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAEC,YAAY,EAAE,iBAChCC,eAACC,CAAAA,WAAALine truncated
@@ -0,0 +1,106 @@
import { jsx, jsxs } from 'react/jsx-runtime';
import * as React from 'react';
import { useTracking } from '@strapi/admin/strapi-admin';
import { Box, Field, Textarea, Modal, Button } from '@strapi/design-system';
import { Formik, Form } from 'formik';
import { useIntl } from 'react-intl';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../../utils/getTrad.mjs';
import 'qs';
import '../../../constants.mjs';
import { urlsToAssets } from '../../../utils/urlsToAssets.mjs';
import { urlSchema } from '../../../utils/urlYupSchema.mjs';
const FromUrlForm = ({ onClose, onAddAsset, trackedLocation })=>{
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(undefined);
const { formatMessage } = useIntl();
const { trackUsage } = useTracking();
const handleSubmit = async ({ urls })=>{
setLoading(true);
const urlArray = urls.split(/\r?\n/);
try {
const assets = await urlsToAssets(urlArray);
if (trackedLocation) {
trackUsage('didSelectFile', {
source: 'url',
location: trackedLocation
});
}
// no need to set the loading to false since the component unmounts
onAddAsset(assets);
} catch (e) {
setError(e);
setLoading(false);
}
};
return /*#__PURE__*/ jsx(Formik, {
enableReinitialize: true,
initialValues: {
urls: ''
},
onSubmit: handleSubmit,
validationSchema: urlSchema,
validateOnChange: false,
children: ({ values, errors, handleChange })=>/*#__PURE__*/ jsxs(Form, {
noValidate: true,
children: [
/*#__PURE__*/ jsx(Box, {
paddingLeft: 8,
paddingRight: 8,
paddingBottom: 6,
paddingTop: 6,
children: /*#__PURE__*/ jsxs(Field.Root, {
hint: formatMessage({
id: getTrad('input.url.description'),
defaultMessage: 'Separate your URL links by a carriage return.'
}),
error: error?.message || (errors.urls ? formatMessage({
id: errors.urls,
defaultMessage: 'An error occured'
}) : undefined),
children: [
/*#__PURE__*/ jsx(Field.Label, {
children: formatMessage({
id: getTrad('input.url.label'),
defaultMessage: 'URL'
})
}),
/*#__PURE__*/ jsx(Textarea, {
name: "urls",
onChange: handleChange,
value: values.urls
}),
/*#__PURE__*/ jsx(Field.Hint, {}),
/*#__PURE__*/ jsx(Field.Error, {})
]
})
}),
/*#__PURE__*/ jsxs(Modal.Footer, {
children: [
/*#__PURE__*/ jsx(Button, {
onClick: onClose,
variant: "tertiary",
children: formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'cancel'
})
}),
/*#__PURE__*/ jsx(Button, {
type: "submit",
loading: loading,
children: formatMessage({
id: getTrad('button.next'),
defaultMessage: 'Next'
})
})
]
})
]
})
});
};
export { FromUrlForm };
//# sourceMappingURL=FromUrlForm.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"FromUrlForm.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/AddAssetStep/FromUrlForm.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Box, Button, Field, Modal, Textarea } from '@strapi/design-system';\nimport { Form, Formik } from 'formik';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad, urlsToAssets, urlSchema } from '../../../utils';\n\nimport type { FileWithRawFile } from './AddAssetStep';\n\ninterface FromUrlFormProps {\n onClose: () => void;\n onAddAsset: (assets: FileWithRawFile[]) => void;\n trackedLocation?: string;\n}\n\nexport const FromUrlForm = ({ onClose, onAddAsset, trackedLocation }: FromUrlFormProps) => {\n const [loading, setLoading] = React.useState(false);\n const [error, setError] = React.useState<Error | undefined>(undefined);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n\n const handleSubmit = async ({ urls }: { urls: string }) => {\n setLoading(true);\n const urlArray = urls.split(/\\r?\\n/);\n try {\n const assets: FileWithRawFile[] = await urlsToAssets(urlArray);\n\n if (trackedLocation) {\n trackUsage('didSelectFile', { source: 'url', location: trackedLocation });\n }\n\n // no need to set the loading to false since the component unmounts\n onAddAsset(assets);\n } catch (e: unknown) {\n setError(e as Error);\n setLoading(false);\n }\n };\n\n return (\n <Formik\n enableReinitialize\n initialValues={{\n urls: '',\n }}\n onSubmit={handleSubmit}\n validationSchema={urlSchema}\n validateOnChange={false}\n >\n {({ values, errors, handleChange }) => (\n <Form noValidate>\n <Box paddingLeft={8} paddingRight={8} paddingBottom={6} paddingTop={6}>\n <Field.Root\n hint={formatMessage({\n id: getTrad('input.url.description'),\n defaultMessage: 'Separate your URL links by a carriage return.',\n })}\n error={\n error?.message ||\n (errors.urls\n ? formatMessage({ id: errors.urls, defaultMessage: 'An error occured' })\n : undefined)\n }\n >\n <Field.Label>\n {formatMessage({ id: getTrad('input.url.label'), defaultMessage: 'URL' })}\n </Field.Label>\n <Textarea name=\"urls\" onChange={handleChange} value={values.urls} />\n <Field.Hint />\n <Field.Error />\n </Field.Root>\n </Box>\n\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'cancel' })}\n </Button>\n <Button type=\"submit\" loading={loading}>\n {formatMessage({\n id: getTrad('button.next'),\n defaultMessage: 'Next',\n })}\n </Button>\n </Modal.Footer>\n </Form>\n )}\n </Formik>\n );\n};\n"],"names":["FromUrlForm","onClose","onAddAsset","trackedLocation","loading","setLoading","React","useState","error","setError","undefined","formatMessage","useIntl","trackUsage","useTracking","handleSubmit","urls","urlArray","split","assets","urlsToAssets","source","location","e","_jsx","Formik","enableReinitialize","initialValues","onSubmit","validationSchema","urlSchema","validateOnChange","values","errors","handleChange","_jsxs","Form","noValidate","Box","paddingLeft","paddingRight","paddingBottom","paddingTop","Field","Root","hint","id","getTrad","defaultMessage","message","Label","Textarea","name","onChange","value","Hint","Error","Modal","Footer","Button","onClick","variant","type"],"mappings":";;;;;;;;;;;;;;AAiBO,MAAMA,cAAc,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAEC,eAAe,EAAoB,GAAA;AACpF,IAAA,MAAM,CAACC,OAASC,EAAAA,UAAAA,CAAW,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAC7C,IAAA,MAAM,CAACC,KAAOC,EAAAA,QAAAA,CAAS,GAAGH,KAAAA,CAAMC,QAAQ,CAAoBG,SAAAA,CAAAA;IAC5D,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAC1B,MAAM,EAAEC,UAAU,EAAE,GAAGC,WAAAA,EAAAA;AAEvB,IAAA,MAAMC,YAAe,GAAA,OAAO,EAAEC,IAAI,EAAoB,GAAA;QACpDX,UAAW,CAAA,IAAA,CAAA;QACX,MAAMY,QAAAA,GAAWD,IAAKE,CAAAA,KAAK,CAAC,OAAA,CAAA;QAC5B,IAAI;YACF,MAAMC,MAAAA,GAA4B,MAAMC,YAAaH,CAAAA,QAAAA,CAAAA;AAErD,YAAA,IAAId,eAAiB,EAAA;AACnBU,gBAAAA,UAAAA,CAAW,eAAiB,EAAA;oBAAEQ,MAAQ,EAAA,KAAA;oBAAOC,QAAUnB,EAAAA;AAAgB,iBAAA,CAAA;AACzE;;YAGAD,UAAWiB,CAAAA,MAAAA,CAAAA;AACb,SAAA,CAAE,OAAOI,CAAY,EAAA;YACnBd,QAASc,CAAAA,CAAAA,CAAAA;YACTlB,UAAW,CAAA,KAAA,CAAA;AACb;AACF,KAAA;AAEA,IAAA,qBACEmB,GAACC,CAAAA,MAAAA,EAAAA;QACCC,kBAAkB,EAAA,IAAA;QAClBC,aAAe,EAAA;YACbX,IAAM,EAAA;AACR,SAAA;QACAY,QAAUb,EAAAA,YAAAA;QACVc,gBAAkBC,EAAAA,SAAAA;QAClBC,gBAAkB,EAAA,KAAA;kBAEjB,CAAC,EAAEC,MAAM,EAAEC,MAAM,EAAEC,YAAY,EAAE,iBAChCC,IAACC,CAAAA,IAAAA,EAAAA;gBAAKC,UAAU,EAAA,ILine truncated
@@ -0,0 +1,206 @@
'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');
var AssetCard = require('../../AssetCard/AssetCard.js');
var UploadingAssetCard = require('../../AssetCard/UploadingAssetCard.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 Status = {
Idle: 'IDLE',
Uploading: 'UPLOADING',
Intermediate: 'INTERMEDIATE'
};
const PendingAssetStep = ({ addUploadedFiles, folderId, onClose, onEditAsset, onRemoveAsset, assets, onClickAddAsset, onCancelUpload, onUploadSucceed, trackedLocation })=>{
const assetCountRef = React__namespace.useRef(0);
const { formatMessage } = reactIntl.useIntl();
const { trackUsage } = strapiAdmin.useTracking();
const [uploadStatus, setUploadStatus] = React__namespace.useState(Status.Idle);
const handleSubmit = async (e)=>{
e.preventDefault();
e.stopPropagation();
const assetsCountByType = assets.reduce((acc, asset)=>{
const { type } = asset;
if (type !== undefined && !acc[type]) {
acc[type] = 0;
}
if (type !== undefined) {
const accType = acc[type];
const currentCount = typeof accType === 'string' ? accType : accType.toString();
acc[type] = `${parseInt(currentCount, 10) + 1}`;
}
return acc;
}, {});
trackUsage('willAddMediaLibraryAssets', {
location: trackedLocation,
...assetsCountByType
});
setUploadStatus(Status.Uploading);
};
const handleStatusChange = (status, file)=>{
if (status === 'success' || status === 'error') {
assetCountRef.current++;
// There's no "terminated" status. When all the files have called their
// onUploadSucceed callback, the parent component filters the asset list
// and closes the modal when the asset list is empty
if (assetCountRef.current === assets.length) {
assetCountRef.current = 0;
setUploadStatus(Status.Intermediate);
}
}
if (status === 'success') {
onUploadSucceed(file);
}
};
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
children: formatMessage({
id: getTrad.getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
direction: "column",
alignItems: "stretch",
gap: 7,
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
justifyContent: "space-between",
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
direction: "column",
alignItems: "stretch",
gap: 0,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
variant: "pi",
fontWeight: "bold",
textColor: "neutral800",
children: formatMessage({
id: getTrad.getTrad('list.assets.to-upload'),
defaultMessage: '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
}, {
number: assets.length
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
variant: "pi",
textColor: "neutral600",
children: formatMessage({
id: getTrad.getTrad('modal.upload-list.sub-header-subtitle'),
defaultMessage: 'Manage the assets before adding them to the Media Library'
})
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
size: "S",
onClick: onClickAddAsset,
children: formatMessage({
id: getTrad.getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.KeyboardNavigable, {
tagName: "article",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
gap: 4,
children: assets.map((asset)=>{
const assetKey = asset.url;
if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
col: 4,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsx(UploadingAssetCard.UploadingAssetCard, {
// Props used to store the newly uploaded files
addUploadedFiles: addUploadedFiles,
asset: asset,
id: assetKey,
onCancel: onCancelUpload,
onStatusChange: (status)=>handleStatusChange(status, asset.rawFile),
size: "S",
folderId: folderId
})
}, assetKey);
}
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
col: 4,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
asset: asset,
size: "S",
local: true,
alt: asset.name,
onEdit: onEditAsset,
onRemove: onRemoveAsset
}, assetKey)
}, assetKey);
})
})
})
]
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Footer, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: onClose,
variant: "tertiary",
children: formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'cancel'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: handleSubmit,
loading: uploadStatus === Status.Uploading,
children: formatMessage({
id: getTrad.getTrad('modal.upload-list.footer.button'),
defaultMessage: 'Upload {number, plural, one {# asset} other {# assets}} to the library'
}, {
number: assets.length
})
})
]
})
]
});
};
exports.PendingAssetStep = PendingAssetStep;
//# sourceMappingURL=PendingAssetStep.js.map
@@ -0,0 +1 @@
{"version":3,"file":"PendingAssetStep.js","sources":["../../../../../admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Button, Flex, Grid, KeyboardNavigable, Modal, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { getTrad } from '../../../utils';\nimport { AssetCard } from '../../AssetCard/AssetCard';\nimport { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';\n\nimport type { File, RawFile } from '../../../../../shared/contracts/files';\n\nconst Status = {\n Idle: 'IDLE',\n Uploading: 'UPLOADING',\n Intermediate: 'INTERMEDIATE',\n};\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\ninterface PendingAssetStepProps {\n addUploadedFiles?: (files: File[]) => void;\n folderId?: string | number | null;\n onClose: () => void;\n onEditAsset: (asset: File) => void;\n onRemoveAsset: (asset: File) => void;\n onAddAsset?: (asset: File) => void;\n assets: Asset[];\n onClickAddAsset: () => void;\n onCancelUpload: (rawFile: RawFile) => void;\n onUploadSucceed: (file: RawFile) => void;\n trackedLocation?: string;\n initialAssetsToAdd?: File[];\n}\n\nexport const PendingAssetStep = ({\n addUploadedFiles,\n folderId,\n onClose,\n onEditAsset,\n onRemoveAsset,\n assets,\n onClickAddAsset,\n onCancelUpload,\n onUploadSucceed,\n trackedLocation,\n}: PendingAssetStepProps) => {\n const assetCountRef = React.useRef(0);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);\n\n const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n const assetsCountByType = assets.reduce(\n (acc: Record<AssetType, string | number>, asset) => {\n const { type } = asset;\n\n if (type !== undefined && !acc[type]) {\n acc[type] = 0;\n }\n\n if (type !== undefined) {\n const accType = acc[type];\n const currentCount = typeof accType === 'string' ? accType : accType.toString();\n acc[type] = `${parseInt(currentCount, 10) + 1}`;\n }\n\n return acc;\n },\n {} as Record<AssetType, string | number>\n );\n\n trackUsage('willAddMediaLibraryAssets', {\n location: trackedLocation!,\n ...assetsCountByType,\n });\n\n setUploadStatus(Status.Uploading);\n };\n\n const handleStatusChange = (status: string, file: RawFile) => {\n if (status === 'success' || status === 'error') {\n assetCountRef.current++;\n\n // There's no \"terminated\" status. When all the files have called their\n // onUploadSucceed callback, the parent component filters the asset list\n // and closes the modal when the asset list is empty\n if (assetCountRef.current === assets.length) {\n assetCountRef.current = 0;\n setUploadStatus(Status.Intermediate);\n }\n }\n\n if (status === 'success') {\n onUploadSucceed(file);\n }\n };\n\n return (\n <>\n <Modal.Header>\n <Modal.Title>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Modal.Title>\n </Modal.Header>\n\n <Modal.Body>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={7}>\n <Flex justifyContent=\"space-between\">\n <Flex direction=\"column\" alignItems=\"stretch\" gap={0}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n {formatMessage(\n {\n id: getTrad('list.assets.to-upload'),\n defaultMessage:\n '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n },\n { number: assets.length }\n )}\n </Typography>\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('modal.upload-list.sub-header-subtitle'),\n defaultMessage: 'Manage the assets before adding them to the Media Library',\n })}\n </Typography>\n </Flex>\n <Button size=\"S\" onClick={onClickAddAsset}>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Button>\n </Flex>\n <KeyboardNavigable tagName=\"article\">\n <Grid.Root gap={4}>\n {assets.map((asset) => {\n const assetKey = asset.url;\n\n if (uploadStatus ===Line truncated
@@ -0,0 +1,185 @@
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useTracking } from '@strapi/admin/strapi-admin';
import { Modal, Flex, Typography, Button, KeyboardNavigable, Grid } 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';
import { AssetCard } from '../../AssetCard/AssetCard.mjs';
import { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard.mjs';
const Status = {
Idle: 'IDLE',
Uploading: 'UPLOADING',
Intermediate: 'INTERMEDIATE'
};
const PendingAssetStep = ({ addUploadedFiles, folderId, onClose, onEditAsset, onRemoveAsset, assets, onClickAddAsset, onCancelUpload, onUploadSucceed, trackedLocation })=>{
const assetCountRef = React.useRef(0);
const { formatMessage } = useIntl();
const { trackUsage } = useTracking();
const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);
const handleSubmit = async (e)=>{
e.preventDefault();
e.stopPropagation();
const assetsCountByType = assets.reduce((acc, asset)=>{
const { type } = asset;
if (type !== undefined && !acc[type]) {
acc[type] = 0;
}
if (type !== undefined) {
const accType = acc[type];
const currentCount = typeof accType === 'string' ? accType : accType.toString();
acc[type] = `${parseInt(currentCount, 10) + 1}`;
}
return acc;
}, {});
trackUsage('willAddMediaLibraryAssets', {
location: trackedLocation,
...assetsCountByType
});
setUploadStatus(Status.Uploading);
};
const handleStatusChange = (status, file)=>{
if (status === 'success' || status === 'error') {
assetCountRef.current++;
// There's no "terminated" status. When all the files have called their
// onUploadSucceed callback, the parent component filters the asset list
// and closes the modal when the asset list is empty
if (assetCountRef.current === assets.length) {
assetCountRef.current = 0;
setUploadStatus(Status.Intermediate);
}
}
if (status === 'success') {
onUploadSucceed(file);
}
};
return /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(Modal.Header, {
children: /*#__PURE__*/ jsx(Modal.Title, {
children: formatMessage({
id: getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
})
}),
/*#__PURE__*/ jsx(Modal.Body, {
children: /*#__PURE__*/ jsxs(Flex, {
direction: "column",
alignItems: "stretch",
gap: 7,
children: [
/*#__PURE__*/ jsxs(Flex, {
justifyContent: "space-between",
children: [
/*#__PURE__*/ jsxs(Flex, {
direction: "column",
alignItems: "stretch",
gap: 0,
children: [
/*#__PURE__*/ jsx(Typography, {
variant: "pi",
fontWeight: "bold",
textColor: "neutral800",
children: formatMessage({
id: getTrad('list.assets.to-upload'),
defaultMessage: '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload'
}, {
number: assets.length
})
}),
/*#__PURE__*/ jsx(Typography, {
variant: "pi",
textColor: "neutral600",
children: formatMessage({
id: getTrad('modal.upload-list.sub-header-subtitle'),
defaultMessage: 'Manage the assets before adding them to the Media Library'
})
})
]
}),
/*#__PURE__*/ jsx(Button, {
size: "S",
onClick: onClickAddAsset,
children: formatMessage({
id: getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
})
]
}),
/*#__PURE__*/ jsx(KeyboardNavigable, {
tagName: "article",
children: /*#__PURE__*/ jsx(Grid.Root, {
gap: 4,
children: assets.map((asset)=>{
const assetKey = asset.url;
if (uploadStatus === Status.Uploading || uploadStatus === Status.Intermediate) {
return /*#__PURE__*/ jsx(Grid.Item, {
col: 4,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsx(UploadingAssetCard, {
// Props used to store the newly uploaded files
addUploadedFiles: addUploadedFiles,
asset: asset,
id: assetKey,
onCancel: onCancelUpload,
onStatusChange: (status)=>handleStatusChange(status, asset.rawFile),
size: "S",
folderId: folderId
})
}, assetKey);
}
return /*#__PURE__*/ jsx(Grid.Item, {
col: 4,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsx(AssetCard, {
asset: asset,
size: "S",
local: true,
alt: asset.name,
onEdit: onEditAsset,
onRemove: onRemoveAsset
}, assetKey)
}, assetKey);
})
})
})
]
})
}),
/*#__PURE__*/ jsxs(Modal.Footer, {
children: [
/*#__PURE__*/ jsx(Button, {
onClick: onClose,
variant: "tertiary",
children: formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'cancel'
})
}),
/*#__PURE__*/ jsx(Button, {
onClick: handleSubmit,
loading: uploadStatus === Status.Uploading,
children: formatMessage({
id: getTrad('modal.upload-list.footer.button'),
defaultMessage: 'Upload {number, plural, one {# asset} other {# assets}} to the library'
}, {
number: assets.length
})
})
]
})
]
});
};
export { PendingAssetStep };
//# sourceMappingURL=PendingAssetStep.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"PendingAssetStep.mjs","sources":["../../../../../admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useTracking } from '@strapi/admin/strapi-admin';\nimport { Button, Flex, Grid, KeyboardNavigable, Modal, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { AssetType } from '../../../constants';\nimport { getTrad } from '../../../utils';\nimport { AssetCard } from '../../AssetCard/AssetCard';\nimport { UploadingAssetCard } from '../../AssetCard/UploadingAssetCard';\n\nimport type { File, RawFile } from '../../../../../shared/contracts/files';\n\nconst Status = {\n Idle: 'IDLE',\n Uploading: 'UPLOADING',\n Intermediate: 'INTERMEDIATE',\n};\n\ninterface Asset extends File {\n rawFile?: RawFile;\n type?: AssetType;\n}\n\ninterface PendingAssetStepProps {\n addUploadedFiles?: (files: File[]) => void;\n folderId?: string | number | null;\n onClose: () => void;\n onEditAsset: (asset: File) => void;\n onRemoveAsset: (asset: File) => void;\n onAddAsset?: (asset: File) => void;\n assets: Asset[];\n onClickAddAsset: () => void;\n onCancelUpload: (rawFile: RawFile) => void;\n onUploadSucceed: (file: RawFile) => void;\n trackedLocation?: string;\n initialAssetsToAdd?: File[];\n}\n\nexport const PendingAssetStep = ({\n addUploadedFiles,\n folderId,\n onClose,\n onEditAsset,\n onRemoveAsset,\n assets,\n onClickAddAsset,\n onCancelUpload,\n onUploadSucceed,\n trackedLocation,\n}: PendingAssetStepProps) => {\n const assetCountRef = React.useRef(0);\n const { formatMessage } = useIntl();\n const { trackUsage } = useTracking();\n const [uploadStatus, setUploadStatus] = React.useState(Status.Idle);\n\n const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {\n e.preventDefault();\n e.stopPropagation();\n\n const assetsCountByType = assets.reduce(\n (acc: Record<AssetType, string | number>, asset) => {\n const { type } = asset;\n\n if (type !== undefined && !acc[type]) {\n acc[type] = 0;\n }\n\n if (type !== undefined) {\n const accType = acc[type];\n const currentCount = typeof accType === 'string' ? accType : accType.toString();\n acc[type] = `${parseInt(currentCount, 10) + 1}`;\n }\n\n return acc;\n },\n {} as Record<AssetType, string | number>\n );\n\n trackUsage('willAddMediaLibraryAssets', {\n location: trackedLocation!,\n ...assetsCountByType,\n });\n\n setUploadStatus(Status.Uploading);\n };\n\n const handleStatusChange = (status: string, file: RawFile) => {\n if (status === 'success' || status === 'error') {\n assetCountRef.current++;\n\n // There's no \"terminated\" status. When all the files have called their\n // onUploadSucceed callback, the parent component filters the asset list\n // and closes the modal when the asset list is empty\n if (assetCountRef.current === assets.length) {\n assetCountRef.current = 0;\n setUploadStatus(Status.Intermediate);\n }\n }\n\n if (status === 'success') {\n onUploadSucceed(file);\n }\n };\n\n return (\n <>\n <Modal.Header>\n <Modal.Title>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Modal.Title>\n </Modal.Header>\n\n <Modal.Body>\n <Flex direction=\"column\" alignItems=\"stretch\" gap={7}>\n <Flex justifyContent=\"space-between\">\n <Flex direction=\"column\" alignItems=\"stretch\" gap={0}>\n <Typography variant=\"pi\" fontWeight=\"bold\" textColor=\"neutral800\">\n {formatMessage(\n {\n id: getTrad('list.assets.to-upload'),\n defaultMessage:\n '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',\n },\n { number: assets.length }\n )}\n </Typography>\n <Typography variant=\"pi\" textColor=\"neutral600\">\n {formatMessage({\n id: getTrad('modal.upload-list.sub-header-subtitle'),\n defaultMessage: 'Manage the assets before adding them to the Media Library',\n })}\n </Typography>\n </Flex>\n <Button size=\"S\" onClick={onClickAddAsset}>\n {formatMessage({\n id: getTrad('header.actions.add-assets'),\n defaultMessage: 'Add new assets',\n })}\n </Button>\n </Flex>\n <KeyboardNavigable tagName=\"article\">\n <Grid.Root gap={4}>\n {assets.map((asset) => {\n const assetKey = asset.url;\n\n if (uploadStatus ==Line truncated
@@ -0,0 +1,129 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var designSystem = require('@strapi/design-system');
var reactIntl = require('react-intl');
var EditAssetContent = require('../EditAssetDialog/EditAssetContent.js');
var AddAssetStep = require('./AddAssetStep/AddAssetStep.js');
var PendingAssetStep = require('./PendingAssetStep/PendingAssetStep.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 Steps = {
AddAsset: 'AddAsset',
PendingAsset: 'PendingAsset'
};
const UploadAssetDialog = ({ initialAssetsToAdd, folderId = null, onClose = ()=>{}, addUploadedFiles, trackedLocation, open, validateAssetsTypes = (_, cb)=>cb() })=>{
const { formatMessage } = reactIntl.useIntl();
const [step, setStep] = React__namespace.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);
const [assets, setAssets] = React__namespace.useState(initialAssetsToAdd || []);
const [assetToEdit, setAssetToEdit] = React__namespace.useState(undefined);
const handleAddToPendingAssets = (nextAssets)=>{
validateAssetsTypes(nextAssets, ()=>{
setAssets((prevAssets)=>prevAssets.concat(nextAssets));
setStep(Steps.PendingAsset);
});
};
const moveToAddAsset = ()=>{
setStep(Steps.AddAsset);
};
const handleCancelUpload = (file)=>{
const nextAssets = assets.filter((asset)=>asset.rawFile !== file);
setAssets(nextAssets);
// When there's no asset, transition to the AddAsset step
if (nextAssets.length === 0) {
moveToAddAsset();
}
};
const handleUploadSuccess = (file)=>{
const nextAssets = assets.filter((asset)=>asset.rawFile !== file);
setAssets(nextAssets);
if (nextAssets.length === 0) {
onClose();
}
};
const handleAssetEditValidation = (nextAsset)=>{
if (nextAsset && typeof nextAsset !== 'boolean') {
const nextAssets = assets.map((asset)=>asset === assetToEdit ? nextAsset : asset);
setAssets(nextAssets);
}
setAssetToEdit(undefined);
};
const handleClose = ()=>{
if (step === Steps.PendingAsset && assets.length > 0) {
// eslint-disable-next-line no-alert
const confirm = window.confirm(formatMessage({
id: 'window.confirm.close-modal.files',
defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.'
}));
if (confirm) {
onClose();
}
} else {
onClose();
}
};
const handleRemoveAsset = (assetToRemove)=>{
const nextAssets = assets.filter((asset)=>asset !== assetToRemove);
setAssets(nextAssets);
};
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Root, {
open: open,
onOpenChange: handleClose,
children: [
step === Steps.AddAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
children: /*#__PURE__*/ jsxRuntime.jsx(AddAssetStep.AddAssetStep, {
onClose: onClose,
onAddAsset: (assets)=>handleAddToPendingAssets(assets),
trackedLocation: trackedLocation
})
}),
step === Steps.PendingAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
children: /*#__PURE__*/ jsxRuntime.jsx(PendingAssetStep.PendingAssetStep, {
onClose: handleClose,
assets: assets,
onEditAsset: setAssetToEdit,
onRemoveAsset: handleRemoveAsset,
onClickAddAsset: moveToAddAsset,
onCancelUpload: handleCancelUpload,
onUploadSucceed: handleUploadSuccess,
initialAssetsToAdd: initialAssetsToAdd,
addUploadedFiles: addUploadedFiles,
folderId: folderId,
trackedLocation: trackedLocation
})
}),
assetToEdit && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
children: /*#__PURE__*/ jsxRuntime.jsx(EditAssetContent.EditAssetContent, {
onClose: handleAssetEditValidation,
asset: assetToEdit,
canUpdate: true,
canCopyLink: false,
canDownload: false,
trackedLocation: trackedLocation
})
})
]
});
};
exports.UploadAssetDialog = UploadAssetDialog;
//# sourceMappingURL=UploadAssetDialog.js.map
@@ -0,0 +1 @@
{"version":3,"file":"UploadAssetDialog.js","sources":["../../../../admin/src/components/UploadAssetDialog/UploadAssetDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { EditAssetContent } from '../EditAssetDialog/EditAssetContent';\n\nimport { AddAssetStep } from './AddAssetStep/AddAssetStep';\nimport { PendingAssetStep } from './PendingAssetStep/PendingAssetStep';\n\nimport type { File, RawFile } from '../../../../shared/contracts/files';\nimport type { AllowedFiles } from '../../utils';\n\nconst Steps = {\n AddAsset: 'AddAsset',\n PendingAsset: 'PendingAsset',\n};\n\ninterface FileWithRawFile extends Omit<File, 'id' | 'hash'> {\n id?: string;\n hash?: string;\n rawFile: RawFile;\n}\n\ntype FileWithoutIdHash = Omit<File, 'id' | 'hash'>;\n\nexport interface Asset extends Omit<File, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: File['folder'] & { id: number };\n}\n\nexport interface UploadAssetDialogProps {\n addUploadedFiles?: (files: Asset[] | File[]) => void;\n folderId?: string | number | null;\n initialAssetsToAdd?: Asset[];\n onClose: () => void;\n open: boolean;\n trackedLocation?: string;\n validateAssetsTypes?: (\n assets: FileWithoutIdHash[] | Asset[],\n cb: (assets?: AllowedFiles[], error?: string) => void\n ) => void;\n}\n\nexport const UploadAssetDialog = ({\n initialAssetsToAdd,\n folderId = null,\n onClose = () => {},\n addUploadedFiles,\n trackedLocation,\n open,\n validateAssetsTypes = (_, cb) => cb(),\n}: UploadAssetDialogProps) => {\n const { formatMessage } = useIntl();\n const [step, setStep] = React.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);\n const [assets, setAssets] = React.useState(initialAssetsToAdd || []);\n const [assetToEdit, setAssetToEdit] = React.useState<File | Asset | undefined>(undefined);\n\n const handleAddToPendingAssets = (nextAssets: Asset[]) => {\n validateAssetsTypes(nextAssets, () => {\n setAssets((prevAssets) => prevAssets.concat(nextAssets));\n setStep(Steps.PendingAsset);\n });\n };\n\n const moveToAddAsset = () => {\n setStep(Steps.AddAsset);\n };\n\n const handleCancelUpload = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n // When there's no asset, transition to the AddAsset step\n if (nextAssets.length === 0) {\n moveToAddAsset();\n }\n };\n\n const handleUploadSuccess = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n if (nextAssets.length === 0) {\n onClose();\n }\n };\n\n const handleAssetEditValidation = (nextAsset?: Asset | boolean | null) => {\n if (nextAsset && typeof nextAsset !== 'boolean') {\n const nextAssets = assets.map((asset) => (asset === assetToEdit ? nextAsset : asset));\n setAssets(nextAssets);\n }\n\n setAssetToEdit(undefined);\n };\n\n const handleClose = () => {\n if (step === Steps.PendingAsset && assets.length > 0) {\n // eslint-disable-next-line no-alert\n const confirm = window.confirm(\n formatMessage({\n id: 'window.confirm.close-modal.files',\n defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.',\n })\n );\n\n if (confirm) {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const handleRemoveAsset = (assetToRemove: File) => {\n const nextAssets = assets.filter((asset) => asset !== assetToRemove);\n setAssets(nextAssets);\n };\n\n return (\n <Modal.Root open={open} onOpenChange={handleClose}>\n {step === Steps.AddAsset && (\n <Modal.Content>\n <AddAssetStep\n onClose={onClose}\n onAddAsset={(assets: FileWithRawFile[]) =>\n handleAddToPendingAssets(assets as unknown as Asset[])\n }\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {step === Steps.PendingAsset && (\n <Modal.Content>\n <PendingAssetStep\n onClose={handleClose}\n assets={assets}\n onEditAsset={setAssetToEdit}\n onRemoveAsset={handleRemoveAsset}\n onClickAddAsset={moveToAddAsset}\n onCancelUpload={handleCancelUpload}\n onUploadSucceed={handleUploadSuccess}\n initialAssetsToAdd={initialAssetsToAdd}\n addUploadedFiles={addUploadedFiles}\n folderId={folderId}\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {assetToEdit && (\n <Modal.Content>\n <EditAssetContent\n onClose={handleAssetEditValidation}\n asset={assetToEdit as Asset}\n canUpdate\n canCopyLink={false}\n Line truncated
@@ -0,0 +1,108 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Modal } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { EditAssetContent } from '../EditAssetDialog/EditAssetContent.mjs';
import { AddAssetStep } from './AddAssetStep/AddAssetStep.mjs';
import { PendingAssetStep } from './PendingAssetStep/PendingAssetStep.mjs';
const Steps = {
AddAsset: 'AddAsset',
PendingAsset: 'PendingAsset'
};
const UploadAssetDialog = ({ initialAssetsToAdd, folderId = null, onClose = ()=>{}, addUploadedFiles, trackedLocation, open, validateAssetsTypes = (_, cb)=>cb() })=>{
const { formatMessage } = useIntl();
const [step, setStep] = React.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);
const [assets, setAssets] = React.useState(initialAssetsToAdd || []);
const [assetToEdit, setAssetToEdit] = React.useState(undefined);
const handleAddToPendingAssets = (nextAssets)=>{
validateAssetsTypes(nextAssets, ()=>{
setAssets((prevAssets)=>prevAssets.concat(nextAssets));
setStep(Steps.PendingAsset);
});
};
const moveToAddAsset = ()=>{
setStep(Steps.AddAsset);
};
const handleCancelUpload = (file)=>{
const nextAssets = assets.filter((asset)=>asset.rawFile !== file);
setAssets(nextAssets);
// When there's no asset, transition to the AddAsset step
if (nextAssets.length === 0) {
moveToAddAsset();
}
};
const handleUploadSuccess = (file)=>{
const nextAssets = assets.filter((asset)=>asset.rawFile !== file);
setAssets(nextAssets);
if (nextAssets.length === 0) {
onClose();
}
};
const handleAssetEditValidation = (nextAsset)=>{
if (nextAsset && typeof nextAsset !== 'boolean') {
const nextAssets = assets.map((asset)=>asset === assetToEdit ? nextAsset : asset);
setAssets(nextAssets);
}
setAssetToEdit(undefined);
};
const handleClose = ()=>{
if (step === Steps.PendingAsset && assets.length > 0) {
// eslint-disable-next-line no-alert
const confirm = window.confirm(formatMessage({
id: 'window.confirm.close-modal.files',
defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.'
}));
if (confirm) {
onClose();
}
} else {
onClose();
}
};
const handleRemoveAsset = (assetToRemove)=>{
const nextAssets = assets.filter((asset)=>asset !== assetToRemove);
setAssets(nextAssets);
};
return /*#__PURE__*/ jsxs(Modal.Root, {
open: open,
onOpenChange: handleClose,
children: [
step === Steps.AddAsset && /*#__PURE__*/ jsx(Modal.Content, {
children: /*#__PURE__*/ jsx(AddAssetStep, {
onClose: onClose,
onAddAsset: (assets)=>handleAddToPendingAssets(assets),
trackedLocation: trackedLocation
})
}),
step === Steps.PendingAsset && /*#__PURE__*/ jsx(Modal.Content, {
children: /*#__PURE__*/ jsx(PendingAssetStep, {
onClose: handleClose,
assets: assets,
onEditAsset: setAssetToEdit,
onRemoveAsset: handleRemoveAsset,
onClickAddAsset: moveToAddAsset,
onCancelUpload: handleCancelUpload,
onUploadSucceed: handleUploadSuccess,
initialAssetsToAdd: initialAssetsToAdd,
addUploadedFiles: addUploadedFiles,
folderId: folderId,
trackedLocation: trackedLocation
})
}),
assetToEdit && /*#__PURE__*/ jsx(Modal.Content, {
children: /*#__PURE__*/ jsx(EditAssetContent, {
onClose: handleAssetEditValidation,
asset: assetToEdit,
canUpdate: true,
canCopyLink: false,
canDownload: false,
trackedLocation: trackedLocation
})
})
]
});
};
export { UploadAssetDialog };
//# sourceMappingURL=UploadAssetDialog.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"UploadAssetDialog.mjs","sources":["../../../../admin/src/components/UploadAssetDialog/UploadAssetDialog.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { EditAssetContent } from '../EditAssetDialog/EditAssetContent';\n\nimport { AddAssetStep } from './AddAssetStep/AddAssetStep';\nimport { PendingAssetStep } from './PendingAssetStep/PendingAssetStep';\n\nimport type { File, RawFile } from '../../../../shared/contracts/files';\nimport type { AllowedFiles } from '../../utils';\n\nconst Steps = {\n AddAsset: 'AddAsset',\n PendingAsset: 'PendingAsset',\n};\n\ninterface FileWithRawFile extends Omit<File, 'id' | 'hash'> {\n id?: string;\n hash?: string;\n rawFile: RawFile;\n}\n\ntype FileWithoutIdHash = Omit<File, 'id' | 'hash'>;\n\nexport interface Asset extends Omit<File, 'folder'> {\n isLocal?: boolean;\n rawFile?: RawFile;\n folder?: File['folder'] & { id: number };\n}\n\nexport interface UploadAssetDialogProps {\n addUploadedFiles?: (files: Asset[] | File[]) => void;\n folderId?: string | number | null;\n initialAssetsToAdd?: Asset[];\n onClose: () => void;\n open: boolean;\n trackedLocation?: string;\n validateAssetsTypes?: (\n assets: FileWithoutIdHash[] | Asset[],\n cb: (assets?: AllowedFiles[], error?: string) => void\n ) => void;\n}\n\nexport const UploadAssetDialog = ({\n initialAssetsToAdd,\n folderId = null,\n onClose = () => {},\n addUploadedFiles,\n trackedLocation,\n open,\n validateAssetsTypes = (_, cb) => cb(),\n}: UploadAssetDialogProps) => {\n const { formatMessage } = useIntl();\n const [step, setStep] = React.useState(initialAssetsToAdd ? Steps.PendingAsset : Steps.AddAsset);\n const [assets, setAssets] = React.useState(initialAssetsToAdd || []);\n const [assetToEdit, setAssetToEdit] = React.useState<File | Asset | undefined>(undefined);\n\n const handleAddToPendingAssets = (nextAssets: Asset[]) => {\n validateAssetsTypes(nextAssets, () => {\n setAssets((prevAssets) => prevAssets.concat(nextAssets));\n setStep(Steps.PendingAsset);\n });\n };\n\n const moveToAddAsset = () => {\n setStep(Steps.AddAsset);\n };\n\n const handleCancelUpload = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n // When there's no asset, transition to the AddAsset step\n if (nextAssets.length === 0) {\n moveToAddAsset();\n }\n };\n\n const handleUploadSuccess = (file: RawFile) => {\n const nextAssets = assets.filter((asset) => asset.rawFile !== file);\n setAssets(nextAssets);\n\n if (nextAssets.length === 0) {\n onClose();\n }\n };\n\n const handleAssetEditValidation = (nextAsset?: Asset | boolean | null) => {\n if (nextAsset && typeof nextAsset !== 'boolean') {\n const nextAssets = assets.map((asset) => (asset === assetToEdit ? nextAsset : asset));\n setAssets(nextAssets);\n }\n\n setAssetToEdit(undefined);\n };\n\n const handleClose = () => {\n if (step === Steps.PendingAsset && assets.length > 0) {\n // eslint-disable-next-line no-alert\n const confirm = window.confirm(\n formatMessage({\n id: 'window.confirm.close-modal.files',\n defaultMessage: 'Are you sure? You have some files that have not been uploaded yet.',\n })\n );\n\n if (confirm) {\n onClose();\n }\n } else {\n onClose();\n }\n };\n\n const handleRemoveAsset = (assetToRemove: File) => {\n const nextAssets = assets.filter((asset) => asset !== assetToRemove);\n setAssets(nextAssets);\n };\n\n return (\n <Modal.Root open={open} onOpenChange={handleClose}>\n {step === Steps.AddAsset && (\n <Modal.Content>\n <AddAssetStep\n onClose={onClose}\n onAddAsset={(assets: FileWithRawFile[]) =>\n handleAddToPendingAssets(assets as unknown as Asset[])\n }\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {step === Steps.PendingAsset && (\n <Modal.Content>\n <PendingAssetStep\n onClose={handleClose}\n assets={assets}\n onEditAsset={setAssetToEdit}\n onRemoveAsset={handleRemoveAsset}\n onClickAddAsset={moveToAddAsset}\n onCancelUpload={handleCancelUpload}\n onUploadSucceed={handleUploadSuccess}\n initialAssetsToAdd={initialAssetsToAdd}\n addUploadedFiles={addUploadedFiles}\n folderId={folderId}\n trackedLocation={trackedLocation}\n />\n </Modal.Content>\n )}\n\n {assetToEdit && (\n <Modal.Content>\n <EditAssetContent\n onClose={handleAssetEditValidation}\n asset={assetToEdit as Asset}\n canUpdate\n canCopyLink={false}\n Line truncated