inputs.jsx (3021B)
1 /* 2 GoToSocial 3 Copyright (C) GoToSocial Authors admin@gotosocial.org 4 SPDX-License-Identifier: AGPL-3.0-or-later 5 6 This program is free software: you can redistribute it and/or modify 7 it under the terms of the GNU Affero General Public License as published by 8 the Free Software Foundation, either version 3 of the License, or 9 (at your option) any later version. 10 11 This program is distributed in the hope that it will be useful, 12 but WITHOUT ANY WARRANTY; without even the implied warranty of 13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 14 GNU Affero General Public License for more details. 15 16 You should have received a copy of the GNU Affero General Public License 17 along with this program. If not, see <http://www.gnu.org/licenses/>. 18 */ 19 20 "use strict"; 21 22 const React = require("react"); 23 24 function TextInput({ label, field, ...inputProps }) { 25 const { onChange, value, ref } = field; 26 27 return ( 28 <div className={`form-field text${field.valid ? "" : " invalid"}`}> 29 <label> 30 {label} 31 <input 32 type="text" 33 {...{ onChange, value, ref }} 34 {...inputProps} 35 /> 36 </label> 37 </div> 38 ); 39 } 40 41 function TextArea({ label, field, ...inputProps }) { 42 const { onChange, value, ref } = field; 43 44 return ( 45 <div className="form-field textarea"> 46 <label> 47 {label} 48 <textarea 49 type="text" 50 {...{ onChange, value, ref }} 51 {...inputProps} 52 /> 53 </label> 54 </div> 55 ); 56 } 57 58 function FileInput({ label, field, ...inputProps }) { 59 const { onChange, ref, infoComponent } = field; 60 61 return ( 62 <div className="form-field file"> 63 <label> 64 <div className="label">{label}</div> 65 <div className="file-input button">Browse</div> 66 {infoComponent} 67 {/* <a onClick={removeFile("header")}>remove</a> */} 68 <input 69 type="file" 70 className="hidden" 71 {...{ onChange, ref }} 72 {...inputProps} 73 /> 74 </label> 75 </div> 76 ); 77 } 78 79 function Checkbox({ label, field, ...inputProps }) { 80 const { onChange, value } = field; 81 82 return ( 83 <div className="form-field checkbox"> 84 <label> 85 <input 86 type="checkbox" 87 checked={value} 88 onChange={onChange} 89 {...inputProps} 90 /> {label} 91 </label> 92 </div> 93 ); 94 } 95 96 function Select({ label, field, options, children, ...inputProps }) { 97 const { onChange, value, ref } = field; 98 99 return ( 100 <div className="form-field select"> 101 <label> 102 {label} {children} 103 <select 104 {...{ onChange, value, ref }} 105 {...inputProps} 106 > 107 {options} 108 </select> 109 </label> 110 </div> 111 ); 112 } 113 114 function RadioGroup({ field, label, ...inputProps }) { 115 return ( 116 <div className="form-field radio"> 117 {Object.entries(field.options).map(([value, radioLabel]) => ( 118 <label key={value}> 119 <input 120 type="radio" 121 name={field.name} 122 value={value} 123 checked={field.value == value} 124 onChange={field.onChange} 125 {...inputProps} 126 /> 127 {radioLabel} 128 </label> 129 ))} 130 {label} 131 </div> 132 ); 133 } 134 135 module.exports = { 136 TextInput, 137 TextArea, 138 FileInput, 139 Checkbox, 140 Select, 141 RadioGroup 142 };