@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

package/dist/admin/pages/ListView/components/TableCells/CellContent.mjs

@@ -0,0 +1,128 @@
+import { jsx } from 'react/jsx-runtime';
+import { Typography, Tooltip } from '@strapi/design-system';
+import isEmpty from 'lodash/isEmpty';
+import { CellValue } from './CellValue.mjs';
+import { RepeatableComponent, SingleComponent } from './Components.mjs';
+import { MediaSingle, MediaMultiple } from './Media.mjs';
+import { RelationSingle, RelationMultiple } from './Relations.mjs';
+
+const CellContent = ({ content, mainField, attribute, rowId, name })=>{
+    if (!hasContent(content, mainField, attribute)) {
+        return /*#__PURE__*/ jsx(Typography, {
+            textColor: "neutral800",
+            paddingLeft: attribute.type === ('relation') ? '1.6rem' : 0,
+            paddingRight: attribute.type === ('relation') ? '1.6rem' : 0,
+            children: "-"
+        });
+    }
+    switch(attribute.type){
+        case 'media':
+            if (!attribute.multiple) {
+                return /*#__PURE__*/ jsx(MediaSingle, {
+                    ...content
+                });
+            }
+            return /*#__PURE__*/ jsx(MediaMultiple, {
+                content: content
+            });
+        case 'relation':
+            {
+                if (isSingleRelation(attribute.relation)) {
+                    return /*#__PURE__*/ jsx(RelationSingle, {
+                        mainField: mainField,
+                        content: content
+                    });
+                }
+                return /*#__PURE__*/ jsx(RelationMultiple, {
+                    rowId: rowId,
+                    mainField: mainField,
+                    content: content,
+                    name: name
+                });
+            }
+        case 'component':
+            if (attribute.repeatable) {
+                return /*#__PURE__*/ jsx(RepeatableComponent, {
+                    mainField: mainField,
+                    content: content
+                });
+            }
+            return /*#__PURE__*/ jsx(SingleComponent, {
+                mainField: mainField,
+                content: content
+            });
+        case 'string':
+            return /*#__PURE__*/ jsx(Tooltip, {
+                description: content,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    maxWidth: "30rem",
+                    ellipsis: true,
+                    textColor: "neutral800",
+                    children: /*#__PURE__*/ jsx(CellValue, {
+                        type: attribute.type,
+                        value: content
+                    })
+                })
+            });
+        default:
+            return /*#__PURE__*/ jsx(Typography, {
+                maxWidth: "30rem",
+                ellipsis: true,
+                textColor: "neutral800",
+                children: /*#__PURE__*/ jsx(CellValue, {
+                    type: attribute.type,
+                    value: content
+                })
+            });
+    }
+};
+const hasContent = (content, mainField, attribute)=>{
+    if (attribute.type === 'component') {
+        // Repeatable fields show the ID as fallback, in case the mainField
+        // doesn't have any content
+        if (attribute.repeatable || !mainField) {
+            return content?.length > 0;
+        }
+        const value = content?.[mainField.name];
+        // relations, media ... show the id as fallback
+        if (mainField.name === 'id' && ![
+            undefined,
+            null
+        ].includes(value)) {
+            return true;
+        }
+        return !isEmpty(value);
+    }
+    if (attribute.type === 'relation') {
+        if (isSingleRelation(attribute.relation)) {
+            return !isEmpty(content);
+        }
+        if (Array.isArray(content)) {
+            return content.length > 0;
+        }
+        return content?.count > 0;
+    }
+    /*
+      Biginteger fields need to be treated as strings, as `isNumber`
+      doesn't deal with them.
+  */ if ([
+        'integer',
+        'decimal',
+        'float',
+        'number'
+    ].includes(attribute.type)) {
+        return typeof content === 'number';
+    }
+    if (attribute.type === 'boolean') {
+        return content !== null;
+    }
+    return !isEmpty(content);
+};
+const isSingleRelation = (type)=>[
+        'oneToOne',
+        'manyToOne',
+        'oneToOneMorph'
+    ].includes(type);
+
+export { CellContent };
+//# sourceMappingURL=CellContent.mjs.map

