65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import * as React from 'react';
|
|
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
|
import { RestoreX, TransformX } from '../../utils/svg';
|
|
import { InputGroup } from '../InputGroup/InputGroup';
|
|
import { TextInputGroup } from '../InputGroup/TextInputGroup';
|
|
import { Text } from '../Text/Text';
|
|
|
|
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={Text({ textId: '@SymbolName' })}
|
|
inputKey='id'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='string'
|
|
value={props.symbol.id.toString()}
|
|
isDisabled={true} />
|
|
<TextInputGroup
|
|
id='displayedText'
|
|
labelText={Text({ textId: '@SymbolDisplayedText' })}
|
|
inputKey='displayedText'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='string'
|
|
value={props.symbol.displayedText}
|
|
onChange={(value) => props.onChange('displayedText', value)} />
|
|
<TextInputGroup
|
|
id='x'
|
|
labelText={Text({ textId: '@SymbolX' })}
|
|
inputKey='x'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='number'
|
|
value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.PositionReference).toString()}
|
|
onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
|
|
<TextInputGroup
|
|
id='height'
|
|
labelText={Text({ textId: '@SymbolHeight' })}
|
|
inputKey='height'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='number'
|
|
min={0}
|
|
value={props.symbol.height.toString()}
|
|
onChange={(value) => props.onChange('height', Number(value))} />
|
|
<TextInputGroup
|
|
id='width'
|
|
labelText={Text({ textId: '@SymbolWidth' })}
|
|
inputKey='width'
|
|
labelClassName=''
|
|
inputClassName=''
|
|
type='number'
|
|
min={0}
|
|
value={props.symbol.width.toString()}
|
|
onChange={(value) => props.onChange('width', Number(value))} />
|
|
</div>
|
|
);
|
|
}
|