groundfloor-react-ui 1.2.8 → 1.2.10

package/components/Inputs/DropdownSelect.js

@@ -1,690 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Select, { components } from 'react-select';
-import AsyncSelect from 'react-select/async';
-import styled, { useTheme } from 'styled-components';
-import defaultStyles from '../constants/defaultStyle';
-import defaultThemeColor from '../constants/defaultThemeColor';
-import getDefaultStyles from '../constants/utils';
-import { Icon } from '../Icon';
-import { Label } from '../Label';
-
-const Wrapper = styled.div`
-
-    .master-dropdown,
-    .new-select {
-        .master-dropdown__menu,
-        .new-select__menu {
-            margin: 0 0 0;
-            padding: 0;
-            border: 0;
-            box-shadow: 0px 8px 40px rgba(56, 66, 100, 0.228174);
-            border-bottom-left-radius: 4.32px;
-            border-bottom-right-radius: 4.32px;select-manage-page
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            width: 100%;
-        }
-        
-        .new-select__dropdown-indicator{
-            padding-top:0px;
-        }
-
-        .master-dropdown__single-value {
-            .input-label {
-                max-width: 250px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-
-                &:hover {
-                    max-width: 100%;
-                    overflow: visible;
-                }
-            }
-        }
-
-        .master-dropdown__menu-list,
-        .new-select__menu-list {
-            margin: 0;
-            padding: 0;
-        }
-
-        .master-dropdown__menu-list {
-            max-height: 110px;
-        }
-
-       
-
-        .master-dropdown__option,
-        .new-select__option {
-            color:  ${({ theme }) => theme.textColor}; 
-            padding-top: 3px;
-            padding-bottom: 3px;
-            margin: 8px 0;
-        }
-
-        .get-selection__option:first-child {
-            margin-top: -113px;
-        }
-
-        .master-dropdown__option--is-focused,
-        .master-dropdown__option:hover,
-        .new-select__option--is-focused,
-        .new-select__option:hover {
-            background-color: ${({ theme }) => theme.neutral['neutral-5']}; 
-            cursor: pointer;
-        }
-       
-        .new-select__control:hover,
-        .new-select__control--is-focused {
-          
-            box-shadow: none;
-        }
-      
-
-        .master-dropdown__option--is-selected,
-        .new-select__option--is-selected {
-            background: transparent;
-        }
-
-        .master-dropdown__value-container,
-        .new-select__value-container {
-            padding: 0.375rem 0.75rem 0.5rem;
-        }
-        }
-
-        .default-select {
-        .default-select__control {
-            height: 39px;
-        }
-
-        .default-select__value-container--has-value {
-            padding: 0 8px 4px 8px;
-        }
-
-        .default-select__indicator {
-            padding: 0 8px 0 8px;
-            padding-top: 0px;
-        }
-
-        .default-select__control--is-focused {
-            outline: none;
-        }
-    }
-
-       
-
-        .text-main-alt {
-            color:${({ theme }) => theme.textColor} !important;
-            margin-right: 0px;
-        }
-        .text-main-alt-value {
-          color:${({ theme }) => theme.textColor} !important;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;    
-          
-      }
-        .text-more-alt{
-            font-size:12px;
-            color: ${({ theme }) => theme.neutral['neutral-2']};
-            padding-right: 0px;
-          
-
-        }
-        .css-mohuvp-dummyInput-DummyInput{
-            height:0px;
-        }
-       
-        .css-6j8wv5-Input{
-            margin:0px;
-            padding-top:0px;
-        }
-        .new-select__menu {
-            z-Index: 2;    
-        }
-      
-        .new-select__input-container{
-            margin:0px;
-            padding:0px;
-        }
-        .new-select__input{
-            margin:0px;
-            padding:0px;
-        }
-        .new-select__control:hover,
-        .new-select__control--is-focused {
-          border: 1px solid ${({ theme }) => theme.primary['primary-1']};
-        }
-`;
-
-Wrapper.defaultProps = {
-  theme: defaultThemeColor,
-};
-
-const LabelWrapper = styled.div`
-  // Default style
-  display: flex;
-
-  //Set the styles from the default styles object
-  ${({ inBuiltCss, labelWrapperStyle }) => {
-    return getDefaultStyles(inBuiltCss, labelWrapperStyle);
-  }}
-  // custom styles
-    ${({ customLabelStyles }) => customLabelStyles}
-`;
-const IconDiv = styled.div`
-  margin-left: 6px;
-  margin-top: -14px;
-  cursor: pointer;
-`;
-
-export const DropdownSelect = ({
-  label,
-  labelStyle,
-  optionArr,
-  selectedValue,
-  setSelectedValue,
-  placeHolder,
-  isClearable,
-  isValid,
-  height,
-  fontSize,
-  loadOptions,
-  onInputChange,
-  clearSelected,
-  customWrapperStyles,
-  customLabelStyles,
-  isRequired,
-  dropdownType,
-  isDisabled,
-
-  isLoading,
-  id,
-  iconName,
-  iconColor,
-  iconSize,
-  showIndicator,
-  leftIcon,
-  leftIconColor,
-  leftIconSize,
-  ...props
-}) => {
-  const activeTheme = useTheme() || defaultThemeColor;
-
-  const DropdownIndicator = (p) => {
-    const dropdown = (
-      <components.DropdownIndicator {...p}>
-        <IconDiv>
-          <Icon icon={iconName} color={iconColor} size={iconSize} />
-        </IconDiv>
-      </components.DropdownIndicator>
-    );
-    return showIndicator === true ? dropdown : null;
-  };
-
-  const ClearIndicator = (p) => {
-    return (
-      <components.ClearIndicator {...p}>
-        {isClearable ? (
-          <IconDiv
-            onClick={() => {
-              clearSelected();
-              p.clearValue();
-            }}
-          >
-            <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 && <span className={`text-more-alt`}>&amp; {len - 1} more</span>}
-      </components.ValueContainer>
-    );
-  };
-
-
-
-  const Option = (p) => {
-    const checkboxStyle = {
-      width: '15px',
-      height: '15px',
-      borderRadius: '2px',
-      padding: '4px',
-      fontSize: '8px',
-      lineHeight: '10px',
-      minWidth: '15px',
-      minHeight: '15px',
-    };
-    const checked = (
-      <div
-        style={{
-          ...checkboxStyle,
-          backgroundColor: p?.data?.color ?? activeTheme.primary['primary-1'],
-        }}
-      >
-        <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 MultiValue = ({ index, ...p }) => {
-    const firstSelected = p?.data?.label || 'Select';
-    return !index && <span className='text-main-alt-value'>{firstSelected}</span>;
-  };
-
-  const stylesComp = {
-    control: (base, state) => ({
-      ...base,
-      border: !isValid
-        ? '1px solid ' + activeTheme.ui['error']
-        : '1px solid ' + activeTheme.border,
-      minWidth: '226px',
-      height: `${height}px`,
-      minHeight: `${height}px`,
-      boxShadow: (state.isSelected || state.isFocused) && 'none',
-    }),
-    placeholder: (base) => ({
-      ...base,
-      fontSize: fontSize + 'px',
-      marginLeft: '0px',
-    }),
-    dropdownIndicator: (base) => ({
-      ...base,
-      height: `${height}px`,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingLeft: '0px',
-    }),
-    clearIndicator: (base) => ({
-      ...base,
-      height: `${height}px`,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      paddingLeft: '0px',
-    }),
-    valueContainer: (base) => ({
-      ...base,
-      display: 'flex',
-      justifyContent: 'space-between',
-      fontSize: fontSize + 'px',
-    }),
-    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: fontSize + 'px',
-      width: '100%',
-      minWidth: '226px',
-    }),
-    singleValue: (base) => ({
-      ...base,
-      fontSize: fontSize + 'px',
-      marginLeft: '0px',
-      width: 'auto',
-    }),
-    multiValue: (base) => ({
-      ...base,
-      marginLeft: '0px',
-      width: 'auto',
-    }),
-    input: (base) => ({
-      ...base,
-      fontSize: fontSize + 'px',
-    }),
-    option: (provided, state) => ({
-      ...provided,
-      backgroundColor:
-        state.isSelected || state.isFocused
-          ? activeTheme.neutral['neutral-5']
-          : activeTheme.bgColor,
-      padding: '10px',
-      cursor: 'pointer',
-      color: '#081348',
-      width: 'inherit',
-    }),
-
-    ...props.styles,
-  };
-  return (
-    <Wrapper
-      style={customWrapperStyles}
-      isValid={isValid}
-      fontSize={fontSize}
-      theme={activeTheme}
-    >
-      {label && (
-        <LabelWrapper
-          inBuiltCss={defaultStyles}
-          labelWrapperStyle={'selectComp-label-wrapper'}
-          style={customLabelStyles}
-        >
-          <Label
-            customStyles={labelStyle}
-            type={'label-text'}
-            text={label}
-            style={{ marginBottom: '7px', paddingBottom: '0px' }}
-          />
-          {isRequired && (
-            <div
-              style={{
-                marginLeft: '4px',
-                color: `${activeTheme.ui['error']}`,
-              }}
-            >
-              *
-            </div>
-          )}
-        </LabelWrapper>
-      )}
-      {dropdownType === 'multiSelect' ? (
-        <Select
-          components={{
-            DropdownIndicator,
-            MultiValue,
-            Option,
-            ValueContainer: LeftIcon,
-            // ValueContainer,
-            IndicatorSeparator: () => null,
-            ClearIndicator,
-          }}
-          className='select-manage-page'
-          classNamePrefix='new-select'
-          name={'select-dropdown'}
-          onChange={setSelectedValue}
-          placeholder={placeHolder}
-          value={selectedValue}
-          options={optionArr}
-          styles={stylesComp}
-          isMulti={true}
-          isDisabled={isDisabled}
-          hideSelectedOptions={false}
-          closeMenuOnSelect={false}
-          isSearchable={true}
-          isLoading={isLoading}
-          id={id}
-          isClearable={isClearable}
-          {...props}
-        />
-      ) : dropdownType === 'asyncSingleSelect' ? (
-        <AsyncSelect
-          loadOptions={loadOptions}
-          defaultOptions
-          onInputChange={onInputChange}
-          styles={stylesComp}
-          components={{
-            DropdownIndicator,
-            ValueContainer: LeftIcon,
-            // ValueContainer,
-            IndicatorSeparator: () => null,
-            ClearIndicator,
-          }}
-          className='select-manage-page'
-          classNamePrefix='new-select'
-          name={'select-dropdown'}
-          placeholder={placeHolder}
-          onChange={setSelectedValue}
-          isLoading={isLoading}
-          isDisabled={isDisabled}
-          id={id}
-          isClearable={isClearable}
-          {...props}
-        />
-      ) : dropdownType === 'asyncMultiSelect' ? (
-        <AsyncSelect
-          components={{
-            DropdownIndicator,
-            MultiValue,
-            ValueContainer: LeftIcon,
-            // ValueContainer,
-            Option,
-            IndicatorSeparator: () => null,
-            ClearIndicator,
-          }}
-          className='select-manage-page'
-          classNamePrefix='new-select'
-          name={'select-dropdown'}
-          onChange={setSelectedValue}
-          placeholder={placeHolder}
-          styles={stylesComp}
-          isMulti={true}
-          isDisabled={isDisabled}
-          hideSelectedOptions={false}
-          closeMenuOnSelect={false}
-          isSearchable={true}
-          isLoading={isLoading}
-          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'}
-          options={optionArr}
-          placeholder={placeHolder}
-          isDisabled={isDisabled}
-          value={{
-            value: selectedValue ? selectedValue.value : '',
-            label: selectedValue ? selectedValue.label : '',
-          }}
-          styles={stylesComp}
-          onChange={setSelectedValue}
-          isLoading={isLoading}
-          id={id}
-          isClearable={isClearable}
-          {...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
-   */
-  fontSize: PropTypes.number,
-  /**
-   *   This Function will be called if cross button pressed
-   */
-  clearSelected: PropTypes.func,
-  /**
-   *   callback function to get value
-   */
-  loadOptions: PropTypes.func,
-  /**
-   *   onchange function
-   */
-  onInputChange: PropTypes.func,
-  /**
-   *   wrapper styles
-   */
-  customWrapperStyles: PropTypes.object,
-  /**
-   *   label styles
-   */
-  customLabelStyles: PropTypes.object,
-  /**
-   *   Mandatory or not
-   */
-  isRequired: PropTypes.bool,
-  /**
-   *   default dropdown type
-   */
-  dropdownType: PropTypes.string,
-  /**
-   *   disabled or not
-   */
-  isDisabled: PropTypes.bool,
-  /**
-   *   show loader or not
-   */
-  isLoading: PropTypes.bool,
-  /**
-   *   valid or not
-   */
-  isValid: PropTypes.bool,
-  /**
-   *	height of the component
-   */
-  height: PropTypes.number,
-  /**
-   *   clearable or not
-   */
-  isClearable: PropTypes.bool,
-  /**
-   *   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,
-  /**
-  *   to show or hide indicator
-  */
-  showIndicator: PropTypes.bool,
-};
-
-DropdownSelect.defaultProps = {
-  label: '',
-  labelStyle: {},
-  optionArr: [],
-  selectedValue: {},
-  setSelectedValue: undefined,
-  placeHolder: 'Select an option',
-  isValid: true,
-  isClearable: false,
-  height: 31,
-  fontSize: 14,
-  loadOptions: () => { },
-  onInputChange: () => { },
-  clearSelected: () => { },
-  customWrapperStyles: () => { },
-  customLabelStyles: () => { },
-  isRequired: false,
-  dropdownType: 'singleSelect',
-  isDisabled: false,
-  isLoading: false,
-  id: '',
-  iconName: 'triangle-down',
-  iconColor: 'black',
-  iconSize: 8,
-  leftIcon: '',
-  leftIconColor: 'black',
-  leftIconSize: 10,
-  showIndicator: true,
-};