@contember/react-board 1.3.0-alpha.10

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './Board'
+export * from './BoardBindingProps'
+export * from './const'
+export * from './types'
+export * from './useDynamicBoard'
+export * from './useStaticBoard'

package/src/internal/useBoardColumns.ts

@@ -0,0 +1,57 @@
+import { BoardColumn, BoardColumnValue } from '../BoardBindingProps'
+import { useMemo } from 'react'
+import { UseGroupItemsByColumn } from './useGroupItemsByColumn'
+import { EntityListAccessor } from '@contember/react-binding'
+import { BoardNullColumnPlaceholder } from '../const'
+import { BoardNullBehaviourProps } from '../types'
+
+export const useBoardColumns = <ColumnValue extends BoardColumnValue>({ groupItemsByColumn, items, columns, nullColumn, nullColumnPlacement, columnIdGetter }: {
+	items: EntityListAccessor
+	columns: Iterable<ColumnValue>
+	columnIdGetter: (column: ColumnValue) => string | number
+	groupItemsByColumn: UseGroupItemsByColumn,
+} & BoardNullBehaviourProps): BoardColumn<ColumnValue>[] => {
+
+	return useMemo(() => {
+		const itemsByColumn = groupItemsByColumn(items)
+
+		const result: BoardColumn<ColumnValue>[] = []
+		let index = 0
+		const nullItems = itemsByColumn.get(null) ?? []
+
+		const pushNullColumn = () => {
+			if (nullColumn === 'never') {
+				return
+			}
+			if (nullColumn === 'auto' && nullItems.length === 0) {
+				return
+			}
+
+			result.push({
+				id: BoardNullColumnPlaceholder,
+				index: index++,
+				value: null,
+				items: nullItems.map((it, index) => ({ value: it, id: it.id, index })),
+			})
+		}
+
+		if (nullColumnPlacement === 'start') {
+			index--
+			pushNullColumn()
+		}
+
+		for (const column of columns) {
+			result.push({
+				id: columnIdGetter(column),
+				index: index++,
+				value: column,
+				items: itemsByColumn.get(columnIdGetter(column))?.map((it, index) => ({ value: it, id: it.id, index })) ?? [],
+			})
+		}
+
+		if (nullColumnPlacement !== 'start') {
+			pushNullColumn()
+		}
+		return result
+	}, [columnIdGetter, columns, groupItemsByColumn, items, nullColumn, nullColumnPlacement])
+}

package/src/internal/useBoardItemsMethods.ts

