2017-08-19 10:41:08 +09:00
|
|
|
import React from 'react';
|
2018-06-13 19:31:29 +09:00
|
|
|
import { Checkbox } from 'formsy-react-components';
|
2017-08-19 10:41:08 +09:00
|
|
|
import { registerComponent } from 'meteor/vulcan:core';
|
2018-06-25 08:16:22 +02:00
|
|
|
import without from 'lodash/without';
|
2017-08-19 10:41:08 +09:00
|
|
|
|
2018-06-13 19:31:29 +09:00
|
|
|
// note: treat checkbox group the same as a nested component, using `path`
|
2018-06-24 09:05:54 +02:00
|
|
|
const CheckboxGroupComponent = ({ refFunction, label, path, value, updateCurrentValues, inputProperties }) => (
|
|
|
|
<div className="form-group row">
|
|
|
|
<label className="control-label col-sm-3">{label}</label>
|
|
|
|
<div className="col-sm-9">
|
2018-06-20 07:45:04 +09:00
|
|
|
{inputProperties.options.map((option, i) => (
|
|
|
|
<Checkbox
|
2018-06-24 09:05:54 +02:00
|
|
|
layout="elementOnly"
|
2018-06-20 07:45:04 +09:00
|
|
|
key={i}
|
|
|
|
{...inputProperties}
|
|
|
|
label={option.label}
|
|
|
|
value={value.includes(option.value)}
|
|
|
|
ref={refFunction}
|
|
|
|
onChange={(name, isChecked) => {
|
2018-06-25 08:16:22 +02:00
|
|
|
const newValue = isChecked ? [...value, option.value] : without(value, option.value);
|
|
|
|
updateCurrentValues({ [path]: newValue });
|
2018-06-20 07:45:04 +09:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
))}
|
2018-06-24 09:05:54 +02:00
|
|
|
</div>
|
2018-06-20 07:45:04 +09:00
|
|
|
</div>
|
|
|
|
);
|
2017-08-19 10:41:08 +09:00
|
|
|
|
2018-05-10 10:03:59 -04:00
|
|
|
registerComponent('FormComponentCheckboxGroup', CheckboxGroupComponent);
|