diff options
Diffstat (limited to 'frontend/src/components/fields')
-rw-r--r-- | frontend/src/components/fields/ButtonField.js | 8 | ||||
-rw-r--r-- | frontend/src/components/fields/CheckField.js | 12 | ||||
-rw-r--r-- | frontend/src/components/fields/InputField.js | 20 | ||||
-rw-r--r-- | frontend/src/components/fields/TagField.js | 12 | ||||
-rw-r--r-- | frontend/src/components/fields/TextField.js | 10 | ||||
-rw-r--r-- | frontend/src/components/fields/extensions/ColorField.js | 17 | ||||
-rw-r--r-- | frontend/src/components/fields/extensions/NumericField.js | 6 |
7 files changed, 42 insertions, 43 deletions
diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js index 850f837..de747a5 100644 --- a/frontend/src/components/fields/ButtonField.js +++ b/frontend/src/components/fields/ButtonField.js @@ -15,11 +15,11 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, {Component} from 'react'; -import './ButtonField.scss'; -import './common.scss'; +import React, {Component} from "react"; +import "./ButtonField.scss"; +import "./common.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class ButtonField extends Component { diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js index a0e2706..bfa1c9d 100644 --- a/frontend/src/components/fields/CheckField.js +++ b/frontend/src/components/fields/CheckField.js @@ -15,12 +15,12 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, {Component} from 'react'; -import './CheckField.scss'; -import './common.scss'; +import React, {Component} from "react"; import {randomClassName} from "../../utils"; +import "./CheckField.scss"; +import "./common.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class CheckField extends Component { @@ -41,9 +41,9 @@ class CheckField extends Component { }; return ( - <div className={classNames( "field", "check-field", {"field-checked" : checked}, {"field-small": small})}> + <div className={classNames("field", "check-field", {"field-checked": checked}, {"field-small": small})}> <div className="field-input"> - <input type="checkbox" id={this.id} checked={checked} onChange={handler} /> + <input type="checkbox" id={this.id} checked={checked} onChange={handler}/> <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + (name != null ? name : "")}</label> </div> </div> diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js index 80cce3b..823989d 100644 --- a/frontend/src/components/fields/InputField.js +++ b/frontend/src/components/fields/InputField.js @@ -15,12 +15,12 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, {Component} from 'react'; -import './InputField.scss'; -import './common.scss'; +import React, {Component} from "react"; import {randomClassName} from "../../utils"; +import "./common.scss"; +import "./InputField.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class InputField extends Component { @@ -59,23 +59,23 @@ class InputField extends Component { } return ( - <div className={classNames("field", "input-field", {"field-active" : active}, + <div className={classNames("field", "input-field", {"field-active": active}, {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}> <div className="field-wrapper"> - { name && + {name && <div className="field-name"> <label>{name}:</label> </div> } <div className="field-input"> <div className="field-value"> - { type === "file" && <label for={this.id} className={"file-label"}> - {value.name || this.props.placeholder}</label> } + {type === "file" && <label for={this.id} className={"file-label"}> + {value.name || this.props.placeholder}</label>} <input type={type} placeholder={this.props.placeholder} id={this.id} aria-describedby={this.id} onChange={handler} {...inputProps} - readOnly={this.props.readonly} /> + readOnly={this.props.readonly}/> </div> - { type !== "file" && value !== "" && + {type !== "file" && value !== "" && <div className="field-clear"> <span onClick={() => handler(null)}>del</span> </div> diff --git a/frontend/src/components/fields/TagField.js b/frontend/src/components/fields/TagField.js index 89445b6..9a36da4 100644 --- a/frontend/src/components/fields/TagField.js +++ b/frontend/src/components/fields/TagField.js @@ -15,14 +15,14 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, {Component} from 'react'; -import './TagField.scss'; -import './common.scss'; -import {randomClassName} from "../../utils"; +import React, {Component} from "react"; import ReactTags from "react-tag-autocomplete"; +import {randomClassName} from "../../utils"; +import "./common.scss"; +import "./TagField.scss"; -const classNames = require('classnames'); -const _ = require('lodash'); +const classNames = require("classnames"); +const _ = require("lodash"); class TagField extends Component { diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js index 9237c0c..4dd77bd 100644 --- a/frontend/src/components/fields/TextField.js +++ b/frontend/src/components/fields/TextField.js @@ -15,12 +15,12 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, {Component} from 'react'; -import './TextField.scss'; -import './common.scss'; +import React, {Component} from "react"; import {randomClassName} from "../../utils"; +import "./common.scss"; +import "./TextField.scss"; -const classNames = require('classnames'); +const classNames = require("classnames"); class TextField extends Component { @@ -50,7 +50,7 @@ class TextField extends Component { {"field-invalid": this.props.invalid}, {"field-small": this.props.small})}> {name && <label htmlFor={this.id}>{name}:</label>} <textarea id={this.id} placeholder={this.props.defaultValue} onChange={handler} rows={rows} - readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef} /> + readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef}/> {error && <div className="field-error">error: {error}</div>} </div> ); diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js index f1c0caf..fd30988 100644 --- a/frontend/src/components/fields/extensions/ColorField.js +++ b/frontend/src/components/fields/extensions/ColorField.js @@ -15,22 +15,21 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, {Component} from 'react'; +import React, {Component} from "react"; import {OverlayTrigger, Popover} from "react-bootstrap"; -import './ColorField.scss'; -import InputField from "../InputField"; import validation from "../../../validation"; +import InputField from "../InputField"; +import "./ColorField.scss"; class ColorField extends Component { constructor(props) { super(props); - this.state = { - }; + this.state = {}; - this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1", - "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"]; + this.colors = ["#e53935", "#d81b60", "#8e24aa", "#5e35b1", "#3949ab", "#1e88e5", "#039be5", "#00acc1", + "#00897b", "#43a047", "#7cb342", "#9e9d24", "#f9a825", "#fb8c00", "#f4511e", "#6d4c41"]; } componentDidUpdate(prevProps, prevState, snapshot) { @@ -55,7 +54,7 @@ class ColorField extends Component { this.props.onChange(color); } document.body.click(); // magic to close popup - }} />); + }}/>); const popover = ( <Popover id="popover-basic"> @@ -82,7 +81,7 @@ class ColorField extends Component { <div className="field color-field"> <div className="color-input"> <InputField {...this.props} onChange={this.onChange} invalid={this.state.invalid} name="color" - error={null} /> + error={null}/> <div className="color-picker"> <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose> <button type="button" className="picker-button" style={buttonStyles}>pick</button> diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js index d4d027d..a6cba26 100644 --- a/frontend/src/components/fields/extensions/NumericField.js +++ b/frontend/src/components/fields/extensions/NumericField.js @@ -15,7 +15,7 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. */ -import React, {Component} from 'react'; +import React, {Component} from "react"; import InputField from "../InputField"; class NumericField extends Component { @@ -35,7 +35,7 @@ class NumericField extends Component { } onChange = (value) => { - value = value.toString().replace(/[^\d]/gi, ''); + value = value.toString().replace(/[^\d]/gi, ""); let intValue = 0; if (value !== "") { intValue = parseInt(value, 10); @@ -53,7 +53,7 @@ class NumericField extends Component { render() { return ( <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"} - invalid={this.state.invalid} /> + invalid={this.state.invalid}/> ); } |