Create CountyInput component (https://github.com/woocommerce/woocommerce-blocks/pull/1727)
* Split CountryInput and Select * Create County Input * Show text input when there are no county options * Reset county value when changing country * Fix keyboard navigation * Hide checkmark * Add reset styles for several popular themes * Add country prop to ShippingCountyInput
This commit is contained in:
parent
95abb4871a
commit
69f49760a8
|
@ -2,14 +2,12 @@
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classnames from 'classnames';
|
|
||||||
import { CustomSelectControl } from 'wordpress-components';
|
|
||||||
import { decodeEntities } from '@wordpress/html-entities';
|
import { decodeEntities } from '@wordpress/html-entities';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import './style.scss';
|
import Select from '../select';
|
||||||
|
|
||||||
const CountryInput = ( {
|
const CountryInput = ( {
|
||||||
className,
|
className,
|
||||||
|
@ -24,19 +22,12 @@ const CountryInput = ( {
|
||||||
} ) );
|
} ) );
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CustomSelectControl
|
<Select
|
||||||
className={ classnames( 'wc-block-country-input', className, {
|
className={ className }
|
||||||
'is-active': value,
|
|
||||||
} ) }
|
|
||||||
label={ label }
|
label={ label }
|
||||||
|
onChange={ onChange }
|
||||||
options={ options }
|
options={ options }
|
||||||
onChange={ ( { selectedItem } ) => {
|
value={ options.find( ( option ) => option.key === value ) }
|
||||||
onChange( selectedItem.key );
|
|
||||||
} }
|
|
||||||
value={ {
|
|
||||||
key: value,
|
|
||||||
name: decodeEntities( countries[ value ] ),
|
|
||||||
} }
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { ALLOWED_COUNTIES } from '@woocommerce/block-settings';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import CountyInput from './county-input.js';
|
||||||
|
|
||||||
|
const BillingCountyInput = ( props ) => {
|
||||||
|
return <CountyInput counties={ ALLOWED_COUNTIES } { ...props } />;
|
||||||
|
};
|
||||||
|
|
||||||
|
BillingCountyInput.propTypes = {
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
className: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BillingCountyInput;
|
|
@ -0,0 +1,63 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { decodeEntities } from '@wordpress/html-entities';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import TextInput from '../text-input';
|
||||||
|
import Select from '../select';
|
||||||
|
|
||||||
|
const CountyInput = ( {
|
||||||
|
className,
|
||||||
|
counties,
|
||||||
|
country,
|
||||||
|
label,
|
||||||
|
onChange,
|
||||||
|
value = '',
|
||||||
|
} ) => {
|
||||||
|
const countryCounties = counties[ country ];
|
||||||
|
if ( ! countryCounties || Object.keys( countryCounties ).length === 0 ) {
|
||||||
|
return (
|
||||||
|
<TextInput
|
||||||
|
className={ className }
|
||||||
|
label={ label }
|
||||||
|
onChange={ onChange }
|
||||||
|
value={ value }
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = Object.keys( countryCounties ).map( ( key ) => ( {
|
||||||
|
key,
|
||||||
|
name: decodeEntities( countryCounties[ key ] ),
|
||||||
|
} ) );
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
className={ className }
|
||||||
|
label={ label }
|
||||||
|
onChange={ onChange }
|
||||||
|
options={ options }
|
||||||
|
value={ options.find( ( option ) => option.key === value ) }
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
CountyInput.propTypes = {
|
||||||
|
counties: PropTypes.objectOf(
|
||||||
|
PropTypes.oneOfType( [
|
||||||
|
PropTypes.array,
|
||||||
|
PropTypes.objectOf( PropTypes.string ),
|
||||||
|
] )
|
||||||
|
).isRequired,
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
className: PropTypes.string,
|
||||||
|
country: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CountyInput;
|
|
@ -0,0 +1,3 @@
|
||||||
|
export { default as CountyInput } from './county-input';
|
||||||
|
export { default as BillingCountyInput } from './billing-county-input';
|
||||||
|
export { default as ShippingCountyInput } from './shipping-county-input';
|
|
@ -0,0 +1,23 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { SHIPPING_COUNTIES } from '@woocommerce/block-settings';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import CountyInput from './county-input.js';
|
||||||
|
|
||||||
|
const ShippingCountyInput = ( props ) => {
|
||||||
|
return <CountyInput counties={ SHIPPING_COUNTIES } { ...props } />;
|
||||||
|
};
|
||||||
|
|
||||||
|
ShippingCountyInput.propTypes = {
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
className: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ShippingCountyInput;
|
|
@ -3,7 +3,7 @@
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
> .wc-block-country-input,
|
> .wc-block-select,
|
||||||
> .wc-block-text-input {
|
> .wc-block-text-input {
|
||||||
margin-right: $gap-small;
|
margin-right: $gap-small;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
|
|
|
@ -0,0 +1,45 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import classnames from 'classnames';
|
||||||
|
import { CustomSelectControl } from 'wordpress-components';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
|
const Select = ( { className, label, onChange, options, value } ) => {
|
||||||
|
return (
|
||||||
|
<CustomSelectControl
|
||||||
|
className={ classnames( 'wc-block-select', className, {
|
||||||
|
'is-active': value,
|
||||||
|
} ) }
|
||||||
|
label={ label }
|
||||||
|
onChange={ ( { selectedItem } ) => {
|
||||||
|
onChange( selectedItem.key );
|
||||||
|
} }
|
||||||
|
options={ options }
|
||||||
|
value={ value }
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Select.propTypes = {
|
||||||
|
onChange: PropTypes.func.isRequired,
|
||||||
|
options: PropTypes.arrayOf(
|
||||||
|
PropTypes.shape( {
|
||||||
|
key: PropTypes.string.isRequired,
|
||||||
|
name: PropTypes.string.isRequired,
|
||||||
|
} ).isRequired
|
||||||
|
).isRequired,
|
||||||
|
className: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.shape( {
|
||||||
|
key: PropTypes.string.isRequired,
|
||||||
|
name: PropTypes.string.isRequired,
|
||||||
|
} ),
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Select;
|
|
@ -1,4 +1,4 @@
|
||||||
.wc-block-country-input {
|
.wc-block-select {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: $gap;
|
margin-top: $gap;
|
||||||
|
|
||||||
|
@ -23,17 +23,23 @@
|
||||||
|
|
||||||
.components-custom-select-control__button {
|
.components-custom-select-control__button {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
box-shadow: none;
|
||||||
|
color: $input-text-active;
|
||||||
|
font-family: inherit;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
letter-spacing: inherit;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
padding: $gap-large $gap $gap-smallest;
|
padding: $gap-large $gap $gap-smallest;
|
||||||
|
text-transform: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -49,4 +55,8 @@
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-left: $gap;
|
padding-left: $gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.components-custom-select-control__item-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -8,6 +8,7 @@ import CheckoutForm from '@woocommerce/base-components/checkout/form';
|
||||||
import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
|
import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
|
||||||
import TextInput from '@woocommerce/base-components/text-input';
|
import TextInput from '@woocommerce/base-components/text-input';
|
||||||
import { ShippingCountryInput } from '@woocommerce/base-components/country-input';
|
import { ShippingCountryInput } from '@woocommerce/base-components/country-input';
|
||||||
|
import { ShippingCountyInput } from '@woocommerce/base-components/county-input';
|
||||||
import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
|
import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
|
||||||
import InputRow from '@woocommerce/base-components/input-row';
|
import InputRow from '@woocommerce/base-components/input-row';
|
||||||
import { CheckboxControl } from '@wordpress/components';
|
import { CheckboxControl } from '@wordpress/components';
|
||||||
|
@ -171,6 +172,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
||||||
setShippingFields( {
|
setShippingFields( {
|
||||||
...shippingFields,
|
...shippingFields,
|
||||||
country: newValue,
|
country: newValue,
|
||||||
|
county: '',
|
||||||
} )
|
} )
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
@ -189,7 +191,8 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
|
||||||
/>
|
/>
|
||||||
</InputRow>
|
</InputRow>
|
||||||
<InputRow>
|
<InputRow>
|
||||||
<TextInput
|
<ShippingCountyInput
|
||||||
|
country={ shippingFields.country }
|
||||||
label={ __(
|
label={ __(
|
||||||
'County',
|
'County',
|
||||||
'woo-gutenberg-products-block'
|
'woo-gutenberg-products-block'
|
||||||
|
|
|
@ -35,3 +35,5 @@ export const ATTRIBUTES = getSetting( 'attributes', [] );
|
||||||
export const WC_BLOCKS_ASSET_URL = getSetting( 'wcBlocksAssetUrl', '' );
|
export const WC_BLOCKS_ASSET_URL = getSetting( 'wcBlocksAssetUrl', '' );
|
||||||
export const SHIPPING_COUNTRIES = getSetting( 'shippingCountries', {} );
|
export const SHIPPING_COUNTRIES = getSetting( 'shippingCountries', {} );
|
||||||
export const ALLOWED_COUNTRIES = getSetting( 'allowedCountries', {} );
|
export const ALLOWED_COUNTRIES = getSetting( 'allowedCountries', {} );
|
||||||
|
export const SHIPPING_COUNTIES = getSetting( 'shippingCounties', {} );
|
||||||
|
export const ALLOWED_COUNTIES = getSetting( 'allowedCounties', {} );
|
||||||
|
|
|
@ -52,6 +52,8 @@ class Checkout extends AbstractBlock {
|
||||||
);
|
);
|
||||||
$data_registry->add( 'allowedCountries', WC()->countries->get_allowed_countries() );
|
$data_registry->add( 'allowedCountries', WC()->countries->get_allowed_countries() );
|
||||||
$data_registry->add( 'shippingCountries', WC()->countries->get_shipping_countries() );
|
$data_registry->add( 'shippingCountries', WC()->countries->get_shipping_countries() );
|
||||||
|
$data_registry->add( 'allowedCounties', WC()->countries->get_allowed_country_states() );
|
||||||
|
$data_registry->add( 'shippingCounties', WC()->countries->get_shipping_country_states() );
|
||||||
\Automattic\WooCommerce\Blocks\Assets::register_block_script( $this->block_name . '-frontend', $this->block_name . '-block-frontend' );
|
\Automattic\WooCommerce\Blocks\Assets::register_block_script( $this->block_name . '-frontend', $this->block_name . '-block-frontend' );
|
||||||
return $content;
|
return $content;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue