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

37
server/node_modules/@strapi/upload/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,37 @@
Copyright (c) 2015-present Strapi Solutions SAS
Portions of the Strapi software are licensed as follows:
* All software that resides under an "ee/" directory (the “EE Software”), if that directory exists, is licensed under the license defined below.
Enterprise License
If you or the company you represent has entered into a written agreement referencing the Enterprise Edition of the Strapi source code available at
https://github.com/strapi/strapi, then such agreement applies to your use of the Enterprise Edition of the Strapi Software. If you or the company you
represent is using the Enterprise Edition of the Strapi Software in connection with a subscription to our cloud offering, then the agreement you have
agreed to with respect to our cloud offering and the licenses included in such agreement apply to your use of the Enterprise Edition of the Strapi Software.
Otherwise, the Strapi Enterprise Software License Agreement (found here https://strapi.io/enterprise-terms) applies to your use of the Enterprise Edition of the Strapi Software.
BY ACCESSING OR USING THE ENTERPRISE EDITION OF THE STRAPI SOFTWARE, YOU ARE AGREEING TO BE BOUND BY THE RELEVANT REFERENCED AGREEMENT.
IF YOU ARE NOT AUTHORIZED TO ACCEPT THESE TERMS ON BEHALF OF THE COMPANY YOU REPRESENT OR IF YOU DO NOT AGREE TO ALL OF THE RELEVANT TERMS AND CONDITIONS REFERENCED AND YOU
HAVE NOT OTHERWISE EXECUTED A WRITTEN AGREEMENT WITH STRAPI, YOU ARE NOT AUTHORIZED TO ACCESS OR USE OR ALLOW ANY USER TO ACCESS OR USE ANY PART OF
THE ENTERPRISE EDITION OF THE STRAPI SOFTWARE. YOUR ACCESS RIGHTS ARE CONDITIONAL ON YOUR CONSENT TO THE RELEVANT REFERENCED TERMS TO THE EXCLUSION OF ALL OTHER TERMS;
IF THE RELEVANT REFERENCED TERMS ARE CONSIDERED AN OFFER BY YOU, ACCEPTANCE IS EXPRESSLY LIMITED TO THE RELEVANT REFERENCED TERMS.
* All software outside of the above-mentioned directories or restrictions above is available under the "MIT Expat" license as set forth below.
MIT Expat License
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

1
server/node_modules/@strapi/upload/README.md generated vendored Normal file
View File

@@ -0,0 +1 @@
# strapi-plugin-upload

View File

@@ -0,0 +1,59 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var constants = require('../../constants.js');
var createAssetUrl = require('../../utils/createAssetUrl.js');
require('byte-size');
require('date-fns');
require('qs');
var getFileExtension = require('../../utils/getFileExtension.js');
var prefixFileUrlWithBackendUrl = require('../../utils/prefixFileUrlWithBackendUrl.js');
require('../../utils/urlYupSchema.js');
var AudioAssetCard = require('./AudioAssetCard.js');
var DocAssetCard = require('./DocAssetCard.js');
var ImageAssetCard = require('./ImageAssetCard.js');
var VideoAssetCard = require('./VideoAssetCard.js');
const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
const commonAssetCardProps = {
id: asset.id,
isSelectable: asset.isSelectable,
extension: getFileExtension.getFileExtension(asset.ext),
name: asset.name,
url: local ? asset.url : createAssetUrl.createAssetUrl(asset, true),
mime: asset.mime,
onEdit: onEdit ? ()=>onEdit(asset) : undefined,
onSelect: handleSelect,
onRemove: onRemove ? ()=>onRemove(asset) : undefined,
selected: isSelected,
size
};
if (asset.mime?.includes(constants.AssetType.Video)) {
return /*#__PURE__*/ jsxRuntime.jsx(VideoAssetCard.VideoAssetCard, {
...commonAssetCardProps
});
}
if (asset.mime?.includes(constants.AssetType.Image)) {
return /*#__PURE__*/ jsxRuntime.jsx(ImageAssetCard.ImageAssetCard, {
alt: asset.alternativeText || asset.name,
height: asset.height,
thumbnail: prefixFileUrlWithBackendUrl.prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url),
width: asset.width,
updatedAt: asset.updatedAt,
isUrlSigned: asset?.isUrlSigned || false,
...commonAssetCardProps
});
}
if (asset.mime?.includes(constants.AssetType.Audio)) {
return /*#__PURE__*/ jsxRuntime.jsx(AudioAssetCard.AudioAssetCard, {
...commonAssetCardProps
});
}
return /*#__PURE__*/ jsxRuntime.jsx(DocAssetCard.DocAssetCard, {
...commonAssetCardProps
});
};
exports.AssetCard = AssetCard;
//# sourceMappingURL=AssetCard.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"AssetCard.js","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n asset: FileSelectable;\n local?: boolean;\n onSelect?: (asset: FileSelectable) => void;\n onEdit?: (asset: FileSelectable) => void;\n onRemove?: (asset: FileSelectable) => void;\n isSelected?: boolean;\n size?: 'S' | 'M';\n allowedTypes?: AllowedTypes[];\n alt?: string;\n}\n\nexport const AssetCard = ({\n asset,\n isSelected = false,\n onSelect,\n onEdit,\n onRemove,\n size = 'M',\n local = false,\n}: AssetCardProps) => {\n const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n const commonAssetCardProps = {\n id: asset.id,\n isSelectable: asset.isSelectable,\n extension: getFileExtension(asset.ext)!,\n name: asset.name,\n url: local ? asset.url! : createAssetUrl(asset, true)!,\n mime: asset.mime!,\n onEdit: onEdit ? () => onEdit(asset) : undefined,\n onSelect: handleSelect,\n onRemove: onRemove ? () => onRemove(asset) : undefined,\n selected: isSelected,\n size,\n };\n\n if (asset.mime?.includes(AssetType.Video)) {\n return <VideoAssetCard {...commonAssetCardProps} />;\n }\n\n if (asset.mime?.includes(AssetType.Image)) {\n return (\n <ImageAssetCard\n alt={asset.alternativeText || asset.name}\n height={asset.height!}\n thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n width={asset.width!}\n updatedAt={asset.updatedAt}\n isUrlSigned={asset?.isUrlSigned || false}\n {...commonAssetCardProps}\n />\n );\n }\n\n if (asset.mime?.includes(AssetType.Audio)) {\n return <AudioAssetCard {...commonAssetCardProps} />;\n }\n\n return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,iCAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,8BAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,cAACC,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,cAACG,CAAAA,6BAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,wDAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,mBAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,cAACc,CAAAA,6BAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,cAACe,CAAAA,yBAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

View File

@@ -0,0 +1,57 @@
import { jsx } from 'react/jsx-runtime';
import { AssetType } from '../../constants.mjs';
import { createAssetUrl } from '../../utils/createAssetUrl.mjs';
import 'byte-size';
import 'date-fns';
import 'qs';
import { getFileExtension } from '../../utils/getFileExtension.mjs';
import { prefixFileUrlWithBackendUrl } from '../../utils/prefixFileUrlWithBackendUrl.mjs';
import '../../utils/urlYupSchema.mjs';
import { AudioAssetCard } from './AudioAssetCard.mjs';
import { DocAssetCard } from './DocAssetCard.mjs';
import { ImageAssetCard } from './ImageAssetCard.mjs';
import { VideoAssetCard } from './VideoAssetCard.mjs';
const AssetCard = ({ asset, isSelected = false, onSelect, onEdit, onRemove, size = 'M', local = false })=>{
const handleSelect = onSelect ? ()=>onSelect(asset) : undefined;
const commonAssetCardProps = {
id: asset.id,
isSelectable: asset.isSelectable,
extension: getFileExtension(asset.ext),
name: asset.name,
url: local ? asset.url : createAssetUrl(asset, true),
mime: asset.mime,
onEdit: onEdit ? ()=>onEdit(asset) : undefined,
onSelect: handleSelect,
onRemove: onRemove ? ()=>onRemove(asset) : undefined,
selected: isSelected,
size
};
if (asset.mime?.includes(AssetType.Video)) {
return /*#__PURE__*/ jsx(VideoAssetCard, {
...commonAssetCardProps
});
}
if (asset.mime?.includes(AssetType.Image)) {
return /*#__PURE__*/ jsx(ImageAssetCard, {
alt: asset.alternativeText || asset.name,
height: asset.height,
thumbnail: prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url),
width: asset.width,
updatedAt: asset.updatedAt,
isUrlSigned: asset?.isUrlSigned || false,
...commonAssetCardProps
});
}
if (asset.mime?.includes(AssetType.Audio)) {
return /*#__PURE__*/ jsx(AudioAssetCard, {
...commonAssetCardProps
});
}
return /*#__PURE__*/ jsx(DocAssetCard, {
...commonAssetCardProps
});
};
export { AssetCard };
//# sourceMappingURL=AssetCard.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"AssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AssetCard.tsx"],"sourcesContent":["import { AssetType } from '../../constants';\nimport { createAssetUrl, getFileExtension, prefixFileUrlWithBackendUrl } from '../../utils';\n\nimport { AudioAssetCard } from './AudioAssetCard';\nimport { DocAssetCard } from './DocAssetCard';\nimport { ImageAssetCard } from './ImageAssetCard';\nimport { VideoAssetCard } from './VideoAssetCard';\n\nimport type { File } from '../../../../shared/contracts/files';\n\ntype FileSelectable = File & { isSelectable?: boolean };\n\nexport type AllowedTypes = 'files' | 'images' | 'videos' | 'audios';\n\ninterface AssetCardProps {\n asset: FileSelectable;\n local?: boolean;\n onSelect?: (asset: FileSelectable) => void;\n onEdit?: (asset: FileSelectable) => void;\n onRemove?: (asset: FileSelectable) => void;\n isSelected?: boolean;\n size?: 'S' | 'M';\n allowedTypes?: AllowedTypes[];\n alt?: string;\n}\n\nexport const AssetCard = ({\n asset,\n isSelected = false,\n onSelect,\n onEdit,\n onRemove,\n size = 'M',\n local = false,\n}: AssetCardProps) => {\n const handleSelect = onSelect ? () => onSelect(asset) : undefined;\n\n const commonAssetCardProps = {\n id: asset.id,\n isSelectable: asset.isSelectable,\n extension: getFileExtension(asset.ext)!,\n name: asset.name,\n url: local ? asset.url! : createAssetUrl(asset, true)!,\n mime: asset.mime!,\n onEdit: onEdit ? () => onEdit(asset) : undefined,\n onSelect: handleSelect,\n onRemove: onRemove ? () => onRemove(asset) : undefined,\n selected: isSelected,\n size,\n };\n\n if (asset.mime?.includes(AssetType.Video)) {\n return <VideoAssetCard {...commonAssetCardProps} />;\n }\n\n if (asset.mime?.includes(AssetType.Image)) {\n return (\n <ImageAssetCard\n alt={asset.alternativeText || asset.name}\n height={asset.height!}\n thumbnail={prefixFileUrlWithBackendUrl(asset?.formats?.thumbnail?.url || asset.url)!}\n width={asset.width!}\n updatedAt={asset.updatedAt}\n isUrlSigned={asset?.isUrlSigned || false}\n {...commonAssetCardProps}\n />\n );\n }\n\n if (asset.mime?.includes(AssetType.Audio)) {\n return <AudioAssetCard {...commonAssetCardProps} />;\n }\n\n return <DocAssetCard {...commonAssetCardProps} />;\n};\n"],"names":["AssetCard","asset","isSelected","onSelect","onEdit","onRemove","size","local","handleSelect","undefined","commonAssetCardProps","id","isSelectable","extension","getFileExtension","ext","name","url","createAssetUrl","mime","selected","includes","AssetType","Video","_jsx","VideoAssetCard","Image","ImageAssetCard","alt","alternativeText","height","thumbnail","prefixFileUrlWithBackendUrl","formats","width","updatedAt","isUrlSigned","Audio","AudioAssetCard","DocAssetCard"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAMA,YAAY,CAAC,EACxBC,KAAK,EACLC,UAAAA,GAAa,KAAK,EAClBC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,IAAAA,GAAO,GAAG,EACVC,KAAAA,GAAQ,KAAK,EACE,GAAA;AACf,IAAA,MAAMC,YAAeL,GAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASF,KAASQ,CAAAA,GAAAA,SAAAA;AAExD,IAAA,MAAMC,oBAAuB,GAAA;AAC3BC,QAAAA,EAAAA,EAAIV,MAAMU,EAAE;AACZC,QAAAA,YAAAA,EAAcX,MAAMW,YAAY;QAChCC,SAAWC,EAAAA,gBAAAA,CAAiBb,MAAMc,GAAG,CAAA;AACrCC,QAAAA,IAAAA,EAAMf,MAAMe,IAAI;AAChBC,QAAAA,GAAAA,EAAKV,KAAQN,GAAAA,KAAAA,CAAMgB,GAAG,GAAIC,eAAejB,KAAO,EAAA,IAAA,CAAA;AAChDkB,QAAAA,IAAAA,EAAMlB,MAAMkB,IAAI;QAChBf,MAAQA,EAAAA,MAAAA,GAAS,IAAMA,MAAAA,CAAOH,KAASQ,CAAAA,GAAAA,SAAAA;QACvCN,QAAUK,EAAAA,YAAAA;QACVH,QAAUA,EAAAA,QAAAA,GAAW,IAAMA,QAAAA,CAASJ,KAASQ,CAAAA,GAAAA,SAAAA;QAC7CW,QAAUlB,EAAAA,UAAAA;AACVI,QAAAA;AACF,KAAA;AAEA,IAAA,IAAIL,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUC,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOC,GAACC,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAGf;;AAC7B;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUI,KAAK,CAAG,EAAA;AACzC,QAAA,qBACEF,GAACG,CAAAA,cAAAA,EAAAA;AACCC,YAAAA,GAAAA,EAAK3B,KAAM4B,CAAAA,eAAe,IAAI5B,KAAAA,CAAMe,IAAI;AACxCc,YAAAA,MAAAA,EAAQ7B,MAAM6B,MAAM;AACpBC,YAAAA,SAAAA,EAAWC,4BAA4B/B,KAAOgC,EAAAA,OAAAA,EAASF,SAAWd,EAAAA,GAAAA,IAAOhB,MAAMgB,GAAG,CAAA;AAClFiB,YAAAA,KAAAA,EAAOjC,MAAMiC,KAAK;AAClBC,YAAAA,SAAAA,EAAWlC,MAAMkC,SAAS;AAC1BC,YAAAA,WAAAA,EAAanC,OAAOmC,WAAe,IAAA,KAAA;AAClC,YAAA,GAAG1B;;AAGV;AAEA,IAAA,IAAIT,MAAMkB,IAAI,EAAEE,QAASC,CAAAA,SAAAA,CAAUe,KAAK,CAAG,EAAA;AACzC,QAAA,qBAAOb,GAACc,CAAAA,cAAAA,EAAAA;AAAgB,YAAA,GAAG5B;;AAC7B;AAEA,IAAA,qBAAOc,GAACe,CAAAA,YAAAA,EAAAA;AAAc,QAAA,GAAG7B;;AAC3B;;;;"}

View File

@@ -0,0 +1,130 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
require('react');
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');
const Extension = styledComponents.styled.span`
text-transform: uppercase;
`;
const CardActionsContainer = styledComponents.styled(designSystem.CardAction)`
opacity: 0;
&:focus-within {
opacity: 1;
}
`;
const CardContainer = styledComponents.styled(designSystem.Card)`
cursor: pointer;
&:hover {
${CardActionsContainer} {
opacity: 1;
}
}
`;
const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
const { formatMessage } = reactIntl.useIntl();
const handleClick = (e)=>{
if (onEdit) {
onEdit(e);
}
};
/**
* This is required because we need to stop the propagation of the event
* bubbling to the `CardContainer`, however the `CardCheckbox` only returns
* the `boolean` value as opposed to the event itself.
*/ const handlePropagationClick = (e)=>{
e.stopPropagation();
};
return /*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
role: "button",
height: "100%",
tabIndex: -1,
onClick: handleClick,
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardHeader, {
children: [
isSelectable && /*#__PURE__*/ jsxRuntime.jsx("div", {
onClick: handlePropagationClick,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardCheckbox, {
checked: selected,
onCheckedChange: onSelect
})
}),
(onRemove || onEdit) && /*#__PURE__*/ jsxRuntime.jsxs(CardActionsContainer, {
onClick: handlePropagationClick,
position: "end",
children: [
onRemove && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: formatMessage({
id: getTrad.getTrad('control-card.remove-selection'),
defaultMessage: 'Remove from selection'
}),
onClick: onRemove,
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Trash, {})
}),
onEdit && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: formatMessage({
id: getTrad.getTrad('control-card.edit'),
defaultMessage: 'Edit'
}),
onClick: onEdit,
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
})
]
}),
children
]
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardBody, {
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardContent, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingTop: 1,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
tag: "h2",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardTitle, {
tag: "span",
children: name
})
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardSubtitle, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(Extension, {
children: extension
}),
subtitle
]
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
paddingTop: 1,
grow: 1,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardBadge, {
children: formatMessage({
id: getTrad.getTrad(`settings.section.${variant.toLowerCase()}.label`),
defaultMessage: variant
})
})
})
]
})
]
});
};
exports.AssetCardBase = AssetCardBase;
//# sourceMappingURL=AssetCardBase.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,128 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import 'react';
import { CardAction, Card, CardHeader, CardCheckbox, IconButton, CardBody, CardContent, Box, Typography, CardTitle, CardSubtitle, Flex, CardBadge } from '@strapi/design-system';
import { Trash, Pencil } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../utils/getTrad.mjs';
import 'qs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
const Extension = styled.span`
text-transform: uppercase;
`;
const CardActionsContainer = styled(CardAction)`
opacity: 0;
&:focus-within {
opacity: 1;
}
`;
const CardContainer = styled(Card)`
cursor: pointer;
&:hover {
${CardActionsContainer} {
opacity: 1;
}
}
`;
const AssetCardBase = ({ children, extension, isSelectable = false, name, onSelect, onRemove, onEdit, selected = false, subtitle = '', variant = 'Image' })=>{
const { formatMessage } = useIntl();
const handleClick = (e)=>{
if (onEdit) {
onEdit(e);
}
};
/**
* This is required because we need to stop the propagation of the event
* bubbling to the `CardContainer`, however the `CardCheckbox` only returns
* the `boolean` value as opposed to the event itself.
*/ const handlePropagationClick = (e)=>{
e.stopPropagation();
};
return /*#__PURE__*/ jsxs(CardContainer, {
role: "button",
height: "100%",
tabIndex: -1,
onClick: handleClick,
children: [
/*#__PURE__*/ jsxs(CardHeader, {
children: [
isSelectable && /*#__PURE__*/ jsx("div", {
onClick: handlePropagationClick,
children: /*#__PURE__*/ jsx(CardCheckbox, {
checked: selected,
onCheckedChange: onSelect
})
}),
(onRemove || onEdit) && /*#__PURE__*/ jsxs(CardActionsContainer, {
onClick: handlePropagationClick,
position: "end",
children: [
onRemove && /*#__PURE__*/ jsx(IconButton, {
label: formatMessage({
id: getTrad('control-card.remove-selection'),
defaultMessage: 'Remove from selection'
}),
onClick: onRemove,
children: /*#__PURE__*/ jsx(Trash, {})
}),
onEdit && /*#__PURE__*/ jsx(IconButton, {
label: formatMessage({
id: getTrad('control-card.edit'),
defaultMessage: 'Edit'
}),
onClick: onEdit,
children: /*#__PURE__*/ jsx(Pencil, {})
})
]
}),
children
]
}),
/*#__PURE__*/ jsxs(CardBody, {
children: [
/*#__PURE__*/ jsxs(CardContent, {
children: [
/*#__PURE__*/ jsx(Box, {
paddingTop: 1,
children: /*#__PURE__*/ jsx(Typography, {
tag: "h2",
children: /*#__PURE__*/ jsx(CardTitle, {
tag: "span",
children: name
})
})
}),
/*#__PURE__*/ jsxs(CardSubtitle, {
children: [
/*#__PURE__*/ jsx(Extension, {
children: extension
}),
subtitle
]
})
]
}),
/*#__PURE__*/ jsx(Flex, {
paddingTop: 1,
grow: 1,
children: /*#__PURE__*/ jsx(CardBadge, {
children: formatMessage({
id: getTrad(`settings.section.${variant.toLowerCase()}.label`),
defaultMessage: variant
})
})
})
]
})
]
});
};
export { AssetCardBase };
//# sourceMappingURL=AssetCardBase.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,40 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var styledComponents = require('styled-components');
var AssetCardBase = require('./AssetCardBase.js');
var AudioPreview = require('./AudioPreview.js');
const AudioPreviewWrapper = styledComponents.styled(designSystem.Box)`
canvas,
audio {
display: block;
max-width: 100%;
max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
}
`;
const AudioAssetCard = ({ name, url, size = 'M', selected = false, ...restProps })=>{
return /*#__PURE__*/ jsxRuntime.jsx(AssetCardBase.AssetCardBase, {
name: name,
selected: selected,
...restProps,
variant: "Audio",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardAsset, {
size: size,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
alignItems: "center",
children: /*#__PURE__*/ jsxRuntime.jsx(AudioPreviewWrapper, {
size: size,
children: /*#__PURE__*/ jsxRuntime.jsx(AudioPreview.AudioPreview, {
url: url,
alt: name
})
})
})
})
});
};
exports.AudioAssetCard = AudioAssetCard;
//# sourceMappingURL=AudioAssetCard.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"AudioAssetCard.js","sources":["../../../../admin/src/components/AssetCard/AudioAssetCard.tsx"],"sourcesContent":["import { Box, CardAsset, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { AudioPreview } from './AudioPreview';\n\nconst AudioPreviewWrapper = styled(Box)`\n canvas,\n audio {\n display: block;\n max-width: 100%;\n max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n }\n`;\n\ninterface AudioAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n size?: 'S' | 'M';\n url: string;\n}\n\nexport const AudioAssetCard = ({\n name,\n url,\n size = 'M',\n selected = false,\n ...restProps\n}: AudioAssetCardProps) => {\n return (\n <AssetCardBase name={name} selected={selected} {...restProps} variant=\"Audio\">\n <CardAsset size={size}>\n <Flex alignItems=\"center\">\n <AudioPreviewWrapper size={size}>\n <AudioPreview url={url} alt={name} />\n </AudioPreviewWrapper>\n </Flex>\n </CardAsset>\n </AssetCardBase>\n );\n};\n"],"names":["AudioPreviewWrapper","styled","Box","size","AudioAssetCard","name","url","selected","restProps","_jsx","AssetCardBase","variant","CardAsset","Flex","alignItems","AudioPreview","alt"],"mappings":";;;;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;gBAKvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;AAOYC,MAAAA,cAAAA,GAAiB,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHH,IAAAA,GAAO,GAAG,EACVI,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACiB,EAAA,GAAA;AACpB,IAAA,qBACEC,cAACC,CAAAA,2BAAAA,EAAAA;QAAcL,IAAMA,EAAAA,IAAAA;QAAME,QAAUA,EAAAA,QAAAA;AAAW,QAAA,GAAGC,SAAS;QAAEG,OAAQ,EAAA,OAAA;AACpE,QAAA,QAAA,gBAAAF,cAACG,CAAAA,sBAAAA,EAAAA;YAAUT,IAAMA,EAAAA,IAAAA;AACf,YAAA,QAAA,gBAAAM,cAACI,CAAAA,iBAAAA,EAAAA;gBAAKC,UAAW,EAAA,QAAA;AACf,gBAAA,QAAA,gBAAAL,cAACT,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAM,cAACM,CAAAA,yBAAAA,EAAAA;wBAAaT,GAAKA,EAAAA,GAAAA;wBAAKU,GAAKX,EAAAA;;;;;;AAMzC;;;;"}

View File

@@ -0,0 +1,38 @@
import { jsx } from 'react/jsx-runtime';
import { Box, CardAsset, Flex } from '@strapi/design-system';
import { styled } from 'styled-components';
import { AssetCardBase } from './AssetCardBase.mjs';
import { AudioPreview } from './AudioPreview.mjs';
const AudioPreviewWrapper = styled(Box)`
canvas,
audio {
display: block;
max-width: 100%;
max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
}
`;
const AudioAssetCard = ({ name, url, size = 'M', selected = false, ...restProps })=>{
return /*#__PURE__*/ jsx(AssetCardBase, {
name: name,
selected: selected,
...restProps,
variant: "Audio",
children: /*#__PURE__*/ jsx(CardAsset, {
size: size,
children: /*#__PURE__*/ jsx(Flex, {
alignItems: "center",
children: /*#__PURE__*/ jsx(AudioPreviewWrapper, {
size: size,
children: /*#__PURE__*/ jsx(AudioPreview, {
url: url,
alt: name
})
})
})
})
});
};
export { AudioAssetCard };
//# sourceMappingURL=AudioAssetCard.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"AudioAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/AudioAssetCard.tsx"],"sourcesContent":["import { Box, CardAsset, Flex } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { AudioPreview } from './AudioPreview';\n\nconst AudioPreviewWrapper = styled(Box)`\n canvas,\n audio {\n display: block;\n max-width: 100%;\n max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n }\n`;\n\ninterface AudioAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n size?: 'S' | 'M';\n url: string;\n}\n\nexport const AudioAssetCard = ({\n name,\n url,\n size = 'M',\n selected = false,\n ...restProps\n}: AudioAssetCardProps) => {\n return (\n <AssetCardBase name={name} selected={selected} {...restProps} variant=\"Audio\">\n <CardAsset size={size}>\n <Flex alignItems=\"center\">\n <AudioPreviewWrapper size={size}>\n <AudioPreview url={url} alt={name} />\n </AudioPreviewWrapper>\n </Flex>\n </CardAsset>\n </AssetCardBase>\n );\n};\n"],"names":["AudioPreviewWrapper","styled","Box","size","AudioAssetCard","name","url","selected","restProps","_jsx","AssetCardBase","variant","CardAsset","Flex","alignItems","AudioPreview","alt"],"mappings":";;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,MAAOC,CAAAA,GAAAA,CAAI;;;;;gBAKvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;AAOYC,MAAAA,cAAAA,GAAiB,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHH,IAAAA,GAAO,GAAG,EACVI,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACiB,EAAA,GAAA;AACpB,IAAA,qBACEC,GAACC,CAAAA,aAAAA,EAAAA;QAAcL,IAAMA,EAAAA,IAAAA;QAAME,QAAUA,EAAAA,QAAAA;AAAW,QAAA,GAAGC,SAAS;QAAEG,OAAQ,EAAA,OAAA;AACpE,QAAA,QAAA,gBAAAF,GAACG,CAAAA,SAAAA,EAAAA;YAAUT,IAAMA,EAAAA,IAAAA;AACf,YAAA,QAAA,gBAAAM,GAACI,CAAAA,IAAAA,EAAAA;gBAAKC,UAAW,EAAA,QAAA;AACf,gBAAA,QAAA,gBAAAL,GAACT,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAM,GAACM,CAAAA,YAAAA,EAAAA;wBAAaT,GAAKA,EAAAA,GAAAA;wBAAKU,GAAKX,EAAAA;;;;;;AAMzC;;;;"}