@@ -0,0 +1,141 @@
+import { BoardAddItemMethod, BoardColumnValue, BoardMethods, BoardMoveItemMethod, BoardRemoveItemMethod } from '../BoardBindingProps'
+import { useCallback, useMemo } from 'react'
+import {
+	BatchUpdatesOptions,
+	BindingError,
+	EntityAccessor,
+	EntityListAccessor,
+	RelativeSingleField,
+	repairEntitiesOrder, sortEntities,
+} from '@contember/react-binding'
+import { BoardColumnKey, UseGroupItemsByColumn } from './useGroupItemsByColumn'
+import { arrayMove } from '../utils/arrayMove'
+
+
+export type UseBoardItemsMethodsProps<ColumnValue extends BoardColumnValue> = {
+	itemEntities: EntityListAccessor
+	connectItemToColumn: (item: EntityAccessor, column: ColumnValue | null) => void
+	desugaredSortableByField: RelativeSingleField | undefined
+	sortScope?: 'column' | 'board'
+	groupItemsByColumn: UseGroupItemsByColumn,
+	getDiscriminatorValue: (entity: EntityAccessor) => BoardColumnKey
+	columnIdGetter: (column: ColumnValue) => string | number
+}
+
+export type BoardItemsMethods<ColumnValue extends BoardColumnValue> = Pick<BoardMethods<ColumnValue>, 'moveItem' | 'addItem' | 'removeItem'>
+
+export const useBoardItemsMethods = <ColumnValue extends BoardColumnValue>({
+	itemEntities,
+	desugaredSortableByField,
+	connectItemToColumn,
+	groupItemsByColumn,
+	getDiscriminatorValue,
+	columnIdGetter,
+	sortScope = 'column',
+}: UseBoardItemsMethodsProps<ColumnValue>): BoardItemsMethods<ColumnValue> => {
+
+	const itemEntitiesEntitiesGetter = itemEntities.getAccessor
+
+	const getSortScopeItems = useCallback((column: string | number | null) => {
+		const itemEntities = itemEntitiesEntitiesGetter()
+		return sortScope === 'column'
+			? groupItemsByColumn(itemEntities).get(column)?.slice() ?? []
+			: sortEntities(Array.from(itemEntities), desugaredSortableByField)
+	}, [desugaredSortableByField, groupItemsByColumn, itemEntitiesEntitiesGetter, sortScope])
+
+	const resolveScopedIndex = useCallback((column: string | number | null, index: number | undefined) => {
+		if (index === undefined) {
+			return undefined
+		}
+		if (sortScope === 'column') {
+			return index
+		}
+		const columnItems = groupItemsByColumn(itemEntities).get(column)?.slice() ?? []
+		const columnOnIndex = columnItems[index]
+		if (!columnOnIndex) {
+			return undefined
+		}
+
+		const sortScopeItems = getSortScopeItems(column)
+		return sortScopeItems.findIndex(it => it.id === columnOnIndex.id) ?? sortScopeItems.length
+	}, [getSortScopeItems, groupItemsByColumn, itemEntities, sortScope])
+
+	const addItem = useCallback<BoardAddItemMethod<ColumnValue>>((column, index, preprocess) => {
+		const itemEntities = itemEntitiesEntitiesGetter()
+		const resolvedPreprocess = (getAccessor: () => EntityAccessor, options: BatchUpdatesOptions) => {
+			connectItemToColumn(getAccessor(), column)
+			preprocess?.(getAccessor, options)
+		}
+		if (!desugaredSortableByField) {
+			if (index === undefined) {
+				return itemEntities.createNewEntity(resolvedPreprocess)
+			}
+			throw new BindingError('Cannot add item at specific index without sortableBy field')
+		}
+		const columnId = column ? columnIdGetter(column) : null
+		const sortScopeItems = getSortScopeItems(columnId)
+
+		const resolvedIndex = resolveScopedIndex(columnId, index) ?? sortScopeItems.length
+
+
+		itemEntities.createNewEntity((getEntity, options) => {
+			sortScopeItems.splice(resolvedIndex, 0, getEntity())
+			repairEntitiesOrder(desugaredSortableByField, sortScopeItems)
+			resolvedPreprocess?.(getEntity, options)
+		})
+	}, [columnIdGetter, connectItemToColumn, desugaredSortableByField, getSortScopeItems, itemEntitiesEntitiesGetter, resolveScopedIndex])
+
+
+	const moveItem = useMemo<BoardMoveItemMethod<ColumnValue> | undefined>(() => {
+		if (!desugaredSortableByField) {
+			return undefined
+		}
+		return (entity, column, index) => {
+			const currentColumn = getDiscriminatorValue(entity)
+			const columnId = column ? columnIdGetter(column) : null
+
+			connectItemToColumn(entity, column)
+
+			if (currentColumn === columnId || sortScope === 'board') {
+				const sortScopeItems = getSortScopeItems(columnId)
+				const currentIndex = sortScopeItems.findIndex(it => it.id === entity.id)
+				const resolvedIndex = resolveScopedIndex(columnId, index) ?? sortScopeItems.length
+				const resortedItems = arrayMove(sortScopeItems, currentIndex, resolvedIndex)
+				repairEntitiesOrder(desugaredSortableByField, resortedItems)
+				return
+			}
+
+
+			// sort scope is column
+			const itemEntities = itemEntitiesEntitiesGetter()
+			const groupedItems = groupItemsByColumn(itemEntities)
+
+			const currentColumnItems = groupedItems.get(currentColumn ?? null)?.slice() ?? []
+			const currentIndex = currentColumnItems.findIndex(it => it.id === entity.id)
+			currentColumnItems.splice(currentIndex, 1)
+			repairEntitiesOrder(desugaredSortableByField, currentColumnItems)
+
+			const newColumnItems = groupedItems.get(columnId)?.slice() ?? []
+			newColumnItems.splice(index, 0, entity)
+			repairEntitiesOrder(desugaredSortableByField, newColumnItems)
+
+		}
+	}, [columnIdGetter, connectItemToColumn, desugaredSortableByField, getDiscriminatorValue, getSortScopeItems, groupItemsByColumn, itemEntitiesEntitiesGetter, resolveScopedIndex, sortScope])
+
+	const removeItem = useCallback<BoardRemoveItemMethod>(entity => {
+		if (desugaredSortableByField) {
+			const currentColumn = getDiscriminatorValue(entity)
+			const sortScopeItems = getSortScopeItems(currentColumn)
+			const currentIndex = sortScopeItems.findIndex(it => it.id === entity.id)
+			sortScopeItems.splice(currentIndex, 1)
+			repairEntitiesOrder(desugaredSortableByField, sortScopeItems)
+		}
+		entity.deleteEntity()
+	}, [desugaredSortableByField, getDiscriminatorValue, getSortScopeItems])
+
+	return {
+		addItem,
+		moveItem,
+		removeItem,
+	}
+}

