aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/components/fields
diff options
context:
space:
mode:
authorJJ2024-07-19 00:38:57 +0000
committerJJ2024-07-19 00:38:57 +0000
commitc5434cccee8661de3082c0c777375eb8e6f76865 (patch)
tree772c5a5e821c8b731a97f3b559c79c039bbc29df /frontend/src/components/fields
parent74b133ca50b094231721e82ac94448e28b0aa377 (diff)
remove unnecessary jsx stuff
Diffstat (limited to 'frontend/src/components/fields')
-rw-r--r--frontend/src/components/fields/ButtonField.jsx78
-rw-r--r--frontend/src/components/fields/CheckField.jsx67
-rw-r--r--frontend/src/components/fields/ChoiceField.jsx85
-rw-r--r--frontend/src/components/fields/InputField.jsx95
-rw-r--r--frontend/src/components/fields/TagField.jsx75
-rw-r--r--frontend/src/components/fields/TextField.jsx60
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;