refactor(CFormCheck): update indeterminate state

Author: mrholek

packages/coreui-react/src/components/form/CFormCheck.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef, InputHTMLAttributes, ReactNode } from 'react'
+import React, { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
+import { useForkedRef } from '../../utils/hooks'
 import { Colors, Shapes } from '../Types'
 
 import { CFormLabel } from './CFormLabel'
@@ -46,6 +47,10 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
    * The id global attribute defines an identifier (ID) that must be unique in the whole document.
    */
   id?: string
+  /**
+   * Input Checkbox indeterminate Property.
+   */
+  indeterminate?: boolean
   /**
    * Group checkboxes or radios on the same horizontal row by adding.
    */
@@ -70,9 +75,30 @@ export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
 
 export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
   (
-    { className, button, hitArea, id, inline, invalid, label, type = 'checkbox', valid, ...rest },
+    {
+      className,
+      button,
+      hitArea,
+      id,
+      indeterminate,
+      inline,
+      invalid,
+      label,
+      type = 'checkbox',
+      valid,
+      ...rest
+    },
     ref,
   ) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const forkedRef = useForkedRef(ref, inputRef)
+
+    useEffect(() => {
+      if (inputRef.current && indeterminate) {
+        inputRef.current.indeterminate = indeterminate
+      }
+    }, [indeterminate])
+
     const _className = classNames(
       'form-check',
       {
@@ -102,7 +128,7 @@ export const CFormCheck = forwardRef<HTMLInputElement, CFormCheckProps>(
     )
 
     const formControl = () => {
-      return <input type={type} className={inputClassName} id={id} {...rest} ref={ref} />
+      return <input type={type} className={inputClassName} id={id} {...rest} ref={forkedRef} />
     }
 
     const formLabel = () => {
@@ -141,6 +167,7 @@ CFormCheck.propTypes = {
   className: PropTypes.string,
   hitArea: PropTypes.oneOf(['full']),
   id: PropTypes.string,
+  indeterminate: PropTypes.bool,
   inline: PropTypes.bool,
   invalid: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

packages/docs/content/4.0/api/CFormCheck.api.mdx

@@ -11,6 +11,7 @@ import CFormCheck from '@coreui/react/src/components/form/CFormCheck'
 | **className** | A string of all className you want applied to the component. | `string` | - |
 | **hitArea** | Sets hit area to the full area of the component. | `'full'` | - |
 | **id** | The id global attribute defines an identifier (ID) that must be unique in the whole document. | `string` | - |
+| **indeterminate** | Input Checkbox indeterminate Property. | `boolean` | - |
 | **inline** | Group checkboxes or radios on the same horizontal row by adding. | `boolean` | - |
 | **invalid** | Set component validation state to invalid. | `boolean` | - |
 | **label** | The element represents a caption for a component. | `ReactNode` | - |

packages/docs/content/4.0/forms/checks-radios.mdx

@@ -34,26 +34,14 @@ Browser default checkboxes and radios are replaced with the help of `<CFormCheck
 
 ## Indeterminate
 
-Checkboxes can utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
-
-export const IndeterminateExample = () => {
-  const checkboxRef = useRef(null)
-  useEffect(() => {
-    checkboxRef.current.indeterminate = true
-  })
-  return <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" ref={checkboxRef} />
-}
+Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
 
 <Example>
-  <IndeterminateExample />
+  <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
 </Example>
 
 ```jsx
-const checkboxRef = useRef(null)
-useEffect(() => {
-  checkboxRef.current.indeterminate = true
-})
-return <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" ref={checkboxRef} />
+<CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
 ```
 
 ### Disabled