groundfloor-react-ui 1.0.0

package/components/Inputs/DropdownSelect.js

@@ -0,0 +1,466 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+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';
+
+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%;
+            border: 0.5px solid ${defaultThemeColor.neutral['neutral-4']};
+        }
+        
+        .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__control,
+        .new-select__control {
+            border:${({ isValid, }) => !isValid ? '0.5px solid ' + defaultThemeColor.ui['error'] :
+        '0.5px solid ' + defaultThemeColor.neutral['neutral-4']};
+        }
+
+        .master-dropdown__option,
+        .new-select__option {
+            color: ${defaultThemeColor.textColor};
+            font-size: 14px;
+            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: ${defaultThemeColor.neutral['neutral-5']};
+            cursor: pointer;
+        }
+       
+        .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']};
+            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;
+            // max-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 {
+            border-width: 1px;
+            outline: none;
+        }
+    }
+
+        .multiValue-wrapper{
+            width:100%;
+            display:flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .text-main-alt {
+            color: ${defaultThemeColor.textColor} !important;
+            font-size:14px;
+        }
+        .text-more-alt{
+            font-size:12px;
+            color:#6B747F
+
+        }
+        .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;    
+        }
+    
+`
+
+
+const LabelWrapper = styled.div`
+
+   // Default style
+   display: flex;
+
+
+  //Set the styles from the default styles object
+    ${({ theme, labelWrapperStyle }) => {
+        return getDefaultStyles(theme, labelWrapperStyle);
+    }}
+    // custom styles
+    ${({ customLabelStyles }) => customLabelStyles}
+`
+const IconDiv = styled.div`
+    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>
+        );
+    };
+
+    // 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,
+    }
+    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>
+    )
+}
+
+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
+    */
+    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
+}
+