mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 23:37:21 +03:00
Expandable list remove anchor (#5559)
Deprecate anchorElement on ExpandableList to avoid props drilling. The anchorElement should be the ExpandableList container itself
This commit is contained in:
parent
7f7ea59b51
commit
82ec30c957
@ -104,12 +104,7 @@ export const CalendarEventParticipantsResponseStatusField = ({
|
||||
</StyledLabelAndIconContainer>
|
||||
<StyledDiv ref={participantsContainerRef}>
|
||||
{isRightDrawerAnimationCompleted && (
|
||||
<ExpandableList
|
||||
anchorElement={participantsContainerRef.current || undefined}
|
||||
isChipCountDisplayed
|
||||
>
|
||||
{styledChips}
|
||||
</ExpandableList>
|
||||
<ExpandableList isChipCountDisplayed>{styledChips}</ExpandableList>
|
||||
)}
|
||||
</StyledDiv>
|
||||
</StyledInlineCellBaseContainer>
|
||||
|
@ -6,7 +6,6 @@ import { ExpandableList } from '@/ui/layout/expandable-list/components/Expandabl
|
||||
|
||||
type ActivityTargetChipsProps = {
|
||||
activityTargetObjectRecords: ActivityTargetWithTargetRecord[];
|
||||
anchorElement?: HTMLElement;
|
||||
maxWidth?: number;
|
||||
};
|
||||
|
||||
@ -19,12 +18,11 @@ const StyledContainer = styled.div<{ maxWidth?: number }>`
|
||||
|
||||
export const ActivityTargetChips = ({
|
||||
activityTargetObjectRecords,
|
||||
anchorElement,
|
||||
maxWidth,
|
||||
}: ActivityTargetChipsProps) => {
|
||||
return (
|
||||
<StyledContainer maxWidth={maxWidth}>
|
||||
<ExpandableList anchorElement={anchorElement} isChipCountDisplayed>
|
||||
<ExpandableList isChipCountDisplayed>
|
||||
{activityTargetObjectRecords.map(
|
||||
(activityTargetObjectRecord, index) => (
|
||||
<RecordChip
|
||||
|
@ -53,9 +53,8 @@ export const ActivityTargetsInlineCell = ({
|
||||
/>
|
||||
}
|
||||
label="Relations"
|
||||
displayModeContent={({ cellElement }) => (
|
||||
displayModeContent={() => (
|
||||
<ActivityTargetChips
|
||||
anchorElement={cellElement}
|
||||
activityTargetObjectRecords={activityTargetObjectRecords}
|
||||
maxWidth={maxWidth}
|
||||
/>
|
||||
|
@ -80,7 +80,6 @@ export const FieldDisplay = ({
|
||||
) : isFieldLinks(fieldDefinition) ? (
|
||||
<LinksFieldDisplay
|
||||
isCellSoftFocused={isCellSoftFocused}
|
||||
cellElement={cellElement}
|
||||
fromTableCell={fromTableCell}
|
||||
/>
|
||||
) : isFieldCurrency(fieldDefinition) ? (
|
||||
|
@ -3,13 +3,11 @@ import { LinksDisplay } from '@/ui/field/display/components/LinksDisplay';
|
||||
|
||||
type LinksFieldDisplayProps = {
|
||||
isCellSoftFocused?: boolean;
|
||||
cellElement?: HTMLElement;
|
||||
fromTableCell?: boolean;
|
||||
};
|
||||
|
||||
export const LinksFieldDisplay = ({
|
||||
isCellSoftFocused,
|
||||
cellElement,
|
||||
fromTableCell,
|
||||
}: LinksFieldDisplayProps) => {
|
||||
const { fieldValue } = useLinksField();
|
||||
@ -17,7 +15,6 @@ export const LinksFieldDisplay = ({
|
||||
return (
|
||||
<LinksDisplay
|
||||
value={fieldValue}
|
||||
anchorElement={cellElement}
|
||||
isChipCountDisplayed={isCellSoftFocused}
|
||||
withExpandedListBorder={fromTableCell}
|
||||
/>
|
||||
|
@ -11,7 +11,6 @@ type MultiSelectFieldDisplayProps = {
|
||||
|
||||
export const MultiSelectFieldDisplay = ({
|
||||
isCellSoftFocused,
|
||||
cellElement,
|
||||
fromTableCell,
|
||||
}: MultiSelectFieldDisplayProps) => {
|
||||
const { fieldValues, fieldDefinition } = useMultiSelectField();
|
||||
@ -26,7 +25,6 @@ export const MultiSelectFieldDisplay = ({
|
||||
|
||||
return (
|
||||
<ExpandableList
|
||||
anchorElement={cellElement}
|
||||
isChipCountDisplayed={isCellSoftFocused}
|
||||
withExpandedListBorder={fromTableCell}
|
||||
>
|
||||
|
@ -17,13 +17,12 @@ import { getUrlHostName } from '~/utils/url/getUrlHostName';
|
||||
|
||||
type LinksDisplayProps = Pick<
|
||||
ExpandableListProps,
|
||||
'anchorElement' | 'isChipCountDisplayed' | 'withExpandedListBorder'
|
||||
'isChipCountDisplayed' | 'withExpandedListBorder'
|
||||
> & {
|
||||
value?: FieldLinksValue;
|
||||
};
|
||||
|
||||
export const LinksDisplay = ({
|
||||
anchorElement,
|
||||
isChipCountDisplayed,
|
||||
withExpandedListBorder,
|
||||
value,
|
||||
@ -55,7 +54,6 @@ export const LinksDisplay = ({
|
||||
|
||||
return (
|
||||
<ExpandableList
|
||||
anchorElement={anchorElement}
|
||||
isChipCountDisplayed={isChipCountDisplayed}
|
||||
withExpandedListBorder={withExpandedListBorder}
|
||||
>
|
||||
|
@ -41,7 +41,6 @@ const StyledChipCount = styled(Chip)`
|
||||
`;
|
||||
|
||||
export type ExpandableListProps = {
|
||||
anchorElement?: HTMLElement;
|
||||
isChipCountDisplayed?: boolean;
|
||||
withExpandedListBorder?: boolean;
|
||||
};
|
||||
@ -53,7 +52,6 @@ export type ChildrenProperty = {
|
||||
|
||||
export const ExpandableList = ({
|
||||
children,
|
||||
anchorElement,
|
||||
isChipCountDisplayed: isChipCountDisplayedFromProps,
|
||||
withExpandedListBorder = false,
|
||||
}: {
|
||||
@ -75,10 +73,10 @@ export const ExpandableList = ({
|
||||
// @see https://floating-ui.com/docs/useFloating#elements
|
||||
const [childrenContainerElement, setChildrenContainerElement] =
|
||||
useState<HTMLDivElement | null>(null);
|
||||
|
||||
const [previousChildrenContainerWidth, setPreviousChildrenContainerWidth] =
|
||||
useState(childrenContainerElement?.clientWidth ?? 0);
|
||||
|
||||
// Used with useListenClickOutside.
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [firstHiddenChildIndex, setFirstHiddenChildIndex] = useState(
|
||||
@ -165,7 +163,7 @@ export const ExpandableList = ({
|
||||
)}
|
||||
{isListExpanded && (
|
||||
<ExpandedListDropdown
|
||||
anchorElement={anchorElement ?? childrenContainerElement ?? undefined}
|
||||
anchorElement={containerRef.current ?? undefined}
|
||||
onClickOutside={() => {
|
||||
resetFirstHiddenChildIndex();
|
||||
setIsListExpanded(false);
|
||||
|
@ -42,7 +42,7 @@ export const ExpandedListDropdown = ({
|
||||
const { refs, floatingStyles } = useFloating({
|
||||
// @ts-expect-error placement accepts 'start' as value even if the typing does not permit it
|
||||
placement: 'start',
|
||||
middleware: [offset({ mainAxis: -1, crossAxis: -1 })],
|
||||
middleware: [offset({ mainAxis: -9, crossAxis: -7 })],
|
||||
elements: { reference: anchorElement },
|
||||
});
|
||||
|
||||
|
@ -35,7 +35,6 @@ const meta: Meta<typeof ExpandableList> = {
|
||||
},
|
||||
argTypes: {
|
||||
children: { control: false },
|
||||
anchorElement: { control: false },
|
||||
},
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user