Unrefactor Properties form to allow more freedom on the input types and form (#32)
All checks were successful
continuous-integration/drone/push Build is passing

- The css style is now in IProperties.Style again.
- Forms are divided in DynamicForm and StaticForm
- Faster because less logic
- Add RadioGroupButton
- Add InputGroup
- Fix Children Dimensions not using x for their origin

Co-authored-by: Eric NGUYEN <enguyen@techform.fr>
Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/32
This commit is contained in:
Siklos 2022-08-16 08:57:54 -04:00
parent 3d7baafc17
commit 5f8e011bc6
19 changed files with 529 additions and 134 deletions

View file

@ -0,0 +1,48 @@
import * as React from 'react';
interface IInputGroupProps {
labelKey?: string
labelText: string
inputKey: string
labelClassName: string
inputClassName: string
type: string
value?: string
checked?: boolean
defaultValue?: string
defaultChecked?: boolean
isDisabled?: boolean
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
}
const className = `
w-full
text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
bg-white border-2 border-white rounded-lg placeholder-gray-800
focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none`;
export const InputGroup: React.FunctionComponent<IInputGroupProps> = (props) => {
return <>
<label
key={props.labelKey}
className={`mt-4 text-xs font-medium text-gray-800 ${props.labelClassName}`}
htmlFor={props.inputKey}
>
{ props.labelText }
</label>
<input
key={props.inputKey}
id={props.inputKey}
className={`${className} ${props.inputClassName}`}
type={props.type}
value={props.value}
defaultValue={props.defaultValue}
checked={props.checked}
defaultChecked={props.defaultChecked}
onChange={props.onChange}
disabled={props.isDisabled}
/>
</>;
};