feat: add WidgetCheckBoxes

demo/src/samples/widgets.tsx

@@ -1,4 +1,4 @@
-import { Sample } from './Sample';
+import { Sample } from './Sample'
 
 const widgets: Sample = {
   schema: {
@@ -146,19 +146,19 @@ const widgets: Sample = {
         onChange,
         options,
       }: {
-        value: any;
-        onChange: (value: any) => void;
-        options: { backgroundColor: string };
+        value: any
+        onChange: (value: any) => void
+        options: { backgroundColor: string }
       }) => {
-        const { backgroundColor } = options;
+        const { backgroundColor } = options
         return (
           <input
-            className='form-control'
+            className="custom-classname"
             onChange={(event) => onChange(event.target.value)}
             style={{ backgroundColor }}
             value={value}
           />
-        );
+        )
       },
       'ui:options': {
         backgroundColor: 'yellow',
@@ -170,14 +170,17 @@ const widgets: Sample = {
         onChange,
         options,
       }: {
-        value: any;
-        onChange: (value: any) => void;
-        options: { enumOptions: { label: string; value: any }[]; backgroundColor: string };
+        value: any
+        onChange: (value: any) => void
+        options: {
+          enumOptions: { label: string; value: any }[]
+          backgroundColor: string
+        }
       }) => {
-        const { enumOptions, backgroundColor } = options;
+        const { enumOptions, backgroundColor } = options
         return (
           <select
-            className='form-control'
+            className="form-control"
             style={{ backgroundColor }}
             value={value}
             onChange={(event) => onChange(event.target.value)}
@@ -187,10 +190,10 @@ const widgets: Sample = {
                 <option key={i} value={value}>
                   {label}
                 </option>
-              );
+              )
             })}
           </select>
-        );
+        )
       },
       'ui:options': {
         backgroundColor: 'pink',
@@ -213,6 +216,6 @@ const widgets: Sample = {
     },
     secret: "I'm a hidden string.",
   },
-};
+}
 
-export default widgets;
+export default widgets

src/components/TemplateArrayField.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { FrIconClassName, RiIconClassName } from '@codegouvfr/react-dsfr'
 import Button from '@codegouvfr/react-dsfr/Button'
 import Tabs from '@codegouvfr/react-dsfr/Tabs'
