refactor(MenuToggleCheckbox): use Checkbox component internally

packages/react-core/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Check/check';
-import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
-import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
+import { OUIAProps } from '../../helpers';
+import { Checkbox } from '../Checkbox';
 
 export interface MenuToggleCheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>,
@@ -33,7 +32,7 @@ export interface MenuToggleCheckboxProps
   ouiaSafe?: boolean;
 }
 
-class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
+class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps> {
   static displayName = 'MenuToggleCheckbox';
   static defaultProps: PickOptional<MenuToggleCheckboxProps> = {
     isValid: true,
@@ -43,66 +42,24 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
 
   constructor(props: MenuToggleCheckboxProps) {
     super(props);
-    this.state = {
-      ouiaStateId: getDefaultOUIAId(MenuToggleCheckbox.displayName)
-    };
   }
 
-  handleChange = (event: React.FormEvent<HTMLInputElement>) => {
-    this.props.onChange((event.target as HTMLInputElement).checked, event);
-  };
-
-  calculateChecked = () => {
-    const { isChecked, defaultChecked } = this.props;
-    if (isChecked === null) {
-      // return false here and the indeterminate state will be set to true through the ref
-      return false;
-    } else if (isChecked !== undefined) {
-      return isChecked;
-    }
-    return defaultChecked;
-  };
-
   render() {
     const {
-      className,
-      isValid,
-      isDisabled,
-      isChecked,
       children,
-      ouiaId,
-      ouiaSafe,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       onChange,
-      defaultChecked,
-      id,
       ...props
     } = this.props;
-    const text = children && (
-      <span className={css(styles.checkLabel, className)} aria-hidden="true" id={id}>
-        {children}
-      </span>
-    );
+
     return (
-      <label className={css(styles.check, !children && styles.modifiers.standalone, className)} htmlFor={id}>
-        <input
-          className={css(styles.checkInput)}
-          {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
-          name={id}
-          type="checkbox"
-          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
-          aria-invalid={!isValid}
-          disabled={isDisabled}
-          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
-          {...getOUIAProps(
-            MenuToggleCheckbox.displayName,
-            ouiaId !== undefined ? ouiaId : this.state.ouiaStateId,
-            ouiaSafe
-          )}
-          {...props}
-        />
-        {text}
-      </label>
+      // @ts-ignore
+      <Checkbox
+        onChange={(event: React.FormEvent<HTMLInputElement>, checked: boolean) => onChange(checked, event)}
+        isLabelWrapped
+        label={children}
+        {...props}
+      ></Checkbox>
     );
   }
 }