Impl [Form] New Select all checkbox component

src/lib/components/FormCheckBox/FormCheckBox.js

@@ -5,29 +5,32 @@ import classNames from 'classnames'
 
 import './formCheckBox.scss'
 
-const FormCheckBox = ({ children, className, name, label, ...inputProps }) => {
-  const formFieldClassNames = classNames('form-field-checkbox', className)
+const FormCheckBox = React.forwardRef(
+  ({ children, className, name, label, ...inputProps }, ref) => {
+    const formFieldClassNames = classNames('form-field-checkbox', className)
 
-  return (
-    <Field name={name} value={inputProps.value} type="checkbox">
-      {({ input }) => (
-        <div className={formFieldClassNames}>
-          <input
-            {...{
-              ...input,
-              ...inputProps
-            }}
-            id={inputProps.value ?? name}
-          />
-          <label htmlFor={inputProps.value ?? name}>
-            {label ? label : ''}
-            {children}
-          </label>
-        </div>
-      )}
-    </Field>
-  )
-}
+    return (
+      <Field name={name} value={inputProps.value} type="checkbox">
+        {({ input }) => (
+          <div className={formFieldClassNames}>
+            <input
+              {...{
+                ...input,
+                ...inputProps
+              }}
+              id={inputProps.value ?? name}
+              ref={ref}
+            />
+            <label htmlFor={inputProps.value ?? name}>
+              {label ? label : ''}
+              {children}
+            </label>
+          </div>
+        )}
+      </Field>
+    )
+  }
+)
 
 FormCheckBox.defaultProps = {
   className: '',

src/lib/components/FormCheckBox/FormCheckBoxAll.js

@@ -0,0 +1,67 @@
+import { useRef } from 'react'
+import PropTypes from 'prop-types'
+import { FormSpy, Field } from 'react-final-form'
+import { OnChange } from 'react-final-form-listeners'
+
+import FormCheckBox from './FormCheckBox'
+
+import './FormCheckBoxAll.scss'
+
+const FormCheckBoxAll = ({ name, listenTo, allCheckboxes, ...inputProps }) => {
+  // const allCheckboxes = Array.from(document.querySelectorAll(`input[name=${listenTo}]`)).map(
+  //   i => i.value
+  // )
+  const checkAllRef = useRef()
+
+  return (
+    <Field name={name}>
+      {({ input }) => {
+        return (
+          <FormSpy subscription={{}}>
+            {({ form }) => (
+              <>
+                <OnChange name={listenTo}>
+                  {(value) => {
+                    if (value && value.length > 0) {
+                      if (value.length !== allCheckboxes.length) {
+                        checkAllRef.current.classList.add('partial-select')
+                      } else {
+                        checkAllRef.current.className = ''
+                        input.onChange(true)
+                      }
+                    } else {
+                      checkAllRef.current.className = ''
+                      input.onChange(false)
+                    }
+                  }}
+                </OnChange>
+
+                <OnChange name={name}>
+                  {(value) => {
+                    if (!value && checkAllRef.current.classList.contains('partial-select')) {
+                      return form.change(listenTo, allCheckboxes)
+                    }
+                    return form.change(listenTo, value ? allCheckboxes : [])
+                  }}
+                </OnChange>
+                <FormCheckBox name={name} ref={checkAllRef} {...inputProps} />
+              </>
+            )}
+          </FormSpy>
+        )
+      }}
+    </Field>
+  )
+}
+
+FormCheckBoxAll.defaultProps = {
+  name: 'selectAll'
+}
+
+FormCheckBoxAll.propTypes = {
+  allCheckboxes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  listenTo: PropTypes.string.isRequired,
+  name: PropTypes.string
+}
+
+export default FormCheckBoxAll

src/lib/components/FormCheckBox/FormCheckBoxAll.scss

@@ -0,0 +1,24 @@
+@import '../../scss/colors';
+
+.form-field-checkbox {
+  input[type='checkbox'] {
+    &.partial-select,
+    &:checked.partial-select {
+      background: currentColor;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 6px;
+        left: 3px;
+        width: 10px;
+        height: 0;
+        border-style: solid;
+        border-color: $white;
+        border-width: 2px;
+        transform: rotate(0deg);
+      }
+    }
+  }
+}

src/lib/components/FormCheckBox/formCheckBox.scss

@@ -15,23 +15,23 @@
     border-radius: 4px;
     transition: background 0.2s ease-in-out;
 
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 1px;
-      left: 5px;
-      width: 6px;
-      height: 11px;
-      border-style: solid;
-      border-color: $white;
-      border-width: 0 2px 2px 0;
-      transform: rotate(45deg);
-    }
-
     &:checked {
       background: currentColor;
 
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 1px;
+        left: 5px;
+        width: 6px;
+        height: 11px;
+        border-style: solid;
+        border-color: $white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+      }
+
       &:hover {
         background: currentColor;
 

src/lib/components/index.js

@@ -1,6 +1,7 @@
 export { default as Button } from './Button/Button'
 export { default as ConfirmDialog } from './ConfirmDialog/ConfirmDialog'
 export { default as FormCheckBox } from './FormCheckBox/FormCheckBox'
+export { default as FormCheckBoxAll } from './FormCheckBox/FormCheckBoxAll'
 export { default as FormInput } from './FormInput/FormInput'
 export { default as FormKeyValueTable } from './FormKeyValueTable/FormKeyValueTable'
 export { default as FormRadio } from './FormRadio/FormRadio'