package/dist/admin/pages/ListView/components/TableCells/CellContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellContent.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellContent.tsx"],"sourcesContent":["import { Tooltip, Typography } from '@strapi/design-system';\nimport isEmpty from 'lodash/isEmpty';\n\nimport { CellValue } from './CellValue';\nimport { SingleComponent, RepeatableComponent } from './Components';\nimport { MediaSingle, MediaMultiple } from './Media';\nimport { RelationMultiple, RelationSingle } from './Relations';\n\nimport type { ListFieldLayout } from '../../../../hooks/useDocumentLayout';\nimport type { Schema, Data } from '@strapi/types';\n\ninterface CellContentProps extends Omit<ListFieldLayout, 'cellFormatter'> {\n  content: Schema.Attribute.Value<Schema.Attribute.AnyAttribute>;\n  rowId: Data.ID;\n}\n\nconst CellContent = ({ content, mainField, attribute, rowId, name }: CellContentProps) => {\n  if (!hasContent(content, mainField, attribute)) {\n    return (\n      <Typography\n        textColor=\"neutral800\"\n        paddingLeft={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n        paddingRight={attribute.type === ('relation' || 'component') ? '1.6rem' : 0}\n      >\n        -\n      </Typography>\n    );\n  }\n\n  switch (attribute.type) {\n    case 'media':\n      if (!attribute.multiple) {\n        return <MediaSingle {...content} />;\n      }\n\n      return <MediaMultiple content={content} />;\n\n    case 'relation': {\n      if (isSingleRelation(attribute.relation)) {\n        return <RelationSingle mainField={mainField} content={content} />;\n      }\n\n      return <RelationMultiple rowId={rowId} mainField={mainField} content={content} name={name} />;\n    }\n\n    case 'component':\n      if (attribute.repeatable) {\n        return <RepeatableComponent mainField={mainField} content={content} />;\n      }\n\n      return <SingleComponent mainField={mainField} content={content} />;\n\n    case 'string':\n      return (\n        <Tooltip description={content}>\n          <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n            <CellValue type={attribute.type} value={content} />\n          </Typography>\n        </Tooltip>\n      );\n\n    default:\n      return (\n        <Typography maxWidth=\"30rem\" ellipsis textColor=\"neutral800\">\n          <CellValue type={attribute.type} value={content} />\n        </Typography>\n      );\n  }\n};\n\nconst hasContent = (\n  content: CellContentProps['content'],\n  mainField: CellContentProps['mainField'],\n  attribute: CellContentProps['attribute']\n) => {\n  if (attribute.type === 'component') {\n    // Repeatable fields show the ID as fallback, in case the mainField\n    // doesn't have any content\n    if (attribute.repeatable || !mainField) {\n      return content?.length > 0;\n    }\n\n    const value = content?.[mainField.name];\n\n    // relations, media ... show the id as fallback\n    if (mainField.name === 'id' && ![undefined, null].includes(value)) {\n      return true;\n    }\n\n    return !isEmpty(value);\n  }\n\n  if (attribute.type === 'relation') {\n    if (isSingleRelation(attribute.relation)) {\n      return !isEmpty(content);\n    }\n\n    if (Array.isArray(content)) {\n      return content.length > 0;\n    }\n\n    return content?.count > 0;\n  }\n\n  /*\n      Biginteger fields need to be treated as strings, as `isNumber`\n      doesn't deal with them.\n  */\n  if (['integer', 'decimal', 'float', 'number'].includes(attribute.type)) {\n    return typeof content === 'number';\n  }\n\n  if (attribute.type === 'boolean') {\n    return content !== null;\n  }\n\n  return !isEmpty(content);\n};\n\nconst isSingleRelation = (\n  type: Extract<CellContentProps['attribute'], { type: 'relation' }>['relation']\n) => ['oneToOne', 'manyToOne', 'oneToOneMorph'].includes(type);\n\nexport { CellContent };\nexport type { CellContentProps };\n"],"names":["CellContent","content","mainField","attribute","rowId","name","hasContent","_jsx","Typography","textColor","paddingLeft","type","paddingRight","multiple","MediaSingle","MediaMultiple","isSingleRelation","relation","RelationSingle","RelationMultiple","repeatable","RepeatableComponent","SingleComponent","Tooltip","description","maxWidth","ellipsis","CellValue","value","length","undefined","includes","isEmpty","Array","isArray","count"],"mappings":"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"}

package/dist/admin/pages/ListView/components/TableCells/CellValue.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var parseISO = require('date-fns/parseISO');
+var toString = require('lodash/toString');
+var reactIntl = require('react-intl');
+
+const CellValue = ({ type, value })=>{
+    const { formatDate, formatTime, formatNumber } = reactIntl.useIntl();
+    let formattedValue = value;
+    if (type === 'date') {
+        formattedValue = formatDate(parseISO(value), {
+            dateStyle: 'full'
+        });
+    }
+    if (type === 'datetime') {
+        formattedValue = formatDate(value, {
+            dateStyle: 'full',
+            timeStyle: 'short'
+        });
+    }
+    if (type === 'time') {
+        const [hour, minute, second] = value.split(':');
+        const date = new Date();
+        date.setHours(hour);
+        date.setMinutes(minute);
+        date.setSeconds(second);
+        formattedValue = formatTime(date, {
+            timeStyle: 'short'
+        });
+    }
+    if ([
+        'float',
+        'decimal'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            // Should be kept in sync with the corresponding value
+            // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53
+            maximumFractionDigits: 20
+        });
+    }
+    if ([
+        'integer',
+        'biginteger'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            maximumFractionDigits: 0
+        });
+    }
+    return toString(formattedValue);
+};
+
+exports.CellValue = CellValue;
+//# sourceMappingURL=CellValue.js.map

