diff options
author | 2023-10-17 12:46:06 +0200 | |
---|---|---|
committer | 2023-10-17 12:46:06 +0200 | |
commit | 637f188ebec71fe4b0b80bbab4592d4c269d7d93 (patch) | |
tree | 6e1136dee4d854af021e0a571a67038d32083e4b /web/source/settings/components/form/inputs.tsx | |
parent | [chore]: Bump github.com/microcosm-cc/bluemonday from 1.0.25 to 1.0.26 (#2266) (diff) | |
download | gotosocial-637f188ebec71fe4b0b80bbab4592d4c269d7d93.tar.xz |
[feature] Allow import/export/creation of domain allows via admin panel (#2264)v0.12.0-rc1
* it's happening!
* aaa
* fix silly whoopsie
* it's working pa! it's working ma!
* model report parameters
* shuffle some more stuff around
* getting there
* oo hoo
* finish tidying up for now
* aaa
* fix use form submit errors
* peepee poo poo
* aaaaa
* ffff
* they see me typin', they hatin'
* boop
* aaa
* oooo
* typing typing tappa tappa
* almost done typing
* weee
* alright
* push it push it real good doo doo doo doo doo doo
* thingy no worky
* almost done
* mutation modifers not quite right
* hmm
* it works
* view blocks + allows nicely
* it works!
* typia install
* the old linterino
* linter plz
Diffstat (limited to 'web/source/settings/components/form/inputs.tsx')
-rw-r--r-- | web/source/settings/components/form/inputs.tsx | 190 |
1 files changed, 190 insertions, 0 deletions
diff --git a/web/source/settings/components/form/inputs.tsx b/web/source/settings/components/form/inputs.tsx new file mode 100644 index 000000000..1e0d8eaab --- /dev/null +++ b/web/source/settings/components/form/inputs.tsx @@ -0,0 +1,190 @@ +/* + GoToSocial + Copyright (C) GoToSocial Authors admin@gotosocial.org + SPDX-License-Identifier: AGPL-3.0-or-later + + 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/>. +*/ + +import React from "react"; + +import type { + ReactNode, + RefObject, +} from "react"; + +import type { + FileFormInputHook, + RadioFormInputHook, + TextFormInputHook, +} from "../../lib/form/types"; + +export interface TextInputProps extends React.DetailedHTMLProps< + React.InputHTMLAttributes<HTMLInputElement>, + HTMLInputElement +> { + label?: string; + field: TextFormInputHook; +} + +export function TextInput({label, field, ...props}: TextInputProps) { + const { onChange, value, ref } = field; + + return ( + <div className={`form-field text${field.valid ? "" : " invalid"}`}> + <label> + {label} + <input + onChange={onChange} + value={value} + ref={ref as RefObject<HTMLInputElement>} + {...props} + /> + </label> + </div> + ); +} + +export interface TextAreaProps extends React.DetailedHTMLProps< + React.TextareaHTMLAttributes<HTMLTextAreaElement>, + HTMLTextAreaElement +> { + label?: string; + field: TextFormInputHook; +} + +export function TextArea({label, field, ...props}: TextAreaProps) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field textarea"> + <label> + {label} + <textarea + onChange={onChange} + value={value} + ref={ref as RefObject<HTMLTextAreaElement>} + {...props} + /> + </label> + </div> + ); +} + +export interface FileInputProps extends React.DetailedHTMLProps< + React.InputHTMLAttributes<HTMLInputElement>, + HTMLInputElement +> { + label?: string; + field: FileFormInputHook; +} + +export function FileInput({ label, field, ...props }: FileInputProps) { + 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={onChange} + ref={ref ? ref as RefObject<HTMLInputElement> : undefined} + {...props} + /> + </label> + </div> + ); +} + +export 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> + ); +} + +export interface SelectProps extends React.DetailedHTMLProps< + React.SelectHTMLAttributes<HTMLSelectElement>, + HTMLSelectElement +> { + label?: string; + field: TextFormInputHook; + children?: ReactNode; + options: React.JSX.Element; +} + +export function Select({ label, field, children, options, ...props }: SelectProps) { + const { onChange, value, ref } = field; + + return ( + <div className="form-field select"> + <label> + {label} + {children} + <select + onChange={onChange} + value={value} + ref={ref as RefObject<HTMLSelectElement>} + {...props} + > + {options} + </select> + </label> + </div> + ); +} + +export interface RadioGroupProps extends React.DetailedHTMLProps< + React.InputHTMLAttributes<HTMLInputElement>, + HTMLInputElement +> { + label?: string; + field: RadioFormInputHook; +} + +export function RadioGroup({ label, field, ...props }: RadioGroupProps) { + 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} + {...props} + /> + {radioLabel} + </label> + ))} + {label} + </div> + ); +} |