diff options
Diffstat (limited to 'frontend/src/components/fields')
| -rw-r--r-- | frontend/src/components/fields/ButtonField.jsx | 78 | ||||
| -rw-r--r-- | frontend/src/components/fields/CheckField.jsx | 67 | ||||
| -rw-r--r-- | frontend/src/components/fields/ChoiceField.jsx | 85 | ||||
| -rw-r--r-- | frontend/src/components/fields/InputField.jsx | 95 | ||||
| -rw-r--r-- | frontend/src/components/fields/TagField.jsx | 75 | ||||
| -rw-r--r-- | frontend/src/components/fields/TextField.jsx | 60 |
6 files changed, 0 insertions, 460 deletions
diff --git a/frontend/src/components/fields/ButtonField.jsx b/frontend/src/components/fields/ButtonField.jsx deleted file mode 100644 index ae5b33a..0000000 --- a/frontend/src/components/fields/ButtonField.jsx +++ /dev/null @@ -1,78 +0,0 @@ -/* - * 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 "./ButtonField.scss"; -import "./common.scss"; -import classNames from "classnames"; - -class ButtonField extends Component { - render() { - const handler = () => { - if (typeof this.props.onClick === "function") { - this.props.onClick(); - } - }; - - let buttonClassnames = { - "button-bordered": this.props.bordered, - }; - if (this.props.variant) { - buttonClassnames[`button-variant-${this.props.variant}`] = true; - } - - let buttonStyle = {}; - if (this.props.color) { - buttonStyle["backgroundColor"] = this.props.color; - } - if (this.props.border) { - buttonStyle["borderColor"] = this.props.border; - } - if (this.props.fullSpan) { - buttonStyle["width"] = "100%"; - } - if (this.props.rounded) { - buttonStyle["borderRadius"] = "3px"; - } - if (this.props.inline) { - buttonStyle["marginTop"] = "8px"; - } - - return ( - <div - className={classNames( - "field", - "button-field", - { "field-small": this.props.small }, - { "field-active": this.props.active } - )} - > - <button - type="button" - className={classNames(buttonClassnames)} - onClick={handler} - style={buttonStyle} - disabled={this.props.disabled} - > - {this.props.name} - </button> - </div> - ); - } -} - -export default ButtonField; diff --git a/frontend/src/components/fields/CheckField.jsx b/frontend/src/components/fields/CheckField.jsx deleted file mode 100644 index 1a04f18..0000000 --- a/frontend/src/components/fields/CheckField.jsx +++ /dev/null @@ -1,67 +0,0 @@ -/* - * 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 { randomClassName } from "../../utils"; -import "./CheckField.scss"; -import "./common.scss"; - -import classNames from "classnames"; - -class CheckField extends Component { - constructor(props) { - super(props); - - this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; - } - - render() { - const checked = this.props.checked || false; - const small = this.props.small || false; - const name = this.props.name || null; - const handler = () => { - if (!this.props.readonly && this.props.onChange) { - this.props.onChange(!checked); - } - }; - - return ( - <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} - /> - <label htmlFor={this.id}> - {(checked ? "✓ " : "✗ ") + (name != null ? name : "")} - </label> - </div> - </div> - ); - } -} - -export default CheckField; diff --git a/frontend/src/components/fields/ChoiceField.jsx b/frontend/src/components/fields/ChoiceField.jsx deleted file mode 100644 index c44d0a9..0000000 --- a/frontend/src/components/fields/ChoiceField.jsx +++ /dev/null @@ -1,85 +0,0 @@ -/* - * 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 {randomClassName} from "../../utils"; -import "./ChoiceField.scss"; -import "./common.scss"; - -import classNames from 'classnames'; - -class ChoiceField extends Component { - - constructor(props) { - super(props); - - this.state = { - expanded: false - }; - - this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; - } - - render() { - const name = this.props.name || null; - const inline = this.props.inline; - - const collapse = () => this.setState({expanded: false}); - const expand = () => this.setState({expanded: true}); - - const handler = (key) => { - collapse(); - if (this.props.onChange) { - this.props.onChange(key); - } - }; - - const keys = this.props.keys || []; - const values = this.props.values || []; - - const options = keys.map((key, i) => - <span className="field-option" key={key} onClick={() => handler(key)}>{values[i]}</span> - ); - - let fieldValue = ""; - if (inline && name) { - fieldValue = name; - } - if (!this.props.onlyName && inline && name) { - fieldValue += ": "; - } - if (!this.props.onlyName) { - fieldValue += this.props.value || "select a value"; - } - - return ( - <div className={classNames("field", "choice-field", {"field-inline": inline}, - {"field-small": this.props.small})}> - {!inline && name && <label className="field-name">{name}:</label>} - <div className={classNames("field-select", {"select-expanded": this.state.expanded})} - tabIndex={0} onBlur={collapse} onClick={() => this.state.expanded ? collapse() : expand()}> - <div className="field-value">{fieldValue}</div> - <div className="field-options"> - {options} - </div> - </div> - </div> - ); - } -} - -export default ChoiceField; diff --git a/frontend/src/components/fields/InputField.jsx b/frontend/src/components/fields/InputField.jsx deleted file mode 100644 index f9609df..0000000 --- a/frontend/src/components/fields/InputField.jsx +++ /dev/null @@ -1,95 +0,0 @@ -/* - * 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 {randomClassName} from "../../utils"; -import "./common.scss"; -import "./InputField.scss"; - -import classNames from 'classnames'; - -class InputField extends Component { - - constructor(props) { - super(props); - - this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; - } - - render() { - const active = this.props.active || false; - const invalid = this.props.invalid || false; - const small = this.props.small || false; - const inline = this.props.inline || false; - const name = this.props.name || null; - const value = this.props.value || ""; - const defaultValue = this.props.defaultValue || ""; - const type = this.props.type || "text"; - const error = this.props.error || null; - - const handler = (e) => { - if (typeof this.props.onChange === "function") { - if (type === "file") { - let file = e.target.files[0]; - this.props.onChange(file); - } else if (e == null) { - this.props.onChange(defaultValue); - } else { - this.props.onChange(e.target.value); - } - } - }; - let inputProps = {}; - if (type !== "file") { - inputProps["value"] = value || defaultValue; - } - - return ( - <div className={classNames("field", "input-field", {"field-active": active}, - {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}> - <div className="field-wrapper"> - {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>} - <input type={type} placeholder={this.props.placeholder} id={this.id} - aria-describedby={this.id} onChange={handler} {...inputProps} - readOnly={this.props.readonly}/> - </div> - {type !== "file" && value !== "" && !this.props.readonly && - <div className="field-clear"> - <span onClick={() => handler(null)}>del</span> - </div> - } - </div> - </div> - {error && - <div className="field-error"> - error: {error} - </div> - } - </div> - ); - } -} - -export default InputField; diff --git a/frontend/src/components/fields/TagField.jsx b/frontend/src/components/fields/TagField.jsx deleted file mode 100644 index 79e2314..0000000 --- a/frontend/src/components/fields/TagField.jsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - * 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 ReactTags from "react-tag-autocomplete"; -import {randomClassName} from "../../utils"; -import "./common.scss"; -import "./TagField.scss"; - -import classNames from 'classnames'; -import _ from 'lodash'; - -class TagField extends Component { - - state = {}; - - constructor(props) { - super(props); - - this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; - } - - onAddition = (tag) => { - if (typeof this.props.onChange === "function") { - this.props.onChange([].concat(this.props.tags, tag), true, tag); // true == addition - } - }; - - onDelete = (i) => { - if (typeof this.props.onChange === "function") { - const tags = _.clone(this.props.tags); - const tag = tags[i]; - tags.splice(i, 1); - this.props.onChange(tags, true, tag); // false == delete - } - }; - - - render() { - const small = this.props.small || false; - const name = this.props.name || null; - - return ( - <div className={classNames("field", "tag-field", {"field-small": small}, - {"field-inline": this.props.inline})}> - {name && - <div className="field-name"> - <label>{name}:</label> - </div> - } - <div className="field-input"> - <ReactTags {...this.props} tags={this.props.tags || []} autoresize={false} - onDelete={this.onDelete} onAddition={this.onAddition} - placeholderText={this.props.placeholder || ""}/> - </div> - </div> - ); - } -} - -export default TagField; diff --git a/frontend/src/components/fields/TextField.jsx b/frontend/src/components/fields/TextField.jsx deleted file mode 100644 index 1138ffc..0000000 --- a/frontend/src/components/fields/TextField.jsx +++ /dev/null @@ -1,60 +0,0 @@ -/* - * 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 {randomClassName} from "../../utils"; -import "./common.scss"; -import "./TextField.scss"; - -import classNames from 'classnames'; - -class TextField extends Component { - - constructor(props) { - super(props); - - this.id = `field-${this.props.name || "noname"}-${randomClassName()}`; - } - - render() { - const name = this.props.name || null; - const error = this.props.error || null; - const rows = this.props.rows || 3; - - const handler = (e) => { - if (this.props.onChange) { - if (e == null) { - this.props.onChange(""); - } else { - this.props.onChange(e.target.value); - } - } - }; - - return ( - <div className={classNames("field", "text-field", {"field-active": this.props.active}, - {"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}/> - {error && <div className="field-error">error: {error}</div>} - </div> - ); - } -} - -export default TextField; |