@contember/react-select 1.3.0-alpha.14

package/src/components/SelectNewItem.tsx

@@ -0,0 +1,54 @@
+import { Entity, EntityAccessor, EntitySubTree, QueryLanguage, TreeRootId, TreeRootIdProvider, useEnvironment, useExtendTree, useGetEntitySubTree } from '@contember/react-binding'
+import * as React from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
+import { useSelectOptions } from '../contexts'
+
+export const SelectNewItem = ({ children }: { children: ReactNode }) => {
+	const options = useSelectOptions()
+	const env = useEnvironment()
+	const { entityName } = useMemo((() => QueryLanguage.desugarQualifiedEntityList({ entities: options }, env)), [env, options])
+
+	const [state, setState] = useState<{ entity: EntityAccessor, treeRootId: TreeRootId } | null>(null)
+	const extendTree = useExtendTree()
+	const getSubTree = useGetEntitySubTree()
+
+	useEffect(() => {
+		(async () => {
+			const treeRootId = await extendTree(<>
+				<EntitySubTree entity={{
+					entityName,
+				}} expectedMutation={'none'} isUnpersisted isCreating>
+					{children}
+				</EntitySubTree>
+			</>)
+			if (!treeRootId) {
+				return
+			}
+
+			const entity = getSubTree({
+				entity: {
+					entityName: entityName,
+				},
+				isCreating: true,
+			}, treeRootId)
+			setState({
+				entity,
+				treeRootId,
+			})
+		})()
+	}, [children, entityName, extendTree, getSubTree])
+
+	if (!state) {
+		return null
+	}
+
+	return (
+		<>
+			<TreeRootIdProvider treeRootId={state.treeRootId}>
+				<Entity accessor={state.entity}>
+					{children}
+				</Entity>
+			</TreeRootIdProvider>
+		</>
+	)
+}

package/src/components/SelectOption.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef, ReactNode } from 'react'
+import { useSelectIsSelected } from '../contexts'
+import { Slot } from '@radix-ui/react-slot'
+import { useEntity } from '@contember/react-binding'
+import { dataAttribute } from '@contember/utilities'
+
+export type SelectOptionProps = {
+	children: ReactNode
+	action?: 'select' | 'unselect' | 'toggle'
+}
+
+export const SelectOption = forwardRef<HTMLElement, SelectOptionProps>(({ action, ...props }, ref) => {
+	const isSelected = useSelectIsSelected()
+	const entity = useEntity()
+	return (
+		<Slot
+			ref={ref}
+			data-selected={dataAttribute(isSelected?.(entity))}
+			{...props}
+		/>
+	)
+})

package/src/components/SelectPlaceholder.tsx

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react'
+import { useSelectCurrentEntities } from '../contexts'
+
+export const SelectPlaceholder = ({ children }: { children: ReactNode }) => {
+	const hasEntities = useSelectCurrentEntities().length > 0
+	return hasEntities ? null : <>{children}</>
+}

package/src/components/SortableMultiSelect.tsx

