groundfloor-react-ui 1.2.3 → 1.2.5

package/components/Icon/Icon.js

@@ -1,55 +1,55 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import { ReactSVG } from "react-svg";
 import styled, { css } from 'styled-components';
 import defaultThemeColor from '../constants/defaultThemeColor';
 
 /** import icons from assets here */
-import plusOutline from '../../assets/icons/plus-outlined.svg'
-import checkMark from '../../assets/icons/checkmark.svg'
-import chevronRight from '../../assets/icons/chevron-right.svg'
-import chevronLeft from '../../assets/icons/chevron-left.svg'
-import appLogo from '../../assets/icons/app-logo.svg'
-import email from '../../assets/icons/email.svg'
-import chevronDown from '../../assets/icons/chevron-down.svg'
-import triangleDown from '../../assets/icons/triangle-down.svg'
-import info from '../../assets/icons/info.svg'
-import crossIcon from '../../assets/icons/cross-icon.svg'
-import fileAttach from '../../assets/icons/file-attach.svg'
-import jpgIcon from '../../assets/icons/jpg-icon.svg'
-import pdfIcon from '../../assets/icons/pdf-icon.svg'
-import arrowUp from '../../assets/icons/arrow-up.svg'
-import arrowDown from '../../assets/icons/arrow-down.svg'
-import penIcon from '../../assets/icons/pen-icon.svg'
-import signIcon from '../../assets/icons/sign-icon.svg'
-import editIcon from '../../assets/icons/edit-icon.svg'
-import hamburgerMenu from '../../assets/icons/hamburger-menu.svg'
-import bell from '../../assets/icons/bell.svg'
-import star from '../../assets/icons/star.svg'
-import cloudIcon from '../../assets/icons/cloud-icon.svg'
-import checkIcon from '../../assets/icons/check.svg'
-import arrowRotate from '../../assets/icons/arrow-rotate.svg'
-import connection from '../../assets/icons/connection.svg'
-import magnifier from '../../assets/icons/magnifier.svg'
-import doorInternalActive from '../../assets/icons/door-internal-active.svg'
-import ellipsesHorizontal from '../../assets/icons/ellipses-horizontal.svg'
-import ellipses from '../../assets/icons/ellipses.svg'
-import fileAttachWhite from '../../assets/icons/file-attach-white.svg'
-import equation from '../../assets/icons/functional-equation-regular.svg'
-import menuEllipseTwo from '../../assets/icons/menu-ellipse-two.svg'
-import menuEllipse from '../../assets/icons/menu-ellipse.svg'
-import pauseAll from '../../assets/icons/pause-all.svg'
-import resume from '../../assets/icons/resume.svg'
-import trashIcon from '../../assets/icons/trash-icon.svg'
-import zoomInWhite from '../../assets/icons/zoom-in-white.svg'
-import view from '../../assets/icons/view.svg'
-import user from '../../assets/icons/users.svg'
-import watcher from '../../assets/icons/watcher.svg'
-import fileUpload from '../../assets/icons/file-upload.svg'
-import eyeHide from '../../assets/icons/eye-hide.svg'
-import eyeView from '../../assets/icons/eye-hide-view.svg'
-import fileIcon from '../../assets/icons/file-icon.svg'
-import defaultIcon from '../../assets/icons/default.svg'
+import appLogo from '../../assets/icons/app-logo.svg';
+import arrowDown from '../../assets/icons/arrow-down.svg';
+import arrowRotate from '../../assets/icons/arrow-rotate.svg';
+import arrowUp from '../../assets/icons/arrow-up.svg';
+import bell from '../../assets/icons/bell.svg';
+import checkIcon from '../../assets/icons/check.svg';
+import checkMark from '../../assets/icons/checkmark.svg';
+import chevronDown from '../../assets/icons/chevron-down.svg';
+import chevronLeft from '../../assets/icons/chevron-left.svg';
+import chevronRight from '../../assets/icons/chevron-right.svg';
+import cloudIcon from '../../assets/icons/cloud-icon.svg';
+import connection from '../../assets/icons/connection.svg';
+import crossIcon from '../../assets/icons/cross-icon.svg';
+import defaultIcon from '../../assets/icons/default.svg';
+import doorInternalActive from '../../assets/icons/door-internal-active.svg';
+import editIcon from '../../assets/icons/edit-icon.svg';
+import ellipsesHorizontal from '../../assets/icons/ellipses-horizontal.svg';
+import ellipses from '../../assets/icons/ellipses.svg';
+import email from '../../assets/icons/email.svg';
+import eyeView from '../../assets/icons/eye-hide-view.svg';
+import eyeHide from '../../assets/icons/eye-hide.svg';
+import fileAttachWhite from '../../assets/icons/file-attach-white.svg';
+import fileAttach from '../../assets/icons/file-attach.svg';
+import fileIcon from '../../assets/icons/file-icon.svg';
+import fileUpload from '../../assets/icons/file-upload.svg';
+import equation from '../../assets/icons/functional-equation-regular.svg';
+import hamburgerMenu from '../../assets/icons/hamburger-menu.svg';
+import info from '../../assets/icons/info.svg';
+import jpgIcon from '../../assets/icons/jpg-icon.svg';
+import magnifier from '../../assets/icons/magnifier.svg';
+import menuEllipseTwo from '../../assets/icons/menu-ellipse-two.svg';
+import menuEllipse from '../../assets/icons/menu-ellipse.svg';
+import pauseAll from '../../assets/icons/pause-all.svg';
+import pdfIcon from '../../assets/icons/pdf-icon.svg';
+import penIcon from '../../assets/icons/pen-icon.svg';
+import plusOutline from '../../assets/icons/plus-outlined.svg';
+import resume from '../../assets/icons/resume.svg';
+import signIcon from '../../assets/icons/sign-icon.svg';
+import star from '../../assets/icons/star.svg';
+import trashIcon from '../../assets/icons/trash-icon.svg';
+import triangleDown from '../../assets/icons/triangle-down.svg';
+import user from '../../assets/icons/users.svg';
+import view from '../../assets/icons/view.svg';
+import watcher from '../../assets/icons/watcher.svg';
+import zoomInWhite from '../../assets/icons/zoom-in-white.svg';
 
 
 /** icon name should be kebab-case, e.g "plus-outline" */