@@ -30,59 +30,69 @@ export default function ({
   items,
   canAdd,
   onAddClick,
+  registry,
 }: ArrayFieldTemplateProps & { uiSchema?: UiSchemaDSFR }) {
+  const [selectedTabId, setSelectedTabId] = useState('tab0')
   const tabLabel = uiSchema?.['ui:tabLabel'] ?? 'Element'
   const removeIcon = uiSchema?.['ui:removeIcon'] ?? 'fr-icon-delete-line'
   const addIcon = uiSchema?.['ui:addIcon'] ?? 'fr-icon-add-circle-line'
-  console.log('items', items)
+
+  // ensure no exception when last selected tab has been destroyed
+  const selectedIndex = Math.min(
+    items.length - 1,
+    parseInt(selectedTabId.replace(/^tab(\d+)$/, '$1')),
+  )
+
+  const tabContent =
+    (items.length && (
+      <>
+        <Button
+          type="button"
+          iconId={removeIcon}
+          onClick={(e) => {
+            items[selectedIndex].onDropIndexClick(selectedIndex)()
+          }}
+          size="small"
+          priority="secondary"
+        >
+          Supprimer
+        </Button>
+        {items[selectedIndex].children}
+      </>
+    )) ||
+    null
+
+  const onTabChange = (id: string) => {
+    if (id === 'add') {
+      onAddClick()
+      setSelectedTabId(`tab${items.length}`)
+      return
+    }
+    setSelectedTabId(id)
+  }
+
   return (
     <div className="form-group field">
       <div className="fr-input-group">
         <label className="fr-label">{title}</label>
         <div className="fr-input-wrap">
           <Tabs
+            onTabChange={onTabChange}
+            selectedTabId={selectedTabId}
             tabs={items
               .map((element) => ({
                 label: `${tabLabel} ${element.index + 1}`,
-                content: (
-                  <>
-                    <Button
-                      type="button"
-                      iconId={removeIcon}
-                      onClick={(e) => {
-                        console.log('io', element)
-                        element.onDropIndexClick(element.index)
-                      }}
-                      size="small"
-                      priority="secondary"
-                    >
-                      Supprimer
-                    </Button>
-                    {element.children}
-                  </>
-                ),
+                tabId: `tab${element.index}`,
               }))
               .concat([
                 {
                   label: `Ajouter`,
-                  content: (
-                    <>
-                      {canAdd && (
-                        <Button
-                          type="button"
-                          iconId={addIcon}
-                          onClick={onAddClick}
-                          size="small"
-                          priority="secondary"
-                        >
-                          Ajouter
-                        </Button>
-                      )}
-                    </>
-                  ),
+                  tabId: 'add',
                 },
               ])}
-          />
+          >
+            {selectedTabId !== 'add' && tabContent}
+          </Tabs>
         </div>
       </div>
     </div>

src/components/WidgetCheckBoxes.tsx

@@ -0,0 +1,109 @@
+import {
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsValueForIndex,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils'
+import Checkbox from '@codegouvfr/react-dsfr/Checkbox'
+import LabelWithHelp from './LabelWithHelp'
+import { ChangeEvent, FocusEvent } from 'react'
+
+//export default function (props: WidgetProps) {
+
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  uiSchema,
+  schema,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, inline, emptyValue } = options
+  const checkboxesValues = Array.isArray(value) ? value : [value]
+
+  const _onChange =
+    (index: number) =>
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
+      if (checked) {
+        onChange(
+          enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions),
+        )
+      } else {
+        onChange(
+          enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions),
+        )
+      }
+    }
+
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(
+      id,
+      enumOptionsValueForIndex<S>(
+        target && target.value,
+        enumOptions,
+        emptyValue,
+      ),
+    )
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(
+      id,
+      enumOptionsValueForIndex<S>(
+        target && target.value,
+        enumOptions,
+        emptyValue,
+      ),
+    )
+
+  return (
+    <div style={{ marginTop: '1rem', marginBottom: '-1rem' }}>
+      <Checkbox
+        options={
+          (Array.isArray(enumOptions) &&
+            enumOptions.map((option, index: number) => {
+              const checked = enumOptionsIsSelected<S>(
+                option.value,
+                checkboxesValues,
+              )
+              const itemDisabled =
+                Array.isArray(enumDisabled) &&
+                enumDisabled.indexOf(option.value) !== -1
+
+              return {
+                label: (
+                  <LabelWithHelp
+                    helpText={
+                      uiSchema !== undefined ? uiSchema['ui:help'] : undefined
+                    }
+                  >
+                    {option.label + (required ? '*' : '')}
+                  </LabelWithHelp>
+                ),
+                nativeInputProps: {
+                  checked,
+                  disabled: itemDisabled,
+                  onChange: _onChange(index),
+                  onBlur: _onBlur,
+                  onFocus: _onFocus,
+                },
+              }
+            })) ||
+          []
+        }
+      />
+    </div>
+  )
+}

src/components/WidgetRadio.tsx

@@ -1,5 +1,6 @@
 import { ChangeEvent, FocusEvent } from 'react'
 import {
+  enumOptionsIsSelected,
   enumOptionsValueForIndex,
   FormContextType,
   RJSFSchema,
@@ -37,28 +38,42 @@ export default function RadioWidget<
   const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) =>
     onFocus(id, enumOptionsValueForIndex<S>(value, enumOptions, emptyValue))
 
+  const radioValues = Array.isArray(value) ? value : [value]
   const inline = Boolean(options && options.inline)
-
+  console.log(value, options)
   return (
     <div style={{ marginTop: '1rem', marginBottom: '-1rem' }}>
       <RadioButtons
+        orientation={inline ? 'horizontal' : 'vertical'}
         options={
           (options &&
-            options.enumOptions?.map((option) => ({
-              label: (
-                <LabelWithHelp
-                  helpText={
-                    uiSchema !== undefined ? uiSchema['ui:help'] : undefined
-                  }
-                >
-                  {option.label}
-                </LabelWithHelp>
-              ),
-              nativeInputProps: {
-                checked: value === option.value,
-                onChange: (e) => onChange(option.value),
-              },
-            }))) ||
+            options.enumOptions?.map((option) => {
+              const checked = enumOptionsIsSelected<S>(
+                option.value,
+                radioValues,
+              )
+              const itemDisabled =
+                Array.isArray(enumDisabled) &&
+                enumDisabled.indexOf(option.value) !== -1
+
+              return {
+                label: (
+                  <LabelWithHelp
+                    helpText={
+                      uiSchema !== undefined ? uiSchema['ui:help'] : undefined
+                    }
+                  >
+                    {option.label}
+                  </LabelWithHelp>
+                ),
+                nativeInputProps: {
+                  checked,
+                  disabled: itemDisabled,
+                  onChange: (e) => onChange(option.value),
+                  value: option.value,
+                },
+              }
+            })) ||
           []
         }
       />