groundfloor-react-ui 1.0.19 → 1.0.20

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: {},

package/components/Inputs/RadioInput.js

@@ -1,8 +1,7 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
+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';
 
@@ -10,8 +9,8 @@ const RadioOuterCircle = styled.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultRadioOuterCircleStyle }) => {
-        return getDefaultStyles(theme, defaultRadioOuterCircleStyle);
+  ${({ inBuiltCss, defaultRadioOuterCircleStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultRadioOuterCircleStyle);
     }}
 
   border: 2px solid ${({
@@ -19,41 +18,74 @@ const RadioOuterCircle = styled.div`
         selected,
         selectedCircleColor,
         defaultBorderColor,
-    }) => (value !== selected ? defaultBorderColor : selectedCircleColor)};
+        theme,
+    }) => {
+        if (value !== selected && defaultBorderColor) return defaultBorderColor;
+        else if (value !== selected && !defaultBorderColor) return theme.border;
+        else if (value === selected && selectedCircleColor)
+            return selectedCircleColor;
+        else if (value === selected && !selectedCircleColor)
+            return theme.primary['primary-1'];
+    }};
 
   // custom styles
   ${({ radioOuterCircleStyle }) => radioOuterCircleStyle}
 `;
 
+RadioOuterCircle.defaultProps = {
+    theme: defaultThemeColor,
+};
+
 const RadioInnerCircle = styled.div`
   box-sizing: initial;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultRadioInnerCircleStyle }) => {
-        return getDefaultStyles(theme, defaultRadioInnerCircleStyle);
+  ${({ inBuiltCss, defaultRadioInnerCircleStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultRadioInnerCircleStyle);
     }}
 
   width: ${({ value, selected, width }) => (value === selected ? width : 0)};
   height: ${({ value, selected, height }) => (value === selected ? height : 0)};
-  background-color: ${({ value, selected, selectedCircleColor }) =>
-        value === selected ? selectedCircleColor : 'transparent'};
+  background-color: ${({ value, selected, selectedCircleColor, theme }) => {
+        if (value === selected && selectedCircleColor) return selectedCircleColor;
+        else if (value === selected && !selectedCircleColor)
+            return theme.primary['primary-1'];
+        else if (value !== selected) return 'transparent';
+    }};
 
   // custom styles
   ${({ radioInnerCircleStyle }) => radioInnerCircleStyle}
 `;
+RadioInnerCircle.defaultProps = {
+    theme: defaultThemeColor,
+};
 
 const OptionText = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultOptionStyle }) => {
-        return getDefaultStyles(theme, defaultOptionStyle);
+  ${({ inBuiltCss, defaultOptionStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultOptionStyle);
     }}
   margin-right: ${({ inline }) => (!inline ? '30px' : '')};
-  color: ${({ selected, selectedOptionTextColor, defaultOptionColor }) =>
-        selected ? selectedOptionTextColor : defaultOptionColor};
+  color: ${({
+        selected,
+        selectedOptionTextColor,
+        defaultOptionColor,
+        theme,
+    }) => {
+        if (selected && selectedOptionTextColor) return selectedOptionTextColor;
+        else if (selected && !selectedOptionTextColor)
+            return theme.neutral['neutral-1'];
+        else if (!selected && defaultOptionColor) return defaultOptionColor;
+        else if (!selected && !defaultOptionColor)
+            return theme.neutral['neutral-2'];
+    }};
 
   // custom styles
   ${({ optionStyle }) => optionStyle}
 `;
+OptionText.defaultProps = {
+    theme: defaultThemeColor,
+};
 
 const WrapperDiv = styled.div`
   margin-bottom: ${({ inline }) => (!inline ? '14px' : '')};
@@ -87,14 +119,11 @@ export const RadioInput = ({
     defaultOptionColor,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
+
     return (
         <div>
-            <Label
-                themeColor={defaultThemeColor}
-                customStyles={labelStyle}
-                type={'radio-label'}
-                text={label}
-            />
+            <Label customStyles={labelStyle} type={'radio-label'} text={label} />
             <ParentDiv inline={inline}>
                 {options.map((item, i) => {
                     return (
@@ -106,8 +135,8 @@ export const RadioInput = ({
                             }}
                         >
                             <RadioOuterCircle
-                                theme={defaultStyles}
-                                themeColor={defaultThemeColor}
+                                theme={activeTheme}
+                                inBuiltCss={defaultStyles}
                                 defaultBorderColor={defaultBorderColor}
                                 selectedCircleColor={selectedCircleColor}
                                 radioOuterCircleStyle={{
@@ -120,7 +149,8 @@ export const RadioInput = ({
                                 selected={!item?.disabled && selected}
                             >
                                 <RadioInnerCircle
-                                    theme={defaultStyles}
+                                    inBuiltCss={defaultStyles}
+                                    theme={activeTheme}
                                     width={width}
                                     height={height}
                                     selectedCircleColor={selectedCircleColor}
@@ -145,10 +175,10 @@ export const RadioInput = ({
                                     cursor: item?.disabled ? 'not-allowed ' : ' pointer',
                                     color: item?.disabled && item?.disabledColor,
                                 }}
-                                theme={defaultStyles}
+                                inBuiltCss={defaultStyles}
                                 defaultOptionStyle={'option-text'}
                                 selectedOptionTextColor={selectedOptionTextColor}
-                                // selected={item.value === selected}
+                                theme={activeTheme}
                                 selected={!item?.disabled && item.value === selected}
                             >
                                 {item.label}
@@ -237,10 +267,6 @@ RadioInput.defaultProps = {
     onChange: () => { },
     radioOuterCircleStyle: {},
     radioInnerCircleStyle: {},
-    defaultOptionColor: `${defaultThemeColor.neutral['neutral-2']}`,
-    defaultBorderColor: '#D4D7E3',
     width: '14px',
     height: '14px',
-    selectedCircleColor: `${defaultThemeColor.primary['primary-1']}`,
-    selectedOptionTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
 };