View File

@@ -0,0 +1,17 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
const AudioPreview = ({ url, alt })=>{
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
children: /*#__PURE__*/ jsxRuntime.jsx("audio", {
controls: true,
src: url,
children: alt
})
});
};
exports.AudioPreview = AudioPreview;
//# sourceMappingURL=AudioPreview.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"AudioPreview.js","sources":["../../../../admin/src/components/AssetCard/AudioPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport { Box } from '@strapi/design-system';\n\ninterface AudioPreviewProps {\n alt: string;\n url: string;\n}\n\nexport const AudioPreview = ({ url, alt }: AudioPreviewProps) => {\n return (\n <Box>\n <audio controls src={url}>\n {alt}\n </audio>\n </Box>\n );\n};\n"],"names":["AudioPreview","url","alt","_jsx","Box","audio","controls","src"],"mappings":";;;;;MAQaA,YAAe,GAAA,CAAC,EAAEC,GAAG,EAAEC,GAAG,EAAqB,GAAA;AAC1D,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,cAACE,CAAAA,OAAAA,EAAAA;YAAMC,QAAQ,EAAA,IAAA;YAACC,GAAKN,EAAAA,GAAAA;AAClBC,YAAAA,QAAAA,EAAAA;;;AAIT;;;;"}

View File

@@ -0,0 +1,15 @@
import { jsx } from 'react/jsx-runtime';
import { Box } from '@strapi/design-system';
const AudioPreview = ({ url, alt })=>{
return /*#__PURE__*/ jsx(Box, {
children: /*#__PURE__*/ jsx("audio", {
controls: true,
src: url,
children: alt
})
});
};
export { AudioPreview };
//# sourceMappingURL=AudioPreview.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"AudioPreview.mjs","sources":["../../../../admin/src/components/AssetCard/AudioPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport { Box } from '@strapi/design-system';\n\ninterface AudioPreviewProps {\n alt: string;\n url: string;\n}\n\nexport const AudioPreview = ({ url, alt }: AudioPreviewProps) => {\n return (\n <Box>\n <audio controls src={url}>\n {alt}\n </audio>\n </Box>\n );\n};\n"],"names":["AudioPreview","url","alt","_jsx","Box","audio","controls","src"],"mappings":";;;MAQaA,YAAe,GAAA,CAAC,EAAEC,GAAG,EAAEC,GAAG,EAAqB,GAAA;AAC1D,IAAA,qBACEC,GAACC,CAAAA,GAAAA,EAAAA;AACC,QAAA,QAAA,gBAAAD,GAACE,CAAAA,OAAAA,EAAAA;YAAMC,QAAQ,EAAA,IAAA;YAACC,GAAKN,EAAAA,GAAAA;AAClBC,YAAAA,QAAAA,EAAAA;;;AAIT;;;;"}

View File

