From 52ef09afce5dc8d4fa746ecee492c0c6578a3516 Mon Sep 17 00:00:00 2001 From: David Matejka Date: Tue, 14 Feb 2023 11:16:19 +0100 Subject: [PATCH] datagrid: major refactoring --- .../admin-sandbox/admin/pages/article.tsx | 1 + .../admin/src/components/Auto/AutoGrid.tsx | 10 +- .../DataGrid/base/DataGridCellPublicProps.ts | 8 -- .../DataGrid/base/DataGridColumn.ts | 62 -------- .../DataGrid/base/DataGridColumnKey.ts | 1 - .../DataGridContainer/DataGridContainer.tsx | 102 ------------- .../DataGridContainerGrid.tsx | 28 ---- .../DataGridContainerHeader.tsx | 82 ----------- .../DataGridContainerTable.tsx | 135 ------------------ .../DataGrid/base/DataGridContainer/Types.ts | 35 ----- .../DataGrid/base/DataGridContainer/index.ts | 2 - .../DataGrid/base/DataGridFilterArtifact.ts | 3 - .../base/DataGridFilterArtifactStore.ts | 4 - .../DataGrid/base/DataGridHeaderCell.tsx | 103 ------------- .../base/DataGridHiddenColumnsStateStore.ts | 3 - .../DataGrid/base/DataGridLayout.ts | 4 - .../base/DataGridOrderDirectionStore.ts | 4 - .../DataGrid/base/DataGridSetFilter.ts | 11 -- .../base/DataGridSetIsColumnHidden.ts | 3 - .../DataGrid/base/DataGridSetOrderBy.ts | 6 - .../collections/DataGrid/base/GetNewFilter.ts | 11 -- .../DataGrid/base/GetNewOrderBy.ts | 11 -- .../collections/DataGrid/base/index.ts | 22 --- .../collections/DataGrid/base/useDataGrid.ts | 7 - .../base/useDataGridDisplayedState.ts | 40 ------ .../DataGrid/cells/BooleanCell.tsx | 59 +++----- .../DataGrid/cells/CoalesceTextCell.tsx | 49 ++++--- .../collections/DataGrid/cells/DateCell.tsx | 77 +++------- .../collections/DataGrid/cells/EnumCell.tsx | 70 +++------ .../DataGrid/cells/GenericCell.tsx | 7 +- .../DataGrid/cells/HasManyAbsentCell.tsx | 21 +-- .../DataGrid/cells/HasManySelectCell.tsx | 59 +++++--- .../DataGrid/cells/HasOneSelectCell.tsx | 45 ++++-- .../collections/DataGrid/cells/NumberCell.tsx | 85 ++--------- .../collections/DataGrid/cells/TextCell.tsx | 82 +++-------- .../collections/DataGrid/cells/common.ts | 34 +++++ .../collections/DataGrid/cells/index.ts | 4 +- .../DataGrid/grid/ControlledDataGrid.tsx | 84 ----------- .../collections/DataGrid/grid/DataGrid.tsx | 60 -------- .../DataGrid/grid/DataGridColumn.ts | 12 ++ .../grid/createControlledDataGrid.tsx | 29 ++++ .../DataGrid/grid/createDataGrid.tsx | 53 +++++++ .../DataGrid/grid/createDataGridRenderer.tsx | 52 +++++++ .../collections/DataGrid/grid/index.ts | 6 +- .../normalizeInitialHiddenColumnsState.ts | 5 - .../collections/DataGrid/grid/renderGrid.tsx | 73 ---------- .../collections/DataGrid/grid/useDataGrid.ts | 7 + .../collections/DataGrid/index.ts | 4 +- .../{grid => internal}/collectFilters.ts | 5 +- .../{grid => internal}/collectOrderBy.ts | 5 +- .../cycleOrderDirection.ts} | 2 +- .../{base => internal}/getColumnFilter.ts | 3 +- .../{base => internal}/getColumnOrderBy.ts | 6 +- .../{paging => internal}/gridPagingReducer.ts | 3 +- .../gridTemplateAnalyzer.ts | 5 +- .../normalizeInitialFilters.ts | 4 +- .../normalizeInitialHiddenColumnsState.ts | 5 + .../normalizeInitialOrderBys.ts | 4 +- .../internal/useDataGridDisplayedState.ts | 55 +++++++ .../{base => internal}/useDataGridKey.ts | 0 .../{base => internal}/useDataGridState.ts | 22 +-- .../useDataGridTotalCount.ts | 1 - .../DataGrid/{grid => internal}/useFilters.ts | 5 +- .../useGridPagingState.ts | 5 +- .../useHiddenColumnsState.ts | 4 +- .../{grid => internal}/useOrderBys.ts | 11 +- .../DataGrid/internal/usePagingInfo.ts | 13 ++ .../DataGrid/paging/GridPagingAction.ts | 12 -- .../DataGrid/paging/GridPagingState.ts | 5 - .../collections/DataGrid/paging/index.ts | 3 - .../collections/DataGrid/structure/index.ts | 1 - .../collections/DataGrid/types/column.ts | 49 +++++++ .../collections/DataGrid/types/filters.ts | 25 ++++ .../DataGridState.ts => types/gridState.ts} | 19 ++- .../collections/DataGrid/types/hiding.ts | 5 + .../collections/DataGrid/types/index.ts | 7 + .../collections/DataGrid/types/layout.ts | 2 + .../collections/DataGrid/types/ordering.ts | 17 +++ .../collections/DataGrid/types/paging.ts | 24 ++++ .../collections/DataGrid/types/rendering.ts | 23 +++ .../collections/DataGrid/ui/DataGrid.tsx | 15 ++ .../DataGrid/ui/cells/BooleanCell.tsx | 14 ++ .../DataGrid/ui/cells/CoalesceCell.tsx | 16 +++ .../DataGrid/ui/cells/DateCell.tsx | 67 +++++++++ .../DataGrid/ui/cells/EnumCell.tsx | 33 +++++ .../DataGrid/ui/cells/GenericCell.tsx | 4 + .../DataGrid/ui/cells/HasManyAbsentCell.tsx | 7 + .../DataGrid/ui/cells/HasManySelectCell.tsx | 11 ++ .../DataGrid/ui/cells/HasOneSelectCell.tsx | 11 ++ .../DataGrid/ui/cells/NumberCell.tsx | 33 +++++ .../DataGrid/ui/cells/TextCell.tsx | 33 +++++ .../collections/DataGrid/ui/cells/index.ts | 10 ++ .../dict}/dataGridCellsDictionary.ts | 0 .../{base => ui/dict}/dataGridDictionary.ts | 0 .../DataGrid/ui/filters/BooleanCellFilter.tsx | 35 +++++ .../DataGrid/ui/filters/EnumCellFilter.tsx | 44 ++++++ .../filters}/GenericTextCellFilter.tsx | 29 +--- .../ui/filters/HasManyAbsentCellFilter.tsx | 10 ++ .../filters}/NullConditionFilter.tsx | 12 +- .../DataGrid/ui/filters/NumberCellFilter.tsx | 54 +++++++ .../filters}/SelectCellFilter.tsx | 25 ++-- .../DataGrid/ui/filters/TextCellFilter.tsx | 38 +++++ .../collections/DataGrid/ui/filters/index.ts | 8 ++ .../collections/DataGrid/ui/index.ts | 10 ++ .../rendering}/DataGridColumnHiding.tsx | 31 ++-- .../ui/rendering/DataGridContainer.tsx | 33 +++++ .../DataGrid/ui/rendering/DataGridContent.tsx | 22 +++ .../rendering/DataGridFooter.tsx} | 43 +++--- .../rendering}/DataGridFullFilters.tsx | 54 ++++--- .../DataGrid/ui/rendering/DataGridHeader.tsx | 35 +++++ .../ui/rendering/DataGridHeaderCell.tsx | 125 ++++++++++++++++ .../ui/rendering/DataGridLayoutControl.tsx | 34 +++++ .../ui/rendering/DataGridPagingSummary.tsx | 23 +++ .../DataGrid/ui/rendering/DataGridTable.tsx | 62 ++++++++ .../ui/rendering/DataGridTableHead.tsx | 27 ++++ .../ui/rendering/DataGridTableRow.tsx | 50 +++++++ .../DataGrid/ui/rendering/DataGridTiles.tsx | 26 ++++ .../DataGrid/ui/rendering/index.ts | 13 ++ .../collections/DataGrid/ui/types.ts | 25 ++++ .../fieldViews/DateFieldView.tsx | 13 +- .../fieldViews/FieldFallbackView.tsx | 6 +- .../ChoiceField/hooks/useSelectOptions.ts | 2 +- .../bindingFacade/fields/HiddenField.tsx | 2 +- .../pageComponents/DataGridPage.tsx | 20 ++- packages/ui/src/components/Table/TableRow.tsx | 17 +-- 125 files changed, 1724 insertions(+), 1483 deletions(-) delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridCellPublicProps.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumn.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumnKey.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainer.tsx delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerGrid.tsx delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerHeader.tsx delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerTable.tsx delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/Types.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/index.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifact.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifactStore.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHeaderCell.tsx delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHiddenColumnsStateStore.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridLayout.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridOrderDirectionStore.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetFilter.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetIsColumnHidden.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetOrderBy.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewFilter.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewOrderBy.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/index.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGrid.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGridDisplayedState.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/cells/common.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/ControlledDataGrid.tsx delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/DataGrid.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/DataGridColumn.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/createControlledDataGrid.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/createDataGrid.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/createDataGridRenderer.tsx delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/normalizeInitialHiddenColumnsState.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/renderGrid.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/grid/useDataGrid.ts rename packages/admin/src/components/bindingFacade/collections/DataGrid/{grid => internal}/collectFilters.ts (74%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{grid => internal}/collectOrderBy.ts (69%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base/DataGridOrderDirection.ts => internal/cycleOrderDirection.ts} (84%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => internal}/getColumnFilter.ts (80%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => internal}/getColumnOrderBy.ts (72%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{paging => internal}/gridPagingReducer.ts (90%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{structure => internal}/gridTemplateAnalyzer.ts (90%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{grid => internal}/normalizeInitialFilters.ts (69%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/internal/normalizeInitialHiddenColumnsState.ts rename packages/admin/src/components/bindingFacade/collections/DataGrid/{grid => internal}/normalizeInitialOrderBys.ts (67%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/internal/useDataGridDisplayedState.ts rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => internal}/useDataGridKey.ts (100%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => internal}/useDataGridState.ts (72%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => internal}/useDataGridTotalCount.ts (95%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{grid => internal}/useFilters.ts (87%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{paging => internal}/useGridPagingState.ts (77%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{grid => internal}/useHiddenColumnsState.ts (86%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{grid => internal}/useOrderBys.ts (71%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/internal/usePagingInfo.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/paging/GridPagingAction.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/paging/GridPagingState.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/paging/index.ts delete mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/structure/index.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/column.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/filters.ts rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base/DataGridState.ts => types/gridState.ts} (50%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/hiding.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/index.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/layout.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/ordering.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/paging.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/types/rendering.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/DataGrid.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/BooleanCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/CoalesceCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/DateCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/EnumCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/GenericCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/HasManyAbsentCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/HasManySelectCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/HasOneSelectCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/NumberCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/TextCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/cells/index.ts rename packages/admin/src/components/bindingFacade/collections/DataGrid/{cells => ui/dict}/dataGridCellsDictionary.ts (100%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => ui/dict}/dataGridDictionary.ts (100%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/BooleanCellFilter.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/EnumCellFilter.tsx rename packages/admin/src/components/bindingFacade/collections/DataGrid/{cells => ui/filters}/GenericTextCellFilter.tsx (64%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/HasManyAbsentCellFilter.tsx rename packages/admin/src/components/bindingFacade/collections/DataGrid/{cells => ui/filters}/NullConditionFilter.tsx (75%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/NumberCellFilter.tsx rename packages/admin/src/components/bindingFacade/collections/DataGrid/{cells => ui/filters}/SelectCellFilter.tsx (58%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/TextCellFilter.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/index.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/index.ts rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => ui/rendering}/DataGridColumnHiding.tsx (63%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridContainer.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridContent.tsx rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base/DataGridContainer/DataGridContainerFooter.tsx => ui/rendering/DataGridFooter.tsx} (72%) rename packages/admin/src/components/bindingFacade/collections/DataGrid/{base => ui/rendering}/DataGridFullFilters.tsx (80%) create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridHeader.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridHeaderCell.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridLayoutControl.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridPagingSummary.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridTable.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridTableHead.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridTableRow.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridTiles.tsx create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/index.ts create mode 100644 packages/admin/src/components/bindingFacade/collections/DataGrid/ui/types.ts diff --git a/packages/admin-sandbox/admin/pages/article.tsx b/packages/admin-sandbox/admin/pages/article.tsx index 095ae50538..d7061e80ac 100644 --- a/packages/admin-sandbox/admin/pages/article.tsx +++ b/packages/admin-sandbox/admin/pages/article.tsx @@ -33,6 +33,7 @@ const stateOptions = { export const List = () => ['entities'] + entities: DataGridProps<{}>['entities'] createViewLinkTarget?: (entity: string) => RoutingLinkTarget createEditLinkTarget?: (entity: string) => RoutingLinkTarget } diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridCellPublicProps.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridCellPublicProps.ts deleted file mode 100644 index 67249a56d8..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridCellPublicProps.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type { Justification } from '@contember/ui' - -export interface DataGridCellPublicProps { - justification?: Justification - shrunk?: boolean - hidden?: boolean - canBeHidden?: boolean -} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumn.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumn.ts deleted file mode 100644 index fdebf85587..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumn.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { BindingError, Environment } from '@contember/react-binding' -import type { ComponentType, ReactElement, ReactNode } from 'react' -import type { DataGridCellPublicProps } from './DataGridCellPublicProps' -import type { DataGridColumnKey } from './DataGridColumnKey' -import type { DataGridFilterArtifact } from './DataGridFilterArtifact' -import type { DataGridHeaderCellPublicProps } from './DataGridHeaderCell' -import type { DataGridOrderDirection } from './DataGridOrderDirection' -import type { DataGridSetFilter } from './DataGridSetFilter' -import type { GetNewFilter } from './GetNewFilter' -import type { GetNewOrderBy } from './GetNewOrderBy' - -export interface FilterRendererProps { - filter: FA - setFilter: DataGridSetFilter - environment: Environment -} - -export type DataGridColumnFiltering = - | { - enableFiltering: false - } - | { - enableFiltering?: true - initialFilter?: FA - getNewFilter: GetNewFilter - emptyFilter: FA - filterRenderer: ComponentType> - } - -export type DataGridColumnOrdering = - | { - enableOrdering: false - } - | { - enableOrdering?: true - initialOrder?: DataGridOrderDirection - getNewOrderBy: GetNewOrderBy - } - -export type DataGridColumnPublicProps = - & DataGridHeaderCellPublicProps - & DataGridCellPublicProps - & { - columnKey?: string - children?: ReactNode - } - -export type DataGridColumnProps = - & DataGridColumnPublicProps - & DataGridColumnFiltering - & DataGridColumnOrdering - -export type DataGridColumns = Map - -// This is deliberately not a Component! -export const DataGridColumn: ( - props: DataGridColumnProps, -) => ReactElement = ( - props: DataGridColumnProps, -): ReactElement => { - throw new BindingError() -} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumnKey.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumnKey.ts deleted file mode 100644 index e00516ff10..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumnKey.ts +++ /dev/null @@ -1 +0,0 @@ -export type DataGridColumnKey = string diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainer.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainer.tsx deleted file mode 100644 index 610d237339..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainer.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { Component } from '@contember/react-binding' -import { Stack, useComponentClassName } from '@contember/ui' -import { FunctionComponent } from 'react' -import { useMessageFormatter } from '../../../../../../i18n' -import { dataGridDictionary } from '../dataGridDictionary' -import { useDataGridTotalCount } from '../useDataGridTotalCount' -import { DataGridContainerFooter } from './DataGridContainerFooter' -import { DataGridContainerGrid } from './DataGridContainerGrid' -import { DataGridContainerHeader } from './DataGridContainerHeader' -import { DataGridContainerTable } from './DataGridContainerTable' -import type { DataGridContainerProps } from './Types' - -export const DataGridContainer: FunctionComponent = Component( - ({ - accessor, - allowAggregateFilterControls, - allowColumnVisibilityControls, - desiredState, - displayedState, - emptyMessage, - emptyMessageComponent, - entityName, - filter, - onEntityClick, - selectedEntityIds, - setFilter, - setIsColumnHidden, - setLayout, - setOrderBy, - tile, - tileSize, - updatePaging, - }) => { - const componentClassName = useComponentClassName('data-grid') - const { - paging: { pageIndex, itemsPerPage }, - layout, - } = desiredState - const formatMessage = useMessageFormatter(dataGridDictionary) - const totalCount = useDataGridTotalCount(entityName, filter) - const normalizedItemCount = itemsPerPage === null ? accessor.length : totalCount - const pagesCount = - totalCount !== undefined && itemsPerPage !== null ? Math.ceil(totalCount / itemsPerPage) : undefined - - const pagingSummary = ( - <> - {pagesCount === undefined - ? formatMessage('dataGrid.paging.status.unknownPageTotal', { pageNumber: pageIndex + 1 }) - : formatMessage('dataGrid.paging.status.knownPageTotal', { - pageNumber: pageIndex + 1, - totalPageCount: pagesCount, - })} - {normalizedItemCount !== undefined && - ` ${formatMessage('dataGrid.paging.status.itemCount', { itemCount: normalizedItemCount })}`} - - ) - - return ( - - - {tile && layout === 'tiles' - ? - : - } - {!!normalizedItemCount && ( - - )} - - ) - }, - props => <>{props.children}, - 'DataGridContainer', -) diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerGrid.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerGrid.tsx deleted file mode 100644 index 0e40934d4d..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerGrid.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { Entity } from '@contember/react-binding' -import { Grid, useComponentClassName } from '@contember/ui' -import { memo } from 'react' -import { DataGridContainerProps } from './Types' - -export type DataGridContainerGridProps = - Pick - -export const DataGridContainerGrid = memo(({ - accessor, - tileSize = 160, - tile, -}: DataGridContainerGridProps) => ( -
- - {!!accessor.length && Array.from(accessor, entity => ( - - {tile} - - ))} - -
-)) -DataGridContainerGrid.displayName = 'DataGridContainerGrid' diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerHeader.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerHeader.tsx deleted file mode 100644 index 2b3cf0bb2e..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerHeader.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { Button, ButtonList, Divider, Icon, LayoutPageStickyContainer, Stack } from '@contember/ui' -import { memo, ReactNode, useCallback } from 'react' -import { useMessageFormatter } from '../../../../../../i18n' -import { DataGridColumnHiding } from '../DataGridColumnHiding' -import { dataGridDictionary } from '../dataGridDictionary' -import { DataGridFullFilters } from '../DataGridFullFilters' -import { DataGridContainerProps } from './Types' - -interface DataGridContainerHeaderProps - extends Pick< - DataGridContainerProps, - | 'accessor' - | 'allowAggregateFilterControls' - | 'allowColumnVisibilityControls' - | 'desiredState' - | 'setFilter' - | 'setIsColumnHidden' - | 'setLayout' - > { - hasTile: boolean - pagingSummary: ReactNode - } - -export const DataGridContainerHeader = memo(({ - accessor, - allowAggregateFilterControls, - allowColumnVisibilityControls, - desiredState, - hasTile, - pagingSummary, - setFilter, - setIsColumnHidden, - setLayout, -}) => { - const { layout } = desiredState - const formatMessage = useMessageFormatter(dataGridDictionary) - - const setDefaultView = useCallback(() => setLayout('default'), [setLayout]) - const setTileView = useCallback(() => setLayout('tiles'), [setLayout]) - - return ( - - - - {hasTile && <> - - - - - - - } - {layout !== 'tiles' && allowColumnVisibilityControls !== false && ( - - ) - } - {allowAggregateFilterControls !== false && ( - - )} - -
{pagingSummary}
- - - ) -}) -DataGridContainerHeader.displayName = 'DataGridContainerHeader' diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerTable.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerTable.tsx deleted file mode 100644 index a3489cf587..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/DataGridContainerTable.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { Entity, EntityId } from '@contember/react-binding' -import { Table, TableCell, TableRow, useComponentClassName } from '@contember/ui' -import { memo, useMemo } from 'react' -import { useMessageFormatter } from '../../../../../../i18n' -import { EmptyMessage } from '../../../helpers' -import { dataGridDictionary } from '../dataGridDictionary' -import { DataGridHeaderCell } from '../DataGridHeaderCell' -import { getColumnFilter } from '../getColumnFilter' -import type { DataGridContainerProps } from './Types' - -type DataGridContainerTableProps= - Pick - -export const DataGridContainerTable = memo(({ - accessor, - desiredState, - displayedState, - emptyMessage, - emptyMessageComponent, - onEntityClick, - selectedEntityIds, - setFilter, - setOrderBy, -}) => { - const { - filterArtifacts, - orderDirections, - columns, - } = desiredState - - const formatMessage = useMessageFormatter(dataGridDictionary) - - const onRowClick = useMemo(() => { - if (!onEntityClick) { - return undefined - } - return (id: EntityId) => { - const entity = accessor.getChildEntityById(id) - - if (entity) { - onEntityClick(entity) - } - } - }, [accessor, onEntityClick]) - - return ( - - {Array.from(columns) - // We use desired state here to give immediate feedback about column changes. - .filter(([columnKey]) => !desiredState.hiddenColumns[columnKey]) - .map(([columnKey, column]) => { - const filterArtifact = filterArtifacts[columnKey] - const orderDirection = orderDirections[columnKey] - const orderColumns = Object.keys(orderDirections) - return ( - 1 ? orderColumns.indexOf(columnKey) : undefined, - } : undefined} - setFilter={newFilter => setFilter(columnKey, newFilter)} - setOrderBy={(newOrderBy, append = false) => setOrderBy(columnKey, newOrderBy, append)} - headerJustification={column.headerJustification || column.justification} - shrunk={column.shrunk} - hasFilter={getColumnFilter(column, filterArtifact, accessor.environment) !== undefined} - header={column.header} - ascOrderIcon={column.ascOrderIcon} - descOrderIcon={column.descOrderIcon} - filterRenderer={column.enableFiltering !== false ? column.filterRenderer : undefined} - /> - ) - })} - - } - > - {!!accessor.length && - Array.from(accessor, entity => ( - - - {Array.from(columns) - .filter(([columnKey]) => !desiredState.hiddenColumns[columnKey]) - .map(([columnKey, column]) => { - // This is tricky. We need to render a table cell from here no matter what so that the cell count - // matches that of the headers. However, there might be a header displayed for a column whose data - // has not yet been fetched. Displaying its cell contents from here would cause an error. Also, the - // column may have just been hidden but the information hasn't made it to displayed sate yet. - // For these, we just display an empty cell then. - if (displayedState.hiddenColumns[columnKey]) { - return - } - return ( - - {column.children} - - ) - })} - - - ))} - {!accessor.length && ( - - - - {formatMessage(emptyMessage, 'dataGrid.emptyMessage.text')} - - - - )} -
- ) -}) -DataGridContainerTable.displayName = 'DataGridContainerTable' diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/Types.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/Types.ts deleted file mode 100644 index 349a70fc91..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/Types.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { EntityAccessor, EntityId, EntityListBaseProps, EntityName, Filter } from '@contember/react-binding' -import { ComponentType, ReactNode } from 'react' -import { EmptyMessageProps } from '../../../helpers' -import type { GridPagingAction } from '../../paging' -import { SetDataGridView } from '../DataGridLayout' -import type { DataGridSetColumnFilter } from '../DataGridSetFilter' -import type { DataGridSetIsColumnHidden } from '../DataGridSetIsColumnHidden' -import type { DataGridSetColumnOrderBy } from '../DataGridSetOrderBy' -import type { DataGridState } from '../DataGridState' - -export interface DataGridContainerPublicProps { - allowAggregateFilterControls?: boolean - allowColumnVisibilityControls?: boolean - emptyMessage?: ReactNode - emptyMessageComponent?: ComponentType // This can override 'emptyMessage' - emptyMessageComponentExtraProps?: {} - onEntityClick?: (entity: EntityAccessor) => void - selectedEntityIds?: EntityId[] - tile?: ReactNode - tileSize?: number -} - -export interface DataGridContainerOwnProps extends DataGridContainerPublicProps { - desiredState: DataGridState - displayedState: DataGridState - entityName: EntityName - filter: Filter - setFilter: DataGridSetColumnFilter - setIsColumnHidden: DataGridSetIsColumnHidden - setLayout: SetDataGridView - setOrderBy: DataGridSetColumnOrderBy - updatePaging: (action: GridPagingAction) => void -} - -export interface DataGridContainerProps extends DataGridContainerOwnProps, EntityListBaseProps {} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/index.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/index.ts deleted file mode 100644 index da8966884e..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridContainer/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './DataGridContainer' -export * from './Types' diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifact.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifact.ts deleted file mode 100644 index d254fcc5bd..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifact.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { Serializable } from '@contember/react-utils' - -export type DataGridFilterArtifact = Serializable diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifactStore.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifactStore.ts deleted file mode 100644 index 80b3cdeecf..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridFilterArtifactStore.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { DataGridColumnKey } from './DataGridColumnKey' -import type { DataGridFilterArtifact } from './DataGridFilterArtifact' - -export type DataGridFilterArtifactStore = Record diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHeaderCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHeaderCell.tsx deleted file mode 100644 index 7e3b8644a2..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHeaderCell.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import type { Environment } from '@contember/react-binding' -import { ActionableBox, Box, Dropdown, DropdownProps, Icon, Justification, TableHeaderCell } from '@contember/ui' -import { ComponentType, createElement, ReactElement, ReactNode, useMemo } from 'react' -import type { FilterRendererProps } from './DataGridColumn' -import type { DataGridFilterArtifact } from './DataGridFilterArtifact' -import { cycleOrderDirection, DataGridOrderDirection } from './DataGridOrderDirection' -import type { DataGridSetFilter } from './DataGridSetFilter' -import type { DataGridSetOrderBy } from './DataGridSetOrderBy' - -export interface DataGridHeaderCellPublicProps { - header?: ReactNode - shrunk?: boolean - headerJustification?: Justification - ascOrderIcon?: ReactNode - descOrderIcon?: ReactNode -} - -export interface DataGridHeaderCellInternalProps { - environment: Environment - hasFilter: boolean - emptyFilterArtifact: DataGridFilterArtifact - filterArtifact: DataGridFilterArtifact - orderState: { direction: Exclude, index: number | undefined } | undefined - setFilter: DataGridSetFilter - setOrderBy: DataGridSetOrderBy - filterRenderer: ComponentType> | undefined -} - -export interface DataGridHeaderCellProps extends DataGridHeaderCellInternalProps, DataGridHeaderCellPublicProps {} - -export function DataGridHeaderCell({ - ascOrderIcon, - descOrderIcon, - emptyFilterArtifact, - environment, - filterArtifact, - filterRenderer, - hasFilter, - header, - headerJustification, - orderState, - setFilter, - setOrderBy, - shrunk, -}: DataGridHeaderCellProps): ReactElement { - const buttonProps: DropdownProps['buttonProps'] = useMemo(() => ({ - intent: hasFilter ? 'primary' : 'default', - distinction: 'seamless', - size: 'small', - children: ( - - ), - }), [hasFilter]) - - return ( - - - setOrderBy(cycleOrderDirection(orderState?.direction ?? null), e.ctrlKey || e.metaKey)} style={{ cursor: 'pointer' }}> - {header} -   - {orderState && - <> - {{ - asc: ascOrderIcon ?? defaultAscIcon, - desc: descOrderIcon ?? defaultDescIcon, - }[orderState.direction]} - {orderState.index !== undefined ? `(${orderState.index + 1})` : null} - } - - {filterRenderer && ( - ( - { - setFilter(undefined) - requestClose() - }} - > - Filter: {header}}> - {createElement(filterRenderer, { - filter: filterArtifact === undefined ? emptyFilterArtifact : filterArtifact, - setFilter: setFilter, - environment: environment, - })} - - - )} - /> - )} - - - ) -} - -const defaultAscIcon = -const defaultDescIcon = diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHiddenColumnsStateStore.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHiddenColumnsStateStore.ts deleted file mode 100644 index 7fb0939efb..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridHiddenColumnsStateStore.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { DataGridColumnKey } from './DataGridColumnKey' - -export type DataGridHiddenColumnsStateStore = Record diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridLayout.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridLayout.ts deleted file mode 100644 index 817f6e2474..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridLayout.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { Default } from '@contember/ui' - -export type DataGridLayout = Default | 'tiles' -export type SetDataGridView = (layout: DataGridLayout) => void diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridOrderDirectionStore.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridOrderDirectionStore.ts deleted file mode 100644 index 14cef81381..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridOrderDirectionStore.ts +++ /dev/null @@ -1,4 +0,0 @@ -import type { DataGridColumnKey } from './DataGridColumnKey' -import type { DataGridOrderDirection } from './DataGridOrderDirection' - -export type DataGridOrderDirectionStore = Record> diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetFilter.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetFilter.ts deleted file mode 100644 index 26685d104f..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetFilter.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { DataGridColumnKey } from './DataGridColumnKey' -import type { DataGridFilterArtifact } from './DataGridFilterArtifact' - -export type DataGridSetFilter = ( - filter: FA | undefined, -) => void - -export type DataGridSetColumnFilter = ( - columnKey: DataGridColumnKey, - columnFilter: FA | undefined, -) => void diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetIsColumnHidden.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetIsColumnHidden.ts deleted file mode 100644 index 9a25a120fb..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetIsColumnHidden.ts +++ /dev/null @@ -1,3 +0,0 @@ -import type { DataGridColumnKey } from './DataGridColumnKey' - -export type DataGridSetIsColumnHidden = (columnKey: DataGridColumnKey, isHidden: boolean) => void diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetOrderBy.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetOrderBy.ts deleted file mode 100644 index 83b0671e13..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridSetOrderBy.ts +++ /dev/null @@ -1,6 +0,0 @@ -import type { DataGridColumnKey } from './DataGridColumnKey' -import type { DataGridOrderDirection } from './DataGridOrderDirection' - -export type DataGridSetOrderBy = (setOrderBy: DataGridOrderDirection, append?: boolean) => void - -export type DataGridSetColumnOrderBy = (columnKey: DataGridColumnKey, columnOrderBy: DataGridOrderDirection, append?: boolean) => void diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewFilter.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewFilter.ts deleted file mode 100644 index 8765594a3a..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewFilter.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { Environment, SugaredFilter } from '@contember/react-binding' -import type { DataGridFilterArtifact } from './DataGridFilterArtifact' - -export interface GetNewFilterOptions { - environment: Environment -} - -export type GetNewFilter = ( - filterArtifact: FA, - options: GetNewFilterOptions, -) => SugaredFilter | undefined diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewOrderBy.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewOrderBy.ts deleted file mode 100644 index 48a3d92436..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/GetNewOrderBy.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { Environment, SugaredOrderBy } from '@contember/react-binding' -import type { DataGridOrderDirection } from './DataGridOrderDirection' - -export interface GetNewOrderByOptions { - environment: Environment -} - -export type GetNewOrderBy = ( - newDirection: DataGridOrderDirection, - options: GetNewOrderByOptions, -) => SugaredOrderBy | undefined diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/index.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/index.ts deleted file mode 100644 index c87385a14b..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -export type { DataGridCellPublicProps } from './DataGridCellPublicProps' -export * from './DataGridColumn' -export * from './DataGridColumnKey' -export * from './DataGridContainer' -export type { DataGridDictionary } from './dataGridDictionary' -export * from './DataGridFilterArtifact' -export * from './DataGridFilterArtifactStore' -export * from './DataGridHeaderCell' -export * from './DataGridHiddenColumnsStateStore' -export * from './DataGridLayout' -export * from './DataGridOrderDirection' -export * from './DataGridOrderDirectionStore' -export * from './DataGridSetFilter' -export * from './DataGridSetIsColumnHidden' -export * from './DataGridSetOrderBy' -export * from './DataGridState' -export * from './getColumnFilter' -export * from './getColumnOrderBy' -export * from './GetNewFilter' -export * from './GetNewOrderBy' -export * from './useDataGrid' -export * from './useDataGridState' diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGrid.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGrid.ts deleted file mode 100644 index 121549d8c2..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGrid.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ControlledDataGridProps, DataGridProps } from '../grid' -import { useDataGridState } from './useDataGridState' - -export const useDataGrid = (props: DataGridProps): ControlledDataGridProps => { - const [state, stateMethods] = useDataGridState(props) - return { ...props, state, stateMethods } -} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGridDisplayedState.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGridDisplayedState.ts deleted file mode 100644 index d1b5f0a920..0000000000 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/useDataGridDisplayedState.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { ReactNode, useEffect, useState } from 'react' -import { DataGridState, DataGridStateMethods } from './DataGridState' -import { renderGrid } from '../grid/renderGrid' -import { TreeRootId, useEnvironment, useExtendTree } from '@contember/react-binding' - -export const useDataGridDisplayedState = (stateMethods: DataGridStateMethods, desiredState: DataGridState, tile?: ReactNode): { - gridState: DataGridState | undefined - treeRootId: TreeRootId | undefined -} => { - const [displayedState, setDisplayedState] = useState<{ - gridState: DataGridState | undefined - treeRootId: TreeRootId | undefined - }>({ - gridState: undefined, - treeRootId: undefined, - }) - - const environment = useEnvironment() - const extendTree = useExtendTree() - useEffect(() => { - (async () => { - if (displayedState.gridState === desiredState) { - return - } - const newTreeRootId = await extendTree( - renderGrid(stateMethods, undefined, desiredState, desiredState, environment, { - tile, - }), - ) - if (newTreeRootId) { - setDisplayedState({ - gridState: desiredState, - treeRootId: newTreeRootId, - }) - } - })() - }, [desiredState, displayedState, environment, extendTree, stateMethods, tile]) - - return displayedState -} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/BooleanCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/BooleanCell.tsx index d558cc1824..70a891c742 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/BooleanCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/BooleanCell.tsx @@ -1,30 +1,33 @@ -import { Component, QueryLanguage, wrapFilterInHasOnes } from '@contember/react-binding' +import { Component, QueryLanguage, SugarableRelativeSingleField, wrapFilterInHasOnes } from '@contember/react-binding' import type { Input } from '@contember/client' -import { Checkbox, FieldContainer, Stack } from '@contember/ui' -import type { FunctionComponent } from 'react' -import { useMessageFormatter } from '../../../../../i18n' -import { BooleanFieldView, BooleanFieldViewProps } from '../../../fieldViews' -import { DataGridColumn, DataGridColumnPublicProps, DataGridOrderDirection } from '../base' -import { dataGridCellsDictionary } from './dataGridCellsDictionary' +import type { ComponentType, FunctionComponent } from 'react' +import { DataGridColumnCommonProps, DataGridOrderDirection, FilterRendererProps } from '../types' +import { DataGridColumn } from '../grid' + +export type BooleanCellRendererProps = { + field: SugarableRelativeSingleField | string +} export type BooleanCellProps = - & DataGridColumnPublicProps - & BooleanFieldViewProps + & DataGridColumnCommonProps + & BooleanCellRendererProps & { disableOrder?: boolean initialOrder?: DataGridOrderDirection } -type BooleanFilterArtifacts = { +export type BooleanFilterArtifacts = { includeTrue: boolean includeFalse: boolean includeNull: boolean } -export const BooleanCell: FunctionComponent = Component(props => { +export const createBooleanCell = ({ FilterRenderer, ValueRenderer }: { + FilterRenderer: ComponentType>, + ValueRenderer: ComponentType +}): FunctionComponent => Component(props => { return ( - shrunk {...props} enableOrdering={!props.disableOrder as true} getNewOrderBy={(newDirection, { environment }) => @@ -56,37 +59,9 @@ export const BooleanCell: FunctionComponent = Component(props includeTrue: false, includeNull: false, }} - filterRenderer={({ filter, setFilter }) => { - const formatMessage = useMessageFormatter(dataGridCellsDictionary) - return ( - - {( - [ - ['includeTrue', formatMessage('dataGridCells.booleanCell.includeTrue')], - ['includeFalse', formatMessage('dataGridCells.booleanCell.includeFalse')], - ['includeNull', formatMessage('dataGridCells.booleanCell.includeNull')], - ] as const - ).map(([item, label], index) => ( - - { - setFilter({ ...filter, [item]: checked }) - }} - /> - - ))} - - ) - }} + filterRenderer={FilterRenderer} > - + ) }, 'BooleanCell') diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/CoalesceTextCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/CoalesceTextCell.tsx index 7d76708742..3f4a8e5448 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/CoalesceTextCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/CoalesceTextCell.tsx @@ -1,21 +1,32 @@ -import { CoalesceFieldView, CoalesceFieldViewProps, FieldFallbackViewPublicProps } from '../../../fieldViews' -import { Component, FieldValue, Filter, QueryLanguage, wrapFilterInHasOnes } from '@contember/react-binding' -import { DataGridColumn, DataGridColumnPublicProps } from '../base' -import { FC, ReactElement } from 'react' -import { createGenericTextCellFilterCondition, GenericTextCellFilter } from './GenericTextCellFilter' -import { Stack } from '@contember/ui' +import { + Component, + Filter, + QueryLanguage, + SugarableRelativeSingleField, + wrapFilterInHasOnes, +} from '@contember/react-binding' +import { ComponentType, FunctionComponent } from 'react' +import { DataGridColumnCommonProps, FilterRendererProps } from '../types' +import { DataGridColumn } from '../grid' +import { createGenericTextCellFilterCondition } from './common' -export type CoalesceTextCellProps = - & DataGridColumnPublicProps - & FieldFallbackViewPublicProps - & CoalesceFieldViewProps +export type CoalesceCellRendererProps = { + fields: (SugarableRelativeSingleField | string)[] +} + +export type CoalesceTextCellProps = + & DataGridColumnCommonProps + & CoalesceCellRendererProps -type CoalesceTextFilterArtifacts = { +export type CoalesceTextFilterArtifacts = { mode: 'matches' | 'matchesExactly' | 'startsWith' | 'endsWith' | 'doesNotMatch' query: string } -export const CoalesceTextCell: FC = Component(props => { +export const createCoalesceCell = ({ FilterRenderer, ValueRenderer }: { + FilterRenderer: ComponentType>, + ValueRenderer: ComponentType +}): FunctionComponent => Component(props => { return ( {...props} @@ -39,17 +50,9 @@ export const CoalesceTextCell: FC = Component(props => { mode: 'matches', query: '', }} - filterRenderer={props => { - return ( - - - - ) - }} + filterRenderer={FilterRenderer} > - + ) -}, 'CoalesceTextCell') as ( - props: CoalesceTextCellProps, -) => ReactElement +}, 'CoalesceTextCell') diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/DateCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/DateCell.tsx index 3bc6b743c7..63188ddc94 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/DateCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/DateCell.tsx @@ -1,29 +1,31 @@ -import { Component, QueryLanguage, wrapFilterInHasOnes } from '@contember/react-binding' +import { Component, QueryLanguage, SugarableRelativeSingleField, wrapFilterInHasOnes } from '@contember/react-binding' import type { Input } from '@contember/client' -import { DateInput, FieldContainer, Stack, toDateString } from '@contember/ui' -import { forwardRef, FunctionComponent, memo, ReactNode, useCallback } from 'react' -import { useMessageFormatter } from '../../../../../i18n' -import { dateToStringWithoutTimezone } from '../../../../../utils' -import { DateFieldView, DateFieldViewProps } from '../../../fieldViews' -import { DataGridColumn, DataGridColumnPublicProps, DataGridOrderDirection } from '../base' -import { dataGridCellsDictionary } from './dataGridCellsDictionary' +import { ComponentType, FunctionComponent } from 'react' +import { DataGridColumnCommonProps, DataGridOrderDirection, FilterRendererProps } from '../types' +import { DataGridColumn } from '../grid' +export type DateCellRendererProps = { + field: SugarableRelativeSingleField | string +} export type DateCellProps = - & DataGridColumnPublicProps - & DateFieldViewProps + & DateCellRendererProps + & DataGridColumnCommonProps & { disableOrder?: boolean initialOrder?: DataGridOrderDirection } -type DateRange = { +type DateRangeFilterArtifacts = { start: string | null end: string | null } -export const DateCell: FunctionComponent = Component(props => { +export const createDateCell = ({ FilterRenderer, ValueRenderer }: { + FilterRenderer: ComponentType>, + ValueRenderer: ComponentType +}): FunctionComponent => Component(props => { return ( - + {...props} enableOrdering={!props.disableOrder as true} getNewOrderBy={(newDirection, { environment }) => @@ -52,54 +54,11 @@ export const DateCell: FunctionComponent = Component(props => { start: null, end: null, }} - filterRenderer={({ filter, setFilter }) => { - const formatMessage = useMessageFormatter(dataGridCellsDictionary) - - const start = toDateString(filter.start) ?? '' - const end = toDateString(filter.end) ?? '' - - const onDateStartChange = useCallback((value?: string | null) => { - setFilter({ - ...filter, - start: value ? dateToStringWithoutTimezone(new Date(value)) : null, - }) - }, [filter, setFilter]) - const onDateEndChange = useCallback((value?: string | null) => { - setFilter({ - ...filter, - end: value ? dateToStringWithoutTimezone(new Date(value)) : null, - }) - }, [filter, setFilter]) - - return ( - - - - - - - - - ) - }} + filterRenderer={FilterRenderer} > - + ) }, 'DateCell') -const DateBoundInput = memo( - forwardRef(({ label, children }: { label: string, children: ReactNode }, ref: any) => ( - - {children} - - )), -) + diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/EnumCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/EnumCell.tsx index 08f4f8327d..9fbc5cb29f 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/EnumCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/EnumCell.tsx @@ -1,32 +1,36 @@ -import { ReactNode, useMemo } from 'react' -import { DataGridColumn, DataGridColumnPublicProps } from '../base' -import { Component, QueryLanguage, SugaredField, SugaredFieldProps, wrapFilterInHasOnes } from '@contember/react-binding' +import { ComponentType, FunctionComponent, ReactNode } from 'react' +import { Component, QueryLanguage, SugarableRelativeSingleField, wrapFilterInHasOnes } from '@contember/react-binding' import { GraphQlLiteral, Input } from '@contember/client' -import { FieldFallbackView, FieldFallbackViewPublicProps } from '../../../fieldViews' -import { Checkbox, FieldContainer } from '@contember/ui' -import { NullConditionFilter, NullConditionFilterPublicProps } from './NullConditionFilter' +import { DataGridColumnCommonProps, FilterRendererProps } from '../types' +import { DataGridColumn } from '../grid' + +export type EnumCellRendererProps = { + field: SugarableRelativeSingleField | string +} export type EnumCellProps = - & DataGridColumnPublicProps - & FieldFallbackViewPublicProps - & NullConditionFilterPublicProps + & DataGridColumnCommonProps + & EnumCellRendererProps + & { - field: SugaredFieldProps['field'] options: Record format?: (value: string | null) => ReactNode -} + } -export type EnumCellArtifacts = { +export type EnumCellFilterArtifacts = { values: string[] nullCondition: boolean } /** @deprecated */ -type LegacyEnumCellArtifacts = string[] +export type LegacyEnumCellArtifacts = string[] -export const EnumCell = Component(props => { +export const createEnumCell = ({ FilterRenderer, ValueRenderer }: { + FilterRenderer: ComponentType>, + ValueRenderer: ComponentType +}): FunctionComponent => Component(props => { return ( - + {...props} enableOrdering={true} getNewOrderBy={(newDirection, { environment }) => @@ -58,41 +62,9 @@ export const EnumCell = Component(props => { }) }} emptyFilter={{ nullCondition: false, values: [] }} - filterRenderer={({ filter: inFilter, setFilter, environment }) => { - const filter = useMemo(() => Array.isArray(inFilter) ? { nullCondition: false, values: inFilter } : inFilter, [inFilter]) - const values = filter.values - - const checkboxList = Object.entries(props.options).map(([value, label]) => ( - - { - setFilter({ ...filter, values: checked ? [...values, value] : values.filter(it => it !== value) }) - }} - /> - - )) - - return <> - {checkboxList} - - - }} + filterRenderer={filterProps => } > - field={props.field} format={value => { - if (value === null) { - return - } - if (props.format) { - return props.format(props.options[value]) - } - return props.options[value] - }} /> + ) }, 'EnumCell') diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/GenericCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/GenericCell.tsx index 440b6ec36c..d219f44894 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/GenericCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/GenericCell.tsx @@ -1,10 +1,11 @@ import { Component } from '@contember/react-binding' import type { FunctionComponent } from 'react' -import { DataGridColumn, DataGridColumnPublicProps } from '../base' +import { DataGridColumnCommonProps } from '../types' +import { DataGridColumn } from '../grid' -export type GenericCellProps = DataGridColumnPublicProps +export type GenericCellProps = DataGridColumnCommonProps -export const GenericCell: FunctionComponent = Component(props => { +export const createGenericCell = (): FunctionComponent => Component(props => { return ( {...props} enableOrdering={false} enableFiltering={false}> {props.children} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManyAbsentCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManyAbsentCell.tsx index 049a1e9c9c..980826b6b6 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManyAbsentCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManyAbsentCell.tsx @@ -6,21 +6,21 @@ import { SugaredRelativeEntityList, wrapFilterInHasOnes, } from '@contember/react-binding' -import { Checkbox, FieldContainer } from '@contember/ui' import type { ComponentType, FunctionComponent, ReactElement, ReactNode } from 'react' -import type { FieldFallbackViewPublicProps } from '../../../fieldViews' -import { DataGridColumn, DataGridColumnPublicProps } from '../base' +import { DataGridColumnCommonProps, FilterRendererProps } from '../types' +import { DataGridColumn } from '../grid' export type HasManyAbsentCellProps = - & DataGridColumnPublicProps - & FieldFallbackViewPublicProps + & DataGridColumnCommonProps & SugaredRelativeEntityList & { render: ComponentType children: ReactNode } -export const HasManyAbsentCell: FunctionComponent = Component(props => { +export const createHasManyAbsentCell = ({ FilterRenderer }: { + FilterRenderer: ComponentType>, +}): FunctionComponent => Component(props => { return ( {...props} @@ -40,14 +40,7 @@ export const HasManyAbsentCell: FunctionComponent = Comp }) }} emptyFilter={false} - filterRenderer={({ filter, setFilter }) => { - return - setFilter(!!checked)} /> - - }} + filterRenderer={FilterRenderer} > diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManySelectCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManySelectCell.tsx index 75f66e9c67..95a7fd9db6 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManySelectCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasManySelectCell.tsx @@ -4,30 +4,33 @@ import { HasMany, QueryLanguage, SugaredRelativeEntityList, - SugaredRelativeSingleEntity, useEntityList, wrapFilterInHasOnes, } from '@contember/react-binding' -import { Fragment, FunctionComponent, ReactElement, ReactNode, useMemo } from 'react' +import { ComponentType, Fragment, FunctionComponent, ReactElement, ReactNode, useMemo } from 'react' import { BaseDynamicChoiceField } from '../../../fields' import { renderDynamicChoiceFieldStatic } from '../../../fields/ChoiceField/renderDynamicChoiceFieldStatic' -import { FieldFallbackView, FieldFallbackViewPublicProps } from '../../../fieldViews' -import { DataGridColumn, DataGridColumnPublicProps } from '../base' -import { SelectCellArtifacts, SelectCellFilter } from './SelectCellFilter' import { useDesugaredOptionPath } from '../../../fields/ChoiceField/hooks/useDesugaredOptionPath' +import { DataGridColumnCommonProps, FilterRendererProps } from '../types' +import { DataGridColumn } from '../grid' +import { SelectCellArtifacts, SelectCellFilterExtraProps } from './common' +import { useCurrentlyChosenEntities } from '../../../fields/ChoiceField/hooks/useCurrentlyChosenEntities' +import { useSelectOptions } from '../../../fields/ChoiceField/hooks/useSelectOptions' -export type HasManySelectProps = - & DataGridColumnPublicProps +export type HasManySelectRendererProps = & SugaredRelativeEntityList & BaseDynamicChoiceField - & FieldFallbackViewPublicProps - & SugaredRelativeSingleEntity - & { - renderElements?: (elements: ReactNode[]) => ReactElement - } -export const HasManySelectCell: FunctionComponent = Component(props => { +export type HasManySelectProps = + & HasManySelectRendererProps + & DataGridColumnCommonProps + + +export const createHasManySelectCell = ({ FilterRenderer, ValueRenderer }: { + FilterRenderer: ComponentType>, + ValueRenderer: ComponentType +}): FunctionComponent => Component(props => { return ( {...props} @@ -61,18 +64,30 @@ export const HasManySelectCell: FunctionComponent = Componen id: [], nullCondition: false, }} - filterRenderer={filterProps => } + filterRenderer={filterProps => { + const optionProps = { + lazy: { initialLimit: 0 }, + ...props, + } + const currentlyChosenEntities = useCurrentlyChosenEntities(optionProps, filterProps.filter.id) + const selectProps = useSelectOptions(optionProps, currentlyChosenEntities) + + return + }} > - + ) }, 'HasManySelectField') +export type HasManySelectCellElementsRenderer = (elements: ReactNode[]) => ReactElement -const HasManySelectCellContent = Component( +export const createHasManySelectCellRenderer = ({ renderElements = defaultElementsRenderer, FallbackRenderer = () => null }: { + renderElements?: HasManySelectCellElementsRenderer + FallbackRenderer?: ComponentType +}) => Component ReactElement +} & FallbackProps>( props => { const desugaredOptionPath = useDesugaredOptionPath(props, undefined) const entities = useEntityList(props) @@ -81,21 +96,21 @@ const HasManySelectCellContent = Component( [desugaredOptionPath.hasOneRelationPath, entities], ) - const elementsRenderer = props.renderElements ?? defaultElementsRenderer + const elementsRenderer = props.renderElements ?? renderElements if ('renderOption' in props) { return elementsRenderer(entitiesArray.map(it => props.renderOption(it))) } if ('field' in desugaredOptionPath) { if (entitiesArray.length === 0) { - return + return } return elementsRenderer(entitiesArray.map(it => { const val = it.getField(desugaredOptionPath.field).value if (val !== null) { return {val} } - return + return })) } diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasOneSelectCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasOneSelectCell.tsx index e8a8ce8fd1..1d3397cdb7 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasOneSelectCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/HasOneSelectCell.tsx @@ -6,22 +6,29 @@ import { useEntity, wrapFilterInHasOnes, } from '@contember/react-binding' -import type { FunctionComponent } from 'react' -import { DataGridColumn, DataGridColumnPublicProps } from '../base' +import type { ComponentType, FunctionComponent } from 'react' import { renderDynamicChoiceFieldStatic } from '../../../fields/ChoiceField/renderDynamicChoiceFieldStatic' import { BaseDynamicChoiceField } from '../../../fields' -import { FieldFallbackView, FieldFallbackViewPublicProps } from '../../../fieldViews' -import { SelectCellArtifacts, SelectCellFilter } from './SelectCellFilter' import { useDesugaredOptionPath } from '../../../fields/ChoiceField/hooks/useDesugaredOptionPath' +import { SelectCellArtifacts, SelectCellFilterExtraProps } from './common' +import { DataGridColumnCommonProps, FilterRendererProps } from '../types' +import { useCurrentlyChosenEntities } from '../../../fields/ChoiceField/hooks/useCurrentlyChosenEntities' +import { useSelectOptions } from '../../../fields/ChoiceField/hooks/useSelectOptions' +import { DataGridColumn } from '../grid' -export type HasOneSelectProps = - & DataGridColumnPublicProps +export type HasOneSelectRendererProps = & BaseDynamicChoiceField - & FieldFallbackViewPublicProps & SugaredRelativeSingleEntity +export type HasOneSelectProps = + & HasOneSelectRendererProps + & DataGridColumnCommonProps + -export const HasOneSelectCell: FunctionComponent = Component(props => { +export const createHasOneSelectCell = ({ FilterRenderer, ValueRenderer }: { + FilterRenderer: ComponentType>, + ValueRenderer: ComponentType +}): FunctionComponent => Component(props => { return ( {...props} @@ -47,17 +54,25 @@ export const HasOneSelectCell: FunctionComponent = Component( id: [], nullCondition: false, }} - filterRenderer={filterProps => } + filterRenderer={filterProps => { + const optionProps = { + lazy: { initialLimit: 0 }, + ...props, + } + const currentlyChosenEntities = useCurrentlyChosenEntities(optionProps, filterProps.filter.id) + const selectProps = useSelectOptions(optionProps, currentlyChosenEntities) + + return + }} > - + ) }, 'HasOneSelectField') -const HasOneSelectCellContent = Component( +export const createHasOneSelectCellRenderer = ({ FallbackRenderer = () => null }: { + FallbackRenderer?: ComponentType +}) => Component( props => { const desugaredOptionPath = useDesugaredOptionPath(props, undefined) const entity = useEntity(props).getEntity({ field: desugaredOptionPath.hasOneRelationPath }) @@ -71,7 +86,7 @@ const HasOneSelectCellContent = Component{val} } - return + return } if ('optionLabel' in props) { diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/NumberCell.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/NumberCell.tsx index a1d17d8ce0..774aacbb0d 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/NumberCell.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/NumberCell.tsx @@ -1,23 +1,18 @@ -import { Component, Field, FieldValue, QueryLanguage, SugaredRelativeSingleField, wrapFilterInHasOnes } from '@contember/react-binding' +import { Component, QueryLanguage, SugarableRelativeSingleField, wrapFilterInHasOnes } from '@contember/react-binding' import { Input } from '@contember/client' -import { NumberInput, Select, Stack } from '@contember/ui' -import type { FunctionComponent, ReactElement, ReactNode } from 'react' -import { useMessageFormatter } from '../../../../../i18n' -import { FieldFallbackView, FieldFallbackViewPublicProps } from '../../../fieldViews' -import { DataGridCellPublicProps, DataGridColumn, DataGridHeaderCellPublicProps, DataGridOrderDirection } from '../base' -import { dataGridCellsDictionary } from './dataGridCellsDictionary' -import { NullConditionFilter, NullConditionFilterPublicProps } from './NullConditionFilter' +import type { ComponentType, FunctionComponent } from 'react' +import { DataGridColumnCommonProps, DataGridOrderDirection, FilterRendererProps } from '../types' +import { DataGridColumn } from '../grid' +export type NumberCellRendererProps = { + field: SugarableRelativeSingleField | string +} export type NumberCellProps = - & DataGridHeaderCellPublicProps - & DataGridCellPublicProps - & FieldFallbackViewPublicProps - & SugaredRelativeSingleField - & NullConditionFilterPublicProps + & DataGridColumnCommonProps + & NumberCellRendererProps & { disableOrder?: boolean initialOrder?: DataGridOrderDirection - format?: (value: number) => ReactNode } export type NumberFilterArtifacts = { @@ -26,7 +21,10 @@ export type NumberFilterArtifacts = { nullCondition: boolean } -export const NumberCell: FunctionComponent = Component(props => { +export const createNumberCell = ({ FilterRenderer, ValueRenderer }: { + FilterRenderer: ComponentType>, + ValueRenderer: ComponentType +}): FunctionComponent => Component(props => { return ( {...props} @@ -65,62 +63,9 @@ export const NumberCell: FunctionComponent = Component(props => query: null, nullCondition: false, }} - filterRenderer={({ filter, setFilter, environment }) => { - const formatMessage = useMessageFormatter(dataGridCellsDictionary) - const options: Array<{ - value: NumberFilterArtifacts['mode'] - label: string - }> = [ - { value: 'eq', label: formatMessage('dataGridCells.numberCell.equals') }, - { value: 'gte', label: formatMessage('dataGridCells.numberCell.greaterThan') }, - { value: 'lte', label: formatMessage('dataGridCells.numberCell.lessThan') }, - ] - return ( - <> - - { + if (!value) { + return + } + + setFilter({ + ...filter, + mode: value, + }) + }} + /> + { + setFilter({ + ...filter, + query: value ?? null, + }) + }} + /> + + + + ) +} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/SelectCellFilter.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/SelectCellFilter.tsx similarity index 58% rename from packages/admin/src/components/bindingFacade/collections/DataGrid/cells/SelectCellFilter.tsx rename to packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/SelectCellFilter.tsx index c316f4e864..5bc05889a8 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/cells/SelectCellFilter.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/SelectCellFilter.tsx @@ -1,27 +1,18 @@ import { Checkbox, FieldContainer } from '@contember/ui' import { useMemo } from 'react' -import { useMessageFormatter } from '../../../../../i18n' -import { BaseDynamicChoiceField, ChoiceFieldData, MultiSelectFieldInner } from '../../../fields' -import { useSelectOptions } from '../../../fields/ChoiceField/hooks/useSelectOptions' -import { FilterRendererProps } from '../base' -import { dataGridCellsDictionary } from './dataGridCellsDictionary' -import { EntityAccessor, EntityId } from '@contember/react-binding' -import { useCurrentlyChosenEntities } from '../../../fields/ChoiceField/hooks/useCurrentlyChosenEntities' +import { useMessageFormatter } from '../../../../../../i18n' +import { ChoiceFieldData, MultiSelectFieldInner } from '../../../../fields' +import { dataGridCellsDictionary } from '../dict/dataGridCellsDictionary' +import { EntityAccessor } from '@contember/react-binding' +import { FilterRendererProps } from '../../types' +import { SelectCellArtifacts, SelectCellFilterExtraProps } from '../../cells' -export type SelectCellArtifacts = { - id: EntityId[] - nullCondition: boolean -} type SelectCellFilterProps = & FilterRendererProps - & { - optionProps: BaseDynamicChoiceField - } + & SelectCellFilterExtraProps -export const SelectCellFilter = ({ filter, setFilter, optionProps }: SelectCellFilterProps) => { - const currentlyChosenEntities = useCurrentlyChosenEntities(optionProps, filter.id) - const { options, allOptions, onSearch, isLoading } = useSelectOptions(optionProps, currentlyChosenEntities) +export const SelectCellFilter = ({ filter, setFilter, options, allOptions, onSearch, isLoading }: SelectCellFilterProps) => { const currentValues = useMemo>(() => { return allOptions.filter(it => filter.id.includes(it.value.id)) }, [filter.id, allOptions]) diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/TextCellFilter.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/TextCellFilter.tsx new file mode 100644 index 0000000000..3524e73983 --- /dev/null +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/TextCellFilter.tsx @@ -0,0 +1,38 @@ +import { useMessageFormatter } from '../../../../../../i18n' +import { dataGridCellsDictionary } from '../dict/dataGridCellsDictionary' +import { GenericTextCellFilter } from './GenericTextCellFilter' +import { FilterRendererProps } from '../../types' +import { TextFilterArtifacts } from '../../cells' +import { Checkbox, FieldContainer, Stack } from '@contember/ui' + +export const TextCellFilter = ({ filter, setFilter, ...props }: FilterRendererProps) => { + const formatMessage = useMessageFormatter(dataGridCellsDictionary) + const label = ( + + {filter.mode === 'doesNotMatch' + ? formatMessage('dataGridCells.textCell.excludeNull', { + strong: chunks => {chunks}, + }) + : formatMessage('dataGridCells.textCell.includeNull', { + strong: chunks => {chunks}, + })} + + ) + return ( + + + + { + setFilter({ + ...filter, + nullCondition: !!checked, + }) + }} + /> + + + ) +} diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/index.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/index.ts new file mode 100644 index 0000000000..5ab873200e --- /dev/null +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/filters/index.ts @@ -0,0 +1,8 @@ +export * from './BooleanCellFilter' +export * from './EnumCellFilter' +export * from './GenericTextCellFilter' +export * from './HasManyAbsentCellFilter' +export * from './NullConditionFilter' +export * from './NumberCellFilter' +export * from './SelectCellFilter' +export * from './TextCellFilter' diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/index.ts b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/index.ts new file mode 100644 index 0000000000..6ad020b072 --- /dev/null +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/index.ts @@ -0,0 +1,10 @@ +export * from './cells' +export * from './dict/dataGridCellsDictionary' +export * from './dict/dataGridDictionary' +export * from './filters' +export * from './rendering' + +export * from './DataGrid' + +export * from './types' + diff --git a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumnHiding.tsx b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridColumnHiding.tsx similarity index 63% rename from packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumnHiding.tsx rename to packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridColumnHiding.tsx index c91a5d5a0a..1929f7c944 100644 --- a/packages/admin/src/components/bindingFacade/collections/DataGrid/base/DataGridColumnHiding.tsx +++ b/packages/admin/src/components/bindingFacade/collections/DataGrid/ui/rendering/DataGridColumnHiding.tsx @@ -1,21 +1,24 @@ import { Box, Checkbox, Dropdown, DropdownProps, FieldContainer, Icon } from '@contember/ui' import { Fragment, ReactElement, useMemo } from 'react' -import type { MessageFormatter } from '../../../../../i18n' -import type { DataGridDictionary } from './dataGridDictionary' -import type { DataGridSetIsColumnHidden } from './DataGridSetIsColumnHidden' -import type { DataGridState } from './DataGridState' +import { useMessageFormatter } from '../../../../../../i18n' +import { dataGridDictionary } from '../dict/dataGridDictionary' +import { DataGridRenderingCommonProps } from '../types' -export interface DataGridColumnHidingProps { - desiredState: DataGridState - formatMessage: MessageFormatter - setIsColumnHidden: DataGridSetIsColumnHidden +export type DataGridColumnHidingPublicProps = { + allowColumnVisibilityControls?: boolean } -export function DataGridColumnHiding({ +export type DataGridColumnHidingProps = + & DataGridRenderingCommonProps + & DataGridColumnHidingPublicProps + +export const DataGridColumnHiding = ({ desiredState, - formatMessage, - setIsColumnHidden, -}: DataGridColumnHidingProps): ReactElement | null { + displayedState, + stateMethods: { setIsColumnHidden }, + allowColumnVisibilityControls, +}: DataGridColumnHidingProps): ReactElement | null => { + const formatMessage = useMessageFormatter(dataGridDictionary) const buttonProps: DropdownProps['buttonProps'] = useMemo(() => ({ intent: 'default', distinction: 'seamless', @@ -27,6 +30,10 @@ export function DataGridColumnHiding({ ), }), [formatMessage]) + if (!allowColumnVisibilityControls || displayedState.layout === 'tiles') { + return null + } + return ( ({ Header, Content, Footer }: { + Header: ComponentType, + Content: ComponentType, + Footer: ComponentType, +}) => memo(props => { + const componentClassName = useComponentClassName('data-grid') + + return ( + +
+ +