353f461f4b
- [x] Implement drag drop to create an element at a specific index - Add Swap behavrior - Implement max contraints with simplex ~~- [ ] Implement drag drop to swap two container that flex~~ - Fixes tries number for simplex it can now go up to 2 * number of containers - Fixes flex calling another flex behavior when not needed (remember that flex behavior is the only behavior that needs to communicate with siblings) - Fix max width being ignored in input group
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
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
|
|
min?: number
|
|
max?: number
|
|
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 function InputGroup(props: IInputGroupProps): JSX.Element {
|
|
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}
|
|
min={props.min}
|
|
max={props.max}
|
|
disabled={props.isDisabled} />
|
|
</>;
|
|
}
|