diff options
Diffstat (limited to 'web/source/settings/components')
| -rw-r--r-- | web/source/settings/components/error.jsx | 1 | ||||
| -rw-r--r-- | web/source/settings/components/form-fields.jsx | 2 | ||||
| -rw-r--r-- | web/source/settings/components/form/file.jsx | 78 | ||||
| -rw-r--r-- | web/source/settings/components/form/index.js | 36 | ||||
| -rw-r--r-- | web/source/settings/components/form/text.jsx | 56 | ||||
| -rw-r--r-- | web/source/settings/components/mutation-button.jsx | 42 |
6 files changed, 213 insertions, 2 deletions
diff --git a/web/source/settings/components/error.jsx b/web/source/settings/components/error.jsx index 13dc686b7..dd1551c36 100644 --- a/web/source/settings/components/error.jsx +++ b/web/source/settings/components/error.jsx @@ -18,7 +18,6 @@ "use strict"; -const Promise = require("bluebird"); const React = require("react"); module.exports = function ErrorFallback({error, resetErrorBoundary}) { diff --git a/web/source/settings/components/form-fields.jsx b/web/source/settings/components/form-fields.jsx index cb402c3b2..6393b1d5c 100644 --- a/web/source/settings/components/form-fields.jsx +++ b/web/source/settings/components/form-fields.jsx @@ -119,7 +119,7 @@ module.exports = { field = ( <> <label htmlFor={id} className="file-input button">Browse</label> - <span> + <span className="form-info"> {file ? file.name : "no file selected"} {size} </span> {/* <a onClick={removeFile("header")}>remove</a> */} diff --git a/web/source/settings/components/form/file.jsx b/web/source/settings/components/form/file.jsx new file mode 100644 index 000000000..0d28cb699 --- /dev/null +++ b/web/source/settings/components/form/file.jsx @@ -0,0 +1,78 @@ +/* + GoToSocial + Copyright (C) 2021-2022 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 new file mode 100644 index 000000000..5edc52364 --- /dev/null +++ b/web/source/settings/components/form/index.js @@ -0,0 +1,36 @@ +/* + GoToSocial + Copyright (C) 2021-2022 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")) +};
\ No newline at end of file diff --git a/web/source/settings/components/form/text.jsx b/web/source/settings/components/form/text.jsx new file mode 100644 index 000000000..a392239dc --- /dev/null +++ b/web/source/settings/components/form/text.jsx @@ -0,0 +1,56 @@ +/* + GoToSocial + Copyright (C) 2021-2022 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} = {}) { + const [text, setText] = React.useState(""); + const textRef = React.useRef(null); + + function onChange(e) { + let input = e.target.value; + setText(input); + + if (validator) { + validator(input); + } + } + + function reset() { + setText(""); + } + + React.useEffect(() => { + if (validator) { + textRef.current.setCustomValidity(validator(text)); + textRef.current.reportValidity(); + } + }, [text, textRef, validator]); + + return [ + onChange, + reset, + { + [name]: text, + [`${name}Ref`]: textRef, + [`set${Name}`]: setText + } + ]; +};
\ No newline at end of file diff --git a/web/source/settings/components/mutation-button.jsx b/web/source/settings/components/mutation-button.jsx new file mode 100644 index 000000000..9a8c9d089 --- /dev/null +++ b/web/source/settings/components/mutation-button.jsx @@ -0,0 +1,42 @@ +/* + GoToSocial + Copyright (C) 2021-2022 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 MutateButton({text, result}) { + let buttonText = text; + + if (result.isLoading) { + buttonText = "Processing..."; + } + + return (<div> + {result.error && + <section className="error">{result.error.status}: {result.error.data.error}</section> + } + <input + className="button" + type="submit" + disabled={result.isLoading} + value={buttonText} + /> + </div> + ); +};
\ No newline at end of file |