woocommerce/plugins/woocommerce-blocks/assets/js/base/context/hooks/use-validation.ts

62 lines
1.7 KiB
TypeScript

/**
* External dependencies
*/
import { useCallback } from '@wordpress/element';
import type {
ValidationData,
ValidationContextError,
} from '@woocommerce/type-defs/contexts';
import { useDispatch, useSelect } from '@wordpress/data';
import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
/**
* Custom hook for setting for adding errors to the validation system.
*/
export const useValidation = (): ValidationData => {
const { clearValidationError, hideValidationError, setValidationErrors } =
useDispatch( VALIDATION_STORE_KEY );
const { hasValidationErrors, getValidationError } = useSelect(
( select ) => {
const store = select( VALIDATION_STORE_KEY );
return {
hasValidationErrors: store.hasValidationErrors,
getValidationError: store.getValidationError(),
};
}
);
const prefix = 'extensions-errors';
return {
hasValidationErrors: hasValidationErrors(),
getValidationError: useCallback(
( validationErrorId: string ) =>
getValidationError( `${ prefix }-${ validationErrorId }` ),
[ getValidationError ]
),
clearValidationError: useCallback(
( validationErrorId: string ) =>
clearValidationError( `${ prefix }-${ validationErrorId }` ),
[ clearValidationError ]
),
hideValidationError: useCallback(
( validationErrorId: string ) =>
hideValidationError( `${ prefix }-${ validationErrorId }` ),
[ hideValidationError ]
),
setValidationErrors: useCallback(
( errorsObject: Record< string, ValidationContextError > ) =>
setValidationErrors(
Object.fromEntries(
Object.entries( errorsObject ).map(
( [ validationErrorId, error ] ) => [
`${ prefix }-${ validationErrorId }`,
error,
]
)
)
),
[ setValidationErrors ]
),
};
};