Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow MultipleEntryReferenceEditor to render children prop #1662

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/reference/src/common/ReferenceEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { FieldConnector } from '@contentful/field-editor-shared';
import deepEqual from 'deep-equal';

import type { LinkActionsProps } from '../components';
import { WrappedEntryCardProps } from '../entries/WrappedEntryCard/WrappedEntryCard';
import { Action, ActionLabels, FieldAppSDK, ViewType } from '../types';
import { CustomCardRenderer, RenderCustomMissingEntityCard } from './customCardTypes';
import { EntityProvider } from './EntityStore';
Expand All @@ -24,6 +25,7 @@ export interface ReferenceEditorProps {
renderCustomCard?: CustomCardRenderer;
renderCustomActions?: (props: CustomActionProps) => React.ReactElement;
renderCustomMissingEntityCard?: RenderCustomMissingEntityCard;
renderCustomChildren?: (props: WrappedEntryCardProps) => React.ReactNode;
getEntityUrl?: (entryId: string) => string;
onAction?: (action: Action) => void;
actionLabels?: Partial<ActionLabels>;
Expand Down
2 changes: 2 additions & 0 deletions packages/reference/src/common/customCardTypes.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';

import { WrappedEntryCardProps } from '../entries/WrappedEntryCard/WrappedEntryCard';
import { Asset, ContentType, Entry, RenderDragFn } from '../types';
import { CustomActionProps } from './ReferenceEditor';

Expand Down Expand Up @@ -34,6 +35,7 @@ export type CustomEntityCardProps = {
isDisabled: boolean;
size: 'default' | 'small';
renderDragHandle?: RenderDragFn;
renderCustomChildren?: (props: WrappedEntryCardProps) => React.ReactNode;
onEdit?: () => void;
onRemove?: () => void;
onMoveTop?: () => void;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export function FetchingWrappedEntryCard(props: EntryCardReferenceEditorProps) {
localeCode: props.sdk.field.locale,
defaultLocaleCode: props.sdk.locales.default,
renderDragHandle: props.renderDragHandle,
renderCustomChildren: props.renderCustomChildren,
onEdit,
onRemove: onRemoveEntry,
onMoveTop: props.onMoveTop,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export interface WrappedEntryCardProps {
spaceName?: string;
entry: Entry;
renderDragHandle?: RenderDragFn;
renderCustomChildren?: (props: WrappedEntryCardProps) => React.ReactNode;
isClickable?: boolean;
onMoveTop?: () => void;
onMoveBottom?: () => void;
Expand Down Expand Up @@ -106,6 +107,8 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) {
defaultLocaleCode: props.defaultLocaleCode,
});

const customChildren = !!props.renderCustomChildren && props.renderCustomChildren(props);

return (
<EntryCard
as={props.entryUrl ? 'a' : 'article'}
Expand Down Expand Up @@ -202,7 +205,9 @@ export function WrappedEntryCard(props: WrappedEntryCardProps) {
}
: undefined
}
/>
>
{customChildren}
</EntryCard>
);
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ Same applies to **onLinkExisting** property that can be overriden to customize t

<Story of={EditorStories.CustomCardRelyingOnDefaultCard} />

## With custom children prop

<Story of={EditorStories.CustomChildren} />

## Props

<Controls />
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ export const CustomCardRelyingOnDefaultCard: Story = {
};
const [sdk, mitt] = newReferenceEditorFakeSdk();
return (
<div data-test-id="multiple-references-editor-custom-cards-with-default-integration-test">
<div data-test-id="multiple-references-editor-custom-children-test">
<MultipleEntryReferenceEditor
hasCardEditActions={false}
renderCustomCard={(props, _, renderDefaultCard) => {
Expand All @@ -250,3 +250,37 @@ export const CustomCardRelyingOnDefaultCard: Story = {
);
},
};

export const CustomChildren: Story = {
parameters: {
controls: { hideNoControlsWarning: true },
},
render: () => {
const isInitiallyDisabled = !!window.localStorage.getItem('initialDisabled');
const instanceParams = JSON.parse(window.localStorage.getItem('instanceParams') as string) as {
showCreateEntityAction: boolean;
showLinkEntityAction: boolean;
};
const [sdk, mitt] = newReferenceEditorFakeSdk();

return (
<div data-test-id="multiple-references-editor-custom-cards-with-default-integration-test">
<MultipleEntryReferenceEditor
renderCustomChildren={() => {
return <>Some custom children. Anything can be rendered here!</>;
}}
viewType="link"
sdk={sdk}
isInitiallyDisabled={isInitiallyDisabled}
parameters={{
instance: instanceParams || {
showCreateEntityAction: true,
showLinkEntityAction: true,
},
}}
/>
<ActionsPlayground mitt={mitt} />
</div>
);
},
};