diff options
Diffstat (limited to 'web/source/settings/components/form')
| -rw-r--r-- | web/source/settings/components/form/combobox.jsx | 41 | ||||
| -rw-r--r-- | web/source/settings/components/form/file.jsx | 78 | ||||
| -rw-r--r-- | web/source/settings/components/form/index.js | 37 | ||||
| -rw-r--r-- | web/source/settings/components/form/inputs.jsx | 141 | ||||
| -rw-r--r-- | web/source/settings/components/form/mutation-button.jsx | 49 | ||||
| -rw-r--r-- | web/source/settings/components/form/text.jsx | 56 |
6 files changed, 190 insertions, 212 deletions
diff --git a/web/source/settings/components/form/combobox.jsx b/web/source/settings/components/form/combobox.jsx deleted file mode 100644 index aeee38fc2..000000000 --- a/web/source/settings/components/form/combobox.jsx +++ /dev/null @@ -1,41 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <http://www.gnu.org/licenses/>. -*/ - -"use strict"; - -const { useComboboxState } = require("ariakit/combobox"); - -module.exports = function useComboBoxInput({name, Name}, {validator, defaultValue} = {}) { - const state = useComboboxState({ - defaultValue, - gutter: 0, - sameWidth: true - }); - - function reset() { - state.setValue(""); - } - - return [ - state, - reset, - { - [name]: state.value, - } - ]; -};
\ No newline at end of file diff --git a/web/source/settings/components/form/file.jsx b/web/source/settings/components/form/file.jsx deleted file mode 100644 index 4dd0e5162..000000000 --- a/web/source/settings/components/form/file.jsx +++ /dev/null @@ -1,78 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <http://www.gnu.org/licenses/>. -*/ - -"use strict"; - -const React = require("react"); -const prettierBytes = require("prettier-bytes"); - -module.exports = function useFileInput({name, _Name}, { - withPreview, - maxSize, - initialInfo = "no file selected" -}) { - const [file, setFile] = React.useState(); - const [imageURL, setImageURL] = React.useState(); - const [info, setInfo] = React.useState(); - - function onChange(e) { - let file = e.target.files[0]; - setFile(file); - - URL.revokeObjectURL(imageURL); - - if (file != undefined) { - if (withPreview) { - setImageURL(URL.createObjectURL(file)); - } - - let size = prettierBytes(file.size); - if (maxSize && file.size > maxSize) { - size = <span className="error-text">{size}</span>; - } - - setInfo(<> - {file.name} ({size}) - </>); - } else { - setInfo(); - } - } - - function reset() { - URL.revokeObjectURL(imageURL); - setImageURL(); - setFile(); - setInfo(); - } - - return [ - onChange, - reset, - { - [name]: file, - [`${name}URL`]: imageURL, - [`${name}Info`]: <span className="form-info"> - {info - ? info - : initialInfo - } - </span> - } - ]; -};
\ No newline at end of file diff --git a/web/source/settings/components/form/index.js b/web/source/settings/components/form/index.js deleted file mode 100644 index a9f333e0e..000000000 --- a/web/source/settings/components/form/index.js +++ /dev/null @@ -1,37 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <http://www.gnu.org/licenses/>. -*/ - -"use strict"; - -function capitalizeFirst(str) { - return str.slice(0,1).toUpperCase()+str.slice(1); -} - -function makeHook(func) { - return (name, ...args) => func({ - name, - Name: capitalizeFirst(name) - }, - ...args); -} - -module.exports = { - useTextInput: makeHook(require("./text")), - useFileInput: makeHook(require("./file")), - useComboBoxInput: makeHook(require("./combobox")) -};
\ No newline at end of file diff --git a/web/source/settings/components/form/inputs.jsx b/web/source/settings/components/form/inputs.jsx new file mode 100644 index 000000000..eef375ee8 --- /dev/null +++ b/web/source/settings/components/form/inputs.jsx @@ -0,0 +1,141 @@ +/* + GoToSocial + Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + 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 Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. +*/ + +"use strict"; + +const React = require("react"); + +function TextInput({ label, field, ...inputProps }) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field text"> + <label> + {label} + <input + type="text" + {...{ onChange, value, ref }} + {...inputProps} + /> + </label> + </div> + ); +} + +function TextArea({ label, field, ...inputProps }) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field textarea"> + <label> + {label} + <textarea + type="text" + {...{ onChange, value, ref }} + {...inputProps} + /> + </label> + </div> + ); +} + +function FileInput({ label, field, ...inputProps }) { + const { onChange, ref, infoComponent } = field; + + return ( + <div className="form-field file"> + <label> + <div className="label">{label}</div> + <div className="file-input button">Browse</div> + {infoComponent} + {/* <a onClick={removeFile("header")}>remove</a> */} + <input + type="file" + className="hidden" + {...{ onChange, ref }} + {...inputProps} + /> + </label> + </div> + ); +} + +function Checkbox({ label, field, ...inputProps }) { + const { onChange, value } = field; + + return ( + <div className="form-field checkbox"> + <label> + <input + type="checkbox" + checked={value} + onChange={onChange} + {...inputProps} + /> {label} + </label> + </div> + ); +} + +function Select({ label, field, options, ...inputProps }) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field select"> + <label> + {label} + <select + {...{ onChange, value, ref }} + {...inputProps} + > + {options} + </select> + </label> + </div> + ); +} + +function RadioGroup({ field, label, ...inputProps }) { + return ( + <div className="form-field radio"> + {Object.entries(field.options).map(([value, radioLabel]) => ( + <label key={value}> + <input + type="radio" + name={field.name} + value={value} + checked={field.value == value} + onChange={field.onChange} + {...inputProps} + /> + {radioLabel} + </label> + ))} + {label} + </div> + ); +} + +module.exports = { + TextInput, + TextArea, + FileInput, + Checkbox, + Select, + RadioGroup +};
\ No newline at end of file diff --git a/web/source/settings/components/form/mutation-button.jsx b/web/source/settings/components/form/mutation-button.jsx new file mode 100644 index 000000000..97bcdf08d --- /dev/null +++ b/web/source/settings/components/form/mutation-button.jsx @@ -0,0 +1,49 @@ +/* + GoToSocial + Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + 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 Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <http://www.gnu.org/licenses/>. +*/ + +"use strict"; + +const React = require("react"); +const { Error } = require("../error"); + +module.exports = function MutationButton({ label, result, disabled, showError = true, className = "", ...inputProps }) { + let iconClass = ""; + const targetsThisButton = result.action == inputProps.name; // can also both be undefined, which is correct + + if (targetsThisButton) { + if (result.isLoading) { + iconClass = "fa-spin fa-refresh"; + } else if (result.isSuccess) { + iconClass = "fa-check fadeout"; + } + } + + return (<div> + {(showError && targetsThisButton && result.error) && + <Error error={result.error} /> + } + <button type="submit" className={"with-icon " + className} disabled={result.isLoading || disabled} {...inputProps}> + <i className={`fa fa-fw ${iconClass}`} aria-hidden="true"></i> + {(targetsThisButton && result.isLoading) + ? "Processing..." + : label + } + </button> + </div> + ); +};
\ No newline at end of file diff --git a/web/source/settings/components/form/text.jsx b/web/source/settings/components/form/text.jsx deleted file mode 100644 index 3cd7e2d25..000000000 --- a/web/source/settings/components/form/text.jsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - GoToSocial - Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as published by - the Free Software Foundation, either version 3 of the License, or - (at your option) any later version. - - 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 Affero General Public License for more details. - - You should have received a copy of the GNU Affero General Public License - along with this program. If not, see <http://www.gnu.org/licenses/>. -*/ - -"use strict"; - -const React = require("react"); - -module.exports = function useTextInput({name, Name}, {validator, defaultValue=""} = {}) { - const [text, setText] = React.useState(defaultValue); - const [valid, setValid] = React.useState(true); - const textRef = React.useRef(null); - - function onChange(e) { - let input = e.target.value; - setText(input); - } - - function reset() { - setText(""); - } - - React.useEffect(() => { - if (validator) { - let res = validator(text); - setValid(res == ""); - textRef.current.setCustomValidity(res); - textRef.current.reportValidity(); - } - }, [text, textRef, validator]); - - return [ - onChange, - reset, - { - [name]: text, - [`${name}Ref`]: textRef, - [`set${Name}`]: setText, - [`${name}Valid`]: valid - } - ]; -};
\ No newline at end of file |