Skip to content

Commit

Permalink
Fix searching
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarayourfriend
sarayourfriend committed Oct 15, 2020
1 parent bca685c commit 28fe17d
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 126 deletions.
1 change: 1 addition & 0 deletions packages/search/.storybook/preview.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
import '@automattic/calypso-color-schemes';
import '@wordpress/components/build-style/style.css'
22 changes: 15 additions & 7 deletions packages/search/src/search.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const BoxedSearch = ( props ) => (
placeholder="Search..."
autoFocus
fitsContainer
onSearch={ () => console.log( 'searched!' ) }
onSearch={ ( search ) => console.log( 'Searched: ', search ) }
{ ...props }
/>
</div>
Expand All @@ -23,14 +23,22 @@ export const _default = () => {
return <BoxedSearch />;
};

export const Simple = () => {
return <BoxedSearch hideClose hideOpenIcon compact />;
};

export const Delayed = () => {
return <BoxedSearch delaySearch />;
};

export const Searching = () => {
return <BoxedSearch searching initialValue="Kiwi" />;
};

export const Disabled = () => <BoxedSearch disabled isOpen />;

export const Pinned = () => <BoxedSearch pinned />;

export const Compact = () => <Search compact />;
export const Compact = () => <BoxedSearch compact />;

export const CompactPinned = () => (
<div style={ { position: 'relative', width: '270px', height: '36px' } }>
<Search pinned compact fitsContainer />
</div>
);
export const CompactPinned = () => <BoxedSearch pinned compact fitsContainer />;
86 changes: 41 additions & 45 deletions packages/search/src/search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import React, { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
import { debounce, noop, uniqueId } from 'lodash';
import classNames from 'classnames';
import i18n from 'i18n-calypso';
import { isMobile } from '@automattic/viewport';

/**
Expand All @@ -13,6 +12,7 @@ import { isMobile } from '@automattic/viewport';
// @ts-ignore
import { Spinner, __experimentalInputControl as InputControl } from '@wordpress/components';
import { close, search, Icon } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

/**
* Style dependencies
Expand Down Expand Up @@ -236,10 +236,10 @@ class Search extends React.Component< Props, State > {
focus = () => {
// if we call focus before the element has been entirely synced up with the DOM, we stand a decent chance of
// causing the browser to scroll somewhere odd. Instead, defer the focus until a future turn of the event loop.
setTimeout( () => this.searchInput?.current.focus(), 0 );
setTimeout( () => this.searchInput.current?.focus(), 0 );
};

blur = () => this.searchInput?.current.blur();
blur = () => this.searchInput.current?.blur();

clear = () => this.setState( { keyword: '' } );

Expand All @@ -251,9 +251,9 @@ class Search extends React.Component< Props, State > {
this.setState( { hasFocus: false } );
};

onChange = ( event: ChangeEvent< HTMLInputElement > ) => {
onChange = ( keyword: string ) => {
this.setState( {
keyword: event.target?.value,
keyword,
} );
};

Expand Down Expand Up @@ -289,12 +289,12 @@ class Search extends React.Component< Props, State > {
// Puts the cursor at end of the text when starting
// with `initialValue` set.
onFocus = () => {
if ( ! this.searchInput ) {
if ( ! this.searchInput.current ) {
return;
}

const setValue = this.searchInput?.current?.value ?? '';
if ( setValue && this.searchInput.current ) {
const setValue = this.searchInput.current.value ?? '';
if ( setValue ) {
// Firefox needs clear or won't move cursor to end
this.searchInput.current.value = '';
this.searchInput.current.value = setValue;
Expand All @@ -304,11 +304,9 @@ class Search extends React.Component< Props, State > {
this.props.onSearchOpen();
};

shouldBeOpen = () => this.state.keyword || this.state.isOpen;

render() {
const searchValue = this.state.keyword;
const placeholder = this.props.placeholder || i18n.translate( 'Search…' );
const placeholder = this.props.placeholder || __( 'Search…' );
const inputLabel = this.props.inputLabel;
const enableOpenIcon = this.props.pinned && ! this.state.isOpen;
const isOpenUnpinnedOrQueried =
Expand Down Expand Up @@ -344,41 +342,39 @@ class Search extends React.Component< Props, State > {
tabIndex={ enableOpenIcon ? 0 : undefined }
onKeyDown={ enableOpenIcon ? this.openListener : undefined }
aria-controls={ 'search-component-' + this.instanceId }
aria-label={ i18n.translate( 'Open Search', { context: 'button label' } ) as string }
aria-label={ __( 'Open Search' ) }
>
{ /* @ts-ignore */ }
{ ! this.props.hideOpenIcon && <Icon icon={ search } className="search__open-icon" /> }
</div>
{ this.shouldBeOpen() && (
<div className={ fadeDivClass }>
<InputControl
type="search"
id={ 'search-component-' + this.instanceId }
autoFocus={ this.props.autoFocus } // eslint-disable-line jsx-a11y/no-autofocus
aria-describedby={ this.props.describedBy }
aria-label={ inputLabel ? inputLabel : ( i18n.translate( 'Search' ) as string ) }
aria-hidden={ ! isOpenUnpinnedOrQueried }
className={ inputClass }
placeholder={ placeholder }
role="searchbox"
value={ searchValue }
ref={ this.searchInput }
onChange={ this.onChange }
onKeyUp={ this.keyUp }
onKeyDown={ this.keyDown }
onMouseUp={ this.props.onClick }
onFocus={ this.onFocus }
onBlur={ this.onBlur }
disabled={ this.props.disabled }
autoCapitalize="none"
dir={ this.props.dir }
maxLength={ this.props.maxLength }
minLength={ this.props.minLength }
{ ...autocorrect }
/>
{ this.renderStylingDiv() }
</div>
) }
<div className={ fadeDivClass }>
<InputControl
type="search"
id={ 'search-component-' + this.instanceId }
autoFocus={ this.props.autoFocus } // eslint-disable-line jsx-a11y/no-autofocus
aria-describedby={ this.props.describedBy }
aria-label={ inputLabel ? inputLabel : __( 'Search' ) }
aria-hidden={ ! isOpenUnpinnedOrQueried }
className={ inputClass }
placeholder={ placeholder }
role="searchbox"
value={ searchValue }
ref={ this.searchInput }
onChange={ this.onChange }
onKeyUp={ this.keyUp }
onKeyDown={ this.keyDown }
onMouseUp={ this.props.onClick }
onFocus={ this.onFocus }
onBlur={ this.onBlur }
disabled={ this.props.disabled }
autoCapitalize="none"
dir={ this.props.dir }
maxLength={ this.props.maxLength }
minLength={ this.props.minLength }
{ ...autocorrect }
/>
{ this.renderStylingDiv() }
</div>
{ this.closeButton() }
</div>
);
Expand All @@ -388,15 +384,15 @@ class Search extends React.Component< Props, State > {
if ( this.props.overlayStyling ) {
return (
<div className="search__text-overlay" ref={ this.overlay }>
{ this.props.overlayStyling?.( this.state.keyword ) }
{ this.props.overlayStyling( this.state.keyword ) }
</div>
);
}
return null;
}

