Disable profile wizard continue buttons until fields are complete (https://github.com/woocommerce/woocommerce-admin/pull/2983)

This commit is contained in:
Justin Shreve 2019-10-04 09:46:27 -04:00 committed by GitHub
parent 9f38e2d619
commit 6bcc63f2de
6 changed files with 10 additions and 8 deletions

View File

@ -304,7 +304,7 @@ class BusinessDetails extends Component {
onSubmitCallback={ this.onContinue }
validate={ this.validate }
>
{ ( { getInputProps, handleSubmit, values } ) => {
{ ( { getInputProps, handleSubmit, values, isValidForm } ) => {
// Show extensions when the currently selling elsewhere checkbox has been answered.
const showExtensions = '' !== values.selling_venues;
return (
@ -360,6 +360,7 @@ class BusinessDetails extends Component {
isPrimary
className="woocommerce-profile-wizard__continue"
onClick={ handleSubmit }
disabled={ ! isValidForm }
>
{ __( 'Continue', 'woocommerce-admin' ) }
</Button>

View File

@ -85,7 +85,7 @@ class Industry extends Component {
render() {
const { industries } = onboarding;
const { error } = this.state;
const { error, selected } = this.state;
return (
<Fragment>
<H className="woocommerce-profile-wizard__header-title">
@ -108,7 +108,7 @@ class Industry extends Component {
{ error && <span className="woocommerce-profile-wizard__error">{ error }</span> }
</div>
<Button isPrimary onClick={ this.onContinue }>
<Button isPrimary onClick={ this.onContinue } disabled={ ! selected.length }>
{ __( 'Continue', 'woocommerce-admin' ) }
</Button>
</Card>

View File

@ -87,7 +87,7 @@ class ProductTypes extends Component {
render() {
const { productTypes } = wcSettings.onboarding;
const { error } = this.state;
const { error, selected } = this.state;
return (
<Fragment>
<H className="woocommerce-profile-wizard__header-title">
@ -134,6 +134,7 @@ class ProductTypes extends Component {
isPrimary
className="woocommerce-profile-wizard__continue"
onClick={ this.onContinue }
disabled={ ! selected.length }
>
{ __( 'Continue', 'woocommerce-admin' ) }
</Button>

View File

@ -92,7 +92,7 @@ class StoreDetails extends Component {
onSubmitCallback={ this.onContinue }
validate={ validateStoreAddress }
>
{ ( { getInputProps, handleSubmit } ) => (
{ ( { getInputProps, handleSubmit, isValidForm } ) => (
<Fragment>
<StoreAddress getInputProps={ getInputProps } />
<CheckboxControl
@ -100,7 +100,7 @@ class StoreDetails extends Component {
{ ...getInputProps( 'isClient' ) }
/>
<Button isPrimary onClick={ handleSubmit }>
<Button isPrimary onClick={ handleSubmit } disabled={ ! isValidForm }>
{ __( 'Continue', 'woocommerce-admin' ) }
</Button>
</Fragment>

View File

@ -130,8 +130,7 @@
.woocommerce-profile-wizard__error {
display: block;
margin-top: $gap;
margin-bottom: $gap;
padding: $gap;
font-size: 12px;
color: $studio-red-50;
}

View File

@ -106,6 +106,7 @@ class Form extends Component {
setValue: this.setValue,
handleSubmit: this.handleSubmit,
getInputProps: this.getInputProps,
isValidForm: ! Object.keys( errors ).length,
};
}