feat: export CheckboxControl, RadioControl, and SwitchControl (#684)

openedx · Apr 7, 2021 · 5b814e6 · 5b814e6
1 parent 41bc609
commit 5b814e6
Show file tree

Hide file tree

Showing 16 changed files with 302 additions and 340 deletions.
diff --git a/src/Form/FormCheckbox.jsx b/src/Form/FormCheckbox.jsx
@@ -11,24 +11,33 @@ const CheckboxControl = React.forwardRef(
     const defaultRef = React.useRef();
     const resolvedRef = ref || defaultRef;
     const { getControlProps } = useFormGroupContext();
-    const checkboxProps = getControlProps(props);
+    const checkboxProps = getControlProps({
+      ...props,
+      className: classNames('pgn__form-checkbox-input', props.className),
+    });
 
     React.useEffect(() => {
       resolvedRef.current.indeterminate = isIndeterminate;
     }, [resolvedRef, isIndeterminate]);
 
     return (
-      <input type="checkbox" {...checkboxProps} ref={resolvedRef} {...props} />
+      <input
+        type="checkbox"
+        {...checkboxProps}
+        ref={resolvedRef}
+      />
     );
   },
 );
 
 CheckboxControl.propTypes = {
   isIndeterminate: PropTypes.bool,
+  className: PropTypes.string,
 };
 
 CheckboxControl.defaultProps = {
   isIndeterminate: false,
+  className: undefined,
 };
 
 const FormCheckbox = React.forwardRef(({
@@ -39,6 +48,7 @@ const FormCheckbox = React.forwardRef(({
   description,
   isInvalid,
   isValid,
+  controlAs,
   ...props
 }, ref) => {
   const { getCheckboxControlProps, hasCheckboxSetProvider } = useCheckboxSetContext();
@@ -49,7 +59,11 @@ const FormCheckbox = React.forwardRef(({
     ...getControlProps({}),
     role: 'group',
   } : {};
-  const checkboxInputProps = getCheckboxControlProps(props);
+  const checkboxInputProps = getCheckboxControlProps({
+    ...props,
+    className: controlClassName,
+  });
+  const control = React.createElement(controlAs, { ...checkboxInputProps, ref });
   return (
     <FormGroupContextProvider
       controlId={checkboxInputProps.id}
@@ -58,16 +72,15 @@ const FormCheckbox = React.forwardRef(({
     >
       <div
         className={classNames('pgn__form-checkbox', className, {
-          'pgn__form-checkbox-valid': isValid,
-          'pgn__form-checkbox-invalid': isInvalid,
-          'pgn__form-checkbox-disabled': checkboxInputProps.disabled,
+          'pgn__form-control-valid': isValid,
+          'pgn__form-control-invalid': isInvalid,
+          'pgn__form-control-disabled': checkboxInputProps.disabled,
         })}
         {...groupProps}
       >
-        <CheckboxControl {...checkboxInputProps} ref={ref} />
-        <div className={classNames('pgn__form-checkbox-display', controlClassName)}>
-          <FormLabel className={classNames('pgn__form-checkbox-label', labelClassName)}>
-            <span className={classNames('pgn__form-checkbox-control', controlClassName)} />
+        {control}
+        <div>
+          <FormLabel className={labelClassName}>
             {children}
           </FormLabel>
           {description && (
@@ -89,6 +102,7 @@ FormCheckbox.propTypes = {
   description: PropTypes.node,
   isInvalid: PropTypes.bool,
   isValid: PropTypes.bool,
+  controlAs: PropTypes.elementType,
 };
 
 FormCheckbox.defaultProps = {
@@ -98,6 +112,8 @@ FormCheckbox.defaultProps = {
   description: undefined,
   isInvalid: false,
   isValid: false,
+  controlAs: CheckboxControl,
 };
 
+export { CheckboxControl };
 export default FormCheckbox;
diff --git a/src/Form/FormCheckboxSet.jsx b/src/Form/FormCheckboxSet.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { useFormGroupContext } from './FormGroupContext';
 import { FormCheckboxSetContextProvider } from './FormCheckboxSetContext';
+import FormControlSet from './FormControlSet';
 
 const FormCheckboxSet = ({
   children,
@@ -17,13 +17,7 @@ const FormCheckboxSet = ({
 }) => {
   const { getControlProps, useSetIsControlGroupEffect } = useFormGroupContext();
   useSetIsControlGroupEffect(true);
-  const className = classNames(
-    'pgn__form-control-set',
-    'pgn__form-checkbox-set',
-    props.className,
-    { 'pgn__form-checkbox-set-inline': isInline },
-  );
-  const controlProps = getControlProps({ ...props, className });
+  const controlProps = getControlProps(props);
   return (
     <FormCheckboxSetContextProvider
       name={name}
@@ -33,13 +27,9 @@ const FormCheckboxSet = ({
       onBlur={onBlur}
       onChange={onChange}
     >
-      <div
-        role="group"
-        className={className}
-        {...controlProps}
-      >
+      <FormControlSet role="group" isInline={isInline} {...controlProps}>
         {children}
-      </div>
+      </FormControlSet>
     </FormCheckboxSetContextProvider>
   );
 };

diff --git a/src/Form/FormControlSet.jsx b/src/Form/FormControlSet.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const FormControlSet = ({
+  as,
+  className,
+  isInline,
+  children,
+  ...props
+}) => React.createElement(as, {
+  className: classNames(
+    className,
+    {
+      'pgn__form-control-set': !isInline,
+      'pgn__form-control-set-inline': isInline,
+    },
+  ),
+  ...props,
+}, children);
+
+FormControlSet.propTypes = {
+  as: PropTypes.elementType,
+  className: PropTypes.string,
+  isInline: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+FormControlSet.defaultProps = {
+  as: 'div',
+  className: undefined,
+  isInline: false,
+  children: null,
+};
+
+export default FormControlSet;
diff --git a/src/Form/FormRadio.jsx b/src/Form/FormRadio.jsx
@@ -8,12 +8,23 @@ import FormControlFeedback from './FormControlFeedback';
 
 const RadioControl = React.forwardRef((props, ref) => {
   const { getControlProps } = useFormGroupContext();
-  const radioProps = getControlProps(props);
+  const radioProps = getControlProps({
+    ...props,
+    className: classNames('pgn__form-radio-input', props.className),
+  });
   return (
     <input {...radioProps} type="radio" ref={ref} />
   );
 });
 
+RadioControl.propTypes = {
+  className: PropTypes.string,
+};
+
+RadioControl.defaultProps = {
+  className: undefined,
+};
+
 const FormRadio = React.forwardRef(({
   children,
   className,
@@ -25,7 +36,10 @@ const FormRadio = React.forwardRef(({
   ...props
 }, ref) => {
   const { getRadioControlProps } = useRadioSetContext();
-  const radioInputProps = getRadioControlProps(props);
+  const radioInputProps = getRadioControlProps({
+    ...props,
+    className: controlClassName,
+  });
   return (
     <FormGroupContextProvider
       controlId={radioInputProps.id}
@@ -34,15 +48,14 @@ const FormRadio = React.forwardRef(({
     >
       <div
         className={classNames('pgn__form-radio', className, {
-          'pgn__form-radio-valid': isValid,
-          'pgn__form-radio-invalid': isInvalid,
-          'pgn__form-radio-disabled': radioInputProps.disabled,
+          'pgn__form-control-valid': isValid,
+          'pgn__form-control-invalid': isInvalid,
+          'pgn__form-control-disabled': radioInputProps.disabled,
         })}
       >
         <RadioControl {...radioInputProps} ref={ref} />
-        <div className={classNames('pgn__form-radio-display', controlClassName)}>
-          <FormLabel className={classNames('pgn__form-radio-label', labelClassName)}>
-            <span className={classNames('pgn__form-radio-control', controlClassName)} />
+        <div>
+          <FormLabel className={labelClassName}>
             {children}
           </FormLabel>
           {description && (

diff --git a/src/Form/FormRadioSet.jsx b/src/Form/FormRadioSet.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { useFormGroupContext } from './FormGroupContext';
 import { FormRadioSetContextProvider } from './FormRadioSetContext';
+import FormControlSet from './FormControlSet';
 
 const FormRadioSet = ({
   children,
@@ -18,12 +18,6 @@ const FormRadioSet = ({
   const { getControlProps, useSetIsControlGroupEffect } = useFormGroupContext();
   useSetIsControlGroupEffect(true);
   const controlProps = getControlProps(props);
-  const className = classNames(
-    'pgn__form-control-set',
-    'pgn__form-radio-set',
-    props.className,
-    { 'pgn__form-radio-set-inline': isInline },
-  );
   return (
     <FormRadioSetContextProvider
       name={name}
@@ -33,13 +27,9 @@ const FormRadioSet = ({
       onBlur={onBlur}
       onChange={onChange}
     >
-      <div
-        role="radiogroup"
-        className={className}
-        {...controlProps}
-      >
+      <FormControlSet role="radiogroup" isInline={isInline} {...controlProps}>
         {children}
-      </div>
+      </FormControlSet>
     </FormRadioSetContextProvider>
   );
 };

diff --git a/src/Form/FormSwitch.jsx b/src/Form/FormSwitch.jsx
@@ -2,6 +2,44 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import FormCheckbox from './FormCheckbox';
+import { useFormGroupContext } from './FormGroupContext';
+
+const SwitchControl = React.forwardRef(
+  ({ isIndeterminate, ...props }, ref) => {
+    const defaultRef = React.useRef();
+    const resolvedRef = ref || defaultRef;
+    const { getControlProps } = useFormGroupContext();
+    const checkboxProps = getControlProps({
+      ...props,
+      className: classNames(
+        'pgn__form-switch-input',
+        props.className,
+      ),
+    });
+
+    React.useEffect(() => {
+      resolvedRef.current.indeterminate = isIndeterminate;
+    }, [resolvedRef, isIndeterminate]);
+
+    return (
+      <input
+        type="checkbox"
+        {...checkboxProps}
+        ref={resolvedRef}
+      />
+    );
+  },
+);
+
+SwitchControl.propTypes = {
+  isIndeterminate: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+SwitchControl.defaultProps = {
+  isIndeterminate: false,
+  className: undefined,
+};
 
 const FormSwitch = React.forwardRef(({
   children,
@@ -13,6 +51,7 @@ const FormSwitch = React.forwardRef(({
     className={classNames('pgn__form-switch', className)}
     {...props}
     role="switch"
+    controlAs={SwitchControl}
     ref={ref}
   >
     {children}
@@ -28,4 +67,5 @@ FormSwitch.defaultProps = {
   className: undefined,
 };
 
+export { SwitchControl };
 export default FormSwitch;
diff --git a/src/Form/FormSwitchSet.jsx b/src/Form/FormSwitchSet.jsx
@@ -0,0 +1,3 @@
+import FormSwitchSet from './FormCheckboxSet';
+
+export default FormSwitchSet;