groundfloor-react-ui 1.0.0 → 1.0.3

package/components/Inputs/DropdownSelect.js

@@ -57,7 +57,7 @@ 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']};
+    '0.5px solid ' + defaultThemeColor.neutral['neutral-4']};
         }
 
         .master-dropdown__option,
@@ -102,7 +102,6 @@ const Wrapper = styled.div`
         .default-select {
         .default-select__control {
             height: 39px;
-            // max-height: 39px;
         }
 
         .default-select__value-container--has-value {
@@ -139,26 +138,23 @@ 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;    
         }
-    
+      
+        .new-select__input-container{
+            margin:0px;
+            padding:0px;
+        }
+        .new-select__input{
+            margin:0px;
+            padding:0px;
+        }
 `
 
 
@@ -170,8 +166,8 @@ const LabelWrapper = styled.div`
 
   //Set the styles from the default styles object
     ${({ theme, labelWrapperStyle }) => {
-        return getDefaultStyles(theme, labelWrapperStyle);
-    }}
+    return getDefaultStyles(theme, labelWrapperStyle);
+  }}
     // custom styles
     ${({ customLabelStyles }) => customLabelStyles}
 `
@@ -181,286 +177,293 @@ const IconDiv = styled.div`
     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>
-        );
+  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: '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`,
-            display: 'flex',
-            justifyContent: 'center',
-            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,
-    }
+    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 (
-        <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: '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>
+      <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>
+    );
+  };
+
+  // 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',
+    }),
+    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
+          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' ?
+
+        <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}
+        /> :
+        <Select
+          components={{
+            DropdownIndicator,
+            // LoadingIndicator,
+            IndicatorSeparator: () => null,
+            ClearIndicator: () => null
+          }}
+          className="select-manage-page"
+          // className="new-select"
+          classNamePrefix="new-select"
+          name={"select-dropdown"}
+          options={optionArr}
+          placeholder={placeHolder}
+          isDisabled={isDisabled}
+          value={{
+            value: selectedValue ? selectedValue.value : '',
+            label: selectedValue ? selectedValue.label : ''
+          }}
+          styles={stylesComp}
+          onChange={setSelectedValue}
+          isLoading={isLoading}
+          {...props}
+        />
+
+
+      }
+    </Wrapper>
+  )
 }
 
 DropdownSelect.propTypes = {
-    /**
-     *	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
+  /**
+   *	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
     */
-    placeholderSize: PropTypes.number,
-    /**
-      *   This Function will be called if cross button pressed
-      */
-    clearSelected: PropTypes.func,
+  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
+}