Merged in feature/search (pull request #231)

feature/search

scm-ui-components/packages/ui-components/src/forms/FilterInput.js

@@ -0,0 +1,69 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import { translate } from "react-i18next";
+
+type Props = {
+  filter: string => void,
+  value?: string,
+
+  // context props
+  classes: Object,
+  t: string => string
+};
+
+type State = {
+  value: string
+};
+
+const styles = {
+  inputField: {
+    float: "right",
+    marginTop: "1.25rem"
+  },
+  inputHeight: {
+    height: "2.5rem"
+  }
+};
+
+class FilterInput extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = { value: this.props.value ? this.props.value : "" };
+  }
+
+  handleChange = event => {
+    this.setState({ value: event.target.value });
+  };
+
+  handleSubmit = event => {
+    this.props.filter(this.state.value);
+    event.preventDefault();
+  };
+
+  render() {
+    const { classes, t } = this.props;
+    return (
+      <form
+        className={classNames(classes.inputField, "input-field")}
+        onSubmit={this.handleSubmit}
+      >
+        <div className="control has-icons-left">
+          <input
+            className={classNames(classes.inputHeight, "input")}
+            type="search"
+            placeholder={t("filterEntries")}
+            value={this.state.value}
+            onChange={this.handleChange}
+          />
+          <span className="icon is-small is-left">
+            <i className="fas fa-search" />
+          </span>
+        </div>
+      </form>
+    );
+  }
+}
+
+export default injectSheet(styles)(translate("commons")(FilterInput));

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -5,6 +5,7 @@ export { default as AutocompleteAddEntryToTableField } from "./AutocompleteAddEn
 export { default as MemberNameTable } from "./MemberNameTable.js";
 export { default as Checkbox } from "./Checkbox.js";
 export { default as Radio } from "./Radio.js";
+export { default as FilterInput } from "./FilterInput.js";
 export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";
 export { default as Textarea } from "./Textarea.js";