diff --git a/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.scss b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.scss new file mode 100644 index 0000000000..0e1341ede9 --- /dev/null +++ b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.scss @@ -0,0 +1,20 @@ +@import '../../../../../scss/styles.scss'; + +.multi-value-label { + display: flex; + + &__drawer-toggler { + background: none; + border: none; + cursor: pointer; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin-left: base(0.25); + + &:hover { + background-color: var(--theme-error-150); + } + } +} diff --git a/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.tsx b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.tsx new file mode 100644 index 0000000000..90dd41f731 --- /dev/null +++ b/src/admin/components/forms/field-types/Relationship/MultiValueLabel/index.tsx @@ -0,0 +1,46 @@ +import React, { Fragment } from 'react'; +import { components, MultiValueProps } from 'react-select'; +import { useDocumentDrawer } from '../../../../elements/DocumentDrawer'; +import Edit from '../../../../icons/Edit'; +import { Value, ValueAsObject } from '../types'; +import './index.scss'; + +const baseClass = 'multi-value-label'; + +export const CustomEditButton: React.FC<{ + data: ValueAsObject; +}> = ({ data }) => { + const { DocumentDrawer, DocumentDrawerToggler } = useDocumentDrawer(); + return ( + + + + + + + ); +}; + +export const MultiValueLabel: React.FC> = (props) => { + const { + data, + } = props; + + return ( +
+ + {typeof data === 'object' && ( + + )} +
+ ); +}; diff --git a/src/admin/components/forms/field-types/Relationship/index.tsx b/src/admin/components/forms/field-types/Relationship/index.tsx index fc04cb1134..0b73feeeec 100644 --- a/src/admin/components/forms/field-types/Relationship/index.tsx +++ b/src/admin/components/forms/field-types/Relationship/index.tsx @@ -23,6 +23,7 @@ import wordBoundariesRegex from '../../../../../utilities/wordBoundariesRegex'; import { AddNewRelation } from './AddNew'; import { findOptionsByValue } from './findOptionsByValue'; import { GetFilterOptions } from './GetFilterOptions'; +import { MultiValueLabel } from './MultiValueLabel'; import './index.scss'; @@ -368,6 +369,9 @@ const Relationship: React.FC = (props) => { isMulti={hasMany} isSortable={isSortable} isLoading={isLoading} + components={{ + MultiValueLabel, + }} onMenuOpen={() => { if (!hasLoadedFirstPage) { setIsLoading(true); diff --git a/src/admin/components/forms/field-types/Relationship/types.ts b/src/admin/components/forms/field-types/Relationship/types.ts index 24f46113ce..ff4e18b89e 100644 --- a/src/admin/components/forms/field-types/Relationship/types.ts +++ b/src/admin/components/forms/field-types/Relationship/types.ts @@ -19,10 +19,12 @@ export type OptionGroup = { options: Option[] } -export type Value = { +export type ValueAsObject = { relationTo: string value: string | number -} | string | number +} + +export type Value = ValueAsObject | string | number type CLEAR = { type: 'CLEAR'