update enum array renderer

kchobantonov · Dec 6, 2024 · 2efbe6a · 2efbe6a
1 parent 631b7f9
commit 2efbe6a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 36 deletions.
diff --git a/packages/antd-renderers/src/complex/EnumArrayRenderer.tsx b/packages/antd-renderers/src/complex/EnumArrayRenderer.tsx
@@ -16,7 +16,7 @@ import {
 } from '@jsonforms/core';
 
 import { withJsonFormsMultiEnumProps } from '@jsonforms/react';
-import { Form } from 'antd';
+import { Flex, Form } from 'antd';
 import isEmpty from 'lodash/isEmpty';
 import merge from 'lodash/merge';
 import React from 'react';
@@ -63,37 +63,37 @@ export const EnumArrayRenderer = ({
       label={label}
       help={!isValid ? errors : showDescription ? description : null}
     >
-      {options.map((option: any, index: number) => {
-        const optionPath = Paths.compose(path, `${index}`);
-        const checkboxValue = data?.includes(option.value)
-          ? option.value
-          : undefined;
-        return (
-          <AntdCheckbox
-            id={id + '-label-' + option.value}
-            key={option.value}
-            label={option.label}
-            isValid={isEmpty(errors)}
-            path={optionPath}
-            handleChange={(_childPath, newValue) =>
-              newValue
-                ? addItem(path, option.value)
-                : removeItem(path, option.value)
-            }
-            data={checkboxValue}
-            errors={errors}
-            schema={schema}
-            visible={visible}
-            rootSchema={rootSchema}
-            uischema={uischema}
-            enabled={enabled}
-            inputProps={{
-              onFocus,
-              onBlur,
-            }}
-          />
-        );
-      })}
+      <Flex gap={2} vertical={appliedUiSchemaOptions.vertical}>
+        {options.map((option: any, index: number) => {
+          const optionPath = Paths.compose(path, `${index}`);
+          const checkboxValue = data?.includes(option.value) ? true : false;
+          return (
+            <AntdCheckbox
+              id={id + '-input-' + option.value}
+              key={option.value}
+              label={option.label}
+              isValid={isEmpty(errors)}
+              path={optionPath}
+              handleChange={(_childPath, newValue) =>
+                newValue
+                  ? addItem(path, option.value)
+                  : removeItem(path, option.value)
+              }
+              data={checkboxValue}
+              errors={errors}
+              schema={schema}
+              visible={visible}
+              rootSchema={rootSchema}
+              uischema={uischema}
+              enabled={enabled}
+              inputProps={{
+                onFocus,
+                onBlur,
+              }}
+            />
+          );
+        })}
+      </Flex>
     </Form.Item>
   );
 };

diff --git a/packages/antd-renderers/src/controls/InputControl.tsx b/packages/antd-renderers/src/controls/InputControl.tsx
@@ -77,15 +77,15 @@ export const InputControl = (props: ControlProps & WithInput) => {
       required={required}
       hasFeedback={!isValid}
       validateStatus={isValid ? 'success' : 'error'}
-      label={label}
+      label={input !== AntdCheckbox ? label : ''}
       help={help}
       style={style}
       htmlFor={id + '-input'}
       id={id}
     >
       <InnerComponent
         {...props}
-        label={input === AntdCheckbox ? ' ' : props.label}
+        label={label}
         inputProps={{
           onFocus,
           onBlur,

diff --git a/packages/primereact-renderers/src/complex/EnumArrayRenderer.tsx b/packages/primereact-renderers/src/complex/EnumArrayRenderer.tsx
@@ -49,7 +49,7 @@ export const EnumArrayRenderer = (
   return (
     <InputControl
       {...props}
-      input={() => (
+      input={(props) => (
         <div
           className={classNames('flex gap-2', {
             'flex-column': appliedUiSchemaOptions.vertical,
@@ -60,7 +60,7 @@ export const EnumArrayRenderer = (
             const checkboxValue = data?.includes(option.value) ? true : false;
             return (
               <PrimeCheckbox
-                id={id + '-label-' + option.value}
+                id={id + '-input-' + option.value}
                 key={option.value}
                 label={option.label}
                 isValid={isEmpty(errors)}
@@ -80,6 +80,7 @@ export const EnumArrayRenderer = (
                 uischema={uischema}
                 rootSchema={rootSchema}
                 enabled={enabled}
+                inputProps={props.inputProps}
               />
             );
           })}