groundfloor-react-ui 1.0.11 → 1.0.12

package/components/Form/FormComponent.js

@@ -25,6 +25,7 @@ import {
   MultiColumnDiv,
 } from '../DesignComponent';
 import { Table } from '../Tables';
+import { HeaderComponent } from './HeaderComponent';
 
 export const FormComponent = ({ formData, ...props }) => {
   const header = (item) => {
@@ -150,7 +151,9 @@ export const FormComponent = ({ formData, ...props }) => {
   const passwordInput = (item) => {
     return <PasswordInput {...item} {...props} />;
   };
-
+  const headerComponentInput = (item) => {
+    return <HeaderComponent {...item} {...props} />;
+  };
   const handleSubmit = () => {
     console.log('form submit');
   };
@@ -201,6 +204,8 @@ export const FormComponent = ({ formData, ...props }) => {
         return tableInput(item);
       case 'passwordInput':
         return passwordInput(item);
+      case 'headerComponent':
+        return headerComponentInput(item);
       default:
         break;
     }

package/components/Form/HeaderComponent.js

@@ -2,7 +2,7 @@ import React from 'react'
 import defaultThemeColor from '../constants/defaultThemeColor'
 import userIcon from "../../assets/icons/users.svg";
 
-export const HeaderComponent = ({ title, subtitle, wrapperstyle }) => {
+export const HeaderComponent = ({ title, subtitle, wrapperstyle, imgLink, imgStyle }) => {
 
     const titleStyle = {
         'fontSize': '26px',
@@ -24,11 +24,11 @@ export const HeaderComponent = ({ title, subtitle, wrapperstyle }) => {
 
     return <div style={wrapperstyle}>
         <div style={titleStyle}>
-            <img src={userIcon} alt="userIcon" srcset="" />
+            <img src={imgLink || userIcon} alt="userIcon" srcset="" style={imgStyle} />
             <h4>{title}</h4>
         </div>
         <div style={subtitleStyle}>
             <p>{subtitle}</p>
         </div>
     </div>
-}
+}

package/components/Inputs/DateSelect.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
 import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
@@ -149,7 +148,7 @@ const Wrapper = styled.div`
 `;
 
 Wrapper.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const CalendarHeaderDiv = styled.div`
@@ -219,7 +218,7 @@ const DropDownList = styled('ul')`
   }
 `;
 DropDownList.defaultProps = {
-    theme: defaultThemeColor,
+  theme: defaultThemeColor,
 };
 
 const ListItem = styled('li')`
@@ -234,224 +233,224 @@ const ListItem = styled('li')`
 `;
 
 export const DateSelect = ({ startDate, setStartDate, disabled, ...props }) => {
-    const theme = defaultThemeColor;
-
-    const months = [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ];
-    var years = [];
-    for (var i = 2010; i <= new Date().getFullYear() + 10; i++) {
-        years.push(i);
-    }
+  const theme = defaultThemeColor;
+
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  var years = [];
+  for (var i = 2010; i <= new Date().getFullYear() + 10; i++) {
+    years.push(i);
+  }
 
-    const refMonth = useRef(null);
-    const refYear = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenYear, setIsOpenYear] = useState(false);
-    const [hover, setHover] = useState(false);
-    const [hoverYear, setHoverYear] = useState(false);
-    const [selectedYear, setSelectedYear] = useState(startDate.getFullYear());
-    const [selectedMonth, setSelectedMonth] = useState(
-        months[startDate.getMonth()]
-    );
-
-    useEffect(() => {
-        setSelectedMonth(months[startDate.getMonth()]);
-        setSelectedYear(startDate.getFullYear());
-    }, [startDate]);
-
-    useEffect(() => {
-        document.addEventListener('click', handleClickOutsideMonth, true);
-
-        return () => {
-            document.removeEventListener('click', handleClickOutsideMonth, true);
-        };
-    }, []);
-
-    const handleClickOutsideMonth = (event) => {
-        if (refMonth.current && !refMonth.current.contains(event.target)) {
-            setIsOpen(false);
-        }
+  const refMonth = useRef(null);
+  const refYear = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isOpenYear, setIsOpenYear] = useState(false);
+  const [hover, setHover] = useState(false);
+  const [hoverYear, setHoverYear] = useState(false);
+  const [selectedYear, setSelectedYear] = useState(startDate.getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(
+    months[startDate.getMonth()]
+  );
+
+  useEffect(() => {
+    setSelectedMonth(months[startDate.getMonth()]);
+    setSelectedYear(startDate.getFullYear());
+  }, [startDate]);
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutsideMonth, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutsideMonth, true);
     };
+  }, []);
 
-    const handleClickOutsideYear = (event) => {
-        if (refYear.current && !refYear.current.contains(event.target)) {
-            setIsOpenYear(false);
-        }
-    };
+  const handleClickOutsideMonth = (event) => {
+    if (refMonth.current && !refMonth.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
 
-    useEffect(() => {
-        document.addEventListener('click', handleClickOutsideYear, true);
-
-        return () => {
-            document.removeEventListener('click', handleClickOutsideYear, true);
-        };
-    }, []);
-
-    return (
-        <Wrapper disabled={disabled} {...props}>
-            <DatePicker
-                selected={startDate}
-                dateFormat='dd/MM/yyyy'
-                useWeekdaysShort={true}
-                onChange={(date) => setStartDate(date)}
-                placeholderText={'select date'}
-                adjustDateOnChange
-                disabled={disabled}
-                dropdownMode='select'
-                renderCustomHeader={({ date, changeYear, changeMonth }) => {
-                    return (
-                        <CalendarHeaderDiv>
-                            <div style={{ display: 'flex' }}>
-                                <DropDownContainer ref={refMonth}>
-                                    <DropDownHeader
-                                        onClick={() => {
-                                            setIsOpen(!isOpen);
-                                            setIsOpenYear(false);
-                                        }}
-                                    >
-                                        <span
-                                            onMouseEnter={() => setHover(true)}
-                                            onMouseLeave={() => setHover(false)}
-                                            style={{
-                                                color: `${hover ? theme.variant['primary-1'] : theme.textColor
-                                                    }`,
-                                            }}
-                                        >
-                                            {months[date.getMonth()]}
-                                        </span>
-                                        <IconDiv>
-                                            <Icon
-                                                icon='triangle-down'
-                                                color={hover ? 'blue' : 'black'}
-                                                size={7}
-                                            />
-                                        </IconDiv>
-                                    </DropDownHeader>
-                                    {isOpen && (
-                                        <DropDownListContainer>
-                                            <DropDownList onMouseEnter={() => setHover(true)}>
-                                                {months.map((option, index) => (
-                                                    <ListItem
-                                                        selectedMonth={selectedMonth}
-                                                        onClick={() => {
-                                                            setHover(false);
-                                                            changeMonth(index);
-                                                            setIsOpen(false);
-                                                            setSelectedMonth(months[index]);
-                                                        }}
-                                                        key={Math.random()}
-                                                    >
-                                                        <span
-                                                            style={{
-                                                                color: `${selectedMonth === option
-                                                                        ? theme.variant['primary-1']
-                                                                        : theme.textColor
-                                                                    }`,
-                                                            }}
-                                                        >
-                                                            {option}
-                                                        </span>
-                                                    </ListItem>
-                                                ))}
-                                            </DropDownList>
-                                        </DropDownListContainer>
-                                    )}
-                                </DropDownContainer>
-                                <DropDownContainer ref={refYear}>
-                                    <DropDownHeader
-                                        style={{ marginLeft: '28px' }}
-                                        onClick={() => {
-                                            setIsOpenYear(!isOpenYear);
-                                            setIsOpen(false);
-                                        }}
-                                    >
-                                        <span
-                                            onMouseEnter={() => setHoverYear(true)}
-                                            onMouseLeave={() => setHoverYear(false)}
-                                            style={{
-                                                color: `${hoverYear
-                                                        ? theme.variant['primary-1']
-                                                        : theme.textColor
-                                                    }`,
-                                            }}
-                                        >
-                                            {date.getFullYear()}
-                                        </span>
-                                        <IconDiv>
-                                            <Icon
-                                                icon='triangle-down'
-                                                color={hoverYear ? 'blue' : 'black'}
-                                                size={7}
-                                            />
-                                        </IconDiv>
-                                    </DropDownHeader>
-                                    {isOpenYear && (
-                                        <DropDownListContainer>
-                                            <DropDownList onMouseEnter={() => setHoverYear(true)}>
-                                                {years.map((option, index) => (
-                                                    <ListItem
-                                                        onClick={() => {
-                                                            setHoverYear(false);
-                                                            changeYear(option);
-                                                            setSelectedYear(option);
-                                                            setIsOpenYear(false);
-                                                        }}
-                                                        key={Math.random()}
-                                                    >
-                                                        <span
-                                                            style={{
-                                                                color: `${selectedYear === option
-                                                                        ? theme.variant['primary-1']
-                                                                        : theme.textColor
-                                                                    }`,
-                                                            }}
-                                                        >
-                                                            {option}
-                                                        </span>
-                                                    </ListItem>
-                                                ))}
-                                            </DropDownList>
-                                        </DropDownListContainer>
-                                    )}
-                                </DropDownContainer>
-                            </div>
-                        </CalendarHeaderDiv>
-                    );
-                }}
-            />
-        </Wrapper>
-    );
+  const handleClickOutsideYear = (event) => {
+    if (refYear.current && !refYear.current.contains(event.target)) {
+      setIsOpenYear(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutsideYear, true);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutsideYear, true);
+    };
+  }, []);
+
+  return (
+    <Wrapper disabled={disabled} {...props}>
+      <DatePicker
+        selected={startDate}
+        dateFormat='dd/MM/yyyy'
+        useWeekdaysShort={true}
+        onChange={(date) => setStartDate(date)}
+        placeholderText={'select date'}
+        adjustDateOnChange
+        disabled={disabled}
+        dropdownMode='select'
+        renderCustomHeader={({ date, changeYear, changeMonth }) => {
+          return (
+            <CalendarHeaderDiv>
+              <div style={{ display: 'flex' }}>
+                <DropDownContainer ref={refMonth}>
+                  <DropDownHeader
+                    onClick={() => {
+                      setIsOpen(!isOpen);
+                      setIsOpenYear(false);
+                    }}
+                  >
+                    <span
+                      onMouseEnter={() => setHover(true)}
+                      onMouseLeave={() => setHover(false)}
+                      style={{
+                        color: `${hover ? theme.variant['primary-1'] : theme.textColor
+                          }`,
+                      }}
+                    >
+                      {months[date.getMonth()]}
+                    </span>
+                    <IconDiv>
+                      <Icon
+                        icon='triangle-down'
+                        color={hover ? 'blue' : 'black'}
+                        size={7}
+                      />
+                    </IconDiv>
+                  </DropDownHeader>
+                  {isOpen && (
+                    <DropDownListContainer>
+                      <DropDownList onMouseEnter={() => setHover(true)}>
+                        {months.map((option, index) => (
+                          <ListItem
+                            selectedMonth={selectedMonth}
+                            onClick={() => {
+                              setHover(false);
+                              changeMonth(index);
+                              setIsOpen(false);
+                              setSelectedMonth(months[index]);
+                            }}
+                            key={Math.random()}
+                          >
+                            <span
+                              style={{
+                                color: `${selectedMonth === option
+                                  ? theme.variant['primary-1']
+                                  : theme.textColor
+                                  }`,
+                              }}
+                            >
+                              {option}
+                            </span>
+                          </ListItem>
+                        ))}
+                      </DropDownList>
+                    </DropDownListContainer>
+                  )}
+                </DropDownContainer>
+                <DropDownContainer ref={refYear}>
+                  <DropDownHeader
+                    style={{ marginLeft: '28px' }}
+                    onClick={() => {
+                      setIsOpenYear(!isOpenYear);
+                      setIsOpen(false);
+                    }}
+                  >
+                    <span
+                      onMouseEnter={() => setHoverYear(true)}
+                      onMouseLeave={() => setHoverYear(false)}
+                      style={{
+                        color: `${hoverYear
+                          ? theme.variant['primary-1']
+                          : theme.textColor
+                          }`,
+                      }}
+                    >
+                      {date.getFullYear()}
+                    </span>
+                    <IconDiv>
+                      <Icon
+                        icon='triangle-down'
+                        color={hoverYear ? 'blue' : 'black'}
+                        size={7}
+                      />
+                    </IconDiv>
+                  </DropDownHeader>
+                  {isOpenYear && (
+                    <DropDownListContainer>
+                      <DropDownList onMouseEnter={() => setHoverYear(true)}>
+                        {years.map((option, index) => (
+                          <ListItem
+                            onClick={() => {
+                              setHoverYear(false);
+                              changeYear(option);
+                              setSelectedYear(option);
+                              setIsOpenYear(false);
+                            }}
+                            key={Math.random()}
+                          >
+                            <span
+                              style={{
+                                color: `${selectedYear === option
+                                  ? theme.variant['primary-1']
+                                  : theme.textColor
+                                  }`,
+                              }}
+                            >
+                              {option}
+                            </span>
+                          </ListItem>
+                        ))}
+                      </DropDownList>
+                    </DropDownListContainer>
+                  )}
+                </DropDownContainer>
+              </div>
+            </CalendarHeaderDiv>
+          );
+        }}
+      />
+    </Wrapper>
+  );
 };
 
 DateSelect.propTypes = {
-    /**
-     * Date Props in GMT Format
-     */
-    startDate: PropTypes.any,
-    /**
-     * Date onChange Function
-     */
-    setStartDate: PropTypes.func,
-    /**
-     * Disable property of DateSelect
-     */
-    disabled: PropTypes.bool,
+  /**
+   * Date Props in GMT Format
+   */
+  startDate: PropTypes.any,
+  /**
+   * Date onChange Function
+   */
+  setStartDate: PropTypes.func,
+  /**
+   * Disable property of DateSelect
+   */
+  disabled: PropTypes.bool,
 };
 
 DateSelect.defaultProps = {
-    startDate: '',
-    setStartDate: () => { },
-    disabled: false,
+  startDate: '',
+  setStartDate: () => { },
+  disabled: false,
 };

