1 files changed, 124 insertions, 0 deletions

diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
new file mode 100644
index 000000000..bca412cef
--- /dev/null
+++ b/src/components/ui/SearchInput.js
@@ -0,0 +1,124 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import uuidv1 from 'uuid/v1';
+import { debounce } from 'lodash';
+
+@observer
+export default class SearchInput extends Component {
+  static propTypes = {
+    value: PropTypes.string,
+    defaultValue: PropTypes.string,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    onReset: PropTypes.func,
+    name: PropTypes.string,
+    throttle: PropTypes.bool,
+    throttleDelay: PropTypes.number,
+  };
+
+  static defaultProps = {
+    value: '',
+    defaultValue: '',
+    className: '',
+    name: uuidv1(),
+    throttle: false,
+    throttleDelay: 250,
+    onChange: () => null,
+    onReset: () => null,
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: props.value || props.defaultValue,
+    };
+
+    this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay);
+  }
+
+  onChange(e) {
+    const { throttle, onChange } = this.props;
+    const { value } = e.target;
+    this.setState({ value });
+
+    if (throttle) {
+      e.persist();
+      this.throttledOnChange(value);
+    } else {
+      onChange(value);
+    }
+  }
+
+  onClick() {
+    const { defaultValue } = this.props;
+    const { value } = this.state;
+
+    if (value === defaultValue) {
+      this.setState({ value: '' });
+    }
+
+    this.input.focus();
+  }
+
+  onBlur() {
+    const { defaultValue } = this.props;
+    const { value } = this.state;
+
+    if (value === '') {
+      this.setState({ value: defaultValue });
+    }
+  }
+
+  throttledOnChange(e) {
+    const { onChange } = this.props;
+
+    onChange(e);
+  }
+
+  reset() {
+    const { defaultValue, onReset } = this.props;
+    this.setState({ value: defaultValue });
+
+    onReset();
+  }
+
+  input = null;
+
+  render() {
+    const { className, name, defaultValue } = this.props;
+    const { value } = this.state;
+
+    return (
+      <div
+        className={classnames([
+          className,
+          'search-input',
+        ])}
+      >
+        <label
+          htmlFor={name}
+          className="mdi mdi-magnify"
+          onClick={() => this.onClick()}
+        />
+        <input
+          name={name}
+          type="text"
+          value={value}
+          onChange={e => this.onChange(e)}
+          onClick={() => this.onClick()}
+          onBlur={() => this.onBlur()}
+          ref={(ref) => { this.input = ref; }}
+        />
+        {value !== defaultValue && value.length > 0 && (
+          <span
+            className="mdi mdi-close-circle-outline"
+            onClick={() => this.reset()}
+          />
+        )}
+      </div>
+    );
+  }
+}