41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
|
|
interface PropertyEditorsProps {
|
|
properties: Record<string, any>;
|
|
onChange: (key: string, value: any) => void;
|
|
}
|
|
|
|
export const PropertyEditors: React.FC<PropertyEditorsProps> = ({
|
|
properties,
|
|
onChange,
|
|
}) => {
|
|
return (
|
|
<div data-testid="property-editors" className="property-editors">
|
|
{Object.entries(properties).map(([key, value]) => (
|
|
<div key={key} className="property-editor">
|
|
<label>{key}</label>
|
|
{typeof value === 'boolean' ? (
|
|
<input
|
|
type="checkbox"
|
|
checked={value}
|
|
onChange={(e) => onChange(key, e.target.checked)}
|
|
/>
|
|
) : typeof value === 'number' ? (
|
|
<input
|
|
type="number"
|
|
value={value}
|
|
onChange={(e) => onChange(key, Number(e.target.value))}
|
|
/>
|
|
) : (
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => onChange(key, e.target.value)}
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|