groundfloor-react-ui 1.2.0 → 1.2.2

package/components/Inputs/DropdownSelect.js

@@ -194,19 +194,26 @@ export const DropdownSelect = ({
 
   isLoading,
   id,
+  iconName,
+  iconColor,
+  iconSize,
+  showIndicator,
+  leftIcon,
+  leftIconColor,
+  leftIconSize,
   ...props
 }) => {
-
-  const activeTheme = useTheme() || defaultThemeColor
+  const activeTheme = useTheme() || defaultThemeColor;
 
   const DropdownIndicator = (p) => {
-    return (
-      <components.DropdownIndicator  {...p}>
+    const dropdown = (
+      <components.DropdownIndicator {...p}>
         <IconDiv>
-          <Icon icon='triangle-down' color={'black'} size={8} />
+          <Icon icon={iconName} color={iconColor} size={iconSize} />
         </IconDiv>
       </components.DropdownIndicator>
     );
+    return showIndicator === true ? dropdown : null;
   };
 
   const ClearIndicator = (p) => {
@@ -222,11 +229,44 @@ export const DropdownSelect = ({
             <Icon icon='cross-icon' color={'black'} size={8} />
           </IconDiv>
         ) : null}
-
       </components.ClearIndicator>
     );
   };
 
+  const LeftIcon = ({ getValue, children, ...props }) => {
+    const len = getValue().length;
+
+    return (
+      <components.ValueContainer {...props}>
+        {leftIcon === '' ? null : (
+          <IconDiv
+            style={{
+              paddingTop: '10px',
+              paddingRight: '8px',
+              marginLeft: '0',
+              marginTop: '-16px',
+            }}
+          >
+            <Icon icon={leftIcon} color={leftIconColor} size={leftIconSize} />
+          </IconDiv>
+        )}
+
+        {children}
+        {len > 1 && <div className={`text-more-alt`}>&amp; {len - 1} more</div>}
+      </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 = {
       width: '15px',
@@ -235,6 +275,8 @@ export const DropdownSelect = ({
       padding: '4px',
       fontSize: '8px',
       lineHeight: '10px',
+      minWidth: '15px',
+      minHeight: '15px',
     };
     const checked = (
       <div
@@ -273,24 +315,13 @@ export const DropdownSelect = ({
     return !index && <div className='text-main-alt'>{firstSelected}</div>;
   };
 
-  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 stylesComp = {
     control: (base, state) => ({
       ...base,
       border: !isValid
         ? '1px solid ' + activeTheme.ui['error']
         : '1px solid ' + activeTheme.border,
-      // border: state.isFocused ? '4px solid red' : '4px solid green',
-
+      minWidth: '215px',
       height: `${height}px`,
       minHeight: `${height}px`,
       boxShadow: (state.isSelected || state.isFocused) && 'none',
@@ -315,10 +346,10 @@ export const DropdownSelect = ({
       justifyContent: 'center',
       alignItems: 'center',
       paddingLeft: '0px',
-
     }),
     valueContainer: (base) => ({
       ...base,
+      display: 'flex',
       fontSize: fontSize + 'px',
     }),
     indicatorsContainer: (base) => ({
@@ -336,20 +367,18 @@ export const DropdownSelect = ({
       boxShadow: '0px 6px 20px rgba(56, 66, 100, 0.15)',
       borderRadius: '4.32px',
       fontSize: fontSize + 'px',
-      width: '100%'
+      width: '100%',
     }),
     singleValue: (base) => ({
       ...base,
       fontSize: fontSize + 'px',
       marginLeft: '0px',
-      width: 'auto'
-
+      width: 'auto',
     }),
     multiValue: (base) => ({
       ...base,
       marginLeft: '0px',
-      width: 'auto'
-
+      width: 'auto',
     }),
     input: (base) => ({
       ...base,
@@ -358,17 +387,24 @@ export const DropdownSelect = ({
     option: (provided, state) => ({
       ...provided,
       backgroundColor:
-        state.isSelected || state.isFocused ? activeTheme.neutral['neutral-5'] : activeTheme.bgColor,
+        state.isSelected || state.isFocused
+          ? activeTheme.neutral['neutral-5']
+          : activeTheme.bgColor,
       padding: '10px',
       cursor: 'pointer',
       color: '#081348',
-      width: '100%'
-
+      width: 'inherit',
     }),
+
     ...props.styles,
   };
   return (
-    <Wrapper style={customWrapperStyles} isValid={isValid} fontSize={fontSize} theme={activeTheme}>
+    <Wrapper
+      style={customWrapperStyles}
+      isValid={isValid}
+      fontSize={fontSize}
+      theme={activeTheme}
+    >
       {label && (
         <LabelWrapper
           inBuiltCss={defaultStyles}
@@ -399,14 +435,14 @@ export const DropdownSelect = ({
             DropdownIndicator,
             MultiValue,
             Option,
-            ValueContainer,
+            ValueContainer: LeftIcon,
+            // ValueContainer,
             IndicatorSeparator: () => null,
             ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
-          id={id}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           value={selectedValue}
@@ -418,8 +454,8 @@ export const DropdownSelect = ({
           closeMenuOnSelect={false}
           isSearchable={true}
           isLoading={isLoading}
+          id={id}
           isClearable={isClearable}
-
           {...props}
         />
       ) : dropdownType === 'asyncSingleSelect' ? (
@@ -430,19 +466,20 @@ export const DropdownSelect = ({
           styles={stylesComp}
           components={{
             DropdownIndicator,
+            ValueContainer: LeftIcon,
+            // ValueContainer,
             IndicatorSeparator: () => null,
             ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
-          id={id}
           placeholder={placeHolder}
           onChange={setSelectedValue}
           isLoading={isLoading}
           isDisabled={isDisabled}
+          id={id}
           isClearable={isClearable}
-
           {...props}
         />
       ) : dropdownType === 'asyncMultiSelect' ? (
@@ -450,7 +487,8 @@ export const DropdownSelect = ({
           components={{
             DropdownIndicator,
             MultiValue,
-            ValueContainer,
+            ValueContainer: LeftIcon,
+            // ValueContainer,
             Option,
             IndicatorSeparator: () => null,
             ClearIndicator,
@@ -458,7 +496,6 @@ export const DropdownSelect = ({
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
-          id={id}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           styles={stylesComp}
@@ -471,21 +508,22 @@ export const DropdownSelect = ({
           loadOptions={loadOptions}
           defaultOptions
           onInputChange={onInputChange}
+          id={id}
           isClearable={isClearable}
-
           {...props}
         />
       ) : (
         <Select
           components={{
             DropdownIndicator,
+            ValueContainer: LeftIcon,
+            // ValueContainer,
             IndicatorSeparator: () => null,
             ClearIndicator,
           }}
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
-          id={id}
           options={optionArr}
           placeholder={placeHolder}
           isDisabled={isDisabled}
@@ -496,8 +534,8 @@ export const DropdownSelect = ({
           styles={stylesComp}
           onChange={setSelectedValue}
           isLoading={isLoading}
+          id={id}
           isClearable={isClearable}
-
           {...props}
         />
       )}
@@ -555,42 +593,66 @@ DropdownSelect.propTypes = {
    */
   customWrapperStyles: PropTypes.object,
   /**
- *   label styles
- */
+   *   label styles
+   */
   customLabelStyles: PropTypes.object,
   /**
-*   Mandatory or not
-*/
+   *   Mandatory or not
+   */
   isRequired: PropTypes.bool,
   /**
-*   default dropdown type
-*/
+   *   default dropdown type
+   */
   dropdownType: PropTypes.string,
   /**
-*   disabled or not
-*/
+   *   disabled or not
+   */
   isDisabled: PropTypes.bool,
   /**
-*   show loader or not
-*/
+   *   show loader or not
+   */
   isLoading: PropTypes.bool,
   /**
-*   valid or not
-*/
+   *   valid or not
+   */
   isValid: PropTypes.bool,
   /**
- *	height of the component
- */
+   *	height of the component
+   */
   height: PropTypes.number,
   /**
-*   clearable or not
-*/
+   *   clearable or not
+   */
   isClearable: PropTypes.bool,
   /**
-*   id of the select
-*/
+   *   id of the select
+   */
   id: PropTypes.string,
-
+  /**
+   *   iconName of the select
+   */
+  iconName: PropTypes.string,
+  /**
+   *   iconColor of the select
+   */
+  iconColor: PropTypes.string,
+  /**
+   *   iconSize of the select
+   */
+  iconSize: PropTypes.number,
+  /**
+   *   leftIcon of the select
+   */
+  leftIcon: PropTypes.string,
+  /**
+   *   iconColor of the select
+   */
+  leftIconColor: PropTypes.string,
+  /**
+   *   iconSize of the select
+   */
+  leftIconSize: PropTypes.number,
+  showIndicator: PropTypes.bool,
 };
 
 DropdownSelect.defaultProps = {
@@ -613,5 +675,12 @@ DropdownSelect.defaultProps = {
   dropdownType: 'singleSelect',
   isDisabled: false,
   isLoading: false,
-  id: ''
+  id: '',
+  iconName: 'triangle-down',
+  iconColor: 'black',
+  iconSize: 8,
+  leftIcon: 'magnifier-icon',
+  leftIconColor: 'black',
+  leftIconSize: 10,
+  showIndicator: true,
 };