aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/fields/extensions
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/fields/extensions')
-rw-r--r--frontend/src/components/fields/extensions/ColorField.jsx98
-rw-r--r--frontend/src/components/fields/extensions/NumericField.jsx62
2 files changed, 160 insertions, 0 deletions
diff --git a/frontend/src/components/fields/extensions/ColorField.jsx b/frontend/src/components/fields/extensions/ColorField.jsx
new file mode 100644
index 0000000..fd30988
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.jsx
@@ -0,0 +1,98 @@
+/*
+ * This file is part of caronte (https://github.com/eciavatta/caronte).
+ * Copyright (c) 2020 Emiliano Ciavatta.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, {Component} from "react";
+import {OverlayTrigger, Popover} from "react-bootstrap";
+import validation from "../../../validation";
+import InputField from "../InputField";
+import "./ColorField.scss";
+
+class ColorField extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {};
+
+ this.colors = ["#e53935", "#d81b60", "#8e24aa", "#5e35b1", "#3949ab", "#1e88e5", "#039be5", "#00acc1",
+ "#00897b", "#43a047", "#7cb342", "#9e9d24", "#f9a825", "#fb8c00", "#f4511e", "#6d4c41"];
+ }
+
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if (prevProps.value !== this.props.value) {
+ this.onChange(this.props.value);
+ }
+ }
+
+ onChange = (value) => {
+ this.setState({invalid: value !== "" && !validation.isValidColor(value)});
+
+ if (typeof this.props.onChange === "function") {
+ this.props.onChange(value);
+ }
+ };
+
+ render() {
+ const colorButtons = this.colors.map((color) =>
+ <span key={"button" + color} className="color-input" style={{"backgroundColor": color}}
+ onClick={() => {
+ 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>
+ );
+
+ let buttonStyles = {};
+ if (this.props.value) {
+ buttonStyles["backgroundColor"] = this.props.value;
+ }
+
+ return (
+ <div className="field color-field">
+ <div className="color-input">
+ <InputField {...this.props} onChange={this.onChange} invalid={this.state.invalid} name="color"
+ error={null}/>
+ <div className="color-picker">
+ <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
+ <button type="button" className="picker-button" style={buttonStyles}>pick</button>
+ </OverlayTrigger>
+ </div>
+ </div>
+ {this.props.error && <div className="color-error">{this.props.error}</div>}
+ </div>
+ );
+ }
+
+}
+
+export default ColorField;
diff --git a/frontend/src/components/fields/extensions/NumericField.jsx b/frontend/src/components/fields/extensions/NumericField.jsx
new file mode 100644
index 0000000..a6cba26
--- /dev/null
+++ b/frontend/src/components/fields/extensions/NumericField.jsx
@@ -0,0 +1,62 @@
+/*
+ * This file is part of caronte (https://github.com/eciavatta/caronte).
+ * Copyright (c) 2020 Emiliano Ciavatta.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, {Component} from "react";
+import InputField from "../InputField";
+
+class NumericField extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ invalid: false
+ };
+ }
+
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ if (prevProps.value !== this.props.value) {
+ this.onChange(this.props.value);
+ }
+ }
+
+ onChange = (value) => {
+ value = value.toString().replace(/[^\d]/gi, "");
+ let intValue = 0;
+ if (value !== "") {
+ intValue = parseInt(value, 10);
+ }
+ 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 (typeof this.props.onChange === "function") {
+ this.props.onChange(intValue);
+ }
+ };
+
+ render() {
+ return (
+ <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"}
+ invalid={this.state.invalid}/>
+ );
+ }
+
+}
+
+export default NumericField;