groundfloor-react-ui 1.0.5 → 1.0.8

package/components/Inputs/CheckBoxInput.js

@@ -1,132 +1,201 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
-import tick from '../../assets/icons/checkmark.svg';
-
+// import tick from '../../assets/icons/checkmark.svg';
+import { Icon } from '../Icon';
 
 const CheckBoxOuter = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, defaultCheckBoxOuterStyle }) => {
+  box-sizing: initial;
+
+  //Set the styles from the default styles object
+  ${({ theme, defaultCheckBoxOuterStyle }) => {
         return getDefaultStyles(theme, defaultCheckBoxOuterStyle);
     }}
-    
-    border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) => checked ? checkedCheckBoxColor : defaultBorderColor};
-    
-    // custom styles
-    ${({ checkBoxOuterStyle }) => checkBoxOuterStyle}
+
+  border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) =>
+        checked ? checkedCheckBoxColor : defaultBorderColor};
+
+  // custom styles
+  ${({ checkBoxOuterStyle }) => checkBoxOuterStyle}
 `;
 
 const CheckBoxInner = styled.div`
-    //Set the styles from the default styles object
-    ${({ theme, defaultCheckBoxInnerStyle }) => {
+  box-sizing: initial;
+
+  //Set the styles from the default styles object
+  ${({ theme, defaultCheckBoxInnerStyle }) => {
         return getDefaultStyles(theme, defaultCheckBoxInnerStyle);
     }}
-    
-    background-image: url(${({ signCheck }) => signCheck});
-    background-color: ${({ checked, checkedCheckBoxColor }) => checked ? checkedCheckBoxColor : defaultThemeColor.bgColor};
-    border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) => checked ? checkedCheckBoxColor : defaultBorderColor};
-    
-    // custom styles
-    ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
-    
+
+  // background-image: url(${({ signCheck }) => signCheck});
+    background-color: ${({ checked, checkedCheckBoxColor }) =>
+        checked ? checkedCheckBoxColor : defaultThemeColor.bgColor};
+  border: 2px solid
+    ${({ checkedCheckBoxColor, defaultBorderColor, checked }) =>
+        checked ? checkedCheckBoxColor : defaultBorderColor};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // custom styles
+  ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
 `;
 CheckBoxInner.defaultProps = {
     themeColor: defaultThemeColor,
-    signCheck: `${tick}`
-}
+    // signCheck: `${tick}`
+};
 
 const OptionText = styled.span`
