add multiselect check box

Author: doomlab

src/core/components/DaisyTheme.tsx

@@ -18,6 +18,11 @@ import {
   schemaRequiresTrueValue,
   descriptionId,
   ariaDescribedByIds,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsDeselectValue,
+  enumOptionsValueForIndex,
+  optionId,
 } from "@rjsf/utils"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
@@ -250,6 +255,63 @@ const MyCheckboxWidget = (props: WidgetProps) => {
   )
 }
 
+const MyCheckboxesWidget = (props: WidgetProps) => {
+  const {
+    id,
+    disabled,
+    options,
+    value,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus = false,
+  } = props
+  const { enumOptions, enumDisabled, emptyValue } = options
+  const checkboxesValues = Array.isArray(value) ? value : [value]
+
+  return (
+    <div className="checkboxes-group" id={id}>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index) => {
+          const checked = enumOptionsIsSelected(option.value, checkboxesValues)
+          const itemDisabled =
+            Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1
+          const disabledCls = disabled || itemDisabled || readonly ? "disabled" : ""
+
+          return (
+            <label key={index} className={`checkboxes-option ${disabledCls}`}>
+              <input
+                type="checkbox"
+                id={optionId(id, index)}
+                name={id}
+                checked={checked}
+                value={String(index)}
+                disabled={disabled || itemDisabled || readonly}
+                autoFocus={autofocus && index === 0}
+                onChange={(event) => {
+                  if (event.target.checked) {
+                    onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions))
+                  } else {
+                    onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions))
+                  }
+                }}
+                onBlur={({ target: { value: v } }) =>
+                  onBlur(id, enumOptionsValueForIndex(v, enumOptions, emptyValue))
+                }
+                onFocus={({ target: { value: v } }) =>
+                  onFocus(id, enumOptionsValueForIndex(v, enumOptions, emptyValue))
+                }
+                aria-describedby={ariaDescribedByIds(id)}
+              />
+              <span>{option.label}</span>
+            </label>
+          )
+        })}
+    </div>
+  )
+}
+
 // create Registry information
 // templates
 const myTemplates: Partial<TemplatesType> = {
@@ -282,6 +344,7 @@ const myWidgets: RegistryWidgetsType = {
   TextWidget: MyTextWidget,
   EmailWidget: MyEmailWidget,
   CheckboxWidget: MyCheckboxWidget,
+  CheckboxesWidget: MyCheckboxesWidget,
 }
 
 // create the overall theme to use on the other page

src/core/styles/index.css

@@ -702,6 +702,23 @@ span.arrow.tooltip-arrow {
   margin-left: 30px;
 }
 
+.rjsf .checkboxes-group {
+  width: 100%;
+}
+
+.rjsf .checkboxes-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 4px 0;
+  cursor: pointer;
+}
+
+.rjsf .checkboxes-option.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .tooltip {
   z-index: 9999; /* A higher value than the modal */
 }

src/formBuilder/CardGeneralParameterInputs.tsx

@@ -59,6 +59,7 @@ export default function CardGeneralParameterInputs({
       "date",
       "time",
       "checkbox",
+      "checkboxes",
       "radio",
       "dropdown",
       "shortAnswer",

src/formBuilder/defaults/defaultInputs.tsx

@@ -145,6 +145,53 @@ function MultipleChoice({
   )
 }
 
+function MultipleChoiceArray({
+  parameters,
+  onChange,
+}: {
+  parameters: CardComponentPropsType
+  onChange: (newParams: CardComponentPropsType) => void
+}) {
+  const items = (parameters.items as any) || {}
+  const enumArray = Array.isArray(items.enum) ? items.enum : []
+  const [elementId] = React.useState(getRandomId())
+
+  return (
+    <div className="card-enum">
+      <h5>Options</h5>
+      <FBCheckbox
+        onChangeValue={() => {
+          const hasNames = Array.isArray(items.enumNames)
+          onChange({
+            ...parameters,
+            items: {
+              ...items,
+              enumNames: hasNames ? null : enumArray.map((val: any) => `${val}`),
+            },
+          })
+        }}
+        isChecked={Array.isArray(items.enumNames)}
+        label="Display different text label than the stored value"
+        id={`${elementId}_different`}
+      />
+      <CardEnumOptions
+        initialValues={enumArray}
+        names={
+          Array.isArray(items.enumNames) ? items.enumNames.map((val: any) => `${val}`) : undefined
+        }
+        showNames={Array.isArray(items.enumNames)}
+        onChange={(newEnum, newEnumNames) =>
+          onChange({
+            ...parameters,
+            items: { ...items, enum: newEnum, enumNames: newEnumNames },
+          })
+        }
+        type="string"
+      />
+    </div>
+  )
+}
+
 const defaultInputs: { [key: string]: FormInput } = {
   dateTime: {
     displayName: "Date-Time",
@@ -195,7 +242,7 @@ const defaultInputs: { [key: string]: FormInput } = {
     modalBody: CardDefaultParameterInputs,
   },
   checkbox: {
-    displayName: "Checkbox",
+    displayName: "Yes / No",
     matchIf: [
       {
         types: ["boolean"],
@@ -207,8 +254,27 @@ const defaultInputs: { [key: string]: FormInput } = {
     cardBody: Checkbox,
     modalBody: CardDefaultParameterInputs,
   },
+  checkboxes: {
+    displayName: "Checkboxes (Multi-select)",
+    matchIf: [
+      {
+        types: ["array"],
+        widget: "checkboxes",
+      },
+    ],
+    defaultDataSchema: {
+      items: { type: "string", enum: [] },
+      uniqueItems: true,
+    },
+    defaultUiSchema: {
+      "ui:widget": "checkboxes",
+    },
+    type: "array",
+    cardBody: MultipleChoiceArray,
+    modalBody: CardDefaultParameterInputs,
+  },
   radio: {
-    displayName: "Radio",
+    displayName: "Radio (Single-select)",
     matchIf: [
       {
         types: ["string", "number", "integer", "array", "boolean", "null"],