Add other custom fields

3 files changed, 141 insertions, 0 deletions

diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
new file mode 100644
index 0000000..edcb720
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import './ColorField.scss';
+import InputField from "../InputField";
+
+class ColorField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            invalid: false
+        };
+
+        this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
+            "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
+    }
+
+    render() {
+        const colorButtons = this.colors.map((color) =>
+            <span key={"button" + color} className="color-input"
+                  style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}}
+                  onClick={() => {
+                      this.setState({color: color});
+                      if (typeof this.props.onChange === "function") {
+                          this.props.onChange(color);
+                      }
+                      document.body.click(); // magic to close popup
+                  }} />);
+
+        const popover = (
+            <Popover id="popover-basic">
+                <Popover.Title as="h3">choose a color</Popover.Title>
+                <Popover.Content>
+                    <div className="colors-container">
+                        <div className="colors-row">
+                            {colorButtons.slice(0, 8)}
+                        </div>
+                        <div className="colors-row">
+                            {colorButtons.slice(8, 18)}
+                        </div>
+                    </div>
+                </Popover.Content>
+            </Popover>
+        );
+
+        return (
+            <div className="color-field">
+                <InputField {...this.props} name="color" />
+
+                <div className="color-picker">
+                    <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
+                        <Button variant="picker" size="sm">pick</Button>
+                    </OverlayTrigger>
+                </div>
+
+            </div>
+        );
+    }
+
+}
+
+export default ColorField;
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
new file mode 100644
index 0000000..c8f617c
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -0,0 +1,39 @@
+@import '../../../colors.scss';
+
+.color-field {
+  display: flex;
+  align-items: flex-end;
+
+  .input-field {
+    flex: 1;
+
+    input {
+      border-bottom-right-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+  }
+
+  .color-picker {
+    margin-bottom: 5.5px;
+
+    .btn-picker {
+      padding: 8.5px 15px;
+      border-bottom-right-radius: 5px;
+      border-top-right-radius: 5px;
+      background-color: $color-indigo;
+    }
+  }
+
+
+}
+
+.colors-container {
+  width: 600px;
+
+  .color-input {
+    display: inline-block;
+    width: 31px;
+    height: 31px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
new file mode 100644
index 0000000..8823c42
--- /dev/null
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import InputField from "../InputField";
+
+class NumericField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            invalid: false
+        };
+    }
+
+    render() {
+        const handler = (value) => {
+            value = value.replace(/[^\d]/gi, '');
+            let intValue = 0;
+            if (value !== "") {
+                intValue = parseInt(value);
+            }
+            const valid =
+                (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
+                (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) &&
+                (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max));
+            this.setState({invalid: !valid});
+            if (this.props.onChange) {
+                this.props.onChange(intValue);
+            }
+        };
+
+        return (
+            <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0}
+                        invalid={this.state.invalid} />
+        );
+    }
+
+}
+
+export default NumericField;