@contentful/field-editor-reference 5.9.0 → 5.10.0

package/dist/cjs/resources/useResourceLinkActions.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useResourceLinkActions", {
+    enumerable: true,
+    get: function() {
+        return useResourceLinkActions;
+    }
+});
+const _react = require("react");
+const toLinkItem = (entry, apiUrl)=>({
+        sys: {
+            type: 'ResourceLink',
+            linkType: 'Contentful:Entry',
+            urn: entry.sys.urn ?? `crn:${apiUrl}:::content:spaces/${entry.sys.space.sys.id}/entries/${entry.sys.id}`
+        }
+    });
+const getUpdatedValue = (field, entries, apiUrl)=>{
+    const multiple = field.type === 'Array';
+    if (multiple) {
+        const linkItems = entries.map((entry)=>toLinkItem(entry, apiUrl));
+        const prevValue = field.getValue() || [];
+        return [
+            ...prevValue,
+            ...linkItems
+        ];
+    } else {
+        return toLinkItem(entries[0], apiUrl);
+    }
+};
+function useResourceLinkActions({ dialogs , field , onAfterLink , apiUrl  }) {
+    const handleAfterLink = (0, _react.useCallback)((entries)=>{
+        if (!onAfterLink) {
+            return;
+        }
+        entries.forEach(onAfterLink);
+    }, [
+        onAfterLink
+    ]);
+    const onLinkedExisting = (0, _react.useMemo)(()=>{
+        return (entries)=>{
+            const updatedValue = getUpdatedValue(field, entries, apiUrl);
+            field.setValue(updatedValue);
+            handleAfterLink(entries);
+        };
+    }, [
+        field,
+        handleAfterLink,
+        apiUrl
+    ]);
+    const multiple = field.type === 'Array';
+    const onLinkExisting = (0, _react.useMemo)(()=>{
+        const promptSelection = multiple ? async ()=>await dialogs.selectMultipleResourceEntries({
+                allowedResources: field.allowedResources
+            }) : async ()=>[
+                await dialogs.selectSingleResourceEntry({
+                    allowedResources: field.allowedResources
+                })
+            ];
+        return async ()=>{
+            const res = await promptSelection();
+            if (!res) {
+                return;
+            }
+            onLinkedExisting(res);
+        };
+    }, [
+        dialogs,
+        field.allowedResources,
+        multiple,
+        onLinkedExisting
+    ]);
+    return {
+        onLinkExisting,
+        onLinkedExisting,
+        entityType: 'Entry',
+        contentTypes: [],
+        canCreateEntity: false,
+        canLinkMultiple: multiple,
+        canLinkEntity: true,
+        isDisabled: false,
+        isEmpty: false,
+        isFull: false,
+        onCreate: async ()=>{},
+        onCreated: ()=>{}
+    };
+}

package/dist/cjs/types.js

@@ -0,0 +1,22 @@
+"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, {
+    Entry: function() {
+        return _fieldeditorshared.Entry;
+    },
+    File: function() {
+        return _fieldeditorshared.File;
+    },
+    Asset: function() {
+        return _fieldeditorshared.Asset;
+    }
+});
+const _fieldeditorshared = require("@contentful/field-editor-shared");