-
-    //Set the styles from the default styles object
-    ${({ theme, type }) => {
+  //Set the styles from the default styles object
+  ${({ theme, type }) => {
         return getDefaultStyles(theme, type);
     }}
-    
-    color: ${({ checked, defaultTextColor, checkedTextColor }) => checked ? checkedTextColor : defaultTextColor};
-    
-    margin-right: ${({ inline }) => inline ? '30px' : '0px'};
-    
-    // custom styles
-    ${({ optionTextStyle }) => optionTextStyle}
+
+  color: ${({ checked, defaultTextColor, checkedTextColor }) =>
+        checked ? checkedTextColor : defaultTextColor};
+
+  margin-right: ${({ inline }) => (inline ? '30px' : '0px')};
+
+  // custom styles
+  ${({ optionTextStyle }) => optionTextStyle}
 `;
 
 const WrapperDiv = styled.label`
-    width: fit-content;
-    margin-bottom: ${({ inline }) => !inline ? '18px !important' : ''};
-    cursor: pointer;
-    align-items: center;
-    display: flex;
-    gap: 10px;
-
-`
+  width: fit-content;
+  margin-bottom: ${({ inline }) => (!inline ? '18px !important' : '')};
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  gap: 10px;
+`;
 
 const ParentDiv = styled.div`
-    flex-direction: ${({ inline }) => inline ? "row" : "column"};
-    width: ${({ inline }) => !inline ? "auto" : "initial"};
-`
+  flex-direction: ${({ inline }) => (inline ? 'row' : 'column')};
+  width: ${({ inline }) => (!inline ? 'auto' : 'initial')};
+`;
 
+export const CheckBoxInput = ({
+    getCheckedArr,
+    checkBoxOuterStyle,
+    checkBoxInnerStyle,
+    optionTextStyle,
+    defaultBorderColor,
+    defaultTextColor,
+    checkedTextColor,
+    checkedCheckBoxColor,
+    labelStyle,
+    label,
+    options,
+    setOptions,
+    inline,
+    wrapperStyle,
+    ...props
+}) => {
+    useEffect(() => {
+        filterCheckedOptions(options);
+    }, []);
 
-export const CheckBoxInput = ({ checkBoxOuterStyle, checkBoxInnerStyle, optionTextStyle, defaultBorderColor, defaultTextColor, checkedTextColor, checkedCheckBoxColor, labelStyle, label, options, setOptions, inline, wrapperStyle, ...props }) => {
     const checkBox = (item, i) => {
-        let newOptions = [...options]
+        let newOptions = [...options];
         newOptions[i].checked = !item.checked;
         setOptions(newOptions);
-    }
+        filterCheckedOptions(newOptions);
+    };
+
+    const filterCheckedOptions = (newOptions) => {
+        let filteredOptions = newOptions.filter(
+            (option) => option.checked !== false
+        );
+        getCheckedArr(filteredOptions);
+    };
 
     const defaultStyleForWrapper = {
         display: 'flex',
         flexDirection: 'column',
-        flexWrap: 'wrap'
-    }
+        flexWrap: 'wrap',
+    };
     const returnedTarget = Object.assign(defaultStyleForWrapper, wrapperStyle);
 
-
     return (
-        <div style={returnedTarget}  {...props}>
+        <div style={returnedTarget} {...props}>
             <Label
                 themeColor={defaultThemeColor}
                 customStyles={labelStyle}
                 type={'check-label'}
                 text={label}
-                {...props} />
-            <ParentDiv style={{ display: 'flex', flexWrap: 'wrap' }} inline={inline} {...props}>
+                {...props}
+            />
+            <ParentDiv
+                style={{ display: 'flex', flexWrap: 'wrap' }}
+                inline={inline}
+                {...props}
+            >
                 {options?.map((item, i) => {
-                    return <WrapperDiv inline={inline} key={`${item.name}-${i}`}
-                        onClick={() => { checkBox(item, i) }}  {...props}>
-                        {item.checked ?
-                            <CheckBoxInner
-                                theme={defaultStyles}
-                                defaultCheckBoxInnerStyle={'checkBox-inner'}
-                                checkBoxInnerStyle={{ ...checkBoxInnerStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabled && item?.disabledColor }}
-                                defaultBorderColor={defaultBorderColor}
-                                checkedCheckBoxColor={checkedCheckBoxColor}
-                                checked={!item?.disabled && item.checked} {...props} />
-                            : <CheckBoxOuter
-                                theme={defaultStyles}
-                                defaultCheckBoxOuterStyle={'checkBox-outer'}
-                                checkBoxOuterStyle={{ ...checkBoxOuterStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabledColor }}
-                                defaultBorderColor={defaultBorderColor}
-                                {...props} />}
-                        <OptionText
+                    return (
+                        <WrapperDiv
                             inline={inline}
-                            optionTextStyle={{ ...optionTextStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', color: item?.disabledColor }}
-                            checked={item.checked}
-                            defaultTextColor={defaultTextColor}
-                            checkedTextColor={checkedTextColor}>{item.label}</OptionText>
-                    </WrapperDiv>
+                            key={`${item.name}-${i}`}
+                            onClick={() => {
+                                checkBox(item, i);
+                            }}
+                            {...props}
+                        >
+                            {item.checked ? (
+                                <CheckBoxInner
+                                    theme={defaultStyles}
+                                    defaultCheckBoxInnerStyle={'checkBox-inner'}
+                                    checkBoxInnerStyle={{
+                                        ...checkBoxInnerStyle,
+                                        cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                        borderColor: item?.disabled && item?.disabledColor,
+                                    }}
+                                    defaultBorderColor={defaultBorderColor}
+                                    checkedCheckBoxColor={checkedCheckBoxColor}
+                                    checked={!item?.disabled && item.checked}
+                                    {...props}
+                                >
+                                    <Icon icon='check-icon' size={18} color='white' />
+                                </CheckBoxInner>
+                            ) : (
+                                <CheckBoxOuter
+                                    theme={defaultStyles}
+                                    defaultCheckBoxOuterStyle={'checkBox-outer'}
+                                    checkBoxOuterStyle={{
+                                        ...checkBoxOuterStyle,
+                                        cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                        borderColor: item?.disabledColor,
+                                    }}
+                                    defaultBorderColor={defaultBorderColor}
+                                    {...props}
+                                />
+                            )}
+                            <OptionText
+                                inline={inline}
+                                optionTextStyle={{
+                                    ...optionTextStyle,
+                                    cursor: item?.disabled ? 'not-allowed ' : ' pointer',
+                                    color: item?.disabledColor,
+                                }}
+                                checked={item.checked}
+                                defaultTextColor={defaultTextColor}
+                                checkedTextColor={checkedTextColor}
+                            >
+                                {item.label}
+                            </OptionText>
+                        </WrapperDiv>
+                    );
                 })}
             </ParentDiv>
         </div>
-    )
-}
+    );
+};
 
 CheckBoxInput.propTypes = {
     /**
-     *	Style Custom for whole Checkbox Block 
+     *	Style Custom for whole Checkbox Block
      */
     wrapperStyle: PropTypes.object,
     /**
@@ -177,13 +246,18 @@ CheckBoxInput.propTypes = {
      *	CheckBox value changeHandler
      */
     setOptions: PropTypes.func,
-}
+    /**
+     *	CheckBox checked value changeHandler
+     */
+    getCheckedArr: PropTypes.func,
+};
 
 CheckBoxInput.defaultProps = {
     label: '',
     inline: false,
     options: [],
     setOptions: () => { },
+    getCheckedArr: () => { },
     labelStyle: {},
     checkBoxOuterStyle: {},
     checkBoxInnerStyle: {},
@@ -191,5 +265,4 @@ CheckBoxInput.defaultProps = {
     checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
     defaultBorderColor: '#D4D7E3',
     checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']}`,
-}
-
+};