49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { optionchangewrapper } from "utils/optionchangewrapper";
|
||
|
|
|
||
|
|
class CheckboxAndRadioWrapper extends React.Component {
|
||
|
|
optionChange = (option, optionName, type) => {
|
||
|
|
const optionTypePicker = {
|
||
|
|
radio: option.target.value,
|
||
|
|
checkbox: option.target.checked
|
||
|
|
};
|
||
|
|
const { onOptionChanged } = this.props;
|
||
|
|
onOptionChanged({
|
||
|
|
optionName,
|
||
|
|
optionValue: optionTypePicker[type]
|
||
|
|
});
|
||
|
|
};
|
||
|
|
isChecked = (type, value, optionName) => {
|
||
|
|
const { options } = this.props;
|
||
|
|
return type === "checkbox"
|
||
|
|
? value
|
||
|
|
: options.hasOwnProperty(optionName) &&
|
||
|
|
options[optionName] === String(value);
|
||
|
|
};
|
||
|
|
renderElements = (elements, componentName) => {
|
||
|
|
return elements.map(({ type, value, name, optionName } = {}) => (
|
||
|
|
<label key={name + type}>
|
||
|
|
<input
|
||
|
|
name={type === "radio" ? `${componentName}-radio` : ""}
|
||
|
|
type={type}
|
||
|
|
value={value}
|
||
|
|
checked={this.isChecked(type, value, optionName)}
|
||
|
|
onChange={option => this.optionChange(option, optionName, type)}
|
||
|
|
/>
|
||
|
|
{name}
|
||
|
|
</label>
|
||
|
|
));
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { elements, componentName } = this.props;
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<span>{componentName}</span>
|
||
|
|
{this.renderElements(elements, componentName)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
export default optionchangewrapper(CheckboxAndRadioWrapper);
|