PropertyFactory

Source

index.js
import React from 'react';

import CellProperty from '../CellProperty';
import CheckboxProperty from '../CheckboxProperty';
import ColorProperty from '../ColorProperty';
import CollapsiblePropertyGroup from '../CollapsiblePropertyGroup';
import EnumProperty from '../EnumProperty';
import MapProperty from '../MapProperty';
import SliderProperty from '../SliderProperty';
import PropertyGroup from '../PropertyGroup';

/* eslint-disable react/display-name */
/* eslint-disable react/no-multi-comp */
/* eslint-disable max-len */
const factoryMapping = {
Cell: (prop, viewData, onChange) => (
<CellProperty
key={prop.data.id}
data={prop.data}
ui={prop.ui}
viewData={viewData}
show={prop.show}
onChange={onChange || prop.onChange}
/>
),
Slider: (prop, viewData, onChange) => (
<SliderProperty
key={prop.data.id}
data={prop.data}
ui={prop.ui}
viewData={viewData}
show={prop.show}
onChange={onChange || prop.onChange}
/>
),
Enum: (prop, viewData, onChange) => (
<EnumProperty
key={prop.data.id}
data={prop.data}
ui={prop.ui}
viewData={viewData}
show={prop.show}
onChange={onChange || prop.onChange}
/>
),
Checkbox: (prop, viewData, onChange) => (
<CheckboxProperty
key={prop.data.id}
data={prop.data}
ui={prop.ui}
viewData={viewData}
show={prop.show}
onChange={onChange || prop.onChange}
/>
),
Map: (prop, viewData, onChange) => (
<MapProperty
key={prop.data.id}
data={prop.data}
ui={prop.ui}
viewData={viewData}
show={prop.show}
onChange={onChange || prop.onChange}
/>
),
Color: (prop, viewData, onChange) => (
<ColorProperty
key={prop.data.id}
data={prop.data}
ui={prop.ui}
viewData={viewData}
show={prop.show}
onChange={onChange || prop.onChange}
/>
),
Propertygroup: (prop, viewData, onChange) => (
<PropertyGroup
key={prop.data.id}
prop={prop}
viewData={viewData}
show={prop.show}
onChange={onChange}
/>
),
Proxyeditorpropertywidget: (prop, viewData, onChange) => (
<CollapsiblePropertyGroup
key={prop.data.id}
prop={prop}
viewData={viewData}
show={prop.show}
onChange={onChange}
/>
),
};

/* eslint-enable react/display-name */
/* eslint-enable react/no-multi-comp */
/* eslint-enable max-len */

function capitalizeOld(str) {
return str[0].toUpperCase() + str.substr(1).toLowerCase();
}

function capitalize(str) {
return str[0].toUpperCase() + str.substr(1);
}

export default function render(prop, vd, onChange) {
const fn =
factoryMapping[capitalize(prop.ui.propType)] ||
factoryMapping[capitalizeOld(prop.ui.propType)];
if (fn) {
return fn(prop, vd, onChange);
}
return null;
}

render.updateWidgetMapping = (name, fn) => {
factoryMapping[name] = fn;
};