package/dist/admin/pages/ListView/components/TableCells/CellValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellValue.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellValue.tsx"],"sourcesContent":["import parseISO from 'date-fns/parseISO';\nimport toString from 'lodash/toString';\nimport { useIntl } from 'react-intl';\n\nimport type { Schema } from '@strapi/types';\n\ninterface CellValueProps {\n  type: Schema.Attribute.Kind | 'custom';\n  value: any;\n}\n\nconst CellValue = ({ type, value }: CellValueProps) => {\n  const { formatDate, formatTime, formatNumber } = useIntl();\n  let formattedValue = value;\n\n  if (type === 'date') {\n    formattedValue = formatDate(parseISO(value), { dateStyle: 'full' });\n  }\n\n  if (type === 'datetime') {\n    formattedValue = formatDate(value, { dateStyle: 'full', timeStyle: 'short' });\n  }\n\n  if (type === 'time') {\n    const [hour, minute, second] = value.split(':');\n    const date = new Date();\n    date.setHours(hour);\n    date.setMinutes(minute);\n    date.setSeconds(second);\n\n    formattedValue = formatTime(date, {\n      timeStyle: 'short',\n    });\n  }\n\n  if (['float', 'decimal'].includes(type)) {\n    formattedValue = formatNumber(value, {\n      // Should be kept in sync with the corresponding value\n      // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53\n      maximumFractionDigits: 20,\n    });\n  }\n\n  if (['integer', 'biginteger'].includes(type)) {\n    formattedValue = formatNumber(value, { maximumFractionDigits: 0 });\n  }\n\n  return toString(formattedValue);\n};\n\nexport { CellValue };\nexport type { CellValueProps };\n"],"names":["CellValue","type","value","formatDate","formatTime","formatNumber","useIntl","formattedValue","parseISO","dateStyle","timeStyle","hour","minute","second","split","date","Date","setHours","setMinutes","setSeconds","includes","maximumFractionDigits","toString"],"mappings":";;;;;;AAWA,MAAMA,YAAY,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAkB,GAAA;AAChD,IAAA,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGC,iBAAAA,EAAAA;AACjD,IAAA,IAAIC,cAAiBL,GAAAA,KAAAA;AAErB,IAAA,IAAID,SAAS,MAAQ,EAAA;QACnBM,cAAiBJ,GAAAA,UAAAA,CAAWK,SAASN,KAAQ,CAAA,EAAA;YAAEO,SAAW,EAAA;AAAO,SAAA,CAAA;AACnE;AAEA,IAAA,IAAIR,SAAS,UAAY,EAAA;AACvBM,QAAAA,cAAAA,GAAiBJ,WAAWD,KAAO,EAAA;YAAEO,SAAW,EAAA,MAAA;YAAQC,SAAW,EAAA;AAAQ,SAAA,CAAA;AAC7E;AAEA,IAAA,IAAIT,SAAS,MAAQ,EAAA;AACnB,QAAA,MAAM,CAACU,IAAMC,EAAAA,MAAAA,EAAQC,OAAO,GAAGX,KAAAA,CAAMY,KAAK,CAAC,GAAA,CAAA;AAC3C,QAAA,MAAMC,OAAO,IAAIC,IAAAA,EAAAA;AACjBD,QAAAA,IAAAA,CAAKE,QAAQ,CAACN,IAAAA,CAAAA;AACdI,QAAAA,IAAAA,CAAKG,UAAU,CAACN,MAAAA,CAAAA;AAChBG,QAAAA,IAAAA,CAAKI,UAAU,CAACN,MAAAA,CAAAA;AAEhBN,QAAAA,cAAAA,GAAiBH,WAAWW,IAAM,EAAA;YAChCL,SAAW,EAAA;AACb,SAAA,CAAA;AACF;IAEA,IAAI;AAAC,QAAA,OAAA;AAAS,QAAA;KAAU,CAACU,QAAQ,CAACnB,IAAO,CAAA,EAAA;AACvCM,QAAAA,cAAAA,GAAiBF,aAAaH,KAAO,EAAA;;;YAGnCmB,qBAAuB,EAAA;AACzB,SAAA,CAAA;AACF;IAEA,IAAI;AAAC,QAAA,SAAA;AAAW,QAAA;KAAa,CAACD,QAAQ,CAACnB,IAAO,CAAA,EAAA;AAC5CM,QAAAA,cAAAA,GAAiBF,aAAaH,KAAO,EAAA;YAAEmB,qBAAuB,EAAA;AAAE,SAAA,CAAA;AAClE;AAEA,IAAA,OAAOC,QAASf,CAAAA,cAAAA,CAAAA;AAClB;;;;"}

package/dist/admin/pages/ListView/components/TableCells/CellValue.mjs

@@ -0,0 +1,51 @@
+import parseISO from 'date-fns/parseISO';
+import toString from 'lodash/toString';
+import { useIntl } from 'react-intl';
+
+const CellValue = ({ type, value })=>{
+    const { formatDate, formatTime, formatNumber } = useIntl();
+    let formattedValue = value;
+    if (type === 'date') {
+        formattedValue = formatDate(parseISO(value), {
+            dateStyle: 'full'
+        });
+    }
+    if (type === 'datetime') {
+        formattedValue = formatDate(value, {
+            dateStyle: 'full',
+            timeStyle: 'short'
+        });
+    }
+    if (type === 'time') {
+        const [hour, minute, second] = value.split(':');
+        const date = new Date();
+        date.setHours(hour);
+        date.setMinutes(minute);
+        date.setSeconds(second);
+        formattedValue = formatTime(date, {
+            timeStyle: 'short'
+        });
+    }
+    if ([
+        'float',
+        'decimal'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            // Should be kept in sync with the corresponding value
+            // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53
+            maximumFractionDigits: 20
+        });
+    }
+    if ([
+        'integer',
+        'biginteger'
+    ].includes(type)) {
+        formattedValue = formatNumber(value, {
+            maximumFractionDigits: 0
+        });
+    }
+    return toString(formattedValue);
+};
+
+export { CellValue };
+//# sourceMappingURL=CellValue.mjs.map

package/dist/admin/pages/ListView/components/TableCells/CellValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellValue.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/CellValue.tsx"],"sourcesContent":["import parseISO from 'date-fns/parseISO';\nimport toString from 'lodash/toString';\nimport { useIntl } from 'react-intl';\n\nimport type { Schema } from '@strapi/types';\n\ninterface CellValueProps {\n  type: Schema.Attribute.Kind | 'custom';\n  value: any;\n}\n\nconst CellValue = ({ type, value }: CellValueProps) => {\n  const { formatDate, formatTime, formatNumber } = useIntl();\n  let formattedValue = value;\n\n  if (type === 'date') {\n    formattedValue = formatDate(parseISO(value), { dateStyle: 'full' });\n  }\n\n  if (type === 'datetime') {\n    formattedValue = formatDate(value, { dateStyle: 'full', timeStyle: 'short' });\n  }\n\n  if (type === 'time') {\n    const [hour, minute, second] = value.split(':');\n    const date = new Date();\n    date.setHours(hour);\n    date.setMinutes(minute);\n    date.setSeconds(second);\n\n    formattedValue = formatTime(date, {\n      timeStyle: 'short',\n    });\n  }\n\n  if (['float', 'decimal'].includes(type)) {\n    formattedValue = formatNumber(value, {\n      // Should be kept in sync with the corresponding value\n      // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53\n      maximumFractionDigits: 20,\n    });\n  }\n\n  if (['integer', 'biginteger'].includes(type)) {\n    formattedValue = formatNumber(value, { maximumFractionDigits: 0 });\n  }\n\n  return toString(formattedValue);\n};\n\nexport { CellValue };\nexport type { CellValueProps };\n"],"names":["CellValue","type","value","formatDate","formatTime","formatNumber","useIntl","formattedValue","parseISO","dateStyle","timeStyle","hour","minute","second","split","date","Date","setHours","setMinutes","setSeconds","includes","maximumFractionDigits","toString"],"mappings":";;;;AAWA,MAAMA,YAAY,CAAC,EAAEC,IAAI,EAAEC,KAAK,EAAkB,GAAA;AAChD,IAAA,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGC,OAAAA,EAAAA;AACjD,IAAA,IAAIC,cAAiBL,GAAAA,KAAAA;AAErB,IAAA,IAAID,SAAS,MAAQ,EAAA;QACnBM,cAAiBJ,GAAAA,UAAAA,CAAWK,SAASN,KAAQ,CAAA,EAAA;YAAEO,SAAW,EAAA;AAAO,SAAA,CAAA;AACnE;AAEA,IAAA,IAAIR,SAAS,UAAY,EAAA;AACvBM,QAAAA,cAAAA,GAAiBJ,WAAWD,KAAO,EAAA;YAAEO,SAAW,EAAA,MAAA;YAAQC,SAAW,EAAA;AAAQ,SAAA,CAAA;AAC7E;AAEA,IAAA,IAAIT,SAAS,MAAQ,EAAA;AACnB,QAAA,MAAM,CAACU,IAAMC,EAAAA,MAAAA,EAAQC,OAAO,GAAGX,KAAAA,CAAMY,KAAK,CAAC,GAAA,CAAA;AAC3C,QAAA,MAAMC,OAAO,IAAIC,IAAAA,EAAAA;AACjBD,QAAAA,IAAAA,CAAKE,QAAQ,CAACN,IAAAA,CAAAA;AACdI,QAAAA,IAAAA,CAAKG,UAAU,CAACN,MAAAA,CAAAA;AAChBG,QAAAA,IAAAA,CAAKI,UAAU,CAACN,MAAAA,CAAAA;AAEhBN,QAAAA,cAAAA,GAAiBH,WAAWW,IAAM,EAAA;YAChCL,SAAW,EAAA;AACb,SAAA,CAAA;AACF;IAEA,IAAI;AAAC,QAAA,OAAA;AAAS,QAAA;KAAU,CAACU,QAAQ,CAACnB,IAAO,CAAA,EAAA;AACvCM,QAAAA,cAAAA,GAAiBF,aAAaH,KAAO,EAAA;;;YAGnCmB,qBAAuB,EAAA;AACzB,SAAA,CAAA;AACF;IAEA,IAAI;AAAC,QAAA,SAAA;AAAW,QAAA;KAAa,CAACD,QAAQ,CAACnB,IAAO,CAAA,EAAA;AAC5CM,QAAAA,cAAAA,GAAiBF,aAAaH,KAAO,EAAA;YAAEmB,qBAAuB,EAAA;AAAE,SAAA,CAAA;AAClE;AAEA,IAAA,OAAOC,QAASf,CAAAA,cAAAA,CAAAA;AAClB;;;;"}

package/dist/admin/pages/ListView/components/TableCells/Components.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var CellValue = require('./CellValue.js');
+
+const SingleComponent = ({ content, mainField })=>{
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+        label: content[mainField.name],
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+            maxWidth: "25rem",
+            textColor: "neutral800",
+            ellipsis: true,
+            children: /*#__PURE__*/ jsxRuntime.jsx(CellValue.CellValue, {
+                type: mainField.type,
+                value: content[mainField.name]
+            })
+        })
+    });
+};
+const RepeatableComponent = ({ content, mainField })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Menu.Trigger, {
+                onClick: (e)=>e.stopPropagation(),
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(designSystem.Badge, {
+                        children: content.length
+                    }),
+                    formatMessage({
+                        id: 'content-manager.containers.list.items',
+                        defaultMessage: '{number, plural, =0 {items} one {item} other {items}}'
+                    }, {
+                        number: content.length
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Content, {
+                children: content.map((item)=>/*#__PURE__*/ jsxRuntime.jsx(designSystem.Menu.Item, {
+                        disabled: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                            maxWidth: "50rem",
+                            ellipsis: true,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(CellValue.CellValue, {
+                                type: mainField.type,
+                                value: item[mainField.name]
+                            })
+                        })
+                    }, item.id))
+            })
+        ]
+    });
+};
+
+exports.RepeatableComponent = RepeatableComponent;
+exports.SingleComponent = SingleComponent;
+//# sourceMappingURL=Components.js.map

