groundfloor-react-ui 1.0.19 → 1.0.20

package/components/Inputs/ToggleSwitch.js

@@ -1,85 +1,116 @@
-import React from "react";
-import styled from "styled-components";
 import PropTypes from 'prop-types';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
 import defaultThemeColor from '../constants/defaultThemeColor';
+import getDefaultStyles from '../constants/utils';
 
 const CheckBoxWrapper = styled.div`
-  ${({ theme, defaultCheckBoxWrapperStyle }) => {
-        return getDefaultStyles(theme, defaultCheckBoxWrapperStyle);
+  ${({ inBuiltCss, defaultCheckBoxWrapperStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultCheckBoxWrapperStyle);
     }}
 `;
 const CheckBoxLabel = styled.label`
-    //Set the styles from the default styles object
-    ${({ theme, defaultCheckBoxLabelStyle }) => {
-        return getDefaultStyles(theme, defaultCheckBoxLabelStyle);
+  //Set the styles from the default styles object
+  ${({ inBuiltCss, defaultCheckBoxLabelStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultCheckBoxLabelStyle);
     }}
-    background-color: ${({ checked, backgroundColor, disabledColor }) => checked ?
-        backgroundColor : disabledColor};
+  background-color: ${({ checked, backgroundColor, disabledColor, theme }) => {
+        if (checked && backgroundColor) return backgroundColor;
+        else if (checked && !backgroundColor) return theme.primary['primary-1'];
+        else if (!checked && disabledColor) return disabledColor;
+        else if (!checked && !disabledColor) return theme.neutral['neutral-2'];
+    }};
+  // custom styles
+  ${({ customToggleBoxStyle }) => customToggleBoxStyle}
+  &:before {
+    content: '';
+    display: block;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    margin-top: 3px;
+    background: ${({ switchColor, theme }) =>
+        switchColor ? switchColor : theme.bgColor};
+    transition: 0.2s;
+    margin-left: ${({ checked }) => (checked ? '4px' : '25px')};
+
     // custom styles
-    ${({ customToggleBoxStyle }) => customToggleBoxStyle} 
-    &:before {
-        content: "";
-        display: block;
-        border-radius: 50%;
-        width: 16px;
-        height: 16px;
-        margin-top: 3px;
-        background: ${({ switchColor }) => switchColor};
-        transition: 0.2s;
-        margin-left: ${({ checked }) => checked ? '4px' : '25px'};
-        
-        // custom styles
-        ${({ customSwitchStyle }) => customSwitchStyle}
-    }
+    ${({ customSwitchStyle }) => customSwitchStyle}
+  }
 `;
 
-
-
-const CheckBox = styled.input.attrs({ type: "checkbox" })`
-    opacity: 0;
-    z-index: 1;
-    border-radius: 31px;
-    width: 45px;
-    height: 22px;
-    cursor: pointer;
+const CheckBox = styled.input.attrs({ type: 'checkbox' })`
+  opacity: 0;
+  z-index: 1;
+  border-radius: 31px;
+  width: 45px;
+  height: 22px;
+  cursor: pointer;
 `;
 
 const OptionText = styled.span`
