removed FilterInput functionality from page and added new ui-component

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,
+
+  // context props
+  classes: Object,
+  t: string => string
+};
+
+type State = {
+  value: string
+};
+
+const styles = {
+  inputField: {
+    float: "right",
+    marginTop: "1.25rem",
+    marginRight: "1.25rem"
+  },
+  inputHeight: {
+    height: "2.5rem"
+  }
+};
+
+class FilterInput extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = { 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";

scm-ui-components/packages/ui-components/src/layout/Page.js

@@ -2,7 +2,6 @@
 import * as React from "react";
 import injectSheet from "react-jss";
 import classNames from "classnames";
-import { translate } from "react-i18next";
 import Loading from "./../Loading";
 import ErrorNotification from "./../ErrorNotification";
 import Title from "./Title";
@@ -10,10 +9,6 @@ import Subtitle from "./Subtitle";
 import PageActions from "./PageActions";
 import ErrorBoundary from "../ErrorBoundary";
 
-type State = {
-  value: string
-};
-
 type Props = {
   title?: string,
   subtitle?: string,
@@ -21,46 +16,19 @@ type Props = {
   error?: Error,
   showContentOnError?: boolean,
   children: React.Node,
-  filter: string => void,
 
   // context props
-  classes: Object,
+  classes: Object
-  t: string => string
 };
 
 const styles = {
   actions: {
     display: "flex",
     justifyContent: "flex-end"
-  },
-  inputField: {
-    float: "right",
-    marginTop: "1.25rem",
-    marginRight: "1.25rem"
-  },
-  inputHeight: {
-    height: "2.5rem"
-  },
-  button: {
-    float: "right",
-    marginTop: "1.25rem"
   }
 };
 
-class Page extends React.Component<Props, State> {
+class Page extends React.Component<Props> {
-  constructor(props) {
-    super(props);
-    this.state = { value: "" };
-  }
-
-  handleChange = event => {
-    this.setState({ value: event.target.value });
-  };
-
-  handleSubmit = event => {
-    this.props.filter(this.state.value);
-    event.preventDefault();
-  };
 
   render() {
     const { error } = this.props;
@@ -78,7 +46,7 @@ class Page extends React.Component<Props, State> {
   }
 
   renderPageHeader() {
-    const { error, title, subtitle, children, classes, t } = this.props;
+    const { error, title, subtitle, children, classes } = this.props;
 
     let pageActions = null;
     let pageActionsExists = false;
@@ -91,26 +59,7 @@ class Page extends React.Component<Props, State> {
               "column is-three-fifths is-mobile-action-spacing"
             )}
           >
-            <form
+            {child}
-              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>
-            <div className={classNames(classes.button, "input-button control")}>
-              {child}
-            </div>
           </div>
         );
         pageActionsExists = true;
@@ -154,4 +103,4 @@ class Page extends React.Component<Props, State> {
   }
 }
 
-export default injectSheet(styles)(translate("commons")(Page));
+export default injectSheet(styles)(Page);