package/components/Inputs/ColorInput.js

@@ -15,8 +15,8 @@ background-color: ${({ theme }) => theme.bgColor};
 }
 
 ${({ inBuiltCss, defaultColorWrapperStyle }) => {
-  return getDefaultStyles(inBuiltCss, defaultColorWrapperStyle);
-}}
+    return getDefaultStyles(inBuiltCss, defaultColorWrapperStyle);
+  }}
 // custom styles
 ${({ customColorWrapperStyle }) => customColorWrapperStyle}
 
@@ -41,8 +41,8 @@ padding: 0;
 }
 
 ${({ inBuiltCss, defaultInputColorStyle }) => {
-  return getDefaultStyles(inBuiltCss, defaultInputColorStyle);
-}}
+    return getDefaultStyles(inBuiltCss, defaultInputColorStyle);
+  }}
 // custom styles
 ${({ customInputColorStyle }) => customInputColorStyle}
 `;
@@ -57,45 +57,46 @@ export const ColorInput = ({
   customColorWrapperStyle,
   id,
   ...props
-  }) => {
-    const activeTheme = useTheme() || defaultThemeColor;
+}) => {
+  const activeTheme = useTheme() || defaultThemeColor;
   return (
-    
+
     <ColorWrapper customColorWrapperStyle={customColorWrapperStyle}
-    defaultColorWrapperStyle={'ColorWrapper'} 
-    theme={activeTheme}
-    inBuiltCss={defaultStyles}
-    {...props}>
-        
-        <InputColor 
+      defaultColorWrapperStyle={'ColorWrapper'}
+      theme={activeTheme}
+      inBuiltCss={defaultStyles}
+      {...props}>
+
+      <InputColor
         id={id}
         customInputColorStyle={customInputColorStyle}
-        defaultInputColorStyle={'input-color'} 
+        defaultInputColorStyle={'input-color'}
         inBuiltCss={defaultStyles}
         theme={activeTheme}
         {...props}
         type="color"
         value={value}
-        
+
         onChange={
-          (e)=>{
-            setValue(e.target.value)}}
-        />
-        <Label
-          themeColor={defaultThemeColor}
-          customStyles={labelStyle}
-          type={'label-text'}
-          text={label}
-          style={{
-            display: 'flex',
-            paddingBottom: '0px',
-            paddingLeft: '10px'
+          (e) => {
+            setValue(e.target.value)
           }}
-          {...props}
-        />
-      
+      />
+      <Label
+        themeColor={defaultThemeColor}
+        customStyles={labelStyle}
+        type={'label-text'}
+        text={label}
+        style={{
+          display: 'flex',
+          paddingBottom: '0px',
+          paddingLeft: '10px'
+        }}
+        {...props}
+      />
+
     </ColorWrapper>
-    
+
   );
 };
 
@@ -107,8 +108,8 @@ ColorInput.propTypes = {
   /**
    *	Label style of ColorInput
    */
-   labelStyle: PropTypes.object,
-  
+  labelStyle: PropTypes.object,
+
   /**
    *	color value of input
    */
@@ -124,21 +125,21 @@ ColorInput.propTypes = {
   /**
    *	custom style of the wrapper around the color-input
    */
-   customColorWrapperStyle: PropTypes.object,
-   /**
-   *	id of the colorInput
-   */
-   id: PropTypes.string
+  customColorWrapperStyle: PropTypes.object,
+  /**
+  *	id of the colorInput
+  */
+  id: PropTypes.string
 
 }
 
-ColorInput.defaultProps ={
-label: '',
-labelStyle: {},
-customInputColorStyle: {},
-customColorWrapperStyle: {},
-value: '#FFFFFF',
-setValue: ()=>{ },
-id: ''
+ColorInput.defaultProps = {
+  label: '',
+  labelStyle: {},
+  customInputColorStyle: {},
+  customColorWrapperStyle: {},
+  value: '#FFFFFF',
+  setValue: () => { },
+  id: ''
 };
 

package/components/Inputs/DropdownSelect.js

@@ -118,11 +118,18 @@ const Wrapper = styled.div`
             color:${({ theme }) => theme.textColor} !important;
             margin-right: 0px;
         }
