Implement pseudo dynamic input
This commit is contained in:
Eric NGUYEN
parent
6407510811
commit
a9831b6b7f
2 changed files with 85 additions and 25 deletions
|
|
@ -7,6 +7,7 @@ import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|||
import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
|
||||
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, TransformX } from '../../utils/svg';
|
||||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { TextInputGroup } from '../InputGroup/TextInputGroup';
|
||||
import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
|
||||
import { Select } from '../Select/Select';
|
||||
|
||||
|
|
@ -20,7 +21,7 @@ function GetCSSInputs(properties: IContainerProperties,
|
|||
onChange: (key: string, value: string | number | boolean, type: PropertyType) => void): JSX.Element[] {
|
||||
const groupInput: JSX.Element[] = [];
|
||||
for (const key in properties.style) {
|
||||
groupInput.push(<InputGroup
|
||||
groupInput.push(<TextInputGroup
|
||||
key={key}
|
||||
labelText={key}
|
||||
inputKey={key}
|
||||
|
|
@ -28,7 +29,7 @@ function GetCSSInputs(properties: IContainerProperties,
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={(properties.style as any)[key]}
|
||||
onChange={(event) => onChange(key, event.target.value, PropertyType.Style)} />);
|
||||
onChange={(value) => onChange(key, value, PropertyType.Style)} />);
|
||||
}
|
||||
return groupInput;
|
||||
}
|
||||
|
|
@ -60,15 +61,15 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='string'
|
||||
value={props.properties.type}
|
||||
isDisabled={true} />
|
||||
<InputGroup
|
||||
<TextInputGroup
|
||||
labelText='Displayed text'
|
||||
inputKey='displayedText'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.displayedText?.toString()}
|
||||
onChange={(event) => props.onChange('displayedText', event.target.value)} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('displayedText', value)} />
|
||||
<TextInputGroup
|
||||
labelText='x'
|
||||
inputKey='x'
|
||||
labelClassName=''
|
||||
|
|
@ -76,26 +77,26 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
isDisabled={props.properties.linkedSymbolId !== ''}
|
||||
value={TransformX(RemoveXMargin(props.properties.x, props.properties.margin.left), props.properties.width, props.properties.xPositionReference).toString()}
|
||||
onChange={(event) => props.onChange(
|
||||
onChange={(value) => props.onChange(
|
||||
'x',
|
||||
ApplyXMargin(
|
||||
RestoreX(
|
||||
Number(event.target.value),
|
||||
Number(value),
|
||||
props.properties.width,
|
||||
props.properties.xPositionReference
|
||||
),
|
||||
props.properties.margin.left
|
||||
)
|
||||
)} />
|
||||
<InputGroup
|
||||
<TextInputGroup
|
||||
labelText='y'
|
||||
inputKey='y'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
value={(props.properties.y - (props.properties.margin?.top ?? 0)).toString()}
|
||||
onChange={(event) => props.onChange('y', Number(event.target.value) + (props.properties.margin?.top ?? 0))} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('y', Number(value) + (props.properties.margin?.top ?? 0))} />
|
||||
<TextInputGroup
|
||||
labelText='Minimum width'
|
||||
inputKey='minWidth'
|
||||
labelClassName=''
|
||||
|
|
@ -103,8 +104,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.minWidth.toString()}
|
||||
onChange={(event) => props.onChange('minWidth', Number(event.target.value))} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('minWidth', Number(value))} />
|
||||
<TextInputGroup
|
||||
labelText='Maximum width'
|
||||
inputKey='maxWidth'
|
||||
labelClassName=''
|
||||
|
|
@ -112,8 +113,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.maxWidth.toString()}
|
||||
onChange={(event) => props.onChange('maxWidth', Number(event.target.value))} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('maxWidth', Number(value))} />
|
||||
<TextInputGroup
|
||||
labelText='Width'
|
||||
inputKey='width'
|
||||
labelClassName=''
|
||||
|
|
@ -122,9 +123,9 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
min={props.properties.minWidth}
|
||||
max={props.properties.maxWidth}
|
||||
value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
|
||||
onChange={(event) => props.onChange('width', ApplyWidthMargin(Number(event.target.value), props.properties.margin.left, props.properties.margin.right))}
|
||||
onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
|
||||
isDisabled={props.properties.isFlex} />
|
||||
<InputGroup
|
||||
<TextInputGroup
|
||||
labelText='Height'
|
||||
inputKey='height'
|
||||
labelClassName=''
|
||||
|
|
@ -132,8 +133,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.height + (props.properties.margin?.top ?? 0) + (props.properties.margin?.bottom ?? 0)).toString()}
|
||||
onChange={(event) => props.onChange('height', Number(event.target.value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('height', Number(value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))} />
|
||||
<TextInputGroup
|
||||
labelText='Margin left'
|
||||
inputKey='left'
|
||||
labelClassName=''
|
||||
|
|
@ -141,8 +142,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.left ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('left', Number(event.target.value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)} />
|
||||
<TextInputGroup
|
||||
labelText='Margin bottom'
|
||||
inputKey='bottom'
|
||||
labelClassName=''
|
||||
|
|
@ -150,8 +151,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.bottom ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('bottom', Number(event.target.value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)} />
|
||||
<TextInputGroup
|
||||
labelText='Margin top'
|
||||
inputKey='top'
|
||||
labelClassName=''
|
||||
|
|
@ -159,8 +160,8 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.top ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('top', Number(event.target.value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)} />
|
||||
<TextInputGroup
|
||||
labelText='Margin right'
|
||||
inputKey='right'
|
||||
labelClassName=''
|
||||
|
|
@ -168,7 +169,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.right ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('right', Number(event.target.value), PropertyType.Margin)} />
|
||||
onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)} />
|
||||
<InputGroup
|
||||
labelText='Flex'
|
||||
inputKey='isFlex'
|
||||
|
|
|
|||
59
src/Components/InputGroup/TextInputGroup.tsx
Normal file
59
src/Components/InputGroup/TextInputGroup.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import * as React from 'react';
|
||||
import { Properties } from '../ContainerProperties/ContainerProperties';
|
||||
|
||||
interface ITextInputGroupProps {
|
||||
labelKey?: string
|
||||
labelText: string
|
||||
inputKey: string
|
||||
labelClassName: string
|
||||
inputClassName: string
|
||||
type: string
|
||||
value: string
|
||||
defaultValue?: string
|
||||
min?: number
|
||||
max?: number
|
||||
isDisabled?: boolean
|
||||
onChange: (newValue: string) => void
|
||||
}
|
||||
|
||||
const className = 'input-group';
|
||||
|
||||
export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
|
||||
const [value, setValue] = React.useState(props.value);
|
||||
|
||||
React.useEffect(() => {
|
||||
setValue(props.value);
|
||||
}, [props.value]);
|
||||
|
||||
function OnKeyUp(event: React.KeyboardEvent): void {
|
||||
switch (event.key) {
|
||||
case 'Enter':
|
||||
props.onChange(value);
|
||||
break;
|
||||
case 'Escape':
|
||||
setValue(props.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
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={value}
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
onKeyUp={OnKeyUp}
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
disabled={props.isDisabled} />
|
||||
</>;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue