groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Inputs/DropdownSelect.js

@@ -1,13 +1,13 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import React from 'react';
 import Select, { components } from 'react-select';
-import defaultThemeColor from '../constants/defaultThemeColor';
+import AsyncSelect from 'react-select/async';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
-import { Label } from '../Label';
 import { Icon } from '../Icon';
-import AsyncSelect from 'react-select/async';
+import { Label } from '../Label';
 
 const Wrapper = styled.div`
 
@@ -57,7 +57,7 @@ const Wrapper = styled.div`
 
         .master-dropdown__option,
         .new-select__option {
-            color: ${defaultThemeColor.textColor};
+            color:  ${({ theme }) => theme.textColor}; 
             padding-top: 3px;
             padding-bottom: 3px;
             margin: 8px 0;
@@ -71,7 +71,7 @@ const Wrapper = styled.div`
         .master-dropdown__option:hover,
         .new-select__option--is-focused,
         .new-select__option:hover {
-            background-color: ${defaultThemeColor.neutral['neutral-5']};
+            background-color: ${({ theme }) => theme.neutral['neutral-5']}; 
             cursor: pointer;
         }
        
@@ -115,12 +115,12 @@ const Wrapper = styled.div`
        
 
         .text-main-alt {
-            color: ${defaultThemeColor.textColor} !important;
+            color:${({ theme }) => theme.textColor} !important;
             margin-right: 2px;
         }
         .text-more-alt{
             font-size:12px;
-            color:#6B747F
+            color: ${({ theme }) => theme.neutral['neutral-2']};
 
         }
         .css-mohuvp-dummyInput-DummyInput{
@@ -143,16 +143,23 @@ const Wrapper = styled.div`
             margin:0px;
             padding:0px;
         }
-    
+        .new-select__control:hover,
+        .new-select__control--is-focused {
+          border: 1px solid ${({ theme }) => theme.primary['primary-1']};
+        }
 `;
 
+Wrapper.defaultProps = {
+  theme: defaultThemeColor,
+};
+
 const LabelWrapper = styled.div`
   // Default style
   display: flex;
 
   //Set the styles from the default styles object
-  ${({ theme, labelWrapperStyle }) => {
-    return getDefaultStyles(theme, labelWrapperStyle);
+  ${({ inBuiltCss, labelWrapperStyle }) => {
+    return getDefaultStyles(inBuiltCss, labelWrapperStyle);
   }}
   // custom styles
     ${({ customLabelStyles }) => customLabelStyles}
@@ -164,31 +171,36 @@ const IconDiv = styled.div`
 `;
 
 export const DropdownSelect = ({
-  customWrapperStyles,
-  customLabelStyles,
-  labelStyle,
   label,
-  isRequired,
+  labelStyle,
   optionArr,
   selectedValue,
   setSelectedValue,
   placeHolder,
-  dropdownType,
-  isDisabled,
-  isValid,
-  clearSelected,
   isClearable,
-  isLoading,
+  isValid,
   height,
   fontSize,
   loadOptions,
   onInputChange,
+  clearSelected,
+  customWrapperStyles,
+  customLabelStyles,
+  isRequired,
+  dropdownType,
+  isDisabled,
+
+  isLoading,
+
   ...props
 }) => {
+
+  const activeTheme = useTheme() || defaultThemeColor
+
   const DropdownIndicator = (p) => {
     return (
       <components.DropdownIndicator {...p}>
-        {true ? (
+        {isClearable ? (
           <IconDiv
             onClick={() => {
               clearSelected();
@@ -218,7 +230,7 @@ export const DropdownSelect = ({
       <div
         style={{
           ...checkboxStyle,
-          backgroundColor: p?.data?.color ?? '#2E56F4',
+          backgroundColor: p?.data?.color ?? activeTheme.primary['primary-1'],
         }}
       >
         <Icon icon='check-icon' color='white' />
@@ -265,8 +277,10 @@ export const DropdownSelect = ({
     control: (base, state) => ({
       ...base,
       border: !isValid
-        ? '1px solid ' + defaultThemeColor.ui['error']
-        : '1px solid ' + defaultThemeColor.border,
+        ? '1px solid ' + activeTheme.ui['error']
+        : '1px solid ' + activeTheme.border,
+      // border: state.isFocused ? '4px solid red' : '4px solid green',
+
       height: `${height}px`,
       minHeight: `${height}px`,
       boxShadow: (state.isSelected || state.isFocused) && 'none',
@@ -319,7 +333,7 @@ export const DropdownSelect = ({
     option: (provided, state) => ({
       ...provided,
       backgroundColor:
-        state.isSelected || state.isFocused ? '#F0F3F8' : 'white',
+        state.isSelected || state.isFocused ? activeTheme.neutral['neutral-5'] : activeTheme.bgColor,
       padding: '10px',
       cursor: 'pointer',
       color: '#081348',
@@ -327,15 +341,14 @@ export const DropdownSelect = ({
     ...props.styles,
   };
   return (
-    <Wrapper style={customWrapperStyles} isValid={isValid} fontSize={fontSize}>
+    <Wrapper style={customWrapperStyles} isValid={isValid} fontSize={fontSize} theme={activeTheme}>
       {label && (
         <LabelWrapper
-          theme={defaultStyles}
+          inBuiltCss={defaultStyles}
           labelWrapperStyle={'selectComp-label-wrapper'}
           style={customLabelStyles}
         >
           <Label
-            themeColor={defaultThemeColor}
             customStyles={labelStyle}
             type={'label-text'}
             text={label}
@@ -345,7 +358,7 @@ export const DropdownSelect = ({
             <div
               style={{
                 marginLeft: '4px',
-                color: `${defaultThemeColor.ui['error']}`,
+                color: `${activeTheme.ui['error']}`,
               }}
             >
               *
@@ -498,6 +511,43 @@ DropdownSelect.propTypes = {
    *   onchange function
    */
   onInputChange: PropTypes.func,
+  /**
+   *   wrapper styles
+   */
+  customWrapperStyles: PropTypes.object,
+  /**
+ *   label styles
+ */
+  customLabelStyles: PropTypes.object,
+  /**
+*   Mandatory or not
+*/
+  isRequired: PropTypes.bool,
+  /**
+*   default dropdown type
+*/
+  dropdownType: PropTypes.bool,
+  /**
+*   disabled or not
+*/
+  isDisabled: PropTypes.bool,
+  /**
+*   show loader or not
+*/
+  isLoading: PropTypes.bool,
+  /**
+*   valid or not
+*/
+  isValid: PropTypes.bool,
+  /**
+ *	height of the component
+ */
+  height: PropTypes.number,
+  /**
+*   clearable or not
+*/
+  isClearable: PropTypes.bool,
+
 };
 
 DropdownSelect.defaultProps = {
@@ -514,4 +564,10 @@ DropdownSelect.defaultProps = {
   loadOptions: () => { },
   onInputChange: () => { },
   clearSelected: () => { },
+  customWrapperStyles: () => { },
+  customLabelStyles: () => { },
+  isRequired: false,
+  dropdownType: 'singleSelect',
+  isDisabled: false,
+  isLoading: false
 };

package/components/Inputs/DropzoneInput.js

@@ -1,35 +1,39 @@
-import React, { useState, createRef } from 'react';
-import styled from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
 import PropTypes from 'prop-types';
+import React, { createRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
-import getDefaultStyles from '../constants/utils';
-import { hexToRGB } from '../constants/utils';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import getDefaultStyles, { hexToRGB } from '../constants/utils';
 
 import { Icon } from '../Icon';
 import { Label } from '../Label';
 
 const ParentDiv = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultStyles }) => {
-        return getDefaultStyles(theme, defaultStyles);
+  ${({ inBuiltCss, defaultStyles }) => {
+        return getDefaultStyles(inBuiltCss, defaultStyles);
     }}
 
-  background-color:${({ hover, isValid, fileArr, backgroundColor }) =>
-        !isValid
-            ? 'rgba(215, 0, 0, 0.05)'
-            : hover
-                ? backgroundColor
-                : fileArr.length > 0
-                    ? defaultThemeColor.bgColor
-                    : hexToRGB(backgroundColor, 0.05)};
+  background-color:${({ hover, isValid, fileArr, backgroundColor, theme }) => {
+        if (!isValid) return 'rgba(215, 0, 0, 0.05)';
+        else if (isValid && hover && backgroundColor) return backgroundColor;
+        else if (isValid && hover && !backgroundColor)
+            return theme.primary['primary-1'];
+        else if (isValid && !hover && fileArr.length > 0) return theme.bgColor;
+        else if (isValid && !hover && fileArr.length == 0)
+            return hexToRGB(theme.primary['primary-1'], 0.05);
+    }}
+        
+        };
   border: 1px
-    ${({ isValid, fileArr, backgroundColor }) =>
+    ${({ isValid, fileArr, backgroundColor, theme }) =>
         !isValid
-            ? 'dashed ' + defaultThemeColor.ui['error']
+            ? 'dashed ' + theme.ui['error']
             : fileArr.length > 0
-                ? 'solid ' + backgroundColor
-                : 'dashed ' + backgroundColor};
+                ? `solid ` +
+                `${backgroundColor ? backgroundColor : theme.primary['primary-1']}`
+                : `dashed ` +
+                `${backgroundColor ? backgroundColor : theme.primary['primary-1']}`};
 
   &:hover {
     cursor: pointer;
@@ -42,8 +46,8 @@ const ParentDiv = styled.div`
 
 const FileDiv = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultStyles }) => {
-        return getDefaultStyles(theme, defaultStyles);
+  ${({ inBuiltCss, defaultStyles }) => {
+        return getDefaultStyles(inBuiltCss, defaultStyles);
     }}
 
   // custom styles
@@ -56,8 +60,8 @@ const InputFile = styled.input`
 
 const TextDiv = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultStyles }) => {
-        return getDefaultStyles(theme, defaultStyles);
+  ${({ inBuiltCss, defaultStyles }) => {
+        return getDefaultStyles(inBuiltCss, defaultStyles);
     }}
 
   // custom styles
@@ -66,8 +70,8 @@ const TextDiv = styled.div`
 
 const FileName = styled.span`
   //Set the styles from the default styles object
-  ${({ theme, type }) => {
-        return getDefaultStyles(theme, type);
+  ${({ inBuiltCss, type }) => {
+        return getDefaultStyles(inBuiltCss, type);
     }}
 
   // custom styles
@@ -86,8 +90,6 @@ const CrossDiv = styled.div`
 const IconDiv = styled.div`
   margin-left: 11px;
   padding-left: 2px;
-  display: flex;
-  justify-content: center;
 `;
 
 const OtherInfoDiv = styled.div`
@@ -106,8 +108,6 @@ const AdditionalText = styled.p`
 `;
 
 export const DropzoneInput = ({
-    theme,
-    themeColor,
     isValid,
     label,
     labelStyle,
@@ -127,6 +127,8 @@ export const DropzoneInput = ({
     additionalText,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     const [hover, setHover] = useState(false);
     const fileInputRef = createRef();
 
@@ -196,13 +198,11 @@ export const DropzoneInput = ({
     function openFileDialog() {
         fileInputRef.current.click();
     }
-    return (
-        <div
 
-        >
+    return (
+        <div>
             <div style={{ display: 'flex', width: 'inherit' }}>
                 <Label
-                    themeColor={defaultThemeColor}
                     customStyles={labelStyle}
                     type={'label-text'}
                     labelInline={labelInline}
@@ -218,7 +218,7 @@ export const DropzoneInput = ({
                     <div
                         style={{
                             marginLeft: '4px',
-                            color: `${themeColor.variant['error']}`,
+                            color: `${activeTheme.variant['error']}`,
                         }}
                     >
                         *
@@ -226,8 +226,8 @@ export const DropzoneInput = ({
                 )}
             </div>
             <ParentDiv
-                theme={defaultStyles}
-                themeColor={defaultThemeColor}
+                theme={activeTheme}
+                inBuiltCss={defaultStyles}
                 defaultStyles={'dropzone-parent'}
                 backgroundColor={backgroundColor}
                 customDropzoneStyles={customDropzoneStyles}
@@ -250,7 +250,9 @@ export const DropzoneInput = ({
                 {isValid ? (
                     <Icon
                         icon='file-upload'
-                        color={hover ? themeColor.bgColor : backgroundColor}
+                        color={
+                            hover ? activeTheme.bgColor : activeTheme.primary['primary-1']
+                        }
                         size={24}
                     />
                 ) : null}
@@ -258,28 +260,32 @@ export const DropzoneInput = ({
                     isValid={isValid}
                     hover={hover}
                     customTextStyles={customTextStyles}
-                    theme={defaultStyles}
+                    inBuiltCss={defaultStyles}
                     defaultStyles={'dropzone-text-div'}
                 >
                     {isValid ? (
                         <div>
                             <span
-                                style={{ color: hover ? themeColor.bgColor : backgroundColor }}
+                                style={{
+                                    color: hover
+                                        ? activeTheme.bgColor
+                                        : activeTheme.primary['primary-1'],
+                                }}
                             >
                                 Choose a file{' '}
                             </span>
                             <span
                                 style={{
                                     color: hover
-                                        ? themeColor.bgColor
-                                        : themeColor.neutral['neutral-2'],
+                                        ? activeTheme.bgColor
+                                        : activeTheme.neutral['neutral-2'],
                                 }}
                             >
                                 or{' '}
                             </span>
                             <span
                                 style={{
-                                    color: hover ? themeColor.bgColor : themeColor.textColor,
+                                    color: hover ? activeTheme.bgColor : activeTheme.textColor,
                                 }}
                             >
                                 drag {singleFile ? 'it' : 'them'} here
@@ -287,12 +293,12 @@ export const DropzoneInput = ({
                         </div>
                     ) : (
                         <div>
-                            <span style={{ color: themeColor.variant['error'] }}>
+                            <span style={{ color: activeTheme.variant['error'] }}>
                                 Try again!!{' '}
                             </span>
                             <span
                                 style={{
-                                    color: theme.textColor,
+                                    color: activeTheme.textColor,
                                 }}
                             >
                                 {message.length > messageSize
@@ -309,38 +315,54 @@ export const DropzoneInput = ({
             {fileArr?.map((item, i) => {
                 return (
                     <FileDiv
-                        theme={defaultStyles}
+                        inBuiltCss={defaultStyles}
                         defaultStyles={'dropzone-file-div'}
                         key={`${item}-${i}`}
                         customFileStyles={customFileStyles}
                     >
                         <IconDiv>
-                            <Icon icon='file-icon' />
+                            <Icon icon='file-icon' color={activeTheme.primary['primary-1']} />
                         </IconDiv>
 
-                        {!(item instanceof File) ? <a style={{ color: defaultThemeColor.variant['primary-1'], marginLeft: '5px' }} href={item?.path} target="_blank" rel="noreferrer">              {item.name}
-                        </a> : <FileName
-                            theme={defaultStyles}
-                            type={'dropzone-file-name'}
-                            customFileNameStyles={customFileNameStyles}
-                        >
-                            {item.name}
-                        </FileName>}
-
-
-
+                        {!(item instanceof File) ? (
+                            <a
+                                style={{
+                                    color: activeTheme.variant['primary-1'],
+                                    marginLeft: '5px',
+                                }}
+                                href={item?.path}
+                                target='_blank'
+                                rel='noreferrer'
+                            >
+                                {' '}
+                                {item.name}
+                            </a>
+                        ) : (
+                            <FileName
+                                inBuiltCss={defaultStyles}
+                                type={'dropzone-file-name'}
+                                customFileNameStyles={customFileNameStyles}
+                            >
+                                {item.name}
+                            </FileName>
+                        )}
 
                         <OtherInfoDiv>{item?.otherInfo}</OtherInfoDiv>
-                        <IconDiv>
-                            <Icon icon={`${!(item instanceof File) && 'cloud-icon'}`} />
-                        </IconDiv>
+
                         <CrossDiv
                             key={(Math.random() * 101) | 0}
                             onClick={() => fileRemoveFromArary(item, i)}
                         >
+                            <div style={{ marginRight: '7px' }}>
+                                <Icon
+                                    icon={`${!(item instanceof File) && 'cloud-icon'}`}
+                                    color={activeTheme.primary['primary-1']}
+                                />
+                            </div>
+
                             <Icon
                                 icon='cross-icon'
-                                color={themeColor.neutral['neutral-2']}
+                                color={activeTheme.neutral['neutral-2']}
                                 size={13}
                             />
                         </CrossDiv>
@@ -352,10 +374,6 @@ export const DropzoneInput = ({
 };
 
 DropzoneInput.propTypes = {
-    /**
-     *	Theme props of the default css style
-     */
-    theme: PropTypes.object,
     /**
      *	onFileAdd function
      */
@@ -411,12 +429,9 @@ DropzoneInput.propTypes = {
 };
 
 DropzoneInput.defaultProps = {
-    themeColor: defaultThemeColor,
-    theme: defaultStyles,
     onFilesAdded: () => null,
     isValid: true,
     message: '',
-    backgroundColor: `${defaultThemeColor.primary['primary-1']}`,
     fileArr: [],
     setFileArr: () => { },
     customDropzoneStyles: {},