@contember/react-form 1.3.0-alpha.24 → 1.3.0-alpha.26

package/dist/types/types/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export type FormInputHandler = {
+    parseValue: (value: string) => any;
+    formatValue: (value: any) => string;
+    defaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,gBAAgB,GAAG;IAC9B,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAA;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAA;IACnC,iBAAiB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;CAC/D,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-form",
   "license": "Apache-2.0",
-  "version": "1.3.0-alpha.24",
+  "version": "1.3.0-alpha.26",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -40,18 +40,18 @@
     "directory": "packages/react-form"
   },
   "dependencies": {
-    "@contember/react-binding": "1.3.0-alpha.24",
-    "@contember/react-utils": "1.3.0-alpha.24",
-    "@contember/utilities": "1.3.0-alpha.24",
+    "@contember/react-binding": "1.3.0-alpha.26",
+    "@contember/react-utils": "1.3.0-alpha.26",
+    "@contember/utilities": "1.3.0-alpha.26",
     "@radix-ui/react-slot": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "stableVersion": "0.0.0"
 }

package/src/components/FormCheckbox.tsx

@@ -28,15 +28,15 @@ export const FormCheckbox = Component<FormCheckboxProps>(({ field, isNonbearing,
 		if (!checkboxRef) {
 			return
 		}
-		(ref as any).current = checkboxRef
-		if (value === null) {
-			checkboxRef.indeterminate = true
-		}
+		checkboxRef.indeterminate = value === null
 	}, [checkboxRef, ref, value])
 
 	return (
 			<SlotInput
-				ref={setCheckboxRef}
+				ref={it => {
+					(ref as any).current = checkboxRef
+					setCheckboxRef(it)
+				}}
 				type="checkbox"
 				checked={accessor.value === true}
 				data-state={value === null ? 'indeterminate' : (value ? 'checked' : 'unchecked')}

package/src/components/FormInput.tsx

@@ -6,6 +6,7 @@ import { dataAttribute } from '@contember/utilities'
 import { useFormInputHandler } from '../internal/useFormInputHandler'
 import { useFormError, useFormFieldId } from '../contexts'
 import { useFormInputValidationHandler } from '../hooks/useFormInputValidationHandler'
+import { FormInputHandler } from '../types'
 
 type InputProps = React.JSX.IntrinsicElements['input']
 const SlotInput = Slot as ComponentType<InputProps>
@@ -15,13 +16,15 @@ export interface FormInputProps {
 	isNonbearing?: boolean
 	defaultValue?: OptionallyVariableFieldValue
 	children: React.ReactElement
+	formatValue?: FormInputHandler['formatValue']
+	parseValue?: FormInputHandler['parseValue']
 }
 
-export const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, ...props }) => {
+export const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
 	const id = useFormFieldId()
 	const accessor = useField(field)
 	const errors = useFormError() ?? accessor.errors?.errors ?? []
-	const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor)
+	const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })
 	const accessorGetter = accessor.getAccessor
 	const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)
 

package/src/hooks/useFormInputValidationHandler.tsx

@@ -17,17 +17,32 @@ export const useFormInputValidationHandler = (field: FieldAccessor<any>) => {
 		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)
-			}
+		const previousMessage = validationMessage.current
+		validationMessage.current = message
+
+		// if there is no message, we want to clear the error
+		if (!message) {
+			accessorGetter().clearErrors()
+			return
+		}
+		if (message === previousMessage) {
+			return
+		}
+		// if the input is not touched, we don't want to show the error message
+		if (!field.isTouched) {
+			return
+		}
+
+		// if the input is not focused, we want to show the error message
+		// also, even the input is focused, we want to replace the previous message
+		if (!focus || !!previousMessage) {
+			accessorGetter().clearErrors()
+			accessorGetter().addError(message)
 		}
 	})
 

package/src/index.ts

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

package/src/internal/useFormInputHandler.ts

@@ -1,26 +1,35 @@
 import { FieldAccessor, SchemaColumn, SchemaKnownColumnType } from '@contember/react-binding'
-import * as React from 'react'
 import { useMemo } from 'react'
+import { FormInputHandler } from '../types'
 
-export const useFormInputHandler = (field: FieldAccessor) => {
+export const useFormInputHandler = (field: FieldAccessor, { formatValue, parseValue }: Partial<FormInputHandler>): FormInputHandler => {
 	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`)
+		const handlerFactory = ColumnTypeHandlerFactories[columnType as SchemaKnownColumnType] ?? defaultHandlerFactory
+		const handler = handlerFactory(schema, field.getAccessor)
+		return {
+			defaultInputProps: handler.defaultInputProps,
+			formatValue: formatValue ?? handler.formatValue,
+			parseValue: parseValue ?? handler.parseValue,
 		}
-		return handlerFactory(schema, field.getAccessor)
-	}, [field.getAccessor, field.schema])
+	}, [field.getAccessor, field.schema, formatValue, parseValue])
 }
 
-type ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => {
-	parseValue: (value: string) => any
-	formatValue: (value: any) => string
-	defaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>
-}
+type ColumnTypeHandlerFactory = (column: SchemaColumn, getAccessor: FieldAccessor.GetFieldAccessor) => FormInputHandler
+
+const defaultHandlerFactory: ColumnTypeHandlerFactory = (schema, field) => ({
+	parseValue: (value: string) => {
+		if (value === '' && schema.nullable && field().valueOnServer === null) {
+			return null
+		}
+		return value
+	},
+	formatValue: (value: string | null) => value ?? '',
+})
 
-const ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory> = {
+const ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandlerFactory | undefined> = {
+	String: defaultHandlerFactory,
 	Integer: () => ({
 		parseValue: (value: string) => {
 			if (value === '') {
@@ -51,15 +60,7 @@ const ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandle
 			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 === '') {
@@ -93,15 +94,9 @@ const ColumnTypeHandlerFactories: Record<SchemaKnownColumnType, ColumnTypeHandle
 			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')
-	},
+	Bool: undefined,
+	Enum: undefined,
+	Uuid: undefined,
 }
 
 const toLocalDate = (date: Date) => {

package/src/types/index.ts

@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export type FormInputHandler = {
+	parseValue: (value: string) => any
+	formatValue: (value: any) => string
+	defaultInputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}