package/dist/admin/pages/ListView/components/TableCells/Components.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Components.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Components.tsx"],"sourcesContent":["import { Badge, Tooltip, Typography, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { CellContentProps } from './CellContent';\nimport { CellValue } from './CellValue';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * SingleComponent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SingleComponentProps extends Pick<CellContentProps, 'mainField'> {\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, false>>;\n}\n\nconst SingleComponent = ({ content, mainField }: SingleComponentProps) => {\n  if (!mainField) {\n    return null;\n  }\n\n  return (\n    <Tooltip label={content[mainField.name]}>\n      <Typography maxWidth=\"25rem\" textColor=\"neutral800\" ellipsis>\n        <CellValue type={mainField.type} value={content[mainField.name]} />\n      </Typography>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RepeatableComponent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RepeatableComponentProps extends Pick<CellContentProps, 'mainField'> {\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, true>>;\n}\n\nconst RepeatableComponent = ({ content, mainField }: RepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n\n  if (!mainField) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Badge>{content.length}</Badge>\n        {formatMessage(\n          {\n            id: 'content-manager.containers.list.items',\n            defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',\n          },\n          { number: content.length }\n        )}\n      </Menu.Trigger>\n      <Menu.Content>\n        {content.map((item) => (\n          <Menu.Item key={item.id} disabled>\n            <Typography maxWidth=\"50rem\" ellipsis>\n              <CellValue type={mainField.type} value={item[mainField.name]} />\n            </Typography>\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { SingleComponent, RepeatableComponent };\nexport type { SingleComponentProps, RepeatableComponentProps };\n"],"names":["SingleComponent","content","mainField","_jsx","Tooltip","label","name","Typography","maxWidth","textColor","ellipsis","CellValue","type","value","RepeatableComponent","formatMessage","useIntl","_jsxs","Menu","Root","Trigger","onClick","e","stopPropagation","Badge","length","id","defaultMessage","number","Content","map","item","Item","disabled"],"mappings":";;;;;;;AAiBA,MAAMA,kBAAkB,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAwB,GAAA;AACnE,IAAA,IAAI,CAACA,SAAW,EAAA;QACd,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,cAACC,CAAAA,oBAAAA,EAAAA;AAAQC,QAAAA,KAAAA,EAAOJ,OAAO,CAACC,SAAUI,CAAAA,IAAI,CAAC;AACrC,QAAA,QAAA,gBAAAH,cAACI,CAAAA,uBAAAA,EAAAA;YAAWC,QAAS,EAAA,OAAA;YAAQC,SAAU,EAAA,YAAA;YAAaC,QAAQ,EAAA,IAAA;AAC1D,YAAA,QAAA,gBAAAP,cAACQ,CAAAA,mBAAAA,EAAAA;AAAUC,gBAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gBAAAA,KAAAA,EAAOZ,OAAO,CAACC,SAAUI,CAAAA,IAAI;;;;AAItE;AAUA,MAAMQ,sBAAsB,CAAC,EAAEb,OAAO,EAAEC,SAAS,EAA4B,GAAA;IAC3E,MAAM,EAAEa,aAAa,EAAE,GAAGC,iBAAAA,EAAAA;AAE1B,IAAA,IAAI,CAACd,SAAW,EAAA;QACd,OAAO,IAAA;AACT;IAEA,qBACEe,eAAA,CAACC,kBAAKC,IAAI,EAAA;;AACR,0BAAAF,eAAA,CAACC,kBAAKE,OAAO,EAAA;gBAACC,OAAS,EAAA,CAACC,CAAMA,GAAAA,CAAAA,CAAEC,eAAe,EAAA;;kCAC7CpB,cAACqB,CAAAA,kBAAAA,EAAAA;AAAOvB,wBAAAA,QAAAA,EAAAA,OAAAA,CAAQwB;;oBACfV,aACC,CAAA;wBACEW,EAAI,EAAA,uCAAA;wBACJC,cAAgB,EAAA;qBAElB,EAAA;AAAEC,wBAAAA,MAAAA,EAAQ3B,QAAQwB;AAAO,qBAAA;;;AAG7B,0BAAAtB,cAAA,CAACe,kBAAKW,OAAO,EAAA;AACV5B,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQ6B,GAAG,CAAC,CAACC,IACZ,iBAAA5B,cAAA,CAACe,kBAAKc,IAAI,EAAA;wBAAeC,QAAQ,EAAA,IAAA;AAC/B,wBAAA,QAAA,gBAAA9B,cAACI,CAAAA,uBAAAA,EAAAA;4BAAWC,QAAS,EAAA,OAAA;4BAAQE,QAAQ,EAAA,IAAA;AACnC,4BAAA,QAAA,gBAAAP,cAACQ,CAAAA,mBAAAA,EAAAA;AAAUC,gCAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gCAAAA,KAAAA,EAAOkB,IAAI,CAAC7B,SAAUI,CAAAA,IAAI;;;AAF/CyB,qBAAAA,EAAAA,IAAAA,CAAKL,EAAE,CAAA;;;;AASjC;;;;;"}

package/dist/admin/pages/ListView/components/TableCells/Components.mjs

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip, Typography, Menu, Badge } from '@strapi/design-system';
+import { useIntl } from 'react-intl';
+import { CellValue } from './CellValue.mjs';
+
+const SingleComponent = ({ content, mainField })=>{
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsx(Tooltip, {
+        label: content[mainField.name],
+        children: /*#__PURE__*/ jsx(Typography, {
+            maxWidth: "25rem",
+            textColor: "neutral800",
+            ellipsis: true,
+            children: /*#__PURE__*/ jsx(CellValue, {
+                type: mainField.type,
+                value: content[mainField.name]
+            })
+        })
+    });
+};
+const RepeatableComponent = ({ content, mainField })=>{
+    const { formatMessage } = useIntl();
+    if (!mainField) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxs(Menu.Root, {
+        children: [
+            /*#__PURE__*/ jsxs(Menu.Trigger, {
+                onClick: (e)=>e.stopPropagation(),
+                children: [
+                    /*#__PURE__*/ jsx(Badge, {
+                        children: content.length
+                    }),
+                    formatMessage({
+                        id: 'content-manager.containers.list.items',
+                        defaultMessage: '{number, plural, =0 {items} one {item} other {items}}'
+                    }, {
+                        number: content.length
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Menu.Content, {
+                children: content.map((item)=>/*#__PURE__*/ jsx(Menu.Item, {
+                        disabled: true,
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            maxWidth: "50rem",
+                            ellipsis: true,
+                            children: /*#__PURE__*/ jsx(CellValue, {
+                                type: mainField.type,
+                                value: item[mainField.name]
+                            })
+                        })
+                    }, item.id))
+            })
+        ]
+    });
+};
+
+export { RepeatableComponent, SingleComponent };
+//# sourceMappingURL=Components.mjs.map

package/dist/admin/pages/ListView/components/TableCells/Components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Components.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Components.tsx"],"sourcesContent":["import { Badge, Tooltip, Typography, Menu } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { CellContentProps } from './CellContent';\nimport { CellValue } from './CellValue';\n\nimport type { Schema } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * SingleComponent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SingleComponentProps extends Pick<CellContentProps, 'mainField'> {\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, false>>;\n}\n\nconst SingleComponent = ({ content, mainField }: SingleComponentProps) => {\n  if (!mainField) {\n    return null;\n  }\n\n  return (\n    <Tooltip label={content[mainField.name]}>\n      <Typography maxWidth=\"25rem\" textColor=\"neutral800\" ellipsis>\n        <CellValue type={mainField.type} value={content[mainField.name]} />\n      </Typography>\n    </Tooltip>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * RepeatableComponent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface RepeatableComponentProps extends Pick<CellContentProps, 'mainField'> {\n  content: Schema.Attribute.Value<Schema.Attribute.Component<`${string}.${string}`, true>>;\n}\n\nconst RepeatableComponent = ({ content, mainField }: RepeatableComponentProps) => {\n  const { formatMessage } = useIntl();\n\n  if (!mainField) {\n    return null;\n  }\n\n  return (\n    <Menu.Root>\n      <Menu.Trigger onClick={(e) => e.stopPropagation()}>\n        <Badge>{content.length}</Badge>\n        {formatMessage(\n          {\n            id: 'content-manager.containers.list.items',\n            defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',\n          },\n          { number: content.length }\n        )}\n      </Menu.Trigger>\n      <Menu.Content>\n        {content.map((item) => (\n          <Menu.Item key={item.id} disabled>\n            <Typography maxWidth=\"50rem\" ellipsis>\n              <CellValue type={mainField.type} value={item[mainField.name]} />\n            </Typography>\n          </Menu.Item>\n        ))}\n      </Menu.Content>\n    </Menu.Root>\n  );\n};\n\nexport { SingleComponent, RepeatableComponent };\nexport type { SingleComponentProps, RepeatableComponentProps };\n"],"names":["SingleComponent","content","mainField","_jsx","Tooltip","label","name","Typography","maxWidth","textColor","ellipsis","CellValue","type","value","RepeatableComponent","formatMessage","useIntl","_jsxs","Menu","Root","Trigger","onClick","e","stopPropagation","Badge","length","id","defaultMessage","number","Content","map","item","Item","disabled"],"mappings":";;;;;AAiBA,MAAMA,kBAAkB,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAwB,GAAA;AACnE,IAAA,IAAI,CAACA,SAAW,EAAA;QACd,OAAO,IAAA;AACT;AAEA,IAAA,qBACEC,GAACC,CAAAA,OAAAA,EAAAA;AAAQC,QAAAA,KAAAA,EAAOJ,OAAO,CAACC,SAAUI,CAAAA,IAAI,CAAC;AACrC,QAAA,QAAA,gBAAAH,GAACI,CAAAA,UAAAA,EAAAA;YAAWC,QAAS,EAAA,OAAA;YAAQC,SAAU,EAAA,YAAA;YAAaC,QAAQ,EAAA,IAAA;AAC1D,YAAA,QAAA,gBAAAP,GAACQ,CAAAA,SAAAA,EAAAA;AAAUC,gBAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gBAAAA,KAAAA,EAAOZ,OAAO,CAACC,SAAUI,CAAAA,IAAI;;;;AAItE;AAUA,MAAMQ,sBAAsB,CAAC,EAAEb,OAAO,EAAEC,SAAS,EAA4B,GAAA;IAC3E,MAAM,EAAEa,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAE1B,IAAA,IAAI,CAACd,SAAW,EAAA;QACd,OAAO,IAAA;AACT;IAEA,qBACEe,IAAA,CAACC,KAAKC,IAAI,EAAA;;AACR,0BAAAF,IAAA,CAACC,KAAKE,OAAO,EAAA;gBAACC,OAAS,EAAA,CAACC,CAAMA,GAAAA,CAAAA,CAAEC,eAAe,EAAA;;kCAC7CpB,GAACqB,CAAAA,KAAAA,EAAAA;AAAOvB,wBAAAA,QAAAA,EAAAA,OAAAA,CAAQwB;;oBACfV,aACC,CAAA;wBACEW,EAAI,EAAA,uCAAA;wBACJC,cAAgB,EAAA;qBAElB,EAAA;AAAEC,wBAAAA,MAAAA,EAAQ3B,QAAQwB;AAAO,qBAAA;;;AAG7B,0BAAAtB,GAAA,CAACe,KAAKW,OAAO,EAAA;AACV5B,gBAAAA,QAAAA,EAAAA,OAAAA,CAAQ6B,GAAG,CAAC,CAACC,IACZ,iBAAA5B,GAAA,CAACe,KAAKc,IAAI,EAAA;wBAAeC,QAAQ,EAAA,IAAA;AAC/B,wBAAA,QAAA,gBAAA9B,GAACI,CAAAA,UAAAA,EAAAA;4BAAWC,QAAS,EAAA,OAAA;4BAAQE,QAAQ,EAAA,IAAA;AACnC,4BAAA,QAAA,gBAAAP,GAACQ,CAAAA,SAAAA,EAAAA;AAAUC,gCAAAA,IAAAA,EAAMV,UAAUU,IAAI;AAAEC,gCAAAA,KAAAA,EAAOkB,IAAI,CAAC7B,SAAUI,CAAAA,IAAI;;;AAF/CyB,qBAAAA,EAAAA,IAAAA,CAAKL,EAAE,CAAA;;;;AASjC;;;;"}

package/dist/admin/pages/ListView/components/TableCells/Media.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var designSystem = require('@strapi/design-system');
+var styledComponents = require('styled-components');
+var urls = require('../../../../utils/urls.js');
+
+const getFileExtension = (ext)=>ext && ext[0] === '.' ? ext.substring(1) : ext;
+const MediaSingle = ({ url, mime, alternativeText, name, ext, formats })=>{
+    const fileURL = urls.prefixFileUrlWithBackendUrl(url);
+    if (mime.includes('image')) {
+        const thumbnail = formats?.thumbnail?.url;
+        const mediaURL = urls.prefixFileUrlWithBackendUrl(thumbnail) || fileURL;
+        return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Avatar.Item, {
+            src: mediaURL,
+            alt: alternativeText || name,
+            fallback: alternativeText || name,
+            preview: true
+        });
+    }
+    const fileExtension = getFileExtension(ext);
+    const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+        description: fileName,
+        children: /*#__PURE__*/ jsxRuntime.jsx(FileWrapper, {
+            children: fileExtension
+        })
+    });
+};
+const FileWrapper = ({ children })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+        tag: "span",
+        position: "relative",
+        borderRadius: "50%",
+        width: "26px",
+        height: "26px",
+        borderColor: "neutral200",
+        background: "neutral150",
+        paddingLeft: "1px",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(FileTypography, {
+            variant: "sigma",
+            textColor: "neutral600",
+            children: children
+        })
+    });
+};
+const FileTypography = styledComponents.styled(designSystem.Typography)`
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+`;
+const MediaMultiple = ({ content })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Avatar.Group, {
+        children: content.map((file, index)=>{
+            const key = `${file.id}${index}`;
+            if (index === 3) {
+                const remainingFiles = `+${content.length - 3}`;
+                return /*#__PURE__*/ jsxRuntime.jsx(FileWrapper, {
+                    children: remainingFiles
+                }, key);
+            }
+            if (index > 3) {
+                return null;
+            }
+            return /*#__PURE__*/ jsxRuntime.jsx(MediaSingle, {
+                ...file
+            }, key);
+        })
+    });
+};
+
+exports.MediaMultiple = MediaMultiple;
+exports.MediaSingle = MediaSingle;
+//# sourceMappingURL=Media.js.map