package/src/internal/useGroupItemsByColumn.ts

@@ -0,0 +1,19 @@
+import { EntityAccessor, EntityId, EntityListAccessor, RelativeSingleField, sortEntities } from '@contember/react-binding'
+import { useCallback } from 'react'
+
+export type BoardColumnKey = string | EntityId | null
+export type UseGroupItemsByColumn = (itemEntities: EntityListAccessor) => Map<BoardColumnKey, EntityAccessor[]>
+export const useGroupItemsByColumn = (getDiscriminatorValue: (entity: EntityAccessor) => BoardColumnKey, sortBy: RelativeSingleField | undefined): UseGroupItemsByColumn => {
+	return useCallback((itemEntities: EntityListAccessor) => {
+		const itemsByColumn = new Map<BoardColumnKey, EntityAccessor[]>()
+
+		for (const item of sortEntities(Array.from(itemEntities), sortBy)) {
+			const discriminatedBy = getDiscriminatorValue(item)
+			if (!itemsByColumn.has(discriminatedBy)) {
+				itemsByColumn.set(discriminatedBy, [])
+			}
+			itemsByColumn.get(discriminatedBy)?.push(item)
+		}
+		return itemsByColumn
+	}, [getDiscriminatorValue, sortBy])
+}

package/src/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../../../tsconfig.settings.json",
+	"compilerOptions": {
+		"outDir": "../dist/types"
+	},
+	"references": [
+		{ "path": "../../react-binding/src" },
+	]
+}

package/src/types.ts

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react'
+import { SugaredQualifiedEntityList, SugaredRelativeEntityList, SugaredRelativeSingleEntity, SugaredRelativeSingleField } from '@contember/react-binding'
+
+export type BoardDynamicColumnsBindingProps = {
+	columns: SugaredQualifiedEntityList['entities']
+	columnsSortableBy?: string | SugaredRelativeSingleField
+	discriminationField: string | SugaredRelativeSingleEntity
+}
+
+export type BoardStaticColumnsBindingProps = {
+	columns: {
+		value: string,
+		label: ReactNode
+	}[]
+	discriminationField: string | SugaredRelativeSingleField
+}
+
+export type BoardNullBehaviourProps = {
+	nullColumn?: 'never' | 'always' | 'auto'
+	nullColumnPlacement?: 'start' | 'end'
+}
+export type BoardCommonProps =
+	& BoardNullBehaviourProps
+	& {
+		children: ReactNode
+		sortableBy?: string | SugaredRelativeSingleField
+		sortScope?: 'column' | 'board'
+	}
+
+export type BoardQualifiedItemsProps =
+	& Pick<SugaredQualifiedEntityList, 'entities' | 'orderBy' | 'limit' | 'offset'>
+
+export type BoardRelativeItemsProps =
+	& Pick<SugaredRelativeEntityList, 'field' | 'orderBy' | 'limit' | 'offset'>
+
+
+export type BoardQualifiedDynamicProps =
+	& BoardCommonProps
+	& BoardDynamicColumnsBindingProps
+	& BoardQualifiedItemsProps
+
+export type BoardRelativeDynamicProps =
+	& BoardCommonProps
+	& BoardDynamicColumnsBindingProps
+	& BoardRelativeItemsProps
+
+export type BoardQualifiedStaticProps =
+	& BoardCommonProps
+	& BoardStaticColumnsBindingProps
+	& BoardQualifiedItemsProps
+
+export type BoardRelativeStaticProps =
+	& BoardCommonProps
+	& BoardStaticColumnsBindingProps
+	& BoardRelativeItemsProps
+
+export type BoardBaseProps<RendererExtraProps> =
+	& (
+		| BoardQualifiedDynamicProps
+		| BoardRelativeDynamicProps
+		| BoardQualifiedStaticProps
+		| BoardRelativeStaticProps
+	)
+	& RendererExtraProps

