@contentful/field-editor-reference 5.9.0 → 5.11.0

package/dist/cjs/assets/WrappedAssetCard/FetchingWrappedAssetCard.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FetchingWrappedAssetCard", {
+    enumerable: true,
+    get: function() {
+        return FetchingWrappedAssetCard;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _EntityStore = require("../../common/EntityStore");
+const _components = require("../../components");
+const _WrappedAssetCard = require("./WrappedAssetCard");
+const _WrappedAssetLink = require("./WrappedAssetLink");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function FetchingWrappedAssetCard(props) {
+    const { data: asset , status  } = (0, _EntityStore.useEntity)('Asset', props.assetId);
+    const { getEntityScheduledActions  } = (0, _EntityStore.useEntityLoader)();
+    const loadEntityScheduledActions = _react.useCallback(()=>getEntityScheduledActions('Asset', props.assetId), [
+        getEntityScheduledActions,
+        props.assetId
+    ]);
+    _react.useEffect(()=>{
+        if (asset) {
+            props.onAction && props.onAction({
+                type: 'rendered',
+                entity: 'Asset'
+            });
+        }
+    }, [
+        asset
+    ]);
+    const onEdit = async ()=>{
+        const { slide  } = await props.sdk.navigator.openAsset(props.assetId, {
+            slideIn: true
+        });
+        props.onAction && props.onAction({
+            entity: 'Asset',
+            type: 'edit',
+            id: props.assetId,
+            contentTypeId: '',
+            slide
+        });
+    };
+    const onRemove = ()=>{
+        props.onRemove();
+        props.onAction && props.onAction({
+            entity: 'Asset',
+            type: 'delete',
+            id: props.assetId,
+            contentTypeId: ''
+        });
+    };
+    return _react.useMemo(()=>{
+        if (status === 'error') {
+            const card = _react.createElement(_components.MissingEntityCard, {
+                entityType: "Asset",
+                asSquare: props.viewType !== 'link',
+                isDisabled: props.isDisabled,
+                onRemove: onRemove
+            });
+            if (props.renderCustomMissingEntityCard) {
+                return props.renderCustomMissingEntityCard({
+                    defaultCard: card,
+                    entity: {
+                        id: props.assetId,
+                        type: 'Asset'
+                    }
+                });
+            }
+            return card;
+        }
+        const { getEntityUrl  } = props;
+        const size = props.viewType === 'big_card' ? 'default' : 'small';
+        const commonProps = {
+            asset,
+            entityUrl: getEntityUrl && getEntityUrl(props.assetId),
+            size: size,
+            isDisabled: props.isDisabled,
+            localeCode: props.sdk.field.locale,
+            defaultLocaleCode: props.sdk.locales.default,
+            renderDragHandle: props.renderDragHandle,
+            onEdit,
+            onRemove
+        };
+        if (props.viewType === 'link') {
+            if (status === 'loading') {
+                return _react.createElement(_f36components.EntryCard, {
+                    size: "small",
+                    isLoading: true
+                });
+            }
+            return _react.createElement(_WrappedAssetLink.WrappedAssetLink, {
+                ...commonProps,
+                href: commonProps.entityUrl,
+                getEntityScheduledActions: loadEntityScheduledActions
+            });
+        }
+        if (status === 'loading') {
+            return _react.createElement(_f36components.AssetCard, {
+                size: size,
+                isLoading: true
+            });
+        }
+        function renderDefaultCard(props) {
+            const builtinCardProps = {
+                ...commonProps,
+                ...props,
+                getEntityScheduledActions: loadEntityScheduledActions,
+                asset: (props?.entity) || commonProps.asset,
+                getAssetUrl: getEntityUrl
+            };
+            return _react.createElement(_WrappedAssetCard.WrappedAssetCard, builtinCardProps);
+        }
+        if (props.renderCustomCard) {
+            const customProps = {
+                ...commonProps,
+                entity: commonProps.asset
+            };
+            const renderedCustomCard = props.renderCustomCard(customProps, {}, renderDefaultCard);
+            if (renderedCustomCard !== false) {
+                return renderedCustomCard;
+            }
+        }
+        return renderDefaultCard();
+    }, [
+        props,
+        status,
+        asset
+    ]);
+}

package/dist/cjs/assets/WrappedAssetCard/WrappedAssetCard.js

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WrappedAssetCard", {
+    enumerable: true,
+    get: function() {
+        return WrappedAssetCard;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _mimetype = _interop_require_default(require("@contentful/mimetype"));
+const _emotion = require("emotion");
+const _components = require("../../components");
+const _AssetCardActions = require("./AssetCardActions");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const groupToIconMap = {
+    image: 'image',
+    video: 'video',
+    audio: 'audio',
+    richtext: 'richtext',
+    presentation: 'presentation',
+    spreadsheet: 'spreadsheet',
+    pdfdocument: 'pdf',
+    archive: 'archive',
+    plaintext: 'plaintext',
+    code: 'code',
+    markup: 'markup'
+};
+const styles = {
+    scheduleIcon: (0, _emotion.css)({
+        marginRight: _f36tokens.default.spacing2Xs
+    })
+};
+const defaultProps = {
+    isClickable: true
+};
+function getFileType(file) {
+    if (!file) {
+        return 'archive';
+    }
+    const groupName = _mimetype.default.getGroupLabel({
+        type: file.contentType,
+        fallbackFileName: file.fileName
+    });
+    return groupToIconMap[groupName] || 'archive';
+}
+const WrappedAssetCard = (props)=>{
+    const { className , onEdit , getAssetUrl , onRemove , size , isDisabled , isSelected , isClickable  } = props;
+    const status = _fieldeditorshared.entityHelpers.getEntryStatus(props.asset.sys);
+    if (status === 'deleted') {
+        return _react.createElement(_components.MissingEntityCard, {
+            entityType: "Asset",
+            asSquare: true,
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const entityTitle = _fieldeditorshared.entityHelpers.getAssetTitle({
+        asset: props.asset,
+        localeCode: props.localeCode,
+        defaultLocaleCode: props.defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    });
+    const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
+    const href = getAssetUrl ? getAssetUrl(props.asset.sys.id) : undefined;
+    return _react.createElement(_f36components.AssetCard, {
+        as: href ? 'a' : 'article',
+        type: getFileType(entityFile),
+        title: entityTitle,
+        className: className,
+        isSelected: isSelected,
+        href: href,
+        status: status,
+        icon: _react.createElement(_components.ScheduledIconWithTooltip, {
+            getEntityScheduledActions: props.getEntityScheduledActions,
+            entityType: "Asset",
+            entityId: props.asset.sys.id
+        }, _react.createElement(_f36icons.ClockIcon, {
+            className: styles.scheduleIcon,
+            size: "small",
+            variant: "muted",
+            testId: "schedule-icon"
+        })),
+        src: entityFile && entityFile.url ? size === 'small' ? `${entityFile.url}?w=150&h=150&fit=thumb` : `${entityFile.url}?h=300` : '',
+        onClick: isClickable ? (e)=>{
+            e.preventDefault();
+            onEdit && onEdit();
+        } : undefined,
+        onKeyDown: isClickable ? (e)=>{
+            if (e.key === 'Enter' && onEdit) {
+                e.preventDefault();
+                onEdit();
+            }
+        } : undefined,
+        dragHandleRender: props.renderDragHandle,
+        withDragHandle: !!props.renderDragHandle,
+        actions: [
+            ...(0, _AssetCardActions.renderActions)({
+                entityFile,
+                isDisabled: isDisabled,
+                onEdit,
+                onRemove
+            }),
+            ...entityFile ? (0, _AssetCardActions.renderAssetInfo)({
+                entityFile
+            }) : []
+        ].filter((item)=>item),
+        size: size
+    });
+};
+WrappedAssetCard.defaultProps = defaultProps;

package/dist/cjs/assets/WrappedAssetCard/WrappedAssetLink.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "WrappedAssetLink", {
+    enumerable: true,
+    get: function() {
+        return WrappedAssetLink;
+    }
+});
+const _react = _interop_require_wildcard(require("react"));
+const _f36components = require("@contentful/f36-components");
+const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = _interop_require_default(require("@contentful/f36-tokens"));
+const _fieldeditorshared = require("@contentful/field-editor-shared");
+const _emotion = require("emotion");
+const _components = require("../../components");
+const _AssetCardActions = require("./AssetCardActions");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const styles = {
+    scheduleIcon: (0, _emotion.css)({
+        marginRight: _f36tokens.default.spacing2Xs
+    })
+};
+const WrappedAssetLink = (props)=>{
+    const { className , href , onEdit , onRemove , isDisabled  } = props;
+    const status = _fieldeditorshared.entityHelpers.getEntryStatus(props.asset.sys);
+    if (status === 'deleted') {
+        return _react.createElement(_components.MissingEntityCard, {
+            entityType: "Asset",
+            isDisabled: props.isDisabled,
+            onRemove: props.onRemove
+        });
+    }
+    const entityTitle = _fieldeditorshared.entityHelpers.getAssetTitle({
+        asset: props.asset,
+        localeCode: props.localeCode,
+        defaultLocaleCode: props.defaultLocaleCode,
+        defaultTitle: 'Untitled'
+    });
+    const entityFile = props.asset.fields.file ? props.asset.fields.file[props.localeCode] || props.asset.fields.file[props.defaultLocaleCode] : undefined;
+    return _react.createElement(_f36components.EntryCard, {
+        as: href ? 'a' : 'article',
+        contentType: "Asset",
+        title: entityTitle,
+        className: className,
+        href: href,
+        size: "small",
+        status: status,
+        thumbnailElement: entityFile && (0, _fieldeditorshared.isValidImage)(entityFile) ? _react.createElement(_components.AssetThumbnail, {
+            file: entityFile
+        }) : undefined,
+        icon: _react.createElement(_components.ScheduledIconWithTooltip, {
+            getEntityScheduledActions: props.getEntityScheduledActions,
+            entityType: "Asset",
+            entityId: props.asset.sys.id
+        }, _react.createElement(_f36icons.ClockIcon, {
+            className: styles.scheduleIcon,
+            size: "small",
+            variant: "muted",
+            testId: "schedule-icon"
+        })),
+        onClick: (e)=>{
+            e.preventDefault();
+            onEdit();
+        },
+        onKeyDown: (e)=>{
+            if (e.key === 'Enter' && onEdit) {
+                e.preventDefault();
+                onEdit();
+            }
+        },
+        dragHandleRender: props.renderDragHandle,
+        withDragHandle: !!props.renderDragHandle,
+        actions: [
+            (0, _AssetCardActions.renderActions)({
+                entityFile,
+                isDisabled: isDisabled,
+                onEdit,
+                onRemove
+            }),
+            entityFile ? (0, _AssetCardActions.renderAssetInfo)({
+                entityFile
+            }) : null
+        ].filter((item)=>item)
+    });
+};

package/dist/cjs/assets/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    SingleMediaEditor: function() {
+        return _SingleMediaEditor.SingleMediaEditor;
+    },
+    MultipleMediaEditor: function() {
+        return _MultipleMediaEditor.MultipleMediaEditor;
+    },
+    WrappedAssetCard: function() {
+        return _WrappedAssetCard.WrappedAssetCard;
+    }
+});
+const _SingleMediaEditor = require("./SingleMediaEditor");
+const _MultipleMediaEditor = require("./MultipleMediaEditor");
+const _WrappedAssetCard = require("./WrappedAssetCard/WrappedAssetCard");