package/dist/admin/pages/ListView/components/TableCells/Media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.js","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Media.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar, Flex, Tooltip, Typography, TypographyComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/urls';\n\nimport type { Data } from '@strapi/types';\n\ninterface MediaFile {\n  id?: Data.ID;\n  alternativeText?: string;\n  ext: string;\n  formats: {\n    thumbnail?: {\n      url?: string;\n    };\n  };\n  mime: string;\n  name: string;\n  url: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Media\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaSingleProps extends MediaFile {}\n\nconst getFileExtension = (ext: string) => (ext && ext[0] === '.' ? ext.substring(1) : ext);\n\nconst MediaSingle = ({ url, mime, alternativeText, name, ext, formats }: MediaSingleProps) => {\n  const fileURL = prefixFileUrlWithBackendUrl(url)!;\n\n  if (mime.includes('image')) {\n    const thumbnail = formats?.thumbnail?.url;\n    const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;\n\n    return (\n      <Avatar.Item\n        src={mediaURL}\n        alt={alternativeText || name}\n        fallback={alternativeText || name}\n        preview\n      />\n    );\n  }\n\n  const fileExtension = getFileExtension(ext);\n  const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;\n\n  return (\n    <Tooltip description={fileName}>\n      <FileWrapper>{fileExtension}</FileWrapper>\n    </Tooltip>\n  );\n};\n\nconst FileWrapper = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <Flex\n      tag=\"span\"\n      position=\"relative\"\n      borderRadius=\"50%\"\n      width=\"26px\"\n      height=\"26px\"\n      borderColor=\"neutral200\"\n      background=\"neutral150\"\n      paddingLeft=\"1px\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n    >\n      <FileTypography variant=\"sigma\" textColor=\"neutral600\">\n        {children}\n      </FileTypography>\n    </Flex>\n  );\n};\n\nconst FileTypography = styled<TypographyComponent>(Typography)`\n  font-size: 0.9rem;\n  line-height: 0.9rem;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * MediaMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaMultipleProps {\n  content: MediaFile[];\n}\n\nconst MediaMultiple = ({ content }: MediaMultipleProps) => {\n  return (\n    <Avatar.Group>\n      {content.map((file, index) => {\n        const key = `${file.id}${index}`;\n\n        if (index === 3) {\n          const remainingFiles = `+${content.length - 3}`;\n\n          return <FileWrapper key={key}>{remainingFiles}</FileWrapper>;\n        }\n\n        if (index > 3) {\n          return null;\n        }\n\n        return <MediaSingle key={key} {...file} />;\n      })}\n    </Avatar.Group>\n  );\n};\n\nexport { MediaMultiple, MediaSingle };\nexport type { MediaMultipleProps, MediaSingleProps };\n"],"names":["getFileExtension","ext","substring","MediaSingle","url","mime","alternativeText","name","formats","fileURL","prefixFileUrlWithBackendUrl","includes","thumbnail","mediaURL","_jsx","Avatar","Item","src","alt","fallback","preview","fileExtension","fileName","length","Tooltip","description","FileWrapper","children","Flex","tag","position","borderRadius","width","height","borderColor","background","paddingLeft","justifyContent","alignItems","FileTypography","variant","textColor","styled","Typography","MediaMultiple","content","Group","map","file","index","key","id","remainingFiles"],"mappings":"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"}

