@cohesivesystems/presentation-react 0.1.0-alpha.1

package/src/collection-chrome-slot-renderer-registry.ts

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+
+import {
+  collectionChromeSlotAnyPlacement,
+  createCollectionChromeSlotRendererKey,
+  createCollectionChromeSlotRendererRegistry as createCoreCollectionChromeSlotRendererRegistry,
+  getCollectionChromeSlotRendererCandidateKeys,
+  getCollectionChromeSlotRendererRegistryKeys as getCoreCollectionChromeSlotRendererRegistryKeys,
+  hasCollectionChromeSlotRendererBinding,
+  isCollectionChromeSlotKind,
+  isCollectionChromeSlotPlacement,
+  isCollectionChromeSlotPlacementValue,
+  resolveCollectionChromeSlotRenderer as resolveCoreCollectionChromeSlotRenderer,
+  type CollectionChromeSlotRendererBinding as CoreCollectionChromeSlotRendererBinding,
+  type CollectionChromeSlotRendererRegistry as CoreCollectionChromeSlotRendererRegistry,
+} from '@cohesivesystems/presentation-core'
+import type {
+  CollectionChromeSlotDefinition,
+  CollectionChromeSlotKind,
+  CollectionChromeSlotPlacement,
+} from '@cohesivesystems/presentation-contracts'
+
+export {
+  collectionChromeSlotAnyPlacement,
+  createCollectionChromeSlotRendererKey,
+  getCollectionChromeSlotRendererCandidateKeys,
+  hasCollectionChromeSlotRendererBinding,
+  isCollectionChromeSlotKind,
+  isCollectionChromeSlotPlacement,
+  isCollectionChromeSlotPlacementValue,
+}
+
+export type CollectionChromeSlotRenderer<TContext> = (
+  context: TContext,
+) => ReactNode
+
+export type CollectionChromeSlotRendererRegistry<TContext> =
+  CoreCollectionChromeSlotRendererRegistry<TContext, ReactNode>
+
+export type CollectionChromeSlotRendererBinding<TContext> =
+  CoreCollectionChromeSlotRendererBinding<TContext, ReactNode>
+
+export function createCollectionChromeSlotRendererRegistry<TContext>(
+  bindings: readonly CollectionChromeSlotRendererBinding<TContext>[],
+): CollectionChromeSlotRendererRegistry<TContext> {
+  return createCoreCollectionChromeSlotRendererRegistry<TContext, ReactNode>(bindings)
+}
+
+export function getCollectionChromeSlotRendererRegistryKeys<TContext>(
+  registry: CollectionChromeSlotRendererRegistry<TContext> | null | undefined,
+) {
+  return getCoreCollectionChromeSlotRendererRegistryKeys<TContext, ReactNode>(registry)
+}
+
+export function resolveCollectionChromeSlotRenderer<TContext>(
+  registry: CollectionChromeSlotRendererRegistry<TContext> | null | undefined,
+  slot: CollectionChromeSlotDefinition,
+) {
+  return resolveCoreCollectionChromeSlotRenderer<TContext, ReactNode>(registry, slot)
+}
+
+export type {
+  CollectionChromeSlotDefinition,
+  CollectionChromeSlotKind,
+  CollectionChromeSlotPlacement,
+}

package/src/collection-selection-state-context.ts

@@ -0,0 +1,51 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+} from 'react'
+
+import type {
+  CollectionSelectionStateContextValue,
+  CollectionSelectionStateEntry,
+} from '@cohesivesystems/presentation-core'
+
+export type {
+  CollectionSelectionStateContextValue,
+  CollectionSelectionStateEntry,
+} from '@cohesivesystems/presentation-core'
+
+export const CollectionSelectionStateContext =
+  createContext<CollectionSelectionStateContextValue | null>(null)
+
+export function useCollectionSelectionState(
+  selectionStateId: string | null | undefined,
+): CollectionSelectionStateEntry | null {
+  const context = useContext(CollectionSelectionStateContext)
+
+  return useMemo(() => {
+    if (!context || !selectionStateId) {
+      return null
+    }
+
+    const selectedRowIds =
+      context.selectedRowIdsByStateId[selectionStateId] ?? []
+
+    return {
+      clearSelection: () => context.clearSelection(selectionStateId),
+      selectedRowId: selectedRowIds[0] ?? null,
+      selectedRowIds,
+      selectionStateId,
+      selectRowId: (rowId, mode) =>
+        context.selectRowId(selectionStateId, rowId, mode),
+      setSelectedRowIds: (rowIds) =>
+        context.setSelectedRowIds(selectionStateId, rowIds),
+      toggleRowId: (rowId, mode) =>
+        context.toggleRowId(selectionStateId, rowId, mode),
+    } satisfies CollectionSelectionStateEntry
+  }, [context, selectionStateId])
+}
+
+export function useCollectionSelectionStateMap() {
+  return useContext(CollectionSelectionStateContext)
+    ?.selectedRowIdsByStateId ?? {}
+}

