mirror of
https://github.com/twentyhq/twenty.git
synced 2024-12-23 12:02:10 +03:00
feat: use new component state api for record table (#8143)
This PR drop the use of the old component state api in favour of the new component state api V2.
This commit is contained in:
parent
740ca550cc
commit
258fd07839
@ -8,7 +8,7 @@ export const actionMenuEntriesComponentSelector = createComponentSelectorV2<
|
||||
ActionMenuEntry[]
|
||||
>({
|
||||
key: 'actionMenuEntriesComponentSelector',
|
||||
instanceContext: ActionMenuComponentInstanceContext,
|
||||
componentInstanceContext: ActionMenuComponentInstanceContext,
|
||||
get:
|
||||
({ instanceId }) =>
|
||||
({ get }) =>
|
||||
|
@ -18,7 +18,7 @@ describe('formatTimeZoneLabel', () => {
|
||||
|
||||
it('should format the time zone label correctly when location is not included in the label', () => {
|
||||
const ianaTimeZone = 'America/New_York';
|
||||
const expectedLabel = '(GMT-04:00) Eastern Daylight Time - New York';
|
||||
const expectedLabel = '(GMT-05:00) Eastern Standard Time - New York';
|
||||
|
||||
const formattedLabel = formatTimeZoneLabel(ianaTimeZone);
|
||||
|
||||
|
@ -4,8 +4,7 @@ import { ReactNode } from 'react';
|
||||
|
||||
import { mocks } from '@/auth/hooks/__mocks__/useAuth';
|
||||
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
|
||||
|
||||
const recordTableId = 'people';
|
||||
@ -24,12 +23,12 @@ const Wrapper = ({ children }: { children: ReactNode }) => {
|
||||
return (
|
||||
<HookMockWrapper>
|
||||
<ObjectNamePluralSetter>
|
||||
<RecordTableScope
|
||||
recordTableScopeId={getScopeIdFromComponentId(recordTableId)}
|
||||
<RecordTableComponentInstance
|
||||
recordTableId={recordTableId}
|
||||
onColumnsChange={onColumnsChange}
|
||||
>
|
||||
{children}
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</ObjectNamePluralSetter>
|
||||
</HookMockWrapper>
|
||||
);
|
||||
|
@ -1,5 +1,4 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useContext } from 'react';
|
||||
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
|
||||
@ -11,7 +10,8 @@ import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/
|
||||
import { useSelectFilter } from '@/object-record/object-filter-dropdown/hooks/useSelectFilter';
|
||||
import { FiltersHotkeyScope } from '@/object-record/object-filter-dropdown/types/FiltersHotkeyScope';
|
||||
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
|
||||
import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
|
||||
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
|
||||
@ -21,6 +21,7 @@ import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/
|
||||
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
|
||||
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
|
||||
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
import { useContext } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isDefined } from 'twenty-ui';
|
||||
|
||||
@ -57,6 +58,8 @@ type ObjectFilterDropdownFilterSelectProps = {
|
||||
export const ObjectFilterDropdownFilterSelect = ({
|
||||
isAdvancedFilterButtonVisible,
|
||||
}: ObjectFilterDropdownFilterSelectProps) => {
|
||||
const { recordIndexId } = useContext(RecordIndexRootPropsContext);
|
||||
|
||||
const {
|
||||
setObjectFilterDropdownSearchInput,
|
||||
objectFilterDropdownSearchInputState,
|
||||
@ -78,15 +81,18 @@ export const ObjectFilterDropdownFilterSelect = ({
|
||||
const availableFilterDefinitions = useRecoilComponentValueV2(
|
||||
availableFilterDefinitionsComponentState,
|
||||
);
|
||||
const { recordIndexId } = useContext(RecordIndexRootPropsContext);
|
||||
const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
|
||||
useRecordTableStates(recordIndexId);
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
recordIndexId,
|
||||
);
|
||||
const visibleColumnsIds = visibleTableColumns.map(
|
||||
(column) => column.fieldMetadataId,
|
||||
);
|
||||
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
|
||||
const hiddenTableColumns = useRecoilComponentValueV2(
|
||||
hiddenTableColumnsComponentSelector,
|
||||
recordIndexId,
|
||||
);
|
||||
const hiddenColumnIds = hiddenTableColumns.map(
|
||||
(column) => column.fieldMetadataId,
|
||||
);
|
||||
|
@ -4,14 +4,13 @@ import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
|
||||
import { MultipleFiltersDropdownButton } from '@/object-record/object-filter-dropdown/components/MultipleFiltersDropdownButton';
|
||||
import { ObjectFilterDropdownScope } from '@/object-record/object-filter-dropdown/scopes/ObjectFilterDropdownScope';
|
||||
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
|
||||
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
|
||||
import { within } from '@storybook/test';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
import { FieldMetadataType } from '~/generated/graphql';
|
||||
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
|
||||
@ -30,9 +29,10 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
|
||||
instanceId,
|
||||
);
|
||||
|
||||
const { tableColumnsState } = useRecordTableStates(instanceId);
|
||||
|
||||
const setTableColumns = useSetRecoilState(tableColumnsState);
|
||||
const setTableColumns = useSetRecoilComponentStateV2(
|
||||
tableColumnsComponentState,
|
||||
instanceId,
|
||||
);
|
||||
|
||||
setTableColumns([
|
||||
{
|
||||
@ -91,15 +91,15 @@ const meta: Meta<typeof MultipleFiltersDropdownButton> = {
|
||||
<ObjectFilterDropdownComponentInstanceContext.Provider
|
||||
value={{ instanceId }}
|
||||
>
|
||||
<RecordTableScopeInternalContext.Provider
|
||||
value={{ scopeId: instanceId, onColumnsChange: () => {} }}
|
||||
<RecordTableComponentInstanceContext.Provider
|
||||
value={{ instanceId: instanceId, onColumnsChange: () => {} }}
|
||||
>
|
||||
<ViewComponentInstanceContext.Provider value={{ instanceId }}>
|
||||
<ObjectFilterDropdownScope filterScopeId={instanceId}>
|
||||
<Story />
|
||||
</ObjectFilterDropdownScope>
|
||||
</ViewComponentInstanceContext.Provider>
|
||||
</RecordTableScopeInternalContext.Provider>
|
||||
</RecordTableComponentInstanceContext.Provider>
|
||||
</ObjectFilterDropdownComponentInstanceContext.Provider>
|
||||
);
|
||||
},
|
||||
|
@ -6,7 +6,8 @@ import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/co
|
||||
import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown';
|
||||
import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
|
||||
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
||||
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
@ -15,6 +16,7 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/Styl
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
|
||||
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
||||
import { useContext } from 'react';
|
||||
import { SORT_DIRECTIONS } from '../types/SortDirection';
|
||||
@ -77,6 +79,8 @@ export const ObjectSortDropdownButton = ({
|
||||
resetSearchInput,
|
||||
} = useObjectSortDropdown();
|
||||
|
||||
const { recordIndexId } = useContext(RecordIndexRootPropsContext);
|
||||
|
||||
const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
|
||||
|
||||
const handleButtonClick = () => {
|
||||
@ -94,15 +98,17 @@ export const ObjectSortDropdownButton = ({
|
||||
|
||||
const { getIcon } = useIcons();
|
||||
|
||||
const { recordIndexId } = useContext(RecordIndexRootPropsContext);
|
||||
const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
|
||||
useRecordTableStates(recordIndexId);
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
recordIndexId,
|
||||
);
|
||||
const visibleColumnsIds = visibleTableColumns.map(
|
||||
(column) => column.fieldMetadataId,
|
||||
);
|
||||
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
|
||||
const hiddenTableColumns = useRecoilComponentValueV2(
|
||||
hiddenTableColumnsComponentSelector,
|
||||
recordIndexId,
|
||||
);
|
||||
const hiddenColumnIds = hiddenTableColumns.map(
|
||||
(column) => column.fieldMetadataId,
|
||||
);
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { useContext, useEffect } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
|
||||
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
|
||||
@ -9,8 +8,13 @@ import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/
|
||||
import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort';
|
||||
import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
|
||||
import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
|
||||
import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { useSetRecordCountInCurrentView } from '@/views/hooks/useSetRecordCountInCurrentView';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
export const RecordIndexTableContainerEffect = () => {
|
||||
const { recordIndexId, objectNameSingular } = useContext(
|
||||
@ -22,11 +26,8 @@ export const RecordIndexTableContainerEffect = () => {
|
||||
const {
|
||||
setAvailableTableColumns,
|
||||
setOnEntityCountChange,
|
||||
selectedRowIdsSelector,
|
||||
setOnToggleColumnFilter,
|
||||
setOnToggleColumnSort,
|
||||
hasUserSelectedAllRowsState,
|
||||
unselectedRowIdsSelector,
|
||||
} = useRecordTable({
|
||||
recordTableId: recordIndexId,
|
||||
});
|
||||
@ -78,9 +79,18 @@ export const RecordIndexTableContainerEffect = () => {
|
||||
const setContextStoreTargetedRecords = useSetRecoilComponentStateV2(
|
||||
contextStoreTargetedRecordsRuleComponentState,
|
||||
);
|
||||
const hasUserSelectedAllRows = useRecoilValue(hasUserSelectedAllRowsState);
|
||||
const selectedRowIds = useRecoilValue(selectedRowIdsSelector());
|
||||
const unselectedRowIds = useRecoilValue(unselectedRowIdsSelector());
|
||||
const hasUserSelectedAllRows = useRecoilComponentValueV2(
|
||||
hasUserSelectedAllRowsComponentState,
|
||||
recordIndexId,
|
||||
);
|
||||
const selectedRowIds = useRecoilComponentValueV2(
|
||||
selectedRowIdsComponentSelector,
|
||||
recordIndexId,
|
||||
);
|
||||
const unselectedRowIds = useRecoilComponentValueV2(
|
||||
unselectedRowIdsComponentSelector,
|
||||
recordIndexId,
|
||||
);
|
||||
|
||||
const recordIndexFilters = useRecoilValue(recordIndexFiltersState);
|
||||
|
||||
|
@ -5,7 +5,8 @@ import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/u
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
|
||||
import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useUpsertCombinedViewFilters } from '@/views/hooks/useUpsertCombinedViewFilters';
|
||||
import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
@ -28,7 +29,12 @@ export const useHandleToggleTrashColumnFilter = ({
|
||||
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
|
||||
|
||||
const { upsertCombinedViewFilter } = useUpsertCombinedViewFilters(viewBarId);
|
||||
const { isSoftDeleteActiveState } = useRecordTableStates(viewBarId);
|
||||
|
||||
const isSoftDeleteFilterActiveComponentRecoilState =
|
||||
useRecoilComponentCallbackStateV2(
|
||||
isSoftDeleteFilterActiveComponentState,
|
||||
viewBarId,
|
||||
);
|
||||
|
||||
const handleToggleTrashColumnFilter = useCallback(() => {
|
||||
const trashFieldMetadata = objectMetadataItem.fields.find(
|
||||
@ -69,9 +75,9 @@ export const useHandleToggleTrashColumnFilter = ({
|
||||
const toggleSoftDeleteFilterState = useRecoilCallback(
|
||||
({ set }) =>
|
||||
(currentState: boolean) => {
|
||||
set(isSoftDeleteActiveState, currentState);
|
||||
set(isSoftDeleteFilterActiveComponentRecoilState, currentState);
|
||||
},
|
||||
[isSoftDeleteActiveState],
|
||||
[isSoftDeleteFilterActiveComponentRecoilState],
|
||||
);
|
||||
return {
|
||||
handleToggleTrashColumnFilter,
|
||||
|
@ -7,9 +7,12 @@ import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
|
||||
import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
|
||||
import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
|
||||
import { useRecordTableRecordGqlFields } from '@/object-record/record-index/hooks/useRecordTableRecordGqlFields';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
|
||||
import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
|
||||
import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
|
||||
import { SIGN_IN_BACKGROUND_MOCK_COMPANIES } from '@/sign-in-background-mock/constants/SignInBackgroundMockCompanies';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { isNull } from '@sniptt/guards';
|
||||
import { WorkspaceActivationStatus } from '~/generated/graphql';
|
||||
|
||||
@ -21,12 +24,18 @@ export const useFindManyParams = (
|
||||
objectNameSingular,
|
||||
});
|
||||
|
||||
const { tableFiltersState, tableSortsState, tableViewFilterGroupsState } =
|
||||
useRecordTableStates(recordTableId);
|
||||
|
||||
const tableViewFilterGroups = useRecoilValue(tableViewFilterGroupsState);
|
||||
const tableFilters = useRecoilValue(tableFiltersState);
|
||||
const tableSorts = useRecoilValue(tableSortsState);
|
||||
const tableViewFilterGroups = useRecoilComponentValueV2(
|
||||
tableViewFilterGroupsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const tableFilters = useRecoilComponentValueV2(
|
||||
tableFiltersComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const tableSorts = useRecoilComponentValueV2(
|
||||
tableSortsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const filter = computeViewRecordGqlOperationFilter(
|
||||
tableFilters,
|
||||
|
@ -1,11 +1,10 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
|
||||
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
|
||||
import { getObjectMetadataIdentifierFields } from '@/object-metadata/utils/getObjectMetadataIdentifierFields';
|
||||
import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
export const useRecordTableRecordGqlFields = ({
|
||||
@ -13,12 +12,12 @@ export const useRecordTableRecordGqlFields = ({
|
||||
}: {
|
||||
objectMetadataItem: ObjectMetadataItem;
|
||||
}) => {
|
||||
const { visibleTableColumnsSelector } = useRecordTableStates();
|
||||
|
||||
const { imageIdentifierFieldMetadataItem, labelIdentifierFieldMetadataItem } =
|
||||
getObjectMetadataIdentifierFields({ objectMetadataItem });
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
const identifierQueryFields: Record<string, boolean> = {};
|
||||
|
||||
|
@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
@ -15,6 +14,7 @@ import { useRecordBoardStates } from '@/object-record/record-board/hooks/interna
|
||||
import { useFindManyParams } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
|
||||
import { EXPORT_TABLE_DATA_DEFAULT_PAGE_SIZE } from '@/object-record/record-index/options/constants/ExportTableDataDefaultPageSize';
|
||||
import { useRecordIndexOptionsForBoard } from '@/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { ViewType } from '@/views/types/ViewType';
|
||||
|
||||
@ -61,8 +61,6 @@ export const useRecordData = ({
|
||||
});
|
||||
const [previousRecordCount, setPreviousRecordCount] = useState(0);
|
||||
|
||||
const { visibleTableColumnsSelector } = useRecordTableStates(recordIndexId);
|
||||
|
||||
const { hiddenBoardFields } = useRecordIndexOptionsForBoard({
|
||||
objectNameSingular: objectMetadataItem.nameSingular,
|
||||
recordBoardId: recordIndexId,
|
||||
@ -74,7 +72,10 @@ export const useRecordData = ({
|
||||
const hiddenKanbanFieldColumn = hiddenBoardFields.find(
|
||||
(column) => column.metadata.fieldName === kanbanFieldMetadataName,
|
||||
);
|
||||
const columns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const columns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
recordIndexId,
|
||||
);
|
||||
|
||||
const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
|
||||
contextStoreTargetedRecordsRuleComponentState,
|
||||
|
@ -1,17 +1,21 @@
|
||||
import { useCallback } from 'react';
|
||||
import { OnDragEndResponder } from '@hello-pangea/dnd';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
|
||||
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { moveArrayItem } from '~/utils/array/moveArrayItem';
|
||||
|
||||
export const useRecordIndexOptionsForTable = (recordTableId: string) => {
|
||||
const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
|
||||
useRecordTableStates(recordTableId);
|
||||
|
||||
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const hiddenTableColumns = useRecoilComponentValueV2(
|
||||
hiddenTableColumnsComponentSelector,
|
||||
recordTableId,
|
||||
);
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const { handleColumnVisibilityChange, handleColumnReorder } = useTableColumns(
|
||||
{ recordTableId: recordTableId },
|
||||
|
@ -1,14 +1,16 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { isNonEmptyString, isNull } from '@sniptt/guards';
|
||||
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableContextProvider } from '@/object-record/record-table/components/RecordTableContextProvider';
|
||||
import { RecordTableEmptyState } from '@/object-record/record-table/empty-state/components/RecordTableEmptyState';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
|
||||
import { RecordTableBodyEffect } from '@/object-record/record-table/record-table-body/components/RecordTableBodyEffect';
|
||||
import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
|
||||
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
const StyledTable = styled.table`
|
||||
border-radius: ${({ theme }) => theme.border.radius.sm};
|
||||
@ -30,21 +32,20 @@ export const RecordTable = ({
|
||||
objectNameSingular,
|
||||
onColumnsChange,
|
||||
}: RecordTableProps) => {
|
||||
const { scopeId } = useRecordTableStates(recordTableId);
|
||||
|
||||
const {
|
||||
isRecordTableInitialLoadingState,
|
||||
tableRowIdsState,
|
||||
pendingRecordIdState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
|
||||
const isRecordTableInitialLoading = useRecoilValue(
|
||||
isRecordTableInitialLoadingState,
|
||||
const isRecordTableInitialLoading = useRecoilComponentValueV2(
|
||||
isRecordTableInitialLoadingComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const tableRowIds = useRecoilValue(tableRowIdsState);
|
||||
const tableRowIds = useRecoilComponentValueV2(
|
||||
tableRowIdsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const pendingRecordId = useRecoilValue(pendingRecordIdState);
|
||||
const pendingRecordId = useRecoilComponentValueV2(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const recordTableIsEmpty =
|
||||
!isRecordTableInitialLoading &&
|
||||
@ -56,8 +57,8 @@ export const RecordTable = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<RecordTableScope
|
||||
recordTableScopeId={scopeId}
|
||||
<RecordTableComponentInstance
|
||||
recordTableId={recordTableId}
|
||||
onColumnsChange={onColumnsChange}
|
||||
>
|
||||
<RecordTableContextProvider
|
||||
@ -77,6 +78,6 @@ export const RecordTable = ({
|
||||
</StyledTable>
|
||||
)}
|
||||
</RecordTableContextProvider>
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
);
|
||||
};
|
||||
|
@ -0,0 +1,31 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
|
||||
import { RecordTableComponentInstanceEffect } from '@/object-record/record-table/components/RecordTableComponentInstanceEffect';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
|
||||
type RecordTableComponentInstanceProps = {
|
||||
children: ReactNode;
|
||||
recordTableId: string;
|
||||
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
|
||||
};
|
||||
|
||||
export const RecordTableComponentInstance = ({
|
||||
children,
|
||||
recordTableId,
|
||||
onColumnsChange,
|
||||
}: RecordTableComponentInstanceProps) => {
|
||||
return (
|
||||
<RecordTableComponentInstanceContext.Provider
|
||||
value={{
|
||||
instanceId: recordTableId,
|
||||
onColumnsChange,
|
||||
}}
|
||||
>
|
||||
<RecordTableComponentInstanceEffect onColumnsChange={onColumnsChange} />
|
||||
{children}
|
||||
</RecordTableComponentInstanceContext.Provider>
|
||||
);
|
||||
};
|
@ -4,14 +4,14 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
|
||||
type RecordTableScopeInitEffectProps = {
|
||||
type RecordTableComponentInstanceEffectProps = {
|
||||
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
|
||||
onEntityCountChange?: (count: number) => void | Promise<void>;
|
||||
};
|
||||
|
||||
export const RecordTableScopeInitEffect = ({
|
||||
export const RecordTableComponentInstanceEffect = ({
|
||||
onColumnsChange,
|
||||
}: RecordTableScopeInitEffectProps) => {
|
||||
}: RecordTableComponentInstanceEffectProps) => {
|
||||
const { setOnColumnsChange } = useRecordTable();
|
||||
|
||||
useEffect(() => {
|
@ -1,10 +1,8 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { useHandleContainerMouseEnter } from '@/object-record/record-table/hooks/internal/useHandleContainerMouseEnter';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
|
||||
import { useCloseRecordTableCellV2 } from '@/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCellV2';
|
||||
import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
|
||||
@ -14,8 +12,10 @@ import {
|
||||
} from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
|
||||
import { useTriggerActionMenuDropdown } from '@/object-record/record-table/record-table-cell/hooks/useTriggerActionMenuDropdown';
|
||||
import { useUpsertRecord } from '@/object-record/record-table/record-table-cell/hooks/useUpsertRecord';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
|
||||
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTableContextProvider = ({
|
||||
viewBarId,
|
||||
@ -28,14 +28,13 @@ export const RecordTableContextProvider = ({
|
||||
objectNameSingular: string;
|
||||
children: ReactNode;
|
||||
}) => {
|
||||
const { visibleTableColumnsSelector } = useRecordTableStates(recordTableId);
|
||||
|
||||
const { objectMetadataItem } = useObjectMetadataItem({
|
||||
objectNameSingular,
|
||||
});
|
||||
|
||||
const { upsertRecord } = useUpsertRecord({
|
||||
objectNameSingular,
|
||||
recordTableId,
|
||||
});
|
||||
|
||||
const handleUpsertRecord = ({
|
||||
@ -47,7 +46,7 @@ export const RecordTableContextProvider = ({
|
||||
recordId: string;
|
||||
fieldName: string;
|
||||
}) => {
|
||||
upsertRecord(persistField, recordId, fieldName, recordTableId);
|
||||
upsertRecord(persistField, recordId, fieldName);
|
||||
};
|
||||
|
||||
const { openTableCell } = useOpenRecordTableCellV2(recordTableId);
|
||||
@ -90,7 +89,10 @@ export const RecordTableContextProvider = ({
|
||||
recordTableId,
|
||||
});
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return (
|
||||
<RecordTableContext.Provider
|
||||
|
@ -1,13 +1,10 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
|
||||
import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTableRows = () => {
|
||||
const { tableRowIdsState } = useRecordTableStates();
|
||||
|
||||
const tableRowIds = useRecoilValue(tableRowIdsState);
|
||||
const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -12,10 +12,10 @@ import {
|
||||
useSetRecordValue,
|
||||
} from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
|
||||
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
|
||||
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { ChipGeneratorsDecorator } from '~/testing/decorators/ChipGeneratorsDecorator';
|
||||
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
|
||||
import { getProfilingStory } from '~/testing/profiling/utils/getProfilingStory';
|
||||
@ -78,8 +78,8 @@ const meta: Meta = {
|
||||
recordTableId: 'recordTableId',
|
||||
}}
|
||||
>
|
||||
<RecordTableScope
|
||||
recordTableScopeId="asd"
|
||||
<RecordTableComponentInstance
|
||||
recordTableId="asd"
|
||||
onColumnsChange={() => {}}
|
||||
>
|
||||
<RecordTableRowContext.Provider
|
||||
@ -132,7 +132,7 @@ const meta: Meta = {
|
||||
</FieldContext.Provider>
|
||||
</RecordTableCellContext.Provider>
|
||||
</RecordTableRowContext.Provider>
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</RecordTableContext.Provider>
|
||||
</RecordFieldValueSelectorContextProvider>
|
||||
);
|
||||
|
@ -4,22 +4,23 @@ import { RecordTableEmptyStateNoRecordAtAll } from '@/object-record/record-table
|
||||
import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter';
|
||||
import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote';
|
||||
import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useContext } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
export const RecordTableEmptyState = () => {
|
||||
const { objectNameSingular, recordTableId, objectMetadataItem } =
|
||||
useContext(RecordTableContext);
|
||||
|
||||
const { isSoftDeleteActiveState } = useRecordTableStates(recordTableId);
|
||||
|
||||
const { totalCount } = useFindManyRecords({ objectNameSingular, limit: 1 });
|
||||
const noRecordAtAll = totalCount === 0;
|
||||
|
||||
const isRemote = objectMetadataItem.isRemote;
|
||||
|
||||
const isSoftDeleteActive = useRecoilValue(isSoftDeleteActiveState);
|
||||
const isSoftDeleteActive = useRecoilComponentValueV2(
|
||||
isSoftDeleteFilterActiveComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
if (isRemote) {
|
||||
return <RecordTableEmptyStateRemote />;
|
||||
|
@ -4,10 +4,10 @@ import { useObjectLabel } from '@/object-metadata/hooks/useObjectLabel';
|
||||
import { useHandleToggleTrashColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleTrashColumnFilter';
|
||||
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { RecordTableEmptyStateDisplay } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateDisplay';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useDeleteCombinedViewFilters } from '@/views/hooks/useDeleteCombinedViewFilters';
|
||||
import { useContext } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
export const RecordTableEmptyStateSoftDelete = () => {
|
||||
const { objectMetadataItem, objectNameSingular, recordTableId } =
|
||||
@ -15,9 +15,11 @@ export const RecordTableEmptyStateSoftDelete = () => {
|
||||
|
||||
const { deleteCombinedViewFilter } =
|
||||
useDeleteCombinedViewFilters(recordTableId);
|
||||
const { tableFiltersState } = useRecordTableStates(recordTableId);
|
||||
|
||||
const tableFilters = useRecoilValue(tableFiltersState);
|
||||
const tableFilters = useRecoilComponentValueV2(
|
||||
tableFiltersComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const { toggleSoftDeleteFilterState } = useHandleToggleTrashColumnFilter({
|
||||
objectNameSingular,
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableEmptyStateNoRecordAtAll } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordAtAll';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
|
||||
@ -19,12 +19,12 @@ const meta: Meta = {
|
||||
RecordTableDecorator,
|
||||
(Story) => (
|
||||
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
|
||||
<RecordTableScope
|
||||
recordTableScopeId="persons"
|
||||
<RecordTableComponentInstance
|
||||
recordTableId="persons"
|
||||
onColumnsChange={() => {}}
|
||||
>
|
||||
<Story />
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</SnackBarProviderScope>
|
||||
),
|
||||
],
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableEmptyStateNoRecordFoundForFilter } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateNoRecordFoundForFilter';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
|
||||
@ -20,12 +20,12 @@ const meta: Meta = {
|
||||
RecordTableDecorator,
|
||||
(Story) => (
|
||||
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
|
||||
<RecordTableScope
|
||||
recordTableScopeId="persons"
|
||||
<RecordTableComponentInstance
|
||||
recordTableId="persons"
|
||||
onColumnsChange={() => {}}
|
||||
>
|
||||
<Story />
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</SnackBarProviderScope>
|
||||
),
|
||||
],
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableEmptyStateRemote } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateRemote';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
|
||||
@ -19,12 +19,12 @@ const meta: Meta = {
|
||||
RecordTableDecorator,
|
||||
(Story) => (
|
||||
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
|
||||
<RecordTableScope
|
||||
recordTableScopeId="persons"
|
||||
<RecordTableComponentInstance
|
||||
recordTableId="persons"
|
||||
onColumnsChange={() => {}}
|
||||
>
|
||||
<Story />
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</SnackBarProviderScope>
|
||||
),
|
||||
],
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableEmptyStateSoftDelete } from '@/object-record/record-table/empty-state/components/RecordTableEmptyStateSoftDelete';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
|
||||
import { ComponentDecorator } from 'twenty-ui';
|
||||
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
|
||||
@ -19,12 +19,12 @@ const meta: Meta = {
|
||||
RecordTableDecorator,
|
||||
(Story) => (
|
||||
<SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
|
||||
<RecordTableScope
|
||||
recordTableScopeId="persons"
|
||||
<RecordTableComponentInstance
|
||||
recordTableId="persons"
|
||||
onColumnsChange={() => {}}
|
||||
>
|
||||
<Story />
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</SnackBarProviderScope>
|
||||
),
|
||||
],
|
||||
|
@ -1,13 +1,20 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
|
||||
const {
|
||||
currentTableCellInEditModePositionState,
|
||||
isTableCellInEditModeFamilyState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const currentTableCellInEditModePositionState =
|
||||
useRecoilComponentCallbackStateV2(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ set, snapshot }) => {
|
||||
|
@ -1,14 +1,24 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
|
||||
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
|
||||
import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export const useDisableSoftFocus = (recordTableId?: string) => {
|
||||
const {
|
||||
softFocusPositionState,
|
||||
isSoftFocusActiveState,
|
||||
isSoftFocusOnTableCellFamilyState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const softFocusPositionState = useRecoilComponentCallbackStateV2(
|
||||
softFocusPositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
|
||||
isSoftFocusActiveComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isSoftFocusOnTableCellComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ set, snapshot }) => {
|
||||
|
@ -1,13 +1,20 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export const useGetIsSomeCellInEditModeState = (recordTableId?: string) => {
|
||||
const {
|
||||
currentTableCellInEditModePositionState,
|
||||
isTableCellInEditModeFamilyState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const currentTableCellInEditModePositionState =
|
||||
useRecoilComponentCallbackStateV2(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
|
@ -6,10 +6,8 @@ import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/reco
|
||||
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
|
||||
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export type HandleContainerMouseEnterArgs = {
|
||||
cellPosition: TableCellPosition;
|
||||
@ -20,24 +18,28 @@ export const useHandleContainerMouseEnter = ({
|
||||
}: {
|
||||
recordTableId: string;
|
||||
}) => {
|
||||
const tableScopeId = getScopeIdFromComponentId(recordTableId);
|
||||
|
||||
const { moveSoftFocusToCell } =
|
||||
useMoveSoftFocusToCellOnHoverV2(recordTableId);
|
||||
|
||||
const currentTableCellInEditModePositionState =
|
||||
useRecoilComponentCallbackStateV2(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isSoftFocusOnTableCellComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const handleContainerMouseEnter = useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
({ cellPosition }: HandleContainerMouseEnterArgs) => {
|
||||
const currentTableCellInEditModePositionState = extractComponentState(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
tableScopeId,
|
||||
);
|
||||
|
||||
const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
|
||||
isSoftFocusOnTableCellComponentFamilyState,
|
||||
tableScopeId,
|
||||
);
|
||||
|
||||
const isSoftFocusOnTableCell = getSnapshotValue(
|
||||
snapshot,
|
||||
isSoftFocusOnTableCellFamilyState(cellPosition),
|
||||
@ -48,11 +50,6 @@ export const useHandleContainerMouseEnter = ({
|
||||
currentTableCellInEditModePositionState,
|
||||
);
|
||||
|
||||
const isTableCellInEditModeFamilyState = extractComponentFamilyState(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
tableScopeId,
|
||||
);
|
||||
|
||||
const isSomeCellInEditMode = getSnapshotValue(
|
||||
snapshot,
|
||||
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
|
||||
@ -63,7 +60,12 @@ export const useHandleContainerMouseEnter = ({
|
||||
set(isSoftFocusUsingMouseState, true);
|
||||
}
|
||||
},
|
||||
[tableScopeId, moveSoftFocusToCell],
|
||||
[
|
||||
isSoftFocusOnTableCellFamilyState,
|
||||
currentTableCellInEditModePositionState,
|
||||
isTableCellInEditModeFamilyState,
|
||||
moveSoftFocusToCell,
|
||||
],
|
||||
);
|
||||
|
||||
return {
|
||||
|
@ -1,15 +1,19 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
|
||||
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
|
||||
import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useDisableSoftFocus } from './useDisableSoftFocus';
|
||||
|
||||
export const useLeaveTableFocus = (recordTableId?: string) => {
|
||||
const disableSoftFocus = useDisableSoftFocus(recordTableId);
|
||||
|
||||
const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
|
||||
const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
|
||||
isSoftFocusActiveComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const resetTableRowSelection = useResetTableRowSelection(recordTableId);
|
||||
|
||||
|
@ -1,15 +1,22 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
|
||||
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { TableCellPosition } from '../../types/TableCellPosition';
|
||||
|
||||
export const useMoveEditModeToTableCellPosition = (recordTableId?: string) => {
|
||||
const {
|
||||
isTableCellInEditModeFamilyState,
|
||||
currentTableCellInEditModePositionState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
const currentTableCellInEditModePositionState =
|
||||
useRecoilComponentCallbackStateV2(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ set, snapshot }) => {
|
||||
|
@ -1,156 +0,0 @@
|
||||
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
|
||||
import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
|
||||
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
|
||||
import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
|
||||
import { isSoftDeleteFilterActiveComponentState } from '@/object-record/record-table/states/isSoftDeleteFilterActiveComponentState';
|
||||
import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
|
||||
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
|
||||
import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState';
|
||||
import { onEntityCountChangeComponentState } from '@/object-record/record-table/states/onEntityCountChangeComponentState';
|
||||
import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
|
||||
import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
|
||||
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
|
||||
import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState';
|
||||
import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
|
||||
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
|
||||
import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
|
||||
import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
|
||||
import { unselectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/unselectedRowIdsComponentSelector';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
|
||||
import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
|
||||
import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
|
||||
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
|
||||
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
|
||||
import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
|
||||
import { extractComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/extractComponentReadOnlySelector';
|
||||
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
|
||||
|
||||
export const useRecordTableStates = (recordTableId?: string) => {
|
||||
const scopeId = useAvailableScopeIdOrThrow(
|
||||
RecordTableScopeInternalContext,
|
||||
getScopeIdOrUndefinedFromComponentId(recordTableId),
|
||||
);
|
||||
|
||||
return {
|
||||
scopeId,
|
||||
availableTableColumnsState: extractComponentState(
|
||||
availableTableColumnsComponentState,
|
||||
scopeId,
|
||||
),
|
||||
tableViewFilterGroupsState: extractComponentState(
|
||||
tableViewFilterGroupsComponentState,
|
||||
scopeId,
|
||||
),
|
||||
tableFiltersState: extractComponentState(
|
||||
tableFiltersComponentState,
|
||||
scopeId,
|
||||
),
|
||||
tableSortsState: extractComponentState(tableSortsComponentState, scopeId),
|
||||
tableColumnsState: extractComponentState(
|
||||
tableColumnsComponentState,
|
||||
scopeId,
|
||||
),
|
||||
onToggleColumnFilterState: extractComponentState(
|
||||
onToggleColumnFilterComponentState,
|
||||
scopeId,
|
||||
),
|
||||
onToggleColumnSortState: extractComponentState(
|
||||
onToggleColumnSortComponentState,
|
||||
scopeId,
|
||||
),
|
||||
onColumnsChangeState: extractComponentState(
|
||||
onColumnsChangeComponentState,
|
||||
scopeId,
|
||||
),
|
||||
onEntityCountChangeState: extractComponentState(
|
||||
onEntityCountChangeComponentState,
|
||||
scopeId,
|
||||
),
|
||||
tableLastRowVisibleState: extractComponentState(
|
||||
tableLastRowVisibleComponentState,
|
||||
scopeId,
|
||||
),
|
||||
softFocusPositionState: extractComponentState(
|
||||
softFocusPositionComponentState,
|
||||
scopeId,
|
||||
),
|
||||
numberOfTableRowsState: extractComponentState(
|
||||
numberOfTableRowsComponentState,
|
||||
scopeId,
|
||||
),
|
||||
currentTableCellInEditModePositionState: extractComponentState(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
scopeId,
|
||||
),
|
||||
isTableCellInEditModeFamilyState: extractComponentFamilyState(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
scopeId,
|
||||
),
|
||||
isSoftDeleteActiveState: extractComponentState(
|
||||
isSoftDeleteFilterActiveComponentState,
|
||||
scopeId,
|
||||
),
|
||||
isSoftFocusActiveState: extractComponentState(
|
||||
isSoftFocusActiveComponentState,
|
||||
scopeId,
|
||||
),
|
||||
tableRowIdsState: extractComponentState(tableRowIdsComponentState, scopeId),
|
||||
isRecordTableInitialLoadingState: extractComponentState(
|
||||
isRecordTableInitialLoadingComponentState,
|
||||
scopeId,
|
||||
),
|
||||
resizeFieldOffsetState: extractComponentState(
|
||||
resizeFieldOffsetComponentState,
|
||||
scopeId,
|
||||
),
|
||||
isSoftFocusOnTableCellFamilyState: extractComponentFamilyState(
|
||||
isSoftFocusOnTableCellComponentFamilyState,
|
||||
scopeId,
|
||||
),
|
||||
isRowSelectedFamilyState: extractComponentFamilyState(
|
||||
isRowSelectedComponentFamilyState,
|
||||
scopeId,
|
||||
),
|
||||
hasUserSelectedAllRowsState: extractComponentState(
|
||||
hasUserSelectedAllRowsComponentState,
|
||||
scopeId,
|
||||
),
|
||||
allRowsSelectedStatusSelector: extractComponentReadOnlySelector(
|
||||
allRowsSelectedStatusComponentSelector,
|
||||
scopeId,
|
||||
),
|
||||
hiddenTableColumnsSelector: extractComponentReadOnlySelector(
|
||||
hiddenTableColumnsComponentSelector,
|
||||
scopeId,
|
||||
),
|
||||
numberOfTableColumnsSelector: extractComponentReadOnlySelector(
|
||||
numberOfTableColumnsComponentSelector,
|
||||
scopeId,
|
||||
),
|
||||
selectedRowIdsSelector: extractComponentReadOnlySelector(
|
||||
selectedRowIdsComponentSelector,
|
||||
scopeId,
|
||||
),
|
||||
unselectedRowIdsSelector: extractComponentReadOnlySelector(
|
||||
unselectedRowIdsComponentSelector,
|
||||
scopeId,
|
||||
),
|
||||
visibleTableColumnsSelector: extractComponentReadOnlySelector(
|
||||
visibleTableColumnsComponentSelector,
|
||||
scopeId,
|
||||
),
|
||||
pendingRecordIdState: extractComponentState(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
scopeId,
|
||||
),
|
||||
};
|
||||
};
|
@ -1,16 +1,26 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
|
||||
|
||||
export const useResetTableRowSelection = (recordTableId?: string) => {
|
||||
const {
|
||||
tableRowIdsState,
|
||||
isRowSelectedFamilyState,
|
||||
hasUserSelectedAllRowsState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const tableRowIdsState = useRecoilComponentCallbackStateV2(
|
||||
tableRowIdsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isRowSelectedComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
|
||||
hasUserSelectedAllRowsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
|
@ -1,21 +1,31 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export const useSelectAllRows = (recordTableId?: string) => {
|
||||
const {
|
||||
allRowsSelectedStatusSelector,
|
||||
tableRowIdsState,
|
||||
isRowSelectedFamilyState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const allRowsSelectedStatusSelector = useRecoilComponentCallbackStateV2(
|
||||
allRowsSelectedStatusComponentSelector,
|
||||
recordTableId,
|
||||
);
|
||||
const tableRowIdsState = useRecoilComponentCallbackStateV2(
|
||||
tableRowIdsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isRowSelectedComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const selectAllRows = useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
() => {
|
||||
const allRowsSelectedStatus = getSnapshotValue(
|
||||
snapshot,
|
||||
allRowsSelectedStatusSelector(),
|
||||
allRowsSelectedStatusSelector,
|
||||
);
|
||||
|
||||
const tableRowIds = getSnapshotValue(snapshot, tableRowIdsState);
|
||||
|
@ -1,9 +1,13 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export const useSetHasUserSelectedAllRows = (recordTableId?: string) => {
|
||||
const { hasUserSelectedAllRowsState } = useRecordTableStates(recordTableId);
|
||||
const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
|
||||
hasUserSelectedAllRowsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ set }) =>
|
||||
|
@ -1,9 +1,13 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
|
||||
|
||||
type useSetRecordTableDataProps = {
|
||||
@ -15,12 +19,22 @@ export const useSetRecordTableData = ({
|
||||
recordTableId,
|
||||
onEntityCountChange,
|
||||
}: useSetRecordTableDataProps) => {
|
||||
const {
|
||||
tableRowIdsState,
|
||||
numberOfTableRowsState,
|
||||
isRowSelectedFamilyState,
|
||||
hasUserSelectedAllRowsState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const tableRowIdsState = useRecoilComponentCallbackStateV2(
|
||||
tableRowIdsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const numberOfTableRowsState = useRecoilComponentCallbackStateV2(
|
||||
numberOfTableRowsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isRowSelectedComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
const hasUserSelectedAllRowsState = useRecoilComponentCallbackStateV2(
|
||||
hasUserSelectedAllRowsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
|
@ -1,9 +1,13 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export const useSetRowSelectedState = (recordTableId?: string) => {
|
||||
const { isRowSelectedFamilyState } = useRecordTableStates(recordTableId);
|
||||
const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isRowSelectedComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ set }) =>
|
||||
|
@ -1,16 +1,26 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
|
||||
import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
|
||||
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
|
||||
import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { TableCellPosition } from '../../types/TableCellPosition';
|
||||
|
||||
export const useSetSoftFocusPosition = (recordTableId?: string) => {
|
||||
const {
|
||||
softFocusPositionState,
|
||||
isSoftFocusActiveState,
|
||||
isSoftFocusOnTableCellFamilyState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const softFocusPositionState = useRecoilComponentCallbackStateV2(
|
||||
softFocusPositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
|
||||
isSoftFocusActiveComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isSoftFocusOnTableCellFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isSoftFocusOnTableCellComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ set, snapshot }) => {
|
||||
|
@ -3,7 +3,6 @@ import { Key } from 'ts-key-enum';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useSetHasUserSelectedAllRows } from '@/object-record/record-table/hooks/internal/useSetAllRowSelectedState';
|
||||
import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
|
||||
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
|
||||
@ -16,6 +15,20 @@ import { useUpsertRecordFromState } from '../../hooks/useUpsertRecordFromState';
|
||||
import { ColumnDefinition } from '../types/ColumnDefinition';
|
||||
import { TableHotkeyScope } from '../types/TableHotkeyScope';
|
||||
|
||||
import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
|
||||
import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
|
||||
import { onColumnsChangeComponentState } from '@/object-record/record-table/states/onColumnsChangeComponentState';
|
||||
import { onEntityCountChangeComponentState } from '@/object-record/record-table/states/onEntityCountChangeComponentState';
|
||||
import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
|
||||
import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
|
||||
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
|
||||
import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
|
||||
import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
|
||||
import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
|
||||
import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
|
||||
import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
|
||||
@ -31,24 +44,10 @@ type useRecordTableProps = {
|
||||
export const useRecordTable = (props?: useRecordTableProps) => {
|
||||
const recordTableId = props?.recordTableId;
|
||||
|
||||
const {
|
||||
scopeId,
|
||||
availableTableColumnsState,
|
||||
tableViewFilterGroupsState,
|
||||
tableFiltersState,
|
||||
tableSortsState,
|
||||
tableColumnsState,
|
||||
onEntityCountChangeState,
|
||||
onColumnsChangeState,
|
||||
isRecordTableInitialLoadingState,
|
||||
tableLastRowVisibleState,
|
||||
selectedRowIdsSelector,
|
||||
unselectedRowIdsSelector,
|
||||
onToggleColumnFilterState,
|
||||
onToggleColumnSortState,
|
||||
pendingRecordIdState,
|
||||
hasUserSelectedAllRowsState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const availableTableColumnsState = useRecoilComponentCallbackStateV2(
|
||||
availableTableColumnsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setAvailableTableColumns = useRecoilCallback(
|
||||
({ snapshot, set }) =>
|
||||
@ -66,29 +65,58 @@ export const useRecordTable = (props?: useRecordTableProps) => {
|
||||
[availableTableColumnsState],
|
||||
);
|
||||
|
||||
const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
|
||||
|
||||
const setTableViewFilterGroups = useSetRecoilState(
|
||||
tableViewFilterGroupsState,
|
||||
const setOnEntityCountChange = useSetRecoilComponentStateV2(
|
||||
onEntityCountChangeComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setTableFilters = useSetRecoilState(tableFiltersState);
|
||||
|
||||
const setTableSorts = useSetRecoilState(tableSortsState);
|
||||
|
||||
const setTableColumns = useSetRecoilState(tableColumnsState);
|
||||
|
||||
const setOnColumnsChange = useSetRecoilState(onColumnsChangeState);
|
||||
|
||||
const setOnToggleColumnFilter = useSetRecoilState(onToggleColumnFilterState);
|
||||
const setOnToggleColumnSort = useSetRecoilState(onToggleColumnSortState);
|
||||
|
||||
const setIsRecordTableInitialLoading = useSetRecoilState(
|
||||
isRecordTableInitialLoadingState,
|
||||
const setTableViewFilterGroups = useSetRecoilComponentStateV2(
|
||||
tableViewFilterGroupsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setRecordTableLastRowVisible = useSetRecoilState(
|
||||
tableLastRowVisibleState,
|
||||
const setTableFilters = useSetRecoilComponentStateV2(
|
||||
tableFiltersComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setTableSorts = useSetRecoilComponentStateV2(
|
||||
tableSortsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setTableColumns = useSetRecoilComponentStateV2(
|
||||
tableColumnsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setOnColumnsChange = useSetRecoilComponentStateV2(
|
||||
onColumnsChangeComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setOnToggleColumnFilter = useSetRecoilComponentStateV2(
|
||||
onToggleColumnFilterComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const setOnToggleColumnSort = useSetRecoilComponentStateV2(
|
||||
onToggleColumnSortComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setIsRecordTableInitialLoading = useSetRecoilComponentStateV2(
|
||||
isRecordTableInitialLoadingComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setRecordTableLastRowVisible = useSetRecoilComponentStateV2(
|
||||
tableLastRowVisibleComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const onColumnsChangeState = useRecoilComponentCallbackStateV2(
|
||||
onColumnsChangeComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const onColumnsChange = useRecoilCallback(
|
||||
@ -104,6 +132,11 @@ export const useRecordTable = (props?: useRecordTableProps) => {
|
||||
[onColumnsChangeState],
|
||||
);
|
||||
|
||||
const onEntityCountChangeState = useRecoilComponentCallbackStateV2(
|
||||
onEntityCountChangeComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const onEntityCountChange = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
(count?: number) => {
|
||||
@ -202,10 +235,12 @@ export const useRecordTable = (props?: useRecordTableProps) => {
|
||||
const isSomeCellInEditModeState =
|
||||
useGetIsSomeCellInEditModeState(recordTableId);
|
||||
|
||||
const setPendingRecordId = useSetRecoilState(pendingRecordIdState);
|
||||
const setPendingRecordId = useSetRecoilComponentStateV2(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
return {
|
||||
scopeId,
|
||||
onColumnsChange,
|
||||
setAvailableTableColumns,
|
||||
setTableViewFilterGroups,
|
||||
@ -229,12 +264,9 @@ export const useRecordTable = (props?: useRecordTableProps) => {
|
||||
setRecordTableLastRowVisible,
|
||||
setSoftFocusPosition,
|
||||
isSomeCellInEditModeState,
|
||||
selectedRowIdsSelector,
|
||||
unselectedRowIdsSelector,
|
||||
setHasUserSelectedAllRows,
|
||||
setOnToggleColumnFilter,
|
||||
setOnToggleColumnSort,
|
||||
setPendingRecordId,
|
||||
hasUserSelectedAllRowsState,
|
||||
};
|
||||
};
|
||||
|
@ -1,22 +1,22 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { MoveFocusDirection } from '@/object-record/record-table/types/MoveFocusDirection';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
|
||||
import { numberOfTableRowsComponentState } from '@/object-record/record-table/states/numberOfTableRowsComponentState';
|
||||
import { numberOfTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/numberOfTableColumnsComponentSelector';
|
||||
import { softFocusPositionComponentState } from '@/object-record/record-table/states/softFocusPositionComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useSetSoftFocusPosition } from './internal/useSetSoftFocusPosition';
|
||||
|
||||
export const useRecordTableMoveFocus = (recordTableId?: string) => {
|
||||
const {
|
||||
scopeId,
|
||||
softFocusPositionState,
|
||||
numberOfTableRowsState,
|
||||
numberOfTableColumnsSelector,
|
||||
selectedRowIdsSelector,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
|
||||
const setSoftFocusPosition = useSetSoftFocusPosition(recordTableId);
|
||||
|
||||
const softFocusPositionState = useRecoilComponentCallbackStateV2(
|
||||
softFocusPositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const moveUp = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
() => {
|
||||
@ -39,6 +39,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
|
||||
[softFocusPositionState, setSoftFocusPosition],
|
||||
);
|
||||
|
||||
const numberOfTableRowsState = useRecoilComponentCallbackStateV2(
|
||||
numberOfTableRowsComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const moveDown = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
() => {
|
||||
@ -66,6 +71,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
|
||||
[numberOfTableRowsState, setSoftFocusPosition, softFocusPositionState],
|
||||
);
|
||||
|
||||
const numberOfTableColumnsSelector = useRecoilComponentCallbackStateV2(
|
||||
numberOfTableColumnsComponentSelector,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const moveRight = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
() => {
|
||||
@ -76,7 +86,7 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
|
||||
|
||||
const numberOfTableColumns = getSnapshotValue(
|
||||
snapshot,
|
||||
numberOfTableColumnsSelector(),
|
||||
numberOfTableColumnsSelector,
|
||||
);
|
||||
|
||||
const numberOfTableRows = getSnapshotValue(
|
||||
@ -132,7 +142,7 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
|
||||
|
||||
const numberOfTableColumns = getSnapshotValue(
|
||||
snapshot,
|
||||
numberOfTableColumnsSelector(),
|
||||
numberOfTableColumnsSelector,
|
||||
);
|
||||
|
||||
const currentColumnNumber = softFocusPosition.column;
|
||||
@ -187,13 +197,11 @@ export const useRecordTableMoveFocus = (recordTableId?: string) => {
|
||||
};
|
||||
|
||||
return {
|
||||
scopeId,
|
||||
moveDown,
|
||||
moveLeft,
|
||||
moveRight,
|
||||
moveUp,
|
||||
setSoftFocusPosition,
|
||||
selectedRowIdsSelector,
|
||||
moveFocus,
|
||||
};
|
||||
};
|
||||
|
@ -1,11 +1,13 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
|
||||
|
||||
import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { ColumnDefinition } from '../types/ColumnDefinition';
|
||||
|
||||
type useRecordTableProps = {
|
||||
@ -17,16 +19,19 @@ export const useTableColumns = (props?: useRecordTableProps) => {
|
||||
recordTableId: props?.recordTableId,
|
||||
});
|
||||
|
||||
const {
|
||||
availableTableColumnsState,
|
||||
tableColumnsState,
|
||||
visibleTableColumnsSelector,
|
||||
} = useRecordTableStates(props?.recordTableId);
|
||||
const availableTableColumns = useRecoilComponentValueV2(
|
||||
availableTableColumnsComponentState,
|
||||
props?.recordTableId,
|
||||
);
|
||||
|
||||
const availableTableColumns = useRecoilValue(availableTableColumnsState);
|
||||
|
||||
const tableColumns = useRecoilValue(tableColumnsState);
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const tableColumns = useRecoilComponentValueV2(
|
||||
tableColumnsComponentState,
|
||||
props?.recordTableId,
|
||||
);
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
props?.recordTableId,
|
||||
);
|
||||
|
||||
const { handleColumnMove } = useMoveViewColumns();
|
||||
|
||||
|
@ -1,20 +1,17 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { RecordTableRows } from '@/object-record/record-table/components/RecordTableRows';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableBodyDragDropContext } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDragDropContext';
|
||||
import { RecordTableBodyDroppable } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppable';
|
||||
import { RecordTableBodyLoading } from '@/object-record/record-table/record-table-body/components/RecordTableBodyLoading';
|
||||
import { RecordTablePendingRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRow';
|
||||
import { isRecordTableInitialLoadingComponentState } from '@/object-record/record-table/states/isRecordTableInitialLoadingComponentState';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTableBody = () => {
|
||||
const { tableRowIdsState, isRecordTableInitialLoadingState } =
|
||||
useRecordTableStates();
|
||||
const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
|
||||
|
||||
const tableRowIds = useRecoilValue(tableRowIdsState);
|
||||
|
||||
const isRecordTableInitialLoading = useRecoilValue(
|
||||
isRecordTableInitialLoadingState,
|
||||
const isRecordTableInitialLoading = useRecoilComponentValueV2(
|
||||
isRecordTableInitialLoadingComponentState,
|
||||
);
|
||||
|
||||
if (isRecordTableInitialLoading && tableRowIds.length === 0) {
|
||||
|
@ -1,12 +1,13 @@
|
||||
import { ReactNode, useContext } from 'react';
|
||||
import { DragDropContext, DropResult } from '@hello-pangea/dnd';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { ReactNode, useContext } from 'react';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
|
||||
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
|
||||
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useComputeNewRowPosition } from '@/object-record/record-table/hooks/useComputeNewRowPosition';
|
||||
import { isRemoveSortingModalOpenState } from '@/object-record/record-table/states/isRemoveSortingModalOpenState';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
@ -21,9 +22,7 @@ export const RecordTableBodyDragDropContext = ({
|
||||
objectNameSingular,
|
||||
});
|
||||
|
||||
const { tableRowIdsState } = useRecordTableStates();
|
||||
|
||||
const tableRowIds = useRecoilValue(tableRowIdsState);
|
||||
const tableRowIds = useRecoilComponentValueV2(tableRowIdsComponentState);
|
||||
|
||||
const { currentViewWithCombinedFiltersAndSorts } =
|
||||
useGetCurrentView(recordTableId);
|
||||
|
@ -6,13 +6,14 @@ import { lastShowPageRecordIdState } from '@/object-record/record-field/states/l
|
||||
import { useLoadRecordIndexTable } from '@/object-record/record-index/hooks/useLoadRecordIndexTable';
|
||||
import { ROW_HEIGHT } from '@/object-record/record-table/constants/RowHeight';
|
||||
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
|
||||
import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
|
||||
import { tableLastRowVisibleComponentState } from '@/object-record/record-table/states/tableLastRowVisibleComponentState';
|
||||
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
|
||||
import { useScrollLeftValue } from '@/ui/utilities/scroll/hooks/useScrollLeftValue';
|
||||
import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
|
||||
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
|
||||
import { isNonEmptyString } from '@sniptt/guards';
|
||||
import { useScrollToPosition } from '~/hooks/useScrollToPosition';
|
||||
|
||||
@ -35,14 +36,16 @@ export const RecordTableBodyEffect = () => {
|
||||
isFetchingMoreRecordsFamilyState(queryStateIdentifier),
|
||||
);
|
||||
|
||||
const { tableLastRowVisibleState } = useRecordTableStates();
|
||||
|
||||
const tableLastRowVisible = useRecoilValue(tableLastRowVisibleState);
|
||||
const tableLastRowVisible = useRecoilComponentValueV2(
|
||||
tableLastRowVisibleComponentState,
|
||||
);
|
||||
|
||||
const scrollTop = useScrollTopValue('recordTableWithWrappers');
|
||||
|
||||
const setHasRecordTableFetchedAllRecordsComponents =
|
||||
useSetRecoilComponentState(hasRecordTableFetchedAllRecordsComponentStateV2);
|
||||
useSetRecoilComponentStateV2(
|
||||
hasRecordTableFetchedAllRecordsComponentStateV2,
|
||||
);
|
||||
|
||||
// TODO: move this outside because it might cause way too many re-renders for other hooks
|
||||
useEffect(() => {
|
||||
@ -59,7 +62,7 @@ export const RecordTableBodyEffect = () => {
|
||||
|
||||
const scrollLeft = useScrollLeftValue('recordTableWithWrappers');
|
||||
|
||||
const setIsRecordTableScrolledLeft = useSetRecoilComponentState(
|
||||
const setIsRecordTableScrolledLeft = useSetRecoilComponentStateV2(
|
||||
isRecordTableScrolledLeftComponentState,
|
||||
);
|
||||
|
||||
|
@ -7,7 +7,7 @@ import { GRAY_SCALE } from 'twenty-ui';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { hasRecordTableFetchedAllRecordsComponentStateV2 } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentStateV2';
|
||||
import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
const StyledText = styled.div`
|
||||
align-items: center;
|
||||
@ -33,7 +33,7 @@ export const RecordTableBodyFetchMoreLoader = () => {
|
||||
RecordTableWithWrappersScrollWrapperContext,
|
||||
);
|
||||
|
||||
const hasRecordTableFetchedAllRecordsComponents = useRecoilComponentValue(
|
||||
const hasRecordTableFetchedAllRecordsComponents = useRecoilComponentValueV2(
|
||||
hasRecordTableFetchedAllRecordsComponentStateV2,
|
||||
);
|
||||
|
||||
|
@ -1,14 +1,14 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
|
||||
import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
|
||||
import { RecordTableCellLoading } from '@/object-record/record-table/record-table-cell/components/RecordTableCellLoading';
|
||||
import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTableBodyLoading = () => {
|
||||
const { visibleTableColumnsSelector } = useRecordTableStates();
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
return (
|
||||
<tbody>
|
||||
|
@ -1,18 +1,14 @@
|
||||
import { useContext, useMemo } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import { RecordTableCellFieldContextWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper';
|
||||
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
|
||||
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
|
||||
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
|
||||
import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
|
||||
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
|
||||
|
||||
export const RecordTableCellWrapper = ({
|
||||
children,
|
||||
@ -23,11 +19,6 @@ export const RecordTableCellWrapper = ({
|
||||
columnIndex: number;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const tableScopeId = useAvailableScopeIdOrThrow(
|
||||
RecordTableScopeInternalContext,
|
||||
getScopeIdOrUndefinedFromComponentId(),
|
||||
);
|
||||
|
||||
const { rowIndex } = useContext(RecordTableRowContext);
|
||||
|
||||
const currentTableCellPosition: TableCellPosition = useMemo(
|
||||
@ -38,22 +29,14 @@ export const RecordTableCellWrapper = ({
|
||||
[columnIndex, rowIndex],
|
||||
);
|
||||
|
||||
const isTableCellInEditModeFamilyState = extractComponentFamilyState(
|
||||
const isInEditMode = useRecoilComponentFamilyValueV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
tableScopeId,
|
||||
currentTableCellPosition,
|
||||
);
|
||||
|
||||
const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
|
||||
const hasSoftFocus = useRecoilComponentFamilyValueV2(
|
||||
isSoftFocusOnTableCellComponentFamilyState,
|
||||
tableScopeId,
|
||||
);
|
||||
|
||||
const isInEditMode = useRecoilValue(
|
||||
isTableCellInEditModeFamilyState(currentTableCellPosition),
|
||||
);
|
||||
|
||||
const hasSoftFocus = useRecoilValue(
|
||||
isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
|
||||
currentTableCellPosition,
|
||||
);
|
||||
|
||||
return (
|
||||
|
@ -1,19 +1,22 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot, useRecoilValue } from 'recoil';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { textfieldDefinition } from '@/object-record/record-field/__mocks__/fieldDefinitions';
|
||||
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import {
|
||||
recordTableCell,
|
||||
recordTableRow,
|
||||
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
|
||||
import { useCloseRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useCloseRecordTableCell';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
|
||||
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
|
||||
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
const setHotkeyScope = jest.fn();
|
||||
|
||||
@ -22,12 +25,12 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
|
||||
}));
|
||||
|
||||
const onColumnsChange = jest.fn();
|
||||
const scopeId = 'scopeId';
|
||||
const recordTableId = 'scopeId';
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<RecoilRoot>
|
||||
<RecordTableScope
|
||||
recordTableScopeId={scopeId}
|
||||
<RecordTableComponentInstance
|
||||
recordTableId={recordTableId}
|
||||
onColumnsChange={onColumnsChange}
|
||||
>
|
||||
<FieldContext.Provider
|
||||
@ -46,7 +49,7 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
</RecordTableCellContext.Provider>
|
||||
</RecordTableRowContext.Provider>
|
||||
</FieldContext.Provider>
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
@ -54,15 +57,12 @@ describe('useCloseRecordTableCell', () => {
|
||||
it('should work as expected', async () => {
|
||||
const { result } = renderHook(
|
||||
() => {
|
||||
const {
|
||||
currentTableCellInEditModePositionState,
|
||||
isTableCellInEditModeFamilyState,
|
||||
} = useRecordTableStates();
|
||||
const currentTableCellInEditModePosition = useRecoilValue(
|
||||
currentTableCellInEditModePositionState,
|
||||
const currentTableCellInEditModePosition = useRecoilComponentValueV2(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
);
|
||||
const isTableCellInEditMode = useRecoilValue(
|
||||
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
|
||||
const isTableCellInEditMode = useRecoilComponentFamilyValueV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
currentTableCellInEditModePosition,
|
||||
);
|
||||
return {
|
||||
...useCloseRecordTableCell(),
|
||||
|
@ -1,22 +1,22 @@
|
||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
|
||||
import { useCurrentTableCellEditMode } from '../useCurrentTableCellEditMode';
|
||||
|
||||
const onColumnsChange = jest.fn();
|
||||
|
||||
const scopeId = 'scopeId';
|
||||
const recordTableId = 'scopeId';
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<RecoilRoot>
|
||||
<RecordTableScope
|
||||
recordTableScopeId={scopeId}
|
||||
<RecordTableComponentInstance
|
||||
recordTableId={recordTableId}
|
||||
onColumnsChange={onColumnsChange}
|
||||
>
|
||||
{children}
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { RecoilRoot } from 'recoil';
|
||||
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import {
|
||||
@ -8,17 +9,19 @@ import {
|
||||
recordTableRow,
|
||||
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
|
||||
import { useIsSoftFocusOnCurrentTableCell } from '@/object-record/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<RecoilRoot>
|
||||
<RecordTableScope recordTableScopeId="scopeId" onColumnsChange={jest.fn()}>
|
||||
<RecordTableComponentInstance
|
||||
recordTableId="scopeId"
|
||||
onColumnsChange={jest.fn()}
|
||||
>
|
||||
<RecordTableRowContext.Provider value={recordTableRow}>
|
||||
<RecordTableCellContext.Provider value={recordTableCell}>
|
||||
{children}
|
||||
</RecordTableCellContext.Provider>
|
||||
</RecordTableRowContext.Provider>
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { CallbackInterface, RecoilRoot } from 'recoil';
|
||||
|
||||
import { RecordTableComponentInstance } from '@/object-record/record-table/components/RecordTableComponentInstance';
|
||||
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import {
|
||||
@ -8,24 +9,26 @@ import {
|
||||
recordTableRow,
|
||||
} from '@/object-record/record-table/record-table-cell/hooks/__mocks__/cell';
|
||||
import { useMoveSoftFocusToCurrentCellOnHover } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover';
|
||||
import { RecordTableScope } from '@/object-record/record-table/scopes/RecordTableScope';
|
||||
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
|
||||
|
||||
const mockSoftFocusPositionState = {
|
||||
key: 'softFocusPositionComponentState__{"scopeId":"scopeId"}',
|
||||
key: 'softFocusPositionComponentState__{"instanceId":"scopeId"}',
|
||||
};
|
||||
const mockSoftFocusActiveState = {
|
||||
key: 'isSoftFocusActiveComponentState__{"scopeId":"scopeId"}',
|
||||
key: 'isSoftFocusActiveComponentState__{"instanceId":"scopeId"}',
|
||||
};
|
||||
const mockIsSoftFocusOnTableCellFamilyState = {
|
||||
key: 'isSoftFocusOnTableCellFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}',
|
||||
const mockIsSoftFocusOnTableCellFamilyStateCurrentPosition = {
|
||||
key: 'isSoftFocusOnTableCellComponentFamilyState__{"familyKey":{"column":1,"row":0},"instanceId":"scopeId"}',
|
||||
};
|
||||
const mockIsSoftFocusOnTableCellFamilyStateNewPosition = {
|
||||
key: 'isSoftFocusOnTableCellComponentFamilyState__{"familyKey":{"column":3,"row":2},"instanceId":"scopeId"}',
|
||||
};
|
||||
const mockCurrentTableCellInEditModePositionState = {
|
||||
key: 'currentTableCellInEditModePositionComponentState__{"scopeId":"scopeId"}',
|
||||
key: 'currentTableCellInEditModePositionComponentState__{"instanceId":"scopeId"}',
|
||||
};
|
||||
const mockIsTableCellInEditModeFamilyState = {
|
||||
key: 'isTableCellInEditModeFamilyComponentState__{"familyKey":{"column":1,"row":0},"scopeId":"scopeId"}',
|
||||
key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":1,"row":0},"instanceId":"scopeId"}',
|
||||
};
|
||||
const mockCurrentHotKeyScopeState = {
|
||||
key: 'currentHotkeyScopeState',
|
||||
@ -61,21 +64,6 @@ jest.mock('recoil', () => ({
|
||||
) => (newPosition: TableCellPosition) => void,
|
||||
) => callback(mockCallbackInterface),
|
||||
}));
|
||||
jest.mock(
|
||||
'@/object-record/record-table/hooks/internal/useRecordTableStates',
|
||||
() => ({
|
||||
useRecordTableStates: () => ({
|
||||
softFocusPositionState: mockSoftFocusPositionState,
|
||||
isSoftFocusActiveState: mockSoftFocusActiveState,
|
||||
isSoftFocusOnTableCellFamilyState: () =>
|
||||
mockIsSoftFocusOnTableCellFamilyState,
|
||||
currentTableCellInEditModePositionState:
|
||||
mockCurrentTableCellInEditModePositionState,
|
||||
isTableCellInEditModeFamilyState: () =>
|
||||
mockIsTableCellInEditModeFamilyState,
|
||||
}),
|
||||
}),
|
||||
);
|
||||
jest.mock('@/object-record/record-table/hooks/useRecordTable', () => ({
|
||||
useRecordTable: () => ({
|
||||
setSoftFocusPosition,
|
||||
@ -88,13 +76,16 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
|
||||
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<RecoilRoot>
|
||||
<RecordTableScope recordTableScopeId="scopeId" onColumnsChange={jest.fn()}>
|
||||
<RecordTableComponentInstance
|
||||
recordTableId="scopeId"
|
||||
onColumnsChange={jest.fn()}
|
||||
>
|
||||
<RecordTableRowContext.Provider value={recordTableRow}>
|
||||
<RecordTableCellContext.Provider value={recordTableCell}>
|
||||
{children}
|
||||
</RecordTableCellContext.Provider>
|
||||
</RecordTableRowContext.Provider>
|
||||
</RecordTableScope>
|
||||
</RecordTableComponentInstance>
|
||||
</RecoilRoot>
|
||||
);
|
||||
|
||||
@ -114,26 +105,36 @@ describe('useMoveSoftFocusToCurrentCellOnHover', () => {
|
||||
result.current.moveSoftFocusToCurrentCellOnHover();
|
||||
});
|
||||
|
||||
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
|
||||
expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
mockSoftFocusActiveState,
|
||||
true,
|
||||
);
|
||||
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
|
||||
mockIsSoftFocusOnTableCellFamilyState,
|
||||
|
||||
expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
mockIsSoftFocusOnTableCellFamilyStateCurrentPosition,
|
||||
false,
|
||||
);
|
||||
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
|
||||
|
||||
expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
|
||||
3,
|
||||
mockSoftFocusPositionState,
|
||||
{ column: 3, row: 2 },
|
||||
);
|
||||
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
|
||||
mockIsSoftFocusOnTableCellFamilyState,
|
||||
|
||||
expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
|
||||
4,
|
||||
mockIsSoftFocusOnTableCellFamilyStateNewPosition,
|
||||
true,
|
||||
);
|
||||
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
|
||||
|
||||
expect(mockCallbackInterface.set).toHaveBeenNthCalledWith(
|
||||
5,
|
||||
mockSoftFocusActiveState,
|
||||
true,
|
||||
);
|
||||
|
||||
expect(setHotkeyScope).toHaveBeenCalledWith(
|
||||
TableHotkeyScope.TableSoftFocus,
|
||||
);
|
||||
|
@ -48,14 +48,14 @@ describe('useSelectedTableCellEditMode', () => {
|
||||
|
||||
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
|
||||
{
|
||||
key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":0,"row":0},"scopeId":"yourScopeId"}',
|
||||
key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":0,"row":0},"instanceId":"yourScopeId"}',
|
||||
},
|
||||
false,
|
||||
);
|
||||
|
||||
expect(mockCallbackInterface.set).toHaveBeenCalledWith(
|
||||
{
|
||||
key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":5,"row":1},"scopeId":"yourScopeId"}',
|
||||
key: 'isTableCellInEditModeComponentFamilyState__{"familyKey":{"column":5,"row":1},"instanceId":"yourScopeId"}',
|
||||
},
|
||||
true,
|
||||
);
|
||||
|
@ -39,15 +39,6 @@ const pendingRecordIdState = createState<string | null>({
|
||||
key: 'pendingRecordIdState',
|
||||
defaultValue: null,
|
||||
});
|
||||
jest.mock(
|
||||
'@/object-record/record-table/hooks/internal/useRecordTableStates',
|
||||
() => ({
|
||||
__esModule: true,
|
||||
useRecordTableStates: jest.fn(() => ({
|
||||
pendingRecordIdState: pendingRecordIdState,
|
||||
})),
|
||||
}),
|
||||
);
|
||||
|
||||
const createOneRecordMock = jest.fn();
|
||||
const updateOneRecordMock = jest.fn();
|
||||
@ -98,7 +89,11 @@ describe('useUpsertRecord', () => {
|
||||
|
||||
it('calls update record if there is no pending record', async () => {
|
||||
const { result } = renderHook(
|
||||
() => useUpsertRecord({ objectNameSingular: 'person' }),
|
||||
() =>
|
||||
useUpsertRecord({
|
||||
objectNameSingular: 'person',
|
||||
recordTableId: 'recordTableId',
|
||||
}),
|
||||
{
|
||||
wrapper: ({ children }) =>
|
||||
Wrapper({
|
||||
@ -114,7 +109,6 @@ describe('useUpsertRecord', () => {
|
||||
updateOneRecordMock,
|
||||
'recordId',
|
||||
'name',
|
||||
'recordTableId',
|
||||
);
|
||||
});
|
||||
|
||||
@ -124,7 +118,11 @@ describe('useUpsertRecord', () => {
|
||||
|
||||
it('calls update record if pending record is empty', async () => {
|
||||
const { result } = renderHook(
|
||||
() => useUpsertRecord({ objectNameSingular: 'person' }),
|
||||
() =>
|
||||
useUpsertRecord({
|
||||
objectNameSingular: 'person',
|
||||
recordTableId: 'recordTableId',
|
||||
}),
|
||||
{
|
||||
wrapper: ({ children }) =>
|
||||
Wrapper({
|
||||
@ -140,7 +138,6 @@ describe('useUpsertRecord', () => {
|
||||
updateOneRecordMock,
|
||||
'recordId',
|
||||
'name',
|
||||
'recordTableId',
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -1,24 +1,26 @@
|
||||
import { useResetRecoilState } from 'recoil';
|
||||
|
||||
import { SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/SoftFocusClickOutsideListenerId';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
|
||||
|
||||
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useResetRecoilState } from 'recoil';
|
||||
import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
|
||||
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
|
||||
|
||||
export const useCloseRecordTableCell = () => {
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
const { setDragSelectionStartEnabled } = useDragSelect();
|
||||
const { pendingRecordIdState } = useRecordTableStates();
|
||||
|
||||
const { toggleClickOutsideListener } = useClickOutsideListener(
|
||||
SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
|
||||
);
|
||||
|
||||
const closeCurrentTableCellInEditMode = useCloseCurrentTableCellInEditMode();
|
||||
const pendingRecordIdState = useRecoilComponentCallbackStateV2(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
);
|
||||
const resetRecordTablePendingRecordId =
|
||||
useResetRecoilState(pendingRecordIdState);
|
||||
|
||||
|
@ -1,26 +1,30 @@
|
||||
import { useResetRecoilState } from 'recoil';
|
||||
|
||||
import { SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/SoftFocusClickOutsideListenerId';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
|
||||
|
||||
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
|
||||
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
|
||||
|
||||
export const useCloseRecordTableCellV2 = (recordTableScopeId: string) => {
|
||||
export const useCloseRecordTableCellV2 = (recordTableId: string) => {
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
const { setDragSelectionStartEnabled } = useDragSelect();
|
||||
const { pendingRecordIdState } = useRecordTableStates(recordTableScopeId);
|
||||
|
||||
const { toggleClickOutsideListener } = useClickOutsideListener(
|
||||
SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
|
||||
);
|
||||
|
||||
const closeCurrentTableCellInEditMode =
|
||||
useCloseCurrentTableCellInEditMode(recordTableScopeId);
|
||||
useCloseCurrentTableCellInEditMode(recordTableId);
|
||||
|
||||
const pendingRecordIdState = useRecoilComponentCallbackStateV2(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const resetRecordTablePendingRecordId =
|
||||
useResetRecoilState(pendingRecordIdState);
|
||||
|
||||
|
@ -1,10 +1,9 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
|
||||
import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition';
|
||||
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
|
||||
import { useCurrentTableCellPosition } from './useCurrentCellPosition';
|
||||
|
||||
export const useCurrentTableCellEditMode = () => {
|
||||
@ -12,10 +11,9 @@ export const useCurrentTableCellEditMode = () => {
|
||||
|
||||
const currentTableCellPosition = useCurrentTableCellPosition();
|
||||
|
||||
const { isTableCellInEditModeFamilyState } = useRecordTableStates();
|
||||
|
||||
const isCurrentTableCellInEditMode = useRecoilValue(
|
||||
isTableCellInEditModeFamilyState(currentTableCellPosition),
|
||||
const isCurrentTableCellInEditMode = useRecoilComponentFamilyValueV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
currentTableCellPosition,
|
||||
);
|
||||
|
||||
const setCurrentTableCellInEditMode = useCallback(() => {
|
||||
|
@ -1,16 +1,13 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
|
||||
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
|
||||
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
|
||||
import { useCurrentTableCellPosition } from './useCurrentCellPosition';
|
||||
|
||||
export const useIsSoftFocusOnCurrentTableCell = () => {
|
||||
const currentTableCellPosition = useCurrentTableCellPosition();
|
||||
|
||||
const { isSoftFocusOnTableCellFamilyState } = useRecordTableStates();
|
||||
|
||||
const isSoftFocusOnTableCell = useRecoilValue(
|
||||
isSoftFocusOnTableCellFamilyState(currentTableCellPosition),
|
||||
const isSoftFocusOnTableCell = useRecoilComponentFamilyValueV2(
|
||||
isSoftFocusOnTableCellComponentFamilyState,
|
||||
currentTableCellPosition,
|
||||
);
|
||||
|
||||
return isSoftFocusOnTableCell;
|
||||
|
@ -1,20 +1,27 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useSetSoftFocus } from '@/object-record/record-table/record-table-cell/hooks/useSetSoftFocus';
|
||||
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
|
||||
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
|
||||
|
||||
export const useMoveSoftFocusToCellOnHoverV2 = (recordTableId: string) => {
|
||||
const setSoftFocus = useSetSoftFocus(recordTableId);
|
||||
|
||||
const {
|
||||
currentTableCellInEditModePositionState,
|
||||
isTableCellInEditModeFamilyState,
|
||||
} = useRecordTableStates(recordTableId);
|
||||
const currentTableCellInEditModePositionState =
|
||||
useRecoilComponentCallbackStateV2(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const moveSoftFocusToCell = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
|
@ -1,20 +1,25 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
|
||||
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
|
||||
|
||||
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
|
||||
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell';
|
||||
|
||||
export const useMoveSoftFocusToCurrentCellOnHover = () => {
|
||||
const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
|
||||
|
||||
const {
|
||||
currentTableCellInEditModePositionState,
|
||||
isTableCellInEditModeFamilyState,
|
||||
} = useRecordTableStates();
|
||||
const currentTableCellInEditModePositionState =
|
||||
useRecoilComponentCallbackStateV2(
|
||||
currentTableCellInEditModePositionComponentState,
|
||||
);
|
||||
const isTableCellInEditModeFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isTableCellInEditModeComponentFamilyState,
|
||||
);
|
||||
|
||||
return useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
|
@ -1,16 +1,20 @@
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useSetSoftFocusPosition } from '@/object-record/record-table/hooks/internal/useSetSoftFocusPosition';
|
||||
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
|
||||
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
|
||||
|
||||
import { isSoftFocusActiveComponentState } from '@/object-record/record-table/states/isSoftFocusActiveComponentState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
|
||||
|
||||
export const useSetSoftFocus = (recordTableId?: string) => {
|
||||
const setSoftFocusPosition = useSetSoftFocusPosition(recordTableId);
|
||||
|
||||
const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
|
||||
const isSoftFocusActiveState = useRecoilComponentCallbackStateV2(
|
||||
isSoftFocusActiveComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const setHotkeyScope = useSetHotkeyScope();
|
||||
|
||||
|
@ -5,10 +5,9 @@ import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-me
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { isBottomBarOpenedComponentState } from '@/ui/layout/bottom-bar/states/isBottomBarOpenedComponentState';
|
||||
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
|
||||
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
|
||||
import { extractComponentFamilyState } from '@/ui/utilities/state/component-state/utils/extractComponentFamilyState';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
|
||||
|
||||
export const useTriggerActionMenuDropdown = ({
|
||||
@ -20,13 +19,16 @@ export const useTriggerActionMenuDropdown = ({
|
||||
ActionMenuComponentInstanceContext,
|
||||
);
|
||||
|
||||
const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isRowSelectedComponentFamilyState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const triggerActionMenuDropdown = useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
(event: React.MouseEvent, recordId: string) => {
|
||||
event.preventDefault();
|
||||
|
||||
const tableScopeId = getScopeIdFromComponentId(recordTableId);
|
||||
|
||||
set(
|
||||
extractComponentState(
|
||||
recordIndexActionMenuDropdownPositionComponentState,
|
||||
@ -38,11 +40,6 @@ export const useTriggerActionMenuDropdown = ({
|
||||
},
|
||||
);
|
||||
|
||||
const isRowSelectedFamilyState = extractComponentFamilyState(
|
||||
isRowSelectedComponentFamilyState,
|
||||
tableScopeId,
|
||||
);
|
||||
|
||||
const isRowSelected = getSnapshotValue(
|
||||
snapshot,
|
||||
isRowSelectedFamilyState(recordId),
|
||||
@ -66,7 +63,7 @@ export const useTriggerActionMenuDropdown = ({
|
||||
set(isActionBarOpenState, false);
|
||||
set(isActionMenuDropdownOpenState, true);
|
||||
},
|
||||
[actionMenuInstanceId, recordTableId],
|
||||
[actionMenuInstanceId, isRowSelectedFamilyState],
|
||||
);
|
||||
|
||||
return { triggerActionMenuDropdown };
|
||||
|
@ -7,27 +7,29 @@ import { recordFieldInputDraftValueComponentSelector } from '@/object-record/rec
|
||||
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
|
||||
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { extractComponentSelector } from '@/ui/utilities/state/component-state/utils/extractComponentSelector';
|
||||
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
|
||||
import { isDefined } from '~/utils/isDefined';
|
||||
|
||||
export const useUpsertRecord = ({
|
||||
objectNameSingular,
|
||||
recordTableId,
|
||||
}: {
|
||||
objectNameSingular: string;
|
||||
recordTableId: string;
|
||||
}) => {
|
||||
const { createOneRecord } = useCreateOneRecord({
|
||||
objectNameSingular,
|
||||
});
|
||||
|
||||
const recordTablePendingRecordIdState = useRecoilComponentCallbackStateV2(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
recordTableId,
|
||||
);
|
||||
|
||||
const upsertRecord = useRecoilCallback(
|
||||
({ snapshot }) =>
|
||||
(
|
||||
persistField: () => void,
|
||||
recordId: string,
|
||||
fieldName: string,
|
||||
recordTableId: string,
|
||||
) => {
|
||||
(persistField: () => void, recordId: string, fieldName: string) => {
|
||||
const objectMetadataItems = snapshot
|
||||
.getLoadable(objectMetadataItemsState)
|
||||
.getValue();
|
||||
@ -43,13 +45,6 @@ export const useUpsertRecord = ({
|
||||
const labelIdentifierFieldMetadataItem =
|
||||
getLabelIdentifierFieldMetadataItem(foundObjectMetadataItem);
|
||||
|
||||
const tableScopeId = getScopeIdFromComponentId(recordTableId);
|
||||
|
||||
const recordTablePendingRecordIdState = extractComponentState(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
tableScopeId,
|
||||
);
|
||||
|
||||
const recordTablePendingRecordId = getSnapshotValue(
|
||||
snapshot,
|
||||
recordTablePendingRecordIdState,
|
||||
@ -75,7 +70,7 @@ export const useUpsertRecord = ({
|
||||
persistField();
|
||||
}
|
||||
},
|
||||
[createOneRecord, objectNameSingular],
|
||||
[createOneRecord, objectNameSingular, recordTablePendingRecordIdState],
|
||||
);
|
||||
|
||||
return { upsertRecord };
|
||||
|
@ -4,8 +4,8 @@ import { MOBILE_VIEWPORT, useIcons } from 'twenty-ui';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { ColumnDefinition } from '../../types/ColumnDefinition';
|
||||
|
||||
type RecordTableColumnHeadProps = {
|
||||
@ -55,7 +55,7 @@ export const RecordTableColumnHead = ({
|
||||
const { getIcon } = useIcons();
|
||||
const Icon = getIcon(column.iconName);
|
||||
|
||||
const isRecordTableScrolledLeft = useRecoilComponentValue(
|
||||
const isRecordTableScrolledLeft = useRecoilComponentValueV2(
|
||||
isRecordTableScrolledLeftComponentState,
|
||||
);
|
||||
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import {
|
||||
IconArrowLeft,
|
||||
IconArrowRight,
|
||||
@ -8,12 +7,15 @@ import {
|
||||
} from 'twenty-ui';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
|
||||
|
||||
import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
|
||||
import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { useTableColumns } from '../../hooks/useTableColumns';
|
||||
import { ColumnDefinition } from '../../types/ColumnDefinition';
|
||||
|
||||
@ -24,13 +26,9 @@ export type RecordTableColumnHeadDropdownMenuProps = {
|
||||
export const RecordTableColumnHeadDropdownMenu = ({
|
||||
column,
|
||||
}: RecordTableColumnHeadDropdownMenuProps) => {
|
||||
const {
|
||||
visibleTableColumnsSelector,
|
||||
onToggleColumnFilterState,
|
||||
onToggleColumnSortState,
|
||||
} = useRecordTableStates();
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
const secondVisibleColumn = visibleTableColumns[1];
|
||||
const canMove = column.isLabelIdentifier !== true;
|
||||
@ -67,8 +65,12 @@ export const RecordTableColumnHeadDropdownMenu = ({
|
||||
handleColumnVisibilityChange(column);
|
||||
};
|
||||
|
||||
const onToggleColumnFilter = useRecoilValue(onToggleColumnFilterState);
|
||||
const onToggleColumnSort = useRecoilValue(onToggleColumnSortState);
|
||||
const onToggleColumnFilter = useRecoilComponentValueV2(
|
||||
onToggleColumnFilterComponentState,
|
||||
);
|
||||
const onToggleColumnSort = useRecoilComponentValueV2(
|
||||
onToggleColumnSortComponentState,
|
||||
);
|
||||
|
||||
const handleSortClick = () => {
|
||||
closeDropdown();
|
||||
|
@ -1,12 +1,12 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { MOBILE_VIEWPORT } from 'twenty-ui';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableHeaderCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCell';
|
||||
import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn';
|
||||
import { RecordTableHeaderDragDropColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn';
|
||||
import { RecordTableHeaderLastColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
const StyledTableHead = styled.thead`
|
||||
cursor: pointer;
|
||||
@ -75,9 +75,9 @@ export const RecordTableHeader = ({
|
||||
}: {
|
||||
objectMetadataNameSingular: string;
|
||||
}) => {
|
||||
const { visibleTableColumnsSelector } = useRecordTableStates();
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledTableHead id="record-table-header" data-select-disable>
|
||||
|
@ -1,21 +1,24 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
import { IconPlus, LightIconButton } from 'twenty-ui';
|
||||
|
||||
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
|
||||
import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useCreateNewTableRecord } from '@/object-record/record-table/hooks/useCreateNewTableRecords';
|
||||
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
|
||||
import { RecordTableColumnHeadWithDropdown } from '@/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown';
|
||||
import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
|
||||
import { resizeFieldOffsetComponentState } from '@/object-record/record-table/states/resizeFieldOffsetComponentState';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
||||
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
|
||||
|
||||
const COLUMN_MIN_WIDTH = 104;
|
||||
@ -96,17 +99,19 @@ export const RecordTableHeaderCell = ({
|
||||
column: ColumnDefinition<FieldMetadata>;
|
||||
objectMetadataNameSingular: string;
|
||||
}) => {
|
||||
const { resizeFieldOffsetState, tableColumnsState } = useRecordTableStates();
|
||||
|
||||
const { objectMetadataItem } = useObjectMetadataItem({
|
||||
objectNameSingular: objectMetadataNameSingular,
|
||||
});
|
||||
|
||||
const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
|
||||
resizeFieldOffsetState,
|
||||
const resizeFieldOffsetState = useRecoilComponentCallbackStateV2(
|
||||
resizeFieldOffsetComponentState,
|
||||
);
|
||||
|
||||
const tableColumns = useRecoilValue(tableColumnsState);
|
||||
const [resizeFieldOffset, setResizeFieldOffset] = useRecoilComponentStateV2(
|
||||
resizeFieldOffsetComponentState,
|
||||
);
|
||||
|
||||
const tableColumns = useRecoilComponentValueV2(tableColumnsComponentState);
|
||||
const tableColumnsByKey = useMemo(
|
||||
() =>
|
||||
mapArrayToObject(tableColumns, ({ fieldMetadataId }) => fieldMetadataId),
|
||||
@ -181,7 +186,7 @@ export const RecordTableHeaderCell = ({
|
||||
onMouseUp: handleResizeHandlerEnd,
|
||||
});
|
||||
|
||||
const isRecordTableScrolledLeft = useRecoilComponentValue(
|
||||
const isRecordTableScrolledLeft = useRecoilComponentValueV2(
|
||||
isRecordTableScrolledLeftComponentState,
|
||||
);
|
||||
|
||||
|
@ -1,8 +1,8 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
|
||||
import { allRowsSelectedStatusComponentSelector } from '@/object-record/record-table/states/selectors/allRowsSelectedStatusComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
import { Checkbox } from 'twenty-ui';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
@ -23,9 +23,9 @@ const StyledColumnHeaderCell = styled.th`
|
||||
`;
|
||||
|
||||
export const RecordTableHeaderCheckboxColumn = () => {
|
||||
const { allRowsSelectedStatusSelector } = useRecordTableStates();
|
||||
|
||||
const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector());
|
||||
const allRowsSelectedStatus = useRecoilComponentValueV2(
|
||||
allRowsSelectedStatusComponentSelector,
|
||||
);
|
||||
const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } =
|
||||
useRecordTable();
|
||||
|
||||
|
@ -1,14 +1,14 @@
|
||||
import { Theme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { useContext } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { IconPlus, ThemeContext } from 'twenty-ui';
|
||||
|
||||
import { HIDDEN_TABLE_COLUMN_DROPDOWN_ID } from '@/object-record/record-table/constants/HiddenTableColumnDropdownId';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableHeaderPlusButtonContent } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent';
|
||||
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
|
||||
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
|
||||
import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
const StyledPlusIconHeaderCell = styled.th<{
|
||||
theme: Theme;
|
||||
@ -58,9 +58,9 @@ export const RecordTableHeaderLastColumn = () => {
|
||||
(scrollWrapper.ref.current?.clientWidth ?? 0) <
|
||||
(scrollWrapper.ref.current?.scrollWidth ?? 0);
|
||||
|
||||
const { hiddenTableColumnsSelector } = useRecordTableStates();
|
||||
|
||||
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
|
||||
const hiddenTableColumns = useRecoilComponentValueV2(
|
||||
hiddenTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
return (
|
||||
<StyledPlusIconHeaderCell
|
||||
|
@ -1,27 +1,28 @@
|
||||
import { useCallback, useContext } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil';
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { IconSettings, UndecoratedLink, useIcons } from 'twenty-ui';
|
||||
|
||||
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns';
|
||||
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
||||
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
|
||||
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTableHeaderPlusButtonContent = () => {
|
||||
const { objectMetadataItem } = useContext(RecordTableContext);
|
||||
const { closeDropdown } = useDropdown();
|
||||
|
||||
const { hiddenTableColumnsSelector } = useRecordTableStates();
|
||||
|
||||
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector());
|
||||
const hiddenTableColumns = useRecoilComponentValueV2(
|
||||
hiddenTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
const { getIcon } = useIcons();
|
||||
const { handleColumnVisibilityChange } = useTableColumns();
|
||||
|
@ -1,15 +1,16 @@
|
||||
import { useContext } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTableCellsEmpty = () => {
|
||||
const { isSelected } = useContext(RecordTableRowContext);
|
||||
const { visibleTableColumnsSelector } = useRecordTableStates();
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
return visibleTableColumns.map((column) => (
|
||||
<RecordTableTd isSelected={isSelected} key={column.fieldMetadataId} />
|
||||
|
@ -1,17 +1,18 @@
|
||||
import { useContext } from 'react';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableCell } from '@/object-record/record-table/record-table-cell/components/RecordTableCell';
|
||||
import { RecordTableCellWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellWrapper';
|
||||
import { RecordTableTd } from '@/object-record/record-table/record-table-cell/components/RecordTableTd';
|
||||
import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTableCellsVisible = () => {
|
||||
const { isDragging, isSelected } = useContext(RecordTableRowContext);
|
||||
const { visibleTableColumnsSelector } = useRecordTableStates();
|
||||
|
||||
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector());
|
||||
const visibleTableColumns = useRecoilComponentValueV2(
|
||||
visibleTableColumnsComponentSelector,
|
||||
);
|
||||
|
||||
const tableColumnsAfterFirst = visibleTableColumns.slice(1);
|
||||
|
||||
|
@ -1,11 +1,11 @@
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
|
||||
import { recordTablePendingRecordIdComponentState } from '@/object-record/record-table/states/recordTablePendingRecordIdComponentState';
|
||||
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
|
||||
|
||||
export const RecordTablePendingRow = () => {
|
||||
const { pendingRecordIdState } = useRecordTableStates();
|
||||
const pendingRecordId = useRecoilValue(pendingRecordIdState);
|
||||
const pendingRecordId = useRecoilComponentValueV2(
|
||||
recordTablePendingRecordIdComponentState,
|
||||
);
|
||||
|
||||
if (!pendingRecordId) return <></>;
|
||||
|
||||
|
@ -2,15 +2,15 @@ import { useTheme } from '@emotion/react';
|
||||
import { Draggable } from '@hello-pangea/dnd';
|
||||
import { ReactNode, useContext, useEffect } from 'react';
|
||||
import { useInView } from 'react-intersection-observer';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
|
||||
import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage';
|
||||
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
|
||||
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { RecordTableTr } from '@/object-record/record-table/record-table-row/components/RecordTableTr';
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { RecordTableWithWrappersScrollWrapperContext } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
|
||||
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
|
||||
|
||||
export const RecordTableRowWrapper = ({
|
||||
recordId,
|
||||
@ -28,8 +28,10 @@ export const RecordTableRowWrapper = ({
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const { isRowSelectedFamilyState } = useRecordTableStates();
|
||||
const currentRowSelected = useRecoilValue(isRowSelectedFamilyState(recordId));
|
||||
const currentRowSelected = useRecoilComponentFamilyValueV2(
|
||||
isRowSelectedComponentFamilyState,
|
||||
recordId,
|
||||
);
|
||||
|
||||
const scrollWrapperRef = useContext(
|
||||
RecordTableWithWrappersScrollWrapperContext,
|
||||
|
@ -2,13 +2,16 @@ import { useContext } from 'react';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
|
||||
import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
|
||||
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
|
||||
|
||||
export const useSetCurrentRowSelected = () => {
|
||||
const { recordId } = useContext(RecordTableRowContext);
|
||||
|
||||
const { isRowSelectedFamilyState } = useRecordTableStates();
|
||||
const isRowSelectedFamilyState = useRecoilComponentCallbackStateV2(
|
||||
isRowSelectedComponentFamilyState,
|
||||
);
|
||||
|
||||
const setCurrentRowSelected = useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
|
@ -1,7 +1,9 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const hasUserSelectedAllRowsComponentState =
|
||||
createComponentState<boolean>({
|
||||
createComponentStateV2<boolean>({
|
||||
key: 'hasUserSelectedAllRowsFamilyState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,9 +1,11 @@
|
||||
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
|
||||
|
||||
export const isRowSelectedComponentFamilyState = createComponentFamilyState<
|
||||
export const isRowSelectedComponentFamilyState = createComponentFamilyStateV2<
|
||||
boolean,
|
||||
string
|
||||
>({
|
||||
key: 'isRowSelectedComponentFamilyState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,31 +0,0 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
|
||||
import { RecordTableScopeInternalContext } from './scope-internal-context/RecordTableScopeInternalContext';
|
||||
import { RecordTableScopeInitEffect } from './RecordTableScopeInitEffect';
|
||||
|
||||
type RecordTableScopeProps = {
|
||||
children: ReactNode;
|
||||
recordTableScopeId: string;
|
||||
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
|
||||
};
|
||||
|
||||
export const RecordTableScope = ({
|
||||
children,
|
||||
recordTableScopeId,
|
||||
onColumnsChange,
|
||||
}: RecordTableScopeProps) => {
|
||||
return (
|
||||
<RecordTableScopeInternalContext.Provider
|
||||
value={{
|
||||
scopeId: recordTableScopeId,
|
||||
onColumnsChange,
|
||||
}}
|
||||
>
|
||||
<RecordTableScopeInitEffect onColumnsChange={onColumnsChange} />
|
||||
{children}
|
||||
</RecordTableScopeInternalContext.Provider>
|
||||
);
|
||||
};
|
@ -1,13 +0,0 @@
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
|
||||
import { RecoilComponentStateKey } from '@/ui/utilities/state/component-state/types/RecoilComponentStateKey';
|
||||
|
||||
import { ColumnDefinition } from '../../types/ColumnDefinition';
|
||||
|
||||
// TODO: separate scope contexts from event contexts
|
||||
type RecordTableScopeInternalContextProps = RecoilComponentStateKey & {
|
||||
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
|
||||
};
|
||||
|
||||
export const RecordTableScopeInternalContext =
|
||||
createScopeInternalContext<RecordTableScopeInternalContextProps>();
|
@ -1,11 +1,13 @@
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
import { ColumnDefinition } from '../types/ColumnDefinition';
|
||||
|
||||
export const availableTableColumnsComponentState = createComponentState<
|
||||
export const availableTableColumnsComponentState = createComponentStateV2<
|
||||
ColumnDefinition<FieldMetadata>[]
|
||||
>({
|
||||
key: 'availableTableColumnsComponentState',
|
||||
defaultValue: [],
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -0,0 +1,13 @@
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
|
||||
import { ComponentStateKeyV2 } from '@/ui/utilities/state/component-state/types/ComponentStateKeyV2';
|
||||
import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
|
||||
import { ColumnDefinition } from '../../types/ColumnDefinition';
|
||||
|
||||
// TODO: separate scope contexts from event contexts
|
||||
type RecordTableComponentInstanceContextProps = ComponentStateKeyV2 & {
|
||||
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
|
||||
};
|
||||
|
||||
export const RecordTableComponentInstanceContext =
|
||||
createComponentInstanceContext<RecordTableComponentInstanceContextProps>();
|
@ -1,12 +1,13 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
import { TableCellPosition } from '../types/TableCellPosition';
|
||||
|
||||
export const currentTableCellInEditModePositionComponentState =
|
||||
createComponentState<TableCellPosition>({
|
||||
createComponentStateV2<TableCellPosition>({
|
||||
key: 'currentTableCellInEditModePositionComponentState',
|
||||
defaultValue: {
|
||||
row: 0,
|
||||
column: 1,
|
||||
},
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
|
||||
import { createComponentStateV2_alpha } from '@/ui/utilities/state/component-state/utils/createComponentStateV2Alpha';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const hasRecordTableFetchedAllRecordsComponentStateV2 =
|
||||
createComponentStateV2_alpha<boolean>({
|
||||
createComponentStateV2<boolean>({
|
||||
key: 'hasRecordTableFetchedAllRecordsComponentStateV2',
|
||||
componentContext: RecordTableScopeInternalContext,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
defaultValue: false,
|
||||
});
|
||||
|
@ -1,7 +1,9 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const isRecordTableInitialLoadingComponentState =
|
||||
createComponentState<boolean>({
|
||||
createComponentStateV2<boolean>({
|
||||
key: 'isRecordTableInitialLoadingComponentState',
|
||||
defaultValue: true,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { RecordTableScopeInternalContext } from '@/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
|
||||
import { createComponentStateV2_alpha } from '@/ui/utilities/state/component-state/utils/createComponentStateV2Alpha';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const isRecordTableScrolledLeftComponentState =
|
||||
createComponentStateV2_alpha<boolean>({
|
||||
createComponentStateV2<boolean>({
|
||||
key: 'isRecordTableScrolledLeftComponentState',
|
||||
componentContext: RecordTableScopeInternalContext,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
defaultValue: true,
|
||||
});
|
||||
|
@ -1,7 +1,9 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const isSoftDeleteFilterActiveComponentState =
|
||||
createComponentState<boolean>({
|
||||
createComponentStateV2<boolean>({
|
||||
key: 'isSoftDeleteFilterActiveComponentState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,6 +1,8 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const isSoftFocusActiveComponentState = createComponentState<boolean>({
|
||||
export const isSoftFocusActiveComponentState = createComponentStateV2<boolean>({
|
||||
key: 'isSoftFocusActiveComponentState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,9 +1,10 @@
|
||||
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
|
||||
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
|
||||
import { TableCellPosition } from '../types/TableCellPosition';
|
||||
|
||||
export const isSoftFocusOnTableCellComponentFamilyState =
|
||||
createComponentFamilyState<boolean, TableCellPosition>({
|
||||
createComponentFamilyStateV2<boolean, TableCellPosition>({
|
||||
key: 'isSoftFocusOnTableCellComponentFamilyState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,9 +1,10 @@
|
||||
import { createComponentFamilyState } from '@/ui/utilities/state/component-state/utils/createComponentFamilyState';
|
||||
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentFamilyStateV2';
|
||||
import { TableCellPosition } from '../types/TableCellPosition';
|
||||
|
||||
export const isTableCellInEditModeComponentFamilyState =
|
||||
createComponentFamilyState<boolean, TableCellPosition>({
|
||||
createComponentFamilyStateV2<boolean, TableCellPosition>({
|
||||
key: 'isTableCellInEditModeComponentFamilyState',
|
||||
defaultValue: false,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,6 +1,8 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const numberOfTableRowsComponentState = createComponentState<number>({
|
||||
export const numberOfTableRowsComponentState = createComponentStateV2<number>({
|
||||
key: 'numberOfTableRowsComponentState',
|
||||
defaultValue: 0,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,10 +1,12 @@
|
||||
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const onColumnsChangeComponentState = createComponentState<
|
||||
export const onColumnsChangeComponentState = createComponentStateV2<
|
||||
((columns: ColumnDefinition<FieldMetadata>[]) => void) | undefined
|
||||
>({
|
||||
key: 'onColumnsChangeComponentState',
|
||||
defaultValue: undefined,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,8 +1,10 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const onEntityCountChangeComponentState = createComponentState<
|
||||
export const onEntityCountChangeComponentState = createComponentStateV2<
|
||||
((entityCount?: number) => void) | undefined
|
||||
>({
|
||||
key: 'onEntityCountChangeComponentState',
|
||||
defaultValue: undefined,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,8 +1,10 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const onToggleColumnFilterComponentState = createComponentState<
|
||||
export const onToggleColumnFilterComponentState = createComponentStateV2<
|
||||
((fieldMetadataId: string) => void) | undefined
|
||||
>({
|
||||
key: 'onToggleColumnFilterComponentState',
|
||||
defaultValue: undefined,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,8 +1,10 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const onToggleColumnSortComponentState = createComponentState<
|
||||
export const onToggleColumnSortComponentState = createComponentStateV2<
|
||||
((fieldMetadataId: string) => void) | undefined
|
||||
>({
|
||||
key: 'onToggleColumnSortComponentState',
|
||||
defaultValue: undefined,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,8 +1,10 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const recordTablePendingRecordIdComponentState = createComponentState<
|
||||
export const recordTablePendingRecordIdComponentState = createComponentStateV2<
|
||||
string | null
|
||||
>({
|
||||
key: 'recordTablePendingRecordIdState',
|
||||
defaultValue: null,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,6 +1,8 @@
|
||||
import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
|
||||
|
||||
export const resizeFieldOffsetComponentState = createComponentState<number>({
|
||||
export const resizeFieldOffsetComponentState = createComponentStateV2<number>({
|
||||
key: 'resizeFieldOffsetComponentState',
|
||||
defaultValue: 0,
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
});
|
||||
|
@ -1,19 +1,23 @@
|
||||
import { selectedRowIdsComponentSelector } from '@/object-record/record-table/states/selectors/selectedRowIdsComponentSelector';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
|
||||
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
|
||||
import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus';
|
||||
|
||||
export const allRowsSelectedStatusComponentSelector =
|
||||
createComponentReadOnlySelector<AllRowsSelectedStatus>({
|
||||
createComponentSelectorV2<AllRowsSelectedStatus>({
|
||||
key: 'allRowsSelectedStatusComponentSelector',
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
get:
|
||||
({ scopeId }) =>
|
||||
({ instanceId }) =>
|
||||
({ get }) => {
|
||||
const tableRowIds = get(tableRowIdsComponentState({ scopeId }));
|
||||
const tableRowIds = get(
|
||||
tableRowIdsComponentState.atomFamily({ instanceId }),
|
||||
);
|
||||
|
||||
const selectedRowIds = get(
|
||||
selectedRowIdsComponentSelector({ scopeId }),
|
||||
selectedRowIdsComponentSelector.selectorFamily({ instanceId }),
|
||||
);
|
||||
|
||||
const numberOfSelectedRows = selectedRowIds.length;
|
||||
|
@ -1,38 +1,41 @@
|
||||
import { availableTableColumnsComponentState } from '@/object-record/record-table/states/availableTableColumnsComponentState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
|
||||
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
|
||||
import { mapArrayToObject } from '~/utils/array/mapArrayToObject';
|
||||
|
||||
export const hiddenTableColumnsComponentSelector =
|
||||
createComponentReadOnlySelector({
|
||||
key: 'hiddenTableColumnsComponentSelector',
|
||||
get:
|
||||
({ scopeId }) =>
|
||||
({ get }) => {
|
||||
const tableColumns = get(tableColumnsComponentState({ scopeId }));
|
||||
const availableColumns = get(
|
||||
availableTableColumnsComponentState({ scopeId }),
|
||||
);
|
||||
const tableColumnsByKey = mapArrayToObject(
|
||||
tableColumns,
|
||||
({ fieldMetadataId }) => fieldMetadataId,
|
||||
);
|
||||
export const hiddenTableColumnsComponentSelector = createComponentSelectorV2({
|
||||
key: 'hiddenTableColumnsComponentSelector',
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
get:
|
||||
({ instanceId }) =>
|
||||
({ get }) => {
|
||||
const tableColumns = get(
|
||||
tableColumnsComponentState.atomFamily({ instanceId }),
|
||||
);
|
||||
const availableColumns = get(
|
||||
availableTableColumnsComponentState.atomFamily({ instanceId }),
|
||||
);
|
||||
const tableColumnsByKey = mapArrayToObject(
|
||||
tableColumns,
|
||||
({ fieldMetadataId }) => fieldMetadataId,
|
||||
);
|
||||
|
||||
const hiddenColumns = availableColumns
|
||||
.filter(
|
||||
({ fieldMetadataId }) =>
|
||||
!tableColumnsByKey[fieldMetadataId]?.isVisible,
|
||||
)
|
||||
.map((availableColumn) => {
|
||||
const { fieldMetadataId } = availableColumn;
|
||||
const existingTableColumn = tableColumnsByKey[fieldMetadataId];
|
||||
const hiddenColumns = availableColumns
|
||||
.filter(
|
||||
({ fieldMetadataId }) =>
|
||||
!tableColumnsByKey[fieldMetadataId]?.isVisible,
|
||||
)
|
||||
.map((availableColumn) => {
|
||||
const { fieldMetadataId } = availableColumn;
|
||||
const existingTableColumn = tableColumnsByKey[fieldMetadataId];
|
||||
|
||||
return {
|
||||
...(existingTableColumn || availableColumn),
|
||||
isVisible: false,
|
||||
};
|
||||
});
|
||||
return {
|
||||
...(existingTableColumn || availableColumn),
|
||||
isVisible: false,
|
||||
};
|
||||
});
|
||||
|
||||
return hiddenColumns;
|
||||
},
|
||||
});
|
||||
return hiddenColumns;
|
||||
},
|
||||
});
|
||||
|
@ -1,11 +1,12 @@
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
|
||||
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
|
||||
|
||||
export const numberOfTableColumnsComponentSelector =
|
||||
createComponentReadOnlySelector({
|
||||
key: 'numberOfTableColumnsComponentSelector',
|
||||
get:
|
||||
({ scopeId }) =>
|
||||
({ get }) =>
|
||||
get(tableColumnsComponentState({ scopeId })).length,
|
||||
});
|
||||
export const numberOfTableColumnsComponentSelector = createComponentSelectorV2({
|
||||
key: 'numberOfTableColumnsComponentSelector',
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
get:
|
||||
({ instanceId }) =>
|
||||
({ get }) =>
|
||||
get(tableColumnsComponentState.atomFamily({ instanceId })).length,
|
||||
});
|
||||
|
@ -1,21 +1,23 @@
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
|
||||
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
|
||||
|
||||
export const selectedRowIdsComponentSelector = createComponentReadOnlySelector<
|
||||
export const selectedRowIdsComponentSelector = createComponentSelectorV2<
|
||||
string[]
|
||||
>({
|
||||
key: 'selectedRowIdsComponentSelector',
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
get:
|
||||
({ scopeId }) =>
|
||||
({ instanceId }) =>
|
||||
({ get }) => {
|
||||
const rowIds = get(tableRowIdsComponentState({ scopeId }));
|
||||
const rowIds = get(tableRowIdsComponentState.atomFamily({ instanceId }));
|
||||
|
||||
return rowIds.filter(
|
||||
(rowId) =>
|
||||
get(
|
||||
isRowSelectedComponentFamilyState({
|
||||
scopeId,
|
||||
isRowSelectedComponentFamilyState.atomFamily({
|
||||
instanceId,
|
||||
familyKey: rowId,
|
||||
}),
|
||||
) === true,
|
||||
|
@ -1,23 +1,26 @@
|
||||
import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { tableRowIdsComponentState } from '@/object-record/record-table/states/tableRowIdsComponentState';
|
||||
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
|
||||
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
|
||||
|
||||
export const unselectedRowIdsComponentSelector =
|
||||
createComponentReadOnlySelector<string[]>({
|
||||
key: 'unselectedRowIdsComponentSelector',
|
||||
get:
|
||||
({ scopeId }) =>
|
||||
({ get }) => {
|
||||
const rowIds = get(tableRowIdsComponentState({ scopeId }));
|
||||
export const unselectedRowIdsComponentSelector = createComponentSelectorV2<
|
||||
string[]
|
||||
>({
|
||||
key: 'unselectedRowIdsComponentSelector',
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
get:
|
||||
({ instanceId }) =>
|
||||
({ get }) => {
|
||||
const rowIds = get(tableRowIdsComponentState.atomFamily({ instanceId }));
|
||||
|
||||
return rowIds.filter(
|
||||
(rowId) =>
|
||||
get(
|
||||
isRowSelectedComponentFamilyState({
|
||||
scopeId,
|
||||
familyKey: rowId,
|
||||
}),
|
||||
) === false,
|
||||
);
|
||||
},
|
||||
});
|
||||
return rowIds.filter(
|
||||
(rowId) =>
|
||||
get(
|
||||
isRowSelectedComponentFamilyState.atomFamily({
|
||||
instanceId,
|
||||
familyKey: rowId,
|
||||
}),
|
||||
) === false,
|
||||
);
|
||||
},
|
||||
});
|
||||
|
@ -1,15 +1,19 @@
|
||||
import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
|
||||
import { tableColumnsComponentState } from '@/object-record/record-table/states/tableColumnsComponentState';
|
||||
import { createComponentReadOnlySelector } from '@/ui/utilities/state/component-state/utils/createComponentReadOnlySelector';
|
||||
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
|
||||
|
||||
export const visibleTableColumnsComponentSelector =
|
||||
createComponentReadOnlySelector({
|
||||
key: 'visibleTableColumnsComponentSelector',
|
||||
get:
|
||||
({ scopeId }) =>
|
||||
({ get }) => {
|
||||
const columns = get(tableColumnsComponentState({ scopeId }));
|
||||
return columns
|
||||
.filter((column) => column.isVisible)
|
||||
.sort((columnA, columnB) => columnA.position - columnB.position);
|
||||
},
|
||||
});
|
||||
export const visibleTableColumnsComponentSelector = createComponentSelectorV2({
|
||||
key: 'visibleTableColumnsComponentSelector',
|
||||
componentInstanceContext: RecordTableComponentInstanceContext,
|
||||
get:
|
||||
({ instanceId }) =>
|
||||
({ get }) => {
|
||||
const columns = get(
|
||||
tableColumnsComponentState.atomFamily({ instanceId }),
|
||||
);
|
||||
|
||||
return columns
|
||||
.filter((column) => column.isVisible)
|
||||
.sort((columnA, columnB) => columnA.position - columnB.position);
|
||||
},
|
||||
});
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user