package/dist/admin/pages/ListView/components/TableCells/Media.mjs

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Typography, Avatar, Tooltip, Flex } from '@strapi/design-system';
+import { styled } from 'styled-components';
+import { prefixFileUrlWithBackendUrl } from '../../../../utils/urls.mjs';
+
+const getFileExtension = (ext)=>ext && ext[0] === '.' ? ext.substring(1) : ext;
+const MediaSingle = ({ url, mime, alternativeText, name, ext, formats })=>{
+    const fileURL = prefixFileUrlWithBackendUrl(url);
+    if (mime.includes('image')) {
+        const thumbnail = formats?.thumbnail?.url;
+        const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;
+        return /*#__PURE__*/ jsx(Avatar.Item, {
+            src: mediaURL,
+            alt: alternativeText || name,
+            fallback: alternativeText || name,
+            preview: true
+        });
+    }
+    const fileExtension = getFileExtension(ext);
+    const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;
+    return /*#__PURE__*/ jsx(Tooltip, {
+        description: fileName,
+        children: /*#__PURE__*/ jsx(FileWrapper, {
+            children: fileExtension
+        })
+    });
+};
+const FileWrapper = ({ children })=>{
+    return /*#__PURE__*/ jsx(Flex, {
+        tag: "span",
+        position: "relative",
+        borderRadius: "50%",
+        width: "26px",
+        height: "26px",
+        borderColor: "neutral200",
+        background: "neutral150",
+        paddingLeft: "1px",
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsx(FileTypography, {
+            variant: "sigma",
+            textColor: "neutral600",
+            children: children
+        })
+    });
+};
+const FileTypography = styled(Typography)`
+  font-size: 0.9rem;
+  line-height: 0.9rem;
+`;
+const MediaMultiple = ({ content })=>{
+    return /*#__PURE__*/ jsx(Avatar.Group, {
+        children: content.map((file, index)=>{
+            const key = `${file.id}${index}`;
+            if (index === 3) {
+                const remainingFiles = `+${content.length - 3}`;
+                return /*#__PURE__*/ jsx(FileWrapper, {
+                    children: remainingFiles
+                }, key);
+            }
+            if (index > 3) {
+                return null;
+            }
+            return /*#__PURE__*/ jsx(MediaSingle, {
+                ...file
+            }, key);
+        })
+    });
+};
+
+export { MediaMultiple, MediaSingle };
+//# sourceMappingURL=Media.mjs.map

