groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Inputs/TimeInput.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
@@ -8,7 +8,7 @@ const TextBox = styled.div`
   font-size: 21px;
   border: 1px solid
     ${({ theme, isValid }) =>
-        isValid ? defaultThemeColor.border : theme.variant['error']};
+    isValid ? defaultThemeColor.border : theme.variant['error']};
   border-radius: 4px;
   padding: 5px;
   display: inline-block;
@@ -20,10 +20,6 @@ const TextBox = styled.div`
   }
 `;
 
-TextBox.defaultProps = {
-    theme: defaultThemeColor,
-};
-
 const Input = styled.input`
   border: 0;
   outline: 0;
@@ -32,12 +28,10 @@ const Input = styled.input`
   padding: 0;
   font-size: 21px;
   width: 24px;
+  text-align:center;
   background-color: ${({ theme }) => theme.bgColor};
 `;
 
-Input.defaultProps = {
-    theme: defaultThemeColor,
-};
 
 const requiredAsterisk = css`
   &:after {
@@ -49,16 +43,14 @@ const requiredAsterisk = css`
 const Label = styled.label`
   display: block;
   margin-bottom: ${({ labelInline, errMsg }) =>
-        labelInline && errMsg ? '18px' : '7px'};
+    labelInline && errMsg ? '18px' : '7px'};
   margin-right: ${({ labelInline }) => (labelInline ? '7px' : '')};
   color: ${({ theme }) => theme.variant['neutral-2']};
   ${({ required }) => (required ? requiredAsterisk : null)}
   padding-bottom: 0px;
 `;
 
-Label.defaultProps = {
-    theme: defaultThemeColor,
-};
+
 
 const inline = css`
   display: flex;
@@ -78,9 +70,6 @@ const Form = styled.div`
   }
 `;
 
-Form.defaultProps = {
-    theme: defaultThemeColor,
-};
 
 const Button = styled.button`
   border: none;
@@ -93,103 +82,99 @@ const Button = styled.button`
   cursor: pointer;
 `;
 
-Button.defaultProps = {
-    theme: defaultThemeColor,
-};
-
 export const TimeInput = ({
-    label,
-    errMsg,
-    hour,
-    minute,
-    period,
-    onChange,
-    ...props
+  label,
+  errMsg,
+  hour,
+  minute,
+  period,
+  onChange,
+  ...props
 }) => {
-    const theme = useTheme() || defaultThemeColor;
-
-    function hourChange(evt) {
-        const num =
-            evt.currentTarget.value > 12
-                ? 12
-                : parseFloat(evt.currentTarget.value) || 0;
-        onChange({ hour: num, minute, period });
-    }
-
-    function minuteChange(evt) {
-        console.log('minute change', evt.currentTarget.value);
-        const num =
-            evt.currentTarget.value > 59
-                ? 59
-                : parseFloat(evt.currentTarget.value) || 0;
-        onChange({ hour, minute: num, period });
-    }
-
-    function periodChange(evt) {
-        const p = period === 'AM' ? 'PM' : 'AM';
-        onChange({ hour, minute, period: p });
-    }
-
-    return (
-        <Form {...props}>
-            <Label {...props} errMsg={errMsg}>
-                {label}
-            </Label>
-            <div>
-                <TextBox {...props}>
-                    <Input value={hour} onChange={hourChange} />
-                    :
-                    <Input value={minute} onChange={minuteChange} />
-                    <Button onClick={periodChange}>{period}</Button>
-                </TextBox>
-                <div className='err-text'>{errMsg}</div>
-            </div>
-        </Form>
-    );
+  const activeTheme = useTheme() || defaultThemeColor;
+
+  function hourChange(evt) {
+    const num =
+      evt.currentTarget.value > 12
+        ? 12
+        : parseFloat(evt.currentTarget.value) || 0;
+    onChange({ hour: num, minute, period });
+  }
+
+  function minuteChange(evt) {
+    console.log('minute change', evt.currentTarget.value);
+    const num =
+      evt.currentTarget.value > 59
+        ? 59
+        : parseFloat(evt.currentTarget.value) || 0;
+    onChange({ hour, minute: num, period });
+  }
+
+  function periodChange(evt) {
+    const p = period === 'AM' ? 'PM' : 'AM';
+    onChange({ hour, minute, period: p });
+  }
+
+  return (
+    <Form theme={activeTheme} {...props}>
+      <Label theme={activeTheme} {...props} errMsg={errMsg}>
+        {label}
+      </Label>
+      <div>
+        <TextBox theme={activeTheme} {...props}>
+          <Input theme={activeTheme} value={hour} onChange={hourChange} />
+          :
+          <Input theme={activeTheme} value={minute} onChange={minuteChange} />
+          <Button theme={activeTheme} onClick={periodChange}>{period}</Button>
+        </TextBox>
+        <div className='err-text'>{errMsg}</div>
+      </div>
+    </Form>
+  );
 };
 
 TimeInput.propTypes = {
-    /**
-     *	Label of Input
-     */
-    label: PropTypes.string,
-    /**
-     *	Hour value
-     */
-    hour: PropTypes.number.isRequired,
-    /**
-     *	Minute value
-     */
-    minute: PropTypes.number.isRequired,
-    /**
-     *	AM or PM ?
-     */
-    period: PropTypes.string.isRequired,
-    /**
-     *	Is the input required?
-     */
-    required: PropTypes.bool,
-    /**
-     *	Should label be inline?
-     */
-    labelInline: PropTypes.bool,
-    /**
-     *	Is the input correct?
-     */
-    isValid: PropTypes.bool,
-    /**
-     *	Error Message
-     */
-    errMsg: PropTypes.string,
+  /**
+   *	Label of Input
+   */
+  label: PropTypes.string,
+  /**
+   *	Hour value
+   */
+  hour: PropTypes.number.isRequired,
+  /**
+   *	Minute value
+   */
+  minute: PropTypes.number.isRequired,
+  /**
+   *	AM or PM ?
+   */
+  period: PropTypes.string.isRequired,
+  /**
+   *	Is the input required?
+   */
+  required: PropTypes.bool,
+  /**
+   *	Should label be inline?
+   */
+  labelInline: PropTypes.bool,
+  /**
+   *	Is the input correct?
+   */
+  isValid: PropTypes.bool,
+  /**
+   *	Error Message
+   */
+  errMsg: PropTypes.string,
 };
 
 TimeInput.defaultProps = {
-    label: '',
-    hour: 0,
-    minute: 0,
-    period: 'AM',
-    required: false,
-    labelInline: false,
-    isValid: true,
-    errMsg: '',
+  label: '',
+  hour: 0,
+  minute: 0,
+  period: 'AM',
+  required: false,
+  labelInline: false,
+  isValid: true,
+  errMsg: '',
 };

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>
   );
 };