-    //Set the styles from the default styles object
-    ${({ theme, defaultOptionTextStyle }) => {
-        return getDefaultStyles(theme, defaultOptionTextStyle);
+  //Set the styles from the default styles object
+  ${({ inBuiltCss, defaultOptionTextStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultOptionTextStyle);
     }}
-    
-    // custom styles
+
+  // custom styles
     ${({ optionStyle }) => optionStyle}
 `;
 
-export const ToggleSwitch = ({ checked, customSwitchStyle, customToggleBoxStyle, backgroundColor, disabledColor, switchColor, onClick, trueLabel, falseLabel, optionStyle, ...props }) => {
+export const ToggleSwitch = ({
+    checked,
+    customSwitchStyle,
+    customToggleBoxStyle,
+    backgroundColor,
+    disabledColor,
+    switchColor,
+    onClick,
+    trueLabel,
+    falseLabel,
+    optionStyle,
+    ...props
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
-        <CheckBoxWrapper theme={defaultStyles} defaultCheckBoxWrapperStyle={'toggle-switch-wrapper'} {...props} >
-            <CheckBox {...props}
-                id="checkbox"
-                theme={defaultStyles}
+        <CheckBoxWrapper
+            inBuiltCss={defaultStyles}
+            defaultCheckBoxWrapperStyle={'toggle-switch-wrapper'}
+            {...props}
+        >
+            <CheckBox
+                {...props}
+                id='checkbox'
+                inBuiltCss={defaultStyles}
                 defaultCheckBoxStyle={'toggle-switch-checkbox'}
-                onClick={() => { onClick(!checked) }}
+                onClick={() => {
+                    onClick(!checked);
+                }}
                 isChecked={checked}
             />
-            <CheckBoxLabel {...props}
-                htmlFor="checkbox"
+            <CheckBoxLabel
+                {...props}
+                htmlFor='checkbox'
                 customToggleBoxStyle={customToggleBoxStyle}
                 customSwitchStyle={customSwitchStyle}
                 disabledColor={disabledColor}
                 backgroundColor={backgroundColor}
                 switchColor={switchColor}
-                theme={defaultStyles}
+                inBuiltCss={defaultStyles}
                 defaultCheckBoxLabelStyle={'toggle-switch-checkbox-label'}
                 checked={checked}
+                theme={activeTheme}
             />
-            <OptionText optionStyle={optionStyle}
-                theme={defaultStyles}
-                defaultOptionTextStyle={'toggle-switch-option-text'} {...props} >{checked ? trueLabel : falseLabel}</OptionText>
+            <OptionText
+                optionStyle={optionStyle}
+                inBuiltCss={defaultStyles}
+                defaultOptionTextStyle={'toggle-switch-option-text'}
+                {...props}
+            >
+                {checked ? trueLabel : falseLabel}
+            </OptionText>
         </CheckBoxWrapper>
     );
 };
@@ -103,21 +134,18 @@ ToggleSwitch.propTypes = {
     checked: PropTypes.bool,
     /**
      *	 label when toggle state is checked
-    * */
+     * */
     trueLabel: PropTypes.string,
     /**
      *	 label when toggle state is not checked
-    * */
+     * */
     falseLabel: PropTypes.string,
-}
+};
 
 ToggleSwitch.defaultProps = {
-    backgroundColor: `${defaultThemeColor.primary['primary-1']}`,
-    switchColor: `${defaultThemeColor.bgColor}`,
-    disabledColor: `${defaultThemeColor.neutral['neutral-2']}`,
     checked: false,
     trueLabel: 'Yes',
     falseLabel: 'No',
     customSwitchStyle: {},
-    customToggleBoxStyle: {}
-}
+    customToggleBoxStyle: {},
+};

package/components/Modal/ModalComp.js

@@ -1,11 +1,11 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import Modal from 'react-modal';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
-import PropTypes from 'prop-types';
 import { Icon } from '../Icon';
-import defaultThemeColor from '../constants/defaultThemeColor';
 
 const customStyles = {
   overlay: {
@@ -21,8 +21,9 @@ const customStyles = {
     marginRight: '-50%',
     padding: '0px',
     transform: 'translate(-50%, -50%)',
-    maxHeight: '75vh',
     minWidth: '40vw',
+    maxHeight: '85vh',
+    overflow: 'hidden',
   },
 };
 
@@ -56,6 +57,7 @@ const ModalHeader = styled.div`
   ${({ customModalHeaderStyle }) => customModalHeaderStyle}
 `;
 const ModalBody = styled.div`
+
   //Set the styles from the default styles object
   ${({ theme, type }) => {
     return getDefaultStyles(theme, type);
@@ -64,6 +66,11 @@ const ModalBody = styled.div`
     ${({ customModalBodyStyle }) => customModalBodyStyle}
 `;
 
+const ContentWrapper = styled.div`
+  max-height: 60vh;
+  overflow-y: scroll;
+`
+
 const ModalFooter = styled.div`
   //Set the styles from the default styles object
   ${({ theme, type }) => {
@@ -74,9 +81,19 @@ const ModalFooter = styled.div`
 `;
 
 const CommonDiv = styled.div`
-      padding: 2rem 3rem 0rem 3rem;
+      padding: .5rem 3rem 0rem 3rem;
 `;
 
+const HeaderWrapper = styled.div`
+  position: sticky;
+  background-color: ${({ theme }) => theme.bgColor}; 
+  width: 100%; 
+  top: 0px;
+  border-bottom: 1px solid     ${({ theme }) => theme.border}
+
+`
+
+
 try {
   Modal.setAppElement('#root')
 
@@ -84,6 +101,7 @@ try {
   Modal.setAppElement('#__next')
 }
 
+
 export const ModalComp = ({
   modalIsOpen,
   toggleModal,
@@ -97,6 +115,8 @@ export const ModalComp = ({
   customModalFooterStyle,
   ...props
 }) => {
+  const activeTheme = useTheme() || defaultThemeColor;
+
   return (
     <Modal
       isOpen={modalIsOpen}
@@ -105,38 +125,42 @@ export const ModalComp = ({
       contentLabel='Modal'
       {...props}
     >
-      <ModalClose
-        theme={defaultStyles}
-        type={'modalComp-modal-close'}
-        style={customModalCloseStyle}
-        onClick={toggleModal}
-      >
-        <Icon
-          icon='cross-icon'
-          color={defaultThemeColor.neutral['neutral-2']}
-          size={15}
-        />
-      </ModalClose>
-
-      <ModalHeader style={customModalHeaderStyle}>
-        <CommonDiv>{headerContent}</CommonDiv>
-      </ModalHeader>
-      <ModalBody
-        theme={defaultStyles}
-        type={'modalComp-modal-body'}
-        style={customModalBodyStyle}
-      >
-        <CommonDiv>        {bodyContent}
-        </CommonDiv>
-      </ModalBody>
-
-      <ModalFooter
-        theme={defaultStyles}
-        type={'modalComp-modal-footer'}
-        style={customModalFooterStyle}
-      >
-        {footerContent}
-      </ModalFooter>
+      <HeaderWrapper theme={activeTheme}>
+        <ModalClose
+          theme={defaultStyles}
+          type={'modalComp-modal-close'}
+          style={customModalCloseStyle}
+          onClick={toggleModal}
+        >
+          <Icon
+            icon='cross-icon'
+            color={defaultThemeColor.neutral['neutral-2']}
+            size={15}
+          />
+        </ModalClose>
+
+        <ModalHeader style={customModalHeaderStyle}>
+          <CommonDiv>{headerContent}</CommonDiv>
+        </ModalHeader>
+      </HeaderWrapper>
+      <ContentWrapper>
+        <ModalBody
+          theme={defaultStyles}
+          type={'modalComp-modal-body'}
+          style={customModalBodyStyle}
+        >
+          <CommonDiv>        {bodyContent}
+          </CommonDiv>
+        </ModalBody>
+
+        <ModalFooter
+          theme={defaultStyles}
+          type={'modalComp-modal-footer'}
+          style={customModalFooterStyle}
+        >
+          {footerContent}
+        </ModalFooter>
+      </ContentWrapper>
     </Modal>
   );
 };

package/components/Pagination/Pagination.js

@@ -1,83 +1,59 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledPagination = styled.div`
-    display: flex;
-    align-items: center;
-    color: ${({ theme }) => theme.variant['neutral-2']};
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.variant['neutral-2']};
 `;
 
-StyledPagination.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 export const Pagination = ({ ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     return (
-        <StyledPagination>
-            {props.children}
-        </ StyledPagination>
+        <StyledPagination theme={activeTheme}>{props.children}</StyledPagination>
     );
 };
 
-Pagination.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-}
-
-Pagination.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 const Item = styled.div`
-    font-size: 14px;
-    color: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : null};
-
-    svg {
-        width: 14px;
-        height: 14px;
-        path {
-            fill: ${({ selected, theme }) => selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
-        } 
+  font-size: 14px;
+  color: ${({ selected, theme }) =>
+        selected ? theme.variant['primary-1'] : null};
+
+  svg {
+    width: 14px;
+    height: 14px;
+    path {
+      fill: ${({ selected, theme }) =>
+        selected ? theme.variant['primary-1'] : theme.variant['neutral-2']};
     }
+  }
 
-    cursor: pointer;
-    &:not(:first-child):not(:last-child) {
-        margin: 0 22px;
-    }
+  cursor: pointer;
+  &:not(:first-child):not(:last-child) {
+    margin: 0 22px;
+  }
 `;
 
-Item.defaultProps = {
-    theme: defaultThemeColor,
-}
-
 Pagination.PageItem = function PageItem({ selected, ...props }) {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
-        <Item selected={selected} {...props}>
+        <Item selected={selected} theme={activeTheme} {...props}>
             {props.children}
         </Item>
-    )
-}
+    );
+};
 
 Pagination.PageItem.propTypes = {
-    /**
-     *	Theme props
-    */
-    theme: PropTypes.object,
     /**
      *	Is Page selected?
-    */
+     */
     selected: PropTypes.bool,
-}
+};
 
 Pagination.PageItem.defaultProps = {
-    theme: defaultThemeColor,
     selected: false,
-}
-
-
-
+};

package/components/ProgressBar/ProgressBar.js

@@ -1,47 +1,68 @@
-import React from "react";
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
+import { hexToRGB } from '../constants/utils';
 import { Label } from '../Label';
-import { hexToRGB } from "../constants/utils";
 
 const WrapperDiv = styled.div`
-    //Set the styles from the default styles object
-    ${ ({ theme, type }) => {
-            return getDefaultStyles(theme, type);
-    }}
-    background-color: ${({ color }) => color? 
-        hexToRGB(color, 0.5) : 
-            defaultThemeColor.primary['primary-1']};
+  height: 10px;
+  border-radius: 10px;
+  margin-top: 13px;
+  margin-left: 13px;
+  margin-right: 13px;
+  width: inherit;
+  background-color: ${({ color, theme }) =>
+        color ? hexToRGB(color, 0.5) : hexToRGB(theme.primary['primary-1'], 0.5)};
 `;
 
 const Container = styled.div`
-    //Set the styles from the default styles object
-        ${ ({ theme, type }) => {
-        return getDefaultStyles(theme, type);
-    }}
-        
-    // custom styles
-    ${({ progressBarStyle }) => progressBarStyle}
-    width: ${({now }) => now+'%'};
-    background-color: ${({ color }) => color ?color :defaultThemeColor.primary['primary-1']};
+  height: inherit;
+  width: inherit;
+  transition: width 1s ease-in-out;
+  border-radius: inherit;
+  text-align: right;
+
+  // custom styles
+  ${({ progressBarStyle }) => progressBarStyle}
+  width: ${({ now }) => now + '%'};
+  background-color: ${({ color, theme }) =>
+        color ? color : theme.primary['primary-1']};
 `;
 
-export const ProgressBar = ({ labelStyle,progressBarStyle,label,now,color,...props}) => {
+export const ProgressBar = ({
+    labelStyle,
+    progressBarStyle,
+    label,
+    now,
+    color,
+    ...props
+}) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
         <div>
             <Label
-                theme={defaultStyles}
+                inBuiltCss={defaultStyles}
                 customStyles={labelStyle}
                 type={'progressbarLabel'}
                 text={label}
-                {...props} />
-            <WrapperDiv progressBarStyle={progressBarStyle} theme={defaultStyles} 
-                type={'progressWrapper'} color={color} {...props}>
-                <Container progressBarStyle={progressBarStyle} now={now} theme={defaultStyles} 
-                    type={'containerWrapper'} color={color} {...props}/>
+                {...props}
+            />
+            <WrapperDiv
+                progressBarStyle={progressBarStyle}
+                theme={activeTheme}
+                color={color}
+                {...props}
+            >
+                <Container
+                    progressBarStyle={progressBarStyle}
+                    now={now}
+                    theme={activeTheme}
+                    color={color}
+                    {...props}
+                />
             </WrapperDiv>
         </div>
     );
@@ -49,19 +70,19 @@ export const ProgressBar = ({ labelStyle,progressBarStyle,label,now,color,...pro
 
 ProgressBar.propTypes = {
     /**
-     *	Custom style of the lable of the progressbar
+     *	Custom style of the label of the progressBar
      */
     labelStyle: PropTypes.object,
     /**
-     *	Custom style of the progressbar
+     *	Custom style of the progressBar
      */
     progressBarStyle: PropTypes.object,
-    
+
     /**
-     *	Custom color(HEX format) of the progressbar
+     *	Custom color(HEX format) of the progressBar
      */
     color: PropTypes.string,
-    
+
     /**
      *	label props
      */
@@ -73,12 +94,8 @@ ProgressBar.propTypes = {
 };
 
 ProgressBar.defaultProps = {
-    labelStyle:{},
+    labelStyle: {},
     progressBarStyle: {},
-    label:'',
-    now:0,
-    color: "#2E56F4"
-};
-
-
-
+    label: '',
+    now: 0,
+};

package/components/Rating/Rating.js

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
+import React, { useEffect, useState } from 'react';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
 
 const StyledContainer = styled.div`
     box-sizing: border-box;
@@ -112,7 +111,6 @@ function getPercentage(value, maxRange) {
 }
 
 export const Rating = ({
-    theme,
     type,
     customStylesContainer,
     customStylesStar,
@@ -127,6 +125,7 @@ export const Rating = ({
     toggleSet,
     identifier,
     ...props }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
 
     const [starArr, setStarArr] = useState(undefined);
     const [starVal, setStarVal] = useState(undefined);
@@ -182,18 +181,15 @@ export const Rating = ({
         </>
 
     return (
-        <StyledContainer theme={theme} customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
+        <StyledContainer customStyles={customStylesContainer} type={type} size={size} {...props} className={'container'} >
             {toggleStar ? stars :
-                <StyledPercentage theme={theme} type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
+                <StyledPercentage type={type} customStyles={customStylesPercentage}>{percentage}%</StyledPercentage>}
         </StyledContainer>
     )
 }
 
 Rating.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
+
     /**
      *	Custom style object for container
      */
@@ -249,7 +245,6 @@ Rating.propTypes = {
 }
 
 Rating.defaultProps = {
-    theme: defaultStyles,
     customStylesContainer: null,
     customStylesStar: null,
     customStylesPercentage: null,
@@ -260,5 +255,4 @@ Rating.defaultProps = {
     toggleStar: true,
     toggleSet: false,
     color: '#F7B001'
-}
-
+}