+15
-10
@@ -2,6 +2,7 @@ import { RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID } from '@/object-record/reco
|
||||
import { recordIndexRecordGroupSortComponentState } from '@/object-record/record-index/states/recordIndexRecordGroupSortComponentState';
|
||||
import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { type ReactNode } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
type RecordGroupReorderConfirmationModalProps = {
|
||||
@@ -10,19 +11,23 @@ type RecordGroupReorderConfirmationModalProps = {
|
||||
|
||||
export const RecordGroupReorderConfirmationModal = ({
|
||||
onConfirmClick,
|
||||
}: RecordGroupReorderConfirmationModalProps) => {
|
||||
}: RecordGroupReorderConfirmationModalProps): ReactNode => {
|
||||
const recordGroupSort = useRecoilComponentValue(
|
||||
recordIndexRecordGroupSortComponentState,
|
||||
);
|
||||
|
||||
return createPortal(
|
||||
<ConfirmationModal
|
||||
modalId={RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID}
|
||||
title="Group sorting"
|
||||
subtitle={`Would you like to remove ${recordGroupSort} group sorting?`}
|
||||
onConfirmClick={onConfirmClick}
|
||||
confirmButtonText="Remove"
|
||||
/>,
|
||||
document.body,
|
||||
return (
|
||||
<>
|
||||
{createPortal(
|
||||
<ConfirmationModal
|
||||
modalId={RECORD_GROUP_REORDER_CONFIRMATION_MODAL_ID}
|
||||
title="Group sorting"
|
||||
subtitle={`Would you like to remove ${recordGroupSort} group sorting?`}
|
||||
onConfirmClick={onConfirmClick}
|
||||
confirmButtonText="Remove"
|
||||
/>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
+13
-11
@@ -92,17 +92,19 @@ export const RecordInlineCellEditMode = ({
|
||||
ref={refs.setReference}
|
||||
data-testid="inline-cell-edit-mode-container"
|
||||
>
|
||||
{createPortal(
|
||||
<OverlayContainer
|
||||
ref={refs.setFloating}
|
||||
style={floatingStyles}
|
||||
borderRadius="sm"
|
||||
hasDangerBorder={isFieldInError}
|
||||
>
|
||||
{children}
|
||||
</OverlayContainer>,
|
||||
document.body,
|
||||
)}
|
||||
<>
|
||||
{createPortal(
|
||||
<OverlayContainer
|
||||
ref={refs.setFloating}
|
||||
style={floatingStyles}
|
||||
borderRadius="sm"
|
||||
hasDangerBorder={isFieldInError}
|
||||
>
|
||||
{children}
|
||||
</OverlayContainer>,
|
||||
document.body,
|
||||
)}
|
||||
</>
|
||||
</StyledInlineCellEditModeContainer>
|
||||
);
|
||||
};
|
||||
|
||||
+31
-27
@@ -8,7 +8,7 @@ import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { type TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { isDefined } from 'twenty-shared/utils';
|
||||
|
||||
export const RecordTableCellPortalWrapper = ({
|
||||
@@ -43,32 +43,36 @@ export const RecordTableCellPortalWrapper = ({
|
||||
return null;
|
||||
}
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<RecordTableRowContextProvider
|
||||
value={{
|
||||
recordId,
|
||||
rowIndex: position.row,
|
||||
isSelected: false,
|
||||
inView: true,
|
||||
pathToShowPage:
|
||||
getBasePathToShowPage({
|
||||
return (
|
||||
<>
|
||||
{createPortal(
|
||||
<RecordTableRowContextProvider
|
||||
value={{
|
||||
recordId,
|
||||
rowIndex: position.row,
|
||||
isSelected: false,
|
||||
inView: true,
|
||||
pathToShowPage:
|
||||
getBasePathToShowPage({
|
||||
objectNameSingular: objectMetadataItem.nameSingular,
|
||||
}) + recordId,
|
||||
objectNameSingular: objectMetadataItem.nameSingular,
|
||||
}) + recordId,
|
||||
objectNameSingular: objectMetadataItem.nameSingular,
|
||||
isRecordReadOnly,
|
||||
}}
|
||||
>
|
||||
<RecordTableCellContext.Provider
|
||||
value={{
|
||||
columnDefinition: visibleTableColumns[position.column],
|
||||
cellPosition: position,
|
||||
}}
|
||||
>
|
||||
<RecordTableCellFieldContextWrapper>
|
||||
{children}
|
||||
</RecordTableCellFieldContextWrapper>
|
||||
</RecordTableCellContext.Provider>
|
||||
</RecordTableRowContextProvider>,
|
||||
anchorElement,
|
||||
isRecordReadOnly,
|
||||
}}
|
||||
>
|
||||
<RecordTableCellContext.Provider
|
||||
value={{
|
||||
columnDefinition: visibleTableColumns[position.column],
|
||||
cellPosition: position,
|
||||
}}
|
||||
>
|
||||
<RecordTableCellFieldContextWrapper>
|
||||
{children}
|
||||
</RecordTableCellFieldContextWrapper>
|
||||
</RecordTableCellContext.Provider>
|
||||
</RecordTableRowContextProvider>,
|
||||
anchorElement,
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user