package/components/Inputs/PasswordInput.js

@@ -7,7 +7,6 @@ import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
 import { Icon } from '../Icon';
 import { useState } from 'react';
-import { useEffect } from 'react';
 
 const TextWrapper = styled.div`
   //Set the styles from the default styles object
@@ -42,6 +41,8 @@ const TextWrapper = styled.div`
 
 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);
@@ -53,6 +54,7 @@ const Input = styled.input`
 	.sc-furwcr bxRAoq {
     color: ${defaultThemeColor.variant['neutral-3']};
   }
+
 `;
 
 const inline = css`
@@ -120,7 +122,7 @@ export const PasswordInput = ({
       <div
         style={{
           display: 'flex',
-          justifyContent: 'center',
+          justifyContent: 'start',
           alignItems: 'start',
         }}
       >
@@ -135,7 +137,8 @@ export const PasswordInput = ({
         >
           <Input
             inputStyle={inputStyle}
-            type={showEye ? 'text' : 'password'}
+            type={'text'}
+            showEye={showEye}
             defaultInputStyle={'input-wrapper'}
             {...props}
           />

package/components/Inputs/TextInput.js

@@ -32,6 +32,8 @@ const TextWrapper = styled.div`
 
   // custom styles
   ${({ textBoxStyle }) => textBoxStyle}
