| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | /* | 
					
						
							|  |  |  | 	GoToSocial | 
					
						
							| 
									
										
										
										
											2023-03-12 18:49:06 +01:00
										 |  |  | 	Copyright (C) GoToSocial Authors admin@gotosocial.org | 
					
						
							|  |  |  | 	SPDX-License-Identifier: AGPL-3.0-or-later | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 
 | 
					
						
							|  |  |  | 	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"); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-02-06 09:19:56 +01:00
										 |  |  | const _default = ""; | 
					
						
							| 
									
										
										
										
											2023-02-03 12:07:40 +01:00
										 |  |  | module.exports = function useTextInput({ name, Name }, { | 
					
						
							| 
									
										
										
										
											2023-02-06 09:19:56 +01:00
										 |  |  | 	initialValue = _default, | 
					
						
							| 
									
										
										
										
											2023-02-03 12:07:40 +01:00
										 |  |  | 	dontReset = false, | 
					
						
							|  |  |  | 	validator, | 
					
						
							|  |  |  | 	showValidation = true, | 
					
						
							|  |  |  | 	initValidation | 
					
						
							|  |  |  | } = {}) { | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-02-06 09:19:56 +01:00
										 |  |  | 	const [text, setText] = React.useState(initialValue); | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 	const textRef = React.useRef(null); | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-02-03 12:07:40 +01:00
										 |  |  | 	const [validation, setValidation] = React.useState(initValidation ?? ""); | 
					
						
							|  |  |  | 	const [_isValidating, startValidation] = React.useTransition(); | 
					
						
							|  |  |  | 	let valid = validation == ""; | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 	function onChange(e) { | 
					
						
							|  |  |  | 		let input = e.target.value; | 
					
						
							|  |  |  | 		setText(input); | 
					
						
							| 
									
										
										
										
											2023-02-03 12:07:40 +01:00
										 |  |  | 
 | 
					
						
							|  |  |  | 		if (validator) { | 
					
						
							|  |  |  | 			startValidation(() => { | 
					
						
							|  |  |  | 				setValidation(validator(input)); | 
					
						
							|  |  |  | 			}); | 
					
						
							|  |  |  | 		} | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 	} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 	function reset() { | 
					
						
							| 
									
										
										
										
											2023-01-18 14:45:14 +01:00
										 |  |  | 		if (!dontReset) { | 
					
						
							| 
									
										
										
										
											2023-02-06 09:19:56 +01:00
										 |  |  | 			setText(initialValue); | 
					
						
							| 
									
										
										
										
											2023-01-18 14:45:14 +01:00
										 |  |  | 		} | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 	} | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | 	React.useEffect(() => { | 
					
						
							| 
									
										
										
										
											2023-01-18 14:45:14 +01:00
										 |  |  | 		if (validator && textRef.current) { | 
					
						
							| 
									
										
										
										
											2023-02-03 12:07:40 +01:00
										 |  |  | 			if (showValidation) { | 
					
						
							|  |  |  | 				textRef.current.setCustomValidity(validation); | 
					
						
							|  |  |  | 			} else { | 
					
						
							|  |  |  | 				textRef.current.setCustomValidity(""); | 
					
						
							|  |  |  | 			} | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 		} | 
					
						
							| 
									
										
										
										
											2023-02-03 12:07:40 +01:00
										 |  |  | 	}, [validation, validator, showValidation]); | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-01-18 14:45:14 +01:00
										 |  |  | 	// Array / Object hybrid, for easier access in different contexts
 | 
					
						
							|  |  |  | 	return Object.assign([ | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 		onChange, | 
					
						
							|  |  |  | 		reset, | 
					
						
							|  |  |  | 		{ | 
					
						
							|  |  |  | 			[name]: text, | 
					
						
							|  |  |  | 			[`${name}Ref`]: textRef, | 
					
						
							| 
									
										
										
										
											2022-12-11 16:00:23 +01:00
										 |  |  | 			[`set${Name}`]: setText, | 
					
						
							| 
									
										
										
										
											2023-01-18 14:45:14 +01:00
										 |  |  | 			[`${name}Valid`]: valid, | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | 		} | 
					
						
							| 
									
										
										
										
											2023-01-18 14:45:14 +01:00
										 |  |  | 	], { | 
					
						
							|  |  |  | 		onChange, | 
					
						
							|  |  |  | 		reset, | 
					
						
							|  |  |  | 		name, | 
					
						
							|  |  |  | 		value: text, | 
					
						
							|  |  |  | 		ref: textRef, | 
					
						
							|  |  |  | 		setter: setText, | 
					
						
							|  |  |  | 		valid, | 
					
						
							| 
									
										
										
										
											2023-02-03 12:07:40 +01:00
										 |  |  | 		validate: () => setValidation(validator(text)), | 
					
						
							| 
									
										
										
										
											2023-02-06 09:19:56 +01:00
										 |  |  | 		hasChanged: () => text != initialValue, | 
					
						
							|  |  |  | 		_default | 
					
						
							| 
									
										
										
										
											2023-01-18 14:45:14 +01:00
										 |  |  | 	}); | 
					
						
							| 
									
										
										
										
											2022-11-08 17:51:44 +01:00
										 |  |  | }; |