@contentful/field-editor-reference 5.9.0 → 5.10.0

package/dist/esm/components/LinkActions/LinkEntityActions.js

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { CombinedLinkActions } from './CombinedLinkActions';
+import { createEntity, selectMultipleEntities, selectSingleEntity } from './helpers';
+import { LinkActions } from './LinkActions';
+export function useLinkActionsProps(props) {
+    const { sdk , editorPermissions , entityType , canLinkMultiple , isDisabled , actionLabels , itemsLength  } = props;
+    const maxLinksCount = editorPermissions.validations.numberOfLinks?.max;
+    const value = sdk.field.getValue();
+    const linkCount = Array.isArray(value) ? value.length : value ? 1 : 0;
+    const isFull = !!maxLinksCount && maxLinksCount <= linkCount;
+    const isEmpty = linkCount === 0;
+    const onCreated = React.useCallback((entity, index = itemsLength, slide)=>{
+        props.onCreate(entity.sys.id, index);
+        props.onAction && props.onAction({
+            type: 'create_and_link',
+            entity: entityType,
+            entityData: entity,
+            slide,
+            index
+        });
+    }, [
+        entityType,
+        props.onCreate,
+        props.onAction
+    ]);
+    const onLinkedExisting = React.useCallback((entities, index = itemsLength)=>{
+        props.onLink(entities.map((item)=>item.sys.id), index);
+        entities.forEach((entity, i)=>{
+            props.onAction && props.onAction({
+                type: 'select_and_link',
+                entity: entityType,
+                entityData: entity,
+                index: index === undefined ? undefined : index + i
+            });
+        });
+    }, [
+        entityType,
+        props.onLink,
+        props.onAction
+    ]);
+    const onCreate = React.useCallback(async (contentTypeId, index)=>{
+        const { entity , slide  } = await createEntity({
+            sdk,
+            entityType,
+            contentTypeId
+        });
+        if (!entity) {
+            return;
+        }
+        onCreated(entity, index, slide);
+    }, [
+        sdk,
+        entityType,
+        onCreated
+    ]);
+    const onLinkExisting = React.useCallback(async (index)=>{
+        const entity = await selectSingleEntity({
+            sdk,
+            entityType,
+            editorPermissions
+        });
+        if (!entity) {
+            return;
+        }
+        onLinkedExisting([
+            entity
+        ], index);
+    }, [
+        sdk,
+        entityType,
+        onLinkedExisting
+    ]);
+    const onLinkSeveralExisting = React.useCallback(async (index)=>{
+        const entities = await selectMultipleEntities({
+            sdk,
+            entityType,
+            editorPermissions
+        });
+        if (!entities || entities.length === 0) {
+            return;
+        }
+        onLinkedExisting(entities, index);
+    }, [
+        sdk,
+        entityType,
+        onLinkedExisting
+    ]);
+    return useMemo(()=>({
+            entityType,
+            canLinkMultiple,
+            isDisabled,
+            isEmpty,
+            isFull,
+            canCreateEntity: editorPermissions.canCreateEntity,
+            canLinkEntity: editorPermissions.canLinkEntity,
+            contentTypes: editorPermissions.creatableContentTypes,
+            onCreate,
+            onLinkExisting: canLinkMultiple ? onLinkSeveralExisting : onLinkExisting,
+            actionLabels,
+            onCreated,
+            onLinkedExisting,
+            itemsLength
+        }), [
+        entityType,
+        canLinkMultiple,
+        isDisabled,
+        isEmpty,
+        isFull,
+        editorPermissions.canCreateEntity,
+        editorPermissions.canLinkEntity,
+        actionLabels,
+        editorPermissions.creatableContentTypes.map((ct)=>ct.sys.id).join(':'),
+        onCreate,
+        onLinkExisting,
+        onLinkSeveralExisting,
+        onCreated,
+        onLinkedExisting,
+        itemsLength
+    ]);
+}
+export function LinkEntityActions({ renderCustomActions , ...props }) {
+    return renderCustomActions ? renderCustomActions(props) : React.createElement(LinkActions, props);
+}
+export function CombinedLinkEntityActions({ renderCustomActions , ...props }) {
+    return renderCustomActions ? renderCustomActions(props) : React.createElement(CombinedLinkActions, props);
+}