package/src/useDynamicBoard.ts

@@ -0,0 +1,135 @@
+import { useCallback, useMemo } from 'react'
+import {
+	addEntityAtIndex,
+	BindingError,
+	EntityAccessor,
+	EntityListAccessor,
+	RelativeSingleField,
+	repairEntitiesOrder,
+	sortEntities,
+	useDesugaredRelativeSingleEntity,
+	useDesugaredRelativeSingleField,
+} from '@contember/react-binding'
+import { BoardAddColumnMethod, BoardBindingProps, BoardMoveColumnMethod, BoardRemoveColumnMethod } from './BoardBindingProps'
+import { useGroupItemsByColumn } from './internal/useGroupItemsByColumn'
+import { useBoardColumns } from './internal/useBoardColumns'
+import { BoardCommonProps, BoardDynamicColumnsBindingProps } from './types'
+import { useBoardItemsMethods } from './internal/useBoardItemsMethods'
+import { arrayMove } from './utils/arrayMove'
+
+
+export type UseDynamicBoardBindingProps =
+	& Omit<BoardCommonProps, 'children'>
+	& BoardDynamicColumnsBindingProps
+	& {
+		columnEntities: EntityListAccessor
+		itemEntities: EntityListAccessor
+	}
+
+const useGetSortedColumns = (desugaredColumnSortableByField: RelativeSingleField | undefined) => {
+	return useCallback((columnEntities: EntityListAccessor) => {
+		return sortEntities(Array.from(columnEntities), desugaredColumnSortableByField)
+	}, [desugaredColumnSortableByField])
+}
+
+export const useDynamicBoard = ({
+	sortableBy,
+	sortScope,
+	columnsSortableBy,
+	discriminationField,
+	columnEntities,
+	itemEntities,
+	nullColumnPlacement = 'end',
+	nullColumn = 'auto',
+}: UseDynamicBoardBindingProps): BoardBindingProps<EntityAccessor> => {
+
+	const desugaredSortableByField = useDesugaredRelativeSingleField(sortableBy)
+	const desugaredColumnSortableByField = useDesugaredRelativeSingleField(columnsSortableBy)
+	const desugaredDiscriminationField = useDesugaredRelativeSingleEntity(discriminationField)
+
+	const columnEntitiesGetter = columnEntities.getAccessor
+
+
+	const exitingColumnIds = useMemo(() => new Set(Array.from(columnEntities).map(it => it.id)), [columnEntities])
+
+	const getDiscriminatorValue = useCallback((entity: EntityAccessor) => {
+		const entityId = entity.getRelativeSingleEntity(desugaredDiscriminationField).id
+		return exitingColumnIds.has(entityId) ? entityId : null
+	}, [desugaredDiscriminationField, exitingColumnIds])
+
+	const groupItemsByColumn = useGroupItemsByColumn(getDiscriminatorValue, desugaredSortableByField)
+
+	const getSortedColumns = useGetSortedColumns(desugaredColumnSortableByField)
+
+	const columnsResult = useBoardColumns<EntityAccessor>({
+		columns: getSortedColumns(columnEntities),
+		columnIdGetter: it => it.id,
+		groupItemsByColumn,
+		items: itemEntities,
+		nullColumn,
+		nullColumnPlacement,
+	})
+
+	const addColumn = useCallback<BoardAddColumnMethod>((index, preprocess) => {
+		const columnEntities = columnEntitiesGetter()
+		if (!desugaredColumnSortableByField) {
+			if (index === undefined) {
+				return columnEntities.createNewEntity(preprocess)
+			}
+			throw new BindingError('Cannot add column at specific index without sortableBy field')
+		}
+		addEntityAtIndex(columnEntities, desugaredColumnSortableByField, columnEntities.length, preprocess)
+	}, [columnEntitiesGetter, desugaredColumnSortableByField])
+
+	const connectItemToColumn = useCallback((item: EntityAccessor, column: EntityAccessor | null) => {
+		const hasOne = desugaredDiscriminationField.hasOneRelationPath
+		const parentEntity = item.getRelativeSingleEntity({ hasOneRelationPath: hasOne.slice(0, -1) })
+		if (column) {
+			parentEntity.connectEntityAtField(hasOne[hasOne.length - 1].field, column)
+		} else {
+			parentEntity.disconnectEntityAtField(hasOne[hasOne.length - 1].field)
+		}
+
+	}, [desugaredDiscriminationField.hasOneRelationPath])
+
+
+	const moveColumn = useMemo<BoardMoveColumnMethod | undefined>(() => {
+		if (!desugaredColumnSortableByField) {
+			return undefined
+		}
+		return (entity, index) => {
+			const sortedColumns = getSortedColumns(columnEntitiesGetter())
+			const currentIndex = sortedColumns.findIndex(it => it.id === entity.id)
+			const resortedItems = arrayMove(sortedColumns, currentIndex, index)
+			repairEntitiesOrder(desugaredColumnSortableByField, resortedItems)
+		}
+	}, [columnEntitiesGetter, desugaredColumnSortableByField, getSortedColumns])
+
+
+	const removeColumn = useCallback<BoardRemoveColumnMethod>(entity => {
+		entity.deleteEntity()
+		if (desugaredSortableByField) {
+			repairEntitiesOrder(desugaredSortableByField, Array.from(columnEntitiesGetter()))
+		}
+	}, [columnEntitiesGetter, desugaredSortableByField])
+
+	const { addItem, moveItem, removeItem } = useBoardItemsMethods({
+		columnIdGetter: it => it.id,
+		connectItemToColumn,
+		desugaredSortableByField,
+		sortScope,
+		getDiscriminatorValue,
+		groupItemsByColumn,
+		itemEntities,
+	})
+
+	return {
+		columns: columnsResult,
+		addColumn,
+		addItem,
+		moveColumn,
+		moveItem,
+		removeColumn,
+		removeItem,
+	}
+}