package/dist/cjs/utils/fromFieldValidations.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "fromFieldValidations", {
+    enumerable: true,
+    get: function() {
+        return fromFieldValidations;
+    }
+});
+const _isNumber = _interop_require_default(require("lodash/isNumber"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function fromFieldValidations(field) {
+    const validations = [
+        ...field.validations,
+        ...field.items?.validations ?? []
+    ];
+    const linkContentTypeValidations = validations.find((v)=>'linkContentType' in v);
+    const linkMimetypeGroupValidations = validations.find((v)=>'linkMimetypeGroup' in v);
+    const sizeValidations = validations.find((v)=>'size' in v);
+    const size = sizeValidations && sizeValidations.size || {};
+    const min = size.min;
+    const max = size.max;
+    let numberOfLinks = undefined;
+    if ((0, _isNumber.default)(min) && (0, _isNumber.default)(max)) {
+        numberOfLinks = {
+            type: 'min-max',
+            min,
+            max
+        };
+    } else if ((0, _isNumber.default)(min)) {
+        numberOfLinks = {
+            type: 'min',
+            min,
+            max: undefined
+        };
+    } else if ((0, _isNumber.default)(max)) {
+        numberOfLinks = {
+            type: 'max',
+            max,
+            min: undefined
+        };
+    }
+    const result = {
+        contentTypes: linkContentTypeValidations?.linkContentType ?? undefined,
+        mimetypeGroups: linkMimetypeGroupValidations?.linkMimetypeGroup ?? undefined,
+        numberOfLinks
+    };
+    return result;
+}

package/dist/esm/__fixtures__/FakeSdk.js

@@ -0,0 +1,173 @@
+import { createFakeCMAAdapter, createFakeFieldAPI, createFakeLocalesAPI, createFakeSpaceAPI } from '@contentful/field-editor-test-utils';
+import { assets, contentTypes, entries, locales as localesFixtures, spaces } from './fixtures';
+const newLink = (linkType, id)=>({
+        sys: {
+            id,
+            linkType,
+            type: 'Link'
+        }
+    });
+export function newReferenceEditorFakeSdk(props) {
+    const rawInitialValue = window.localStorage.getItem('initialValue');
+    const initialValue = rawInitialValue ? JSON.parse(rawInitialValue) : props?.initialValue;
+    const rawValidations = window.localStorage.getItem('fieldValidations');
+    const validations = rawValidations ? JSON.parse(rawValidations) : props?.validations;
+    const customizeMock = (field)=>{
+        return validations ? {
+            ...field,
+            validations
+        } : field;
+    };
+    const [field, mitt] = createFakeFieldAPI(customizeMock, initialValue);
+    const space = createFakeSpaceAPI();
+    const locales = createFakeLocalesAPI();
+    const entryLinks = [
+        newLink('Entry', entries.published.sys.id),
+        newLink('Entry', entries.changed.sys.id),
+        newLink('Entry', entries.empty.sys.id)
+    ];
+    const assetLinks = [
+        newLink('Asset', assets.published.sys.id),
+        newLink('Asset', assets.changed.sys.id),
+        newLink('Asset', assets.empty.sys.id)
+    ];
+    let selectorCounter = 0;
+    const delay = (ms)=>{
+        return new Promise((resolve)=>setTimeout(resolve, ms));
+    };
+    const localizeContentTypes = (contentTypes)=>{
+        return contentTypes.map((contentType)=>({
+                ...contentType,
+                fields: contentType.fields.map((field)=>({
+                        ...field,
+                        localized: true
+                    }))
+            }));
+    };
+    const sdk = {
+        field,
+        locales,
+        cmaAdapter: createFakeCMAAdapter({
+            Entry: {
+                get: async ({ entryId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (entryId === entries.empty.sys.id) {
+                        return entries.empty;
+                    }
+                    if (entryId === entries.published.sys.id) {
+                        return entries.published;
+                    }
+                    if (entryId === entries.changed.sys.id) {
+                        return entries.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Asset: {
+                get: async ({ assetId  })=>{
+                    if (props?.fetchDelay) {
+                        await delay(props.fetchDelay);
+                    }
+                    if (assetId === assets.empty.sys.id) {
+                        return assets.empty;
+                    }
+                    if (assetId === assets.published.sys.id) {
+                        return assets.published;
+                    }
+                    if (assetId === assets.changed.sys.id) {
+                        return assets.changed;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Space: {
+                get: async (params)=>{
+                    if (params.spaceId === spaces.indifferent.sys.id) {
+                        return spaces.indifferent;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            ContentType: {
+                get: async ({ contentTypeId  })=>{
+                    if (contentTypeId === contentTypes.published.sys.id) {
+                        return contentTypes.published;
+                    }
+                    return Promise.reject({});
+                }
+            },
+            Locale: {
+                getMany: async ()=>localesFixtures.list
+            }
+        }),
+        space: {
+            ...space,
+            getCachedContentTypes () {
+                return localizeContentTypes(space.getCachedContentTypes());
+            },
+            getContentTypes () {
+                return Promise.resolve(space.getContentTypes().then((response)=>{
+                    return {
+                        ...response,
+                        items: localizeContentTypes(response.items)
+                    };
+                }));
+            },
+            async getEntityScheduledActions () {
+                return [];
+            }
+        },
+        dialogs: {
+            selectSingleAsset: async ()=>{
+                selectorCounter++;
+                return assetLinks[selectorCounter % assetLinks.length];
+            },
+            selectMultipleAssets: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? assetLinks.slice(0, 2) : [
+                    assetLinks[2]
+                ];
+            },
+            selectSingleEntry: async ()=>{
+                selectorCounter++;
+                return entryLinks[selectorCounter % entryLinks.length];
+            },
+            selectMultipleEntries: async ()=>{
+                selectorCounter++;
+                return selectorCounter % 2 ? entryLinks.slice(0, 2) : [
+                    entryLinks[2]
+                ];
+            }
+        },
+        navigator: {
+            openNewAsset: async ()=>({
+                    entity: newLink('Asset', assets.empty.sys.id)
+                }),
+            openAsset: async ()=>{
+                alert('open Asset in slide in');
+                return {};
+            },
+            openNewEntry: async ()=>({
+                    entity: newLink('Entry', entries.empty.sys.id)
+                }),
+            openEntry: async ()=>{
+                alert('open entry in slide in');
+                return {};
+            },
+            onSlideInNavigation: ()=>()=>({})
+        },
+        access: {
+            can: async ()=>true
+        },
+        ids: {
+            space: 'space-id',
+            environment: 'environment-id'
+        }
+    };
+    return [
+        sdk,
+        mitt
+    ];
+}

package/dist/esm/__fixtures__/asset/index.js

@@ -0,0 +1,6 @@
+import changed from './changed_asset.json';
+import created from './created_asset.json';
+import empty from './empty_asset.json';
+import invalid from './invalid_asset.json';
+import published from './published_asset.json';
+export { changed, empty, published, invalid, created };

package/dist/esm/__fixtures__/content-type/index.js

@@ -0,0 +1,2 @@
+import published from './published_content_type.json';
+export { published };

package/dist/esm/__fixtures__/entry/index.js

@@ -0,0 +1,5 @@
+import changed from './changed_entry.json';
+import empty from './empty_entry.json';
+import invalid from './invalid_entry.json';
+import published from './published_entry.json';
+export { changed, empty, published, invalid };

package/dist/esm/__fixtures__/fixtures.js

@@ -0,0 +1,6 @@
+import * as assets from './asset';
+import * as contentTypes from './content-type';
+import * as entries from './entry';
+import * as locales from './locale';
+import * as spaces from './space';
+export { assets, contentTypes, entries, locales, spaces };

package/dist/esm/__fixtures__/locale/index.js

@@ -0,0 +1,15 @@
+import englishDefault from './english_default_locale.json';
+import german from './german_locale.json';
+const list = {
+    sys: {
+        type: 'Array'
+    },
+    total: 2,
+    skip: 0,
+    limit: 100,
+    items: [
+        englishDefault,
+        german
+    ]
+};
+export { englishDefault, german, list };

package/dist/esm/__fixtures__/space/index.js

@@ -0,0 +1,2 @@
+import indifferent from './indifferent_space.json';
+export { indifferent };

package/dist/esm/assets/MultipleMediaEditor.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { css, cx } from 'emotion';
+import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor';
+import { SortableLinkList } from '../common/SortableLinkList';
+import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard';
+const styles = {
+    gridContainer: css({
+        position: 'relative',
+        display: 'flex',
+        flexWrap: 'wrap'
+    })
+};
+export function MultipleMediaEditor(props) {
+    return React.createElement(MultipleReferenceEditor, {
+        ...props,
+        entityType: "Asset"
+    }, (childrenProps)=>React.createElement(SortableLinkList, {
+            ...childrenProps,
+            className: cx({
+                [styles.gridContainer]: childrenProps.viewType === 'card'
+            }),
+            axis: childrenProps.viewType === 'card' ? 'xy' : 'y',
+            useDragHandle: true
+        }, ({ items , item , index , isDisabled , DragHandle  })=>React.createElement(FetchingWrappedAssetCard, {
+                ...childrenProps,
+                isDisabled: isDisabled,
+                key: `${item.sys.id}-${index}`,
+                assetId: item.sys.id,
+                onRemove: ()=>{
+                    childrenProps.setValue(items.filter((_value, i)=>i !== index));
+                },
+                renderDragHandle: DragHandle
+            })));
+}
+MultipleMediaEditor.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/esm/assets/SingleMediaEditor.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { SingleReferenceEditor } from '../common/SingleReferenceEditor';
+import { FetchingWrappedAssetCard } from './WrappedAssetCard/FetchingWrappedAssetCard';
+export function SingleMediaEditor(props) {
+    return React.createElement(SingleReferenceEditor, {
+        ...props,
+        entityType: "Asset"
+    }, ({ entityId , isDisabled , setValue  })=>React.createElement(FetchingWrappedAssetCard, {
+            ...props,
+            viewType: "big_card",
+            assetId: entityId,
+            isDisabled: isDisabled,
+            onRemove: ()=>{
+                setValue(null);
+            }
+        }));
+}
+SingleMediaEditor.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/esm/assets/WrappedAssetCard/AssetCardActions.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Menu, Text } from '@contentful/f36-components';
+import { shortenStorageUnit } from '@contentful/field-editor-shared';
+import get from 'lodash/get';
+function downloadAsset(url) {
+    window.open(url, '_blank', 'noopener,noreferrer');
+}
+export function renderAssetInfo(props) {
+    const { entityFile  } = props;
+    const fileName = get(entityFile, 'fileName');
+    const mimeType = get(entityFile, 'contentType');
+    const fileSize = get(entityFile, 'details.size');
+    const image = get(entityFile, 'details.image');
+    return [
+        React.createElement(Menu.SectionTitle, {
+            key: "file-section"
+        }, "File info"),
+        fileName && React.createElement(Menu.Item, {
+            key: "file-name"
+        }, React.createElement(Text, {
+            isTruncated: true
+        }, fileName)),
+        mimeType && React.createElement(Menu.Item, {
+            key: "file-type"
+        }, React.createElement(Text, {
+            isTruncated: true
+        }, mimeType)),
+        fileSize && React.createElement(Menu.Item, {
+            key: "file-size"
+        }, shortenStorageUnit(fileSize, 'B')),
+        image && React.createElement(Menu.Item, {
+            key: "file-dimentions"
+        }, `${image.width} × ${image.height}`)
+    ].filter((item)=>item);
+}
+export function renderActions(props) {
+    const { entityFile , isDisabled , onEdit , onRemove  } = props;
+    return [
+        React.createElement(Menu.SectionTitle, {
+            key: "section-title"
+        }, "Actions"),
+        onEdit ? React.createElement(Menu.Item, {
+            key: "edit",
+            onClick: onEdit,
+            testId: "card-action-edit"
+        }, "Edit") : null,
+        entityFile ? React.createElement(Menu.Item, {
+            key: "download",
+            onClick: ()=>{
+                if (typeof entityFile.url === 'string') {
+                    downloadAsset(entityFile.url);
+                }
+            },
+            testId: "card-action-download"
+        }, "Download") : null,
+        onRemove ? React.createElement(Menu.Item, {
+            key: "remove",
+            disabled: isDisabled,
+            onClick: onRemove,
+            testId: "card-action-remove"
+        }, "Remove") : null
+    ].filter((item)=>item);
+}

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

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { AssetCard, EntryCard } from '@contentful/f36-components';
+import { useEntity, useEntityLoader } from '../../common/EntityStore';
+import { MissingEntityCard } from '../../components';
+import { WrappedAssetCard } from './WrappedAssetCard';
+import { WrappedAssetLink } from './WrappedAssetLink';
+export function FetchingWrappedAssetCard(props) {
+    const { data: asset , status  } = useEntity('Asset', props.assetId);
+    const { getEntityScheduledActions  } = 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(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(EntryCard, {
+                    size: "small",
+                    isLoading: true
+                });
+            }
+            return React.createElement(WrappedAssetLink, {
+                ...commonProps,
+                href: commonProps.entityUrl,
+                getEntityScheduledActions: loadEntityScheduledActions
+            });
+        }
+        if (status === 'loading') {
+            return React.createElement(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, 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
+    ]);
+}