@contember/react-form 2.1.0-alpha.8 → 2.1.0-beta.1

package/src/components/FormFieldStateProvider.tsx

@@ -34,7 +34,6 @@ export const FormFieldIdContext = {
 	Provider: ({ children, value }: { children: React.ReactNode; value: string }) => {
 		const state = useFormFieldState()
 		if (import.meta.env.DEV) {
-			// eslint-disable-next-line react-hooks/rules-of-hooks
 			useEffect(() => {
 				console.warn('FormFieldIdContext.Provider is deprecated, use FormFieldStateProvider instead')
 			}, [])
@@ -57,7 +56,6 @@ export const FormErrorContext = {
 	Provider: ({ children, value }: { children: React.ReactNode; value: ErrorAccessor.Error[] }) => {
 		const state = useFormFieldState()
 		if (import.meta.env.DEV) {
-			// eslint-disable-next-line react-hooks/rules-of-hooks
 			useEffect(() => {
 				console.warn('FormErrorContext.Provider is deprecated, use FormFieldStateProvider instead')
 			}, [])

package/src/components/FormInput.tsx

@@ -21,39 +21,42 @@ export interface FormInputProps {
 	parseValue?: FormInputHandler['parseValue']
 }
 
-export const FormInput = Component<FormInputProps>(({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
-	const accessor = useField(field)
+export const FormInput = Component<FormInputProps>(
+	({ field, isNonbearing, defaultValue, formatValue: formatValueIn, parseValue: parseValueIn, ...props }) => {
+		const accessor = useField(field)
 
-	const formState = useFormFieldState()
-	const id = formState?.htmlId
-	const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0
-	const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges
-	const required = formState?.required ?? !accessor.schema.nullable
+		const formState = useFormFieldState()
+		const id = formState?.htmlId
+		const hasErrors = (formState?.errors.length ?? accessor.errors?.errors?.length ?? 0) > 0
+		const dirty = formState?.dirty ?? accessor.hasUnpersistedChanges
+		const required = formState?.required ?? !accessor.schema.nullable
 
-	const [state, setState] = useState<any>(undefined)
+		const [state, setState] = useState<any>(undefined)
 
-	const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })
-	const accessorGetter = accessor.getAccessor
-	const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)
+		const { parseValue, formatValue, defaultInputProps } = useFormInputHandler(accessor, { formatValue: formatValueIn, parseValue: parseValueIn })
+		const accessorGetter = accessor.getAccessor
+		const { ref, onFocus, onBlur } = useFormInputValidationHandler(accessor)
 
-	return (
-		<SlotInput
-			ref={ref}
-			value={formatValue(accessor.value, { state, setState })}
-			data-invalid={dataAttribute(hasErrors)}
-			data-dirty={dataAttribute(dirty)}
-			data-required={dataAttribute(required)}
-			onFocus={onFocus}
-			onBlur={onBlur}
-			onChange={useReferentiallyStableCallback<ChangeEventHandler<HTMLInputElement>>(e => {
-				accessorGetter().updateValue(parseValue(e.target.value, { state, setState }))
-			})}
-			{...defaultInputProps}
-			id={id ? `${id}-input` : undefined}
-			required={required}
-			{...props}
-		/>
-	)
-}, ({ field, isNonbearing, defaultValue }) => {
-	return <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />
-})
+		return (
+			<SlotInput
+				ref={ref}
+				value={formatValue(accessor.value, { state, setState })}
+				data-invalid={dataAttribute(hasErrors)}
+				data-dirty={dataAttribute(dirty)}
+				data-required={dataAttribute(required)}
+				onFocus={onFocus}
+				onBlur={onBlur}
+				onChange={useReferentiallyStableCallback<ChangeEventHandler<HTMLInputElement>>(e => {
+					accessorGetter().updateValue(parseValue(e.target.value, { state, setState }))
+				})}
+				{...defaultInputProps}
+				id={id ? `${id}-input` : undefined}
+				required={required}
+				{...props}
+			/>
+		)
+	},
+	({ field, isNonbearing, defaultValue }) => {
+		return <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />
+	},
+)

package/src/components/FormRadioInput.tsx

@@ -48,5 +48,5 @@ export const FormRadioInput = Component<FormRadioItemProps>(({ field, value, def
 		/>
 	)
 }, ({ field, isNonbearing, defaultValue }) => {
-	return <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue}/>
+	return <Field field={field} isNonbearing={isNonbearing} defaultValue={defaultValue} />
 })

package/src/contexts.tsx

@@ -1,12 +1,10 @@
 import { createContext } from '@contember/react-utils'
 import { FormFieldState } from './types'
 
-
 const FormFieldStateContext_ = createContext<FormFieldState | undefined>('FormFieldStateContext', undefined)
 export const FormFieldStateContext = FormFieldStateContext_[0]
 export const useFormFieldState = FormFieldStateContext_[1]
 
-
 /**
  * @deprecated use `useFormState` instead
  */

package/src/hooks/useFormInputValidationHandler.tsx

@@ -4,7 +4,7 @@ import { FieldAccessor, useEntityBeforePersist } from '@contember/react-binding'
 
 export const useFormInputValidationHandler = (field: FieldAccessor<any>) => {
 	const accessorGetter = field.getAccessor
-	const validationMessage = useRef<string>()
+	const validationMessage = useRef<string>(undefined)
 	const [focus, setFocus] = React.useState(false)
 	const inputRef = React.useRef<HTMLInputElement>(null)
 	useEntityBeforePersist(useCallback(() => {

package/src/internal/useFormInputHandler.ts

@@ -125,10 +125,10 @@ const toLocalDate = (date: Date) => {
 		return '0'.repeat(Math.max(0, length - str.length)) + str
 	}
 
-	return pad(date.getFullYear(), 4) +
-		'-' + pad(date.getMonth() + 1) +
-		'-' + pad(date.getDate()) +
-		'T' + pad(date.getHours()) +
-		':' + pad(date.getMinutes()) +
-		':' + pad(date.getSeconds())
+	return pad(date.getFullYear(), 4)
+		+ '-' + pad(date.getMonth() + 1)
+		+ '-' + pad(date.getDate())
+		+ 'T' + pad(date.getHours())
+		+ ':' + pad(date.getMinutes())
+		+ ':' + pad(date.getSeconds())
 }