restructure scm-ui and use ui-components and ui-types

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

@@ -0,0 +1,68 @@
+//@flow
+import React from "react";
+
+import { AddButton } from "../buttons";
+import InputField from "./InputField";
+
+type Props = {
+  addEntry: string => void,
+  disabled: boolean,
+  buttonLabel: string,
+  fieldLabel: string,
+  errorMessage: string
+};
+
+type State = {
+  entryToAdd: string
+};
+
+class AddEntryToTableField extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      entryToAdd: ""
+    };
+  }
+
+  render() {
+    const { disabled, buttonLabel, fieldLabel, errorMessage } = this.props;
+    return (
+      <div className="field">
+        <InputField
+          label={fieldLabel}
+          errorMessage={errorMessage}
+          onChange={this.handleAddEntryChange}
+          validationError={false}
+          value={this.state.entryToAdd}
+          onReturnPressed={this.appendEntry}
+          disabled={disabled}
+        />
+        <AddButton
+          label={buttonLabel}
+          action={this.addButtonClicked}
+          disabled={disabled}
+        />
+      </div>
+    );
+  }
+
+  addButtonClicked = (event: Event) => {
+    event.preventDefault();
+    this.appendEntry();
+  };
+
+  appendEntry = () => {
+    const { entryToAdd } = this.state;
+    this.props.addEntry(entryToAdd);
+    this.setState({ ...this.state, entryToAdd: "" });
+  };
+
+  handleAddEntryChange = (entryname: string) => {
+    this.setState({
+      ...this.state,
+      entryToAdd: entryname
+    });
+  };
+}
+
+export default AddEntryToTableField;

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

@@ -0,0 +1,36 @@
+//@flow
+import React from "react";
+
+type Props = {
+  label?: string,
+  checked: boolean,
+  onChange?: boolean => void,
+  disabled?: boolean
+};
+class Checkbox extends React.Component<Props> {
+  onCheckboxChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
+    if (this.props.onChange) {
+      this.props.onChange(event.target.checked);
+    }
+  };
+
+  render() {
+    return (
+      <div className="field">
+        <div className="control">
+          <label className="checkbox" disabled={this.props.disabled}>
+            <input
+              type="checkbox"
+              checked={this.props.checked}
+              onChange={this.onCheckboxChange}
+              disabled={this.props.disabled}
+            />
+            {this.props.label}
+          </label>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Checkbox;

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

@@ -0,0 +1,94 @@
+//@flow
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+  label?: string,
+  placeholder?: string,
+  value?: string,
+  type?: string,
+  autofocus?: boolean,
+  onChange: string => void,
+  onReturnPressed?: () => void,
+  validationError: boolean,
+  errorMessage: string,
+  disabled?: boolean
+};
+
+class InputField extends React.Component<Props> {
+  static defaultProps = {
+    type: "text",
+    placeholder: ""
+  };
+
+  field: ?HTMLInputElement;
+
+  componentDidMount() {
+    if (this.props.autofocus && this.field) {
+      this.field.focus();
+    }
+  }
+
+  handleInput = (event: SyntheticInputEvent<HTMLInputElement>) => {
+    this.props.onChange(event.target.value);
+  };
+
+  renderLabel = () => {
+    const label = this.props.label;
+    if (label) {
+      return <label className="label">{label}</label>;
+    }
+    return "";
+  };
+
+
+  handleKeyPress = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+    const onReturnPressed = this.props.onReturnPressed;
+    if (!onReturnPressed) {
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      onReturnPressed();
+    }
+  };
+
+  render() {
+    const {
+      type,
+      placeholder,
+      value,
+      validationError,
+      errorMessage,
+      disabled
+    } = this.props;
+    const errorView = validationError ? "is-danger" : "";
+    const helper = validationError ? (
+      <p className="help is-danger">{errorMessage}</p>
+    ) : (
+      ""
+    );
+    return (
+      <div className="field">
+        {this.renderLabel()}
+        <div className="control">
+          <input
+            ref={input => {
+              this.field = input;
+            }}
+            className={classNames("input", errorView)}
+            type={type}
+            placeholder={placeholder}
+            value={value}
+            onChange={this.handleInput}
+            onKeyPress={this.handleKeyPress}
+            disabled={disabled}
+          />
+        </div>
+        {helper}
+      </div>
+    );
+  }
+}
+
+export default InputField;

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

@@ -0,0 +1,67 @@
+//@flow
+import React from "react";
+
+export type SelectItem = {
+  value: string,
+  label: string
+};
+
+type Props = {
+  label?: string,
+  options: SelectItem[],
+  value?: SelectItem,
+  onChange: string => void
+};
+
+class Select extends React.Component<Props> {
+  field: ?HTMLSelectElement;
+
+  componentDidMount() {
+    // trigger change after render, if value is null to set it to the first value
+    // of the given options.
+    if (!this.props.value && this.field && this.field.value) {
+      this.props.onChange(this.field.value);
+    }
+  }
+
+  handleInput = (event: SyntheticInputEvent<HTMLSelectElement>) => {
+    this.props.onChange(event.target.value);
+  };
+
+  renderLabel = () => {
+    const label = this.props.label;
+    if (label) {
+      return <label className="label">{label}</label>;
+    }
+    return "";
+  };
+
+  render() {
+    const { options, value } = this.props;
+
+    return (
+      <div className="field">
+        {this.renderLabel()}
+        <div className="control select">
+          <select
+            ref={input => {
+              this.field = input;
+            }}
+            value={value}
+            onChange={this.handleInput}
+          >
+            {options.map(opt => {
+              return (
+                <option value={opt.value} key={opt.value}>
+                  {opt.label}
+                </option>
+              );
+            })}
+          </select>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Select;

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

@@ -0,0 +1,53 @@
+//@flow
+import React from "react";
+
+export type SelectItem = {
+  value: string,
+  label: string
+};
+
+type Props = {
+  label?: string,
+  placeholder?: SelectItem[],
+  value?: string,
+  onChange: string => void
+};
+
+class Textarea extends React.Component<Props> {
+  field: ?HTMLTextAreaElement;
+
+  handleInput = (event: SyntheticInputEvent<HTMLTextAreaElement>) => {
+    this.props.onChange(event.target.value);
+  };
+
+  renderLabel = () => {
+    const label = this.props.label;
+    if (label) {
+      return <label className="label">{label}</label>;
+    }
+    return "";
+  };
+
+  render() {
+    const { placeholder, value } = this.props;
+
+    return (
+      <div className="field">
+        {this.renderLabel()}
+        <div className="control">
+          <textarea
+            className="textarea"
+            ref={input => {
+              this.field = input;
+            }}
+            placeholder={placeholder}
+            onChange={this.handleInput}
+            value={value}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Textarea;

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

@@ -0,0 +1,8 @@
+// @create-index
+
+export { default as AddEntryToTableField } from "./AddEntryToTableField.js";
+export { default as Checkbox } from "./Checkbox.js";
+export { default as InputField } from "./InputField.js";
+export { default as Select } from "./Select.js";
+export { default as Textarea } from "./Textarea.js";
+