+
+  background-color:  ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
 `;
 
 const Input = styled.input`
@@ -47,6 +49,7 @@ const Input = styled.input`
 	.sc-furwcr bxRAoq {
     color: ${defaultThemeColor.variant['neutral-3']};
   }
+  background-color:  ${({ isDisabled }) => isDisabled ? defaultThemeColor.variant['neutral-5'] : defaultThemeColor.bgColor}
 `;
 
 const inline = css`
@@ -81,6 +84,7 @@ export const TextInput = ({
 	iconAfter,
 	isValid,
 	type,
+	isDisabled,
 	...props
 }) => {
 	return (
@@ -113,6 +117,7 @@ export const TextInput = ({
 			<TextWrapper
 				required={required}
 				themeColor={defaultThemeColor}
+				isDisabled={isDisabled}
 				textBoxStyle={textBoxStyle}
 				isValid={isValid}
 				theme={defaultStyles}
@@ -124,6 +129,8 @@ export const TextInput = ({
 					inputStyle={inputStyle}
 					type={type}
 					defaultInputStyle={'input-wrapper'}
+					isDisabled={isDisabled}
+					disabled={isDisabled}
 					{...props}
 				/>
 				<div className='input-icon'>{iconAfter}</div>
@@ -182,6 +189,10 @@ TextInput.propTypes = {
 	 *	input type i.e:- text, password
 	 */
 	type: PropTypes.string,
+	/**
+ *	input field disabled or not
+ */
+	isDisabled: PropTypes.bool,
 };
 
 TextInput.defaultProps = {
@@ -198,4 +209,5 @@ TextInput.defaultProps = {
 	labelStyle: {},
 	inputStyle: {},
 	type: 'text',
+	isDisabled: false
 };