From 9959eb375b99fbfce9fc4ee5efc970a239b28003 Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 29 Jan 2019 15:17:51 +0100
Subject: [PATCH] added TableHeader component

---
 .../ui-components/src/BranchSelector.js       | 16 ++-------
 .../packages/ui-components/src/TableHeader.js | 36 +++++++++++++++++++
 .../packages/ui-components/src/index.js       |  1 +
 3 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 scm-ui-components/packages/ui-components/src/TableHeader.js

diff --git a/scm-ui-components/packages/ui-components/src/BranchSelector.js b/scm-ui-components/packages/ui-components/src/BranchSelector.js
index d03011bfdd..f44de639ba 100644
--- a/scm-ui-components/packages/ui-components/src/BranchSelector.js
+++ b/scm-ui-components/packages/ui-components/src/BranchSelector.js
@@ -2,6 +2,7 @@
 
 import React from "react";
 import type {Branch} from "@scm-manager/ui-types";
+import TableHeader from "./TableHeader";
 import injectSheet from "react-jss";
 import classNames from "classnames";
 import DropDown from "./forms/DropDown";
@@ -12,11 +13,6 @@ const styles = {
   },
   minWidthOfLabel: {
     minWidth: "4.5rem"
-  },
-  wrapper: {
-    padding: "1rem 1.5rem 0.25rem 1.5rem",
-    border: "1px solid #eee",
-    borderRadius: "5px 5px 0 0"
   }
 };
 
@@ -48,13 +44,7 @@ class BranchSelector extends React.Component<Props, State> {
 
     if (branches) {
       return (
-        <div
-          className={classNames(
-            "has-background-light field",
-            "is-horizontal",
-            classes.wrapper
-          )}
-        >
+        <TableHeader>
           <div
             className={classNames(
               "field-label",
@@ -81,7 +71,7 @@ class BranchSelector extends React.Component<Props, State> {
               </div>
             </div>
           </div>
-        </div>
+        </TableHeader>
       );
     } else {
       return null;
diff --git a/scm-ui-components/packages/ui-components/src/TableHeader.js b/scm-ui-components/packages/ui-components/src/TableHeader.js
new file mode 100644
index 0000000000..8b38160027
--- /dev/null
+++ b/scm-ui-components/packages/ui-components/src/TableHeader.js
@@ -0,0 +1,36 @@
+//@flow
+import * as React from "react";
+import classNames from "classnames";
+import injectSheet from "react-jss";
+
+type Props = {
+  children?: React.Node,
+  classes: Object
+};
+
+const styles = {
+  wrapper: {
+    padding: "1rem 1.5rem 0.25rem 1.5rem",
+    border: "1px solid #eee",
+    borderRadius: "5px 5px 0 0"
+  }
+};
+
+class TableHeader extends React.Component<Props> {
+  render() {
+    const { classes, children } = this.props;
+    return (
+      <div
+        className={classNames(
+          "has-background-light field",
+          "is-horizontal",
+          classes.wrapper
+        )}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export default injectSheet(styles)(TableHeader);
diff --git a/scm-ui-components/packages/ui-components/src/index.js b/scm-ui-components/packages/ui-components/src/index.js
index 5b3cdb4c95..d510e28ade 100644
--- a/scm-ui-components/packages/ui-components/src/index.js
+++ b/scm-ui-components/packages/ui-components/src/index.js
@@ -25,6 +25,7 @@ export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
 export { default as BranchSelector } from "./BranchSelector";
+export { default as TableHeader } from "./TableHeader";
 
 export { apiClient, NOT_FOUND_ERROR, UNAUTHORIZED_ERROR, CONFLICT_ERROR } from "./apiclient.js";