Introduce React-Trello in place of React-Kanban

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/widgets/NewLaneTitleEditor.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { InlineInput } from "../styles/Base";
+import autosize from "autosize";
+
+class NewLaneTitleEditor extends React.Component {
+  onKeyDown = (e) => {
+    if (e.keyCode === 13) {
+      this.refInput.blur();
+      this.props.onSave();
+      e.preventDefault();
+    }
+    if (e.keyCode === 27) {
+      this.cancel();
+      e.preventDefault();
+    }
+
+    if (e.keyCode === 9) {
+      if (this.getValue().length === 0) {
+        this.cancel();
+      } else {
+        this.props.onSave();
+      }
+      e.preventDefault();
+    }
+  };
+
+  cancel = () => {
+    this.setValue("");
+    this.props.onCancel();
+    this.refInput.blur();
+  };
+
+  getValue = () => this.refInput.value;
+  setValue = (value) => (this.refInput.value = value);
+
+  saveValue = () => {
+    if (this.getValue() !== this.props.value) {
+      this.props.onSave(this.getValue());
+    }
+  };
+
+  focus = () => this.refInput.focus();
+
+  setRef = (ref) => {
+    this.refInput = ref;
+    if (this.props.resize !== "none") {
+      autosize(this.refInput);
+    }
+  };
+
+  render() {
+    const { autoFocus, resize, border, autoResize, value, placeholder } = this.props;
+
+    return (
+      <InlineInput
+        style={{ resize: resize }}
+        ref={this.setRef}
+        border={border}
+        onKeyDown={this.onKeyDown}
+        placeholder={value.length === 0 ? undefined : placeholder}
+        defaultValue={value}
+        rows={3}
+        autoResize={autoResize}
+        autoFocus={autoFocus}
+      />
+    );
+  }
+}
+
+NewLaneTitleEditor.propTypes = {
+  onSave: PropTypes.func,
+  onCancel: PropTypes.func,
+  border: PropTypes.bool,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  autoFocus: PropTypes.bool,
+  autoResize: PropTypes.bool,
+  resize: PropTypes.oneOf(["none", "vertical", "horizontal"])
+};
+
+NewLaneTitleEditor.defaultProps = {
+  inputRef: () => {},
+  onSave: () => {},
+  onCancel: () => {},
+  placeholder: "",
+  value: "",
+  border: false,
+  autoFocus: false,
+  autoResize: false,
+  resize: "none"
+};
+
+export default NewLaneTitleEditor;