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

Set input group in orange when modified but not applied

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-13 17:52:36 +02:00
parent a9831b6b7f
commit e3f57773d7
1 changed files with 3 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/Components/InputGroup/TextInputGroup.tsx
View file

@ -1,5 +1,4 @@
import * as React from 'react'; import * as React from 'react';
import { Properties } from '../ContainerProperties/ContainerProperties';
interface ITextInputGroupProps { interface ITextInputGroupProps {
labelKey?: string labelKey?: string
@ -36,6 +35,8 @@ export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
} }
} }
const warningClass = props.value !== value ? 'focus:border-orange-200 border-orange-200 focus:ring-orange-200 ring-orange-200' : '';
return <> return <>
<label <label
key={props.labelKey} key={props.labelKey}
@ -47,7 +48,7 @@ export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
<input <input
key={props.inputKey} key={props.inputKey}
id={props.inputKey} id={props.inputKey}
className={`${className} ${props.inputClassName}`} className={`${className} ${props.inputClassName} ${warningClass}`}
type={props.type} type={props.type}
value={value} value={value}
onChange={(event) => setValue(event.target.value)} onChange={(event) => setValue(event.target.value)}