@@ -0,0 +1,65 @@
+import React, { ReactNode, useCallback, useMemo } from 'react'
+import { SelectCurrentEntitiesContext, SelectHandler, SelectHandleSelectContext, SelectIsSelectedContext, SelectOptionsContext } from '../contexts'
+import { Component, EntityAccessor, HasOne, SugaredQualifiedEntityList, SugaredRelativeEntityList, SugaredRelativeSingleEntity, SugaredRelativeSingleField, useEntityList } from '@contember/react-binding'
+import { useReferentiallyStableCallback } from '@contember/react-utils'
+import { Repeater } from '@contember/react-repeater'
+import { SelectEvents } from '../types'
+
+export type SortableMultiSelectProps =
+	& {
+		children: ReactNode
+		field: SugaredRelativeEntityList['field']
+		options: SugaredQualifiedEntityList['entities']
+		sortableBy: SugaredRelativeSingleField['field']
+		connectAt: SugaredRelativeSingleEntity['field']
+	}
+	& SelectEvents
+
+export const SortableMultiSelect = Component(({ field, children, sortableBy, connectAt, options, onSelect, onUnselect }: SortableMultiSelectProps) => {
+	const list = useEntityList({ field })
+	const entitiesArr = useMemo(() => Array.from(list), [list])
+
+	const selectedEntities = useMemo(() => Array.from(list).map(it => it.getEntity({ field: connectAt }).id), [connectAt, list])
+
+	const handler = useReferentiallyStableCallback<SelectHandler>((entity, action = 'toggle') => {
+		const isSelected = selectedEntities.includes(entity.id)
+		if (action === 'toggle') {
+			action = isSelected ? 'unselect' : 'select'
+		}
+		if (action === 'unselect' && isSelected) {
+			Array.from(list).find(it => it.getEntity({ field: connectAt }).id === entity.id)?.deleteEntity()
+			onUnselect?.(entity)
+		} else if (action === 'select' && !isSelected) {
+			list.createNewEntity(getEntity => {
+				getEntity().connectEntityAtField({ field: connectAt }, entity)
+				onSelect?.(entity)
+			})
+		}
+	})
+	const isSelected = useCallback((entity: EntityAccessor) => {
+		return selectedEntities.includes(entity.id)
+	}, [selectedEntities])
+
+	return (
+		<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>
+			<SelectCurrentEntitiesContext.Provider value={entitiesArr}>
+				<SelectIsSelectedContext.Provider value={isSelected}>
+					<SelectHandleSelectContext.Provider value={handler}>
+						<SelectOptionsContext.Provider value={options}>
+							{children}
+						</SelectOptionsContext.Provider>
+					</SelectHandleSelectContext.Provider>
+				</SelectIsSelectedContext.Provider>
+			</SelectCurrentEntitiesContext.Provider>
+		</Repeater>
+	)
+}, ({ children, field, sortableBy, connectAt }) => {
+	return (
+		<Repeater field={field} sortableBy={sortableBy} initialEntityCount={0}>
+			<HasOne field={connectAt}>
+				{children}
+			</HasOne>
+		</Repeater>
+	)
+})
+

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './MultiSelect'
+export * from './Select'
+export * from './SelectNewItem'
+export * from './SelectDataView'
+export * from './SelectEachItem'
+export * from './SelectItemTrigger'
+export * from './SelectOption'
+export * from './SelectPlaceholder'
+export * from './SortableMultiSelect'

package/src/contexts.ts

@@ -0,0 +1,25 @@
+import { createRequiredContext } from '@contember/react-utils'
+import { EntityAccessor, SugaredQualifiedEntityList } from '@contember/react-binding'
+
+const _SelectCurrentEntitiesContext = createRequiredContext<EntityAccessor[]>('SelectCurrentEntitiesContext')
+/** @internal */
+export const SelectCurrentEntitiesContext = _SelectCurrentEntitiesContext[0]
+export const useSelectCurrentEntities = _SelectCurrentEntitiesContext[1]
+
+
+
+const _SelectIsSelectedContext = createRequiredContext<(entity: EntityAccessor) => boolean>('SelectIsSelectedContext')
+/** @internal */
+export const SelectIsSelectedContext = _SelectIsSelectedContext[0]
+export const useSelectIsSelected = _SelectIsSelectedContext[1]
+
+export type SelectHandler = (entity: EntityAccessor, action?: 'select' | 'unselect' | 'toggle') => void
+const _SelectHandleSelectContext = createRequiredContext<SelectHandler>('SelectHandleSelectContext')
+/** @internal */
+export const SelectHandleSelectContext = _SelectHandleSelectContext[0]
+export const useSelectHandleSelect = _SelectHandleSelectContext[1]
+
+const _SelectOptionsContext = createRequiredContext<SugaredQualifiedEntityList['entities']>('SelectOptionsContext')
+/** @internal */
+export const SelectOptionsContext = _SelectOptionsContext[0]
+export const useSelectOptions = _SelectOptionsContext[1]

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './contexts'
+export * from './types'

package/src/tsconfig.json

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

package/src/types/events.ts

@@ -0,0 +1,6 @@
+import { EntityAccessor } from '@contember/react-binding'
+
+export interface SelectEvents {
+	onSelect?: (entity: EntityAccessor) => void
+	onUnselect?: (entity: EntityAccessor) => void
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './events'