feat: add support for multiple checkboxes

bettyblocks · May 26, 2020 · 0facaa8 · 0facaa8
1 parent 375c59a
commit 0facaa8
Show file tree

Hide file tree

Showing 2 changed files with 187 additions and 29 deletions.
diff --git a/src/components/checkbox.js b/src/components/checkbox.js
@@ -16,8 +16,17 @@
       actionInputId,
       property,
       propertyLabelOverride,
+      row,
+      checkboxOptions,
+      model,
+      optionType,
+      labelProp,
+      valueProp,
+      margin,
+      filter,
     } = options;
-    const { useText, getActionInput, getProperty } = B;
+
+    const { useText, getActionInput, getProperty, GetAll } = B;
     const isDev = B.env === 'dev';
     const actionInput = getActionInput(actionInputId);
 
@@ -26,6 +35,8 @@
     const componentHelperText = useText(helperText);
     const propLabelOverride = useText(propertyLabelOverride);
     const { label: propertyLabelText } = getProperty(property) || {};
+    const labelProperty = getProperty(labelProp);
+    const valueProperty = getProperty(valueProp);
     const [checked, setChecked] = useState(componentChecked === 'true');
 
     const propertyLabel = propLabelOverride || propertyLabelText;
@@ -36,6 +47,8 @@
       FormControlLabel,
       FormControl,
       FormHelperText,
+      FormGroup,
+      FormLabel,
     } = window.MaterialUI.Core;
 
     const handleChange = evt => {
@@ -48,25 +61,58 @@
       }
     }, [isDev, defaultValue]);
 
-    const Checkbox = (
-      <MUICheckbox
+    const renderCheckbox = (checkboxLabel, checkboxValue) => (
+      <FormControlLabel
+        control={<MUICheckbox tabIndex={isDev && -1} size={size} />}
+        label={checkboxLabel}
+        labelPlacement={position}
         checked={checked}
         onChange={handleChange}
-        name={actionInput && actionInput.name}
         disabled={disabled}
-        size={size}
-        tabIndex={isDev && -1}
-        value="on"
+        name={actionInput && actionInput.name}
+        value={checkboxValue}
+        // value="on"
       />
     );
 
+    const checkboxData = (checkboxOptions || '').split('\n');
+    let Checkboxes = checkboxData.map(opt => renderCheckbox(opt, opt));
+
+    if (optionType === 'data') {
+      Checkboxes = renderCheckbox('Placeholder', false);
+      if (!isDev) {
+        Checkboxes = (
+          <GetAll modelId={model} filter={filter} skip={0} take={50}>
+            {({ loading, error: err, data }) => {
+              if (loading) return <span>Loading...</span>;
+
+              if (err) {
+                return <span>Something went wrong: {err.message} :(</span>;
+              }
+
+              const { results } = data;
+              return results.map(item =>
+                renderCheckbox(
+                  item[labelProperty.name],
+                  item[valueProperty.name],
+                ),
+              );
+            }}
+          </GetAll>
+        );
+      }
+    }
+
     const Control = (
-      <FormControl required={required} error={error}>
-        <FormControlLabel
-          control={Checkbox}
-          label={labelText}
-          labelPlacement={position}
-        />
+      <FormControl
+        className={classes.formControl}
+        margin={margin}
+        component="fieldset"
+        required={required}
+        error={error}
+      >
+        {!!labelText && <FormLabel component="legend">{labelText}</FormLabel>}
+        <FormGroup row={row}>{Checkboxes}</FormGroup>
         {!!componentHelperText && (
           <FormHelperText>{componentHelperText}</FormHelperText>
         )}
@@ -80,5 +126,8 @@
         pointerEvents: 'none',
       },
     },
+    formControl: {
+      display: 'block',
+    },
   }),
 }))();
diff --git a/src/prefabs/checkbox.js b/src/prefabs/checkbox.js
@@ -47,22 +47,6 @@
           key: 'defaultValue',
           type: 'VARIABLE',
         },
-        {
-          label: 'Label Position',
-          key: 'position',
-          value: 'end',
-          type: 'CUSTOM',
-          configuration: {
-            as: 'BUTTONGROUP',
-            dataType: 'string',
-            allowedInput: [
-              { name: 'Start', value: 'start' },
-              { name: 'End', value: 'end' },
-              { name: 'Top', value: 'top' },
-              { name: 'Bottom', value: 'bottom' },
-            ],
-          },
-        },
         {
           value: '',
           label: 'Input',
@@ -93,6 +77,116 @@
           key: 'helperText',
           type: 'VARIABLE',
         },
+        {
+          label: 'Label Position',
+          key: 'position',
+          value: 'end',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Start', value: 'start' },
+              { name: 'End', value: 'end' },
+              { name: 'Top', value: 'top' },
+              { name: 'Bottom', value: 'bottom' },
+            ],
+          },
+        },
+        {
+          label: 'Option type',
+          key: 'optionType',
+          value: 'static',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'Static', value: 'static' },
+              { name: 'Data', value: 'data' },
+            ],
+          },
+        },
+        {
+          type: 'MODEL',
+          label: 'Model',
+          key: 'model',
+          value: '',
+          configuration: {
+            condition: {
+              type: 'SHOW',
+              option: 'optionType',
+              comparator: 'EQ',
+              value: 'data',
+            },
+          },
+        },
+        {
+          value: {},
+          label: 'Filter',
+          key: 'filter',
+          type: 'FILTER',
+          configuration: {
+            dependsOn: 'model',
+            condition: {
+              type: 'SHOW',
+              option: 'optionType',
+              comparator: 'EQ',
+              value: 'data',
+            },
+          },
+        },
+        {
+          type: 'PROPERTY',
+          label: 'Label Property',
+          key: 'labelProp',
+          value: '',
+          configuration: {
+            dependsOn: 'model',
+            condition: {
+              type: 'SHOW',
+              option: 'optionType',
+              comparator: 'EQ',
+              value: 'data',
+            },
+          },
+        },
+        {
+          type: 'PROPERTY',
+          label: 'Value Property',
+          key: 'valueProp',
+          value: '',
+          configuration: {
+            dependsOn: 'model',
+            condition: {
+              type: 'SHOW',
+              option: 'optionType',
+              comparator: 'EQ',
+              value: 'data',
+            },
+          },
+        },
+        {
+          type: 'TEXT',
+          label: 'Options',
+          key: 'checkboxOptions',
+          value: 'Option 1\nOption 2\nOption 3',
+          configuration: {
+            as: 'MULTILINE',
+            condition: {
+              type: 'SHOW',
+              option: 'optionType',
+              comparator: 'EQ',
+              value: 'static',
+            },
+          },
+        },
+        {
+          type: 'TOGGLE',
+          label: 'Row',
+          key: 'row',
+          value: true,
+        },
         {
           label: 'Size',
           key: 'size',
@@ -107,6 +201,21 @@
             ],
           },
         },
+        {
+          label: 'Margin',
+          key: 'margin',
+          value: 'normal',
+          type: 'CUSTOM',
+          configuration: {
+            as: 'BUTTONGROUP',
+            dataType: 'string',
+            allowedInput: [
+              { name: 'None', value: 'none' },
+              { name: 'Dense', value: 'dense' },
+              { name: 'Normal', value: 'normal' },
+            ],
+          },
+        },
       ],
       descendants: [],
     },