package/dist/esm/components/LinkActions/NoLinkPermissionsInfo.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Paragraph } from '@contentful/f36-components';
+export function NoLinkPermissionsInfo() {
+    return React.createElement(Paragraph, null, "You don't have permission to view this content or this field is not correctly configured. Contact your administrator for help.");
+}

package/dist/esm/components/LinkActions/helpers.js

@@ -0,0 +1,57 @@
+const getContentTypeIds = (contentTypes)=>contentTypes.map((ct)=>ct.sys.id);
+export async function createEntity(props) {
+    if (props.entityType === 'Entry') {
+        if (!props.contentTypeId) {
+            return {};
+        }
+        const { entity , slide  } = await props.sdk.navigator.openNewEntry(props.contentTypeId, {
+            slideIn: true
+        });
+        return {
+            entity,
+            slide
+        };
+    } else {
+        const { entity , slide  } = await props.sdk.navigator.openNewAsset({
+            slideIn: true
+        });
+        return {
+            entity,
+            slide
+        };
+    }
+}
+export async function selectSingleEntity(props) {
+    if (props.entityType === 'Entry') {
+        return await props.sdk.dialogs.selectSingleEntry({
+            locale: props.sdk.field.locale,
+            contentTypes: getContentTypeIds(props.editorPermissions.readableContentTypes)
+        });
+    } else {
+        return props.sdk.dialogs.selectSingleAsset({
+            locale: props.sdk.field.locale,
+            mimetypeGroups: props.editorPermissions.validations.mimetypeGroups
+        });
+    }
+}
+export async function selectMultipleEntities(props) {
+    const value = props.sdk.field.getValue();
+    const linkCount = Array.isArray(value) ? value.length : value ? 1 : 0;
+    const min = Math.max((props.editorPermissions.validations.numberOfLinks?.min || 1) - linkCount, 1);
+    const max = (props.editorPermissions.validations.numberOfLinks?.max || +Infinity) - linkCount;
+    if (props.entityType === 'Entry') {
+        return await props.sdk.dialogs.selectMultipleEntries({
+            locale: props.sdk.field.locale,
+            contentTypes: getContentTypeIds(props.editorPermissions.readableContentTypes),
+            min,
+            max
+        });
+    } else {
+        return props.sdk.dialogs.selectMultipleAssets({
+            locale: props.sdk.field.locale,
+            mimetypeGroups: props.editorPermissions.validations.mimetypeGroups,
+            min,
+            max
+        });
+    }
+}

package/dist/esm/components/LinkActions/redesignStyles.js

@@ -0,0 +1,18 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+export const container = css({
+    display: 'flex',
+    border: `1px dashed ${tokens.gray500}`,
+    borderRadius: tokens.borderRadiusMedium,
+    justifyContent: 'center',
+    padding: tokens.spacingXl
+});
+export const action = css({
+    textDecoration: 'none',
+    fontWeight: 'bold'
+});
+export const chevronIcon = css({
+    float: 'right',
+    marginLeft: tokens.spacingXs,
+    marginRight: -tokens.spacing2Xs
+});

package/dist/esm/components/LinkActions/styles.js

@@ -0,0 +1,10 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+export const container = css({
+    display: 'flex',
+    width: '100%',
+    marginTop: tokens.spacingS
+});
+export const separator = css({
+    marginRight: tokens.spacingXl
+});

package/dist/esm/components/MissingEntityCard/MissingEntityCard.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Card, Flex, IconButton, SectionHeading } from '@contentful/f36-components';
+import { CloseIcon } from '@contentful/f36-icons';
+import * as styles from './styles';
+export function MissingEntityCard(props) {
+    return React.createElement(Card, {
+        className: styles.card,
+        testId: "cf-ui-missing-entry-card"
+    }, React.createElement(Flex, {
+        alignItems: "center",
+        justifyContent: "space-between"
+    }, React.createElement("div", {
+        className: props.asSquare ? styles.squareCard : ''
+    }, React.createElement(SectionHeading, {
+        marginBottom: "none"
+    }, props.entityType, " is missing or inaccessible")), !props.isDisabled && props.onRemove && React.createElement(IconButton, {
+        variant: "transparent",
+        icon: React.createElement(CloseIcon, {
+            variant: "muted"
+        }),
+        "aria-label": "Delete",
+        onClick: ()=>{
+            props.onRemove && props.onRemove();
+        }
+    })));
+}