closeButton() {
if ( ! this.props.hideClose && this.shouldBeOpen() ) {
if ( ! this.props.hideClose && ( this.state.keyword || this.state.isOpen ) ) {
return (
<div
role="button"
Expand All @@ -405,7 +401,7 @@ class Search extends React.Component< Props, State > {
tabIndex={ 0 }
onKeyDown={ this.closeListener }
aria-controls={ 'search-component-' + this.instanceId }
aria-label={ i18n.translate( 'Close Search', { context: 'button label' } ) as string }
aria-label={ __( 'Close Search' ) }
>
{ /* @ts-ignore */ }
<Icon icon={ close } className="search__close-icon" />
Expand Down
84 changes: 10 additions & 74 deletions packages/search/src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,68 +3,10 @@
*/

@import '~@automattic/typography/styles/variables';
$inputZIndex: 20;

@mixin long-content-fade(
$direction: right,
$size: 20%,
$color: var( --color-surface-rgb ),
$edge: 0,
$z-index: false
) {
content: '';
display: block;
position: absolute;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;

@if $z-index {
z-index: $z-index;
}

@if $direction == 'bottom' {
background: overflow-gradient( $color, 90%, to top );
left: $edge;
right: $edge;
top: $edge;
bottom: calc( 100% - $size );
width: auto;
}

@if $direction == 'top' {
background: overflow-gradient( $color, 90%, to bottom );
top: calc( 100% - $size );
left: $edge;
right: $edge;
bottom: $edge;
width: auto;
}
@import '~@wordpress/base-styles/variables';
@import '~@wordpress/base-styles/mixins';

@if $direction == 'left' {
background: overflow-gradient( $color, 90%, to left );
top: $edge;
left: $edge;
bottom: $edge;
right: auto;
width: $size;
height: auto;
}

@if $direction == 'right' {
background: overflow-gradient( $color );
top: $edge;
bottom: $edge;
right: $edge;
left: auto;
width: $size;
height: auto;
}
}
$input-z-index: 20;

.search {
border-radius: 2px;
Expand Down Expand Up @@ -170,7 +112,7 @@ $inputZIndex: 20;
.search__input input.components-input-control__input[type='search'], .components-input-control__backdrop {
flex: 1 1 auto;
display: none;
z-index: $inputZIndex;
z-index: $input-z-index;
top: 0;
border: none;
height: 100%;
Expand Down Expand Up @@ -232,7 +174,7 @@ $inputZIndex: 20;
&::before {
@include long-content-fade(
$size: 32px,
$z-index: $inputZIndex + 2
$z-index: $input-z-index + 2
);
border-radius: inherit;
}
Expand All @@ -243,7 +185,7 @@ $inputZIndex: 20;
@include long-content-fade(
$direction: right,
$size: 32px,
$z-index: $inputZIndex + 2
$z-index: $input-z-index + 2
);
border-radius: inherit;
}
Expand Down Expand Up @@ -274,26 +216,20 @@ $inputZIndex: 20;
height: 100%;
top: 1px;
left: 0;
z-index: $inputZIndex + 1;
z-index: $input-z-index + 1;
}

.search .spinner {
.search .components-spinner {
display: none;
margin: 5px 11px 5px;
}

.search.is-searching .search__open-icon {
display: none;
}

.search.is-searching .spinner {
.search.is-searching .components-spinner {
flex: 0 0 auto;
display: flex;
width: 50px;
height: 100%;
background-color: var( --color-surface );
z-index: 20;
}

.animating.search-opening .search input {
opacity: 1;
}

0 comments on commit 28fe17d

Please sign in to comment.