package/src/collection-selection-state.tsx

@@ -0,0 +1,101 @@
+import {
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from 'react'
+
+import type {
+  CollectionSelectionMode,
+} from '@cohesivesystems/presentation-core'
+import {
+  CollectionSelectionStateContext,
+  type CollectionSelectionStateContextValue,
+} from './collection-selection-state-context'
+import {
+  collectionSelectionModes,
+} from '@cohesivesystems/presentation-contracts'
+
+export function CollectionSelectionStateProvider({
+  children,
+}: PropsWithChildren) {
+  const [selectedRowIdsByStateId, setSelectedRowIdsByStateId] =
+    useState<Record<string, readonly string[]>>({})
+
+  const value = useMemo<CollectionSelectionStateContextValue>(
+    () => ({
+      clearSelection: (selectionStateId) => {
+        setSelectedRowIdsByStateId((current) =>
+          setSelectionState(current, selectionStateId, []))
+      },
+      selectedRowIdsByStateId,
+      selectRowId: (selectionStateId, rowId, mode) => {
+        setSelectedRowIdsByStateId((current) =>
+          setSelectionState(current, selectionStateId, selectRowId(current, selectionStateId, rowId, mode)))
+      },
+      setSelectedRowIds: (selectionStateId, rowIds) => {
+        setSelectedRowIdsByStateId((current) =>
+          setSelectionState(current, selectionStateId, uniqueRowIds(rowIds)))
+      },
+      toggleRowId: (selectionStateId, rowId, mode) => {
+        setSelectedRowIdsByStateId((current) =>
+          setSelectionState(current, selectionStateId, toggleRowId(current, selectionStateId, rowId, mode)))
+      },
+    }),
+    [selectedRowIdsByStateId],
+  )
+
+  return (
+    <CollectionSelectionStateContext.Provider value={value}>
+      {children}
+    </CollectionSelectionStateContext.Provider>
+  )
+}
+
+function selectRowId(
+  current: Readonly<Record<string, readonly string[]>>,
+  selectionStateId: string,
+  rowId: string,
+  mode: CollectionSelectionMode,
+) {
+  if (isMultipleSelectionMode(mode)) {
+    return uniqueRowIds([...(current[selectionStateId] ?? []), rowId])
+  }
+
+  return [rowId]
+}
+
+function toggleRowId(
+  current: Readonly<Record<string, readonly string[]>>,
+  selectionStateId: string,
+  rowId: string,
+  mode: CollectionSelectionMode,
+) {
+  if (!isMultipleSelectionMode(mode)) {
+    return [rowId]
+  }
+
+  const currentRowIds = current[selectionStateId] ?? []
+  return currentRowIds.includes(rowId)
+    ? currentRowIds.filter((candidate) => candidate !== rowId)
+    : [...currentRowIds, rowId]
+}
+
+function setSelectionState(
+  current: Readonly<Record<string, readonly string[]>>,
+  selectionStateId: string,
+  selectedRowIds: readonly string[],
+) {
+  return {
+    ...current,
+    [selectionStateId]: selectedRowIds,
+  }
+}
+
+function uniqueRowIds(rowIds: readonly string[]) {
+  return Array.from(new Set(rowIds))
+}
+
+function isMultipleSelectionMode(mode: CollectionSelectionMode) {
+  return mode === collectionSelectionModes.multiple ||
+    String(mode).toLocaleLowerCase() === 'multiple'
+}