+        .text-main-alt-value {
+          color:${({ theme }) => theme.textColor} !important;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;    
+          
+      }
         .text-more-alt{
             font-size:12px;
             color: ${({ theme }) => theme.neutral['neutral-2']};
             padding-right: 0px;
-            margin-right: 0px;
+          
 
         }
         .css-mohuvp-dummyInput-DummyInput{
@@ -252,20 +259,12 @@ export const DropdownSelect = ({
         )}
 
         {children}
-        {len > 1 && <div className={`text-more-alt`}>&amp; {len - 1} more</div>}
+        {len > 1 && <span className={`text-more-alt`}>&amp; {len - 1} more</span>}
       </components.ValueContainer>
     );
   };
 
-  const ValueContainer = ({ getValue, children, ...props }) => {
-    const len = getValue().length;
-    return (
-      <components.ValueContainer {...props}>
-        {children}
-        {len > 1 && <div className={`text-more-alt`}>&amp; {len - 1} more</div>}
-      </components.ValueContainer>
-    );
-  };
+
 
   const Option = (p) => {
     const checkboxStyle = {
@@ -312,7 +311,7 @@ export const DropdownSelect = ({
 
   const MultiValue = ({ index, ...p }) => {
     const firstSelected = p?.data?.label || 'Select';
-    return !index && <div className='text-main-alt'>{firstSelected}</div>;
+    return !index && <span className='text-main-alt-value'>{firstSelected}</span>;
   };
 
   const stylesComp = {
@@ -321,7 +320,7 @@ export const DropdownSelect = ({
       border: !isValid
         ? '1px solid ' + activeTheme.ui['error']
         : '1px solid ' + activeTheme.border,
-      minWidth: '215px',
+      minWidth: '226px',
       height: `${height}px`,
       minHeight: `${height}px`,
       boxShadow: (state.isSelected || state.isFocused) && 'none',
@@ -350,6 +349,7 @@ export const DropdownSelect = ({
     valueContainer: (base) => ({
       ...base,
       display: 'flex',
+      justifyContent: 'space-between',
       fontSize: fontSize + 'px',
     }),
     indicatorsContainer: (base) => ({
@@ -368,6 +368,7 @@ export const DropdownSelect = ({
       borderRadius: '4.32px',
       fontSize: fontSize + 'px',
       width: '100%',
+      minWidth: '226px',
     }),
     singleValue: (base) => ({
       ...base,
@@ -652,6 +653,9 @@ DropdownSelect.propTypes = {
    *   iconSize of the select
    */
   leftIconSize: PropTypes.number,
+  /**
+  *   to show or hide indicator
+  */
   showIndicator: PropTypes.bool,
 };
 
@@ -679,7 +683,7 @@ DropdownSelect.defaultProps = {
   iconName: 'triangle-down',
   iconColor: 'black',
   iconSize: 8,
-  leftIcon: 'magnifier-icon',
+  leftIcon: '',
   leftIconColor: 'black',
   leftIconSize: 10,
   showIndicator: true,

package/components/Inputs/DropzoneInput.js

@@ -431,7 +431,7 @@ DropzoneInput.propTypes = {
     /**
      * id of the file input 
      */
-     id: PropTypes.string
+    id: PropTypes.string
 };
 
 DropzoneInput.defaultProps = {

package/components/Inputs/NumericInput.js

@@ -149,10 +149,10 @@ NumericInput.propTypes = {
    * custom style of input element
    */
   inputStyle: PropTypes.object,
-   /**
-   * id of the number input
-   */
-    id: PropTypes.string,
+  /**
+  * id of the number input
+  */
+  id: PropTypes.string,
 };
 
 NumericInput.defaultProps = {
@@ -161,5 +161,5 @@ NumericInput.defaultProps = {
   labelInline: false,
   inputStyle: {},
   inputValue: null,
-  id:''
+  id: ''
 };

package/components/Inputs/PasswordInput.js

@@ -154,10 +154,10 @@ export const PasswordInput = ({
             inBuiltCss={defaultStyles}
             {...props}
           />
-          {showHideIcon === true ? 
-          <div className='input-icon' onClick={() => setShowEye(!showEye)}>
-          {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
-        </div>: ''
+          {showHideIcon === true ?
+            <div className='input-icon' onClick={() => setShowEye(!showEye)}>
+              {showEye ? <Icon icon='eye-show' /> : <Icon icon='eye-hide' />}
+            </div> : ''
           }
         </TextWrapper>
         {passwordRules ? <div style={{ ...rulesStyle, marginLeft: '5px' }}>{passwordRules}</div> : ''}
@@ -220,7 +220,7 @@ PasswordInput.propTypes = {
   /**
    *	hide icon shows or not
    */
-   showHideIcon: PropTypes.bool,
+  showHideIcon: PropTypes.bool,
 };
 
 PasswordInput.defaultProps = {

package/components/Inputs/RadioInput.js

@@ -214,16 +214,16 @@ RadioInput.propTypes = {
     /**
        *	RadioButton Contents i.e:- 
          [
-    {
-      label: 'First Radio Button',
-      value: 'first',
-      disabled: true,
-      disabledColor: '#ae3232',
-      id: '1'
-    },
-    { label: 'Second Radio Button', value: 'second', id: '2' },
-    { label: 'Third Radio Button', value: 'third', id: '3' },
-  ]
+      {
+        label: 'First Radio Button',
+        value: 'first',
+        disabled: true,
+        disabledColor: '#ae3232',
+        id: '1'
+      },
+      { label: 'Second Radio Button', value: 'second', id: '2' },
+      { label: 'Third Radio Button', value: 'third', id: '3' },
+    ]
        */
     options: PropTypes.array,
     /**
@@ -231,8 +231,8 @@ RadioInput.propTypes = {
      */
     optionStyle: PropTypes.object,
     /**
-   *	RadioButton wraperdiv style object
-   */
+     *	RadioButton wraperdiv style object
+     */
     WrapperDivStyle: PropTypes.object,
     /**
      *	RadioButton checked value

package/components/Inputs/Signature.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import SignaturePad from 'react-signature-pad-wrapper';
 import styled, { useTheme } from 'styled-components';
 import defaultStyles from '../constants/defaultStyle';

package/components/Inputs/TextInput.js

@@ -198,10 +198,10 @@ TextInput.propTypes = {
  */
 	theme: PropTypes.object,
 	/**
-   *	id of the text input
-   */
-   id: PropTypes.string,
- 
+	 *	id of the text input
+	 */
+	id: PropTypes.string,
+
 };
 
 Input.defaultProps = {

package/components/Inputs/TimeInput.js

@@ -170,7 +170,7 @@ TimeInput.propTypes = {
   /**
    *	id of the time input
    */
-   id: PropTypes.string,
+  id: PropTypes.string,
 };
 
 TimeInput.defaultProps = {

package/components/Label/Label.js

@@ -1,21 +1,21 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 import styled from 'styled-components';
-import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyles from '../constants/defaultStyle';
+import defaultThemeColor from '../constants/defaultThemeColor';
 import getDefaultStyles from '../constants/utils';
 
- const LabelLayout = styled.label`
+const LabelLayout = styled.label`
     //Set the styles from the default styles object
-    ${ ({ theme, type }) => {
+    ${({ theme, type }) => {
         return getDefaultStyles(theme, type);
-        }}
+    }}
         
     // custom styles
-    ${({customStyles})=>customStyles}
+    ${({ customStyles }) => customStyles}
 `;
 
-export const Label = ({ customStyles, text, className,required, ...props }) => {
+export const Label = ({ customStyles, text, className, required, ...props }) => {
     const theme = defaultStyles;
     return (
         <LabelLayout required={required} theme={theme} customStyles={customStyles} type={'label'} {...props}>
@@ -42,7 +42,7 @@ Label.propTypes = {
 }
 
 Label.defaultProps = {
-    text:''
+    text: ''
 }
 
 

package/components/Loaders/Loader.js

@@ -1,6 +1,6 @@
-import React from "react";
-import styled, { keyframes, css } from "styled-components";
 import PropTypes from 'prop-types';
+import React from "react";
+import styled, { css, keyframes } from "styled-components";
 import defaultStyles from '../constants/defaultStyle';
 
 const ldsSpinner = keyframes`
@@ -128,7 +128,7 @@ const Spinner = styled.div`
     }
 `
 
-export const Loader = ({  size, thickness, propellerHeight, customStyles }) => {
+export const Loader = ({ size, thickness, propellerHeight, customStyles }) => {
     const theme = defaultStyles;
 
     return (