woocommerce/plugins/woocommerce-blocks/assets/js/base/components/text-input/validated-text-input.tsx

179 lines
4.3 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { useCallback, useRef, useEffect, useState } from 'react';
import classnames from 'classnames';
import {
ValidationInputError,
useValidationContext,
} from '@woocommerce/base-context';
import { withInstanceId } from '@wordpress/compose';
Add Slot/Fill to discounts area in cart sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/4248) * Move text-input to checkout package * Pass validation props directly to ValidatedTextInput * Import label relatively instead of from package * Pass validation functions to ValidatedTextInput This is so it doesn't need to get them from useValidationContext. * Add InputProps to ValidatedTextInput This will be used to control additional props on the input element of TextInput * Spread inputProps onto <input> element of TextInput * Export TextInput from @woocommerce/blocks-checkout * Add @woocommerce/blocks-checkout package to tsconfig * Allow styling to be applied to number inputs and when value is 0 * Make style order consistent * Remove inputProps to rely on rest in TextInput * Add specific prop for the inputErrorComponent * Only disallow active state if value is 0 AND type is number * Change all uses of ValidatedTextInput to also pass inputErrorComponent * Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent" This reverts commit ec734b99c20c4d29fcf778714246fc406ee37eaf. * Revert "Remove inputProps to rely on rest in TextInput" This reverts commit 1fc64cca4002206423d1fa443ff2d60130ba1ea0. * Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"" This reverts commit 110e3606a996668be5a32698b634b7706d16cddc. * Revert "Revert "Remove inputProps to rely on rest in TextInput"" This reverts commit aeb03526c44b3fcc97a719a18930d08157a80baf. * Don't pass errorMessage to ValidatedTextInput * Add DiscountsMetaSlot * Add ExperimentalDiscountsMeta.Slot to Cart sidebar * Add extra styles for Button and Panel components * Export ExperimentalDiscountsMeta from checkout package * Add updateCartFromApi util to @woocommerce/blocks-checkout * Add comment to updateCartFromApi * Change updateCartFromApi to TypeScript * Revert "Move `TextInput` to checkout package and allow it to be used for input type=number (https://github.com/woocommerce/woocommerce-blocks/pull/4238)" This reverts commit ee9b2d20e0b4a19a458314a0e69cf845b331ccc0. * Stop passing contexts through the discounts slot fill * Allow ValidatedTextInput to be used for type=number * Remove contexts from Discounts slot fill * Update snapshots * Stop `errorMessage` being spread onto input fields in checkout * Add paths to tsconfig * Remove contexts from Discounts slot * Accept step min and max on ValidatedTextInput * Remove "no-margin" option on buttons * Remove spinners from input type number * Remove `no-top-border` style from panel * Prevent text in buttons from breaking in the middle of words * Add checkout package to tsconfig file list * Stop passing components through DiscountsMetaSlot
2021-06-04 08:44:26 +00:00
import { isString } from '@woocommerce/types';
/**
* Internal dependencies
*/
import TextInput from './text-input';
import './style.scss';
interface ValidatedTextInputPropsWithId {
instanceId?: string;
id: string;
}
interface ValidatedTextInputPropsWithInstanceId {
instanceId: string;
id?: string;
}
type ValidatedTextInputProps = (
| ValidatedTextInputPropsWithId
| ValidatedTextInputPropsWithInstanceId
) & {
className?: string;
ariaDescribedBy?: string;
errorId?: string;
focusOnMount?: boolean;
showError?: boolean;
Add Slot/Fill to discounts area in cart sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/4248) * Move text-input to checkout package * Pass validation props directly to ValidatedTextInput * Import label relatively instead of from package * Pass validation functions to ValidatedTextInput This is so it doesn't need to get them from useValidationContext. * Add InputProps to ValidatedTextInput This will be used to control additional props on the input element of TextInput * Spread inputProps onto <input> element of TextInput * Export TextInput from @woocommerce/blocks-checkout * Add @woocommerce/blocks-checkout package to tsconfig * Allow styling to be applied to number inputs and when value is 0 * Make style order consistent * Remove inputProps to rely on rest in TextInput * Add specific prop for the inputErrorComponent * Only disallow active state if value is 0 AND type is number * Change all uses of ValidatedTextInput to also pass inputErrorComponent * Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent" This reverts commit ec734b99c20c4d29fcf778714246fc406ee37eaf. * Revert "Remove inputProps to rely on rest in TextInput" This reverts commit 1fc64cca4002206423d1fa443ff2d60130ba1ea0. * Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"" This reverts commit 110e3606a996668be5a32698b634b7706d16cddc. * Revert "Revert "Remove inputProps to rely on rest in TextInput"" This reverts commit aeb03526c44b3fcc97a719a18930d08157a80baf. * Don't pass errorMessage to ValidatedTextInput * Add DiscountsMetaSlot * Add ExperimentalDiscountsMeta.Slot to Cart sidebar * Add extra styles for Button and Panel components * Export ExperimentalDiscountsMeta from checkout package * Add updateCartFromApi util to @woocommerce/blocks-checkout * Add comment to updateCartFromApi * Change updateCartFromApi to TypeScript * Revert "Move `TextInput` to checkout package and allow it to be used for input type=number (https://github.com/woocommerce/woocommerce-blocks/pull/4238)" This reverts commit ee9b2d20e0b4a19a458314a0e69cf845b331ccc0. * Stop passing contexts through the discounts slot fill * Allow ValidatedTextInput to be used for type=number * Remove contexts from Discounts slot fill * Update snapshots * Stop `errorMessage` being spread onto input fields in checkout * Add paths to tsconfig * Remove contexts from Discounts slot * Accept step min and max on ValidatedTextInput * Remove "no-margin" option on buttons * Remove spinners from input type number * Remove `no-top-border` style from panel * Prevent text in buttons from breaking in the middle of words * Add checkout package to tsconfig file list * Stop passing components through DiscountsMetaSlot
2021-06-04 08:44:26 +00:00
errorMessage?: string;
onChange: ( newValue: string ) => void;
value: string;
};
const ValidatedTextInput = ( {
className,
instanceId,
id,
ariaDescribedBy,
errorId,
focusOnMount = false,
onChange,
showError = true,
Add Slot/Fill to discounts area in cart sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/4248) * Move text-input to checkout package * Pass validation props directly to ValidatedTextInput * Import label relatively instead of from package * Pass validation functions to ValidatedTextInput This is so it doesn't need to get them from useValidationContext. * Add InputProps to ValidatedTextInput This will be used to control additional props on the input element of TextInput * Spread inputProps onto <input> element of TextInput * Export TextInput from @woocommerce/blocks-checkout * Add @woocommerce/blocks-checkout package to tsconfig * Allow styling to be applied to number inputs and when value is 0 * Make style order consistent * Remove inputProps to rely on rest in TextInput * Add specific prop for the inputErrorComponent * Only disallow active state if value is 0 AND type is number * Change all uses of ValidatedTextInput to also pass inputErrorComponent * Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent" This reverts commit ec734b99c20c4d29fcf778714246fc406ee37eaf. * Revert "Remove inputProps to rely on rest in TextInput" This reverts commit 1fc64cca4002206423d1fa443ff2d60130ba1ea0. * Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"" This reverts commit 110e3606a996668be5a32698b634b7706d16cddc. * Revert "Revert "Remove inputProps to rely on rest in TextInput"" This reverts commit aeb03526c44b3fcc97a719a18930d08157a80baf. * Don't pass errorMessage to ValidatedTextInput * Add DiscountsMetaSlot * Add ExperimentalDiscountsMeta.Slot to Cart sidebar * Add extra styles for Button and Panel components * Export ExperimentalDiscountsMeta from checkout package * Add updateCartFromApi util to @woocommerce/blocks-checkout * Add comment to updateCartFromApi * Change updateCartFromApi to TypeScript * Revert "Move `TextInput` to checkout package and allow it to be used for input type=number (https://github.com/woocommerce/woocommerce-blocks/pull/4238)" This reverts commit ee9b2d20e0b4a19a458314a0e69cf845b331ccc0. * Stop passing contexts through the discounts slot fill * Allow ValidatedTextInput to be used for type=number * Remove contexts from Discounts slot fill * Update snapshots * Stop `errorMessage` being spread onto input fields in checkout * Add paths to tsconfig * Remove contexts from Discounts slot * Accept step min and max on ValidatedTextInput * Remove "no-margin" option on buttons * Remove spinners from input type number * Remove `no-top-border` style from panel * Prevent text in buttons from breaking in the middle of words * Add checkout package to tsconfig file list * Stop passing components through DiscountsMetaSlot
2021-06-04 08:44:26 +00:00
errorMessage: passedErrorMessage = '',
value = '',
...rest
}: ValidatedTextInputProps ) => {
const [ isPristine, setIsPristine ] = useState( true );
const inputRef = useRef< HTMLInputElement >( null );
const {
getValidationError,
hideValidationError,
setValidationErrors,
clearValidationError,
getValidationErrorId,
} = useValidationContext();
const textInputId =
typeof id !== 'undefined' ? id : 'textinput-' + instanceId;
const errorIdString = errorId !== undefined ? errorId : textInputId;
const validateInput = useCallback(
( errorsHidden = true ) => {
const inputObject = inputRef.current || null;
if ( ! inputObject ) {
return;
}
// Trim white space before validation.
inputObject.value = inputObject.value.trim();
const inputIsValid = inputObject.checkValidity();
if ( inputIsValid ) {
clearValidationError( errorIdString );
} else {
setValidationErrors( {
[ errorIdString ]: {
message:
inputObject.validationMessage ||
__(
'Invalid value.',
'woo-gutenberg-products-block'
),
hidden: errorsHidden,
},
} );
}
},
[ clearValidationError, errorIdString, setValidationErrors ]
);
/**
* Focus on mount
*
* If the input is in pristine state, focus the element.
*/
useEffect( () => {
if ( isPristine && focusOnMount ) {
inputRef.current?.focus();
}
setIsPristine( false );
}, [ focusOnMount, isPristine, setIsPristine ] );
/**
* Value Validation
*
* Runs validation on state change if the current element is not in focus. This is because autofilled elements do not
* trigger the blur() event, and so values can be validated in the background if the state changes elsewhere.
*/
useEffect( () => {
if (
inputRef.current?.ownerDocument?.activeElement !== inputRef.current
) {
validateInput( true );
}
// We need to track value even if it is not directly used so we know when it changes.
}, [ value, validateInput ] );
// Remove validation errors when unmounted.
useEffect( () => {
return () => {
clearValidationError( errorIdString );
};
}, [ clearValidationError, errorIdString ] );
// @todo - When useValidationContext is converted to TypeScript, remove this cast and use the correct type.
const errorMessage = ( getValidationError( errorIdString ) || {} ) as {
message?: string;
hidden?: boolean;
};
Add Slot/Fill to discounts area in cart sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/4248) * Move text-input to checkout package * Pass validation props directly to ValidatedTextInput * Import label relatively instead of from package * Pass validation functions to ValidatedTextInput This is so it doesn't need to get them from useValidationContext. * Add InputProps to ValidatedTextInput This will be used to control additional props on the input element of TextInput * Spread inputProps onto <input> element of TextInput * Export TextInput from @woocommerce/blocks-checkout * Add @woocommerce/blocks-checkout package to tsconfig * Allow styling to be applied to number inputs and when value is 0 * Make style order consistent * Remove inputProps to rely on rest in TextInput * Add specific prop for the inputErrorComponent * Only disallow active state if value is 0 AND type is number * Change all uses of ValidatedTextInput to also pass inputErrorComponent * Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent" This reverts commit ec734b99c20c4d29fcf778714246fc406ee37eaf. * Revert "Remove inputProps to rely on rest in TextInput" This reverts commit 1fc64cca4002206423d1fa443ff2d60130ba1ea0. * Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"" This reverts commit 110e3606a996668be5a32698b634b7706d16cddc. * Revert "Revert "Remove inputProps to rely on rest in TextInput"" This reverts commit aeb03526c44b3fcc97a719a18930d08157a80baf. * Don't pass errorMessage to ValidatedTextInput * Add DiscountsMetaSlot * Add ExperimentalDiscountsMeta.Slot to Cart sidebar * Add extra styles for Button and Panel components * Export ExperimentalDiscountsMeta from checkout package * Add updateCartFromApi util to @woocommerce/blocks-checkout * Add comment to updateCartFromApi * Change updateCartFromApi to TypeScript * Revert "Move `TextInput` to checkout package and allow it to be used for input type=number (https://github.com/woocommerce/woocommerce-blocks/pull/4238)" This reverts commit ee9b2d20e0b4a19a458314a0e69cf845b331ccc0. * Stop passing contexts through the discounts slot fill * Allow ValidatedTextInput to be used for type=number * Remove contexts from Discounts slot fill * Update snapshots * Stop `errorMessage` being spread onto input fields in checkout * Add paths to tsconfig * Remove contexts from Discounts slot * Accept step min and max on ValidatedTextInput * Remove "no-margin" option on buttons * Remove spinners from input type number * Remove `no-top-border` style from panel * Prevent text in buttons from breaking in the middle of words * Add checkout package to tsconfig file list * Stop passing components through DiscountsMetaSlot
2021-06-04 08:44:26 +00:00
if ( isString( passedErrorMessage ) && passedErrorMessage !== '' ) {
errorMessage.message = passedErrorMessage;
}
const hasError = errorMessage.message && ! errorMessage.hidden;
const describedBy =
showError && hasError && getValidationErrorId( errorIdString )
? getValidationErrorId( errorIdString )
: ariaDescribedBy;
return (
<TextInput
className={ classnames( className, {
'has-error': hasError,
} ) }
aria-invalid={ hasError === true }
id={ textInputId }
onBlur={ () => {
validateInput( false );
} }
feedback={
showError && (
<ValidationInputError
errorMessage={ passedErrorMessage }
propertyName={ errorIdString }
/>
)
}
ref={ inputRef }
onChange={ ( val ) => {
hideValidationError( errorIdString );
onChange( val );
} }
ariaDescribedBy={ describedBy }
value={ value }
{ ...rest }
/>
);
};
export default withInstanceId( ValidatedTextInput );