groundfloor-react-ui 1.0.18 → 1.0.21

package/components/Inputs/Signature.js

@@ -1,31 +1,42 @@
-import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useEffect, useRef, useState } from 'react';
 import SignaturePad from 'react-signature-pad-wrapper';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
+import defaultStyles from '../constants/defaultStyle';
 import defaultThemeColor from '../constants/defaultThemeColor';
-import defaultStyle from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
-import PropTypes from 'prop-types';
-
 import { Icon } from '../Icon';
 
 const ParentDiv = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultParentDivStyle }) => {
-        return getDefaultStyles(theme, defaultParentDivStyle);
+  ${({ inBuiltCss, defaultParentDivStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultParentDivStyle);
     }}
 
-  border: 1px solid ${({ isMyInputFocused, activeColor, defaultColor }) =>
-        isMyInputFocused ? activeColor : defaultColor};
+  border: 1px solid ${({
+        isMyInputFocused,
+        activeColor,
+        defaultColor,
+        theme,
+    }) => {
+        if (isMyInputFocused && activeColor) return activeColor;
+        else if (isMyInputFocused && !activeColor)
+            return theme.primary['primary-1'];
+        else if (!isMyInputFocused && defaultColor) return defaultColor;
+        else if (!isMyInputFocused && !defaultColor)
+            return theme.neutral['neutral-3'];
+    }};
 
   &:focus-within {
-    border-color: ${({ activeColor }) => activeColor};
+    border-color: ${({ activeColor, theme }) =>
+        activeColor ? activeColor : theme.primary['primary-1']};
   }
 `;
 
 const WrapperDiv = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultWrapperDivStyle }) => {
-        return getDefaultStyles(theme, defaultWrapperDivStyle);
+  ${({ inBuiltCss, defaultWrapperDivStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultWrapperDivStyle);
     }}
 
   flex-direction: ${({ signIcon }) => (signIcon ? 'column' : 'initial')};
@@ -33,8 +44,16 @@ const WrapperDiv = styled.div`
         signIcon ? 'min-content' : 'calc(100% - 50px) !important'};
   max-width: ${({ signIcon }) => (signIcon ? '42px' : '490px')};
   border-right: 1px solid
-    ${({ activeColor, defaultColor, isMyInputFocused, signIcon }) =>
-        signIcon ? (isMyInputFocused ? activeColor : defaultColor) : 'none'};
+    ${({ activeColor, defaultColor, isMyInputFocused, signIcon, theme }) => {
+        if (signIcon && isMyInputFocused && activeColor) return activeColor;
+        else if (signIcon && isMyInputFocused && !activeColor)
+            return theme.primary['primary-1'];
+        else if (signIcon && !isMyInputFocused && defaultColor)
+            return defaultColor;
+        else if (signIcon && !isMyInputFocused && !defaultColor)
+            return theme.neutral['neutral-3'];
+        else if (!signIcon) return 'none';
+    }};
   border-left: ${({ signIcon }) => (!signIcon ? 'none' : '')};
   margin-left: ${({ signIcon }) => (!signIcon ? '42px' : '')};
   position: ${({ signIcon }) => (!signIcon ? '' : 'absolute')};
