Merge pull request #251 from waza-ari/master

feat: add support to indivually disable options in RadioButtonGroupProps
dohomi · Apr 8, 2024 · 6ad490c · 6ad490c
2 parents e844ada + 5aef7a6
commit 6ad490c
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/apps/storybook/stories/RadioButtonGroup.stories.tsx b/apps/storybook/stories/RadioButtonGroup.stories.tsx
@@ -15,6 +15,11 @@ const options = [
   {id: '2', label: 'label 2'},
 ]
 
+const withDisabledOptions = [
+  ...options,
+  {id: '3', label: 'label 3', disabled: true},
+]
+
 export const Basic: Story = {
   args: {
     label: 'Basic',
@@ -59,3 +64,11 @@ export const Disabled: Story = {
     disabled: true,
   },
 }
+
+export const IndividuallyDisabled: Story = {
+  args: {
+    label: 'Individually Disabled Options',
+    name: 'individuallydisabled',
+    options: withDisabledOptions,
+  },
+}
diff --git a/packages/rhf-mui/src/RadioButtonGroup.tsx b/packages/rhf-mui/src/RadioButtonGroup.tsx
@@ -31,6 +31,7 @@ export type RadioButtonGroupProps<
   label?: string
   labelKey?: string
   valueKey?: string
+  disabledKey?: string
   type?: 'number' | 'string'
   emptyOptionLabel?: string
   onChange?: (value: any) => void
@@ -65,6 +66,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup<
     parseError,
     labelKey = 'label',
     valueKey = 'id',
+    disabledKey = 'disabled',
     required,
     emptyOptionLabel,
     returnObject,
@@ -139,6 +141,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup<
         )}
         {options.map((option: any) => {
           const optionKey = option[valueKey]
+          const optionDisabled = option[disabledKey] || false
           if (optionKey === undefined) {
             console.error(
               `RadioButtonGroup: valueKey ${valueKey} does not exist on option`,
@@ -158,7 +161,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup<
                   sx={{
                     color: error ? theme.palette.error.main : undefined,
                   }}
-                  disabled={disabled}
+                  disabled={disabled || optionDisabled}
                   checked={isChecked}
                 />
               }