diff options
Diffstat (limited to 'web/source/settings/components')
| -rw-r--r-- | web/source/settings/components/combo-box.jsx | 49 | ||||
| -rw-r--r-- | web/source/settings/components/form/combobox.jsx | 37 | ||||
| -rw-r--r-- | web/source/settings/components/form/index.js | 3 |
3 files changed, 88 insertions, 1 deletions
diff --git a/web/source/settings/components/combo-box.jsx b/web/source/settings/components/combo-box.jsx new file mode 100644 index 000000000..1e6293890 --- /dev/null +++ b/web/source/settings/components/combo-box.jsx @@ -0,0 +1,49 @@ +/* + 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 { + Combobox, + ComboboxItem, + ComboboxPopover, +} = require("ariakit/combobox"); + +module.exports = function ComboBox({state, items, label, placeHolder}) { + return ( + <div className="form-field combobox-wrapper"> + <label> + {label} + <Combobox + state={state} + placeholder={placeHolder} + className="combobox input" + /> + </label> + <ComboboxPopover state={state} className="popover"> + {items.map(([key, value]) => ( + <ComboboxItem className="combobox-item" key={key} value={key}> + {value} + </ComboboxItem> + ))} + </ComboboxPopover> + </div> + ); +};
\ No newline at end of file diff --git a/web/source/settings/components/form/combobox.jsx b/web/source/settings/components/form/combobox.jsx new file mode 100644 index 000000000..6ab235ed3 --- /dev/null +++ b/web/source/settings/components/form/combobox.jsx @@ -0,0 +1,37 @@ +/* + 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 { useComboboxState } = require("ariakit/combobox"); + +module.exports = function useComboBoxInput({name, Name}, {validator} = {}) { + const state = useComboboxState({ gutter: 0, sameWidth: true }); + + function reset() { + state.value = ""; + } + + return [ + state, + reset, + { + [name]: state.value, + } + ]; +};
\ No newline at end of file diff --git a/web/source/settings/components/form/index.js b/web/source/settings/components/form/index.js index 5edc52364..e226a4b04 100644 --- a/web/source/settings/components/form/index.js +++ b/web/source/settings/components/form/index.js @@ -32,5 +32,6 @@ function makeHook(func) { module.exports = { useTextInput: makeHook(require("./text")), - useFileInput: makeHook(require("./file")) + useFileInput: makeHook(require("./file")), + useComboBoxInput: makeHook(require("./combobox")) };
\ No newline at end of file |