Revert "Move TextInput to checkout package and allow it to be used for input type=number (#4238)"

opr · opr · commit ea74395e34de · 2021-05-25T14:13:29.000+01:00
This reverts commit 15c1779.
diff --git a/assets/js/base/components/cart-checkout/address-form/address-form.js b/assets/js/base/components/cart-checkout/address-form/address-form.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
 import {
 	BillingCountryInput,
 	ShippingCountryInput,
@@ -11,10 +11,7 @@ import {
 	BillingStateInput,
 	ShippingStateInput,
 } from '@woocommerce/base-components/state-input';
-import {
-	useValidationContext,
-	ValidationInputError,
-} from '@woocommerce/base-context';
+import { useValidationContext } from '@woocommerce/base-context';
 import { useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
@@ -77,20 +74,10 @@ const AddressForm = ( {
 } ) => {
 	const {
 		getValidationError,
-		getValidationErrorId,
 		setValidationErrors,
 		clearValidationError,
-		hideValidationError,
 	} = useValidationContext();
 
-	const textInputValidationFunctions = {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	};
-
 	const currentFields = useShallowEqual( fields );
 
 	const countryValidationError =
@@ -214,9 +201,8 @@ const AddressForm = ( {
 								[ field.key ]: newValue,
 							} )
 						}
+						errorMessage={ field.errorMessage }
 						required={ field.required }
-						inputErrorComponent={ ValidationInputError }
-						{ ...textInputValidationFunctions }
 					/>
 				);
 			} ) }
diff --git a/assets/js/base/components/cart-checkout/totals/coupon/index.js b/assets/js/base/components/cart-checkout/totals/coupon/index.js
@@ -3,12 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import {
-	Button,
-	Panel,
-	Label,
-	ValidatedTextInput,
-} from '@woocommerce/blocks-checkout';
+import { Button, Panel, Label } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
 import PropTypes from 'prop-types';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
