From 936f5c7c050259dd027f28effc46cffa4203fb94 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Tue, 19 Jul 2022 23:39:38 +0300 Subject: [PATCH 1/2] Impl [Form] New Select all checbox component --- .../components/FormCheckBox/FormCheckBox.js | 47 ++++++++-------- .../FormCheckBox/FormCheckBoxAll.js | 56 +++++++++++++++++++ .../FormCheckBox/FormCheckBoxAll.scss | 24 ++++++++ .../components/FormCheckBox/formCheckBox.scss | 28 +++++----- src/lib/components/index.js | 1 + 5 files changed, 120 insertions(+), 36 deletions(-) create mode 100644 src/lib/components/FormCheckBox/FormCheckBoxAll.js create mode 100644 src/lib/components/FormCheckBox/FormCheckBoxAll.scss diff --git a/src/lib/components/FormCheckBox/FormCheckBox.js b/src/lib/components/FormCheckBox/FormCheckBox.js index 36b75717..5bbde911 100644 --- a/src/lib/components/FormCheckBox/FormCheckBox.js +++ b/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 ( - - {({ input }) => ( -
- - -
- )} - - ) -} + return ( + + {({ input }) => ( +
+ + +
+ )} + + ) + } +) FormCheckBox.defaultProps = { className: '', diff --git a/src/lib/components/FormCheckBox/FormCheckBoxAll.js b/src/lib/components/FormCheckBox/FormCheckBoxAll.js new file mode 100644 index 00000000..4adbdd64 --- /dev/null +++ b/src/lib/components/FormCheckBox/FormCheckBoxAll.js @@ -0,0 +1,56 @@ +import { useRef } from 'react' +import { FormSpy, Field } from 'react-final-form' +import { OnChange } from 'react-final-form-listeners' + +import FormCheckBox from './FormCheckBox' + +import './FormCheckBoxAll.scss' + +const CheckAll = ({ name = 'selectAll', listenTo, allCheckboxes, ...inputProps }) => { + // const allCheckboxes = Array.from(document.querySelectorAll(`input[name=${listenTo}]`)).map( + // i => i.value + // ) + const checkAllRef = useRef() + + return ( + + {({ input }) => { + return ( + + {({ form }) => ( + <> + + {(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) + } + }} + + + + {(value) => { + if (!value && checkAllRef.current.classList.contains('partial-select')) { + return form.change(listenTo, allCheckboxes) + } + return form.change(listenTo, value ? allCheckboxes : []) + }} + + + + )} + + ) + }} + + ) +} + +export default CheckAll diff --git a/src/lib/components/FormCheckBox/FormCheckBoxAll.scss b/src/lib/components/FormCheckBox/FormCheckBoxAll.scss new file mode 100644 index 00000000..6bac515a --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/lib/components/FormCheckBox/formCheckBox.scss b/src/lib/components/FormCheckBox/formCheckBox.scss index 5858833d..8fc07541 100644 --- a/src/lib/components/FormCheckBox/formCheckBox.scss +++ b/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; diff --git a/src/lib/components/index.js b/src/lib/components/index.js index c286d8b3..dffd09f6 100644 --- a/src/lib/components/index.js +++ b/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' From b573c690cc6de67b42df263c4ef977c6238bab55 Mon Sep 17 00:00:00 2001 From: ilan7empest Date: Wed, 20 Jul 2022 09:25:47 +0300 Subject: [PATCH 2/2] Add propTypes --- .../components/FormCheckBox/FormCheckBoxAll.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/lib/components/FormCheckBox/FormCheckBoxAll.js b/src/lib/components/FormCheckBox/FormCheckBoxAll.js index 4adbdd64..a9a3707d 100644 --- a/src/lib/components/FormCheckBox/FormCheckBoxAll.js +++ b/src/lib/components/FormCheckBox/FormCheckBoxAll.js @@ -1,4 +1,5 @@ import { useRef } from 'react' +import PropTypes from 'prop-types' import { FormSpy, Field } from 'react-final-form' import { OnChange } from 'react-final-form-listeners' @@ -6,7 +7,7 @@ import FormCheckBox from './FormCheckBox' import './FormCheckBoxAll.scss' -const CheckAll = ({ name = 'selectAll', listenTo, allCheckboxes, ...inputProps }) => { +const FormCheckBoxAll = ({ name, listenTo, allCheckboxes, ...inputProps }) => { // const allCheckboxes = Array.from(document.querySelectorAll(`input[name=${listenTo}]`)).map( // i => i.value // ) @@ -53,4 +54,14 @@ const CheckAll = ({ name = 'selectAll', listenTo, allCheckboxes, ...inputProps } ) } -export default CheckAll +FormCheckBoxAll.defaultProps = { + name: 'selectAll' +} + +FormCheckBoxAll.propTypes = { + allCheckboxes: PropTypes.arrayOf(PropTypes.string).isRequired, + listenTo: PropTypes.string.isRequired, + name: PropTypes.string +} + +export default FormCheckBoxAll