groundfloor-react-ui 1.2.0 → 1.2.1

package/components/Inputs/DropdownSelect.js

@@ -173,6 +173,7 @@ const IconDiv = styled.div`
 `;
 
 export const DropdownSelect = ({
+
   label,
   labelStyle,
   optionArr,
@@ -194,19 +195,31 @@ export const DropdownSelect = ({
 
   isLoading,
   id,
+  iconName,
+  iconColor,
+  iconSize,
+  showIndicator,
+  leftIcon,
+  leftIconColor,
+  leftIconSize,
   ...props
 }) => {
 
   const activeTheme = useTheme() || defaultThemeColor
 
   const DropdownIndicator = (p) => {
-    return (
-      <components.DropdownIndicator  {...p}>
-        <IconDiv>
-          <Icon icon='triangle-down' color={'black'} size={8} />
-        </IconDiv>
-      </components.DropdownIndicator>
-    );
+
+    const drpdwn = <components.DropdownIndicator {...p}>
+
+
+      <IconDiv>
+        <Icon icon={iconName} color={iconColor} size={iconSize} />
+        {/* <Icon icon='triangle-down' color={'black'} size={8} /> */}
+      </IconDiv>
+
+    </components.DropdownIndicator>
+    return showIndicator === true ? drpdwn : null;
+
   };
 
   const ClearIndicator = (p) => {
@@ -225,6 +238,20 @@ export const DropdownSelect = ({
 
       </components.ClearIndicator>
     );
+
+  };
+
+  const LeftIcon = (props) => {
+    return (
+      <components.ValueContainer {...props}>
+        {leftIcon === '' ? null : <IconDiv style={{ paddingTop: '10px', paddingRight: '8px', marginLeft: '0', marginTop: '-16px' }}>
+          <Icon icon={leftIcon} color={leftIconColor} size={leftIconSize} />
+        </IconDiv>
+        }
+
+        {props.children}
+      </components.ValueContainer>
+    );
   };
 
   const Option = (p) => {
@@ -235,6 +262,8 @@ export const DropdownSelect = ({
       padding: '4px',
       fontSize: '8px',
       lineHeight: '10px',
+      minWidth: '15px',
+      minHeight: '15px'
     };
     const checked = (
       <div
@@ -289,8 +318,7 @@ export const DropdownSelect = ({
       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',
@@ -319,6 +347,7 @@ export const DropdownSelect = ({
     }),
     valueContainer: (base) => ({
       ...base,
+      display: 'flex',
       fontSize: fontSize + 'px',
     }),
     indicatorsContainer: (base) => ({
@@ -336,7 +365,9 @@ 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,
@@ -362,9 +393,11 @@ export const DropdownSelect = ({
       padding: '10px',
       cursor: 'pointer',
       color: '#081348',
-      width: '100%'
+      width: 'inherit',
 
     }),
+
+
     ...props.styles,
   };
   return (
@@ -399,6 +432,7 @@ export const DropdownSelect = ({
             DropdownIndicator,
             MultiValue,
             Option,
+            // ValueContainer: LeftIcon,
             ValueContainer,
             IndicatorSeparator: () => null,
             ClearIndicator,
@@ -406,7 +440,6 @@ export const DropdownSelect = ({
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
-          id={id}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           value={selectedValue}
@@ -418,8 +451,12 @@ export const DropdownSelect = ({
           closeMenuOnSelect={false}
           isSearchable={true}
           isLoading={isLoading}
+
+          id={id}
+
           isClearable={isClearable}
 
+
           {...props}
         />
       ) : dropdownType === 'asyncSingleSelect' ? (
@@ -430,19 +467,24 @@ 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,6 +492,7 @@ export const DropdownSelect = ({
           components={{
             DropdownIndicator,
             MultiValue,
+            // ValueContainer: LeftIcon,
             ValueContainer,
             Option,
             IndicatorSeparator: () => null,
@@ -458,7 +501,6 @@ export const DropdownSelect = ({
           className='select-manage-page'
           classNamePrefix='new-select'
           name={'select-dropdown'}
-          id={id}
           onChange={setSelectedValue}
           placeholder={placeHolder}
           styles={stylesComp}
@@ -471,21 +513,26 @@ 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 +543,12 @@ export const DropdownSelect = ({
           styles={stylesComp}
           onChange={setSelectedValue}
           isLoading={isLoading}
+
+          id={id}
+
           isClearable={isClearable}
 
+
           {...props}
         />
       )}
@@ -590,6 +641,31 @@ DropdownSelect.propTypes = {
 *   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
 
 };
 
@@ -613,5 +689,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
 };