package/dist/esm/components/MissingEntityCard/styles.js

@@ -0,0 +1,11 @@
+import { css } from 'emotion';
+export const card = css({
+    position: 'relative'
+});
+export const squareCard = css({
+    display: 'flex',
+    alignItems: 'center',
+    width: '135px',
+    height: '160px',
+    textAlign: 'center'
+});

package/dist/esm/components/ScheduledIconWithTooltip/ScheduleTooltip.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Tooltip } from '@contentful/f36-components';
+import { formatDateAndTime } from './formatDateAndTime';
+export const getScheduleTooltipContent = ({ job , jobsCount  })=>{
+    return `Will ${job.action.toLowerCase()} ${formatDateAndTime(job.scheduledFor.datetime).toLowerCase()}
+  ${jobsCount > 1 ? `+ ${jobsCount - 1} more` : ''}`;
+};
+export const ScheduleTooltip = ({ job , jobsCount , children  })=>{
+    return React.createElement(Tooltip, {
+        placement: "top",
+        testId: job.sys.id,
+        as: "div",
+        content: getScheduleTooltipContent({
+            job,
+            jobsCount
+        })
+    }, children);
+};

package/dist/esm/components/ScheduledIconWithTooltip/ScheduledIconWithTooltip.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ScheduleTooltip } from './ScheduleTooltip';
+export const ScheduledIconWithTooltip = ({ entityType , entityId , getEntityScheduledActions , children  })=>{
+    const [status, setStatus] = React.useState({
+        type: 'loading'
+    });
+    React.useEffect(()=>{
+        getEntityScheduledActions(entityType, entityId).then((data)=>{
+            setStatus({
+                type: 'loaded',
+                jobs: data
+            });
+        }).catch((e)=>{
+            setStatus({
+                type: 'error',
+                error: e
+            });
+        });
+    }, []);
+    if (status.type === 'loading' || status.type === 'error') {
+        return null;
+    }
+    const jobs = status.jobs ?? [];
+    if (jobs.length === 0) {
+        return null;
+    }
+    const mostRelevantJob = jobs[0];
+    return React.createElement(ScheduleTooltip, {
+        job: mostRelevantJob,
+        jobsCount: jobs.length
+    }, children);
+};

package/dist/esm/components/ScheduledIconWithTooltip/formatDateAndTime.js

@@ -0,0 +1,19 @@
+import moment from 'moment';
+export const formatDate = (date, short)=>{
+    switch(moment().startOf('day').diff(moment(date).startOf('day'), 'days')){
+        case 0:
+            return short ? 'Today' : `Today, ${moment(date).format('DD MMM YYYY')}`;
+        case -1:
+            return short ? 'Tomorrow' : `Tomorrow, ${moment(date).format('DD MMM YYYY')}`;
+        case 1:
+            return short ? 'Yesterday' : `Yesterday, ${moment(date).format('DD MMM YYYY')}`;
+        default:
+            return moment(date).format('ddd, DD MMM YYYY');
+    }
+};
+export const formatTime = (date)=>{
+    return moment.utc(date).local().format('h:mm A');
+};
+export const formatDateAndTime = (date, short)=>{
+    return `${formatDate(date, short)} at ${formatTime(date)}`;
+};