@@ -47,34 +66,47 @@ const ControllerDiv = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-bottom: ${({ penIcon, isMyInputFocused, activeColor, defaultColor }) =>
+  border-bottom: ${({
+    penIcon,
+    isMyInputFocused,
+    activeColor,
+    defaultColor,
+    theme,
+}) =>
         penIcon
             ? isMyInputFocused
-                ? '1px solid ' + activeColor
-                : '1px solid ' + defaultColor
+                ? `1px solid ` +
+                `${activeColor ? activeColor : theme.primary['primary-1']}`
+                : `1px solid ` +
+                `${defaultColor ? defaultColor : theme.neutral['neutral-3']}`
             : ''};
   background-color: rgba(255, 255, 255, 0.05);
   cursor: pointer;
 `;
 
 const InputText = styled.input`
-  ${({ theme, defaultInputStyle }) => {
-        return getDefaultStyles(theme, defaultInputStyle);
+  ${({ inBuiltCss, defaultInputStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultInputStyle);
     }}
 
-  border-bottom:  ${({ value, defaultColor }) =>
-        value.length > 0 ? 'none' : '1px solid ' + defaultColor};
+  border-bottom:  ${({ value, defaultColor, theme }) =>
+        value.length > 0
+            ? 'none'
+            : '1px solid ' + defaultColor
+                ? defaultColor
+                : theme.neutral['neutral-3']};
 
   &::placeholder {
     font-size: 17px;
     text-align: center;
-    color: ${({ placeholderColor }) => placeholderColor};
+    color: ${({ placeholderColor, theme }) =>
+        placeholderColor ? placeholderColor : theme.neutral['neutral-3']};
     font-family: 'Averta';
     font-style: normal;
     font-weight: normal;
     line-height: 22px;
   }
-  &:focus-within {
+  &: focus-within {
     border: none;
     outline: none;
 
@@ -118,6 +150,7 @@ export const SignatureInput = ({
     setImageURL,
     ...props
 }) => {
+    const activeTheme = useTheme() || defaultThemeColor;
     const [selected, setSelected] = useState('default');
     const [isMyInputFocused, setIsMyInputFocused] = useState(false);
     const [dirty, setDirty] = useState(false);
@@ -148,26 +181,29 @@ export const SignatureInput = ({
 
     return (
         <ParentDiv
-            theme={defaultStyle}
+            inBuiltCss={defaultStyles}
             defaultParentDivStyle={'signature-parent-div'}
             isMyInputFocused={isMyInputFocused}
             selected={selected}
             activeColor={activeColor}
             defaultColor={defaultColor}
+            theme={activeTheme}
         >
             <WrapperDiv
-                theme={defaultStyle}
+                inBuiltCss={defaultStyles}
                 defaultWrapperDivStyle={'signature-wrapper-div'}
                 activeColor={activeColor}
                 defaultColor={defaultColor}
                 selected={selected}
                 isMyInputFocused={isMyInputFocused}
                 signIcon={true}
+                theme={activeTheme}
             >
                 <ControllerDiv
                     activeColor={activeColor}
                     defaultColor={defaultColor}
                     isMyInputFocused={isMyInputFocused}
+                    theme={activeTheme}
                     penIcon={true}
                     onClick={() => {
                         setSelected('default');
@@ -176,12 +212,19 @@ export const SignatureInput = ({
                 >
                     <Icon
                         icon='pen-icon'
-                        color={selected === 'default' ? activeColor : 'black'}
+                        color={
+                            selected === 'default'
+                                ? activeColor
+                                    ? activeColor
+                                    : activeTheme.primary['primary-1']
+                                : activeTheme.black
+                        }
                     />
                 </ControllerDiv>
                 <ControllerDiv
                     activeColor={activeColor}
                     defaultColor={defaultColor}
+                    theme={activeTheme}
                     isMyInputFocused={isMyInputFocused}
                     penIcon={false}
                     onClick={() => {
@@ -191,25 +234,30 @@ export const SignatureInput = ({
                 >
                     <Icon
                         icon='sign-icon'
-                        color={selected !== 'default' ? activeColor : 'black'}
+                        color={
+                            selected !== 'default'
+                                ? activeColor
+                                    ? activeColor
+                                    : activeTheme.primary['primary-1']
+                                : activeTheme.black
+                        }
                     />
                 </ControllerDiv>
             </WrapperDiv>
             <WrapperDiv
-                theme={defaultStyle}
+                inBuiltCss={defaultStyles}
                 defaultWrapperDivStyle={'signature-wrapper-div'}
                 activeColor={activeColor}
                 defaultColor={defaultColor}
+                theme={activeTheme}
                 selected={selected}
                 isMyInputFocused={isMyInputFocused}
                 signIcon={false}
-                onTouchStart={() => {
-                    console.log('touchstart');
-                }}
+                onTouchStart={() => { }}
             >
                 {selected === 'default' ? (
                     <InputText
-                        theme={defaultStyle}
+                        inBuiltCss={defaultStyles}
                         defaultInputStyle={'signature-input-text'}
                         placeholder={placeholderText}
                         placeholderColor={placeholderColor}
@@ -218,6 +266,7 @@ export const SignatureInput = ({
                         onFocus={() => setIsMyInputFocused(true)}
                         value={value}
                         defaultColor={defaultColor}
+                        theme={activeTheme}
                         onChange={(e) => setValue(e.target.value)}
                     />
                 ) : (
@@ -239,7 +288,12 @@ export const SignatureInput = ({
                 )}
                 {(value || dirty) && (
                     <IconDiv selected={selected} onClick={() => onClear()}>
-                        <Icon icon='cross-icon' color={defaultColor} />
+                        <Icon
+                            icon='cross-icon'
+                            color={
+                                defaultColor ? defaultColor : activeTheme.neutral['neutral-3']
+                            }
+                        />
                     </IconDiv>
                 )}
             </WrapperDiv>
@@ -295,9 +349,6 @@ SignatureInput.propTypes = {
 };
 
 SignatureInput.defaultProps = {
-    activeColor: `${defaultThemeColor.primary['primary-1']}`,
-    defaultColor: `${defaultThemeColor.neutral['neutral-3']}`,
-    placeholderColor: `${defaultThemeColor.neutral['neutral-3']}`,
     customInputStyle: {},
     placeholderText: 'Type your signature here',
     pointsArray: null,
@@ -307,5 +358,4 @@ SignatureInput.defaultProps = {
     imageURL: '',
     setImageURL: () => { },
     setValueForSignatureDrawing: () => { },
-};
-
+};

package/components/Inputs/TextArea.js

@@ -1,32 +1,32 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
+import React from 'react';
+import styled, { css, useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 
 const TextWrapper = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultWrapperStyle }) => {
-        return getDefaultStyles(theme, defaultWrapperStyle);
+  ${({ inBuiltCss, defaultWrapperStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultWrapperStyle);
     }}
 
-  border: ${({ isValid, themeColor }) =>
+  border: ${({ isValid, theme }) =>
         !isValid
-            ? '1px solid ' + themeColor.variant['error']
-            : '1px solid ' + defaultThemeColor.border};
+            ? '1px solid ' + theme.variant['error']
+            : '1px solid ' + theme.border};
 
   .input-icon svg path {
-    fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
+    fill: ${({ theme }) => theme.variant['neutral-1']};
   }
 
   &:focus-within {
-    border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
+    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
     outline: none;
 
     .input-icon svg path {
-      fill: ${({ themeColor }) => themeColor.variant['primary-1']};
+      fill: ${({ theme }) => theme.variant['primary-1']};
     }
   }
 
@@ -34,18 +34,14 @@ const TextWrapper = styled.div`
   ${({ textAreaStyle }) => textAreaStyle}
 `;
 
-TextWrapper.defaultProps = {
-    themeColor: defaultThemeColor,
-};
-
 const Input = styled.textarea`
   //Set the styles from the default styles object
-  ${({ theme, defaultInputStyle }) => {
-        return getDefaultStyles(theme, defaultInputStyle);
+  ${({ inBuiltCss, defaultInputStyle }) => {
+        return getDefaultStyles(inBuiltCss, defaultInputStyle);
     }}
   margin: 0;
   overflow: auto;
-  resize: none // custom styles
+  resize: vertical // custom styles
     ${({ inputStyle }) => inputStyle};
 `;
 
@@ -64,20 +60,15 @@ const Form = styled.div`
     }}  
     position: relative;
   .err-text {
-    color: ${({ themeColor }) => themeColor.variant['error']};
+    color: ${({ theme }) => theme.variant['error']};
     margin-top: 5px;
     font-size: 10px;
   }
 `;
 
-Form.defaultProps = {
-    themeColor: defaultThemeColor,
-};
-
 export const TextArea = React.forwardRef(
     (
         {
-            themeColor,
             customStylesForm,
             textAreaStyle,
             labelStyle,
@@ -95,15 +86,17 @@ export const TextArea = React.forwardRef(
         },
         ref
     ) => {
+        const activeTheme = useTheme() || defaultThemeColor;
+
         return (
             <Form
                 labelInline={labelInline}
                 customStylesForm={customStylesForm}
+                theme={activeTheme}
                 {...props}
             >
                 <div style={{ display: 'flex' }}>
                     <Label
-                        themeColor={defaultThemeColor}
                         customStyles={labelStyle}
                         type={'label-text'}
                         labelInline={labelInline}
@@ -120,7 +113,7 @@ export const TextArea = React.forwardRef(
                         <div
                             style={{
                                 marginLeft: '4px',
-                                color: `${themeColor.variant['error']}`,
+                                color: `${activeTheme.variant['error']}`,
                             }}
                         >
                             *
@@ -128,11 +121,11 @@ export const TextArea = React.forwardRef(
                     )}
                 </div>
                 <TextWrapper
+                    theme={activeTheme}
                     required={required}
-                    themeColor={defaultThemeColor}
                     textAreaStyle={textAreaStyle}
                     isValid={isValid}
-                    theme={defaultStyles}
+                    inBuiltCss={defaultStyles}
                     defaultWrapperStyle={'textbox-wrapper'}
                     {...props}
                 >
@@ -143,6 +136,7 @@ export const TextArea = React.forwardRef(
                         defaultInputStyle={'textarea-wrapper'}
                         cols={cols}
                         rows={rows}
+                        inBuiltCss={defaultStyles}
                         {...props}
                         size='1'
                     />
@@ -155,14 +149,6 @@ export const TextArea = React.forwardRef(
 );
 
 TextArea.propTypes = {
-    /**
-     *	Theme props of default in-built css
-     */
-    theme: PropTypes.object,
-    /**
-     *	Color props of default theme
-     */
-    themeColor: PropTypes.object,
     /**
      *	row number of the text area
      */
@@ -206,8 +192,6 @@ TextArea.propTypes = {
 };
 
 TextArea.defaultProps = {
-    themeColor: defaultThemeColor,
-    theme: defaultStyles,
     label: '',
     required: false,
     isValid: true,
@@ -218,6 +202,6 @@ TextArea.defaultProps = {
     textAreaStyle: {},
     labelStyle: {},
     inputStyle: {},
-    // rows:10,
-    // cols:100
+    rows: 3,
+    // cols: 100
 };

package/components/Inputs/TextInput.js

@@ -1,46 +1,46 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled, { css } from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 
 const TextWrapper = styled.div`
   //Set the styles from the default styles object
-  ${({ theme, defaultWrapperStyle }) => {
-		return getDefaultStyles(theme, defaultWrapperStyle);
+  ${({ inBuiltCss, defaultWrapperStyle }) => {
+		return getDefaultStyles(inBuiltCss, defaultWrapperStyle);
 	}}
 
-  border: ${({ isValid, themeColor }) =>
+  border: ${({ isValid, theme }) =>
 		!isValid
-			? '1px solid ' + themeColor.variant['error']
-			: '1px solid ' + defaultThemeColor.border};
+			? '1px solid ' + theme.variant['error']
+			: '1px solid ' + theme.border};
 
   .input-icon svg path {
-    fill: ${({ themeColor }) => themeColor.variant['neutral-1']};
+    fill: ${({ theme }) => theme.variant['neutral-1']};
   }
 
   &:focus-within {
-    border: 1px solid ${({ themeColor }) => themeColor.variant['primary-1']};
+    border: 1px solid ${({ theme }) => theme.variant['primary-1']};
     outline: none;
 
     .input-icon svg path {
-      fill: ${({ themeColor }) => themeColor.variant['primary-1']};
+      fill: ${({ theme }) => theme.variant['primary-1']};
     }
   }
 
   // custom styles
   ${({ textBoxStyle }) => textBoxStyle}
 
-  background-color:  ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
+  background-color:  ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
 `;
 
 const Input = styled.input`
   width: inherit;
   //Set the styles from the default styles object
-  ${({ theme, defaultInputStyle }) => {
-		return getDefaultStyles(theme, defaultInputStyle);
+  ${({ inBuiltCss, defaultInputStyle }) => {
+		return getDefaultStyles(inBuiltCss, defaultInputStyle);
 	}}
 
   // custom styles
@@ -49,7 +49,7 @@ const Input = styled.input`
 	.sc-furwcr bxRAoq {
     color: ${defaultThemeColor.variant['neutral-3']};
   }
-  background-color:  ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
+  background-color:  ${({ isDisabled, theme }) => isDisabled ? theme.variant['neutral-5'] : theme.bgColor}
 `;
 
 const inline = css`
@@ -61,18 +61,17 @@ const inline = css`
 const Form = styled.div`
   ${({ labelInline }) => (labelInline ? inline : null)}
   .err-text {
-    color: ${({ themeColor }) => themeColor.variant['error']};
+    color: ${({ theme }) => theme.variant['error']};
     margin-top: 5px;
     font-size: 10px;
   }
 `;
 
 Form.defaultProps = {
-	themeColor: defaultThemeColor,
+	theme: defaultThemeColor,
 };
 
 export const TextInput = ({
-	themeColor,
 	textBoxStyle,
 	labelStyle,
 	inputStyle,
@@ -84,11 +83,13 @@ export const TextInput = ({
 	iconAfter,
 	isValid,
 	type,
+	theme,
 	isDisabled,
 	...props
 }) => {
+
 	return (
-		<Form labelInline={labelInline} {...props}>
+		<Form labelInline={labelInline} {...props} theme={theme}>
 			<div style={{ display: 'flex' }}>
 				<Label
 					customStyles={labelStyle}
@@ -107,7 +108,7 @@ export const TextInput = ({
 					<div
 						style={{
 							marginLeft: '4px',
-							color: `${themeColor.variant['error']}`,
+							color: `${theme.variant['error']}`,
 						}}
 					>
 						*
@@ -116,11 +117,11 @@ export const TextInput = ({
 			</div>
 			<TextWrapper
 				required={required}
-				themeColor={defaultThemeColor}
 				isDisabled={isDisabled}
+				theme={theme}
 				textBoxStyle={textBoxStyle}
 				isValid={isValid}
-				theme={defaultStyles}
+				inBuiltCss={defaultStyles}
 				defaultWrapperStyle={'textbox-wrapper'}
 				{...props}
 			>
@@ -128,6 +129,7 @@ export const TextInput = ({
 				<Input
 					inputStyle={inputStyle}
 					type={type}
+					theme={theme}
 					defaultInputStyle={'input-wrapper'}
 					isDisabled={isDisabled}
 					disabled={isDisabled}
@@ -144,11 +146,7 @@ TextInput.propTypes = {
 	/**
 	 *	Theme props of default in-built css
 	 */
-	theme: PropTypes.object,
-	/**
-	 *	Color props of default theme
-	 */
-	themeColor: PropTypes.object,
+	inBuiltCss: PropTypes.object,
 	/**
 	 *	Label of Input
 	 */
@@ -193,11 +191,28 @@ TextInput.propTypes = {
  *	input field disabled or not
  */
 	isDisabled: PropTypes.bool,
+	/**
+ *	receives theme object
+ */
+	theme: PropTypes.object,
+
+};
+
+Input.defaultProps = {
+	theme: defaultThemeColor,
+};
+
+TextWrapper.defaultProps = {
+	theme: defaultThemeColor,
+};
+
+Form.defaultProps = {
+	theme: defaultThemeColor,
 };
 
 TextInput.defaultProps = {
-	themeColor: defaultThemeColor,
-	theme: defaultStyles,
+	theme: defaultThemeColor,
+	inBuiltCss: defaultStyles,
 	label: '',
 	required: false,
 	isValid: true,