52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import * as React from 'react';
|
|
import ContainerProperties from '../../Interfaces/Properties';
|
|
|
|
interface IPropertiesProps {
|
|
properties?: ContainerProperties
|
|
onChange: (key: string, value: string) => void
|
|
}
|
|
|
|
export class Properties extends React.PureComponent<IPropertiesProps> {
|
|
public render(): JSX.Element {
|
|
if (this.props.properties === undefined) {
|
|
return <div></div>;
|
|
}
|
|
|
|
const groupInput: React.ReactNode[] = [];
|
|
Object
|
|
.entries(this.props.properties)
|
|
.forEach((pair) => this.handleProperties(pair, groupInput));
|
|
|
|
return (
|
|
<div className='p-3 bg-slate-200 h-3/5 overflow-y-auto'>
|
|
{ groupInput }
|
|
</div>
|
|
);
|
|
}
|
|
|
|
public handleProperties = (
|
|
[key, value]: [string, string | number],
|
|
groupInput: React.ReactNode[]
|
|
): void => {
|
|
const id = `property-${key}`;
|
|
const type = 'text';
|
|
const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
|
|
groupInput.push(
|
|
<div key={id} className='mt-4'>
|
|
<label className='text-sm font-medium text-gray-800' htmlFor={id}>{key}</label>
|
|
<input
|
|
className='text-base font-medium transition-all text-gray-800 mt-1 block w-full 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
|
|
'
|
|
type={type}
|
|
id={id}
|
|
value={value}
|
|
onChange={(event) => this.props.onChange(key, event.target.value)}
|
|
disabled={isDisabled}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
}
|