* Create initial CountryInput component

* Create ShippingCountryInput

* Create BillingCountryInput

* Make backgrounds white

* Correctly align options

* Add CSS resets for 20xy themes

* Fix wrong defaults in countries constants

* Make CountryInput respect 'prefers-reduced-motion'

* Reverse prefers-reduced-motion check

* Set max-width to CountryInput dropdown

* Use decodeEntities to print country names

* Avoid unnecessary JSON enconding and later parsing

* Make sure country name is also encoded when selected

* Fix countries default value
This commit is contained in:
Albert Juhé Lluveras 2020-01-17 17:58:08 +01:00 committed by GitHub
parent eaa6b42d89
commit cad3e72769
12 changed files with 173 additions and 5 deletions

View File

@ -0,0 +1,23 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import { ALLOWED_COUNTRIES } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import CountryInput from './country-input.js';
const BillingCountryInput = ( props ) => {
return <CountryInput countries={ ALLOWED_COUNTRIES } { ...props } />;
};
BillingCountryInput.propTypes = {
onChange: PropTypes.func.isRequired,
className: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
};
export default BillingCountryInput;

View File

@ -0,0 +1,52 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { CustomSelectControl } from 'wordpress-components';
import { decodeEntities } from '@wordpress/html-entities';
/**
* Internal dependencies
*/
import './style.scss';
const CountryInput = ( {
className,
countries,
label,
onChange,
value = '',
} ) => {
const options = Object.keys( countries ).map( ( key ) => ( {
key,
name: decodeEntities( countries[ key ] ),
} ) );
return (
<CustomSelectControl
className={ classnames( 'wc-block-country-input', className, {
'is-active': value,
} ) }
label={ label }
options={ options }
onChange={ ( { selectedItem } ) => {
onChange( selectedItem.key );
} }
value={ {
key: value,
name: decodeEntities( countries[ value ] ),
} }
/>
);
};
CountryInput.propTypes = {
countries: PropTypes.objectOf( PropTypes.string ).isRequired,
onChange: PropTypes.func.isRequired,
className: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
};
export default CountryInput;

View File

@ -0,0 +1,3 @@
export { default as CountryInput } from './country-input';
export { default as BillingCountryInput } from './billing-country-input';
export { default as ShippingCountryInput } from './shipping-country-input';

View File

@ -0,0 +1,23 @@
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import { SHIPPING_COUNTRIES } from '@woocommerce/block-settings';
/**
* Internal dependencies
*/
import CountryInput from './country-input.js';
const ShippingCountryInput = ( props ) => {
return <CountryInput countries={ SHIPPING_COUNTRIES } { ...props } />;
};
ShippingCountryInput.propTypes = {
onChange: PropTypes.func.isRequired,
className: PropTypes.string,
label: PropTypes.string,
value: PropTypes.string,
};
export default ShippingCountryInput;

View File