@@ -30,21 +26,7 @@ const TotalsCoupon = ( {
 } ) => {
 	const [ couponValue, setCouponValue ] = useState( '' );
 	const currentIsLoading = useRef( false );
-	const {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	} = useValidationContext();
-
-	const textInputValidationFunctions = {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	};
+	const { getValidationError, getValidationErrorId } = useValidationContext();
 
 	const validationError = getValidationError( 'coupon' );
 
@@ -106,8 +88,6 @@ const TotalsCoupon = ( {
 							validateOnMount={ false }
 							focusOnMount={ true }
 							showError={ false }
-							inputErrorComponent={ ValidationInputError }
-							{ ...textInputValidationFunctions }
 						/>
 						<Button
 							className="wc-block-components-totals-coupon__button"
diff --git a/assets/js/base/components/state-input/state-input.js b/assets/js/base/components/state-input/state-input.js
@@ -3,18 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCallback, useMemo } from '@wordpress/element';
 import classnames from 'classnames';
-import {
-	useValidationContext,
-	ValidationInputError,
-} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
  */
+import { ValidatedTextInput } from '../text-input';
 import { ValidatedSelect } from '../select';
 import './style.scss';
 
@@ -29,22 +25,6 @@ const StateInput = ( {
 	value = '',
 	required = false,
 } ) => {
-	const {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	} = useValidationContext();
-
-	const textInputValidationFunctions = {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	};
-
 	const countryStates = states[ country ];
 	const options = useMemo(
 		() =>
@@ -128,8 +108,6 @@ const StateInput = ( {
 			autoComplete={ autoComplete }
 			value={ value }
 			required={ required }
-			inputErrorComponent={ ValidationInputError }
-			{ ...textInputValidationFunctions }
 		/>
 	);
 };
diff --git a/assets/js/base/components/text-input/index.ts b/assets/js/base/components/text-input/index.ts
diff --git a/assets/js/base/components/text-input/style.scss b/assets/js/base/components/text-input/style.scss
@@ -39,7 +39,6 @@
 
 	input[type="tel"],
 	input[type="url"],
-	input[type="number"],
 	input[type="text"],
 	input[type="email"] {
 		@include font-size(regular);
@@ -75,7 +74,6 @@
 
 	&.is-active input[type="tel"],
 	&.is-active input[type="url"],
-	&.is-active input[type="number"],
 	&.is-active input[type="text"],
 	&.is-active input[type="email"] {
 		padding: em($gap-large) 0 em($gap-smallest) $gap;
diff --git a/assets/js/base/components/text-input/text-input.tsx b/assets/js/base/components/text-input/text-input.tsx
@@ -4,12 +4,12 @@
 import { forwardRef, InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { useState } from '@wordpress/element';
+import { Label } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import Label from '../label';
 
 interface TextInputProps
 	extends Omit<
@@ -49,21 +49,18 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 				/* Do nothing */
 			},
 			feedback,
-			...rest
 		},
 		ref
 	) => {
 		const [ isActive, setIsActive ] = useState( false );
+
 		return (
 			<div
 				className={ classnames(
 					'wc-block-components-text-input',
 					className,
 					{
-						'is-active':
-							isActive ||
-							value ||
-							( value === 0 && type === 'number' ),
+						'is-active': isActive || value,
 					}
 				) }
 			>
@@ -90,7 +87,6 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 							: ariaDescribedBy
 					}
 					required={ required }
-					{ ...rest }
 				/>
 				<Label
 					label={ label }
diff --git a/assets/js/base/components/text-input/validated-text-input.tsx b/assets/js/base/components/text-input/validated-text-input.tsx
@@ -2,8 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useRef, useEffect, useState, Component } from 'react';
+import { useCallback, useRef, useEffect, useState } from 'react';
 import classnames from 'classnames';
+import {
+	ValidationInputError,
+	useValidationContext,
+} from '@woocommerce/base-context';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
 
 /**
@@ -33,18 +37,6 @@ type ValidatedTextInputProps = (
 	focusOnMount?: boolean;
 	showError?: boolean;
 	onChange: ( newValue: string ) => void;
-	// @todo Type this properly when validation context is typed
-	getValidationError: (
-		errorId: string
-	) => {
-		message?: string;
-		hidden?: boolean;
-	};
-	hideValidationError: ( errorId: string ) => void;
-	setValidationErrors: ( errors: Record< string, unknown > ) => void;
-	clearValidationError: ( errorId: string ) => void;
-	getValidationErrorId: ( errorId: string ) => string;
-	inputErrorComponent: typeof Component;
 };
 
 const ValidatedTextInput = ( {
@@ -57,16 +49,18 @@ const ValidatedTextInput = ( {
 	focusOnMount = false,
 	onChange,
 	showError = true,
-	getValidationError,
-	hideValidationError,
-	setValidationErrors,
-	clearValidationError,
-	getValidationErrorId,
-	inputErrorComponent: ValidationInputError,
 	...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;
diff --git a/assets/js/base/components/tsconfig.json b/assets/js/base/components/tsconfig.json
@@ -1,6 +1,6 @@
 {
 	"extends": "../../../../tsconfig.base.json",
 	"compilerOptions": {},
-	"include": [ ".", "../../../../packages/prices", "../../../../packages/checkout", "../context/hooks", "../../type-defs" ],
+	"include": [ ".", "../../../../packages/prices", "../context/hooks", "../../type-defs" ],
 	"exclude": [ "**/test/**" ]
 }
diff --git a/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js b/assets/js/blocks/cart-checkout/checkout/form/contact-fields-step.js
@@ -3,12 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
-import {
-	useCheckoutContext,
-	useValidationContext,
-	ValidationInputError,
-} from '@woocommerce/base-context';
+import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
+import { useCheckoutContext } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
 import CheckboxControl from '@woocommerce/base-components/checkbox-control';
 
@@ -27,21 +23,6 @@ const ContactFieldsStep = ( {
 		shouldCreateAccount,
 		setShouldCreateAccount,
 	} = useCheckoutContext();
-	const {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	} = useValidationContext();
-
-	const textInputValidationFunctions = {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	};
 
 	const createAccountUI = ! customerId &&
 		allowCreateAccount &&
@@ -80,8 +61,6 @@ const ContactFieldsStep = ( {
 				autoComplete="email"
 				onChange={ onChangeEmail }
 				required={ true }
-				inputErrorComponent={ ValidationInputError }
-				{ ...textInputValidationFunctions }
 			/>
 			{ createAccountUI }
 		</FormStep>
diff --git a/assets/js/blocks/cart-checkout/checkout/form/phone-number/index.js b/assets/js/blocks/cart-checkout/checkout/form/phone-number/index.js
@@ -2,11 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
-import {
-	useValidationContext,
-	ValidationInputError,
-} from '@woocommerce/base-context';
+import { ValidatedTextInput } from '@woocommerce/base-components/text-input';
 
 /**
  * Renders a phone number input.
@@ -18,21 +14,6 @@ import {
  * @return {*} The component.
  */
 const PhoneNumber = ( { isRequired = false, value = '', onChange } ) => {
-	const {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	} = useValidationContext();
-
-	const textInputValidationFunctions = {
-		getValidationError,
-		getValidationErrorId,
-		setValidationErrors,
-		clearValidationError,
-		hideValidationError,
-	};
 	return (
 		<ValidatedTextInput
 			id="phone"
@@ -46,8 +27,6 @@ const PhoneNumber = ( { isRequired = false, value = '', onChange } ) => {
 			}
 			value={ value }
 			onChange={ onChange }
-			inputErrorComponent={ ValidationInputError }
-			{ ...textInputValidationFunctions }
 		/>
 	);
 };
diff --git a/packages/checkout/index.js b/packages/checkout/index.js
@@ -1,7 +1,6 @@
 export * from './totals';
 export * from './utils';
 export * from './slot';
-export * from './text-input';
 export * from './registry';
 export { default as ExperimentalOrderMeta } from './order-meta';
 export { default as ExperimentalOrderShippingPackages } from './order-shipping-packages';

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "../../../../tsconfig.base.json",`
`3`	`3`	`"compilerOptions": {},`
`4`		`- "include": [ ".", "../../../../packages/prices", "../../../../packages/checkout", "../context/hooks", "../../type-defs" ],`
	`4`	`+ "include": [ ".", "../../../../packages/prices", "../context/hooks", "../../type-defs" ],`
`5`	`5`	`"exclude": [ "/test/" ]`
`6`	`6`	`}`