From 2e6af3b2623da3d002816a6de325133d626858c9 Mon Sep 17 00:00:00 2001 From: VaiTon Date: Mon, 5 Jun 2023 16:54:12 +0200 Subject: Frontend to jsx --- frontend/src/components/fields/ButtonField.jsx | 78 +++++++++++++++++ frontend/src/components/fields/CheckField.jsx | 67 +++++++++++++++ frontend/src/components/fields/ChoiceField.jsx | 85 +++++++++++++++++++ frontend/src/components/fields/InputField.jsx | 95 +++++++++++++++++++++ frontend/src/components/fields/TagField.jsx | 75 +++++++++++++++++ frontend/src/components/fields/TextField.jsx | 60 +++++++++++++ .../components/fields/extensions/ColorField.jsx | 98 ++++++++++++++++++++++ .../components/fields/extensions/NumericField.jsx | 62 ++++++++++++++ 8 files changed, 620 insertions(+) create mode 100644 frontend/src/components/fields/ButtonField.jsx create mode 100644 frontend/src/components/fields/CheckField.jsx create mode 100644 frontend/src/components/fields/ChoiceField.jsx create mode 100644 frontend/src/components/fields/InputField.jsx create mode 100644 frontend/src/components/fields/TagField.jsx create mode 100644 frontend/src/components/fields/TextField.jsx create mode 100644 frontend/src/components/fields/extensions/ColorField.jsx create mode 100644 frontend/src/components/fields/extensions/NumericField.jsx (limited to 'frontend/src/components/fields') diff --git a/frontend/src/components/fields/ButtonField.jsx b/frontend/src/components/fields/ButtonField.jsx new file mode 100644 index 0000000..ae5b33a --- /dev/null +++ b/frontend/src/components/fields/ButtonField.jsx @@ -0,0 +1,78 @@ +/* + * 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 . + */ + +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 ( +
+ +
+ ); + } +} + +export default ButtonField; diff --git a/frontend/src/components/fields/CheckField.jsx b/frontend/src/components/fields/CheckField.jsx new file mode 100644 index 0000000..1a04f18 --- /dev/null +++ b/frontend/src/components/fields/CheckField.jsx @@ -0,0 +1,67 @@ +/* + * 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 . + */ + +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 ( +
+
+ + +
+
+ ); + } +} + +export default CheckField; diff --git a/frontend/src/components/fields/ChoiceField.jsx b/frontend/src/components/fields/ChoiceField.jsx new file mode 100644 index 0000000..c44d0a9 --- /dev/null +++ b/frontend/src/components/fields/ChoiceField.jsx @@ -0,0 +1,85 @@ +/* + * 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 . + */ + +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) => + handler(key)}>{values[i]} + ); + + 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 ( +
+ {!inline && name && } +
this.state.expanded ? collapse() : expand()}> +
{fieldValue}
+
+ {options} +
+
+
+ ); + } +} + +export default ChoiceField; diff --git a/frontend/src/components/fields/InputField.jsx b/frontend/src/components/fields/InputField.jsx new file mode 100644 index 0000000..f9609df --- /dev/null +++ b/frontend/src/components/fields/InputField.jsx @@ -0,0 +1,95 @@ +/* + * 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 . + */ + +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 ( +
+
+ {name && +
+ +
+ } +
+
+ {type === "file" && } + +
+ {type !== "file" && value !== "" && !this.props.readonly && +
+ handler(null)}>del +
+ } +
+
+ {error && +
+ error: {error} +
+ } +
+ ); + } +} + +export default InputField; diff --git a/frontend/src/components/fields/TagField.jsx b/frontend/src/components/fields/TagField.jsx new file mode 100644 index 0000000..79e2314 --- /dev/null +++ b/frontend/src/components/fields/TagField.jsx @@ -0,0 +1,75 @@ +/* + * 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 . + */ + +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 ( +
+ {name && +
+ +
+ } +
+ +
+
+ ); + } +} + +export default TagField; diff --git a/frontend/src/components/fields/TextField.jsx b/frontend/src/components/fields/TextField.jsx new file mode 100644 index 0000000..1138ffc --- /dev/null +++ b/frontend/src/components/fields/TextField.jsx @@ -0,0 +1,60 @@ +/* + * 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 . + */ + +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 ( +
+ {name && } +