@ -0,0 +1,52 @@
.wc-block-country-input {
position: relative;
margin-top: $gap;
label {
position: absolute;
transform: translateX(#{$gap}) translateY(#{$gap-small});
transform-origin: top left;
transition: all 200ms ease;
font-size: 16px;
line-height: 22px;
color: $gray-50;
z-index: 1;
@media screen and (prefers-reduced-motion: reduce) {
transition: none;
}
}
&.is-active label {
transform: translateX(#{$gap}) translateY(#{$gap-smallest}) scale(0.75);
}
.components-custom-select-control__button {
background-color: #fff;
font-size: 16px;
font-weight: normal;
height: 100%;
line-height: 1;
padding: $gap-large $gap $gap-smallest;
width: 100%;
&:hover,
&:focus,
&:active {
background-color: #fff;
}
}
.components-custom-select-control__menu {
background-color: #fff;
margin: 0;
max-height: 300px;
overflow: auto;
}
.components-custom-select-control__item {
font-size: 16px;
margin-left: 0;
padding-left: $gap;
}
}

View File

@ -3,8 +3,10 @@
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
& > .wc-block-text-input { > .wc-block-country-input,
> .wc-block-text-input {
margin-right: $gap-small; margin-right: $gap-small;
flex-basis: 0;
flex-grow: 1; flex-grow: 1;
margin-top: $gap; margin-top: $gap;
&:last-child { &:last-child {

View File

@ -21,6 +21,7 @@
.wc-block-text-input input[type="url"], .wc-block-text-input input[type="url"],
.wc-block-text-input input[type="text"], .wc-block-text-input input[type="text"],
.wc-block-text-input input[type="email"] { .wc-block-text-input input[type="email"] {
background-color: #fff;
padding: $gap-small $gap; padding: $gap-small $gap;
border-radius: 4px; border-radius: 4px;
border: 1px solid $input-border-gray; border: 1px solid $input-border-gray;
@ -32,6 +33,10 @@
box-sizing: border-box; box-sizing: border-box;
height: 48px; height: 48px;
color: $input-text-active; color: $input-text-active;
&:focus {
background-color: #fff;
}
} }
.wc-block-text-input.is-active input[type="tel"], .wc-block-text-input.is-active input[type="tel"],
.wc-block-text-input.is-active input[type="url"], .wc-block-text-input.is-active input[type="url"],

View File

@ -7,6 +7,7 @@ import FormStep from '@woocommerce/base-components/checkout/form-step';
import CheckoutForm from '@woocommerce/base-components/checkout/form'; 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 RadioControl from '@woocommerce/base-components/radio-control'; import RadioControl from '@woocommerce/base-components/radio-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';
@ -179,7 +180,7 @@ const Block = ( { shippingMethods = [], isEditor = false } ) => {
} }
/> />
<InputRow> <InputRow>
<TextInput <ShippingCountryInput
label={ __( label={ __(
'Country', 'Country',
'woo-gutenberg-products-block' 'woo-gutenberg-products-block'

View File

@ -33,3 +33,5 @@ export const DISPLAY_PRICES_INCLUDING_TAXES = getSetting(
export const PRODUCT_COUNT = getSetting( 'productCount', 0 ); export const PRODUCT_COUNT = getSetting( 'productCount', 0 );
export const ATTRIBUTES = getSetting( 'attributes', [] ); 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 ALLOWED_COUNTRIES = getSetting( 'allowedCountries', {} );

View File

@ -125,6 +125,8 @@ const mainEntry = {
'block-error-boundary': 'block-error-boundary':
'./assets/js/base/components/block-error-boundary/style.scss', './assets/js/base/components/block-error-boundary/style.scss',
'panel-style': './node_modules/@wordpress/components/src/panel/style.scss', 'panel-style': './node_modules/@wordpress/components/src/panel/style.scss',
'custom-select-control-style':
'./node_modules/@wordpress/components/src/custom-select-control/style.scss',
// cart & checkout blocks // cart & checkout blocks
cart: './assets/js/blocks/cart-checkout/cart/index.js', cart: './assets/js/blocks/cart-checkout/cart/index.js',

View File

@ -109,16 +109,17 @@
"npm": "6.13.4" "npm": "6.13.4"
}, },
"dependencies": { "dependencies": {
"@wordpress/components": "8.5.0",
"wordpress-components": "npm:@wordpress/components@8.5.0",
"@woocommerce/components": "4.0.0", "@woocommerce/components": "4.0.0",
"@wordpress/components": "8.5.0",
"@wordpress/html-entities": "^2.5.0",
"compare-versions": "3.5.1", "compare-versions": "3.5.1",
"downshift": "4.0.5", "downshift": "4.0.5",
"eslint-plugin-woocommerce": "file:bin/eslint-plugin-woocommerce", "eslint-plugin-woocommerce": "file:bin/eslint-plugin-woocommerce",
"gridicons": "3.3.1", "gridicons": "3.3.1",
"react-number-format": "4.3.1", "react-number-format": "4.3.1",
"trim-html": "0.1.9", "trim-html": "0.1.9",
"use-debounce": "3.3.0" "use-debounce": "3.3.0",
"wordpress-components": "npm:@wordpress/components@8.5.0"
}, },
"husky": { "husky": {
"hooks": { "hooks": {

View File

@ -126,6 +126,8 @@ class Assets {
'productCount' => array_sum( (array) $product_counts ), 'productCount' => array_sum( (array) $product_counts ),
'attributes' => array_values( wc_get_attribute_taxonomies() ), 'attributes' => array_values( wc_get_attribute_taxonomies() ),
'wcBlocksAssetUrl' => plugins_url( 'assets/', __DIR__ ), 'wcBlocksAssetUrl' => plugins_url( 'assets/', __DIR__ ),
'shippingCountries' => WC()->countries->get_shipping_countries(),
'allowedCountries' => WC()->countries->get_allowed_countries(),
'restApiRoutes' => [ 'restApiRoutes' => [
'/wc/store' => array_keys( \Automattic\WooCommerce\Blocks\RestApi::get_routes_from_namespace( 'wc/store' ) ), '/wc/store' => array_keys( \Automattic\WooCommerce\Blocks\RestApi::get_routes_from_namespace( 'wc/store' ) ),
], ],