@@ -0,0 +1,61 @@
'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');
var AssetCardBase = require('./AssetCardBase.js');
const CardAsset = styledComponents.styled(designSystem.Flex)`
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 DocAssetCard = ({ name, extension, size = 'M', selected = false, ...restProps })=>{
const { formatMessage } = reactIntl.useIntl();
return /*#__PURE__*/ jsxRuntime.jsx(AssetCardBase.AssetCardBase, {
name: name,
extension: extension,
selected: selected,
...restProps,
variant: "Doc",
children: /*#__PURE__*/ jsxRuntime.jsx(CardAsset, {
width: "100%",
height: size === 'S' ? `8.8rem` : `16.4rem`,
justifyContent: "center",
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 2,
direction: "column",
alignItems: "center",
children: [
extension === 'pdf' ? /*#__PURE__*/ jsxRuntime.jsx(icons.FilePdf, {
"aria-label": name,
fill: "neutral500",
width: 24,
height: 24
}) : /*#__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'
})
})
]
})
})
});
};
exports.DocAssetCard = DocAssetCard;
//# sourceMappingURL=DocAssetCard.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"DocAssetCard.js","sources":["../../../../admin/src/components/AssetCard/DocAssetCard.tsx"],"sourcesContent":["import { Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\nconst CardAsset = styled(Flex)`\n border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n background: linear-gradient(\n 180deg,\n ${({ theme }) => theme.colors.neutral0} 0%,\n ${({ theme }) => theme.colors.neutral100} 121.48%\n );\n`;\n\ninterface DocAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n size?: 'S' | 'M';\n extension: string;\n}\n\nexport const DocAssetCard = ({\n name,\n extension,\n size = 'M',\n selected = false,\n ...restProps\n}: DocAssetCardProps) => {\n const { formatMessage } = useIntl();\n return (\n <AssetCardBase\n name={name}\n extension={extension}\n selected={selected}\n {...restProps}\n variant=\"Doc\"\n >\n <CardAsset width=\"100%\" height={size === 'S' ? `8.8rem` : `16.4rem`} justifyContent=\"center\">\n <Flex gap={2} direction=\"column\" alignItems=\"center\">\n {extension === 'pdf' ? (\n <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n ) : (\n <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n )}\n\n <Typography textColor=\"neutral500\" variant=\"pi\">\n {formatMessage({\n id: 'noPreview',\n defaultMessage: 'No preview available',\n })}\n </Typography>\n </Flex>\n </CardAsset>\n </AssetCardBase>\n );\n};\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","DocAssetCard","name","extension","size","selected","restProps","formatMessage","useIntl","_jsx","AssetCardBase","variant","width","height","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","File","Typography","textColor","id","defaultMessage"],"mappings":";;;;;;;;;AAOA,MAAMA,SAAAA,GAAYC,uBAAOC,CAAAA,iBAAAA,CAAK;AACb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AAOYC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,IAAI,EACJC,SAAS,EACTC,IAAAA,GAAO,GAAG,EACVC,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACe,EAAA,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAC1B,IAAA,qBACEC,cAACC,CAAAA,2BAAAA,EAAAA;QACCR,IAAMA,EAAAA,IAAAA;QACNC,SAAWA,EAAAA,SAAAA;QACXE,QAAUA,EAAAA,QAAAA;AACT,QAAA,GAAGC,SAAS;QACbK,OAAQ,EAAA,KAAA;AAER,QAAA,QAAA,gBAAAF,cAAChB,CAAAA,SAAAA,EAAAA;YAAUmB,KAAM,EAAA,MAAA;YAAOC,MAAQT,EAAAA,IAAAA,KAAS,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;YAAEU,cAAe,EAAA,QAAA;AAClF,YAAA,QAAA,gBAAAC,eAACpB,CAAAA,iBAAAA,EAAAA;gBAAKqB,GAAK,EAAA,CAAA;gBAAGC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,QAAA;;AACzCf,oBAAAA,SAAAA,KAAc,sBACbM,cAACU,CAAAA,aAAAA,EAAAA;wBAAQC,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;uCAEhEJ,cAACa,CAAAA,UAAAA,EAAAA;wBAAKF,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;;kCAG/DJ,cAACc,CAAAA,uBAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;wBAAab,OAAQ,EAAA,IAAA;kCACxCJ,aAAc,CAAA;4BACbkB,EAAI,EAAA,WAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;;;;AAMZ;;;;"}

View File

@@ -0,0 +1,59 @@
import { jsx, jsxs } from 'react/jsx-runtime';
import { Flex, Typography } from '@strapi/design-system';
import { FilePdf, File } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import { AssetCardBase } from './AssetCardBase.mjs';
const CardAsset = styled(Flex)`
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 DocAssetCard = ({ name, extension, size = 'M', selected = false, ...restProps })=>{
const { formatMessage } = useIntl();
return /*#__PURE__*/ jsx(AssetCardBase, {
name: name,
extension: extension,
selected: selected,
...restProps,
variant: "Doc",
children: /*#__PURE__*/ jsx(CardAsset, {
width: "100%",
height: size === 'S' ? `8.8rem` : `16.4rem`,
justifyContent: "center",
children: /*#__PURE__*/ jsxs(Flex, {
gap: 2,
direction: "column",
alignItems: "center",
children: [
extension === 'pdf' ? /*#__PURE__*/ jsx(FilePdf, {
"aria-label": name,
fill: "neutral500",
width: 24,
height: 24
}) : /*#__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'
})
})
]
})
})
});
};
export { DocAssetCard };
//# sourceMappingURL=DocAssetCard.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"DocAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/DocAssetCard.tsx"],"sourcesContent":["import { Flex, Typography } from '@strapi/design-system';\nimport { File, FilePdf } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\nconst CardAsset = styled(Flex)`\n border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n background: linear-gradient(\n 180deg,\n ${({ theme }) => theme.colors.neutral0} 0%,\n ${({ theme }) => theme.colors.neutral100} 121.48%\n );\n`;\n\ninterface DocAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n size?: 'S' | 'M';\n extension: string;\n}\n\nexport const DocAssetCard = ({\n name,\n extension,\n size = 'M',\n selected = false,\n ...restProps\n}: DocAssetCardProps) => {\n const { formatMessage } = useIntl();\n return (\n <AssetCardBase\n name={name}\n extension={extension}\n selected={selected}\n {...restProps}\n variant=\"Doc\"\n >\n <CardAsset width=\"100%\" height={size === 'S' ? `8.8rem` : `16.4rem`} justifyContent=\"center\">\n <Flex gap={2} direction=\"column\" alignItems=\"center\">\n {extension === 'pdf' ? (\n <FilePdf aria-label={name} fill=\"neutral500\" width={24} height={24} />\n ) : (\n <File aria-label={name} fill=\"neutral500\" width={24} height={24} />\n )}\n\n <Typography textColor=\"neutral500\" variant=\"pi\">\n {formatMessage({\n id: 'noPreview',\n defaultMessage: 'No preview available',\n })}\n </Typography>\n </Flex>\n </CardAsset>\n </AssetCardBase>\n );\n};\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","DocAssetCard","name","extension","size","selected","restProps","formatMessage","useIntl","_jsx","AssetCardBase","variant","width","height","justifyContent","_jsxs","gap","direction","alignItems","FilePdf","aria-label","fill","File","Typography","textColor","id","defaultMessage"],"mappings":";;;;;;;AAOA,MAAMA,SAAAA,GAAYC,MAAOC,CAAAA,IAAAA,CAAK;AACb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAME,CAAAA,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AAOYC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,IAAI,EACJC,SAAS,EACTC,IAAAA,GAAO,GAAG,EACVC,QAAAA,GAAW,KAAK,EAChB,GAAGC,SACe,EAAA,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,qBACEC,GAACC,CAAAA,aAAAA,EAAAA;QACCR,IAAMA,EAAAA,IAAAA;QACNC,SAAWA,EAAAA,SAAAA;QACXE,QAAUA,EAAAA,QAAAA;AACT,QAAA,GAAGC,SAAS;QACbK,OAAQ,EAAA,KAAA;AAER,QAAA,QAAA,gBAAAF,GAAChB,CAAAA,SAAAA,EAAAA;YAAUmB,KAAM,EAAA,MAAA;YAAOC,MAAQT,EAAAA,IAAAA,KAAS,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;YAAEU,cAAe,EAAA,QAAA;AAClF,YAAA,QAAA,gBAAAC,IAACpB,CAAAA,IAAAA,EAAAA;gBAAKqB,GAAK,EAAA,CAAA;gBAAGC,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,QAAA;;AACzCf,oBAAAA,SAAAA,KAAc,sBACbM,GAACU,CAAAA,OAAAA,EAAAA;wBAAQC,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;uCAEhEJ,GAACa,CAAAA,IAAAA,EAAAA;wBAAKF,YAAYlB,EAAAA,IAAAA;wBAAMmB,IAAK,EAAA,YAAA;wBAAaT,KAAO,EAAA,EAAA;wBAAIC,MAAQ,EAAA;;kCAG/DJ,GAACc,CAAAA,UAAAA,EAAAA;wBAAWC,SAAU,EAAA,YAAA;wBAAab,OAAQ,EAAA,IAAA;kCACxCJ,aAAc,CAAA;4BACbkB,EAAI,EAAA,WAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;;;;AAMZ;;;;"}

View File

@@ -0,0 +1,37 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var appendSearchParamsToUrl = require('../../utils/appendSearchParamsToUrl.js');
require('byte-size');
require('date-fns');
require('qs');
require('../../constants.js');
require('../../utils/urlYupSchema.js');
var AssetCardBase = require('./AssetCardBase.js');
const ImageAssetCard = ({ height, width, thumbnail, size = 'M', alt, isUrlSigned, selected = false, ...props })=>{
// appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)
// applied only if the url is not signed to prevent the signature from being invalidated
const thumbnailUrl = isUrlSigned ? thumbnail : appendSearchParamsToUrl.appendSearchParamsToUrl({
url: thumbnail,
params: {
updatedAt: props.updatedAt
}
});
const subtitle = height && width ? ` - ${width}${height}` : undefined;
return /*#__PURE__*/ jsxRuntime.jsx(AssetCardBase.AssetCardBase, {
...props,
selected: selected,
subtitle: subtitle,
variant: "Image",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardAsset, {
src: thumbnailUrl,
size: size,
alt: alt
})
});
};
exports.ImageAssetCard = ImageAssetCard;
//# sourceMappingURL=ImageAssetCard.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ImageAssetCard.js","sources":["../../../../admin/src/components/AssetCard/ImageAssetCard.tsx"],"sourcesContent":["import { CardAsset } from '@strapi/design-system';\n\nimport { appendSearchParamsToUrl } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\ninterface ImageAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n height?: number;\n width?: number;\n size?: 'S' | 'M';\n thumbnail: string;\n alt: string;\n updatedAt?: string;\n isUrlSigned: boolean;\n}\n\nexport const ImageAssetCard = ({\n height,\n width,\n thumbnail,\n size = 'M',\n alt,\n isUrlSigned,\n selected = false,\n ...props\n}: ImageAssetCardProps) => {\n // appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)\n // applied only if the url is not signed to prevent the signature from being invalidated\n const thumbnailUrl = isUrlSigned\n ? thumbnail\n : appendSearchParamsToUrl({\n url: thumbnail,\n params: { updatedAt: props.updatedAt },\n });\n const subtitle = height && width ? ` - ${width}✕${height}` : undefined;\n\n return (\n <AssetCardBase {...props} selected={selected} subtitle={subtitle} variant=\"Image\">\n <CardAsset src={thumbnailUrl} size={size} alt={alt} />\n </AssetCardBase>\n );\n};\n"],"names":["ImageAssetCard","height","width","thumbnail","size","alt","isUrlSigned","selected","props","thumbnailUrl","appendSearchParamsToUrl","url","params","updatedAt","subtitle","undefined","_jsx","AssetCardBase","variant","CardAsset","src"],"mappings":";;;;;;;;;;;;AAgBO,MAAMA,iBAAiB,CAAC,EAC7BC,MAAM,EACNC,KAAK,EACLC,SAAS,EACTC,OAAO,GAAG,EACVC,GAAG,EACHC,WAAW,EACXC,QAAW,GAAA,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;;;IAGpB,MAAMC,YAAAA,GAAeH,WACjBH,GAAAA,SAAAA,GACAO,+CAAwB,CAAA;QACtBC,GAAKR,EAAAA,SAAAA;QACLS,MAAQ,EAAA;AAAEC,YAAAA,SAAAA,EAAWL,MAAMK;AAAU;AACvC,KAAA,CAAA;IACJ,MAAMC,QAAAA,GAAWb,MAAUC,IAAAA,KAAAA,GAAQ,CAAC,GAAG,EAAEA,KAAAA,CAAM,CAAC,EAAED,MAAO,CAAA,CAAC,GAAGc,SAAAA;AAE7D,IAAA,qBACEC,cAACC,CAAAA,2BAAAA,EAAAA;AAAe,QAAA,GAAGT,KAAK;QAAED,QAAUA,EAAAA,QAAAA;QAAUO,QAAUA,EAAAA,QAAAA;QAAUI,OAAQ,EAAA,OAAA;AACxE,QAAA,QAAA,gBAAAF,cAACG,CAAAA,sBAAAA,EAAAA;YAAUC,GAAKX,EAAAA,YAAAA;YAAcL,IAAMA,EAAAA,IAAAA;YAAMC,GAAKA,EAAAA;;;AAGrD;;;;"}

View File

@@ -0,0 +1,35 @@
import { jsx } from 'react/jsx-runtime';
import { CardAsset } from '@strapi/design-system';
import { appendSearchParamsToUrl } from '../../utils/appendSearchParamsToUrl.mjs';
import 'byte-size';
import 'date-fns';
import 'qs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
import { AssetCardBase } from './AssetCardBase.mjs';
const ImageAssetCard = ({ height, width, thumbnail, size = 'M', alt, isUrlSigned, selected = false, ...props })=>{
// appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)
// applied only if the url is not signed to prevent the signature from being invalidated
const thumbnailUrl = isUrlSigned ? thumbnail : appendSearchParamsToUrl({
url: thumbnail,
params: {
updatedAt: props.updatedAt
}
});
const subtitle = height && width ? ` - ${width}${height}` : undefined;
return /*#__PURE__*/ jsx(AssetCardBase, {
...props,
selected: selected,
subtitle: subtitle,
variant: "Image",
children: /*#__PURE__*/ jsx(CardAsset, {
src: thumbnailUrl,
size: size,
alt: alt
})
});
};
export { ImageAssetCard };
//# sourceMappingURL=ImageAssetCard.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ImageAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/ImageAssetCard.tsx"],"sourcesContent":["import { CardAsset } from '@strapi/design-system';\n\nimport { appendSearchParamsToUrl } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\n\ninterface ImageAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n height?: number;\n width?: number;\n size?: 'S' | 'M';\n thumbnail: string;\n alt: string;\n updatedAt?: string;\n isUrlSigned: boolean;\n}\n\nexport const ImageAssetCard = ({\n height,\n width,\n thumbnail,\n size = 'M',\n alt,\n isUrlSigned,\n selected = false,\n ...props\n}: ImageAssetCardProps) => {\n // appending the updatedAt param to the thumbnail URL prevents it from being cached by the browser (cache busting)\n // applied only if the url is not signed to prevent the signature from being invalidated\n const thumbnailUrl = isUrlSigned\n ? thumbnail\n : appendSearchParamsToUrl({\n url: thumbnail,\n params: { updatedAt: props.updatedAt },\n });\n const subtitle = height && width ? ` - ${width}✕${height}` : undefined;\n\n return (\n <AssetCardBase {...props} selected={selected} subtitle={subtitle} variant=\"Image\">\n <CardAsset src={thumbnailUrl} size={size} alt={alt} />\n </AssetCardBase>\n );\n};\n"],"names":["ImageAssetCard","height","width","thumbnail","size","alt","isUrlSigned","selected","props","thumbnailUrl","appendSearchParamsToUrl","url","params","updatedAt","subtitle","undefined","_jsx","AssetCardBase","variant","CardAsset","src"],"mappings":";;;;;;;;;;AAgBO,MAAMA,iBAAiB,CAAC,EAC7BC,MAAM,EACNC,KAAK,EACLC,SAAS,EACTC,OAAO,GAAG,EACVC,GAAG,EACHC,WAAW,EACXC,QAAW,GAAA,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;;;IAGpB,MAAMC,YAAAA,GAAeH,WACjBH,GAAAA,SAAAA,GACAO,uBAAwB,CAAA;QACtBC,GAAKR,EAAAA,SAAAA;QACLS,MAAQ,EAAA;AAAEC,YAAAA,SAAAA,EAAWL,MAAMK;AAAU;AACvC,KAAA,CAAA;IACJ,MAAMC,QAAAA,GAAWb,MAAUC,IAAAA,KAAAA,GAAQ,CAAC,GAAG,EAAEA,KAAAA,CAAM,CAAC,EAAED,MAAO,CAAA,CAAC,GAAGc,SAAAA;AAE7D,IAAA,qBACEC,GAACC,CAAAA,aAAAA,EAAAA;AAAe,QAAA,GAAGT,KAAK;QAAED,QAAUA,EAAAA,QAAAA;QAAUO,QAAUA,EAAAA,QAAAA;QAAUI,OAAQ,EAAA,OAAA;AACxE,QAAA,QAAA,gBAAAF,GAACG,CAAAA,SAAAA,EAAAA;YAAUC,GAAKX,EAAAA,YAAAA;YAAcL,IAAMA,EAAAA,IAAAA;YAAMC,GAAKA,EAAAA;;;AAGrD;;;;"}

View File

@@ -0,0 +1,152 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var designSystem = require('@strapi/design-system');
var reactIntl = require('react-intl');
var styledComponents = require('styled-components');
var constants = require('../../constants.js');
var useUpload = require('../../hooks/useUpload.js');
require('byte-size');
require('date-fns');
var getTrad = require('../../utils/getTrad.js');
require('qs');
require('../../utils/urlYupSchema.js');
var UploadProgress = require('../UploadProgress/UploadProgress.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 UploadProgressWrapper = styledComponents.styled.div`
height: 8.8rem;
width: 100%;
`;
const Extension = styledComponents.styled.span`
text-transform: uppercase;
`;
const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploadedFiles, folderId = null })=>{
const { upload, cancel, error, progress, status } = useUpload.useUpload();
const { formatMessage } = reactIntl.useIntl();
let badgeContent = formatMessage({
id: getTrad.getTrad('settings.section.doc.label'),
defaultMessage: 'Doc'
});
if (asset.type === constants.AssetType.Image) {
badgeContent = formatMessage({
id: getTrad.getTrad('settings.section.image.label'),
defaultMessage: 'Image'
});
} else if (asset.type === constants.AssetType.Video) {
badgeContent = formatMessage({
id: getTrad.getTrad('settings.section.video.label'),
defaultMessage: 'Video'
});
} else if (asset.type === constants.AssetType.Audio) {
badgeContent = formatMessage({
id: getTrad.getTrad('settings.section.audio.label'),
defaultMessage: 'Audio'
});
}
React__namespace.useEffect(()=>{
const uploadFile = async ()=>{
const files = await upload(asset, folderId ? Number(folderId) : null);
if (addUploadedFiles) {
addUploadedFiles(files);
}
};
uploadFile();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React__namespace.useEffect(()=>{
onStatusChange(status);
}, [
status,
onStatusChange
]);
const handleCancel = ()=>{
cancel();
onCancel(asset.rawFile);
};
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
direction: "column",
alignItems: "stretch",
gap: 1,
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Card, {
borderColor: error ? 'danger600' : 'neutral150',
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.CardHeader, {
children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgressWrapper, {
children: /*#__PURE__*/ jsxRuntime.jsx(UploadProgress.UploadProgress, {
error: error || undefined,
onCancel: handleCancel,
progress: progress
})
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardBody, {
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.CardContent, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingTop: 1,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
tag: "h2",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardTitle, {
tag: "span",
children: asset.name
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.CardSubtitle, {
children: /*#__PURE__*/ jsxRuntime.jsx(Extension, {
children: asset.ext
})
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
paddingTop: 1,
grow: 1,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.CardBadge, {
children: badgeContent
})
})
]
})
]
}),
error ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
variant: "pi",
fontWeight: "bold",
textColor: "danger600",
children: formatMessage(error?.message ? {
id: getTrad.getTrad(`apiError.${error.message}`),
defaultMessage: error.message
} : {
id: getTrad.getTrad('upload.generic-error'),
defaultMessage: 'An error occured while uploading the file.'
})
}) : undefined
]
});
};
exports.UploadingAssetCard = UploadingAssetCard;
//# sourceMappingURL=UploadingAssetCard.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,131 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Flex, Card, CardHeader, CardBody, CardContent, Box, Typography, CardTitle, CardSubtitle, CardBadge } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import { AssetType } from '../../constants.mjs';
import { useUpload } from '../../hooks/useUpload.mjs';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../utils/getTrad.mjs';
import 'qs';
import '../../utils/urlYupSchema.mjs';
import { UploadProgress } from '../UploadProgress/UploadProgress.mjs';
const UploadProgressWrapper = styled.div`
height: 8.8rem;
width: 100%;
`;
const Extension = styled.span`
text-transform: uppercase;
`;
const UploadingAssetCard = ({ asset, onCancel, onStatusChange, addUploadedFiles, folderId = null })=>{
const { upload, cancel, error, progress, status } = useUpload();
const { formatMessage } = useIntl();
let badgeContent = formatMessage({
id: getTrad('settings.section.doc.label'),
defaultMessage: 'Doc'
});
if (asset.type === AssetType.Image) {
badgeContent = formatMessage({
id: getTrad('settings.section.image.label'),
defaultMessage: 'Image'
});
} else if (asset.type === AssetType.Video) {
badgeContent = formatMessage({
id: getTrad('settings.section.video.label'),
defaultMessage: 'Video'
});
} else if (asset.type === AssetType.Audio) {
badgeContent = formatMessage({
id: getTrad('settings.section.audio.label'),
defaultMessage: 'Audio'
});
}
React.useEffect(()=>{
const uploadFile = async ()=>{
const files = await upload(asset, folderId ? Number(folderId) : null);
if (addUploadedFiles) {
addUploadedFiles(files);
}
};
uploadFile();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(()=>{
onStatusChange(status);
}, [
status,
onStatusChange
]);
const handleCancel = ()=>{
cancel();
onCancel(asset.rawFile);
};
return /*#__PURE__*/ jsxs(Flex, {
direction: "column",
alignItems: "stretch",
gap: 1,
children: [
/*#__PURE__*/ jsxs(Card, {
borderColor: error ? 'danger600' : 'neutral150',
children: [
/*#__PURE__*/ jsx(CardHeader, {
children: /*#__PURE__*/ jsx(UploadProgressWrapper, {
children: /*#__PURE__*/ jsx(UploadProgress, {
error: error || undefined,
onCancel: handleCancel,
progress: progress
})
})
}),
/*#__PURE__*/ jsxs(CardBody, {
children: [
/*#__PURE__*/ jsxs(CardContent, {
children: [
/*#__PURE__*/ jsx(Box, {
paddingTop: 1,
children: /*#__PURE__*/ jsx(Typography, {
tag: "h2",
children: /*#__PURE__*/ jsx(CardTitle, {
tag: "span",
children: asset.name
})
})
}),
/*#__PURE__*/ jsx(CardSubtitle, {
children: /*#__PURE__*/ jsx(Extension, {
children: asset.ext
})
})
]
}),
/*#__PURE__*/ jsx(Flex, {
paddingTop: 1,
grow: 1,
children: /*#__PURE__*/ jsx(CardBadge, {
children: badgeContent
})
})
]
})
]
}),
error ? /*#__PURE__*/ jsx(Typography, {
variant: "pi",
fontWeight: "bold",
textColor: "danger600",
children: formatMessage(error?.message ? {
id: getTrad(`apiError.${error.message}`),
defaultMessage: error.message
} : {
id: getTrad('upload.generic-error'),
defaultMessage: 'An error occured while uploading the file.'
})
}) : undefined
]
});
};
export { UploadingAssetCard };
//# sourceMappingURL=UploadingAssetCard.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,72 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var designSystem = require('@strapi/design-system');
var styledComponents = require('styled-components');
require('byte-size');
var formatDuration = require('../../utils/formatDuration.js');
require('qs');
require('../../constants.js');
require('../../utils/urlYupSchema.js');
var AssetCardBase = require('./AssetCardBase.js');
var VideoPreview = require('./VideoPreview.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 VideoPreviewWrapper = styledComponents.styled(designSystem.Box)`
canvas,
video {
display: block;
pointer-events: none;
max-width: 100%;
max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
}
`;
const VideoAssetCard = ({ name, url, mime, size = 'M', selected = false, ...props })=>{
const [duration, setDuration] = React__namespace.useState();
const formattedDuration = duration && formatDuration.formatDuration(duration);
return /*#__PURE__*/ jsxRuntime.jsxs(AssetCardBase.AssetCardBase, {
selected: selected,
name: name,
...props,
variant: "Video",
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.CardAsset, {
size: size,
children: /*#__PURE__*/ jsxRuntime.jsx(VideoPreviewWrapper, {
size: size,
children: /*#__PURE__*/ jsxRuntime.jsx(VideoPreview.VideoPreview, {
url: url,
mime: mime,
onLoadDuration: setDuration,
alt: name
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.CardTimer, {
children: formattedDuration || '...'
})
]
});
};
exports.VideoAssetCard = VideoAssetCard;
//# sourceMappingURL=VideoAssetCard.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"VideoAssetCard.js","sources":["../../../../admin/src/components/AssetCard/VideoAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, CardAsset, CardTimer } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { formatDuration } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { VideoPreview } from './VideoPreview';\n\nconst VideoPreviewWrapper = styled(Box)`\n canvas,\n video {\n display: block;\n pointer-events: none;\n max-width: 100%;\n max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n }\n`;\n\ninterface VideoAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n mime: string;\n url: string;\n size?: 'S' | 'M';\n}\n\nexport const VideoAssetCard = ({\n name,\n url,\n mime,\n size = 'M',\n selected = false,\n ...props\n}: VideoAssetCardProps) => {\n const [duration, setDuration] = React.useState<number>();\n\n const formattedDuration = duration && formatDuration(duration);\n\n return (\n <AssetCardBase selected={selected} name={name} {...props} variant=\"Video\">\n <CardAsset size={size}>\n <VideoPreviewWrapper size={size}>\n <VideoPreview url={url} mime={mime} onLoadDuration={setDuration} alt={name} />\n </VideoPreviewWrapper>\n </CardAsset>\n <CardTimer>{formattedDuration || '...'}</CardTimer>\n </AssetCardBase>\n );\n};\n"],"names":["VideoPreviewWrapper","styled","Box","size","VideoAssetCard","name","url","mime","selected","props","duration","setDuration","React","useState","formattedDuration","formatDuration","_jsxs","AssetCardBase","variant","_jsx","CardAsset","VideoPreview","onLoadDuration","alt","CardTimer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,mBAAAA,GAAsBC,uBAAOC,CAAAA,gBAAAA,CAAI;;;;;;gBAMvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;MAQYC,cAAiB,GAAA,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHC,IAAI,EACJJ,OAAO,GAAG,EACVK,WAAW,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;AACpB,IAAA,MAAM,CAACC,QAAAA,EAAUC,WAAY,CAAA,GAAGC,iBAAMC,QAAQ,EAAA;IAE9C,MAAMC,iBAAAA,GAAoBJ,YAAYK,6BAAeL,CAAAA,QAAAA,CAAAA;AAErD,IAAA,qBACEM,eAACC,CAAAA,2BAAAA,EAAAA;QAAcT,QAAUA,EAAAA,QAAAA;QAAUH,IAAMA,EAAAA,IAAAA;AAAO,QAAA,GAAGI,KAAK;QAAES,OAAQ,EAAA,OAAA;;0BAChEC,cAACC,CAAAA,sBAAAA,EAAAA;gBAAUjB,IAAMA,EAAAA,IAAAA;AACf,gBAAA,QAAA,gBAAAgB,cAACnB,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAgB,cAACE,CAAAA,yBAAAA,EAAAA;wBAAaf,GAAKA,EAAAA,GAAAA;wBAAKC,IAAMA,EAAAA,IAAAA;wBAAMe,cAAgBX,EAAAA,WAAAA;wBAAaY,GAAKlB,EAAAA;;;;0BAG1Ec,cAACK,CAAAA,sBAAAA,EAAAA;0BAAWV,iBAAqB,IAAA;;;;AAGvC;;;;"}

View File

@@ -0,0 +1,51 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Box, CardAsset, CardTimer } from '@strapi/design-system';
import { styled } from 'styled-components';
import 'byte-size';
import { formatDuration } from '../../utils/formatDuration.mjs';
import 'qs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
import { AssetCardBase } from './AssetCardBase.mjs';
import { VideoPreview } from './VideoPreview.mjs';
const VideoPreviewWrapper = styled(Box)`
canvas,
video {
display: block;
pointer-events: none;
max-width: 100%;
max-height: ${({ size })=>size === 'M' ? 16.4 : 8.8}rem;
}
`;
const VideoAssetCard = ({ name, url, mime, size = 'M', selected = false, ...props })=>{
const [duration, setDuration] = React.useState();
const formattedDuration = duration && formatDuration(duration);
return /*#__PURE__*/ jsxs(AssetCardBase, {
selected: selected,
name: name,
...props,
variant: "Video",
children: [
/*#__PURE__*/ jsx(CardAsset, {
size: size,
children: /*#__PURE__*/ jsx(VideoPreviewWrapper, {
size: size,
children: /*#__PURE__*/ jsx(VideoPreview, {
url: url,
mime: mime,
onLoadDuration: setDuration,
alt: name
})
})
}),
/*#__PURE__*/ jsx(CardTimer, {
children: formattedDuration || '...'
})
]
});
};
export { VideoAssetCard };
//# sourceMappingURL=VideoAssetCard.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"VideoAssetCard.mjs","sources":["../../../../admin/src/components/AssetCard/VideoAssetCard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, CardAsset, CardTimer } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { formatDuration } from '../../utils';\n\nimport { AssetCardBase, AssetCardBaseProps } from './AssetCardBase';\nimport { VideoPreview } from './VideoPreview';\n\nconst VideoPreviewWrapper = styled(Box)`\n canvas,\n video {\n display: block;\n pointer-events: none;\n max-width: 100%;\n max-height: ${({ size }) => (size === 'M' ? 16.4 : 8.8)}rem;\n }\n`;\n\ninterface VideoAssetCardProps extends Omit<AssetCardBaseProps, 'variant' | 'children'> {\n mime: string;\n url: string;\n size?: 'S' | 'M';\n}\n\nexport const VideoAssetCard = ({\n name,\n url,\n mime,\n size = 'M',\n selected = false,\n ...props\n}: VideoAssetCardProps) => {\n const [duration, setDuration] = React.useState<number>();\n\n const formattedDuration = duration && formatDuration(duration);\n\n return (\n <AssetCardBase selected={selected} name={name} {...props} variant=\"Video\">\n <CardAsset size={size}>\n <VideoPreviewWrapper size={size}>\n <VideoPreview url={url} mime={mime} onLoadDuration={setDuration} alt={name} />\n </VideoPreviewWrapper>\n </CardAsset>\n <CardTimer>{formattedDuration || '...'}</CardTimer>\n </AssetCardBase>\n );\n};\n"],"names":["VideoPreviewWrapper","styled","Box","size","VideoAssetCard","name","url","mime","selected","props","duration","setDuration","React","useState","formattedDuration","formatDuration","_jsxs","AssetCardBase","variant","_jsx","CardAsset","VideoPreview","onLoadDuration","alt","CardTimer"],"mappings":";;;;;;;;;;;;AAUA,MAAMA,mBAAAA,GAAsBC,MAAOC,CAAAA,GAAAA,CAAI;;;;;;gBAMvB,EAAE,CAAC,EAAEC,IAAI,EAAE,GAAMA,IAAS,KAAA,GAAA,GAAM,OAAO,GAAK,CAAA;;AAE5D,CAAC;MAQYC,cAAiB,GAAA,CAAC,EAC7BC,IAAI,EACJC,GAAG,EACHC,IAAI,EACJJ,OAAO,GAAG,EACVK,WAAW,KAAK,EAChB,GAAGC,KACiB,EAAA,GAAA;AACpB,IAAA,MAAM,CAACC,QAAAA,EAAUC,WAAY,CAAA,GAAGC,MAAMC,QAAQ,EAAA;IAE9C,MAAMC,iBAAAA,GAAoBJ,YAAYK,cAAeL,CAAAA,QAAAA,CAAAA;AAErD,IAAA,qBACEM,IAACC,CAAAA,aAAAA,EAAAA;QAAcT,QAAUA,EAAAA,QAAAA;QAAUH,IAAMA,EAAAA,IAAAA;AAAO,QAAA,GAAGI,KAAK;QAAES,OAAQ,EAAA,OAAA;;0BAChEC,GAACC,CAAAA,SAAAA,EAAAA;gBAAUjB,IAAMA,EAAAA,IAAAA;AACf,gBAAA,QAAA,gBAAAgB,GAACnB,CAAAA,mBAAAA,EAAAA;oBAAoBG,IAAMA,EAAAA,IAAAA;AACzB,oBAAA,QAAA,gBAAAgB,GAACE,CAAAA,YAAAA,EAAAA;wBAAaf,GAAKA,EAAAA,GAAAA;wBAAKC,IAAMA,EAAAA,IAAAA;wBAAMe,cAAgBX,EAAAA,WAAAA;wBAAaY,GAAKlB,EAAAA;;;;0BAG1Ec,GAACK,CAAAA,SAAAA,EAAAA;0BAAWV,iBAAqB,IAAA;;;;AAGvC;;;;"}

View File

@@ -0,0 +1,50 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
require('react');
var designSystem = require('@strapi/design-system');
// According to MDN
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value
const HAVE_FUTURE_DATA = 3;
const VideoPreview = ({ url, mime, onLoadDuration = ()=>{}, alt, ...props })=>{
const handleTimeUpdate = (e)=>{
if (e.currentTarget.currentTime > 0) {
const video = e.currentTarget;
const canvas = document.createElement('canvas');
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
video.replaceWith(canvas);
onLoadDuration && onLoadDuration(video.duration);
}
};
const handleThumbnailVisibility = (e)=>{
const video = e.currentTarget;
if (video.readyState < HAVE_FUTURE_DATA) return;
video.play();
};
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
tag: "figure",
...props,
children: [
/*#__PURE__*/ jsxRuntime.jsx("video", {
muted: true,
onLoadedData: handleThumbnailVisibility,
src: url,
crossOrigin: "anonymous",
onTimeUpdate: handleTimeUpdate,
children: /*#__PURE__*/ jsxRuntime.jsx("source", {
type: mime
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
tag: "figcaption",
children: alt
})
]
}, url);
};
exports.VideoPreview = VideoPreview;
//# sourceMappingURL=VideoPreview.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"VideoPreview.js","sources":["../../../../admin/src/components/AssetCard/VideoPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, VisuallyHidden } from '@strapi/design-system';\n\n// According to MDN\n// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value\nconst HAVE_FUTURE_DATA = 3;\n\ninterface VideoPreviewProps {\n alt: string;\n url: string;\n mime: string;\n onLoadDuration?: (duration?: number) => void;\n size?: 'S' | 'M';\n}\n\nexport const VideoPreview = ({\n url,\n mime,\n onLoadDuration = () => {},\n alt,\n ...props\n}: VideoPreviewProps) => {\n const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n if (e.currentTarget.currentTime > 0) {\n const video = e.currentTarget;\n const canvas = document.createElement('canvas');\n\n canvas.height = video.videoHeight;\n canvas.width = video.videoWidth;\n canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n\n video.replaceWith(canvas);\n onLoadDuration && onLoadDuration(video.duration);\n }\n };\n\n const handleThumbnailVisibility = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n const video = e.currentTarget;\n\n if (video.readyState < HAVE_FUTURE_DATA) return;\n\n video.play();\n };\n\n return (\n <Box tag=\"figure\" key={url} {...props}>\n <video\n muted\n onLoadedData={handleThumbnailVisibility}\n src={url}\n crossOrigin=\"anonymous\"\n onTimeUpdate={handleTimeUpdate}\n >\n <source type={mime} />\n </video>\n <VisuallyHidden tag=\"figcaption\">{alt}</VisuallyHidden>\n </Box>\n );\n};\n"],"names":["HAVE_FUTURE_DATA","VideoPreview","url","mime","onLoadDuration","alt","props","handleTimeUpdate","e","currentTarget","currentTime","video","canvas","document","createElement","height","videoHeight","width","videoWidth","getContext","drawImage","replaceWith","duration","handleThumbnailVisibility","readyState","play","_jsxs","Box","tag","_jsx","muted","onLoadedData","src","crossOrigin","onTimeUpdate","source","type","VisuallyHidden"],"mappings":";;;;;;AAIA;AACA;AACA,MAAMA,gBAAmB,GAAA,CAAA;AAUZC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,GAAG,EACHC,IAAI,EACJC,cAAAA,GAAiB,MAAQ,EACzBC,GAAG,EACH,GAAGC,KACe,EAAA,GAAA;AAClB,IAAA,MAAMC,mBAAmB,CAACC,CAAAA,GAAAA;AACxB,QAAA,IAAIA,CAAEC,CAAAA,aAAa,CAACC,WAAW,GAAG,CAAG,EAAA;YACnC,MAAMC,KAAAA,GAAQH,EAAEC,aAAa;YAC7B,MAAMG,MAAAA,GAASC,QAASC,CAAAA,aAAa,CAAC,QAAA,CAAA;YAEtCF,MAAOG,CAAAA,MAAM,GAAGJ,KAAAA,CAAMK,WAAW;YACjCJ,MAAOK,CAAAA,KAAK,GAAGN,KAAAA,CAAMO,UAAU;YAC/BN,MAAOO,CAAAA,UAAU,CAAC,IAAA,CAAA,EAAOC,SAAUT,CAAAA,KAAAA,EAAO,CAAG,EAAA,CAAA,EAAGA,KAAMO,CAAAA,UAAU,EAAEP,KAAAA,CAAMK,WAAW,CAAA;AAEnFL,YAAAA,KAAAA,CAAMU,WAAW,CAACT,MAAAA,CAAAA;YAClBR,cAAkBA,IAAAA,cAAAA,CAAeO,MAAMW,QAAQ,CAAA;AACjD;AACF,KAAA;AAEA,IAAA,MAAMC,4BAA4B,CAACf,CAAAA,GAAAA;QACjC,MAAMG,KAAAA,GAAQH,EAAEC,aAAa;QAE7B,IAAIE,KAAAA,CAAMa,UAAU,GAAGxB,gBAAkB,EAAA;AAEzCW,QAAAA,KAAAA,CAAMc,IAAI,EAAA;AACZ,KAAA;AAEA,IAAA,qBACEC,eAACC,CAAAA,gBAAAA,EAAAA;QAAIC,GAAI,EAAA,QAAA;AAAoB,QAAA,GAAGtB,KAAK;;0BACnCuB,cAAClB,CAAAA,OAAAA,EAAAA;gBACCmB,KAAK,EAAA,IAAA;gBACLC,YAAcR,EAAAA,yBAAAA;gBACdS,GAAK9B,EAAAA,GAAAA;gBACL+B,WAAY,EAAA,WAAA;gBACZC,YAAc3B,EAAAA,gBAAAA;AAEd,gBAAA,QAAA,gBAAAsB,cAACM,CAAAA,QAAAA,EAAAA;oBAAOC,IAAMjC,EAAAA;;;0BAEhB0B,cAACQ,CAAAA,2BAAAA,EAAAA;gBAAeT,GAAI,EAAA,YAAA;AAAcvB,gBAAAA,QAAAA,EAAAA;;;AAVbH,KAAAA,EAAAA,GAAAA,CAAAA;AAa3B;;;;"}

View File

@@ -0,0 +1,48 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import 'react';
import { Box, VisuallyHidden } from '@strapi/design-system';
// According to MDN
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value
const HAVE_FUTURE_DATA = 3;
const VideoPreview = ({ url, mime, onLoadDuration = ()=>{}, alt, ...props })=>{
const handleTimeUpdate = (e)=>{
if (e.currentTarget.currentTime > 0) {
const video = e.currentTarget;
const canvas = document.createElement('canvas');
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
video.replaceWith(canvas);
onLoadDuration && onLoadDuration(video.duration);
}
};
const handleThumbnailVisibility = (e)=>{
const video = e.currentTarget;
if (video.readyState < HAVE_FUTURE_DATA) return;
video.play();
};
return /*#__PURE__*/ jsxs(Box, {
tag: "figure",
...props,
children: [
/*#__PURE__*/ jsx("video", {
muted: true,
onLoadedData: handleThumbnailVisibility,
src: url,
crossOrigin: "anonymous",
onTimeUpdate: handleTimeUpdate,
children: /*#__PURE__*/ jsx("source", {
type: mime
})
}),
/*#__PURE__*/ jsx(VisuallyHidden, {
tag: "figcaption",
children: alt
})
]
}, url);
};
export { VideoPreview };
//# sourceMappingURL=VideoPreview.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"VideoPreview.mjs","sources":["../../../../admin/src/components/AssetCard/VideoPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, VisuallyHidden } from '@strapi/design-system';\n\n// According to MDN\n// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#value\nconst HAVE_FUTURE_DATA = 3;\n\ninterface VideoPreviewProps {\n alt: string;\n url: string;\n mime: string;\n onLoadDuration?: (duration?: number) => void;\n size?: 'S' | 'M';\n}\n\nexport const VideoPreview = ({\n url,\n mime,\n onLoadDuration = () => {},\n alt,\n ...props\n}: VideoPreviewProps) => {\n const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n if (e.currentTarget.currentTime > 0) {\n const video = e.currentTarget;\n const canvas = document.createElement('canvas');\n\n canvas.height = video.videoHeight;\n canvas.width = video.videoWidth;\n canvas.getContext('2d')?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n\n video.replaceWith(canvas);\n onLoadDuration && onLoadDuration(video.duration);\n }\n };\n\n const handleThumbnailVisibility = (e: React.SyntheticEvent<HTMLVideoElement>) => {\n const video = e.currentTarget;\n\n if (video.readyState < HAVE_FUTURE_DATA) return;\n\n video.play();\n };\n\n return (\n <Box tag=\"figure\" key={url} {...props}>\n <video\n muted\n onLoadedData={handleThumbnailVisibility}\n src={url}\n crossOrigin=\"anonymous\"\n onTimeUpdate={handleTimeUpdate}\n >\n <source type={mime} />\n </video>\n <VisuallyHidden tag=\"figcaption\">{alt}</VisuallyHidden>\n </Box>\n );\n};\n"],"names":["HAVE_FUTURE_DATA","VideoPreview","url","mime","onLoadDuration","alt","props","handleTimeUpdate","e","currentTarget","currentTime","video","canvas","document","createElement","height","videoHeight","width","videoWidth","getContext","drawImage","replaceWith","duration","handleThumbnailVisibility","readyState","play","_jsxs","Box","tag","_jsx","muted","onLoadedData","src","crossOrigin","onTimeUpdate","source","type","VisuallyHidden"],"mappings":";;;;AAIA;AACA;AACA,MAAMA,gBAAmB,GAAA,CAAA;AAUZC,MAAAA,YAAAA,GAAe,CAAC,EAC3BC,GAAG,EACHC,IAAI,EACJC,cAAAA,GAAiB,MAAQ,EACzBC,GAAG,EACH,GAAGC,KACe,EAAA,GAAA;AAClB,IAAA,MAAMC,mBAAmB,CAACC,CAAAA,GAAAA;AACxB,QAAA,IAAIA,CAAEC,CAAAA,aAAa,CAACC,WAAW,GAAG,CAAG,EAAA;YACnC,MAAMC,KAAAA,GAAQH,EAAEC,aAAa;YAC7B,MAAMG,MAAAA,GAASC,QAASC,CAAAA,aAAa,CAAC,QAAA,CAAA;YAEtCF,MAAOG,CAAAA,MAAM,GAAGJ,KAAAA,CAAMK,WAAW;YACjCJ,MAAOK,CAAAA,KAAK,GAAGN,KAAAA,CAAMO,UAAU;YAC/BN,MAAOO,CAAAA,UAAU,CAAC,IAAA,CAAA,EAAOC,SAAUT,CAAAA,KAAAA,EAAO,CAAG,EAAA,CAAA,EAAGA,KAAMO,CAAAA,UAAU,EAAEP,KAAAA,CAAMK,WAAW,CAAA;AAEnFL,YAAAA,KAAAA,CAAMU,WAAW,CAACT,MAAAA,CAAAA;YAClBR,cAAkBA,IAAAA,cAAAA,CAAeO,MAAMW,QAAQ,CAAA;AACjD;AACF,KAAA;AAEA,IAAA,MAAMC,4BAA4B,CAACf,CAAAA,GAAAA;QACjC,MAAMG,KAAAA,GAAQH,EAAEC,aAAa;QAE7B,IAAIE,KAAAA,CAAMa,UAAU,GAAGxB,gBAAkB,EAAA;AAEzCW,QAAAA,KAAAA,CAAMc,IAAI,EAAA;AACZ,KAAA;AAEA,IAAA,qBACEC,IAACC,CAAAA,GAAAA,EAAAA;QAAIC,GAAI,EAAA,QAAA;AAAoB,QAAA,GAAGtB,KAAK;;0BACnCuB,GAAClB,CAAAA,OAAAA,EAAAA;gBACCmB,KAAK,EAAA,IAAA;gBACLC,YAAcR,EAAAA,yBAAAA;gBACdS,GAAK9B,EAAAA,GAAAA;gBACL+B,WAAY,EAAA,WAAA;gBACZC,YAAc3B,EAAAA,gBAAAA;AAEd,gBAAA,QAAA,gBAAAsB,GAACM,CAAAA,QAAAA,EAAAA;oBAAOC,IAAMjC,EAAAA;;;0BAEhB0B,GAACQ,CAAAA,cAAAA,EAAAA;gBAAeT,GAAI,EAAA,YAAA;AAAcvB,gBAAAA,QAAAA,EAAAA;;;AAVbH,KAAAA,EAAAA,GAAAA,CAAAA;AAa3B;;;;"}

View File

@@ -0,0 +1,321 @@
'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');
var styledComponents = require('styled-components');
var useAssets = require('../../hooks/useAssets.js');
var useFolders = require('../../hooks/useFolders.js');
var useMediaLibraryPermissions = require('../../hooks/useMediaLibraryPermissions.js');
var useModalQueryParams = require('../../hooks/useModalQueryParams.js');
var useSelectionState = require('../../hooks/useSelectionState.js');
var containsAssetFilter = require('../../utils/containsAssetFilter.js');
require('byte-size');
require('date-fns');
var getAllowedFiles = require('../../utils/getAllowedFiles.js');
var getTrad = require('../../utils/getTrad.js');
require('qs');
var moveElement = require('../../utils/moveElement.js');
require('../../constants.js');
require('../../utils/urlYupSchema.js');
var EditAssetContent = require('../EditAssetDialog/EditAssetContent.js');
var EditFolderDialog = require('../EditFolderDialog/EditFolderDialog.js');
var BrowseStep = require('./BrowseStep/BrowseStep.js');
var DialogFooter = require('./DialogFooter.js');
var SelectedStep = require('./SelectedStep/SelectedStep.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);
// TODO: find a better naming convention for the file that was an index file before
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 AssetContent = ({ allowedTypes = [], folderId = null, onClose, onAddAsset, onAddFolder, onChangeFolder, onValidate, multiple = false, initiallySelectedAssets = [], trackedLocation })=>{
const [assetToEdit, setAssetToEdit] = React__namespace.useState(undefined);
const [folderToEdit, setFolderToEdit] = React__namespace.useState(undefined);
const { formatMessage } = reactIntl.useIntl();
const { canRead, canCreate, isLoading: isLoadingPermissions, canUpdate, canCopyLink, canDownload } = useMediaLibraryPermissions.useMediaLibraryPermissions();
const [{ queryObject }, { onChangeFilters, onChangePage, onChangePageSize, onChangeSort, onChangeSearch, onChangeFolder: onChangeFolderParam }] = useModalQueryParams.useModalQueryParams({
folder: folderId
});
const { data: { pagination, results: assets } = {}, isLoading: isLoadingAssets, error: errorAssets } = useAssets.useAssets({
skipWhen: !canRead,
query: queryObject
});
const { data: folders, isLoading: isLoadingFolders, error: errorFolders } = useFolders.useFolders({
enabled: canRead && !containsAssetFilter.containsAssetFilter(queryObject) && pagination?.page === 1,
query: queryObject
});
const [selectedAssets, { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple }] = useSelectionState.useSelectionState([
'id'
], initiallySelectedAssets);
const handleSelectAllAssets = ()=>{
const allowedAssets = getAllowedFiles.getAllowedFiles(allowedTypes, assets);
if (!multiple) {
return undefined;
}
// selected files in current folder
const alreadySelected = allowedAssets.filter((asset)=>selectedAssets.findIndex((selectedAsset)=>selectedAsset.id === asset.id) !== -1);
if (alreadySelected.length > 0) {
deselectMultiple(alreadySelected);
} else {
selectMultiple(allowedAssets);
}
};
const handleSelectAsset = (asset)=>{
return multiple ? selectOne(asset) : selectOnly(asset);
};
const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;
const hasError = errorAssets || errorFolders;
if (isLoading) {
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(LoadingBody, {
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(DialogFooter.DialogFooter, {
onClose: onClose
})
]
});
}
if (hasError) {
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(strapiAdmin.Page.Error, {}),
/*#__PURE__*/ jsxRuntime.jsx(DialogFooter.DialogFooter, {
onClose: onClose
})
]
});
}
if (!canRead) {
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(strapiAdmin.Page.NoPermissions, {}),
/*#__PURE__*/ jsxRuntime.jsx(DialogFooter.DialogFooter, {
onClose: onClose
})
]
});
}
if (assetToEdit) {
return /*#__PURE__*/ jsxRuntime.jsx(EditAssetContent.EditAssetContent, {
onClose: ()=>setAssetToEdit(undefined),
asset: assetToEdit,
canUpdate: canUpdate,
canCopyLink: canCopyLink,
canDownload: canDownload,
trackedLocation: trackedLocation
});
}
if (folderToEdit) {
return /*#__PURE__*/ jsxRuntime.jsx(EditFolderDialog.EditFolderContent, {
folder: folderToEdit,
onClose: ()=>setFolderToEdit(undefined),
location: "content-manager",
parentFolderId: queryObject?.folder
});
}
const handleMoveItem = (hoverIndex, destIndex)=>{
const offset = destIndex - hoverIndex;
const orderedAssetsClone = selectedAssets.slice();
const nextAssets = moveElement.moveElement(orderedAssetsClone, hoverIndex, offset);
setSelections(nextAssets);
};
const handleFolderChange = (folderId, folderPath)=>{
onChangeFolder(folderId);
if (onChangeFolderParam) {
onChangeFolderParam(folderId, folderPath);
}
};
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(TabsRoot, {
variant: "simple",
defaultValue: selectedAssets.length > 0 ? 'selected' : 'browse',
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
paddingLeft: 8,
paddingRight: 8,
paddingTop: 6,
justifyContent: "space-between",
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.List, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Trigger, {
value: "browse",
children: formatMessage({
id: getTrad.getTrad('modal.nav.browse'),
defaultMessage: 'Browse'
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Tabs.Trigger, {
value: "selected",
children: [
formatMessage({
id: getTrad.getTrad('modal.header.select-files'),
defaultMessage: 'Selected files'
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Badge, {
marginLeft: 2,
children: selectedAssets.length
})
]
})
]
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 2,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
variant: "secondary",
onClick: ()=>onAddFolder({
folderId: queryObject?.folder
}),
children: formatMessage({
id: getTrad.getTrad('modal.upload-list.sub-header.add-folder'),
defaultMessage: 'Add folder'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: ()=>onAddAsset({
folderId: queryObject?.folder
}),
children: formatMessage({
id: getTrad.getTrad('modal.upload-list.sub-header.button'),
defaultMessage: 'Add more assets'
})
})
]
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Body, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
value: "browse",
children: /*#__PURE__*/ jsxRuntime.jsx(BrowseStep.BrowseStep, {
allowedTypes: allowedTypes,
assets: assets,
canCreate: canCreate,
canRead: canRead,
folders: folders,
onSelectAsset: handleSelectAsset,
selectedAssets: selectedAssets,
multiple: multiple,
onSelectAllAsset: handleSelectAllAssets,
onEditAsset: setAssetToEdit,
onEditFolder: setFolderToEdit,
pagination: pagination,
queryObject: queryObject,
onAddAsset: onAddAsset,
onChangeFilters: (filters)=>onChangeFilters(filters),
onChangeFolder: handleFolderChange,
onChangePage: onChangePage,
onChangePageSize: onChangePageSize,
onChangeSort: (sort)=>onChangeSort(sort),
onChangeSearch: onChangeSearch
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Tabs.Content, {
value: "selected",
children: /*#__PURE__*/ jsxRuntime.jsx(SelectedStep.SelectedStep, {
selectedAssets: selectedAssets,
onSelectAsset: handleSelectAsset,
onReorderAsset: handleMoveItem
})
})
]
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(DialogFooter.DialogFooter, {
onClose: onClose,
onValidate: ()=>onValidate(selectedAssets)
})
]
});
};
const AssetDialog = ({ open = false, onClose, ...restProps })=>{
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Root, {
open: open,
onOpenChange: onClose,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
children: /*#__PURE__*/ jsxRuntime.jsx(AssetContent, {
onClose: onClose,
...restProps
})
})
});
};
const TabsRoot = styledComponents.styled(designSystem.Tabs.Root)`
display: flex;
flex-direction: column;
overflow: hidden;
`;
exports.AssetContent = AssetContent;
exports.AssetDialog = AssetDialog;
//# sourceMappingURL=AssetDialog.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,299 @@
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import * as React from 'react';
import { Page } from '@strapi/admin/strapi-admin';
import { Flex, Tabs, Modal, Loader, Badge, Button, Divider } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import { useAssets } from '../../hooks/useAssets.mjs';
import { useFolders } from '../../hooks/useFolders.mjs';
import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions.mjs';
import { useModalQueryParams } from '../../hooks/useModalQueryParams.mjs';
import { useSelectionState } from '../../hooks/useSelectionState.mjs';
import { containsAssetFilter } from '../../utils/containsAssetFilter.mjs';
import 'byte-size';
import 'date-fns';
import { getAllowedFiles } from '../../utils/getAllowedFiles.mjs';
import { getTrad } from '../../utils/getTrad.mjs';
import 'qs';
import { moveElement } from '../../utils/moveElement.mjs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
import { EditAssetContent } from '../EditAssetDialog/EditAssetContent.mjs';
import { EditFolderContent } from '../EditFolderDialog/EditFolderDialog.mjs';
import { BrowseStep } from './BrowseStep/BrowseStep.mjs';
import { DialogFooter } from './DialogFooter.mjs';
import { SelectedStep } from './SelectedStep/SelectedStep.mjs';
// TODO: find a better naming convention for the file that was an index file before
const LoadingBody = styled(Flex)`
/* 80px are coming from the Tabs component that is not included in the ModalBody */
min-height: ${()=>`calc(60vh + 8rem)`};
`;
const AssetContent = ({ allowedTypes = [], folderId = null, onClose, onAddAsset, onAddFolder, onChangeFolder, onValidate, multiple = false, initiallySelectedAssets = [], trackedLocation })=>{
const [assetToEdit, setAssetToEdit] = React.useState(undefined);
const [folderToEdit, setFolderToEdit] = React.useState(undefined);
const { formatMessage } = useIntl();
const { canRead, canCreate, isLoading: isLoadingPermissions, canUpdate, canCopyLink, canDownload } = useMediaLibraryPermissions();
const [{ queryObject }, { onChangeFilters, onChangePage, onChangePageSize, onChangeSort, onChangeSearch, onChangeFolder: onChangeFolderParam }] = useModalQueryParams({
folder: folderId
});
const { data: { pagination, results: assets } = {}, isLoading: isLoadingAssets, error: errorAssets } = useAssets({
skipWhen: !canRead,
query: queryObject
});
const { data: folders, isLoading: isLoadingFolders, error: errorFolders } = useFolders({
enabled: canRead && !containsAssetFilter(queryObject) && pagination?.page === 1,
query: queryObject
});
const [selectedAssets, { selectOne, selectOnly, setSelections, selectMultiple, deselectMultiple }] = useSelectionState([
'id'
], initiallySelectedAssets);
const handleSelectAllAssets = ()=>{
const allowedAssets = getAllowedFiles(allowedTypes, assets);
if (!multiple) {
return undefined;
}
// selected files in current folder
const alreadySelected = allowedAssets.filter((asset)=>selectedAssets.findIndex((selectedAsset)=>selectedAsset.id === asset.id) !== -1);
if (alreadySelected.length > 0) {
deselectMultiple(alreadySelected);
} else {
selectMultiple(allowedAssets);
}
};
const handleSelectAsset = (asset)=>{
return multiple ? selectOne(asset) : selectOnly(asset);
};
const isLoading = isLoadingPermissions || isLoadingAssets || isLoadingFolders;
const hasError = errorAssets || errorFolders;
if (isLoading) {
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(LoadingBody, {
justifyContent: "center",
paddingTop: 4,
paddingBottom: 4,
children: /*#__PURE__*/ jsx(Loader, {
children: formatMessage({
id: getTrad('content.isLoading'),
defaultMessage: 'Content is loading.'
})
})
}),
/*#__PURE__*/ jsx(DialogFooter, {
onClose: onClose
})
]
});
}
if (hasError) {
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(Page.Error, {}),
/*#__PURE__*/ jsx(DialogFooter, {
onClose: onClose
})
]
});
}
if (!canRead) {
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(Page.NoPermissions, {}),
/*#__PURE__*/ jsx(DialogFooter, {
onClose: onClose
})
]
});
}
if (assetToEdit) {
return /*#__PURE__*/ jsx(EditAssetContent, {
onClose: ()=>setAssetToEdit(undefined),
asset: assetToEdit,
canUpdate: canUpdate,
canCopyLink: canCopyLink,
canDownload: canDownload,
trackedLocation: trackedLocation
});
}
if (folderToEdit) {
return /*#__PURE__*/ jsx(EditFolderContent, {
folder: folderToEdit,
onClose: ()=>setFolderToEdit(undefined),
location: "content-manager",
parentFolderId: queryObject?.folder
});
}
const handleMoveItem = (hoverIndex, destIndex)=>{
const offset = destIndex - hoverIndex;
const orderedAssetsClone = selectedAssets.slice();
const nextAssets = moveElement(orderedAssetsClone, hoverIndex, offset);
setSelections(nextAssets);
};
const handleFolderChange = (folderId, folderPath)=>{
onChangeFolder(folderId);
if (onChangeFolderParam) {
onChangeFolderParam(folderId, folderPath);
}
};
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(TabsRoot, {
variant: "simple",
defaultValue: selectedAssets.length > 0 ? 'selected' : 'browse',
children: [
/*#__PURE__*/ jsxs(Flex, {
paddingLeft: 8,
paddingRight: 8,
paddingTop: 6,
justifyContent: "space-between",
children: [
/*#__PURE__*/ jsxs(Tabs.List, {
children: [
/*#__PURE__*/ jsx(Tabs.Trigger, {
value: "browse",
children: formatMessage({
id: getTrad('modal.nav.browse'),
defaultMessage: 'Browse'
})
}),
/*#__PURE__*/ jsxs(Tabs.Trigger, {
value: "selected",
children: [
formatMessage({
id: getTrad('modal.header.select-files'),
defaultMessage: 'Selected files'
}),
/*#__PURE__*/ jsx(Badge, {
marginLeft: 2,
children: selectedAssets.length
})
]
})
]
}),
/*#__PURE__*/ jsxs(Flex, {
gap: 2,
children: [
/*#__PURE__*/ jsx(Button, {
variant: "secondary",
onClick: ()=>onAddFolder({
folderId: queryObject?.folder
}),
children: formatMessage({
id: getTrad('modal.upload-list.sub-header.add-folder'),
defaultMessage: 'Add folder'
})
}),
/*#__PURE__*/ jsx(Button, {
onClick: ()=>onAddAsset({
folderId: queryObject?.folder
}),
children: formatMessage({
id: getTrad('modal.upload-list.sub-header.button'),
defaultMessage: 'Add more assets'
})
})
]
})
]
}),
/*#__PURE__*/ jsx(Divider, {}),
/*#__PURE__*/ jsxs(Modal.Body, {
children: [
/*#__PURE__*/ jsx(Tabs.Content, {
value: "browse",
children: /*#__PURE__*/ jsx(BrowseStep, {
allowedTypes: allowedTypes,
assets: assets,
canCreate: canCreate,
canRead: canRead,
folders: folders,
onSelectAsset: handleSelectAsset,
selectedAssets: selectedAssets,
multiple: multiple,
onSelectAllAsset: handleSelectAllAssets,
onEditAsset: setAssetToEdit,
onEditFolder: setFolderToEdit,
pagination: pagination,
queryObject: queryObject,
onAddAsset: onAddAsset,
onChangeFilters: (filters)=>onChangeFilters(filters),
onChangeFolder: handleFolderChange,
onChangePage: onChangePage,
onChangePageSize: onChangePageSize,
onChangeSort: (sort)=>onChangeSort(sort),
onChangeSearch: onChangeSearch
})
}),
/*#__PURE__*/ jsx(Tabs.Content, {
value: "selected",
children: /*#__PURE__*/ jsx(SelectedStep, {
selectedAssets: selectedAssets,
onSelectAsset: handleSelectAsset,
onReorderAsset: handleMoveItem
})
})
]
})
]
}),
/*#__PURE__*/ jsx(DialogFooter, {
onClose: onClose,
onValidate: ()=>onValidate(selectedAssets)
})
]
});
};
const AssetDialog = ({ open = false, onClose, ...restProps })=>{
return /*#__PURE__*/ jsx(Modal.Root, {
open: open,
onOpenChange: onClose,
children: /*#__PURE__*/ jsx(Modal.Content, {
children: /*#__PURE__*/ jsx(AssetContent, {
onClose: onClose,
...restProps
})
})
});
};
const TabsRoot = styled(Tabs.Root)`
display: flex;
flex-direction: column;
overflow: hidden;
`;
export { AssetContent, AssetDialog };
//# sourceMappingURL=AssetDialog.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,313 @@
'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');
var constants = require('../../../constants.js');
var useFolder = require('../../../hooks/useFolder.js');
var usePersistentState = require('../../../hooks/usePersistentState.js');
require('byte-size');
require('date-fns');
var getAllowedFiles = require('../../../utils/getAllowedFiles.js');
var getBreadcrumbDataCM = require('../../../utils/getBreadcrumbDataCM.js');
require('qs');
var getTrad = require('../../../utils/getTrad.js');
var toSingularTypes = require('../../../utils/toSingularTypes.js');
require('../../../utils/urlYupSchema.js');
var AssetGridList = require('../../AssetGridList/AssetGridList.js');
var Breadcrumbs = require('../../Breadcrumbs/Breadcrumbs.js');
var EmptyAssets = require('../../EmptyAssets/EmptyAssets.js');
var FolderCard = require('../../FolderCard/FolderCard/FolderCard.js');
var FolderCardBody = require('../../FolderCard/FolderCardBody/FolderCardBody.js');
var FolderCardBodyAction = require('../../FolderCard/FolderCardBodyAction/FolderCardBodyAction.js');
var FolderGridList = require('../../FolderGridList/FolderGridList.js');
var SortPicker = require('../../SortPicker/SortPicker.js');
var TableList = require('../../TableList/TableList.js');
var Filters = require('./Filters.js');
var PageSize = require('./PageSize.js');
var PaginationFooter = require('./PaginationFooter/PaginationFooter.js');
var SearchAsset = require('./SearchAsset/SearchAsset.js');
var isSelectable = require('./utils/isSelectable.js');
// TODO: find a better naming convention for the file that was an index file before
const TypographyMaxWidth = styledComponents.styled(designSystem.Typography)`
max-width: 100%;
`;
const ActionContainer = styledComponents.styled(designSystem.Box)`
svg {
path {
fill: ${({ theme })=>theme.colors.neutral500};
}
}
`;
const BrowseStep = ({ allowedTypes = [], assets: rawAssets, canCreate, canRead, folders = [], multiple = false, onAddAsset, onChangeFilters, onChangePage, onChangePageSize, onChangeSearch, onChangeSort, onChangeFolder, onEditAsset, onEditFolder, onSelectAllAsset, onSelectAsset, pagination, queryObject, selectedAssets })=>{
const { formatMessage } = reactIntl.useIntl();
const [view, setView] = usePersistentState.usePersistentState(constants.localStorageKeys.modalView, constants.viewOptions.GRID);
const isGridView = view === constants.viewOptions.GRID;
const { data: currentFolder, isLoading: isCurrentFolderLoading } = useFolder.useFolder(queryObject?.folder, {
enabled: canRead && !!queryObject?.folder
});
const singularTypes = toSingularTypes.toSingularTypes(allowedTypes);
const assets = rawAssets.map((asset)=>({
...asset,
isSelectable: isSelectable.isSelectable(singularTypes, asset?.mime),
type: 'asset'
}));
const breadcrumbs = !isCurrentFolderLoading ? getBreadcrumbDataCM.getBreadcrumbDataCM(currentFolder) : undefined;
const allAllowedAsset = getAllowedFiles.getAllowedFiles(allowedTypes, assets);
const areAllAssetSelected = allAllowedAsset.length > 0 && selectedAssets.length > 0 && allAllowedAsset.every((asset)=>selectedAssets.findIndex((currAsset)=>currAsset.id === asset.id) !== -1);
const hasSomeAssetSelected = allAllowedAsset.some((asset)=>selectedAssets.findIndex((currAsset)=>currAsset.id === asset.id) !== -1);
const isSearching = !!queryObject?._q;
const isFiltering = !!queryObject?.filters?.$and?.length && queryObject.filters.$and.length > 0;
const isSearchingOrFiltering = isSearching || isFiltering;
const assetCount = assets.length;
const folderCount = folders.length;
const handleClickFolderCard = (...args)=>{
// Search query will always fetch the same results
// we remove it here to allow navigating in a folder and see the result of this navigation
onChangeSearch('');
onChangeFolder(...args);
};
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Box, {
children: [
onSelectAllAsset && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingBottom: 4,
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
justifyContent: "space-between",
alignItems: "flex-start",
children: [
(assetCount > 0 || folderCount > 0 || isFiltering) && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 2,
wrap: "wrap",
children: [
multiple && isGridView && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
paddingLeft: 2,
paddingRight: 2,
background: "neutral0",
hasRadius: true,
borderColor: "neutral200",
height: "3.2rem",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Checkbox, {
"aria-label": formatMessage({
id: getTrad.getTrad('bulk.select.label'),
defaultMessage: 'Select all assets'
}),
checked: !areAllAssetSelected && hasSomeAssetSelected ? 'indeterminate' : areAllAssetSelected,
onCheckedChange: onSelectAllAsset
})
}),
isGridView && /*#__PURE__*/ jsxRuntime.jsx(SortPicker.SortPicker, {
onChangeSort: onChangeSort,
value: queryObject?.sort
}),
/*#__PURE__*/ jsxRuntime.jsx(Filters.Filters, {
appliedFilters: queryObject?.filters?.$and,
onChangeFilters: onChangeFilters
})
]
}),
(assetCount > 0 || folderCount > 0 || isSearching) && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
marginLeft: "auto",
shrink: 0,
gap: 2,
children: [
/*#__PURE__*/ jsxRuntime.jsx(ActionContainer, {
paddingTop: 1,
paddingBottom: 1,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: isGridView ? formatMessage({
id: 'view-switch.list',
defaultMessage: 'List View'
}) : formatMessage({
id: 'view-switch.grid',
defaultMessage: 'Grid View'
}),
onClick: ()=>setView(isGridView ? constants.viewOptions.LIST : constants.viewOptions.GRID),
children: isGridView ? /*#__PURE__*/ jsxRuntime.jsx(icons.List, {}) : /*#__PURE__*/ jsxRuntime.jsx(icons.GridFour, {})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(SearchAsset.SearchAsset, {
onChangeSearch: onChangeSearch,
queryValue: queryObject._q || ''
})
]
})
]
})
}),
canRead && breadcrumbs?.length && breadcrumbs.length > 0 && currentFolder && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingTop: 3,
children: /*#__PURE__*/ jsxRuntime.jsx(Breadcrumbs.Breadcrumbs, {
onChangeFolder: onChangeFolder,
label: formatMessage({
id: getTrad.getTrad('header.breadcrumbs.nav.label'),
defaultMessage: 'Folders navigation'
}),
breadcrumbs: breadcrumbs,
currentFolderId: queryObject?.folder
})
}),
assetCount === 0 && folderCount === 0 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingBottom: 6,
children: /*#__PURE__*/ jsxRuntime.jsx(EmptyAssets.EmptyAssets, {
size: "S",
count: 6,
action: canCreate && !isFiltering && !isSearching && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
variant: "secondary",
startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Plus, {}),
onClick: onAddAsset,
children: formatMessage({
id: getTrad.getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
}),
content: // eslint-disable-next-line no-nested-ternary
isSearchingOrFiltering ? formatMessage({
id: getTrad.getTrad('list.assets-empty.title-withSearch'),
defaultMessage: 'There are no assets with the applied filters'
}) : canCreate && !isSearching ? formatMessage({
id: getTrad.getTrad('list.assets.empty'),
defaultMessage: 'Upload your first assets...'
}) : formatMessage({
id: getTrad.getTrad('list.assets.empty.no-permissions'),
defaultMessage: 'The asset list is empty'
})
})
}),
!isGridView && (folderCount > 0 || assetCount > 0) && /*#__PURE__*/ jsxRuntime.jsx(TableList.TableList, {
allowedTypes: allowedTypes,
assetCount: assetCount,
folderCount: folderCount,
indeterminate: !areAllAssetSelected && hasSomeAssetSelected,
isFolderSelectionAllowed: false,
onChangeSort: onChangeSort,
onChangeFolder: handleClickFolderCard,
onEditAsset: onEditAsset,
onEditFolder: onEditFolder,
onSelectOne: onSelectAsset,
onSelectAll: onSelectAllAsset,
rows: [
...folders.map((folder)=>({
...folder,
type: 'folder'
})),
...assets
],
selected: selectedAssets,
shouldDisableBulkSelect: !multiple,
sortQuery: queryObject?.sort ?? ''
}),
isGridView && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [
folderCount > 0 && /*#__PURE__*/ jsxRuntime.jsx(FolderGridList.FolderGridList, {
title: (isSearchingOrFiltering && assetCount > 0 || !isSearchingOrFiltering) && formatMessage({
id: getTrad.getTrad('list.folders.title'),
defaultMessage: 'Folders ({count})'
}, {
count: folderCount
}) || '',
children: folders.map((folder)=>{
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
col: 3,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsx(FolderCard.FolderCard, {
ariaLabel: folder.name,
id: `folder-${folder.id}`,
onClick: ()=>handleClickFolderCard(folder.id, folder.path),
cardActions: onEditFolder && /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
withTooltip: false,
label: formatMessage({
id: getTrad.getTrad('list.folder.edit'),
defaultMessage: 'Edit folder'
}),
onClick: ()=>onEditFolder(folder),
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Pencil, {})
}),
children: /*#__PURE__*/ jsxRuntime.jsx(FolderCardBody.FolderCardBody, {
children: /*#__PURE__*/ jsxRuntime.jsx(FolderCardBodyAction.FolderCardBodyAction, {
onClick: ()=>handleClickFolderCard(folder.id, folder.path),
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
tag: "h2",
direction: "column",
alignItems: "start",
maxWidth: "100%",
children: [
/*#__PURE__*/ jsxRuntime.jsxs(TypographyMaxWidth, {
fontWeight: "semiBold",
ellipsis: true,
textColor: "neutral800",
children: [
folder.name,
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
children: "-"
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(TypographyMaxWidth, {
tag: "span",
textColor: "neutral600",
variant: "pi",
ellipsis: true,
children: formatMessage({
id: getTrad.getTrad('list.folder.subtitle'),
defaultMessage: '{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}'
}, {
folderCount: folder.children?.count,
filesCount: folder.files?.count
})
})
]
})
})
})
})
}, `folder-${folder.id}`);
})
}),
assetCount > 0 && folderCount > 0 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingTop: 6,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Divider, {})
}),
assetCount > 0 && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingTop: 6,
children: /*#__PURE__*/ jsxRuntime.jsx(AssetGridList.AssetGridList, {
allowedTypes: allowedTypes,
size: "S",
assets: assets,
onSelectAsset: onSelectAsset,
selectedAssets: selectedAssets,
onEditAsset: onEditAsset,
title: (!isSearchingOrFiltering || isSearchingOrFiltering && folderCount > 0) && queryObject.page === 1 && formatMessage({
id: getTrad.getTrad('list.assets.title'),
defaultMessage: 'Assets ({count})'
}, {
count: assetCount
}) || ''
})
})
]
}),
pagination.pageCount > 0 && /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
justifyContent: "space-between",
paddingTop: 4,
children: [
/*#__PURE__*/ jsxRuntime.jsx(PageSize.PageSize, {
pageSize: queryObject.pageSize,
onChangePageSize: onChangePageSize
}),
/*#__PURE__*/ jsxRuntime.jsx(PaginationFooter.PaginationFooter, {
activePage: queryObject.page,
onChangePage: onChangePage,
pagination: pagination
})
]
})
]
});
};
exports.BrowseStep = BrowseStep;
//# sourceMappingURL=BrowseStep.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,311 @@
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { Typography, Box, Flex, Checkbox, IconButton, Button, Grid, VisuallyHidden, Divider } from '@strapi/design-system';
import { List, GridFour, Plus, Pencil } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled } from 'styled-components';
import { viewOptions, localStorageKeys } from '../../../constants.mjs';
import { useFolder } from '../../../hooks/useFolder.mjs';
import { usePersistentState } from '../../../hooks/usePersistentState.mjs';
import 'byte-size';
import 'date-fns';
import { getAllowedFiles } from '../../../utils/getAllowedFiles.mjs';
import { getBreadcrumbDataCM } from '../../../utils/getBreadcrumbDataCM.mjs';
import 'qs';
import { getTrad } from '../../../utils/getTrad.mjs';
import { toSingularTypes } from '../../../utils/toSingularTypes.mjs';
import '../../../utils/urlYupSchema.mjs';
import { AssetGridList } from '../../AssetGridList/AssetGridList.mjs';
import { Breadcrumbs } from '../../Breadcrumbs/Breadcrumbs.mjs';
import { EmptyAssets } from '../../EmptyAssets/EmptyAssets.mjs';
import { FolderCard } from '../../FolderCard/FolderCard/FolderCard.mjs';
import { FolderCardBody } from '../../FolderCard/FolderCardBody/FolderCardBody.mjs';
import { FolderCardBodyAction } from '../../FolderCard/FolderCardBodyAction/FolderCardBodyAction.mjs';
import { FolderGridList } from '../../FolderGridList/FolderGridList.mjs';
import { SortPicker } from '../../SortPicker/SortPicker.mjs';
import { TableList } from '../../TableList/TableList.mjs';
import { Filters } from './Filters.mjs';
import { PageSize } from './PageSize.mjs';
import { PaginationFooter } from './PaginationFooter/PaginationFooter.mjs';
import { SearchAsset } from './SearchAsset/SearchAsset.mjs';
import { isSelectable } from './utils/isSelectable.mjs';
// TODO: find a better naming convention for the file that was an index file before
const TypographyMaxWidth = styled(Typography)`
max-width: 100%;
`;
const ActionContainer = styled(Box)`
svg {
path {
fill: ${({ theme })=>theme.colors.neutral500};
}
}
`;
const BrowseStep = ({ allowedTypes = [], assets: rawAssets, canCreate, canRead, folders = [], multiple = false, onAddAsset, onChangeFilters, onChangePage, onChangePageSize, onChangeSearch, onChangeSort, onChangeFolder, onEditAsset, onEditFolder, onSelectAllAsset, onSelectAsset, pagination, queryObject, selectedAssets })=>{
const { formatMessage } = useIntl();
const [view, setView] = usePersistentState(localStorageKeys.modalView, viewOptions.GRID);
const isGridView = view === viewOptions.GRID;
const { data: currentFolder, isLoading: isCurrentFolderLoading } = useFolder(queryObject?.folder, {
enabled: canRead && !!queryObject?.folder
});
const singularTypes = toSingularTypes(allowedTypes);
const assets = rawAssets.map((asset)=>({
...asset,
isSelectable: isSelectable(singularTypes, asset?.mime),
type: 'asset'
}));
const breadcrumbs = !isCurrentFolderLoading ? getBreadcrumbDataCM(currentFolder) : undefined;
const allAllowedAsset = getAllowedFiles(allowedTypes, assets);
const areAllAssetSelected = allAllowedAsset.length > 0 && selectedAssets.length > 0 && allAllowedAsset.every((asset)=>selectedAssets.findIndex((currAsset)=>currAsset.id === asset.id) !== -1);
const hasSomeAssetSelected = allAllowedAsset.some((asset)=>selectedAssets.findIndex((currAsset)=>currAsset.id === asset.id) !== -1);
const isSearching = !!queryObject?._q;
const isFiltering = !!queryObject?.filters?.$and?.length && queryObject.filters.$and.length > 0;
const isSearchingOrFiltering = isSearching || isFiltering;
const assetCount = assets.length;
const folderCount = folders.length;
const handleClickFolderCard = (...args)=>{
// Search query will always fetch the same results
// we remove it here to allow navigating in a folder and see the result of this navigation
onChangeSearch('');
onChangeFolder(...args);
};
return /*#__PURE__*/ jsxs(Box, {
children: [
onSelectAllAsset && /*#__PURE__*/ jsx(Box, {
paddingBottom: 4,
children: /*#__PURE__*/ jsxs(Flex, {
justifyContent: "space-between",
alignItems: "flex-start",
children: [
(assetCount > 0 || folderCount > 0 || isFiltering) && /*#__PURE__*/ jsxs(Flex, {
gap: 2,
wrap: "wrap",
children: [
multiple && isGridView && /*#__PURE__*/ jsx(Flex, {
paddingLeft: 2,
paddingRight: 2,
background: "neutral0",
hasRadius: true,
borderColor: "neutral200",
height: "3.2rem",
children: /*#__PURE__*/ jsx(Checkbox, {
"aria-label": formatMessage({
id: getTrad('bulk.select.label'),
defaultMessage: 'Select all assets'
}),
checked: !areAllAssetSelected && hasSomeAssetSelected ? 'indeterminate' : areAllAssetSelected,
onCheckedChange: onSelectAllAsset
})
}),
isGridView && /*#__PURE__*/ jsx(SortPicker, {
onChangeSort: onChangeSort,
value: queryObject?.sort
}),
/*#__PURE__*/ jsx(Filters, {
appliedFilters: queryObject?.filters?.$and,
onChangeFilters: onChangeFilters
})
]
}),
(assetCount > 0 || folderCount > 0 || isSearching) && /*#__PURE__*/ jsxs(Flex, {
marginLeft: "auto",
shrink: 0,
gap: 2,
children: [
/*#__PURE__*/ jsx(ActionContainer, {
paddingTop: 1,
paddingBottom: 1,
children: /*#__PURE__*/ jsx(IconButton, {
label: isGridView ? formatMessage({
id: 'view-switch.list',
defaultMessage: 'List View'
}) : formatMessage({
id: 'view-switch.grid',
defaultMessage: 'Grid View'
}),
onClick: ()=>setView(isGridView ? viewOptions.LIST : viewOptions.GRID),
children: isGridView ? /*#__PURE__*/ jsx(List, {}) : /*#__PURE__*/ jsx(GridFour, {})
})
}),
/*#__PURE__*/ jsx(SearchAsset, {
onChangeSearch: onChangeSearch,
queryValue: queryObject._q || ''
})
]
})
]
})
}),
canRead && breadcrumbs?.length && breadcrumbs.length > 0 && currentFolder && /*#__PURE__*/ jsx(Box, {
paddingTop: 3,
children: /*#__PURE__*/ jsx(Breadcrumbs, {
onChangeFolder: onChangeFolder,
label: formatMessage({
id: getTrad('header.breadcrumbs.nav.label'),
defaultMessage: 'Folders navigation'
}),
breadcrumbs: breadcrumbs,
currentFolderId: queryObject?.folder
})
}),
assetCount === 0 && folderCount === 0 && /*#__PURE__*/ jsx(Box, {
paddingBottom: 6,
children: /*#__PURE__*/ jsx(EmptyAssets, {
size: "S",
count: 6,
action: canCreate && !isFiltering && !isSearching && /*#__PURE__*/ jsx(Button, {
variant: "secondary",
startIcon: /*#__PURE__*/ jsx(Plus, {}),
onClick: onAddAsset,
children: formatMessage({
id: getTrad('header.actions.add-assets'),
defaultMessage: 'Add new assets'
})
}),
content: // eslint-disable-next-line no-nested-ternary
isSearchingOrFiltering ? formatMessage({
id: getTrad('list.assets-empty.title-withSearch'),
defaultMessage: 'There are no assets with the applied filters'
}) : canCreate && !isSearching ? formatMessage({
id: getTrad('list.assets.empty'),
defaultMessage: 'Upload your first assets...'
}) : formatMessage({
id: getTrad('list.assets.empty.no-permissions'),
defaultMessage: 'The asset list is empty'
})
})
}),
!isGridView && (folderCount > 0 || assetCount > 0) && /*#__PURE__*/ jsx(TableList, {
allowedTypes: allowedTypes,
assetCount: assetCount,
folderCount: folderCount,
indeterminate: !areAllAssetSelected && hasSomeAssetSelected,
isFolderSelectionAllowed: false,
onChangeSort: onChangeSort,
onChangeFolder: handleClickFolderCard,
onEditAsset: onEditAsset,
onEditFolder: onEditFolder,
onSelectOne: onSelectAsset,
onSelectAll: onSelectAllAsset,
rows: [
...folders.map((folder)=>({
...folder,
type: 'folder'
})),
...assets
],
selected: selectedAssets,
shouldDisableBulkSelect: !multiple,
sortQuery: queryObject?.sort ?? ''
}),
isGridView && /*#__PURE__*/ jsxs(Fragment, {
children: [
folderCount > 0 && /*#__PURE__*/ jsx(FolderGridList, {
title: (isSearchingOrFiltering && assetCount > 0 || !isSearchingOrFiltering) && formatMessage({
id: getTrad('list.folders.title'),
defaultMessage: 'Folders ({count})'
}, {
count: folderCount
}) || '',
children: folders.map((folder)=>{
return /*#__PURE__*/ jsx(Grid.Item, {
col: 3,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsx(FolderCard, {
ariaLabel: folder.name,
id: `folder-${folder.id}`,
onClick: ()=>handleClickFolderCard(folder.id, folder.path),
cardActions: onEditFolder && /*#__PURE__*/ jsx(IconButton, {
withTooltip: false,
label: formatMessage({
id: getTrad('list.folder.edit'),
defaultMessage: 'Edit folder'
}),
onClick: ()=>onEditFolder(folder),
children: /*#__PURE__*/ jsx(Pencil, {})
}),
children: /*#__PURE__*/ jsx(FolderCardBody, {
children: /*#__PURE__*/ jsx(FolderCardBodyAction, {
onClick: ()=>handleClickFolderCard(folder.id, folder.path),
children: /*#__PURE__*/ jsxs(Flex, {
tag: "h2",
direction: "column",
alignItems: "start",
maxWidth: "100%",
children: [
/*#__PURE__*/ jsxs(TypographyMaxWidth, {
fontWeight: "semiBold",
ellipsis: true,
textColor: "neutral800",
children: [
folder.name,
/*#__PURE__*/ jsx(VisuallyHidden, {
children: "-"
})
]
}),
/*#__PURE__*/ jsx(TypographyMaxWidth, {
tag: "span",
textColor: "neutral600",
variant: "pi",
ellipsis: true,
children: formatMessage({
id: getTrad('list.folder.subtitle'),
defaultMessage: '{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}'
}, {
folderCount: folder.children?.count,
filesCount: folder.files?.count
})
})
]
})
})
})
})
}, `folder-${folder.id}`);
})
}),
assetCount > 0 && folderCount > 0 && /*#__PURE__*/ jsx(Box, {
paddingTop: 6,
children: /*#__PURE__*/ jsx(Divider, {})
}),
assetCount > 0 && /*#__PURE__*/ jsx(Box, {
paddingTop: 6,
children: /*#__PURE__*/ jsx(AssetGridList, {
allowedTypes: allowedTypes,
size: "S",
assets: assets,
onSelectAsset: onSelectAsset,
selectedAssets: selectedAssets,
onEditAsset: onEditAsset,
title: (!isSearchingOrFiltering || isSearchingOrFiltering && folderCount > 0) && queryObject.page === 1 && formatMessage({
id: getTrad('list.assets.title'),
defaultMessage: 'Assets ({count})'
}, {
count: assetCount
}) || ''
})
})
]
}),
pagination.pageCount > 0 && /*#__PURE__*/ jsxs(Flex, {
justifyContent: "space-between",
paddingTop: 4,
children: [
/*#__PURE__*/ jsx(PageSize, {
pageSize: queryObject.pageSize,
onChangePageSize: onChangePageSize
}),
/*#__PURE__*/ jsx(PaginationFooter, {
activePage: queryObject.page,
onChangePage: onChangePage,
pagination: pagination
})
]
})
]
});
};
export { BrowseStep };
//# sourceMappingURL=BrowseStep.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,70 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var designSystem = require('@strapi/design-system');
var icons = require('@strapi/icons');
var reactIntl = require('react-intl');
var displayedFilters = require('../../../utils/displayedFilters.js');
require('byte-size');
require('date-fns');
require('qs');
require('../../../constants.js');
require('../../../utils/urlYupSchema.js');
var FilterList = require('../../FilterList/FilterList.js');
var FilterPopover = require('../../FilterPopover/FilterPopover.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 Filters = ({ appliedFilters, onChangeFilters })=>{
const [open, setOpen] = React__namespace.useState(false);
const { formatMessage } = reactIntl.useIntl();
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Root, {
open: open,
onOpenChange: setOpen,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Popover.Trigger, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
variant: "tertiary",
startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Filter, {}),
size: "S",
children: formatMessage({
id: 'app.utils.filters',
defaultMessage: 'Filters'
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(FilterPopover.FilterPopover, {
onToggle: ()=>setOpen((prev)=>!prev),
displayedFilters: displayedFilters.displayedFilters,
filters: appliedFilters,
onSubmit: onChangeFilters
}),
appliedFilters && /*#__PURE__*/ jsxRuntime.jsx(FilterList.FilterList, {
appliedFilters: appliedFilters,
filtersSchema: displayedFilters.displayedFilters,
onRemoveFilter: onChangeFilters
})
]
});
};
exports.Filters = Filters;
//# sourceMappingURL=Filters.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Filters.js","sources":["../../../../../admin/src/components/AssetDialog/BrowseStep/Filters.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Popover } from '@strapi/design-system';\nimport { Filter } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { displayedFilters } from '../../../utils';\nimport { FilterList } from '../../FilterList/FilterList';\nimport { FilterPopover } from '../../FilterPopover/FilterPopover';\n\ntype NumberKeyedObject = Record<number, string>;\n\ntype StringFilter = {\n [key: string]: string;\n};\n\ntype MimeFilter = {\n [key: string]:\n | string\n | NumberKeyedObject\n | Record<string, string | NumberKeyedObject>\n | undefined;\n};\n\nexport type FilterStructure = {\n [key: string]: MimeFilter | StringFilter | undefined;\n};\n\nexport type Filter = {\n [key in 'mime' | 'createdAt' | 'updatedAt']?:\n | {\n [key in '$contains' | '$notContains' | '$eq' | '$not']?:\n | string[]\n | string\n | { $contains: string[] };\n }\n | undefined;\n};\n\ninterface FiltersProps {\n appliedFilters: FilterStructure[];\n onChangeFilters: (filters: Filter[]) => void;\n}\n\nexport const Filters = ({ appliedFilters, onChangeFilters }: FiltersProps) => {\n const [open, setOpen] = React.useState(false);\n const { formatMessage } = useIntl();\n\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <Popover.Trigger>\n <Button variant=\"tertiary\" startIcon={<Filter />} size=\"S\">\n {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}\n </Button>\n </Popover.Trigger>\n <FilterPopover\n onToggle={() => setOpen((prev) => !prev)}\n displayedFilters={displayedFilters}\n filters={appliedFilters}\n onSubmit={onChangeFilters}\n />\n\n {appliedFilters && (\n <FilterList\n appliedFilters={appliedFilters}\n filtersSchema={displayedFilters}\n onRemoveFilter={onChangeFilters}\n />\n )}\n </Popover.Root>\n );\n};\n"],"names":["Filters","appliedFilters","onChangeFilters","open","setOpen","React","useState","formatMessage","useIntl","_jsxs","Popover","Root","onOpenChange","_jsx","Trigger","Button","variant","startIcon","Filter","size","id","defaultMessage","FilterPopover","onToggle","prev","displayedFilters","filters","onSubmit","FilterList","filtersSchema","onRemoveFilter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4CaA,OAAU,GAAA,CAAC,EAAEC,cAAc,EAAEC,eAAe,EAAgB,GAAA;AACvE,IAAA,MAAM,CAACC,IAAMC,EAAAA,OAAAA,CAAQ,GAAGC,gBAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IACvC,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,qBACEC,eAAA,CAACC,qBAAQC,IAAI,EAAA;QAACR,IAAMA,EAAAA,IAAAA;QAAMS,YAAcR,EAAAA,OAAAA;;AACtC,0BAAAS,cAAA,CAACH,qBAAQI,OAAO,EAAA;AACd,gBAAA,QAAA,gBAAAD,cAACE,CAAAA,mBAAAA,EAAAA;oBAAOC,OAAQ,EAAA,UAAA;AAAWC,oBAAAA,SAAAA,gBAAWJ,cAACK,CAAAA,YAAAA,EAAAA,EAAAA,CAAAA;oBAAWC,IAAK,EAAA,GAAA;8BACpDZ,aAAc,CAAA;wBAAEa,EAAI,EAAA,mBAAA;wBAAqBC,cAAgB,EAAA;AAAU,qBAAA;;;0BAGxER,cAACS,CAAAA,2BAAAA,EAAAA;AACCC,gBAAAA,QAAAA,EAAU,IAAMnB,OAAAA,CAAQ,CAACoB,IAAAA,GAAS,CAACA,IAAAA,CAAAA;gBACnCC,gBAAkBA,EAAAA,iCAAAA;gBAClBC,OAASzB,EAAAA,cAAAA;gBACT0B,QAAUzB,EAAAA;;AAGXD,YAAAA,cAAAA,kBACCY,cAACe,CAAAA,qBAAAA,EAAAA;gBACC3B,cAAgBA,EAAAA,cAAAA;gBAChB4B,aAAeJ,EAAAA,iCAAAA;gBACfK,cAAgB5B,EAAAA;;;;AAK1B;;;;"}

View File

@@ -0,0 +1,49 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Popover, Button } from '@strapi/design-system';
import { Filter } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { displayedFilters } from '../../../utils/displayedFilters.mjs';
import 'byte-size';
import 'date-fns';
import 'qs';
import '../../../constants.mjs';
import '../../../utils/urlYupSchema.mjs';
import { FilterList } from '../../FilterList/FilterList.mjs';
import { FilterPopover } from '../../FilterPopover/FilterPopover.mjs';
const Filters = ({ appliedFilters, onChangeFilters })=>{
const [open, setOpen] = React.useState(false);
const { formatMessage } = useIntl();
return /*#__PURE__*/ jsxs(Popover.Root, {
open: open,
onOpenChange: setOpen,
children: [
/*#__PURE__*/ jsx(Popover.Trigger, {
children: /*#__PURE__*/ jsx(Button, {
variant: "tertiary",
startIcon: /*#__PURE__*/ jsx(Filter, {}),
size: "S",
children: formatMessage({
id: 'app.utils.filters',
defaultMessage: 'Filters'
})
})
}),
/*#__PURE__*/ jsx(FilterPopover, {
onToggle: ()=>setOpen((prev)=>!prev),
displayedFilters: displayedFilters,
filters: appliedFilters,
onSubmit: onChangeFilters
}),
appliedFilters && /*#__PURE__*/ jsx(FilterList, {
appliedFilters: appliedFilters,
filtersSchema: displayedFilters,
onRemoveFilter: onChangeFilters
})
]
});
};
export { Filters };
//# sourceMappingURL=Filters.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Filters.mjs","sources":["../../../../../admin/src/components/AssetDialog/BrowseStep/Filters.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Popover } from '@strapi/design-system';\nimport { Filter } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\nimport { displayedFilters } from '../../../utils';\nimport { FilterList } from '../../FilterList/FilterList';\nimport { FilterPopover } from '../../FilterPopover/FilterPopover';\n\ntype NumberKeyedObject = Record<number, string>;\n\ntype StringFilter = {\n [key: string]: string;\n};\n\ntype MimeFilter = {\n [key: string]:\n | string\n | NumberKeyedObject\n | Record<string, string | NumberKeyedObject>\n | undefined;\n};\n\nexport type FilterStructure = {\n [key: string]: MimeFilter | StringFilter | undefined;\n};\n\nexport type Filter = {\n [key in 'mime' | 'createdAt' | 'updatedAt']?:\n | {\n [key in '$contains' | '$notContains' | '$eq' | '$not']?:\n | string[]\n | string\n | { $contains: string[] };\n }\n | undefined;\n};\n\ninterface FiltersProps {\n appliedFilters: FilterStructure[];\n onChangeFilters: (filters: Filter[]) => void;\n}\n\nexport const Filters = ({ appliedFilters, onChangeFilters }: FiltersProps) => {\n const [open, setOpen] = React.useState(false);\n const { formatMessage } = useIntl();\n\n return (\n <Popover.Root open={open} onOpenChange={setOpen}>\n <Popover.Trigger>\n <Button variant=\"tertiary\" startIcon={<Filter />} size=\"S\">\n {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}\n </Button>\n </Popover.Trigger>\n <FilterPopover\n onToggle={() => setOpen((prev) => !prev)}\n displayedFilters={displayedFilters}\n filters={appliedFilters}\n onSubmit={onChangeFilters}\n />\n\n {appliedFilters && (\n <FilterList\n appliedFilters={appliedFilters}\n filtersSchema={displayedFilters}\n onRemoveFilter={onChangeFilters}\n />\n )}\n </Popover.Root>\n );\n};\n"],"names":["Filters","appliedFilters","onChangeFilters","open","setOpen","React","useState","formatMessage","useIntl","_jsxs","Popover","Root","onOpenChange","_jsx","Trigger","Button","variant","startIcon","Filter","size","id","defaultMessage","FilterPopover","onToggle","prev","displayedFilters","filters","onSubmit","FilterList","filtersSchema","onRemoveFilter"],"mappings":";;;;;;;;;;;;;;MA4CaA,OAAU,GAAA,CAAC,EAAEC,cAAc,EAAEC,eAAe,EAAgB,GAAA;AACvE,IAAA,MAAM,CAACC,IAAMC,EAAAA,OAAAA,CAAQ,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IACvC,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,IAAA,CAACC,QAAQC,IAAI,EAAA;QAACR,IAAMA,EAAAA,IAAAA;QAAMS,YAAcR,EAAAA,OAAAA;;AACtC,0BAAAS,GAAA,CAACH,QAAQI,OAAO,EAAA;AACd,gBAAA,QAAA,gBAAAD,GAACE,CAAAA,MAAAA,EAAAA;oBAAOC,OAAQ,EAAA,UAAA;AAAWC,oBAAAA,SAAAA,gBAAWJ,GAACK,CAAAA,MAAAA,EAAAA,EAAAA,CAAAA;oBAAWC,IAAK,EAAA,GAAA;8BACpDZ,aAAc,CAAA;wBAAEa,EAAI,EAAA,mBAAA;wBAAqBC,cAAgB,EAAA;AAAU,qBAAA;;;0BAGxER,GAACS,CAAAA,aAAAA,EAAAA;AACCC,gBAAAA,QAAAA,EAAU,IAAMnB,OAAAA,CAAQ,CAACoB,IAAAA,GAAS,CAACA,IAAAA,CAAAA;gBACnCC,gBAAkBA,EAAAA,gBAAAA;gBAClBC,OAASzB,EAAAA,cAAAA;gBACT0B,QAAUzB,EAAAA;;AAGXD,YAAAA,cAAAA,kBACCY,GAACe,CAAAA,UAAAA,EAAAA;gBACC3B,cAAgBA,EAAAA,cAAAA;gBAChB4B,aAAeJ,EAAAA,gBAAAA;gBACfK,cAAgB5B,EAAAA;;;;AAK1B;;;;"}

View File

@@ -0,0 +1,58 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var reactIntl = require('react-intl');
const PageSize = ({ onChangePageSize, pageSize })=>{
const { formatMessage } = reactIntl.useIntl();
const handleChange = (value)=>{
onChangePageSize(Number(value));
};
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.SingleSelect, {
size: "S",
"aria-label": formatMessage({
id: 'components.PageFooter.select',
defaultMessage: 'Entries per page'
}),
onChange: handleChange,
value: pageSize.toString(),
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
value: "10",
children: "10"
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
value: "20",
children: "20"
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
value: "50",
children: "50"
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.SingleSelectOption, {
value: "100",
children: "100"
})
]
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingLeft: 2,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
textColor: "neutral600",
tag: "label",
htmlFor: "page-size",
children: formatMessage({
id: 'components.PageFooter.select',
defaultMessage: 'Entries per page'
})
})
})
]
});
};
exports.PageSize = PageSize;
//# sourceMappingURL=PageSize.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"PageSize.js","sources":["../../../../../admin/src/components/AssetDialog/BrowseStep/PageSize.tsx"],"sourcesContent":["import { Box, Flex, SingleSelectOption, SingleSelect, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\ninterface PageSizeProps {\n onChangePageSize: (value: number) => void;\n pageSize: number;\n}\n\nexport const PageSize = ({ onChangePageSize, pageSize }: PageSizeProps) => {\n const { formatMessage } = useIntl();\n\n const handleChange = (value: string | number) => {\n onChangePageSize(Number(value));\n };\n\n return (\n <Flex>\n <SingleSelect\n size=\"S\"\n aria-label={formatMessage({\n id: 'components.PageFooter.select',\n defaultMessage: 'Entries per page',\n })}\n onChange={handleChange}\n value={pageSize.toString()}\n >\n <SingleSelectOption value=\"10\">10</SingleSelectOption>\n <SingleSelectOption value=\"20\">20</SingleSelectOption>\n <SingleSelectOption value=\"50\">50</SingleSelectOption>\n <SingleSelectOption value=\"100\">100</SingleSelectOption>\n </SingleSelect>\n <Box paddingLeft={2}>\n <Typography textColor=\"neutral600\" tag=\"label\" htmlFor=\"page-size\">\n {formatMessage({\n id: 'components.PageFooter.select',\n defaultMessage: 'Entries per page',\n })}\n </Typography>\n </Box>\n </Flex>\n );\n};\n"],"names":["PageSize","onChangePageSize","pageSize","formatMessage","useIntl","handleChange","value","Number","_jsxs","Flex","SingleSelect","size","aria-label","id","defaultMessage","onChange","toString","_jsx","SingleSelectOption","Box","paddingLeft","Typography","textColor","tag","htmlFor"],"mappings":";;;;;;MAQaA,QAAW,GAAA,CAAC,EAAEC,gBAAgB,EAAEC,QAAQ,EAAiB,GAAA;IACpE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAe,CAACC,KAAAA,GAAAA;AACpBL,QAAAA,gBAAAA,CAAiBM,MAAOD,CAAAA,KAAAA,CAAAA,CAAAA;AAC1B,KAAA;AAEA,IAAA,qBACEE,eAACC,CAAAA,iBAAAA,EAAAA;;0BACCD,eAACE,CAAAA,yBAAAA,EAAAA;gBACCC,IAAK,EAAA,GAAA;AACLC,gBAAAA,YAAAA,EAAYT,aAAc,CAAA;oBACxBU,EAAI,EAAA,8BAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA,CAAA;gBACAC,QAAUV,EAAAA,YAAAA;AACVC,gBAAAA,KAAAA,EAAOJ,SAASc,QAAQ,EAAA;;kCAExBC,cAACC,CAAAA,+BAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,IAAA;AAAK,wBAAA,QAAA,EAAA;;kCAC/BW,cAACC,CAAAA,+BAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,IAAA;AAAK,wBAAA,QAAA,EAAA;;kCAC/BW,cAACC,CAAAA,+BAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,IAAA;AAAK,wBAAA,QAAA,EAAA;;kCAC/BW,cAACC,CAAAA,+BAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,KAAA;AAAM,wBAAA,QAAA,EAAA;;;;0BAElCW,cAACE,CAAAA,gBAAAA,EAAAA;gBAAIC,WAAa,EAAA,CAAA;AAChB,gBAAA,QAAA,gBAAAH,cAACI,CAAAA,uBAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,GAAI,EAAA,OAAA;oBAAQC,OAAQ,EAAA,WAAA;8BACpDrB,aAAc,CAAA;wBACbU,EAAI,EAAA,8BAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}

View File

@@ -0,0 +1,56 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import { Flex, SingleSelect, SingleSelectOption, Box, Typography } from '@strapi/design-system';
import { useIntl } from 'react-intl';
const PageSize = ({ onChangePageSize, pageSize })=>{
const { formatMessage } = useIntl();
const handleChange = (value)=>{
onChangePageSize(Number(value));
};
return /*#__PURE__*/ jsxs(Flex, {
children: [
/*#__PURE__*/ jsxs(SingleSelect, {
size: "S",
"aria-label": formatMessage({
id: 'components.PageFooter.select',
defaultMessage: 'Entries per page'
}),
onChange: handleChange,
value: pageSize.toString(),
children: [
/*#__PURE__*/ jsx(SingleSelectOption, {
value: "10",
children: "10"
}),
/*#__PURE__*/ jsx(SingleSelectOption, {
value: "20",
children: "20"
}),
/*#__PURE__*/ jsx(SingleSelectOption, {
value: "50",
children: "50"
}),
/*#__PURE__*/ jsx(SingleSelectOption, {
value: "100",
children: "100"
})
]
}),
/*#__PURE__*/ jsx(Box, {
paddingLeft: 2,
children: /*#__PURE__*/ jsx(Typography, {
textColor: "neutral600",
tag: "label",
htmlFor: "page-size",
children: formatMessage({
id: 'components.PageFooter.select',
defaultMessage: 'Entries per page'
})
})
})
]
});
};
export { PageSize };
//# sourceMappingURL=PageSize.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"PageSize.mjs","sources":["../../../../../admin/src/components/AssetDialog/BrowseStep/PageSize.tsx"],"sourcesContent":["import { Box, Flex, SingleSelectOption, SingleSelect, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\ninterface PageSizeProps {\n onChangePageSize: (value: number) => void;\n pageSize: number;\n}\n\nexport const PageSize = ({ onChangePageSize, pageSize }: PageSizeProps) => {\n const { formatMessage } = useIntl();\n\n const handleChange = (value: string | number) => {\n onChangePageSize(Number(value));\n };\n\n return (\n <Flex>\n <SingleSelect\n size=\"S\"\n aria-label={formatMessage({\n id: 'components.PageFooter.select',\n defaultMessage: 'Entries per page',\n })}\n onChange={handleChange}\n value={pageSize.toString()}\n >\n <SingleSelectOption value=\"10\">10</SingleSelectOption>\n <SingleSelectOption value=\"20\">20</SingleSelectOption>\n <SingleSelectOption value=\"50\">50</SingleSelectOption>\n <SingleSelectOption value=\"100\">100</SingleSelectOption>\n </SingleSelect>\n <Box paddingLeft={2}>\n <Typography textColor=\"neutral600\" tag=\"label\" htmlFor=\"page-size\">\n {formatMessage({\n id: 'components.PageFooter.select',\n defaultMessage: 'Entries per page',\n })}\n </Typography>\n </Box>\n </Flex>\n );\n};\n"],"names":["PageSize","onChangePageSize","pageSize","formatMessage","useIntl","handleChange","value","Number","_jsxs","Flex","SingleSelect","size","aria-label","id","defaultMessage","onChange","toString","_jsx","SingleSelectOption","Box","paddingLeft","Typography","textColor","tag","htmlFor"],"mappings":";;;;MAQaA,QAAW,GAAA,CAAC,EAAEC,gBAAgB,EAAEC,QAAQ,EAAiB,GAAA;IACpE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,MAAMC,eAAe,CAACC,KAAAA,GAAAA;AACpBL,QAAAA,gBAAAA,CAAiBM,MAAOD,CAAAA,KAAAA,CAAAA,CAAAA;AAC1B,KAAA;AAEA,IAAA,qBACEE,IAACC,CAAAA,IAAAA,EAAAA;;0BACCD,IAACE,CAAAA,YAAAA,EAAAA;gBACCC,IAAK,EAAA,GAAA;AACLC,gBAAAA,YAAAA,EAAYT,aAAc,CAAA;oBACxBU,EAAI,EAAA,8BAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA,CAAA;gBACAC,QAAUV,EAAAA,YAAAA;AACVC,gBAAAA,KAAAA,EAAOJ,SAASc,QAAQ,EAAA;;kCAExBC,GAACC,CAAAA,kBAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,IAAA;AAAK,wBAAA,QAAA,EAAA;;kCAC/BW,GAACC,CAAAA,kBAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,IAAA;AAAK,wBAAA,QAAA,EAAA;;kCAC/BW,GAACC,CAAAA,kBAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,IAAA;AAAK,wBAAA,QAAA,EAAA;;kCAC/BW,GAACC,CAAAA,kBAAAA,EAAAA;wBAAmBZ,KAAM,EAAA,KAAA;AAAM,wBAAA,QAAA,EAAA;;;;0BAElCW,GAACE,CAAAA,GAAAA,EAAAA;gBAAIC,WAAa,EAAA,CAAA;AAChB,gBAAA,QAAA,gBAAAH,GAACI,CAAAA,UAAAA,EAAAA;oBAAWC,SAAU,EAAA,YAAA;oBAAaC,GAAI,EAAA,OAAA;oBAAQC,OAAQ,EAAA,WAAA;8BACpDrB,aAAc,CAAA;wBACbU,EAAI,EAAA,8BAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;;;AAKV;;;;"}

View File

@@ -0,0 +1,55 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var designSystem = require('@strapi/design-system');
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 PaginationContext = /*#__PURE__*/ React__namespace.createContext({
activePage: 1,
pageCount: 1
});
const usePagination = ()=>React__namespace.useContext(PaginationContext);
const Pagination = ({ children, activePage, pageCount, label = 'pagination' })=>{
const paginationValue = React__namespace.useMemo(()=>({
activePage,
pageCount
}), [
activePage,
pageCount
]);
return /*#__PURE__*/ jsxRuntime.jsx(PaginationContext.Provider, {
value: paginationValue,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
tag: "nav",
"aria-label": label,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
tag: "ul",
gap: 1,
children: children
})
})
});
};
exports.Pagination = Pagination;
exports.usePagination = usePagination;
//# sourceMappingURL=Pagination.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Pagination.js","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex } from '@strapi/design-system';\n\nconst PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });\nexport const usePagination = () => React.useContext(PaginationContext);\n\ninterface PaginationProps {\n activePage: number;\n children: React.ReactNode;\n label?: string;\n pageCount: number;\n}\n\nexport const Pagination = ({\n children,\n activePage,\n pageCount,\n label = 'pagination',\n}: PaginationProps) => {\n const paginationValue = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);\n\n return (\n <PaginationContext.Provider value={paginationValue}>\n <Box tag=\"nav\" aria-label={label}>\n <Flex tag=\"ul\" gap={1}>\n {children}\n </Flex>\n </Box>\n </PaginationContext.Provider>\n );\n};\n"],"names":["PaginationContext","React","createContext","activePage","pageCount","usePagination","useContext","Pagination","children","label","paginationValue","useMemo","_jsx","Provider","value","Box","tag","aria-label","Flex","gap"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAMA,iBAAAA,iBAAoBC,gBAAMC,CAAAA,aAAa,CAAC;IAAEC,UAAY,EAAA,CAAA;IAAGC,SAAW,EAAA;AAAE,CAAA,CAAA;MAC/DC,aAAgB,GAAA,IAAMJ,gBAAMK,CAAAA,UAAU,CAACN,iBAAmB;AAS1DO,MAAAA,UAAAA,GAAa,CAAC,EACzBC,QAAQ,EACRL,UAAU,EACVC,SAAS,EACTK,KAAQ,GAAA,YAAY,EACJ,GAAA;AAChB,IAAA,MAAMC,eAAkBT,GAAAA,gBAAAA,CAAMU,OAAO,CAAC,KAAO;AAAER,YAAAA,UAAAA;AAAYC,YAAAA;AAAU,SAAA,CAAI,EAAA;AAACD,QAAAA,UAAAA;AAAYC,QAAAA;AAAU,KAAA,CAAA;IAEhG,qBACEQ,cAAA,CAACZ,kBAAkBa,QAAQ,EAAA;QAACC,KAAOJ,EAAAA,eAAAA;AACjC,QAAA,QAAA,gBAAAE,cAACG,CAAAA,gBAAAA,EAAAA;YAAIC,GAAI,EAAA,KAAA;YAAMC,YAAYR,EAAAA,KAAAA;AACzB,YAAA,QAAA,gBAAAG,cAACM,CAAAA,iBAAAA,EAAAA;gBAAKF,GAAI,EAAA,IAAA;gBAAKG,GAAK,EAAA,CAAA;AACjBX,gBAAAA,QAAAA,EAAAA;;;;AAKX;;;;;"}

View File

@@ -0,0 +1,33 @@
import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { Box, Flex } from '@strapi/design-system';
const PaginationContext = /*#__PURE__*/ React.createContext({
activePage: 1,
pageCount: 1
});
const usePagination = ()=>React.useContext(PaginationContext);
const Pagination = ({ children, activePage, pageCount, label = 'pagination' })=>{
const paginationValue = React.useMemo(()=>({
activePage,
pageCount
}), [
activePage,
pageCount
]);
return /*#__PURE__*/ jsx(PaginationContext.Provider, {
value: paginationValue,
children: /*#__PURE__*/ jsx(Box, {
tag: "nav",
"aria-label": label,
children: /*#__PURE__*/ jsx(Flex, {
tag: "ul",
gap: 1,
children: children
})
})
});
};
export { Pagination, usePagination };
//# sourceMappingURL=Pagination.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Pagination.mjs","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/PaginationFooter/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex } from '@strapi/design-system';\n\nconst PaginationContext = React.createContext({ activePage: 1, pageCount: 1 });\nexport const usePagination = () => React.useContext(PaginationContext);\n\ninterface PaginationProps {\n activePage: number;\n children: React.ReactNode;\n label?: string;\n pageCount: number;\n}\n\nexport const Pagination = ({\n children,\n activePage,\n pageCount,\n label = 'pagination',\n}: PaginationProps) => {\n const paginationValue = React.useMemo(() => ({ activePage, pageCount }), [activePage, pageCount]);\n\n return (\n <PaginationContext.Provider value={paginationValue}>\n <Box tag=\"nav\" aria-label={label}>\n <Flex tag=\"ul\" gap={1}>\n {children}\n </Flex>\n </Box>\n </PaginationContext.Provider>\n );\n};\n"],"names":["PaginationContext","React","createContext","activePage","pageCount","usePagination","useContext","Pagination","children","label","paginationValue","useMemo","_jsx","Provider","value","Box","tag","aria-label","Flex","gap"],"mappings":";;;;AAIA,MAAMA,iBAAAA,iBAAoBC,KAAMC,CAAAA,aAAa,CAAC;IAAEC,UAAY,EAAA,CAAA;IAAGC,SAAW,EAAA;AAAE,CAAA,CAAA;MAC/DC,aAAgB,GAAA,IAAMJ,KAAMK,CAAAA,UAAU,CAACN,iBAAmB;AAS1DO,MAAAA,UAAAA,GAAa,CAAC,EACzBC,QAAQ,EACRL,UAAU,EACVC,SAAS,EACTK,KAAQ,GAAA,YAAY,EACJ,GAAA;AAChB,IAAA,MAAMC,eAAkBT,GAAAA,KAAAA,CAAMU,OAAO,CAAC,KAAO;AAAER,YAAAA,UAAAA;AAAYC,YAAAA;AAAU,SAAA,CAAI,EAAA;AAACD,QAAAA,UAAAA;AAAYC,QAAAA;AAAU,KAAA,CAAA;IAEhG,qBACEQ,GAAA,CAACZ,kBAAkBa,QAAQ,EAAA;QAACC,KAAOJ,EAAAA,eAAAA;AACjC,QAAA,QAAA,gBAAAE,GAACG,CAAAA,GAAAA,EAAAA;YAAIC,GAAI,EAAA,KAAA;YAAMC,YAAYR,EAAAA,KAAAA;AACzB,YAAA,QAAA,gBAAAG,GAACM,CAAAA,IAAAA,EAAAA;gBAAKF,GAAI,EAAA,IAAA;gBAAKG,GAAK,EAAA,CAAA;AACjBX,gBAAAA,QAAAA,EAAAA;;;;AAKX;;;;"}

View File

@@ -0,0 +1,378 @@
'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');
var Pagination = require('./Pagination.js');
// TODO: find a better naming convention for the file that was an index file before
const PaginationText = styledComponents.styled(designSystem.Typography)`
line-height: revert;
`;
const linkWrapperStyles = styledComponents.css`
padding: ${({ theme })=>theme.spaces[3]};
border-radius: ${({ theme })=>theme.borderRadius};
box-shadow: ${({ $active, theme })=>$active ? theme.shadows.filterShadow : undefined};
text-decoration: none;
display: flex;
position: relative;
outline: none;
&:after {
transition-property: all;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
&:focus-visible {
outline: none;
&:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid ${(props)=>props.theme.colors.primary600};
}
}
`;
const LinkWrapperButton = styledComponents.styled.button`
${linkWrapperStyles}
`;
const LinkWrapperDiv = styledComponents.styled.div`
${linkWrapperStyles}
`;
LinkWrapperButton.defaultProps = {
type: 'button'
};
const PageLinkWrapper = styledComponents.styled(LinkWrapperButton)`
color: ${({ theme, $active })=>$active ? theme.colors.primary700 : theme.colors.neutral800};
background: ${({ theme, $active })=>$active ? theme.colors.neutral0 : undefined};
&:hover {
box-shadow: ${({ theme })=>theme.shadows.filterShadow};
}
`;
const ActionLinkWrapper = styledComponents.styled(LinkWrapperButton)`
font-size: 1.1rem;
svg path {
fill: ${(p)=>p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600};
}
&:focus,
&:hover {
svg path {
fill: ${(p)=>p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700};
}
}
${(p)=>p['aria-disabled'] ? `
pointer-events: none;
` : undefined}
`;
const DotsWrapper = styledComponents.styled(LinkWrapperDiv)`
color: ${({ theme })=>theme.colors.neutral800};
`;
const PreviousLink = ({ children, ...props })=>{
const { activePage } = Pagination.usePagination();
const disabled = activePage === 1;
return /*#__PURE__*/ jsxRuntime.jsx("li", {
children: /*#__PURE__*/ jsxRuntime.jsxs(ActionLinkWrapper, {
"aria-disabled": disabled,
tabIndex: disabled ? -1 : undefined,
...props,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsxRuntime.jsx(icons.ChevronLeft, {
"aria-hidden": true
})
]
})
});
};
const NextLink = ({ children, ...props })=>{
const { activePage, pageCount } = Pagination.usePagination();
const disabled = activePage === pageCount;
return /*#__PURE__*/ jsxRuntime.jsx("li", {
children: /*#__PURE__*/ jsxRuntime.jsxs(ActionLinkWrapper, {
"aria-disabled": disabled,
tabIndex: disabled ? -1 : undefined,
...props,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsxRuntime.jsx(icons.ChevronRight, {
"aria-hidden": true
})
]
})
});
};
const PageLink = ({ number, children, ...props })=>{
const { activePage } = Pagination.usePagination();
const isActive = activePage === number;
return /*#__PURE__*/ jsxRuntime.jsx("li", {
children: /*#__PURE__*/ jsxRuntime.jsxs(PageLinkWrapper, {
...props,
$active: isActive,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsxRuntime.jsx(PaginationText, {
"aria-hidden": true,
variant: "pi",
fontWeight: isActive ? 'bold' : '',
children: number
})
]
})
});
};
const Dots = ({ children, ...props })=>/*#__PURE__*/ jsxRuntime.jsx("li", {
children: /*#__PURE__*/ jsxRuntime.jsxs(DotsWrapper, {
...props,
as: "div",
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsxRuntime.jsx(PaginationText, {
"aria-hidden": true,
small: true,
children: "…"
})
]
})
});
const PaginationFooter = ({ activePage, onChangePage, pagination: { pageCount } })=>{
const { formatMessage } = reactIntl.useIntl();
const previousActivePage = activePage - 1;
const nextActivePage = activePage + 1;
const firstLinks = [
/*#__PURE__*/ jsxRuntime.jsx(PageLink, {
number: 1,
onClick: ()=>{
onChangePage(1);
},
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: 1
})
}, 1)
];
if (pageCount <= 4) {
const links = Array.from({
length: pageCount
}).map((_, i)=>i + 1).map((number)=>{
return /*#__PURE__*/ jsxRuntime.jsx(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: number
})
}, number);
});
return /*#__PURE__*/ jsxRuntime.jsxs(Pagination.Pagination, {
activePage: activePage,
pageCount: pageCount,
children: [
/*#__PURE__*/ jsxRuntime.jsx(PreviousLink, {
onClick: ()=>onChangePage(previousActivePage),
children: formatMessage({
id: 'components.pagination.go-to-previous',
defaultMessage: 'Go to previous page'
})
}),
links,
/*#__PURE__*/ jsxRuntime.jsx(NextLink, {
onClick: ()=>onChangePage(nextActivePage),
children: formatMessage({
id: 'components.pagination.go-to-next',
defaultMessage: 'Go to next page'
})
})
]
});
}
let firstLinksToCreate = [];
const lastLinks = [];
let lastLinksToCreate = [];
const middleLinks = [];
if (pageCount > 1) {
lastLinks.push(/*#__PURE__*/ jsxRuntime.jsx(PageLink, {
number: pageCount,
onClick: ()=>onChangePage(pageCount),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: pageCount
})
}, pageCount));
}
if (activePage === 1 && pageCount >= 3) {
firstLinksToCreate = [
2
];
}
if (activePage === 2 && pageCount >= 3) {
if (pageCount === 5) {
firstLinksToCreate = [
2,
3,
4
];
} else if (pageCount === 3) {
firstLinksToCreate = [
2
];
} else {
firstLinksToCreate = [
2,
3
];
}
}
if (activePage === 4 && pageCount >= 3) {
firstLinksToCreate = [
2
];
}
if (activePage === pageCount && pageCount >= 3) {
lastLinksToCreate = [
pageCount - 1
];
}
if (activePage === pageCount - 2 && pageCount > 3) {
lastLinksToCreate = [
activePage + 1,
activePage,
activePage - 1
];
}
if (activePage === pageCount - 3 && pageCount > 3 && activePage > 5) {
lastLinksToCreate = [
activePage + 2,
activePage + 1,
activePage,
activePage - 1
];
}
if (activePage === pageCount - 1 && pageCount > 3) {
lastLinksToCreate = [
activePage,
activePage - 1
];
}
lastLinksToCreate.forEach((number)=>{
lastLinks.unshift(/*#__PURE__*/ jsxRuntime.jsxs(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: [
"Go to page ",
number
]
}, number));
});
firstLinksToCreate.forEach((number)=>{
firstLinks.push(/*#__PURE__*/ jsxRuntime.jsx(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: number
})
}, number));
});
if (![
1,
2
].includes(activePage) && activePage <= pageCount - 3 && firstLinks.length + lastLinks.length < 6) {
const middleLinksToCreate = [
activePage - 1,
activePage,
activePage + 1
];
middleLinksToCreate.forEach((number)=>{
middleLinks.push(/*#__PURE__*/ jsxRuntime.jsx(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: number
})
}, number));
});
}
const shouldShowDotsAfterFirstLink = pageCount > 5 || pageCount === 5 && (activePage === 1 || activePage === 5);
const shouldShowMiddleDots = middleLinks.length > 2 && activePage > 4 && pageCount > 5;
const beforeDotsLinksLength = shouldShowMiddleDots ? pageCount - activePage - 1 : pageCount - firstLinks.length - lastLinks.length;
const afterDotsLength = shouldShowMiddleDots ? pageCount - firstLinks.length - lastLinks.length : pageCount - activePage - 1;
return /*#__PURE__*/ jsxRuntime.jsxs(Pagination.Pagination, {
activePage: activePage,
pageCount: pageCount,
children: [
/*#__PURE__*/ jsxRuntime.jsx(PreviousLink, {
onClick: ()=>onChangePage(previousActivePage),
children: formatMessage({
id: 'components.pagination.go-to-previous',
defaultMessage: 'Go to previous page'
})
}),
firstLinks,
shouldShowMiddleDots && /*#__PURE__*/ jsxRuntime.jsx(Dots, {
children: formatMessage({
id: 'components.pagination.remaining-links',
defaultMessage: 'And {number} other links'
}, {
number: beforeDotsLinksLength
})
}),
middleLinks,
shouldShowDotsAfterFirstLink && /*#__PURE__*/ jsxRuntime.jsx(Dots, {
children: formatMessage({
id: 'components.pagination.remaining-links',
defaultMessage: 'And {number} other links'
}, {
number: afterDotsLength
})
}),
lastLinks,
/*#__PURE__*/ jsxRuntime.jsx(NextLink, {
onClick: ()=>onChangePage(nextActivePage),
children: formatMessage({
id: 'components.pagination.go-to-next',
defaultMessage: 'Go to next page'
})
})
]
});
};
exports.PaginationFooter = PaginationFooter;
//# sourceMappingURL=PaginationFooter.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,376 @@
import { jsx, jsxs } from 'react/jsx-runtime';
import { Typography, VisuallyHidden } from '@strapi/design-system';
import { ChevronLeft, ChevronRight } from '@strapi/icons';
import { useIntl } from 'react-intl';
import { styled, css } from 'styled-components';
import { Pagination, usePagination } from './Pagination.mjs';
// TODO: find a better naming convention for the file that was an index file before
const PaginationText = styled(Typography)`
line-height: revert;
`;
const linkWrapperStyles = css`
padding: ${({ theme })=>theme.spaces[3]};
border-radius: ${({ theme })=>theme.borderRadius};
box-shadow: ${({ $active, theme })=>$active ? theme.shadows.filterShadow : undefined};
text-decoration: none;
display: flex;
position: relative;
outline: none;
&:after {
transition-property: all;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
&:focus-visible {
outline: none;
&:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid ${(props)=>props.theme.colors.primary600};
}
}
`;
const LinkWrapperButton = styled.button`
${linkWrapperStyles}
`;
const LinkWrapperDiv = styled.div`
${linkWrapperStyles}
`;
LinkWrapperButton.defaultProps = {
type: 'button'
};
const PageLinkWrapper = styled(LinkWrapperButton)`
color: ${({ theme, $active })=>$active ? theme.colors.primary700 : theme.colors.neutral800};
background: ${({ theme, $active })=>$active ? theme.colors.neutral0 : undefined};
&:hover {
box-shadow: ${({ theme })=>theme.shadows.filterShadow};
}
`;
const ActionLinkWrapper = styled(LinkWrapperButton)`
font-size: 1.1rem;
svg path {
fill: ${(p)=>p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600};
}
&:focus,
&:hover {
svg path {
fill: ${(p)=>p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700};
}
}
${(p)=>p['aria-disabled'] ? `
pointer-events: none;
` : undefined}
`;
const DotsWrapper = styled(LinkWrapperDiv)`
color: ${({ theme })=>theme.colors.neutral800};
`;
const PreviousLink = ({ children, ...props })=>{
const { activePage } = usePagination();
const disabled = activePage === 1;
return /*#__PURE__*/ jsx("li", {
children: /*#__PURE__*/ jsxs(ActionLinkWrapper, {
"aria-disabled": disabled,
tabIndex: disabled ? -1 : undefined,
...props,
children: [
/*#__PURE__*/ jsx(VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsx(ChevronLeft, {
"aria-hidden": true
})
]
})
});
};
const NextLink = ({ children, ...props })=>{
const { activePage, pageCount } = usePagination();
const disabled = activePage === pageCount;
return /*#__PURE__*/ jsx("li", {
children: /*#__PURE__*/ jsxs(ActionLinkWrapper, {
"aria-disabled": disabled,
tabIndex: disabled ? -1 : undefined,
...props,
children: [
/*#__PURE__*/ jsx(VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsx(ChevronRight, {
"aria-hidden": true
})
]
})
});
};
const PageLink = ({ number, children, ...props })=>{
const { activePage } = usePagination();
const isActive = activePage === number;
return /*#__PURE__*/ jsx("li", {
children: /*#__PURE__*/ jsxs(PageLinkWrapper, {
...props,
$active: isActive,
children: [
/*#__PURE__*/ jsx(VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsx(PaginationText, {
"aria-hidden": true,
variant: "pi",
fontWeight: isActive ? 'bold' : '',
children: number
})
]
})
});
};
const Dots = ({ children, ...props })=>/*#__PURE__*/ jsx("li", {
children: /*#__PURE__*/ jsxs(DotsWrapper, {
...props,
as: "div",
children: [
/*#__PURE__*/ jsx(VisuallyHidden, {
children: children
}),
/*#__PURE__*/ jsx(PaginationText, {
"aria-hidden": true,
small: true,
children: "…"
})
]
})
});
const PaginationFooter = ({ activePage, onChangePage, pagination: { pageCount } })=>{
const { formatMessage } = useIntl();
const previousActivePage = activePage - 1;
const nextActivePage = activePage + 1;
const firstLinks = [
/*#__PURE__*/ jsx(PageLink, {
number: 1,
onClick: ()=>{
onChangePage(1);
},
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: 1
})
}, 1)
];
if (pageCount <= 4) {
const links = Array.from({
length: pageCount
}).map((_, i)=>i + 1).map((number)=>{
return /*#__PURE__*/ jsx(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: number
})
}, number);
});
return /*#__PURE__*/ jsxs(Pagination, {
activePage: activePage,
pageCount: pageCount,
children: [
/*#__PURE__*/ jsx(PreviousLink, {
onClick: ()=>onChangePage(previousActivePage),
children: formatMessage({
id: 'components.pagination.go-to-previous',
defaultMessage: 'Go to previous page'
})
}),
links,
/*#__PURE__*/ jsx(NextLink, {
onClick: ()=>onChangePage(nextActivePage),
children: formatMessage({
id: 'components.pagination.go-to-next',
defaultMessage: 'Go to next page'
})
})
]
});
}
let firstLinksToCreate = [];
const lastLinks = [];
let lastLinksToCreate = [];
const middleLinks = [];
if (pageCount > 1) {
lastLinks.push(/*#__PURE__*/ jsx(PageLink, {
number: pageCount,
onClick: ()=>onChangePage(pageCount),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: pageCount
})
}, pageCount));
}
if (activePage === 1 && pageCount >= 3) {
firstLinksToCreate = [
2
];
}
if (activePage === 2 && pageCount >= 3) {
if (pageCount === 5) {
firstLinksToCreate = [
2,
3,
4
];
} else if (pageCount === 3) {
firstLinksToCreate = [
2
];
} else {
firstLinksToCreate = [
2,
3
];
}
}
if (activePage === 4 && pageCount >= 3) {
firstLinksToCreate = [
2
];
}
if (activePage === pageCount && pageCount >= 3) {
lastLinksToCreate = [
pageCount - 1
];
}
if (activePage === pageCount - 2 && pageCount > 3) {
lastLinksToCreate = [
activePage + 1,
activePage,
activePage - 1
];
}
if (activePage === pageCount - 3 && pageCount > 3 && activePage > 5) {
lastLinksToCreate = [
activePage + 2,
activePage + 1,
activePage,
activePage - 1
];
}
if (activePage === pageCount - 1 && pageCount > 3) {
lastLinksToCreate = [
activePage,
activePage - 1
];
}
lastLinksToCreate.forEach((number)=>{
lastLinks.unshift(/*#__PURE__*/ jsxs(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: [
"Go to page ",
number
]
}, number));
});
firstLinksToCreate.forEach((number)=>{
firstLinks.push(/*#__PURE__*/ jsx(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: number
})
}, number));
});
if (![
1,
2
].includes(activePage) && activePage <= pageCount - 3 && firstLinks.length + lastLinks.length < 6) {
const middleLinksToCreate = [
activePage - 1,
activePage,
activePage + 1
];
middleLinksToCreate.forEach((number)=>{
middleLinks.push(/*#__PURE__*/ jsx(PageLink, {
number: number,
onClick: ()=>onChangePage(number),
children: formatMessage({
id: 'components.pagination.go-to',
defaultMessage: 'Go to page {page}'
}, {
page: number
})
}, number));
});
}
const shouldShowDotsAfterFirstLink = pageCount > 5 || pageCount === 5 && (activePage === 1 || activePage === 5);
const shouldShowMiddleDots = middleLinks.length > 2 && activePage > 4 && pageCount > 5;
const beforeDotsLinksLength = shouldShowMiddleDots ? pageCount - activePage - 1 : pageCount - firstLinks.length - lastLinks.length;
const afterDotsLength = shouldShowMiddleDots ? pageCount - firstLinks.length - lastLinks.length : pageCount - activePage - 1;
return /*#__PURE__*/ jsxs(Pagination, {
activePage: activePage,
pageCount: pageCount,
children: [
/*#__PURE__*/ jsx(PreviousLink, {
onClick: ()=>onChangePage(previousActivePage),
children: formatMessage({
id: 'components.pagination.go-to-previous',
defaultMessage: 'Go to previous page'
})
}),
firstLinks,
shouldShowMiddleDots && /*#__PURE__*/ jsx(Dots, {
children: formatMessage({
id: 'components.pagination.remaining-links',
defaultMessage: 'And {number} other links'
}, {
number: beforeDotsLinksLength
})
}),
middleLinks,
shouldShowDotsAfterFirstLink && /*#__PURE__*/ jsx(Dots, {
children: formatMessage({
id: 'components.pagination.remaining-links',
defaultMessage: 'And {number} other links'
}, {
number: afterDotsLength
})
}),
lastLinks,
/*#__PURE__*/ jsx(NextLink, {
onClick: ()=>onChangePage(nextActivePage),
children: formatMessage({
id: 'components.pagination.go-to-next',
defaultMessage: 'Go to next page'
})
})
]
});
};
export { PaginationFooter };
//# sourceMappingURL=PaginationFooter.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,102 @@
'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');
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);
// TODO: find a better naming convention for the file that was an index file before
const SearchAsset = ({ onChangeSearch, queryValue = null })=>{
const { formatMessage } = reactIntl.useIntl();
const { trackUsage } = strapiAdmin.useTracking();
const [isOpen, setIsOpen] = React__namespace.useState(!!queryValue);
const [value, setValue] = React__namespace.useState(queryValue || '');
const wrapperRef = React__namespace.useRef(null);
React__namespace.useLayoutEffect(()=>{
if (isOpen) {
setTimeout(()=>{
wrapperRef.current?.querySelector('input')?.focus();
}, 0);
}
}, [
isOpen
]);
const handleToggle = ()=>{
setIsOpen((prev)=>!prev);
};
const handleClear = ()=>{
handleToggle();
onChangeSearch(null);
};
const handleSubmit = (e)=>{
e.preventDefault();
e.stopPropagation();
trackUsage('didSearchMediaLibraryElements', {
location: 'content-manager'
});
onChangeSearch(value);
};
if (isOpen) {
return /*#__PURE__*/ jsxRuntime.jsx("div", {
ref: wrapperRef,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.SearchForm, {
onSubmit: handleSubmit,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Searchbar, {
name: "search",
onClear: handleClear,
onChange: (e)=>setValue(e.target.value),
clearLabel: formatMessage({
id: getTrad.getTrad('search.clear.label'),
defaultMessage: 'Clear the search'
}),
"aria-label": "search",
size: "S",
value: value,
placeholder: formatMessage({
id: getTrad.getTrad('search.placeholder'),
defaultMessage: 'e.g: the first dog on the moon'
}),
children: formatMessage({
id: getTrad.getTrad('search.label'),
defaultMessage: 'Search for an asset'
})
})
})
});
}
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.IconButton, {
label: "Search",
onClick: handleToggle,
children: /*#__PURE__*/ jsxRuntime.jsx(icons.Search, {})
});
};
exports.SearchAsset = SearchAsset;
//# sourceMappingURL=SearchAsset.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,81 @@
import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useTracking } from '@strapi/admin/strapi-admin';
import { SearchForm, Searchbar, IconButton } from '@strapi/design-system';
import { Search } from '@strapi/icons';
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';
// TODO: find a better naming convention for the file that was an index file before
const SearchAsset = ({ onChangeSearch, queryValue = null })=>{
const { formatMessage } = useIntl();
const { trackUsage } = useTracking();
const [isOpen, setIsOpen] = React.useState(!!queryValue);
const [value, setValue] = React.useState(queryValue || '');
const wrapperRef = React.useRef(null);
React.useLayoutEffect(()=>{
if (isOpen) {
setTimeout(()=>{
wrapperRef.current?.querySelector('input')?.focus();
}, 0);
}
}, [
isOpen
]);
const handleToggle = ()=>{
setIsOpen((prev)=>!prev);
};
const handleClear = ()=>{
handleToggle();
onChangeSearch(null);
};
const handleSubmit = (e)=>{
e.preventDefault();
e.stopPropagation();
trackUsage('didSearchMediaLibraryElements', {
location: 'content-manager'
});
onChangeSearch(value);
};
if (isOpen) {
return /*#__PURE__*/ jsx("div", {
ref: wrapperRef,
children: /*#__PURE__*/ jsx(SearchForm, {
onSubmit: handleSubmit,
children: /*#__PURE__*/ jsx(Searchbar, {
name: "search",
onClear: handleClear,
onChange: (e)=>setValue(e.target.value),
clearLabel: formatMessage({
id: getTrad('search.clear.label'),
defaultMessage: 'Clear the search'
}),
"aria-label": "search",
size: "S",
value: value,
placeholder: formatMessage({
id: getTrad('search.placeholder'),
defaultMessage: 'e.g: the first dog on the moon'
}),
children: formatMessage({
id: getTrad('search.label'),
defaultMessage: 'Search for an asset'
})
})
})
});
}
return /*#__PURE__*/ jsx(IconButton, {
label: "Search",
onClick: handleToggle,
children: /*#__PURE__*/ jsx(Search, {})
});
};
export { SearchAsset };
//# sourceMappingURL=SearchAsset.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
'use strict';
const isSelectable = (allowedTypes, mime = '')=>{
if (!mime) return false;
const fileType = mime.split('/')[0];
return allowedTypes.includes(fileType) || allowedTypes.includes('file') && ![
'video',
'image',
'audio'
].includes(fileType);
};
exports.isSelectable = isSelectable;
//# sourceMappingURL=isSelectable.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"isSelectable.js","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.ts"],"sourcesContent":["export const isSelectable = (allowedTypes: string[], mime = '') => {\n if (!mime) return false;\n\n const fileType = mime.split('/')[0];\n\n return (\n allowedTypes.includes(fileType) ||\n (allowedTypes.includes('file') && !['video', 'image', 'audio'].includes(fileType))\n );\n};\n"],"names":["isSelectable","allowedTypes","mime","fileType","split","includes"],"mappings":";;AAAaA,MAAAA,YAAAA,GAAe,CAACC,YAAAA,EAAwBC,OAAO,EAAE,GAAA;IAC5D,IAAI,CAACA,MAAM,OAAO,KAAA;AAElB,IAAA,MAAMC,WAAWD,IAAKE,CAAAA,KAAK,CAAC,GAAA,CAAI,CAAC,CAAE,CAAA;IAEnC,OACEH,YAAAA,CAAaI,QAAQ,CAACF,QAAAA,CAAAA,IACrBF,aAAaI,QAAQ,CAAC,WAAW,CAAC;AAAC,QAAA,OAAA;AAAS,QAAA,OAAA;AAAS,QAAA;AAAQ,KAAA,CAACA,QAAQ,CAACF,QAAAA,CAAAA;AAE5E;;;;"}

View File

@@ -0,0 +1,12 @@
const isSelectable = (allowedTypes, mime = '')=>{
if (!mime) return false;
const fileType = mime.split('/')[0];
return allowedTypes.includes(fileType) || allowedTypes.includes('file') && ![
'video',
'image',
'audio'
].includes(fileType);
};
export { isSelectable };
//# sourceMappingURL=isSelectable.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"isSelectable.mjs","sources":["../../../../../../admin/src/components/AssetDialog/BrowseStep/utils/isSelectable.ts"],"sourcesContent":["export const isSelectable = (allowedTypes: string[], mime = '') => {\n if (!mime) return false;\n\n const fileType = mime.split('/')[0];\n\n return (\n allowedTypes.includes(fileType) ||\n (allowedTypes.includes('file') && !['video', 'image', 'audio'].includes(fileType))\n );\n};\n"],"names":["isSelectable","allowedTypes","mime","fileType","split","includes"],"mappings":"AAAaA,MAAAA,YAAAA,GAAe,CAACC,YAAAA,EAAwBC,OAAO,EAAE,GAAA;IAC5D,IAAI,CAACA,MAAM,OAAO,KAAA;AAElB,IAAA,MAAMC,WAAWD,IAAKE,CAAAA,KAAK,CAAC,GAAA,CAAI,CAAC,CAAE,CAAA;IAEnC,OACEH,YAAAA,CAAaI,QAAQ,CAACF,QAAAA,CAAAA,IACrBF,aAAaI,QAAQ,CAAC,WAAW,CAAC;AAAC,QAAA,OAAA;AAAS,QAAA,OAAA;AAAS,QAAA;AAAQ,KAAA,CAACA,QAAQ,CAACF,QAAAA,CAAAA;AAE5E;;;;"}

View File

@@ -0,0 +1,31 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var reactIntl = require('react-intl');
const DialogFooter = ({ onClose, onValidate })=>{
const { formatMessage } = reactIntl.useIntl();
return /*#__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'
})
}),
onValidate && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
onClick: onValidate,
children: formatMessage({
id: 'global.finish',
defaultMessage: 'Finish'
})
})
]
});
};
exports.DialogFooter = DialogFooter;
//# sourceMappingURL=DialogFooter.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"DialogFooter.js","sources":["../../../../admin/src/components/AssetDialog/DialogFooter.tsx"],"sourcesContent":["import { Button, Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\ninterface DialogFooterProps {\n onClose: () => void;\n onValidate?: () => void;\n}\n\nexport const DialogFooter = ({ onClose, onValidate }: DialogFooterProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n </Button>\n {onValidate && (\n <Button onClick={onValidate}>\n {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n </Button>\n )}\n </Modal.Footer>\n );\n};\n"],"names":["DialogFooter","onClose","onValidate","formatMessage","useIntl","_jsxs","Modal","Footer","_jsx","Button","onClick","variant","id","defaultMessage"],"mappings":";;;;;;MAQaA,YAAe,GAAA,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAqB,GAAA;IACrE,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;IAE1B,qBACEC,eAAA,CAACC,mBAAMC,MAAM,EAAA;;0BACXC,cAACC,CAAAA,mBAAAA,EAAAA;gBAAOC,OAAST,EAAAA,OAAAA;gBAASU,OAAQ,EAAA,UAAA;0BAC/BR,aAAc,CAAA;oBAAES,EAAI,EAAA,8BAAA;oBAAgCC,cAAgB,EAAA;AAAS,iBAAA;;AAE/EX,YAAAA,UAAAA,kBACCM,cAACC,CAAAA,mBAAAA,EAAAA;gBAAOC,OAASR,EAAAA,UAAAA;0BACdC,aAAc,CAAA;oBAAES,EAAI,EAAA,eAAA;oBAAiBC,cAAgB,EAAA;AAAS,iBAAA;;;;AAKzE;;;;"}

View File

@@ -0,0 +1,29 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import { Modal, Button } from '@strapi/design-system';
import { useIntl } from 'react-intl';
const DialogFooter = ({ onClose, onValidate })=>{
const { formatMessage } = useIntl();
return /*#__PURE__*/ jsxs(Modal.Footer, {
children: [
/*#__PURE__*/ jsx(Button, {
onClick: onClose,
variant: "tertiary",
children: formatMessage({
id: 'app.components.Button.cancel',
defaultMessage: 'Cancel'
})
}),
onValidate && /*#__PURE__*/ jsx(Button, {
onClick: onValidate,
children: formatMessage({
id: 'global.finish',
defaultMessage: 'Finish'
})
})
]
});
};
export { DialogFooter };
//# sourceMappingURL=DialogFooter.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"DialogFooter.mjs","sources":["../../../../admin/src/components/AssetDialog/DialogFooter.tsx"],"sourcesContent":["import { Button, Modal } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\ninterface DialogFooterProps {\n onClose: () => void;\n onValidate?: () => void;\n}\n\nexport const DialogFooter = ({ onClose, onValidate }: DialogFooterProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <Modal.Footer>\n <Button onClick={onClose} variant=\"tertiary\">\n {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}\n </Button>\n {onValidate && (\n <Button onClick={onValidate}>\n {formatMessage({ id: 'global.finish', defaultMessage: 'Finish' })}\n </Button>\n )}\n </Modal.Footer>\n );\n};\n"],"names":["DialogFooter","onClose","onValidate","formatMessage","useIntl","_jsxs","Modal","Footer","_jsx","Button","onClick","variant","id","defaultMessage"],"mappings":";;;;MAQaA,YAAe,GAAA,CAAC,EAAEC,OAAO,EAAEC,UAAU,EAAqB,GAAA;IACrE,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,qBACEC,IAAA,CAACC,MAAMC,MAAM,EAAA;;0BACXC,GAACC,CAAAA,MAAAA,EAAAA;gBAAOC,OAAST,EAAAA,OAAAA;gBAASU,OAAQ,EAAA,UAAA;0BAC/BR,aAAc,CAAA;oBAAES,EAAI,EAAA,8BAAA;oBAAgCC,cAAgB,EAAA;AAAS,iBAAA;;AAE/EX,YAAAA,UAAAA,kBACCM,GAACC,CAAAA,MAAAA,EAAAA;gBAAOC,OAASR,EAAAA,UAAAA;0BACdC,aAAc,CAAA;oBAAES,EAAI,EAAA,eAAA;oBAAiBC,cAAgB,EAAA;AAAS,iBAAA;;;;AAKzE;;;;"}

View File

@@ -0,0 +1,60 @@
'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 AssetGridList = require('../../AssetGridList/AssetGridList.js');
// TODO: find a better naming convention for the file that was an index file before
const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset })=>{
const { formatMessage } = reactIntl.useIntl();
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
direction: "column",
alignItems: "stretch",
gap: 4,
children: [
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
gap: 0,
direction: "column",
alignItems: "start",
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: selectedAssets.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(AssetGridList.AssetGridList, {
size: "S",
assets: selectedAssets,
onSelectAsset: onSelectAsset,
selectedAssets: selectedAssets,
onReorderAsset: onReorderAsset
})
]
});
};
exports.SelectedStep = SelectedStep;
//# sourceMappingURL=SelectedStep.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"SelectedStep.js","sources":["../../../../../admin/src/components/AssetDialog/SelectedStep/SelectedStep.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../utils';\nimport { AssetGridList } from '../../AssetGridList/AssetGridList';\n\nimport type { File } from '../../../../../shared/contracts/files';\n\ninterface SelectedStepProps {\n onSelectAsset: (asset: File) => void;\n selectedAssets: File[];\n onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const SelectedStep = ({\n selectedAssets,\n onSelectAsset,\n onReorderAsset,\n}: SelectedStepProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n <Flex gap={0} direction=\"column\" alignItems=\"start\">\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: selectedAssets.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\n <AssetGridList\n size=\"S\"\n assets={selectedAssets}\n onSelectAsset={onSelectAsset}\n selectedAssets={selectedAssets}\n onReorderAsset={onReorderAsset}\n />\n </Flex>\n );\n};\n"],"names":["SelectedStep","selectedAssets","onSelectAsset","onReorderAsset","formatMessage","useIntl","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","number","length","AssetGridList","size","assets"],"mappings":";;;;;;;;;;;;;AAAA;AAeO,MAAMA,eAAe,CAAC,EAC3BC,cAAc,EACdC,aAAa,EACbC,cAAc,EACI,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,qBACEC,eAACC,CAAAA,iBAAAA,EAAAA;QAAKC,SAAU,EAAA,QAAA;QAASC,UAAW,EAAA,SAAA;QAAUC,GAAK,EAAA,CAAA;;0BACjDJ,eAACC,CAAAA,iBAAAA,EAAAA;gBAAKG,GAAK,EAAA,CAAA;gBAAGF,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,OAAA;;kCAC1CE,cAACC,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;wBAAOC,SAAU,EAAA,YAAA;kCAClDX,aACC,CAAA;AACEY,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,uBAAA,CAAA;4BACZC,cACE,EAAA;yBAEJ,EAAA;AAAEC,4BAAAA,MAAAA,EAAQlB,eAAemB;AAAO,yBAAA;;kCAGpCT,cAACC,CAAAA,uBAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKE,SAAU,EAAA,YAAA;kCAChCX,aAAc,CAAA;AACbY,4BAAAA,EAAAA,EAAIC,eAAQ,CAAA,uCAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA;;;;0BAIJP,cAACU,CAAAA,2BAAAA,EAAAA;gBACCC,IAAK,EAAA,GAAA;gBACLC,MAAQtB,EAAAA,cAAAA;gBACRC,aAAeA,EAAAA,aAAAA;gBACfD,cAAgBA,EAAAA,cAAAA;gBAChBE,cAAgBA,EAAAA;;;;AAIxB;;;;"}

View File

@@ -0,0 +1,58 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import { Flex, Typography } 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 { AssetGridList } from '../../AssetGridList/AssetGridList.mjs';
// TODO: find a better naming convention for the file that was an index file before
const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset })=>{
const { formatMessage } = useIntl();
return /*#__PURE__*/ jsxs(Flex, {
direction: "column",
alignItems: "stretch",
gap: 4,
children: [
/*#__PURE__*/ jsxs(Flex, {
gap: 0,
direction: "column",
alignItems: "start",
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: selectedAssets.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(AssetGridList, {
size: "S",
assets: selectedAssets,
onSelectAsset: onSelectAsset,
selectedAssets: selectedAssets,
onReorderAsset: onReorderAsset
})
]
});
};
export { SelectedStep };
//# sourceMappingURL=SelectedStep.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"SelectedStep.mjs","sources":["../../../../../admin/src/components/AssetDialog/SelectedStep/SelectedStep.tsx"],"sourcesContent":["// TODO: find a better naming convention for the file that was an index file before\nimport { Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\n\nimport { getTrad } from '../../../utils';\nimport { AssetGridList } from '../../AssetGridList/AssetGridList';\n\nimport type { File } from '../../../../../shared/contracts/files';\n\ninterface SelectedStepProps {\n onSelectAsset: (asset: File) => void;\n selectedAssets: File[];\n onReorderAsset?: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const SelectedStep = ({\n selectedAssets,\n onSelectAsset,\n onReorderAsset,\n}: SelectedStepProps) => {\n const { formatMessage } = useIntl();\n\n return (\n <Flex direction=\"column\" alignItems=\"stretch\" gap={4}>\n <Flex gap={0} direction=\"column\" alignItems=\"start\">\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: selectedAssets.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\n <AssetGridList\n size=\"S\"\n assets={selectedAssets}\n onSelectAsset={onSelectAsset}\n selectedAssets={selectedAssets}\n onReorderAsset={onReorderAsset}\n />\n </Flex>\n );\n};\n"],"names":["SelectedStep","selectedAssets","onSelectAsset","onReorderAsset","formatMessage","useIntl","_jsxs","Flex","direction","alignItems","gap","_jsx","Typography","variant","fontWeight","textColor","id","getTrad","defaultMessage","number","length","AssetGridList","size","assets"],"mappings":";;;;;;;;;;;AAAA;AAeO,MAAMA,eAAe,CAAC,EAC3BC,cAAc,EACdC,aAAa,EACbC,cAAc,EACI,GAAA;IAClB,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,qBACEC,IAACC,CAAAA,IAAAA,EAAAA;QAAKC,SAAU,EAAA,QAAA;QAASC,UAAW,EAAA,SAAA;QAAUC,GAAK,EAAA,CAAA;;0BACjDJ,IAACC,CAAAA,IAAAA,EAAAA;gBAAKG,GAAK,EAAA,CAAA;gBAAGF,SAAU,EAAA,QAAA;gBAASC,UAAW,EAAA,OAAA;;kCAC1CE,GAACC,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKC,UAAW,EAAA,MAAA;wBAAOC,SAAU,EAAA,YAAA;kCAClDX,aACC,CAAA;AACEY,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,uBAAA,CAAA;4BACZC,cACE,EAAA;yBAEJ,EAAA;AAAEC,4BAAAA,MAAAA,EAAQlB,eAAemB;AAAO,yBAAA;;kCAGpCT,GAACC,CAAAA,UAAAA,EAAAA;wBAAWC,OAAQ,EAAA,IAAA;wBAAKE,SAAU,EAAA,YAAA;kCAChCX,aAAc,CAAA;AACbY,4BAAAA,EAAAA,EAAIC,OAAQ,CAAA,uCAAA,CAAA;4BACZC,cAAgB,EAAA;AAClB,yBAAA;;;;0BAIJP,GAACU,CAAAA,aAAAA,EAAAA;gBACCC,IAAK,EAAA,GAAA;gBACLC,MAAQtB,EAAAA,cAAAA;gBACRC,aAAeA,EAAAA,aAAAA;gBACfD,cAAgBA,EAAAA,cAAAA;gBAChBE,cAAgBA,EAAAA;;;;AAIxB;;;;"}

View File

@@ -0,0 +1,72 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var AssetCard = require('../AssetCard/AssetCard.js');
var Draggable = require('./Draggable.js');
// TODO: find a better naming convention for the file that was an index file before
const AssetGridList = ({ allowedTypes = [
'files',
'images',
'videos',
'audios'
], assets, onEditAsset, onSelectAsset, selectedAssets, size = 'M', onReorderAsset, title = null })=>{
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.KeyboardNavigable, {
tagName: "article",
children: [
title && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
paddingTop: 2,
paddingBottom: 2,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
tag: "h2",
variant: "delta",
fontWeight: "semiBold",
children: title
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
gap: 4,
children: assets.map((asset, index)=>{
const isSelected = !!selectedAssets.find((currentAsset)=>currentAsset.id === asset.id);
if (onReorderAsset) {
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
col: 3,
height: "100%",
children: /*#__PURE__*/ jsxRuntime.jsx(Draggable.Draggable, {
index: index,
moveItem: onReorderAsset,
id: asset.id,
children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
allowedTypes: allowedTypes,
asset: asset,
isSelected: isSelected,
onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
onSelect: ()=>onSelectAsset(asset),
size: size
})
})
}, asset.id);
}
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
col: 3,
height: "100%",
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsx(AssetCard.AssetCard, {
allowedTypes: allowedTypes,
asset: asset,
isSelected: isSelected,
onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
onSelect: ()=>onSelectAsset(asset),
size: size
}, asset.id)
}, asset.id);
})
})
]
});
};
exports.AssetGridList = AssetGridList;
//# sourceMappingURL=AssetGridList.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,70 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import { KeyboardNavigable, Box, Typography, Grid } from '@strapi/design-system';
import { AssetCard } from '../AssetCard/AssetCard.mjs';
import { Draggable } from './Draggable.mjs';
// TODO: find a better naming convention for the file that was an index file before
const AssetGridList = ({ allowedTypes = [
'files',
'images',
'videos',
'audios'
], assets, onEditAsset, onSelectAsset, selectedAssets, size = 'M', onReorderAsset, title = null })=>{
return /*#__PURE__*/ jsxs(KeyboardNavigable, {
tagName: "article",
children: [
title && /*#__PURE__*/ jsx(Box, {
paddingTop: 2,
paddingBottom: 2,
children: /*#__PURE__*/ jsx(Typography, {
tag: "h2",
variant: "delta",
fontWeight: "semiBold",
children: title
})
}),
/*#__PURE__*/ jsx(Grid.Root, {
gap: 4,
children: assets.map((asset, index)=>{
const isSelected = !!selectedAssets.find((currentAsset)=>currentAsset.id === asset.id);
if (onReorderAsset) {
return /*#__PURE__*/ jsx(Grid.Item, {
col: 3,
height: "100%",
children: /*#__PURE__*/ jsx(Draggable, {
index: index,
moveItem: onReorderAsset,
id: asset.id,
children: /*#__PURE__*/ jsx(AssetCard, {
allowedTypes: allowedTypes,
asset: asset,
isSelected: isSelected,
onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
onSelect: ()=>onSelectAsset(asset),
size: size
})
})
}, asset.id);
}
return /*#__PURE__*/ jsx(Grid.Item, {
col: 3,
height: "100%",
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsx(AssetCard, {
allowedTypes: allowedTypes,
asset: asset,
isSelected: isSelected,
onEdit: onEditAsset ? ()=>onEditAsset(asset) : undefined,
onSelect: ()=>onSelectAsset(asset),
size: size
}, asset.id)
}, asset.id);
})
})
]
});
};
export { AssetGridList };
//# sourceMappingURL=AssetGridList.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,65 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactDnd = require('react-dnd');
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 Draggable = ({ children, id, index, moveItem })=>{
const ref = React__namespace.useRef(null);
const [, drop] = reactDnd.useDrop({
accept: 'draggable',
hover (hoveredOverItem) {
if (!ref.current) {
return;
}
if (hoveredOverItem.id !== id) {
moveItem(hoveredOverItem.index, index);
hoveredOverItem.index = index;
}
}
});
const [{ isDragging }, drag] = reactDnd.useDrag({
type: 'draggable',
item () {
return {
index,
id
};
},
collect: (monitor)=>({
isDragging: monitor.isDragging()
})
});
const opacity = isDragging ? 0.2 : 1;
drag(drop(ref));
return /*#__PURE__*/ jsxRuntime.jsx("div", {
ref: ref,
style: {
opacity,
cursor: 'move'
},
children: children
});
};
exports.Draggable = Draggable;
//# sourceMappingURL=Draggable.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Draggable.js","sources":["../../../../admin/src/components/AssetGridList/Draggable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDrag, useDrop } from 'react-dnd';\n\ninterface DraggableProps {\n id: string | number;\n index: number;\n children: React.ReactNode;\n moveItem: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const Draggable = ({ children, id, index, moveItem }: DraggableProps) => {\n const ref = React.useRef(null);\n\n const [, drop] = useDrop({\n accept: 'draggable',\n hover(hoveredOverItem: { id: number; index: number }) {\n if (!ref.current) {\n return;\n }\n\n if (hoveredOverItem.id !== id) {\n moveItem(hoveredOverItem.index, index);\n\n hoveredOverItem.index = index;\n }\n },\n });\n\n const [{ isDragging }, drag] = useDrag({\n type: 'draggable',\n item() {\n return { index, id };\n },\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n }),\n });\n\n const opacity = isDragging ? 0.2 : 1;\n\n drag(drop(ref));\n\n return (\n <div ref={ref} style={{ opacity, cursor: 'move' }}>\n {children}\n </div>\n );\n};\n"],"names":["Draggable","children","id","index","moveItem","ref","React","useRef","drop","useDrop","accept","hover","hoveredOverItem","current","isDragging","drag","useDrag","type","item","collect","monitor","opacity","_jsx","div","style","cursor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,SAAY,GAAA,CAAC,EAAEC,QAAQ,EAAEC,EAAE,EAAEC,KAAK,EAAEC,QAAQ,EAAkB,GAAA;IACzE,MAAMC,GAAAA,GAAMC,gBAAMC,CAAAA,MAAM,CAAC,IAAA,CAAA;IAEzB,MAAM,GAAGC,IAAK,CAAA,GAAGC,gBAAQ,CAAA;QACvBC,MAAQ,EAAA,WAAA;AACRC,QAAAA,KAAAA,CAAAA,CAAMC,eAA8C,EAAA;YAClD,IAAI,CAACP,GAAIQ,CAAAA,OAAO,EAAE;AAChB,gBAAA;AACF;YAEA,IAAID,eAAAA,CAAgBV,EAAE,KAAKA,EAAI,EAAA;gBAC7BE,QAASQ,CAAAA,eAAAA,CAAgBT,KAAK,EAAEA,KAAAA,CAAAA;AAEhCS,gBAAAA,eAAAA,CAAgBT,KAAK,GAAGA,KAAAA;AAC1B;AACF;AACF,KAAA,CAAA;AAEA,IAAA,MAAM,CAAC,EAAEW,UAAU,EAAE,EAAEC,IAAAA,CAAK,GAAGC,gBAAQ,CAAA;QACrCC,IAAM,EAAA,WAAA;AACNC,QAAAA,IAAAA,CAAAA,GAAAA;YACE,OAAO;AAAEf,gBAAAA,KAAAA;AAAOD,gBAAAA;AAAG,aAAA;AACrB,SAAA;QACAiB,OAAS,EAAA,CAACC,WAAa;AACrBN,gBAAAA,UAAAA,EAAYM,QAAQN,UAAU;aAChC;AACF,KAAA,CAAA;IAEA,MAAMO,OAAAA,GAAUP,aAAa,GAAM,GAAA,CAAA;AAEnCC,IAAAA,IAAAA,CAAKP,IAAKH,CAAAA,GAAAA,CAAAA,CAAAA;AAEV,IAAA,qBACEiB,cAACC,CAAAA,KAAAA,EAAAA;QAAIlB,GAAKA,EAAAA,GAAAA;QAAKmB,KAAO,EAAA;AAAEH,YAAAA,OAAAA;YAASI,MAAQ,EAAA;AAAO,SAAA;AAC7CxB,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

View File

@@ -0,0 +1,44 @@
import { jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useDrop, useDrag } from 'react-dnd';
const Draggable = ({ children, id, index, moveItem })=>{
const ref = React.useRef(null);
const [, drop] = useDrop({
accept: 'draggable',
hover (hoveredOverItem) {
if (!ref.current) {
return;
}
if (hoveredOverItem.id !== id) {
moveItem(hoveredOverItem.index, index);
hoveredOverItem.index = index;
}
}
});
const [{ isDragging }, drag] = useDrag({
type: 'draggable',
item () {
return {
index,
id
};
},
collect: (monitor)=>({
isDragging: monitor.isDragging()
})
});
const opacity = isDragging ? 0.2 : 1;
drag(drop(ref));
return /*#__PURE__*/ jsx("div", {
ref: ref,
style: {
opacity,
cursor: 'move'
},
children: children
});
};
export { Draggable };
//# sourceMappingURL=Draggable.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"Draggable.mjs","sources":["../../../../admin/src/components/AssetGridList/Draggable.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useDrag, useDrop } from 'react-dnd';\n\ninterface DraggableProps {\n id: string | number;\n index: number;\n children: React.ReactNode;\n moveItem: (fromIndex: number, toIndex: number) => void;\n}\n\nexport const Draggable = ({ children, id, index, moveItem }: DraggableProps) => {\n const ref = React.useRef(null);\n\n const [, drop] = useDrop({\n accept: 'draggable',\n hover(hoveredOverItem: { id: number; index: number }) {\n if (!ref.current) {\n return;\n }\n\n if (hoveredOverItem.id !== id) {\n moveItem(hoveredOverItem.index, index);\n\n hoveredOverItem.index = index;\n }\n },\n });\n\n const [{ isDragging }, drag] = useDrag({\n type: 'draggable',\n item() {\n return { index, id };\n },\n collect: (monitor) => ({\n isDragging: monitor.isDragging(),\n }),\n });\n\n const opacity = isDragging ? 0.2 : 1;\n\n drag(drop(ref));\n\n return (\n <div ref={ref} style={{ opacity, cursor: 'move' }}>\n {children}\n </div>\n );\n};\n"],"names":["Draggable","children","id","index","moveItem","ref","React","useRef","drop","useDrop","accept","hover","hoveredOverItem","current","isDragging","drag","useDrag","type","item","collect","monitor","opacity","_jsx","div","style","cursor"],"mappings":";;;;AAWO,MAAMA,SAAY,GAAA,CAAC,EAAEC,QAAQ,EAAEC,EAAE,EAAEC,KAAK,EAAEC,QAAQ,EAAkB,GAAA;IACzE,MAAMC,GAAAA,GAAMC,KAAMC,CAAAA,MAAM,CAAC,IAAA,CAAA;IAEzB,MAAM,GAAGC,IAAK,CAAA,GAAGC,OAAQ,CAAA;QACvBC,MAAQ,EAAA,WAAA;AACRC,QAAAA,KAAAA,CAAAA,CAAMC,eAA8C,EAAA;YAClD,IAAI,CAACP,GAAIQ,CAAAA,OAAO,EAAE;AAChB,gBAAA;AACF;YAEA,IAAID,eAAAA,CAAgBV,EAAE,KAAKA,EAAI,EAAA;gBAC7BE,QAASQ,CAAAA,eAAAA,CAAgBT,KAAK,EAAEA,KAAAA,CAAAA;AAEhCS,gBAAAA,eAAAA,CAAgBT,KAAK,GAAGA,KAAAA;AAC1B;AACF;AACF,KAAA,CAAA;AAEA,IAAA,MAAM,CAAC,EAAEW,UAAU,EAAE,EAAEC,IAAAA,CAAK,GAAGC,OAAQ,CAAA;QACrCC,IAAM,EAAA,WAAA;AACNC,QAAAA,IAAAA,CAAAA,GAAAA;YACE,OAAO;AAAEf,gBAAAA,KAAAA;AAAOD,gBAAAA;AAAG,aAAA;AACrB,SAAA;QACAiB,OAAS,EAAA,CAACC,WAAa;AACrBN,gBAAAA,UAAAA,EAAYM,QAAQN,UAAU;aAChC;AACF,KAAA,CAAA;IAEA,MAAMO,OAAAA,GAAUP,aAAa,GAAM,GAAA,CAAA;AAEnCC,IAAAA,IAAAA,CAAKP,IAAKH,CAAAA,GAAAA,CAAAA,CAAAA;AAEV,IAAA,qBACEiB,GAACC,CAAAA,KAAAA,EAAAA;QAAIlB,GAAKA,EAAAA,GAAAA;QAAKmB,KAAO,EAAA;AAAEH,YAAAA,OAAAA;YAASI,MAAQ,EAAA;AAAO,SAAA;AAC7CxB,QAAAA,QAAAA,EAAAA;;AAGP;;;;"}

View File

@@ -0,0 +1,49 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var reactIntl = require('react-intl');
var reactRouterDom = require('react-router-dom');
var CrumbSimpleMenuAsync = require('./CrumbSimpleMenuAsync.js');
const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })=>{
const { formatMessage } = reactIntl.useIntl();
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Breadcrumbs, {
...props,
children: breadcrumbs.map((crumb, index)=>{
if (Array.isArray(crumb)) {
return /*#__PURE__*/ jsxRuntime.jsx(CrumbSimpleMenuAsync.CrumbSimpleMenuAsync, {
parentsToOmit: [
...breadcrumbs
].splice(index + 1, breadcrumbs.length - 1).map((parent)=>parent.id),
currentFolderId: currentFolderId,
onChangeFolder: onChangeFolder
}, `breadcrumb-${crumb?.id ?? 'menu'}`);
}
const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
if (onChangeFolder) {
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.CrumbLink, {
type: "button",
onClick: ()=>onChangeFolder(crumb.id, crumb.path),
children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
}, `breadcrumb-${crumb?.id ?? 'root'}`);
}
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.CrumbLink, {
to: crumb.href,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - `tag` prop is not defined in the `BaseLinkProps` type
tag: reactRouterDom.Link,
children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
}, `breadcrumb-${crumb?.id ?? 'root'}`);
}
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Crumb, {
isCurrent: index + 1 === breadcrumbs.length,
children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
}, `breadcrumb-${crumb?.id ?? 'root'}`);
})
});
};
exports.Breadcrumbs = Breadcrumbs;
//# sourceMappingURL=Breadcrumbs.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,47 @@
import { jsx } from 'react/jsx-runtime';
import { Breadcrumbs as Breadcrumbs$1, CrumbLink, Crumb } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync.mjs';
const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props })=>{
const { formatMessage } = useIntl();
return /*#__PURE__*/ jsx(Breadcrumbs$1, {
...props,
children: breadcrumbs.map((crumb, index)=>{
if (Array.isArray(crumb)) {
return /*#__PURE__*/ jsx(CrumbSimpleMenuAsync, {
parentsToOmit: [
...breadcrumbs
].splice(index + 1, breadcrumbs.length - 1).map((parent)=>parent.id),
currentFolderId: currentFolderId,
onChangeFolder: onChangeFolder
}, `breadcrumb-${crumb?.id ?? 'menu'}`);
}
const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
if (onChangeFolder) {
return /*#__PURE__*/ jsx(CrumbLink, {
type: "button",
onClick: ()=>onChangeFolder(crumb.id, crumb.path),
children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
}, `breadcrumb-${crumb?.id ?? 'root'}`);
}
return /*#__PURE__*/ jsx(CrumbLink, {
to: crumb.href,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - `tag` prop is not defined in the `BaseLinkProps` type
tag: Link,
children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
}, `breadcrumb-${crumb?.id ?? 'root'}`);
}
return /*#__PURE__*/ jsx(Crumb, {
isCurrent: index + 1 === breadcrumbs.length,
children: typeof crumb.label !== 'string' && crumb.label?.id ? formatMessage(crumb.label) : crumb.label
}, `breadcrumb-${crumb?.id ?? 'root'}`);
})
});
};
export { Breadcrumbs };
//# sourceMappingURL=Breadcrumbs.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,89 @@
'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');
var reactRouterDom = require('react-router-dom');
var useFolderStructure = require('../../hooks/useFolderStructure.js');
require('byte-size');
require('date-fns');
var getTrad = require('../../utils/getTrad.js');
var getFolderURL = require('../../utils/getFolderURL.js');
var getFolderParents = require('../../utils/getFolderParents.js');
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 CrumbSimpleMenuAsync = ({ parentsToOmit = [], currentFolderId, onChangeFolder })=>{
const [shouldFetch, setShouldFetch] = React__namespace.useState(false);
const { data, isLoading } = useFolderStructure.useFolderStructure({
enabled: shouldFetch
});
const { pathname } = reactRouterDom.useLocation();
const [{ query }] = strapiAdmin.useQueryParams();
const { formatMessage } = reactIntl.useIntl();
const allAscendants = data && getFolderParents.getFolderParents(data, currentFolderId);
const filteredAscendants = allAscendants && allAscendants.filter((ascendant)=>typeof ascendant.id === 'number' && !parentsToOmit.includes(ascendant.id) && ascendant.id !== null);
return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.CrumbSimpleMenu, {
onOpen: ()=>setShouldFetch(true),
onClose: ()=>setShouldFetch(false),
"aria-label": formatMessage({
id: getTrad.getTrad('header.breadcrumbs.menu.label'),
defaultMessage: 'Get more ascendants folders'
}),
label: "...",
children: [
isLoading && /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
small: true,
children: formatMessage({
id: getTrad.getTrad('content.isLoading'),
defaultMessage: 'Content is loading.'
})
})
}),
filteredAscendants && filteredAscendants.map((ascendant)=>{
if (onChangeFolder) {
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
tag: "button",
type: "button",
onClick: ()=>onChangeFolder(Number(ascendant.id), ascendant.path),
children: ascendant.label
}, ascendant.id);
}
const url = getFolderURL.getFolderURL(pathname, query, {
folder: typeof ascendant?.id === 'string' ? ascendant.id : undefined,
folderPath: ascendant?.path
});
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.MenuItem, {
isLink: true,
href: url,
children: ascendant.label
}, ascendant.id);
})
]
});
};
exports.CrumbSimpleMenuAsync = CrumbSimpleMenuAsync;
//# sourceMappingURL=CrumbSimpleMenuAsync.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,68 @@
import { jsxs, jsx } from 'react/jsx-runtime';
import * as React from 'react';
import { useQueryParams } from '@strapi/admin/strapi-admin';
import { CrumbSimpleMenu, MenuItem, Loader } from '@strapi/design-system';
import { useIntl } from 'react-intl';
import { useLocation } from 'react-router-dom';
import { useFolderStructure } from '../../hooks/useFolderStructure.mjs';
import 'byte-size';
import 'date-fns';
import { getTrad } from '../../utils/getTrad.mjs';
import { getFolderURL } from '../../utils/getFolderURL.mjs';
import { getFolderParents } from '../../utils/getFolderParents.mjs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
const CrumbSimpleMenuAsync = ({ parentsToOmit = [], currentFolderId, onChangeFolder })=>{
const [shouldFetch, setShouldFetch] = React.useState(false);
const { data, isLoading } = useFolderStructure({
enabled: shouldFetch
});
const { pathname } = useLocation();
const [{ query }] = useQueryParams();
const { formatMessage } = useIntl();
const allAscendants = data && getFolderParents(data, currentFolderId);
const filteredAscendants = allAscendants && allAscendants.filter((ascendant)=>typeof ascendant.id === 'number' && !parentsToOmit.includes(ascendant.id) && ascendant.id !== null);
return /*#__PURE__*/ jsxs(CrumbSimpleMenu, {
onOpen: ()=>setShouldFetch(true),
onClose: ()=>setShouldFetch(false),
"aria-label": formatMessage({
id: getTrad('header.breadcrumbs.menu.label'),
defaultMessage: 'Get more ascendants folders'
}),
label: "...",
children: [
isLoading && /*#__PURE__*/ jsx(MenuItem, {
children: /*#__PURE__*/ jsx(Loader, {
small: true,
children: formatMessage({
id: getTrad('content.isLoading'),
defaultMessage: 'Content is loading.'
})
})
}),
filteredAscendants && filteredAscendants.map((ascendant)=>{
if (onChangeFolder) {
return /*#__PURE__*/ jsx(MenuItem, {
tag: "button",
type: "button",
onClick: ()=>onChangeFolder(Number(ascendant.id), ascendant.path),
children: ascendant.label
}, ascendant.id);
}
const url = getFolderURL(pathname, query, {
folder: typeof ascendant?.id === 'string' ? ascendant.id : undefined,
folderPath: ascendant?.path
});
return /*#__PURE__*/ jsx(MenuItem, {
isLink: true,
href: url,
children: ascendant.label
}, ascendant.id);
})
]
});
};
export { CrumbSimpleMenuAsync };
//# sourceMappingURL=CrumbSimpleMenuAsync.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,154 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
var formik = require('formik');
var isEmpty = require('lodash/isEmpty');
var reactIntl = require('react-intl');
var useBulkMove = require('../../hooks/useBulkMove.js');
var useFolderStructure = require('../../hooks/useFolderStructure.js');
require('byte-size');
require('date-fns');
var normalizeAPIError = require('../../utils/normalizeAPIError.js');
var getTrad = require('../../utils/getTrad.js');
require('qs');
require('../../constants.js');
require('../../utils/urlYupSchema.js');
var SelectTree = require('../SelectTree/SelectTree.js');
const BulkMoveDialog = ({ onClose, selected = [], currentFolder })=>{
const { formatMessage } = reactIntl.useIntl();
const { data: folderStructure, isLoading } = useFolderStructure.useFolderStructure();
const { move } = useBulkMove.useBulkMove();
if (!folderStructure) {
return null;
}
const handleSubmit = async (values, { setErrors })=>{
try {
if (typeof values.destination !== 'string') {
const destinationValue = values.destination.value;
await move(destinationValue, selected);
onClose();
}
} catch (error) {
const normalizedError = normalizeAPIError.normalizeAPIError(error);
if (normalizedError && 'errors' in normalizedError) {
const formikErrors = normalizedError.errors?.reduce((acc, error)=>{
acc[error.values?.path?.length || 'destination'] = error.defaultMessage;
return acc;
}, {});
if (!isEmpty(formikErrors)) {
setErrors(formikErrors);
}
}
}
};
if (isLoading) {
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
justifyContent: "center",
paddingTop: 4,
paddingBottom: 4,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
children: formatMessage({
id: getTrad.getTrad('content.isLoading'),
defaultMessage: 'Content is loading.'
})
})
})
})
});
}
const initialFormData = {
destination: {
value: currentFolder?.id || '',
label: currentFolder?.name || folderStructure[0].label
}
};
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Content, {
children: /*#__PURE__*/ jsxRuntime.jsx(formik.Formik, {
validateOnChange: false,
onSubmit: handleSubmit,
initialValues: initialFormData,
children: ({ values, errors, setFieldValue })=>/*#__PURE__*/ jsxRuntime.jsxs(formik.Form, {
noValidate: true,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Header, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Title, {
children: formatMessage({
id: getTrad.getTrad('modal.folder.move.title'),
defaultMessage: 'Move elements to'
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Body, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
gap: 4,
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
xs: 12,
col: 12,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Field.Root, {
id: "folder-destination",
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Field.Label, {
children: formatMessage({
id: getTrad.getTrad('form.input.label.folder-location'),
defaultMessage: 'Location'
})
}),
/*#__PURE__*/ jsxRuntime.jsx(SelectTree.SelectTree, {
options: folderStructure,
onChange: (value)=>{
setFieldValue('destination', value);
},
defaultValue: typeof values.destination !== 'string' ? values.destination : undefined,
name: "destination",
menuPortalTarget: document.querySelector('body'),
inputId: "folder-destination",
error: errors?.destination,
ariaErrorMessage: "destination-error"
}),
errors.destination && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
variant: "pi",
tag: "p",
textColor: "danger600",
children: errors.destination
})
]
})
})
})
}),
/*#__PURE__*/ jsxRuntime.jsxs(designSystem.Modal.Footer, {
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Modal.Close, {
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
variant: "tertiary",
name: "cancel",
children: formatMessage({
id: 'cancel',
defaultMessage: 'Cancel'
})
})
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
type: "submit",
loading: isLoading,
children: formatMessage({
id: 'modal.folder.move.submit',
defaultMessage: 'Move'
})
})
]
})
]
})
})
});
};
exports.BulkMoveDialog = BulkMoveDialog;
//# sourceMappingURL=BulkMoveDialog.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,152 @@
import { jsx, jsxs } from 'react/jsx-runtime';
import { Modal, Flex, Loader, Grid, Field, Typography, Button } from '@strapi/design-system';
import { Formik, Form } from 'formik';
import isEmpty from 'lodash/isEmpty';
import { useIntl } from 'react-intl';
import { useBulkMove } from '../../hooks/useBulkMove.mjs';
import { useFolderStructure } from '../../hooks/useFolderStructure.mjs';
import 'byte-size';
import 'date-fns';
import { normalizeAPIError } from '../../utils/normalizeAPIError.mjs';
import { getTrad } from '../../utils/getTrad.mjs';
import 'qs';
import '../../constants.mjs';
import '../../utils/urlYupSchema.mjs';
import { SelectTree } from '../SelectTree/SelectTree.mjs';
const BulkMoveDialog = ({ onClose, selected = [], currentFolder })=>{
const { formatMessage } = useIntl();
const { data: folderStructure, isLoading } = useFolderStructure();
const { move } = useBulkMove();
if (!folderStructure) {
return null;
}
const handleSubmit = async (values, { setErrors })=>{
try {
if (typeof values.destination !== 'string') {
const destinationValue = values.destination.value;
await move(destinationValue, selected);
onClose();
}
} catch (error) {
const normalizedError = normalizeAPIError(error);
if (normalizedError && 'errors' in normalizedError) {
const formikErrors = normalizedError.errors?.reduce((acc, error)=>{
acc[error.values?.path?.length || 'destination'] = error.defaultMessage;
return acc;
}, {});
if (!isEmpty(formikErrors)) {
setErrors(formikErrors);
}
}
}
};
if (isLoading) {
return /*#__PURE__*/ jsx(Modal.Content, {
children: /*#__PURE__*/ jsx(Modal.Body, {
children: /*#__PURE__*/ jsx(Flex, {
justifyContent: "center",
paddingTop: 4,
paddingBottom: 4,
children: /*#__PURE__*/ jsx(Loader, {
children: formatMessage({
id: getTrad('content.isLoading'),
defaultMessage: 'Content is loading.'
})
})
})
})
});
}
const initialFormData = {
destination: {
value: currentFolder?.id || '',
label: currentFolder?.name || folderStructure[0].label
}
};
return /*#__PURE__*/ jsx(Modal.Content, {
children: /*#__PURE__*/ jsx(Formik, {
validateOnChange: false,
onSubmit: handleSubmit,
initialValues: initialFormData,
children: ({ values, errors, setFieldValue })=>/*#__PURE__*/ jsxs(Form, {
noValidate: true,
children: [
/*#__PURE__*/ jsx(Modal.Header, {
children: /*#__PURE__*/ jsx(Modal.Title, {
children: formatMessage({
id: getTrad('modal.folder.move.title'),
defaultMessage: 'Move elements to'
})
})
}),
/*#__PURE__*/ jsx(Modal.Body, {
children: /*#__PURE__*/ jsx(Grid.Root, {
gap: 4,
children: /*#__PURE__*/ jsx(Grid.Item, {
xs: 12,
col: 12,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxs(Field.Root, {
id: "folder-destination",
children: [
/*#__PURE__*/ jsx(Field.Label, {
children: formatMessage({
id: getTrad('form.input.label.folder-location'),
defaultMessage: 'Location'
})
}),
/*#__PURE__*/ jsx(SelectTree, {
options: folderStructure,
onChange: (value)=>{
setFieldValue('destination', value);
},
defaultValue: typeof values.destination !== 'string' ? values.destination : undefined,
name: "destination",
menuPortalTarget: document.querySelector('body'),
inputId: "folder-destination",
error: errors?.destination,
ariaErrorMessage: "destination-error"
}),
errors.destination && /*#__PURE__*/ jsx(Typography, {
variant: "pi",
tag: "p",
textColor: "danger600",
children: errors.destination
})
]
})
})
})
}),
/*#__PURE__*/ jsxs(Modal.Footer, {
children: [
/*#__PURE__*/ jsx(Modal.Close, {
children: /*#__PURE__*/ jsx(Button, {
variant: "tertiary",
name: "cancel",
children: formatMessage({
id: 'cancel',
defaultMessage: 'Cancel'
})
})
}),
/*#__PURE__*/ jsx(Button, {
type: "submit",
loading: isLoading,
children: formatMessage({
id: 'modal.folder.move.submit',
defaultMessage: 'Move'
})
})
]
})
]
})
})
});
};
export { BulkMoveDialog };
//# sourceMappingURL=BulkMoveDialog.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,44 @@
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var designSystem = require('@strapi/design-system');
const ContextInfo = ({ blocks })=>{
return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Box, {
hasRadius: true,
paddingLeft: 6,
paddingRight: 6,
paddingTop: 4,
paddingBottom: 4,
background: "neutral100",
children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Root, {
gap: 4,
children: blocks.map(({ label, value })=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Grid.Item, {
col: 6,
xs: 12,
direction: "column",
alignItems: "stretch",
children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
direction: "column",
alignItems: "stretch",
gap: 1,
children: [
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
variant: "sigma",
textColor: "neutral600",
children: label
}),
/*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
variant: "pi",
textColor: "neutral700",
children: value
})
]
})
}, label))
})
});
};
exports.ContextInfo = ContextInfo;
//# sourceMappingURL=ContextInfo.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ContextInfo.js","sources":["../../../../admin/src/components/ContextInfo/ContextInfo.tsx"],"sourcesContent":["import { Box, Flex, Grid, Typography } from '@strapi/design-system';\n\ninterface ContextInfoProps {\n blocks: { label: string; value: string | number | null }[];\n}\n\nexport const ContextInfo = ({ blocks }: ContextInfoProps) => {\n return (\n <Box\n hasRadius\n paddingLeft={6}\n paddingRight={6}\n paddingTop={4}\n paddingBottom={4}\n background=\"neutral100\"\n >\n <Grid.Root gap={4}>\n {blocks.map(({ label, value }) => (\n <Grid.Item col={6} xs={12} key={label} direction=\"column\" alignItems=\"stretch\">\n <Flex direction=\"column\" alignItems=\"stretch\" gap={1}>\n <Typography variant=\"sigma\" textColor=\"neutral600\">\n {label}\n </Typography>\n <Typography variant=\"pi\" textColor=\"neutral700\">\n {value}\n </Typography>\n </Flex>\n </Grid.Item>\n ))}\n </Grid.Root>\n </Box>\n );\n};\n"],"names":["ContextInfo","blocks","_jsx","Box","hasRadius","paddingLeft","paddingRight","paddingTop","paddingBottom","background","Grid","Root","gap","map","label","value","Item","col","xs","direction","alignItems","_jsxs","Flex","Typography","variant","textColor"],"mappings":";;;;;AAMaA,MAAAA,WAAAA,GAAc,CAAC,EAAEC,MAAM,EAAoB,GAAA;AACtD,IAAA,qBACEC,cAACC,CAAAA,gBAAAA,EAAAA;QACCC,SAAS,EAAA,IAAA;QACTC,WAAa,EAAA,CAAA;QACbC,YAAc,EAAA,CAAA;QACdC,UAAY,EAAA,CAAA;QACZC,aAAe,EAAA,CAAA;QACfC,UAAW,EAAA,YAAA;gCAEXP,cAAA,CAACQ,kBAAKC,IAAI,EAAA;YAACC,GAAK,EAAA,CAAA;sBACbX,MAAOY,CAAAA,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC3Bb,cAACQ,CAAAA,iBAAAA,CAAKM,IAAI,EAAA;oBAACC,GAAK,EAAA,CAAA;oBAAGC,EAAI,EAAA,EAAA;oBAAgBC,SAAU,EAAA,QAAA;oBAASC,UAAW,EAAA,SAAA;AACnE,oBAAA,QAAA,gBAAAC,eAACC,CAAAA,iBAAAA,EAAAA;wBAAKH,SAAU,EAAA,QAAA;wBAASC,UAAW,EAAA,SAAA;wBAAUR,GAAK,EAAA,CAAA;;0CACjDV,cAACqB,CAAAA,uBAAAA,EAAAA;gCAAWC,OAAQ,EAAA,OAAA;gCAAQC,SAAU,EAAA,YAAA;AACnCX,gCAAAA,QAAAA,EAAAA;;0CAEHZ,cAACqB,CAAAA,uBAAAA,EAAAA;gCAAWC,OAAQ,EAAA,IAAA;gCAAKC,SAAU,EAAA,YAAA;AAChCV,gCAAAA,QAAAA,EAAAA;;;;AANyBD,iBAAAA,EAAAA,KAAAA,CAAAA;;;AAc1C;;;;"}

Some files were not shown because too many files have changed in this diff Show More