refactor(checkbox): sw-2707 remove deprecated react

RedHatInsights · Oct 24, 2024 · f8f1801 · f8f1801
1 parent 9acef1f
commit f8f1801
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 111 deletions.
diff --git a/src/components/README.md b/src/components/README.md
@@ -1260,67 +1260,48 @@ A checkbox with state.
 
 
 * [Checkbox](#Form.module_Checkbox)
-    * [~Checkbox(props)](#Form.module_Checkbox..Checkbox) ⇒ <code>React.ReactNode</code>
-        * [.propTypes](#Form.module_Checkbox..Checkbox.propTypes) : <code>Object</code>
-        * [.defaultProps](#Form.module_Checkbox..Checkbox.defaultProps) : <code>Object</code>
+    * [~Checkbox(props)](#Form.module_Checkbox..Checkbox) ⇒ <code>JSX.Element</code>
     * ["onCheckboxChange" (checked, event)](#event_onCheckboxChange)
 
 <a name="Form.module_Checkbox..Checkbox"></a>
 
-### Checkbox~Checkbox(props) ⇒ <code>React.ReactNode</code>
+### Checkbox~Checkbox(props) ⇒ <code>JSX.Element</code>
 Render a checkbox form element. Provides restructured event data.
 
 **Kind**: inner method of [<code>Checkbox</code>](#Form.module_Checkbox)  
 **Emits**: [<code>onCheckboxChange</code>](#event_onCheckboxChange)  
 <table>
   <thead>
     <tr>
-      <th>Param</th><th>Type</th>
+      <th>Param</th><th>Type</th><th>Default</th>
     </tr>
   </thead>
   <tbody>
 <tr>
-    <td>props</td><td><code>object</code></td>
+    <td>props</td><td><code>object</code></td><td></td>
     </tr><tr>
-    <td>props.ariaLabel</td><td><code>string</code></td>
+    <td>[props.ariaLabel]</td><td><code>string</code></td><td></td>
     </tr><tr>
-    <td>props.children</td><td><code>React.ReactNode</code></td>
+    <td>[props.children]</td><td><code>React.ReactNode</code></td><td></td>
     </tr><tr>
-    <td>props.id</td><td><code>string</code></td>
+    <td>[props.id]</td><td><code>string</code></td><td></td>
     </tr><tr>
-    <td>props.isChecked</td><td><code>*</code></td>
+    <td>[props.isChecked]</td><td><code>boolean</code></td><td><code>false</code></td>
     </tr><tr>
-    <td>props.isDisabled</td><td><code>boolean</code></td>
+    <td>[props.isDisabled]</td><td><code>boolean</code></td><td><code>false</code></td>
     </tr><tr>
-    <td>props.isReadOnly</td><td><code>boolean</code></td>
+    <td>[props.isReadOnly]</td><td><code>boolean</code></td><td><code>false</code></td>
     </tr><tr>
-    <td>props.label</td><td><code>React.ReactNode</code></td>
+    <td>[props.label]</td><td><code>React.ReactNode</code></td><td></td>
     </tr><tr>
-    <td>props.name</td><td><code>string</code></td>
+    <td>[props.name]</td><td><code>string</code></td><td></td>
     </tr><tr>
-    <td>props.onChange</td><td><code>function</code></td>
+    <td>[props.onChange]</td><td><code>function</code></td><td><code>helpers.noop</code></td>
     </tr><tr>
-    <td>props.value</td><td><code>*</code></td>
+    <td>[props.value]</td><td><code>string</code></td><td></td>
     </tr>  </tbody>
 </table>
 
-
-* [~Checkbox(props)](#Form.module_Checkbox..Checkbox) ⇒ <code>React.ReactNode</code>
-    * [.propTypes](#Form.module_Checkbox..Checkbox.propTypes) : <code>Object</code>
-    * [.defaultProps](#Form.module_Checkbox..Checkbox.defaultProps) : <code>Object</code>
-
-<a name="Form.module_Checkbox..Checkbox.propTypes"></a>
-
-#### Checkbox.propTypes : <code>Object</code>
-Prop types.
-
-**Kind**: static property of [<code>Checkbox</code>](#Form.module_Checkbox..Checkbox)  
-<a name="Form.module_Checkbox..Checkbox.defaultProps"></a>
-
-#### Checkbox.defaultProps : <code>Object</code>
-Default props.
-
-**Kind**: static property of [<code>Checkbox</code>](#Form.module_Checkbox..Checkbox)  
 <a name="event_onCheckboxChange"></a>
 
 ### "onCheckboxChange" (checked, event)

diff --git a/src/components/form/__tests__/__snapshots__/checkbox.test.js.snap b/src/components/form/__tests__/__snapshots__/checkbox.test.js.snap
@@ -5,14 +5,7 @@ exports[`Checkbox Component should handle children as a label: children label ch
   props="{
   "children": [
     {}
-  ],
-  "ariaLabel": null,
-  "id": null,
-  "isChecked": false,
-  "isDisabled": false,
-  "isReadOnly": false,
-  "label": "",
-  "name": null
+  ]
 }"
 >
   <div
@@ -106,14 +99,7 @@ exports[`Checkbox Component should handle readOnly, disabled, checked: readOnly
 exports[`Checkbox Component should render a basic component: basic component 1`] = `
 <checkbox
   props="{
-  "ariaLabel": null,
-  "children": [],
-  "id": null,
-  "isChecked": false,
-  "isDisabled": false,
-  "isReadOnly": false,
-  "label": "",
-  "name": null
+  "children": []
 }"
 >
   <div

diff --git a/src/components/form/checkbox.js b/src/components/form/checkbox.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Checkbox as PfCheckbox } from '@patternfly/react-core/dist/js/components/Checkbox';
 import { createMockEvent } from './formHelpers';
 import { helpers } from '../../common';
@@ -16,35 +15,34 @@ import { helpers } from '../../common';
  *
  * @fires onCheckboxChange
  * @param {object} props
- * @param {string} props.ariaLabel
- * @param {React.ReactNode} props.children
- * @param {string} props.id
- * @param {*} props.isChecked
- * @param {boolean} props.isDisabled
- * @param {boolean} props.isReadOnly
- * @param {React.ReactNode} props.label
- * @param {string} props.name
- * @param {Function} props.onChange
- * @param {*} props.value
- * @returns {React.ReactNode}
+ * @param {string} [props.ariaLabel]
+ * @param {React.ReactNode} [props.children]
+ * @param {string} [props.id]
+ * @param {boolean} [props.isChecked=false]
+ * @param {boolean} [props.isDisabled=false]
+ * @param {boolean} [props.isReadOnly=false]
+ * @param {React.ReactNode} [props.label]
+ * @param {string} [props.name]
+ * @param {Function} [props.onChange=helpers.noop]
+ * @param {string} [props.value]
+ * @returns {JSX.Element}
  */
 const Checkbox = ({
   ariaLabel,
   children,
   id,
-  isChecked,
-  isDisabled,
-  isReadOnly,
-  label,
-  name,
-  onChange,
+  isChecked = false,
+  isDisabled = false,
+  isReadOnly = false,
+  label = '',
+  name = helpers.generateId(),
+  onChange = helpers.noop,
   value,
   ...props
 }) => {
   const [check, setCheck] = React.useState();
   const updatedChecked = check ?? isChecked ?? false;
-  const updatedName = name || helpers.generateId();
-  const updatedId = id || updatedName;
+  const updatedId = id || name;
 
   /**
    * onChange event, provide restructured event.
@@ -57,7 +55,7 @@ const Checkbox = ({
     const mockEvent = {
       ...createMockEvent(event),
       id: updatedId,
-      name: updatedName,
+      name,
       value,
       checked
     };
@@ -72,53 +70,15 @@ const Checkbox = ({
       checked={updatedChecked}
       id={updatedId}
       isChecked={updatedChecked}
-      isDisabled={isDisabled || false}
+      isDisabled={isDisabled}
       label={children || label}
-      name={updatedName}
+      name={name}
       onChange={(event, checked) => onCheckboxChange(checked, event)}
       value={value}
-      readOnly={isReadOnly || false}
+      readOnly={isReadOnly}
       {...props}
     />
   );
 };
 
-/**
- * Prop types.
- *
- * @type {{isReadOnly: boolean, onChange: Function, children: React.ReactNode, name: string, id: string,
- *     isDisabled: boolean, label: string, isChecked: boolean, value: *, ariaLabel: string}}
- */
-Checkbox.propTypes = {
-  ariaLabel: PropTypes.string,
-  children: PropTypes.node,
-  id: PropTypes.string,
-  isChecked: PropTypes.any,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  label: PropTypes.node,
-  name: PropTypes.string,
-  onChange: PropTypes.func,
-  value: PropTypes.any
-};
-
-/**
- * Default props.
- *
- * @type {{isReadOnly: boolean, onChange: Function, children: React.ReactNode, name: string, id: string,
- *     isDisabled: boolean, label: string, isChecked: boolean, value: *, ariaLabel: string}}
- */
-Checkbox.defaultProps = {
-  ariaLabel: null,
-  children: null,
-  id: null,
-  isChecked: false,
-  isDisabled: false,
-  isReadOnly: false,
-  label: '',
-  name: null,
-  onChange: helpers.noop,
-  value: undefined
-};
-
 export { Checkbox as default, Checkbox };