groundfloor-react-ui 1.0.0 → 1.0.1

package/components/Inputs/DropdownSelect.js

@@ -1,16 +1,20 @@
 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`
 
+
+
+
+
+
     .master-dropdown,
     .new-select {
         .master-dropdown__menu,
@@ -56,8 +60,10 @@ 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,
@@ -83,7 +89,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;
         }
       
@@ -102,7 +111,6 @@ const Wrapper = styled.div`
         .default-select {
         .default-select__control {
             height: 39px;
-            // max-height: 39px;
         }
 
         .default-select__value-container--has-value {
@@ -139,328 +147,326 @@ const Wrapper = styled.div`
         .css-mohuvp-dummyInput-DummyInput{
             height:0px;
         }
-        .css-14el2xx-placeholder{
-            font-size: ${({ placeholderSize }) => placeholderSize + 'px'};
-        }
+       
         .css-6j8wv5-Input{
             margin:0px;
             padding-top:0px;
         }
-        .custom-loader{
-            animation: loader 3s;
-        
-        }
-        @keyframes loader {
-            50% {transform: rotate(0deg);}
-            100% {transform: rotate(360deg);}
-          }
-
         .new-select__menu {
             z-Index: 2;    
         }
+        .css-1n10ic4-Input {
+            margin: 0px;
+            padding:0px
+        }
     
-`
-
+`;
 
 const LabelWrapper = styled.div`
-
-   // Default style
-   display: flex;
-
+  // Default style
+  display: flex;
 
   //Set the styles from the default styles object
-    ${({ theme, labelWrapperStyle }) => {
-        return getDefaultStyles(theme, labelWrapperStyle);
-    }}
-    // custom styles
+  ${({ theme, labelWrapperStyle }) => {
+    return getDefaultStyles(theme, labelWrapperStyle);
+  }}
+  // 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 => {
-        return (
-            <components.DropdownIndicator {...p}>
-                {isClearSelected == true ?
-                    <IconDiv onClick={() => { clearSelected() }}>
-                        <Icon icon='cross-icon'
-                            color={'black'}
-                            size={8} />
-                    </IconDiv>
-                    : null}
-                <IconDiv>
-                    <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 checkboxStyle = {
-            width: '15px',
-            height: '15px',
-            borderRadius: '2px',
-            padding: '3px 4px',
-            fontSize: '8px',
-            lineHeight: '10px',
-        };
-        const checked = (
-            <div style={{ ...checkboxStyle, backgroundColor: p?.data?.color ?? '#2E56F4' }}>
-                <Icon icon='check-icon' color='white' />
-            </div>
-        )
-        const unchecked = (
-            <div style={{ ...checkboxStyle, backgroundColor: '#e0e7ff' }} ></div>
-        )
-        return (
-            <components.Option {...p}>
-                <div style={{ display: 'flex', justifyContent: 'start', alignItems: 'center', width: '100%' }}>
-                    {p.isSelected ? checked : unchecked}
-                    <div className='text-main-alt' style={{ marginLeft: '10px' }}>
-                        {p.label}
-                    </div>
-                </div>
-            </components.Option>
-        );
+export const DropdownSelect = ({
+  customWrapperStyles,
+  customLabelStyles,
+  labelStyle,
+  label,
+  isRequired,
+  optionArr,
+  selectedValue,
+  setSelectedValue,
+  placeHolder,
+  dropdownType,
+  isDisabled,
+  isValid,
+  clearSelected,
+  isClearSelected,
+  isLoading,
+  height,
+  placeholderSize,
+  ...props
+}) => {
+  const DropdownIndicator = (p) => {
+    return (
+      <components.DropdownIndicator {...p}>
+        {isClearSelected == true ? (
+          <IconDiv
+            onClick={() => {
+              clearSelected();
+            }}
+          >
+            <Icon icon='cross-icon' color={'black'} size={8} />
+          </IconDiv>
+        ) : null}
+        <IconDiv>
+          <Icon icon='triangle-down' color={'black'} size={8} />
+        </IconDiv>
+      </components.DropdownIndicator>
+    );
+  };
+
+  const Option = (p) => {
+    const checkboxStyle = {
+      width: '15px',
+      height: '15px',
+      borderRadius: '2px',
+      padding: '4px',
+      fontSize: '8px',
+      lineHeight: '10px',
     };
-
-    // 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}
-                </div>
-                {len > 1 && <div className={`text-more-alt`}>
-                    &amp; {len - 1} more
-                </div>}
-            </div>
-        )
-    }
-
-
-
-    const stylesComp = {
-
-        control: base => ({
-            ...base,
-            border: '1px solid #d4d7e3',
-            height: `${height}px`,
-            minHeight: `${height}px`,
-            minWidth: '226px',
-        }),
-        dropdownIndicator: base => ({
-            ...base,
-            height: `${height}px`,
+    const checked = (
+      <div
+        style={{
+          ...checkboxStyle,
+          backgroundColor: p?.data?.color ?? '#2E56F4',
+        }}
+      >
+        <Icon icon='check-icon' color='white' />
+      </div>
+    );
+    const unchecked = (
+      <div style={{ ...checkboxStyle, backgroundColor: '#e0e7ff' }}></div>
+    );
+    return (
+      <components.Option {...p}>
+        <div
+          style={{
             display: 'flex',
-            justifyContent: 'center',
+            justifyContent: 'start',
             alignItems: 'center',
-        }),
-        valueContainer: base => ({
-            ...base,
-            height: `${height}px`,
-            padding: '4px 8px'
-        }),
-        indicatorsContainer: base => ({
-            ...base,
-            padding: 0,
-            height: `${height}px`,
-        }),
-        menu: base => ({
-            ...base,
-            border: 'none',
-            marginTop: '1px',
-            borderTopRightRadius: '0px',
-            borderTopLeftRadius: '0px',
-            outline: 'none',
-            boxShadow: '0px 6px 20px rgba(56, 66, 100, 0.15)',
-            borderRadius: '4.32px',
-            fontSize: '14px'
-
-        }),
-        singleValue: base => ({
-            ...base,
-            fontSize: '14px',
-        }),
-        input: base => ({
-            ...base,
-            fontSize: '14px',
-        }),
-        option: (provided, state) => ({
-            ...provided,
-            backgroundColor: state.isSelected ? '#F0F3F8' : 'white',
-            padding: '10px',
-            cursor: 'pointer',
-            color: '#081348'
-        }),
-        ...props.styles,
-    }
+            width: '100%',
+          }}
+        >
+          {p.isSelected ? checked : unchecked}
+          <div className='text-main-alt' style={{ marginLeft: '10px' }}>
+            {p.label}
+          </div>
+        </div>
+      </components.Option>
+    );
+  };
+
+  const MultiValue = ({ getValue, index, ...p }) => {
+    const firstSelected = p?.data?.label || 'Select';
+    const len = getValue().length;
     return (
-        <Wrapper style={customWrapperStyles} isValid={isValid} placeholderSize={placeholderSize}
+      !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>
+      )
+    );
+  };
+
+  const stylesComp = {
+    control: (base) => ({
+      ...base,
+      border: '1px solid #d4d7e3',
+      height: `${height}px`,
+      minHeight: `${height}px`,
+      minWidth: '226px',
+    }),
+    placeholder: (base) => ({
+      ...base,
+      fontSize: placeholderSize + 'px',
+      marginLeft: '0px',
+    }),
+    dropdownIndicator: (base) => ({
+      ...base,
+      height: `${height}px`,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }),
+    valueContainer: (base) => ({
+      ...base,
+      height: `${height}px`,
+      padding: '7px 8px',
+    }),
+    indicatorsContainer: (base) => ({
+      ...base,
+      padding: 0,
+      height: `${height}px`,
+    }),
+    menu: (base) => ({
+      ...base,
+      border: 'none',
+      marginTop: '1px',
+      borderTopRightRadius: '0px',
+      borderTopLeftRadius: '0px',
+      outline: 'none',
+      boxShadow: '0px 6px 20px rgba(56, 66, 100, 0.15)',
+      borderRadius: '4.32px',
+      fontSize: '14px',
+    }),
+    singleValue: (base) => ({
+      ...base,
+      fontSize: '14px',
+      marginLeft: '0px',
+    }),
+    input: (base) => ({
+      ...base,
+      fontSize: '14px',
+    }),
+    option: (provided, state) => ({
+      ...provided,
+      backgroundColor:
+        state.isSelected || state.isFocused ? '#F0F3F8' : 'white',
+      padding: '10px',
+      cursor: 'pointer',
+      color: '#081348',
+    }),
+    ...props.styles,
+  };
+  return (
+    <Wrapper
+      style={customWrapperStyles}
+      isValid={isValid}
+      placeholderSize={placeholderSize}
+    >
+      {label && (
+        <LabelWrapper
+          theme={defaultStyles}
+          labelWrapperStyle={'selectComp-label-wrapper'}
+          style={customLabelStyles}
         >
-            {label && <LabelWrapper theme={defaultStyles}
-                labelWrapperStyle={'selectComp-label-wrapper'} style={customLabelStyles}>
-                <Label
-                    themeColor={defaultThemeColor}
-                    customStyles={labelStyle}
-                    type={'label-text'}
-                    text={label}
-                    style={{ marginBottom: '10px' }}
-                />
-                {isRequired && <div style={{
-                    marginLeft: '4px',
-                    color: `${defaultThemeColor.ui['error']}`
-                }} >*</div>}
-            </LabelWrapper>}
-            {dropdownType === 'singleSelect' ?
-                <Select
-                    components={{
-                        DropdownIndicator,
-                        // LoadingIndicator,
-                        IndicatorSeparator: () => null,
-                        ClearIndicator: () => null
-                    }}
-                    className="select-manage-page"
-                    // className="new-select"
-                    classNamePrefix="new-select"
-                    name={"select-dropdown mb-1"}
-                    options={optionArr}
-                    placeholder={placeHolder}
-                    isDisabled={isDisabled}
-                    value={{
-                        value: selectedValue ? selectedValue.value : '',
-                        label: selectedValue ? selectedValue.label : ''
-                    }}
-                    styles={stylesComp}
-                    onChange={setSelectedValue}
-                    isLoading={isLoading}
-                    {...props}
-                />
-                :
-                <Select
-                    components={{
-                        DropdownIndicator,
-                        MultiValue,
-                        Option,
-                        // LoadingIndicator: () => null,
-                        IndicatorSeparator: () => null,
-                        ClearIndicator: () => null
-                    }}
-                    className="select-manage-page"
-                    classNamePrefix="new-select"
-                    name={"select-dropdown mb-1"}
-                    onChange={setSelectedValue}
-                    placeholder={placeHolder}
-                    value={selectedValue}
-                    options={optionArr}
-                    styles={stylesComp}
-                    isMulti={true}
-                    isDisabled={isDisabled}
-                    isClearable={props.isClearable}
-                    hideSelectedOptions={false}
-                    closeMenuOnSelect={false}
-                    onMenuClose={props.onMenuClose}
-                    isSearchable={false}
-                    isLoading={isLoading}
-
-                    {...props}
-                />
-            }
-        </Wrapper>
-    )
-}
+          <Label
+            themeColor={defaultThemeColor}
+            customStyles={labelStyle}
+            type={'label-text'}
+            text={label}
+            style={{ marginBottom: '10px' }}
+          />
+          {isRequired && (
+            <div
+              style={{
+                marginLeft: '4px',
+                color: `${defaultThemeColor.ui['error']}`,
+              }}
+            >
+              *
+            </div>
+          )}
+        </LabelWrapper>
+      )}
+      {dropdownType === 'singleSelect' ? (
+        <Select
+          components={{
+            DropdownIndicator,
+            IndicatorSeparator: () => null,
+            ClearIndicator: () => null,
+          }}
+          className='select-manage-page'
+          classNamePrefix='new-select'
+          name={'select-dropdown mb-1'}
+          options={optionArr}
+          placeholder={placeHolder}
+          isDisabled={isDisabled}
+          value={{
+            value: selectedValue ? selectedValue.value : '',
+            label: selectedValue ? selectedValue.label : '',
+          }}
+          styles={stylesComp}
+          onChange={setSelectedValue}
+          isLoading={isLoading}
+          {...props}
+        />
+      ) : (
+        <Select
+          components={{
+            DropdownIndicator,
+            MultiValue,
+            Option,
+            IndicatorSeparator: () => null,
+            ClearIndicator: () => null,
+          }}
+          className='select-manage-page'
+          classNamePrefix='new-select'
+          name={'select-dropdown mb-1'}
+          onChange={setSelectedValue}
+          placeholder={placeHolder}
+          value={selectedValue}
+          options={optionArr}
+          styles={stylesComp}
+          isMulti={true}
+          isDisabled={isDisabled}
+          isClearable={props.isClearable}
+          hideSelectedOptions={false}
+          closeMenuOnSelect={false}
+          onMenuClose={props.onMenuClose}
+          isSearchable={false}
+          isLoading={isLoading}
+          {...props}
+        />
+      )}
+    </Wrapper>
+  );
+};
 
 DropdownSelect.propTypes = {
-    /**
-     *	Label of SelectBox
-     */
-    label: PropTypes.string,
-    /**
-     *	Label Style of SelectBox
-     */
-    labelStyle: PropTypes.object,
-    /**
-     *	SelectBox Options
-     */
-    optionArr: PropTypes.array,
-    /**
+  /**
+   *	Label of SelectBox
+   */
+  label: PropTypes.string,
+  /**
+   *	Label Style of SelectBox
+   */
+  labelStyle: PropTypes.object,
+  /**
+   *	SelectBox Options
+   */
+  optionArr: PropTypes.array,
+  /**
      *	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
-     */
-    setSelectedValue: PropTypes.func,
-    /**
-     *	SelectBox Placeholder
-     */
-    placeHolder: PropTypes.string,
-    /**
-    *	SelectBox Placeholder's font size
-    */
-    placeholderSize: PropTypes.number,
-    /**
-      *   This Function will be called if cross button pressed
-      */
-    clearSelected: PropTypes.func,
-}
+  selectedValue: PropTypes.object,
+  /**
+   *	Function to set selected value
+   */
+  setSelectedValue: PropTypes.func,
+  /**
+   *	SelectBox Placeholder
+   */
+  placeHolder: PropTypes.string,
+  /**
+   *	SelectBox Placeholder's font size
+   */
+  placeholderSize: PropTypes.number,
+  /**
+   *   This Function will be called if cross button pressed
+   */
+  clearSelected: PropTypes.func,
+};
 
 DropdownSelect.defaultProps = {
-    label: '',
-    labelStyle: {},
-    optionArr: [],
-    selectedValue: {},
-    setSelectedValue: undefined,
-    placeHolder: '',
-    isValid: true,
-    isClearSelected: false,
-    height: 31,
-    placeholderSize: 14
-}
-
+  label: '',
+  labelStyle: {},
+  optionArr: [],
+  selectedValue: {},
+  setSelectedValue: undefined,
+  placeHolder: 'Select an option',
+  isValid: true,
+  isClearSelected: false,
+  height: 31,
+  placeholderSize: 14,
+};