package/dist/admin/pages/ListView/components/TableCells/Media.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.mjs","sources":["../../../../../../admin/src/pages/ListView/components/TableCells/Media.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Avatar, Flex, Tooltip, Typography, TypographyComponent } from '@strapi/design-system';\nimport { styled } from 'styled-components';\n\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/urls';\n\nimport type { Data } from '@strapi/types';\n\ninterface MediaFile {\n  id?: Data.ID;\n  alternativeText?: string;\n  ext: string;\n  formats: {\n    thumbnail?: {\n      url?: string;\n    };\n  };\n  mime: string;\n  name: string;\n  url: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Media\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaSingleProps extends MediaFile {}\n\nconst getFileExtension = (ext: string) => (ext && ext[0] === '.' ? ext.substring(1) : ext);\n\nconst MediaSingle = ({ url, mime, alternativeText, name, ext, formats }: MediaSingleProps) => {\n  const fileURL = prefixFileUrlWithBackendUrl(url)!;\n\n  if (mime.includes('image')) {\n    const thumbnail = formats?.thumbnail?.url;\n    const mediaURL = prefixFileUrlWithBackendUrl(thumbnail) || fileURL;\n\n    return (\n      <Avatar.Item\n        src={mediaURL}\n        alt={alternativeText || name}\n        fallback={alternativeText || name}\n        preview\n      />\n    );\n  }\n\n  const fileExtension = getFileExtension(ext);\n  const fileName = name.length > 100 ? `${name.substring(0, 100)}...` : name;\n\n  return (\n    <Tooltip description={fileName}>\n      <FileWrapper>{fileExtension}</FileWrapper>\n    </Tooltip>\n  );\n};\n\nconst FileWrapper = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <Flex\n      tag=\"span\"\n      position=\"relative\"\n      borderRadius=\"50%\"\n      width=\"26px\"\n      height=\"26px\"\n      borderColor=\"neutral200\"\n      background=\"neutral150\"\n      paddingLeft=\"1px\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n    >\n      <FileTypography variant=\"sigma\" textColor=\"neutral600\">\n        {children}\n      </FileTypography>\n    </Flex>\n  );\n};\n\nconst FileTypography = styled<TypographyComponent>(Typography)`\n  font-size: 0.9rem;\n  line-height: 0.9rem;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * MediaMultiple\n * -----------------------------------------------------------------------------------------------*/\n\ninterface MediaMultipleProps {\n  content: MediaFile[];\n}\n\nconst MediaMultiple = ({ content }: MediaMultipleProps) => {\n  return (\n    <Avatar.Group>\n      {content.map((file, index) => {\n        const key = `${file.id}${index}`;\n\n        if (index === 3) {\n          const remainingFiles = `+${content.length - 3}`;\n\n          return <FileWrapper key={key}>{remainingFiles}</FileWrapper>;\n        }\n\n        if (index > 3) {\n          return null;\n        }\n\n        return <MediaSingle key={key} {...file} />;\n      })}\n    </Avatar.Group>\n  );\n};\n\nexport { MediaMultiple, MediaSingle };\nexport type { MediaMultipleProps, MediaSingleProps };\n"],"names":["getFileExtension","ext","substring","MediaSingle","url","mime","alternativeText","name","formats","fileURL","prefixFileUrlWithBackendUrl","includes","thumbnail","mediaURL","_jsx","Avatar","Item","src","alt","fallback","preview","fileExtension","fileName","length","Tooltip","description","FileWrapper","children","Flex","tag","position","borderRadius","width","height","borderColor","background","paddingLeft","justifyContent","alignItems","FileTypography","variant","textColor","styled","Typography","MediaMultiple","content","Group","map","file","index","key","id","remainingFiles"],"mappings":";;;;;;AA6BA,MAAMA,gBAAmB,GAAA,CAACC,GAAiBA,GAAAA,GAAAA,IAAOA,GAAG,CAAC,CAAE,CAAA,KAAK,GAAMA,GAAAA,GAAAA,CAAIC,SAAS,CAAC,CAAKD,CAAAA,GAAAA,GAAAA;AAEtF,MAAME,WAAc,GAAA,CAAC,EAAEC,GAAG,EAAEC,IAAI,EAAEC,eAAe,EAAEC,IAAI,EAAEN,GAAG,EAAEO,OAAO,EAAoB,GAAA;AACvF,IAAA,MAAMC,UAAUC,2BAA4BN,CAAAA,GAAAA,CAAAA;IAE5C,IAAIC,IAAAA,CAAKM,QAAQ,CAAC,OAAU,CAAA,EAAA;QAC1B,MAAMC,SAAAA,GAAYJ,SAASI,SAAWR,EAAAA,GAAAA;QACtC,MAAMS,QAAAA,GAAWH,4BAA4BE,SAAcH,CAAAA,IAAAA,OAAAA;QAE3D,qBACEK,GAAA,CAACC,OAAOC,IAAI,EAAA;YACVC,GAAKJ,EAAAA,QAAAA;AACLK,YAAAA,GAAAA,EAAKZ,eAAmBC,IAAAA,IAAAA;AACxBY,YAAAA,QAAAA,EAAUb,eAAmBC,IAAAA,IAAAA;YAC7Ba,OAAO,EAAA;;AAGb;AAEA,IAAA,MAAMC,gBAAgBrB,gBAAiBC,CAAAA,GAAAA,CAAAA;AACvC,IAAA,MAAMqB,QAAWf,GAAAA,IAAAA,CAAKgB,MAAM,GAAG,MAAM,CAAC,EAAEhB,IAAKL,CAAAA,SAAS,CAAC,CAAA,EAAG,GAAK,CAAA,CAAA,GAAG,CAAC,GAAGK,IAAAA;AAEtE,IAAA,qBACEO,GAACU,CAAAA,OAAAA,EAAAA;QAAQC,WAAaH,EAAAA,QAAAA;AACpB,QAAA,QAAA,gBAAAR,GAACY,CAAAA,WAAAA,EAAAA;AAAaL,YAAAA,QAAAA,EAAAA;;;AAGpB;AAEA,MAAMK,WAAc,GAAA,CAAC,EAAEC,QAAQ,EAAiC,GAAA;AAC9D,IAAA,qBACEb,GAACc,CAAAA,IAAAA,EAAAA;QACCC,GAAI,EAAA,MAAA;QACJC,QAAS,EAAA,UAAA;QACTC,YAAa,EAAA,KAAA;QACbC,KAAM,EAAA,MAAA;QACNC,MAAO,EAAA,MAAA;QACPC,WAAY,EAAA,YAAA;QACZC,UAAW,EAAA,YAAA;QACXC,WAAY,EAAA,KAAA;QACZC,cAAe,EAAA,QAAA;QACfC,UAAW,EAAA,QAAA;AAEX,QAAA,QAAA,gBAAAxB,GAACyB,CAAAA,cAAAA,EAAAA;YAAeC,OAAQ,EAAA,OAAA;YAAQC,SAAU,EAAA,YAAA;AACvCd,YAAAA,QAAAA,EAAAA;;;AAIT,CAAA;AAEA,MAAMY,cAAAA,GAAiBG,MAA4BC,CAAAA,UAAAA,CAAW;;;AAG9D,CAAC;AAUD,MAAMC,aAAgB,GAAA,CAAC,EAAEC,OAAO,EAAsB,GAAA;IACpD,qBACE/B,GAAA,CAACC,OAAO+B,KAAK,EAAA;kBACVD,OAAQE,CAAAA,GAAG,CAAC,CAACC,IAAMC,EAAAA,KAAAA,GAAAA;YAClB,MAAMC,GAAAA,GAAM,CAAC,EAAEF,IAAAA,CAAKG,EAAE,CAAC,EAAEF,MAAM,CAAC;AAEhC,YAAA,IAAIA,UAAU,CAAG,EAAA;gBACf,MAAMG,cAAAA,GAAiB,CAAC,CAAC,EAAEP,QAAQtB,MAAM,GAAG,EAAE,CAAC;AAE/C,gBAAA,qBAAOT,GAACY,CAAAA,WAAAA,EAAAA;AAAuB0B,oBAAAA,QAAAA,EAAAA;AAANF,iBAAAA,EAAAA,GAAAA,CAAAA;AAC3B;AAEA,YAAA,IAAID,QAAQ,CAAG,EAAA;gBACb,OAAO,IAAA;AACT;AAEA,YAAA,qBAAOnC,GAACX,CAAAA,WAAAA,EAAAA;AAAuB,gBAAA,GAAG6C;AAATE,aAAAA,EAAAA,GAAAA,CAAAA;AAC3B,SAAA;;AAGN;;;;"}