Add country code as keyword for countries search (https://github.com/woocommerce/woocommerce-admin/pull/1337)

* Add country name to tooltip and screen reader text

* Add country code to autocompleter keywords
This commit is contained in:
Joshua T Flowers 2019-01-18 11:13:07 +08:00 committed by GitHub
parent 6b29ec01a7
commit e0853b5408
2 changed files with 20 additions and 3 deletions

View File

@ -3,7 +3,8 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Component, Fragment } from '@wordpress/element';
import { Tooltip } from '@wordpress/components';
/**
* WooCommerce dependencies
@ -90,6 +91,12 @@ export default class CustomersReportTable extends Component {
];
}
getCountryName( code ) {
const countries = ( wcSettings.dataEndpoints && wcSettings.dataEndpoints.countries ) || [];
const country = countries.find( c => c.code === code );
return country ? country.name : null;
}
getRowsContent( customers ) {
return customers.map( customer => {
const {
@ -106,6 +113,7 @@ export default class CustomersReportTable extends Component {
city,
country,
} = customer;
const countryName = this.getCountryName( country );
const customerNameLink = user_id ? (
<Link href={ 'user-edit.php?user_id=' + user_id } type="wp-admin">
@ -121,6 +129,15 @@ export default class CustomersReportTable extends Component {
'—'
);
const countryDisplay = (
<Fragment>
<Tooltip text={ countryName }>
<span aria-hidden="true">{ country }</span>
</Tooltip>
<span className="screen-reader-text">{ countryName }</span>
</Fragment>
);
return [
{
display: customerNameLink,
@ -155,7 +172,7 @@ export default class CustomersReportTable extends Component {
value: date_last_active,
},
{
display: country,
display: countryDisplay,
value: country,
},
{

View File

@ -24,7 +24,7 @@ export default {
return wcSettings.dataEndpoints.countries || [];
},
getOptionKeywords( country ) {
return [ decodeEntities( country.name ) ];
return [ country.code, decodeEntities( country.name ) ];
},
getOptionLabel( country, query ) {
const name = decodeEntities( country.name );