groundfloor-react-ui 1.0.4 → 1.0.7

package/components/Inputs/DropdownSelect.js

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Select, { components } from "react-select";
+import Select, { components } from 'react-select';
 import defaultThemeColor from '../constants/defaultThemeColor';
 import defaultStyles from '../constants/defaultStyle';
 import getDefaultStyles from '../constants/utils';
 import { Label } from '../Label';
-import { Icon } from "../Icon";
-// import { LoadingIndicatorProps } from 'react-select';
+import { Icon } from '../Icon';
 
 const Wrapper = styled.div`
 
@@ -56,14 +55,15 @@ const Wrapper = styled.div`
 
         .master-dropdown__control,
         .new-select__control {
-            border:${({ isValid, }) => !isValid ? '0.5px solid ' + defaultThemeColor.ui['error'] :
-    '0.5px solid ' + defaultThemeColor.neutral['neutral-4']};
+            border:${({ isValid }) =>
+    !isValid
+      ? '0.5px solid ' + defaultThemeColor.ui['error']
+      : '0.5px solid ' + defaultThemeColor.neutral['neutral-4']};
         }
 
         .master-dropdown__option,
         .new-select__option {
             color: ${defaultThemeColor.textColor};
-            font-size: 14px;
             padding-top: 3px;
             padding-bottom: 3px;
             margin: 8px 0;
@@ -83,7 +83,10 @@ const Wrapper = styled.div`
        
         .new-select__control:hover,
         .new-select__control--is-focused {
-            border: ${({ isValid, }) => !isValid ? '0.5px solid ' + defaultThemeColor.ui['error'] : '0.5px solid ' + defaultThemeColor.primary['primary-1']};
+            border: ${({ isValid }) =>
+    !isValid
+      ? '0.5px solid ' + defaultThemeColor.ui['error']
+      : '0.5px solid ' + defaultThemeColor.primary['primary-1']};
             box-shadow: none;
         }
       
@@ -128,7 +131,7 @@ const Wrapper = styled.div`
 
         .text-main-alt {
             color: ${defaultThemeColor.textColor} !important;
-            font-size:14px;
+            // font-size:14px;
         }
         .text-more-alt{
             font-size:12px;
@@ -155,62 +158,66 @@ const Wrapper = styled.div`
             margin:0px;
             padding:0px;
         }
-        .css-eehvce-Input{
-          margin:0px;
-          padding:0px;
-          line-height:1.3;
-      }
-`
-
+    
+`;
 
 const LabelWrapper = styled.div`
-
-   // Default style
-   display: flex;
-
+  // Default style
+  display: flex;
 
   //Set the styles from the default styles object
-    ${({ theme, labelWrapperStyle }) => {
+  ${({ theme, labelWrapperStyle }) => {
     return getDefaultStyles(theme, labelWrapperStyle);
   }}
-    // custom styles
+  // custom styles
     ${({ customLabelStyles }) => customLabelStyles}
-`
+`;
 const IconDiv = styled.div`
-    margin-left: 6px;
-    margin-top:-14px;
-    cursor:pointer;
+  margin-left: 6px;
+  margin-top: -14px;
+  cursor: pointer;
 `;
 
-export const DropdownSelect = ({ customWrapperStyles, customLabelStyles, labelStyle, label, isRequired, optionArr, selectedValue, setSelectedValue, placeHolder, dropdownType, isDisabled, isValid, clearSelected, isClearSelected, isLoading, height, placeholderSize, ...props }) => {
-  const DropdownIndicator = p => {
+export const DropdownSelect = ({
+  customWrapperStyles,
+  customLabelStyles,
+  labelStyle,
+  label,
+  isRequired,
+  optionArr,
+  selectedValue,
+  setSelectedValue,
+  placeHolder,
+  dropdownType,
+  isDisabled,
+  isValid,
+  clearSelected,
+  isClearSelected,
+  isLoading,
+  height,
+  fontSize,
+  ...props
+}) => {
+  const DropdownIndicator = (p) => {
     return (
       <components.DropdownIndicator {...p}>
-        {isClearSelected == true ?
-          <IconDiv onClick={() => { clearSelected() }}>
-            <Icon icon='cross-icon'
-              color={'black'}
-              size={8} />
+        {isClearSelected == true ? (
+          <IconDiv
+            onClick={() => {
+              clearSelected();
+            }}
+          >
+            <Icon icon='cross-icon' color={'black'} size={8} />
           </IconDiv>
-          : null}
+        ) : null}
         <IconDiv>
-          <Icon icon='triangle-down'
-            color={'black'}
-            size={8} />
+          <Icon icon='triangle-down' color={'black'} size={8} />
         </IconDiv>
       </components.DropdownIndicator>
     );
   };
 
-  // const LoadingIndicator = (LoadingIndicatorProps) => {
-  //     return (
-  //         <div className='custom-loader'>
-  //             <Icon icon='arrow-rotate' color='black' />
-  //         </div>
-  //     );
-  // };
-
-  const Option = p => {
+  const Option = (p) => {
     const checkboxStyle = {
       width: '15px',
       height: '15px',
@@ -220,16 +227,28 @@ export const DropdownSelect = ({ customWrapperStyles, customLabelStyles, labelSt
       lineHeight: '10px',
     };
     const checked = (
-      <div style={{ ...checkboxStyle, backgroundColor: p?.data?.color ?? '#2E56F4' }}>
+      <div
+        style={{
+          ...checkboxStyle,
+          backgroundColor: p?.data?.color ?? '#2E56F4',
+        }}
+      >
         <Icon icon='check-icon' color='white' />
       </div>
-    )
+    );
     const unchecked = (
-      <div style={{ ...checkboxStyle, backgroundColor: '#e0e7ff' }} ></div>
-    )
+      <div style={{ ...checkboxStyle, backgroundColor: '#e0e7ff' }}></div>
+    );
     return (
       <components.Option {...p}>
-        <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', width: '100%' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'start',
+            alignItems: 'center',
+            width: '100%',
+          }}
+        >
           {p.isSelected ? checked : unchecked}
           <div className='text-main-alt' style={{ marginLeft: '10px' }}>
             {p.label}
@@ -239,81 +258,53 @@ export const DropdownSelect = ({ customWrapperStyles, customLabelStyles, labelSt
     );
   };
 
-  // const ValueContainer = p => {
-  //     if (props.value.length < 1) {
-  //         return (
-  //             <components.ValueContainer {...p}>
-  //                 {p.children}
-  //             </components.ValueContainer>
-  //         );
-  //     }
-  //     let firstSelected = props.value[0].label;
-  //     let moreComp = (
-  //         <div className='ml-auto'>
-  //             &amp; {props.value.length - 1} more
-  //         </div>
-  //     )
-  //     return (
-  //         <components.ValueContainer {...p}>
-  //             <div className="d-flex w-100">
-  //                 <div>
-  //                     {firstSelected}
-  //                 </div>
-  //                 {props.value.length > 1 && moreComp}
-  //             </div>
-  //         </components.ValueContainer>
-  //     );
-  // };
-
   const MultiValue = ({ getValue, index, ...p }) => {
     const firstSelected = p?.data?.label || 'Select';
-    const len = getValue().length
-    return !index && (
-      <div className='multiValue-wrapper'>
-        <div className='text-main-alt'>
-          {firstSelected}
+    const len = getValue().length;
+    return (
+      !index && (
+        <div className='multiValue-wrapper'>
+          <div className='text-main-alt'>{firstSelected}</div>
+          {len > 1 && (
+            <div className={`text-more-alt`}>&amp; {len - 1} more</div>
+          )}
         </div>
-        {len > 1 && <div className={`text-more-alt`}>
-          &amp; {len - 1} more
-        </div>}
-      </div>
-    )
-  }
-
-
+      )
+    );
+  };
 
   const stylesComp = {
-
-    control: base => ({
+    control: (base) => ({
       ...base,
       border: '1px solid #d4d7e3',
       height: `${height}px`,
       minHeight: `${height}px`,
       minWidth: '226px',
     }),
-    placeholder: base => ({
+    placeholder: (base) => ({
       ...base,
-      fontSize: placeholderSize + 'px',
-      marginLeft: '0px'
+      fontSize: fontSize + 'px',
+      marginLeft: '0px',
     }),
-    dropdownIndicator: base => ({
+    dropdownIndicator: (base) => ({
       ...base,
       height: `${height}px`,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
     }),
-    valueContainer: base => ({
+    valueContainer: (base) => ({
       ...base,
-      height: `${height}px`,
-      padding: '7px 8px'
+      // height: `${height}px`,
+      // padding: '7px 8px',
+      fontSize: fontSize + 'px',
     }),
-    indicatorsContainer: base => ({
+    indicatorsContainer: (base) => ({
       ...base,
       padding: 0,
       height: `${height}px`,
     }),
-    menu: base => ({
+    menu: (base) => ({
       ...base,
       border: 'none',
       marginTop: '1px',
@@ -322,47 +313,59 @@ export const DropdownSelect = ({ customWrapperStyles, customLabelStyles, labelSt
       outline: 'none',
       boxShadow: '0px 6px 20px rgba(56, 66, 100, 0.15)',
       borderRadius: '4.32px',
-      fontSize: '14px'
-
+      fontSize: fontSize + 'px',
+    }),
+    singleValue: (base) => ({
+      ...base,
+      fontSize: fontSize + 'px',
+      marginLeft: '0px',
     }),
-    singleValue: base => ({
+    multiValue: (base) => ({
       ...base,
-      fontSize: '14px',
-      marginLeft: '0px'
+      marginLeft: '0px',
     }),
-    input: base => ({
+    input: (base) => ({
       ...base,
-      fontSize: '14px',
+      fontSize: fontSize + 'px',
     }),
     option: (provided, state) => ({
       ...provided,
-      backgroundColor: state.isSelected || state.isFocused ? '#F0F3F8' : 'white',
+      backgroundColor:
+        state.isSelected || state.isFocused ? '#F0F3F8' : 'white',
       padding: '10px',
       cursor: 'pointer',
-      color: '#081348'
+      color: '#081348',
     }),
     ...props.styles,
-  }
+  };
   return (
-    <Wrapper style={customWrapperStyles} isValid={isValid} placeholderSize={placeholderSize}
-    >
-
-      {label && <LabelWrapper theme={defaultStyles}
-        labelWrapperStyle={'selectComp-label-wrapper'} style={customLabelStyles}>
-        <Label
-          themeColor={defaultThemeColor}
-          customStyles={labelStyle}
-          type={'label-text'}
-          text={label}
-          style={{ marginBottom: '7px' }}
-        />
-        {isRequired && <div style={{
-          marginLeft: '4px',
-          color: `${defaultThemeColor.ui['error']}`
-        }} >*</div>}
-      </LabelWrapper>}
-      {dropdownType === 'multiSelect' ?
-
+    <Wrapper style={customWrapperStyles} isValid={isValid} fontSize={fontSize}>
+      {label && (
+        <LabelWrapper
+          theme={defaultStyles}
+          labelWrapperStyle={'selectComp-label-wrapper'}
+          style={customLabelStyles}
+        >
+          <Label
+            themeColor={defaultThemeColor}
+            customStyles={labelStyle}
+            type={'label-text'}
+            text={label}
+            style={{ marginBottom: '7px', paddingBottom: '0px' }}
+          />
+          {isRequired && (
+            <div
+              style={{
+                marginLeft: '4px',
+                color: `${defaultThemeColor.ui['error']}`,
+              }}
+            >
+              *
+            </div>
+          )}
+        </LabelWrapper>
+      )}
+      {dropdownType === 'multiSelect' ? (
         <Select
           components={{
             DropdownIndicator,
@@ -370,11 +373,11 @@ export const DropdownSelect = ({ customWrapperStyles, customLabelStyles, labelSt
             Option,
             // LoadingIndicator: () => null,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null
+            ClearIndicator: () => null,
           }}
-          className="select-manage-page"
-          classNamePrefix="new-select"
-          name={"select-dropdown mb-1"}
+          className='select-manage-page'
+          classNamePrefix='new-select'
+          name={'select-dropdown'}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           value={selectedValue}
@@ -388,38 +391,36 @@ export const DropdownSelect = ({ customWrapperStyles, customLabelStyles, labelSt
           onMenuClose={props.onMenuClose}
           isSearchable={false}
           isLoading={isLoading}
-
           {...props}
-        /> :
+        />
+      ) : (
         <Select
           components={{
             DropdownIndicator,
             // LoadingIndicator,
             IndicatorSeparator: () => null,
-            ClearIndicator: () => null
+            ClearIndicator: () => null,
           }}
-          className="select-manage-page"
+          className='select-manage-page'
           // className="new-select"
-          classNamePrefix="new-select"
-          name={"select-dropdown"}
+          classNamePrefix='new-select'
+          name={'select-dropdown'}
           options={optionArr}
           placeholder={placeHolder}
           isDisabled={isDisabled}
           value={{
             value: selectedValue ? selectedValue.value : '',
-            label: selectedValue ? selectedValue.label : ''
+            label: selectedValue ? selectedValue.label : '',
           }}
           styles={stylesComp}
           onChange={setSelectedValue}
           isLoading={isLoading}
           {...props}
         />
-
-
-      }
+      )}
     </Wrapper>
-  )
-}
+  );
+};
 
 DropdownSelect.propTypes = {
   /**
@@ -435,12 +436,12 @@ DropdownSelect.propTypes = {
    */
   optionArr: PropTypes.array,
   /**
-   *	SelectBox Selected value. This is a array of object must be with this format:
-      [{
-          label:string,
-          value:string
-      }]
-   */
+     *	SelectBox Selected value. This is a array of object must be with this format:
+        [{
+            label:string,
+            value:string
+        }]
+     */
   selectedValue: PropTypes.object,
   /**
    *	Function to set selected value
@@ -451,14 +452,14 @@ DropdownSelect.propTypes = {
    */
   placeHolder: PropTypes.string,
   /**
-  *	SelectBox Placeholder's font size
-  */
-  placeholderSize: PropTypes.number,
+   *	SelectBox Placeholder's font size
+   */
+  fontSize: PropTypes.number,
   /**
-    *   This Function will be called if cross button pressed
-    */
+   *   This Function will be called if cross button pressed
+   */
   clearSelected: PropTypes.func,
-}
+};
 
 DropdownSelect.defaultProps = {
   label: '',
@@ -470,5 +471,5 @@ DropdownSelect.defaultProps = {
   isValid: true,
   isClearSelected: false,
   height: 31,
-  placeholderSize: 14
-}
+  fontSize: 14,
+};

package/components/Inputs/DropzoneInput.js

@@ -94,16 +94,16 @@ const OtherInfoDiv = styled.div`
   color: #494949;
   margin-left: 11px;
   padding-left: 2px;
-`
+`;
 
 const AdditionalText = styled.p`
-color: #494949;
-display: flex;
-justify-content: center;
-align-items: center;
-margin:20px 0px;
-font-size: 14px;
-`
+  color: #494949;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0px;
+  font-size: 14px;
+`;
 
 export const DropzoneInput = ({
     theme,
@@ -198,11 +198,9 @@ export const DropzoneInput = ({
     }
     return (
         <div
-            style={{
-                paddingBottom: '5px',
-            }}
+
         >
-            <div style={{ display: 'flex' }}>
+            <div style={{ display: 'flex', width: 'inherit' }}>
                 <Label
                     themeColor={defaultThemeColor}
                     customStyles={labelStyle}
@@ -211,7 +209,8 @@ export const DropzoneInput = ({
                     text={label}
                     style={{
                         display: 'flex',
-                        paddingBottom: `${!labelInline ? '7px' : ''}`,
+                        marginBottom: `${!labelInline ? '7px' : ''}`,
+                        paddingBottom: '0px',
                     }}
                     {...props}
                 />
@@ -304,8 +303,10 @@ export const DropzoneInput = ({
                     )}
                 </TextDiv>
             </ParentDiv>
-            {additionalText.length > 0 && <AdditionalText>{additionalText}</AdditionalText>
-            }      {fileArr?.map((item, i) => {
+            {additionalText.length > 0 && (
+                <AdditionalText>{additionalText}</AdditionalText>
+            )}{' '}
+            {fileArr?.map((item, i) => {
                 return (
                     <FileDiv
                         theme={defaultStyles}
@@ -314,21 +315,25 @@ export const DropzoneInput = ({
                         customFileStyles={customFileStyles}
                     >
                         <IconDiv>
-                            <Icon icon='pdf-icon' />
+                            <Icon icon='file-icon' />
                         </IconDiv>
-                        <FileName
+
+                        {!(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>
+                        </FileName>}
+
+
 
 
+                        <OtherInfoDiv>{item?.otherInfo}</OtherInfoDiv>
                         <IconDiv>
                             <Icon icon={`${!(item instanceof File) && 'cloud-icon'}`} />
                         </IconDiv>
-                        <OtherInfoDiv>{item?.otherInfo}</OtherInfoDiv>
                         <CrossDiv
                             key={(Math.random() * 101) | 0}
                             onClick={() => fileRemoveFromArary(item, i)}
@@ -396,8 +401,8 @@ DropzoneInput.propTypes = {
      */
     messageSize: PropTypes.number,
     /**
-       * Additional text between dropzone and files
-       */
+     * Additional text between dropzone and files
+     */
     additionalText: PropTypes.string,
 
     /**
@@ -419,5 +424,5 @@ DropzoneInput.defaultProps = {
     customTextStyles: {},
     customFileNameStyles: {},
     messageSize: 100,
-    additionalText: ''
+    additionalText: '',
 };