feat: don't render both checked and defaultChecked when passing argum…

…ents
mondaycom · Dec 30, 2020 · b11ee70 · b11ee70
1 parent 80ef273
commit b11ee70
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "monday-ui-react-core",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "description": "Official monday.com UI resources for application development in React.js",
   "main": "dist/main.js",
   "scripts": {

diff --git a/src/components/RadioButton/RadioButton.jsx b/src/components/RadioButton/RadioButton.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, useCallback } from "react";
+import React, { useRef, forwardRef, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import cx from "classnames";
 import useMergeRefs from "../../hooks/useMergeRefs";
@@ -19,6 +19,13 @@ const RadioButton = forwardRef(
       }
     }, [onSelect, inputRef, disabled]);
 
+    const checkedProps = useMemo(() => {
+      if (checked !== undefined) {
+        return { checked };
+      }
+      return { defaultChecked };
+    }, [checked, defaultChecked]);
+
     return (
       <label className={cx(baseClassName, componentClassName, { disabled })}>
         <span className={`${baseClassName}__radio-input-container`}>
@@ -27,9 +34,8 @@ const RadioButton = forwardRef(
             type="radio"
             value={value}
             name={name}
-            checked={checked}
             disabled={disabled}
-            defaultChecked={defaultChecked}
+            {...checkedProps}
             onChange={onSelect}
             ref={mergedRef}
           />

diff --git a/src/components/RadioButton/__stories__/radioButton.stories.js b/src/components/RadioButton/__stories__/radioButton.stories.js
@@ -39,7 +39,7 @@ export const States = () => {
           disabled={true}
         />
       </RadioButtonStoryLine>
-      <RadioButtonStoryLine title="Selected">
+      <RadioButtonStoryLine title="Default Checked">
         <RadioButton
           value="1"
           text="Option"
@@ -49,6 +49,16 @@ export const States = () => {
           componentClassName="monday-style-radio-button-selected"
         />
       </RadioButtonStoryLine>
+      <RadioButtonStoryLine title="Checked">
+        <RadioButton
+          value="1"
+          text="Option"
+          name="selectedRadio"
+          checked={true}
+          disabled={true}
+          componentClassName="monday-style-radio-button-selected"
+        />
+      </RadioButtonStoryLine>
       <RadioButtonStoryLine title="Selected hover">
         <RadioButton
           value="1"