diff options
Diffstat (limited to 'app/javascript/flavours/glitch/features/drawer/search/index.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/drawer/search/index.js | 152 |
1 files changed, 0 insertions, 152 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/search/index.js b/app/javascript/flavours/glitch/features/drawer/search/index.js deleted file mode 100644 index 8cbb0906c..000000000 --- a/app/javascript/flavours/glitch/features/drawer/search/index.js +++ /dev/null @@ -1,152 +0,0 @@ -// Package imports. -import classNames from 'classnames'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { - FormattedMessage, - defineMessages, -} from 'react-intl'; -import Overlay from 'react-overlays/lib/Overlay'; - -// Components. -import Icon from 'flavours/glitch/components/icon'; -import DrawerSearchPopout from './popout'; - -// Utils. -import { focusRoot } from 'flavours/glitch/util/dom_helpers'; -import { - assignHandlers, - hiddenComponent, -} from 'flavours/glitch/util/react_helpers'; - -// Messages. -const messages = defineMessages({ - placeholder: { - defaultMessage: 'Search', - id: 'search.placeholder', - }, -}); - -// Handlers. -const handlers = { - - handleBlur () { - this.setState({ expanded: false }); - }, - - handleChange ({ target: { value } }) { - const { onChange } = this.props; - if (onChange) { - onChange(value); - } - }, - - handleClear (e) { - const { - onClear, - submitted, - value, - } = this.props; - e.preventDefault(); // Prevents focus change ?? - if (onClear && (submitted || value && value.length)) { - onClear(); - } - }, - - handleFocus () { - const { onShow } = this.props; - this.setState({ expanded: true }); - if (onShow) { - onShow(); - } - }, - - handleKeyUp (e) { - const { onSubmit } = this.props; - switch (e.key) { - case 'Enter': - if (onSubmit) { - onSubmit(); - } - break; - case 'Escape': - focusRoot(); - } - }, -}; - -// The component. -export default class DrawerSearch extends React.PureComponent { - - // Constructor. - constructor (props) { - super(props); - assignHandlers(this, handlers); - this.state = { expanded: false }; - } - - // Rendering. - render () { - const { - handleBlur, - handleChange, - handleClear, - handleFocus, - handleKeyUp, - } = this.handlers; - const { - intl, - submitted, - value, - } = this.props; - const { expanded } = this.state; - const active = value && value.length || submitted; - const computedClass = classNames('drawer--search', { active }); - - return ( - <div className={computedClass}> - <label> - <span {...hiddenComponent}> - <FormattedMessage {...messages.placeholder} /> - </span> - <input - type='text' - placeholder={intl.formatMessage(messages.placeholder)} - value={value || ''} - onChange={handleChange} - onKeyUp={handleKeyUp} - onFocus={handleFocus} - onBlur={handleBlur} - /> - </label> - <div - aria-label={intl.formatMessage(messages.placeholder)} - className='icon' - onClick={handleClear} - role='button' - tabIndex='0' - > - <Icon icon='search' /> - <Icon icon='times-circle' /> - </div> - <Overlay - placement='bottom' - show={expanded && !active} - target={this} - ><DrawerSearchPopout /></Overlay> - </div> - ); - } - -} - -// Props. -DrawerSearch.propTypes = { - value: PropTypes.string, - submitted: PropTypes.bool, - onChange: PropTypes.func, - onSubmit: PropTypes.func, - onClear: PropTypes.func, - onShow: PropTypes.func, - intl: PropTypes.object, -}; |