package/dist/esm/components/SpaceName/SpaceName.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Flex, Text, Tooltip } from '@contentful/f36-components';
+import { FolderOpenTrimmedIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+const styles = {
+    spaceIcon: css({
+        flexShrink: 0,
+        fill: tokens.purple600
+    }),
+    spaceName: css({
+        color: tokens.gray700,
+        fontSize: tokens.fontSizeS,
+        fontWeight: tokens.fontWeightDemiBold,
+        maxWidth: '80px',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    })
+};
+export function SpaceName(props) {
+    return React.createElement(Tooltip, {
+        placement: "top",
+        as: "div",
+        content: `Space: ${props.spaceName}`
+    }, React.createElement(Flex, {
+        alignItems: "center",
+        gap: "spacingXs",
+        marginRight: "spacingS"
+    }, React.createElement(FolderOpenTrimmedIcon, {
+        className: styles.spaceIcon,
+        size: "tiny",
+        "aria-label": "Source space"
+    }), React.createElement(Text, {
+        className: styles.spaceName
+    }, props.spaceName)));
+}

package/dist/esm/components/index.js

@@ -0,0 +1,8 @@
+export { CombinedLinkActions } from './LinkActions/CombinedLinkActions';
+export { MissingEntityCard } from './MissingEntityCard/MissingEntityCard';
+export { LinkEntityActions } from './LinkActions/LinkEntityActions';
+export { CreateEntryLinkButton } from './CreateEntryLinkButton/CreateEntryLinkButton';
+export { CreateEntryMenuTrigger } from './CreateEntryLinkButton/CreateEntryMenuTrigger';
+export { ScheduledIconWithTooltip } from './ScheduledIconWithTooltip/ScheduledIconWithTooltip';
+export { getScheduleTooltipContent } from './ScheduledIconWithTooltip/ScheduleTooltip';
+export { AssetThumbnail } from './AssetThumbnail/AssetThumbnail';

package/dist/esm/entries/MultipleEntryReferenceEditor.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { MultipleReferenceEditor } from '../common/MultipleReferenceEditor';
+import { SortableLinkList } from '../common/SortableLinkList';
+import { FetchingWrappedEntryCard } from './WrappedEntryCard/FetchingWrappedEntryCard';
+export function MultipleEntryReferenceEditor(props) {
+    const [indexToUpdate, setIndexToUpdate] = React.useState(undefined);
+    const updateBeforeSortStart = ({ index  })=>{
+        setIndexToUpdate(index);
+    };
+    return React.createElement(MultipleReferenceEditor, {
+        ...props,
+        entityType: "Entry",
+        setIndexToUpdate: setIndexToUpdate
+    }, (childrenProps)=>React.createElement(SortableLinkList, {
+            ...childrenProps,
+            axis: "y",
+            useDragHandle: true,
+            updateBeforeSortStart: updateBeforeSortStart
+        }, ({ items , item , index , isDisabled , DragHandle  })=>{
+            const lastIndex = items.length - 1;
+            return React.createElement(FetchingWrappedEntryCard, {
+                ...childrenProps,
+                key: `${item.sys.id}-${index}`,
+                index: index,
+                allContentTypes: childrenProps.allContentTypes,
+                isDisabled: isDisabled,
+                entryId: item.sys.id,
+                onRemove: ()=>{
+                    childrenProps.setValue(items.filter((_value, i)=>i !== index));
+                },
+                onMoveTop: index !== 0 ? ()=>childrenProps.onMove(index, 0) : undefined,
+                onMoveBottom: index !== lastIndex ? ()=>childrenProps.onMove(index, lastIndex) : undefined,
+                renderDragHandle: DragHandle,
+                isBeingDragged: index === indexToUpdate
+            });
+        }));
+}

package/dist/esm/entries/SingleEntryReferenceEditor.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { SingleReferenceEditor } from '../common/SingleReferenceEditor';
+import { FetchingWrappedEntryCard } from './WrappedEntryCard/FetchingWrappedEntryCard';
+export function SingleEntryReferenceEditor(props) {
+    return React.createElement(SingleReferenceEditor, {
+        ...props,
+        entityType: "Entry"
+    }, ({ allContentTypes , isDisabled , entityId , setValue , renderCustomCard , hasCardRemoveActions , hasCardEditActions  })=>{
+        return React.createElement(FetchingWrappedEntryCard, {
+            ...props,
+            allContentTypes: allContentTypes,
+            isDisabled: isDisabled,
+            entryId: entityId,
+            renderCustomCard: renderCustomCard,
+            hasCardEditActions: hasCardEditActions,
+            hasCardRemoveActions: hasCardRemoveActions,
+            onRemove: ()=>{
+                setValue(null);
+            }
+        });
+    });
+}
+SingleEntryReferenceEditor.defaultProps = {
+    isInitiallyDisabled: true
+};

package/dist/esm/entries/WrappedEntryCard/FetchingWrappedEntryCard.js

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { EntryCard } from '@contentful/f36-components';
+import get from 'lodash/get';
+import { useEntity, useEntityLoader } from '../../common/EntityStore';
+import { MissingEntityCard } from '../../components';
+import { WrappedEntryCard } from './WrappedEntryCard';
+async function openEntry(sdk, entryId, options) {
+    let slide;
+    if (options.bulkEditing) {
+        try {
+            const result = await sdk.navigator.openBulkEditor(sdk.entry.getSys().id, {
+                fieldId: sdk.field.id,
+                locale: sdk.field.locale,
+                index: options.index ?? 0
+            });
+            slide = result.slide;
+            return slide;
+        } catch (e) {}
+    }
+    const result = await sdk.navigator.openEntry(entryId, {
+        slideIn: true
+    });
+    slide = result.slide;
+    return slide;
+}
+export function FetchingWrappedEntryCard(props) {
+    const { data: entry , status  } = useEntity('Entry', props.entryId);
+    const { getEntityScheduledActions  } = useEntityLoader();
+    const loadEntityScheduledActions = React.useCallback(()=>getEntityScheduledActions('Entry', props.entryId), [
+        getEntityScheduledActions,
+        props.entryId
+    ]);
+    const size = props.viewType === 'link' ? 'small' : 'default';
+    const { getEntity  } = useEntityLoader();
+    const getAsset = (assetId)=>getEntity('Asset', assetId);
+    const onEdit = async ()=>{
+        const slide = await openEntry(props.sdk, props.entryId, {
+            bulkEditing: props.parameters.instance.bulkEditing,
+            index: props.index
+        });
+        props.onAction && props.onAction({
+            entity: 'Entry',
+            type: 'edit',
+            id: props.entryId,
+            contentTypeId: get(entry, 'sys.contentType.sys.id'),
+            slide
+        });
+    };
+    const onRemoveEntry = ()=>{
+        props.onRemove();
+        props.onAction && props.onAction({
+            entity: 'Entry',
+            type: 'delete',
+            id: props.entryId,
+            contentTypeId: get(entry, 'sys.contentType.sys.id')
+        });
+    };
+    React.useEffect(()=>{
+        if (entry) {
+            props.onAction && props.onAction({
+                type: 'rendered',
+                entity: 'Entry'
+            });
+        }
+    }, [
+        entry
+    ]);
+    return React.useMemo(()=>{
+        if (status === 'error') {
+            const card = React.createElement(MissingEntityCard, {
+                entityType: "Entry",
+                isDisabled: props.isDisabled,
+                onRemove: onRemoveEntry
+            });
+            if (props.renderCustomMissingEntityCard) {
+                return props.renderCustomMissingEntityCard({
+                    defaultCard: card,
+                    entity: {
+                        id: props.entryId,
+                        type: 'Entry'
+                    }
+                });
+            }
+            return card;
+        }
+        if (status === 'loading') {
+            return React.createElement(EntryCard, {
+                size: size,
+                isLoading: true
+            });
+        }
+        const sharedCardProps = {
+            index: props.index,
+            entity: entry,
+            entityUrl: props.getEntityUrl && props.getEntityUrl(entry.sys.id),
+            contentType: props.allContentTypes.find((contentType)=>contentType.sys.id === entry.sys.contentType.sys.id),
+            isDisabled: props.isDisabled,
+            size,
+            localeCode: props.sdk.field.locale,
+            defaultLocaleCode: props.sdk.locales.default,
+            renderDragHandle: props.renderDragHandle,
+            onEdit,
+            onRemove: onRemoveEntry,
+            onMoveTop: props.onMoveTop,
+            onMoveBottom: props.onMoveBottom,
+            isBeingDragged: props.isBeingDragged
+        };
+        const { hasCardEditActions , hasCardMoveActions , hasCardRemoveActions  } = props;
+        function renderDefaultCard(props) {
+            const builtinCardProps = {
+                ...sharedCardProps,
+                ...props,
+                hasCardEditActions,
+                hasCardMoveActions,
+                hasCardRemoveActions,
+                getAsset,
+                getEntityScheduledActions: loadEntityScheduledActions,
+                entry: (props?.entity) || sharedCardProps.entity,
+                entryUrl: props?.entityUrl || sharedCardProps.entityUrl
+            };
+            return React.createElement(WrappedEntryCard, builtinCardProps);
+        }
+        if (props.renderCustomCard) {
+            const renderedCustomCard = props.renderCustomCard(sharedCardProps, {}, renderDefaultCard);
+            if (renderedCustomCard !== false) {
+                return renderedCustomCard;
+            }
+        }
+        return renderDefaultCard();
+    }, [
+        props,
+        status,
+        entry
+    ]);
+}