@contember/react-form 1.3.0-alpha.14

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './FormError'
+export * from './FormCheckbox'
+export * from './FormFieldScope'
+export * from './FormHasOneRelationScope'
+export * from './FormHasManyRelationScope'
+export * from './FormInput'
+export * from './FormLabel'
+export * from './FormRadioInput'

package/src/contexts.ts

@@ -0,0 +1,12 @@
+import { createContext } from '@contember/react-utils'
+import { ErrorAccessor } from '@contember/react-binding'
+
+const FormFieldIdContext_ = createContext<string | undefined>('FormFieldIdContext', undefined)
+/** @internal */
+export const FormFieldIdContext = FormFieldIdContext_[0]
+export const useFormFieldId = FormFieldIdContext_[1]
+
+const FormErrorContext_ = createContext<ErrorAccessor.Error[] | undefined>('FormErrorContext', undefined)
+/** @internal */
+export const FormErrorContext = FormErrorContext_[0]
+export const useFormError = FormErrorContext_[1]

package/src/hooks/index.ts

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

package/src/hooks/useFormInputValidationHandler.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { useCallback, useEffect, useRef } from 'react'
+import { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'
+
+export const useFormInputValidationHandler = (field: FieldAccessor<any>) => {
+	const accessorGetter = field.getAccessor
+	const validationMessage = useRef<string>()
+	const [focus, setFocus] = React.useState(false)
+	const inputRef = React.useRef<HTMLInputElement>(null)
+	useEntityBeforePersist(useCallback(() => {
+		if (validationMessage.current) {
+			accessorGetter().addError(validationMessage.current)
+		}
+	}, [accessorGetter]))
+
+	useEffect(() => {
+		if (!inputRef.current) {
+			return
+		}
+		const input = inputRef.current
+		const valid = input.validity?.valid
+		const message = valid ? undefined : input?.validationMessage
+		if (message !== validationMessage.current) {
+			validationMessage.current = message
+			if (!message || !focus) {
+				accessorGetter().clearErrors()
+			}
+			if (!focus && message) {
+				accessorGetter().addError(message)
+			}
+		}
+	})
+
+	return {
+		ref: inputRef,
+		onFocus: useCallback(() => {
+			setFocus(true)
+		}, []),
+		onBlur: useCallback(() => {
+			setFocus(false)
+			accessorGetter().clearErrors()
+			if (validationMessage.current) {
+				accessorGetter().addError(validationMessage.current)
+			}
+		}, [accessorGetter]),
+	}
+}

package/src/index.ts

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

package/src/internal/useFormInputHandler.ts

@@ -0,0 +1,104 @@
+import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'
+import * as React from 'react'
+import { useMemo } from 'react'
+
+export const useFormInputHandler = (field: FieldAccessor) => {
+	return useMemo(() => {
+		const schema = field.schema
+		const columnType = schema.type
+		const handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType]
+		if (!handlerFactory) {
+			throw new Error(`Column type ${columnType} is not supported yet`)
+		}
+		return handlerFactory(schema, field.getAccessor)
+	}, [field.getAccessor, field.schema])
+}
+
+type ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => {
+	parseValue: (value: string) => any
+	formatValue: (value: any) => string
+	defaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}
+
+const ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory> = {
+	Integer: () => ({
+		parseValue: (value: string) => {
+			if (value === '') {
+				return null
+			}
+			const parsed = parseInt(value, 10)
+			return isNaN(parsed) ? null : parsed
+		},
+		formatValue: (value: number | null) => {
+			return value === null ? '' : value.toString(10)
+		},
+		defaultInputProps: {
+			type: 'number',
+		},
+	}),
+	Double: () => ({
+		parseValue: (value: string) => {
+			if (value === '') {
+				return null
+			}
+			const parsed = parseFloat(value)
+			return isNaN(parsed) ? null : parsed
+		},
+		formatValue: (value: number | null) => {
+			return value === null ? '' : value.toString(10)
+		},
+		defaultInputProps: {
+			type: 'number',
+		},
+	}),
+	String: (schema, field) => ({
+		parseValue: (value: string) => {
+			if (value === '' && schema.nullable && field().valueOnServer === null) {
+				return null
+			}
+			return value
+		},
+		formatValue: (value: string | null) => value ?? '',
+	}),
+	Date: () => ({
+		parseValue: (value: string) => {
+			if (value === '') {
+				return null
+			}
+			const parsed = Date.parse(value)
+			return isNaN(parsed) ? null : new Date(parsed)
+		},
+		formatValue: (value: string | null) => {
+			const parsed = value ? Date.parse(value) : null
+			return !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().split('T')[0]
+		},
+		defaultInputProps: {
+			type: 'date',
+		},
+	}),
+	DateTime: () => ({
+		parseValue: (value: string) => {
+			if (value === '') {
+				return null
+			}
+			const parsed = Date.parse(value)
+			return isNaN(parsed) ? null : new Date(parsed)
+		},
+		formatValue: (value: string | null) => {
+			const parsed = value ? Date.parse(value) : null
+			return !parsed || isNaN(parsed) ? '' : new Date(parsed).toISOString().substring(0, 16)
+		},
+		defaultInputProps: {
+			type: 'datetime-local',
+		},
+	}),
+	Bool: () => {
+		throw new Error('Boolean column type is not supported yet')
+	},
+	Enum: () => {
+		throw new Error('Enum column type is not supported yet')
+	},
+	Uuid: () => {
+		throw new Error('UUID column type is not supported yet')
+	},
+}

package/src/tsconfig.json

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