import { React, PropTypes, classnames } from '@gravityforms/libraries';
import { IdProvider, useIdContext, StoreProvider, useStoreContext } from '@gravityforms/react-utils';
import { spacerClasses } from '@gravityforms/utils';
import useDropdownControl from './hooks/control';
import useDropdownBlur from './hooks/blur';
import useDropdownKeyDown from './hooks/key-down';
import useDropdownTypeahead from './hooks/typeahead';
import DropdownLabel from './DropdownLabel';
import DropdownList from './DropdownList';
import DropdownPills from './DropdownPills';
import DropdownPopover from './DropdownPopover';
import DropdownSearch from './DropdownSearch';
import DropdownTrigger from './DropdownTrigger';
import {
getListItemsState,
filterListItems,
convertSingleToMultiItem,
convertMultiToSingleItem,
getSelectedItemFromValue,
} from './utils';
import createStore from './store';
const { forwardRef, useEffect, useRef } = React;
/**
* @module DropdownComponent
* @description The dropdown component.
*
* @since 4.5.0
*
* @param {object} props The component props.
* @param {object} ref The ref object.
*
* @return {JSX.Element} The dropdown component.
*/
const DropdownComponent = forwardRef( ( props, ref ) => {
const id = useIdContext();
const listItems = useStoreContext( ( state ) => state.listItems );
const dropdownOpen = useStoreContext( ( state ) => state.open );
const dropdownReveal = useStoreContext( ( state ) => state.reveal );
const dropdownHide = useStoreContext( ( state ) => state.hide );
const searchValue = useStoreContext( ( state ) => state.searchValue );
const selectedItem = useStoreContext( ( state ) => state.selectedItem );
const initialTriggerHeight = useStoreContext( ( state ) => state.initialTriggerHeight );
const setListItems = useStoreContext( ( state ) => state.setListItems );
const setActiveItem = useStoreContext( ( state ) => state.setActiveItem );
const setSelectedItem = useStoreContext( ( state ) => state.setSelectedItem );
const setTriggerHeight = useStoreContext( ( state ) => state.setTriggerHeight );
const setInitialTriggerHeight = useStoreContext( ( state ) => state.setInitialTriggerHeight );
const setBaseElRef = useStoreContext( ( state ) => state.setBaseElRef );
const listItemsMounted = useRef( false );
const triggerRef = useStoreContext( ( state ) => state.triggerRef );
const popoverRef = useStoreContext( ( state ) => state.popoverRef );
const listRef = useStoreContext( ( state ) => state.listRef );
const searchRef = useStoreContext( ( state ) => state.searchRef );
const baseElRef = useStoreContext( ( state ) => state.baseElRef );
const pillsRef = useStoreContext( ( state ) => state.pillsRef );
const {
ajaxSearch = false,
controlled = false,
customAttributes = {},
customClasses = [],
hasSearch = false,
listItems: listItemsProp = [],
multi = false,
popoverPosition = 'bottom',
simplebar = true,
size = 'r',
spacing = '',
width = 0,
value = '',
} = props;
/* Set active item and list items state when id, list items, or search value changes. */
useEffect( () => {
if ( ! listItemsMounted.current ) {
listItemsMounted.current = true;
return;
}
const filteredListItems = ajaxSearch ? listItemsProp : filterListItems( listItemsProp, searchValue );
const newListItems = getListItemsState(
filteredListItems,
{ hasSearch, id },
);
setActiveItem( newListItems.flatItems[ 0 ] );
setListItems( newListItems );
}, [ hasSearch, id, listItemsProp, searchValue, setActiveItem, setListItems ] );
/* Set selected item if controlled and value changes. */
useEffect( () => {
if ( controlled ) {
setSelectedItem( getSelectedItemFromValue( value, listItems.flatItems, multi ) );
}
}, [ controlled, value, listItems.ids.join(), setSelectedItem, multi ] ); // eslint-disable-line react-hooks/exhaustive-deps
/* Focus on base element when dropdown opens. */
useEffect( () => {
if ( ! dropdownOpen ) {
return;
}
baseElRef?.current?.focus();
}, [ dropdownOpen, baseElRef ] );
/* Set the base element when hasSearch changes. */
useEffect( () => {
setBaseElRef( hasSearch ? searchRef : listRef );
}, [ hasSearch, listRef, searchRef, setBaseElRef ] );
/* Convert single to multi value and multi to single value when multi changes. */
useEffect( () => {
const newSelectedItem = multi
? convertSingleToMultiItem( selectedItem )
: convertMultiToSingleItem( selectedItem, listItems.flatItems );
setSelectedItem( newSelectedItem );
}, [ multi ] ); // eslint-disable-line react-hooks/exhaustive-deps
/* Set initial trigger height. */
useEffect( () => {
if ( ! triggerRef.current ) {
return;
}
/* Use of ResizeObserver accounts for more robust handling of trigger
height, such as when used within a component which uses CSS
transitions/animations to display. */
const resizeObserver = new ResizeObserver( ( entries ) => {
if ( ! triggerRef.current ) {
return;
}
// eslint-disable-next-line no-unused-vars
for ( const entry of entries ) {
const triggerHeight = triggerRef.current.offsetHeight;
if ( triggerHeight > 0 ) {
if ( pillsRef.current && pillsRef.current.children.length > 0 ) {
setInitialTriggerHeight( ( current ) => current || triggerHeight );
} else {
setInitialTriggerHeight( triggerHeight );
}
}
}
} );
resizeObserver.observe( triggerRef.current );
return () => resizeObserver.disconnect();
}, [ triggerRef, pillsRef, setInitialTriggerHeight ] );
/* Set trigger height when selected item changes in multi. */
useEffect( () => {
if ( ! multi ) {
setTriggerHeight( 0 );
return;
}
if ( ! pillsRef.current ) {
return;
}
if ( ! initialTriggerHeight ) {
return;
}
const pillsHeight = pillsRef.current.offsetHeight;
if ( pillsHeight <= initialTriggerHeight ) {
setTriggerHeight( 0 );
return;
}
setTriggerHeight( pillsHeight );
}, [ multi, selectedItem, pillsRef, initialTriggerHeight, setTriggerHeight ] );
const dropdownProps = {
className: classnames( {
'gform-dropdown': true,
'gform-dropdown--react': true,
[ `gform-dropdown--popover-position-${ popoverPosition }` ]: true,
[ `gform-dropdown--size-${ size }` ]: size,
'gform-dropdown--open': dropdownOpen,
'gform-dropdown--reveal': dropdownReveal,
'gform-dropdown--hide': dropdownHide,
'gform-dropdown--multi': multi,
'gform-dropdown--has-simplebar': simplebar,
'gform-dropdown--has-search': hasSearch,
'gform-dropdown--ajax-search': ajaxSearch,
...spacerClasses( spacing ),
}, customClasses ),
style: {
width: width ? `${ width }px` : undefined,
},
...customAttributes,
};
return (
<div { ...dropdownProps } ref={ ref }>
<DropdownLabel { ...props } />
<div className="gform-dropdown__trigger-wrapper">
<DropdownTrigger { ...props } ref={ triggerRef } />
<DropdownPills { ...props } ref={ pillsRef } />
</div>
<DropdownPopover { ...props } ref={ popoverRef }>
<DropdownSearch { ...props } ref={ searchRef } />
<DropdownList { ...props } ref={ listRef } />
</DropdownPopover>
</div>
);
} );
const useDropdown = ( props ) => {
const hooks = [
useDropdownControl,
useDropdownBlur,
useDropdownKeyDown,
useDropdownTypeahead,
];
return hooks.reduce( ( carryProps, hook ) => hook( carryProps, useStoreContext ), props );
};
const StoreProviderWrapper = ( {
children,
controlled,
hasSearch,
initialValue,
listItems: listItemsProp,
multi,
value,
i18n = {},
} ) => {
const id = useIdContext();
const triggerRef = useRef();
const popoverRef = useRef();
const listRef = useRef();
const searchRef = useRef();
const pillsRef = useRef();
const listItems = getListItemsState( listItemsProp, { hasSearch, id } );
const firstItem = listItems.flatItems[ 0 ] || {};
let selectedItem = multi ? [] : firstItem;
if ( controlled && value ) {
selectedItem = getSelectedItemFromValue( value, listItems.flatItems, multi );
} else if ( initialValue ) {
selectedItem = getSelectedItemFromValue( initialValue, listItems.flatItems, multi );
}
const activeItem = firstItem;
const storeProviderProps = {
initialState: {
listItems,
selectedItem,
activeItem,
triggerRef,
popoverRef,
listRef,
searchRef,
baseElRef: hasSearch ? searchRef : listRef,
pillsRef,
i18n,
},
createStore,
};
return (
<StoreProvider { ...storeProviderProps }>
{ children }
</StoreProvider>
);
};
const DropdownWrapper = forwardRef( ( props, ref ) => {
const componentProps = useDropdown( props );
return <DropdownComponent { ...componentProps } ref={ ref } />;
} );
/**
* @module Dropdown
* @description Dropdown component with store and id wrapper.
*
* @since 4.5.0
*
* @param {object} props Component props.
* @param {boolean} props.ajaxSearch Whether to use ajax search for the dropdown.
* @param {boolean} props.condensePills Whether to condense pills in multi dropdown.
* @param {boolean} props.controlled Whether the dropdown is controlled or not.
* @param {object} props.customAttributes Custom attributes for the component.
* @param {string|Array|object} props.customClasses Custom classes for the component.
* @param {boolean} props.disabled Whether the dropdown is disabled or not.
* @param {boolean} props.hasSearch Whether the dropdown has search or not.
* @param {object} props.i18n i18n strings.
* @param {string} props.id The ID of the dropdown.
* @param {string|number|Array|object} props.initialValue Initial value for the dropdown.
* @param {string} props.label The label text.
* @param {object} props.labelAttributes Custom attributes for the label.
* @param {string|Array|object} props.labelClasses Custom classes for the label.
* @param {object} props.listAttributes Custom attributes for the list.
* @param {string|Array|object} props.listClasses Custom classes for the list.
* @param {Array} props.listItems The list items for the dropdown.
* @param {boolean} props.multi Whether the dropdown is a multi dropdown or not.
* @param {Function} props.onAfterClose Callback for after the dropdown closes.
* @param {Function} props.onAfterOpen Callback for after the dropdown opens.
* @param {Function} props.onChange Callback for when the dropdown changes.
* @param {Function} props.onClose Callback for when the dropdown closes.
* @param {Function} props.onOpen Callback for when the dropdown opens.
* @param {Function} props.onSearch Callback for when the search value changes.
* @param {object} props.popoverAttributes Custom attributes for the popover.
* @param {string|Array|object} props.popoverClasses Custom classes for the popover.
* @param {number} props.popoverMaxHeight The maximum height of the popover.
* @param {string} props.popoverPosition The position of the popover.
* @param {object} props.searchAttributes Custom attributes for the search.
* @param {string|Array|object} props.searchClasses Custom classes for the search.
* @param {boolean} props.searchIsLoading Whether the dropdown list items are loading from search or not.
* @param {string} props.selectedIcon The icon for the selected state in multi dropdown.
* @param {string} props.selectedIconPrefix The prefix for the icon library to be used in multi dropdown.
* @param {boolean} props.simplebar Whether to use simplebar for the dropdown.
* @param {string} props.size The size of the dropdown, one of `r`, `l`, `xl`.
* @param {string|number|Array|object} props.spacing The spacing for the component, as a string, number, array, or object.
* @param {object} props.triggerAttributes Custom attributes for the trigger.
* @param {string|Array|object} props.triggerClasses Custom classes for the trigger.
* @param {string|number|Array|object} props.value The value of the dropdown. Only works in controlled mode.
* @param {number} props.width The width of the dropdown.
* @param {Function} ref The ref to the dropdown component.
*
* @return {JSX.Element} The dropdown component.
*/
const Dropdown = forwardRef( ( props, ref ) => {
const defaultProps = {
ajaxSearch: false,
condensePills: false,
controlled: false,
customAttributes: {},
customClasses: [],
disabled: false,
hasSearch: false,
i18n: {},
id: '',
initialValue: '',
label: '',
labelAttributes: {},
labelClasses: [],
listAttributes: {},
listClasses: [],
listItems: [],
multi: false,
onAfterClose: () => {},
onAfterOpen: () => {},
onChange: () => {},
onClose: () => {},
onOpen: () => {},
onSearch: () => {},
popoverAttributes: {},
popoverClasses: [],
popoverMaxHeight: 0,
popoverPosition: 'bottom',
required: false,
requiredLabel: {
size: 'text-sm',
weight: 'medium',
},
searchAttributes: {},
searchClasses: [],
searchIsLoading: false,
selectedIcon: 'check-mark-alt',
selectedIconPrefix: 'gravity-component-icon',
simplebar: true,
size: 'r',
spacing: '',
triggerAttributes: {},
triggerClasses: [],
value: '',
width: 0,
};
const combinedProps = { ...defaultProps, ...props };
const { id: idProp } = combinedProps;
const idProviderProps = { id: idProp };
return (
<IdProvider { ...idProviderProps }>
<StoreProviderWrapper { ...combinedProps }>
<DropdownWrapper { ...combinedProps } ref={ ref } />
</StoreProviderWrapper>
</IdProvider>
);
} );
Dropdown.propTypes = {
ajaxSearch: PropTypes.bool,
condensePills: PropTypes.bool,
controlled: PropTypes.bool,
customAttributes: PropTypes.object,
customClasses: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.array,
PropTypes.object,
] ),
disabled: PropTypes.bool,
hasSearch: PropTypes.bool,
i18n: PropTypes.object,
id: PropTypes.string,
initialValue: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.number,
PropTypes.array,
PropTypes.object,
] ),
label: PropTypes.string,
labelAttributes: PropTypes.object,
labelClasses: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.array,
PropTypes.object,
] ),
listAttributes: PropTypes.object,
listClasses: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.array,
PropTypes.object,
] ),
listItems: PropTypes.array,
multi: PropTypes.bool,
onAfterClose: PropTypes.func,
onAfterOpen: PropTypes.func,
onChange: PropTypes.func,
onClose: PropTypes.func,
onOpen: PropTypes.func,
onSearch: PropTypes.func,
popoverAttributes: PropTypes.object,
popoverClasses: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.array,
PropTypes.object,
] ),
popoverMaxHeight: PropTypes.number,
popoverPosition: PropTypes.oneOf( [ 'top', 'bottom' ] ),
required: PropTypes.bool,
requiredLabel: PropTypes.object,
searchAttributes: PropTypes.object,
searchClasses: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.array,
PropTypes.object,
] ),
searchIsLoading: PropTypes.bool,
selectedIcon: PropTypes.string,
selectedIconPrefix: PropTypes.string,
simplebar: PropTypes.bool,
size: PropTypes.oneOf( [ 'r', 'l', 'xl' ] ),
spacing: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.number,
PropTypes.array,
PropTypes.object,
] ),
triggerAttributes: PropTypes.object,
triggerClasses: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.array,
PropTypes.object,
] ),
value: PropTypes.oneOfType( [
PropTypes.string,
PropTypes.number,
PropTypes.array,
PropTypes.object,
] ),
width: PropTypes.number,
};
export default Dropdown;