Merge pull request woocommerce/woocommerce-admin#898 from woocommerce/fix/gutenberg-popover-refresh

Update uses of Gutenberg popover for content sizing
This commit is contained in:
Paul Sealock 2018-11-21 16:04:54 +13:00 committed by GitHub
commit 01259eaa24
6 changed files with 23 additions and 17 deletions

View File

@ -24,7 +24,7 @@ class DatePickerContent extends Component {
this.onTabSelect = this.onTabSelect.bind( this );
}
onTabSelect( tab ) {
const { onUpdate, period, refreshDropdown } = this.props;
const { onUpdate, period } = this.props;
/**
* If the period is `custom` and the user switches tabs to view the presets,
@ -34,8 +34,6 @@ class DatePickerContent extends Component {
if ( 'period' === tab && 'custom' === period ) {
onUpdate( { period: 'today' } );
}
refreshDropdown();
}
render() {

View File

@ -35,14 +35,6 @@ class DatePicker extends Component {
this.onSelect = this.onSelect.bind( this );
this.isValidSelection = this.isValidSelection.bind( this );
this.resetCustomValues = this.resetCustomValues.bind( this );
this.refreshDropdown = this.refreshDropdown.bind( this );
}
refreshDropdown() {
setTimeout( () => {
const dropdown = this.dropdownRef.current;
dropdown.refresh && dropdown.refresh();
} );
}
getResetState() {
@ -156,7 +148,6 @@ class DatePicker extends Component {
afterError={ afterError }
beforeError={ beforeError }
shortDateFormat={ shortDateFormat }
refreshDropdown={ this.refreshDropdown }
/>
) }
/>

View File

@ -143,6 +143,7 @@ class FilterPicker extends Component {
selected={ selectedTag ? [ selectedTag ] : [] }
onChange={ partial( this.onTagChange, filter, onClose ) }
inlineTags
staticResults
/>
);
}

View File

@ -260,7 +260,7 @@ export class Autocomplete extends Component {
}
render() {
const { children, instanceId, completer: { className = '' } } = this.props;
const { children, instanceId, completer: { className = '' }, staticResults } = this.props;
const { selectedIndex, filteredOptions, query } = this.state;
const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
const isExpanded = filteredOptions.length > 0 && !! query;
@ -268,11 +268,14 @@ export class Autocomplete extends Component {
const activeId = isExpanded
? `woocommerce-search__autocomplete-${ instanceId }-${ selectedKey }`
: null;
const resultsClasses = classnames( 'woocommerce-search__autocomplete-results', {
'is-static-results': staticResults,
} );
return (
<div ref={ this.bindNode } className="woocommerce-search__autocomplete">
{ children( { isExpanded, listBoxId, activeId, onChange: this.search } ) }
{ isExpanded && (
<div id={ listBoxId } role="listbox" className="woocommerce-search__autocomplete-results">
<div id={ listBoxId } role="listbox" className={ resultsClasses }>
{ isExpanded &&
map( filteredOptions, ( option, index ) => (
<Button

View File

@ -116,7 +116,7 @@ class Search extends Component {
render() {
const autocompleter = this.getAutocompleter();
const { placeholder, inlineTags, selected, instanceId, className } = this.props;
const { placeholder, inlineTags, selected, instanceId, className, staticResults } = this.props;
const { value = '', isActive } = this.state;
const aria = {
'aria-labelledby': this.props[ 'aria-labelledby' ],
@ -125,7 +125,11 @@ class Search extends Component {
return (
<div className={ classnames( 'woocommerce-search', className ) }>
<Gridicon className="woocommerce-search__icon" icon="search" size={ 18 } />
<Autocomplete completer={ autocompleter } onSelect={ this.selectResult }>
<Autocomplete
completer={ autocompleter }
onSelect={ this.selectResult }
staticResults={ staticResults }
>
{ ( { listBoxId, activeId, onChange } ) =>
// Disable reason: The div below visually simulates an input field. Its
// child input is the actual input and responds accordingly to all keyboard
@ -223,15 +227,20 @@ Search.propTypes = {
} )
),
/**
* Render tags inside input, otherwise render below input
* Render tags inside input, otherwise render below input.
*/
inlineTags: PropTypes.bool,
/**
* Render results list positioned statically instead of absolutely.
*/
staticResults: PropTypes.bool,
};
Search.defaultProps = {
onChange: noop,
selected: [],
inlineTags: false,
staticResults: false,
};
export default withInstanceId( Search );

View File

@ -54,6 +54,10 @@
&:empty {
display: none;
}
&.is-static-results {
position: static;
}
}
// This a single `button` in the autocomplete popover