groundfloor-react-ui 1.0.18 → 1.0.19

package/components/Inputs/NumericInput.js

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import styled, { css, useTheme } from 'styled-components';
+import React from 'react';
+import styled, { css } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 const TextBox = styled.div`
   border: 1px solid
     ${({ theme }) =>
-        theme ? defaultThemeColor.border : theme.variant['primary-1']};
+    theme.border};
   border-radius: 4px;
   padding: 6.5px 12px;
   display: flex;
@@ -27,7 +27,7 @@ const TextBox = styled.div`
 `;
 
 TextBox.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const Input = styled.input`
@@ -45,7 +45,7 @@ const Input = styled.input`
 `;
 
 Input.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const requiredAsterisk = css`
@@ -69,7 +69,7 @@ const Label = styled.label`
 `;
 
 Label.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const inline = css`
@@ -86,70 +86,73 @@ const Form = styled.div`
 `;
 
 Form.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 export const NumericInput = ({
-    label,
-    inputValue,
-    inputStyle,
-    iconBefore,
-    iconAfter,
-    onChange,
-    ...props
+  label,
+  inputValue,
+  inputStyle,
+  iconBefore,
+  iconAfter,
+  onChange,
+  theme,
+  ...props
 }) => {
-    const handleChange = (e) => {
-        const re = /^[0-9\b.-]+$/;
-        const { value } = e.currentTarget;
-        if (value === '' || re.test(value)) {
-            onChange(value);
-        }
-    };
-
-    return (
-        <Form {...props}>
-            {label.length > 0 && <Label {...props}>{label}</Label>}
-            <div>
-                <TextBox {...props}>
-                    <div className='input-icon'>{iconBefore}</div>
-                    <Input
-                        {...props}
-                        inputStyle={inputStyle}
-                        value={inputValue}
-                        onChange={handleChange}
-                        type='number'
-                    />
-                    <div className='input-icon'>{iconAfter}</div>
-                </TextBox>
-            </div>
-        </Form>
-    );
+  const handleChange = (e) => {
+    const re = /^[0-9\b.-]+$/;
+    const { value } = e.currentTarget;
+    if (value === '' || re.test(value)) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <Form {...props}>
+      {label.length > 0 && <Label {...props}>{label}</Label>}
+      <div>
+        <TextBox {...props}>
+          <div className='input-icon'>{iconBefore}</div>
+          <Input
+            {...props}
+            inputStyle={inputStyle}
+            value={inputValue}
+            onChange={handleChange}
+            type='number'
+          />
+          <div className='input-icon'>{iconAfter}</div>
+        </TextBox>
+      </div>
+    </Form>
+  );
 };
 
 NumericInput.propTypes = {
-    /**
-     *	Theme props
-     */
-    theme: PropTypes.object,
-    /**
-     *	Label of Input
-     */
-    label: PropTypes.string,
-    /**
-     *	Should label be inline?
-     */
-    labelInline: PropTypes.bool,
-    /**
-     *	Value Prop
-     */
-    inputValue: PropTypes.any,
-
-    inputStyle: PropTypes.object,
+  /**
+   *	Theme props
+   */
+  theme: PropTypes.object,
+  /**
+   *	Label of Input
+   */
+  label: PropTypes.string,
+  /**
+   *	Should label be inline?
+   */
+  labelInline: PropTypes.bool,
+  /**
+   *	Value Prop
+   */
+  inputValue: PropTypes.any,
+  /**
+   * custom style of input element
+   */
+  inputStyle: PropTypes.object,
 };
 
 NumericInput.defaultProps = {
-    theme: defaultThemeColor,
-    label: '',
-    labelInline: false,
-    inputStyle: {},
-    inputValue: null,
+  theme: defaultThemeColor,
+  label: '',
+  labelInline: false,
+  inputStyle: {},
+  inputValue: null,
 };

package/components/Inputs/PasswordInput.js

@@ -1,37 +1,36 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React, { useState } 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';
 import { Icon } from '../Icon';
-import { useState } from 'react';
+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']};
   }
   .input-icon {
     cursor: pointer;
   }
 
   &: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']};
     }
   }
 
@@ -39,24 +38,30 @@ const TextWrapper = styled.div`
   ${({ textBoxStyle }) => textBoxStyle}
 `;
 
+TextWrapper.defaultProps = {
+  theme: defaultThemeColor,
+};
+
 const Input = styled.input`
   width: inherit;
   -webkit-text-security:  ${({ showEye }) => showEye ? 'none' : 'disc'}  ;
 
   //Set the styles from the default styles object
-  ${({ theme, defaultInputStyle }) => {
-    return getDefaultStyles(theme, defaultInputStyle);
+  ${({ inBuiltCss, defaultInputStyle }) => {
+    return getDefaultStyles(inBuiltCss, defaultInputStyle);
   }}
 
   // custom styles
     ${({ inputStyle }) => inputStyle}
 
 	.sc-furwcr bxRAoq {
-    color: ${defaultThemeColor.variant['neutral-3']};
+    color: ${({ theme }) => theme.variant['neutral-3']};
   }
 
 `;
-
+Input.defaultProps = {
+  theme: defaultThemeColor,
+};
 const inline = css`
   display: flex;
   gap: 7px;
@@ -66,18 +71,19 @@ 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 PasswordInput = ({
-  themeColor,
+  theme,
   passwordRules,
   textBoxStyle,
   labelStyle,
@@ -93,7 +99,8 @@ export const PasswordInput = ({
   const [showEye, setShowEye] = useState(false);
 
   return (
-    <Form labelInline={labelInline} {...props}>
+    <Form labelInline={labelInline} inBuiltCss={defaultStyles} {...props}
+    >
       <div style={{ display: 'flex' }}>
         <Label
           customStyles={labelStyle}
@@ -112,7 +119,7 @@ export const PasswordInput = ({
             style={{
               marginLeft: '4px',
               marginRight: '5px',
-              color: `${themeColor.variant['error']}`,
+              color: `${theme.variant['error']}`,
             }}
           >
             *
@@ -128,18 +135,20 @@ export const PasswordInput = ({
       >
         <TextWrapper
           required={required}
-          themeColor={defaultThemeColor}
+          theme={theme}
           textBoxStyle={textBoxStyle}
           isValid={isValid}
-          theme={defaultStyles}
           defaultWrapperStyle={'textbox-wrapper'}
+          inBuiltCss={defaultStyles}
           {...props}
         >
           <Input
             inputStyle={inputStyle}
             type={'text'}
             showEye={showEye}
+            theme={theme}
             defaultInputStyle={'input-wrapper'}
+            inBuiltCss={defaultStyles}
             {...props}
           />
           <div className='input-icon' onClick={() => setShowEye(!showEye)}>
@@ -157,11 +166,11 @@ PasswordInput.propTypes = {
   /**
    *	Theme props of default in-built css
    */
-  theme: PropTypes.object,
+  inBuiltCss: PropTypes.object,
   /**
    *	Color props of default theme
    */
-  themeColor: PropTypes.object,
+  theme: PropTypes.object,
   /**
    *	Label of Input
    */
@@ -202,8 +211,8 @@ PasswordInput.propTypes = {
 };
 
 PasswordInput.defaultProps = {
-  themeColor: defaultThemeColor,
-  theme: defaultStyles,
+  theme: defaultThemeColor,
+  inBuiltCss: defaultStyles,
   label: '',
   required: false,
   isValid: true,

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,