Give CheckboxGroup its own custom event handler (fix #1998)

VulcanJS · Jun 13, 2018 · 587df75 · 587df75
1 parent 55f3e10
commit 587df75
Showing 1 changed file with 21 additions and 3 deletions.
diff --git a/packages/vulcan-ui-bootstrap/lib/components/forms/Checkboxgroup.jsx b/packages/vulcan-ui-bootstrap/lib/components/forms/Checkboxgroup.jsx
@@ -1,8 +1,26 @@
 import React from 'react';
-import { CheckboxGroup } from 'formsy-react-components';
+import { Checkbox } from 'formsy-react-components';
 import { registerComponent } from 'meteor/vulcan:core';
 
-const CheckboxGroupComponent = ({refFunction, inputProperties}) => 
-  <CheckboxGroup {...inputProperties} ref={refFunction} />;
+// note: treat checkbox group the same as a nested component, using `path`
+const CheckboxGroupComponent = ({ refFunction, path, value, updateCurrentValues, inputProperties }) =>
+  inputProperties.options.map((option, i) => (
+    <Checkbox
+      key={i}
+      {...inputProperties}
+      label={option.label}
+      value={value.includes(option.value)}
+      ref={refFunction}
+      onChange={(name, isChecked) => {
+        // give each individual checkbox its own path
+        const checkboxPath = `${path}.${i}`;
+        if (isChecked) {
+          updateCurrentValues({ [checkboxPath]: option.value });
+        } else {
+          updateCurrentValues({ [checkboxPath]: null });
+        }
+      }}
+    />
+  ));
 
 registerComponent('FormComponentCheckboxGroup', CheckboxGroupComponent);