package/src/useStaticBoard.ts

@@ -0,0 +1,64 @@
+import { useCallback } from 'react'
+import { EntityAccessor, EntityListAccessor, useDesugaredRelativeSingleField } from '@contember/react-binding'
+import { BoardBindingProps, BoardStaticColumnValue } from './BoardBindingProps'
+import { useGroupItemsByColumn } from './internal/useGroupItemsByColumn'
+import { useBoardColumns } from './internal/useBoardColumns'
+import { BoardCommonProps, BoardStaticColumnsBindingProps } from './types'
+import { useBoardItemsMethods } from './internal/useBoardItemsMethods'
+
+
+export type UseStaticBoardBindingProps =
+	& Omit<BoardCommonProps, 'children'>
+	& BoardStaticColumnsBindingProps
+	& {
+		itemEntities: EntityListAccessor
+	}
+
+export const useStaticBoard = ({
+	sortableBy,
+	sortScope,
+	columns,
+	discriminationField,
+	itemEntities,
+	nullColumnPlacement = 'end',
+	nullColumn = 'auto',
+}: UseStaticBoardBindingProps): BoardBindingProps<BoardStaticColumnValue> => {
+
+	const desugaredSortableByField = useDesugaredRelativeSingleField(sortableBy)
+	const desugaredDiscriminationField = useDesugaredRelativeSingleField(discriminationField)
+
+	const getDiscriminatorValue = useCallback((entity: EntityAccessor) => {
+		return entity.getRelativeSingleField<string>(desugaredDiscriminationField).value
+	}, [desugaredDiscriminationField])
+
+	const groupItemsByColumn = useGroupItemsByColumn(getDiscriminatorValue, desugaredSortableByField)
+
+	const columnsResult = useBoardColumns({
+		columns,
+		columnIdGetter: it => it.value,
+		groupItemsByColumn,
+		items: itemEntities,
+		nullColumn,
+		nullColumnPlacement,
+	})
+
+	const connectItemToColumn = useCallback((item: EntityAccessor, column: BoardStaticColumnValue | null) => {
+		item.getRelativeSingleField(desugaredDiscriminationField).updateValue(column?.value ?? null)
+	}, [desugaredDiscriminationField])
+
+	const { addItem, moveItem, removeItem } = useBoardItemsMethods({
+		columnIdGetter: it => it.value,
+		connectItemToColumn,
+		groupItemsByColumn,
+		itemEntities,
+		desugaredSortableByField,
+		sortScope,
+		getDiscriminatorValue,
+	})
+	return {
+		columns: columnsResult,
+		addItem,
+		moveItem,
+		removeItem,
+	}
+}

package/src/utils/arrayMove.ts

@@ -0,0 +1,5 @@
+export function arrayMove<T>(array: T[], from: number, to: number): T[] {
+	const newArray = array.slice()
+	newArray.splice(to, 0, newArray.splice(from, 1)[0])
+	return newArray
+}