Implement Git repo config

2025-11-07 05:55:44 +01:00 · 2018-12-14 16:01:57 +01:00
parent c2d872bd59
commit 8a6a235e77
10 changed files with 203 additions and 78 deletions
--- a/scm-ui-components/packages/ui-components/src/BranchSelector.js
+++ b/scm-ui-components/packages/ui-components/src/BranchSelector.js
@@ -0,0 +1,89 @@
+// @flow
+
+import React from "react";
+import type {Branch} from "packages/ui-types/src/index";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import DropDown from "./forms/DropDown";
+
+const styles = {
+  zeroflex: {
+    flexGrow: 0
+  },
+  minWidthOfLabel: {
+    minWidth: "4.5rem"
+  }
+};
+
+type Props = {
+  branches: Branch[], // TODO: Use generics?
+  selected: (branch?: Branch) => void,
+  selectedBranch?: string,
+  label: string,
+
+  // context props
+  classes: Object
+};
+
+type State = { selectedBranch?: Branch };
+
+class BranchSelector extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+    const selectedBranch = this.props.branches.find(branch => branch.name === this.props.selectedBranch);
+    this.setState({ selectedBranch })
+  }
+
+  render() {
+    const { branches, classes, label } = this.props;
+
+    if (branches) {
+      return (
+        <div className="box field is-horizontal">
+          <div
+            className={classNames(
+              "field-label",
+              "is-normal",
+              classes.zeroflex,
+              classes.minWidthOfLabel
+            )}
+          >
+            <label className="label">{label}</label>
+          </div>
+          <div className="field-body">
+            <div className="field is-narrow">
+              <div className="control">
+                <DropDown
+                  className="is-fullwidth"
+                  options={branches.map(b => b.name)}
+                  optionSelected={this.branchSelected}
+                  preselectedOption={
+                    this.state.selectedBranch
+                      ? this.state.selectedBranch.name
+                      : ""
+                  }
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
+  branchSelected = (branchName: string) => {
+    const { branches, selected } = this.props;
+    const branch = branches.find(b => b.name === branchName);
+
+    selected(branch);
+    this.setState({ selectedBranch: branch });
+  };
+}
+
+export default injectSheet(styles)(BranchSelector);