51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
import * as React from 'react';
|
|
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|
import { RestoreX, TransformX } from '../../utils/svg';
|
|
import { InputGroup } from '../InputGroup/InputGroup';
|
|
|
|
interface ISymbolFormProps {
|
|
symbol: ISymbolModel
|
|
symbols: Map<string, ISymbolModel>
|
|
onChange: (key: string, value: string | number | boolean) => void
|
|
}
|
|
|
|
export function SymbolForm(props: ISymbolFormProps): JSX.Element {
|
|
return (
|
|
<div className='grid grid-cols-2 gap-y-4'>
|
|
<InputGroup
|
|
labelText='Name'
|
|
inputKey='id'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='string'
|
|
value={props.symbol.id.toString()}
|
|
isDisabled={true} />
|
|
<InputGroup
|
|
labelText='x'
|
|
inputKey='x'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='number'
|
|
value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.XPositionReference).toString()}
|
|
onChange={(event) => props.onChange('x', RestoreX(Number(event.target.value), props.symbol.width, props.symbol.config.XPositionReference))} />
|
|
<InputGroup
|
|
labelText='Height'
|
|
inputKey='height'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='number'
|
|
min={0}
|
|
value={props.symbol.height.toString()}
|
|
onChange={(event) => props.onChange('height', Number(event.target.value))} />
|
|
<InputGroup
|
|
labelText='Width'
|
|
inputKey='width'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='number'
|
|
min={0}
|
|
value={props.symbol.width.toString()}
|
|
onChange={(event) => props.onChange('width', Number(event.target.value))} />
|
|
</div>
|
|
);
|
|
}
|