Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix misuse of Hooks with useRef (#24)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/24
This commit is contained in:
Siklos 2022-08-11 09:10:06 -04:00
parent ac56f84196
commit d11dfec22b
9 changed files with 76 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/Components/Properties/Properties.tsx
View file

@ -6,7 +6,7 @@ import { INPUT_TYPES } from './PropertiesInputTypes';
interface IPropertiesProps {
properties?: ContainerProperties
onChange: (key: string, value: string | number | boolean) => void
onSubmit: (event: React.FormEvent<HTMLFormElement>, refs: Array<React.RefObject<HTMLInputElement>>) => void
onSubmit: (event: React.FormEvent<HTMLFormElement>, properties: ContainerProperties) => void
}
export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps) => {
@ -17,10 +17,9 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
}
const groupInput: React.ReactNode[] = [];
const refs: Array<React.RefObject<HTMLInputElement>> = [];
Object
.entries(props.properties)
.forEach((pair) => handleProperties(pair, groupInput, refs, isDynamicInput, props.onChange));
.forEach((pair) => handleProperties(pair, groupInput, isDynamicInput, props.onChange));
const form = isDynamicInput
? <div>
@ -28,7 +27,7 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
</div>
: <form
key={props.properties.id}
onSubmit={(event) => props.onSubmit(event, refs)}
onSubmit={(event) => props.onSubmit(event, props.properties as ContainerProperties)}
>
<input type='submit' className='normal-btn block mx-auto' value='Submit'/>
{ groupInput }
@ -52,7 +51,6 @@ export const Properties: React.FC<IPropertiesProps> = (props: IPropertiesProps)
const handleProperties = (
[key, value]: [string, string | number],
groupInput: React.ReactNode[],
refs: Array<React.RefObject<HTMLInputElement>>,
isDynamicInput: boolean,
onChange: (key: string, value: string | number | boolean) => void
): void => {
@ -69,9 +67,6 @@ const handleProperties = (
type = INPUT_TYPES[key];
}
const ref: React.RefObject<HTMLInputElement> = React.useRef<HTMLInputElement>(null);
refs.push(ref);
const isDisabled = ['id', 'parentId'].includes(key);
const input = isDynamicInput
? <input
@ -82,7 +77,6 @@ const handleProperties = (
'
type={type}
id={key}
ref={ref}
value={value}
checked={checked}
onChange={(event) => {
@ -102,7 +96,6 @@ const handleProperties = (
'
type={type}
id={key}
ref={ref}
defaultValue={value}
defaultChecked={checked}
disabled={isDisabled}