@gravityforms/components/react/admin/modules/Droplist/DroplistList.js

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

import { React, classnames, PropTypes } from '@gravityforms/libraries';
import { getListItems } from './utils';

/**
 * @module DroplistList
 * @description The DroplistList component.
 *
 * @since 6.0.1
 *
 * @param {object}   props                   Props for the DroplistList component.
 * @param {string}   props.align             The alignment of the droplist, either 'left' or 'right'.
 * @param {Function} props.closeDroplist     Function to close the droplist.
 * @param {boolean}  props.closeOnClick      Whether to close the droplist on item click.
 * @param {number}   props.depth             The depth of the droplist.
 * @param {string}   props.droplistId        The id of the droplist.
 * @param {string}   props.itemKey           The item key prefix.
 * @param {Array}    props.listItems         The list items to render.
 * @param {boolean}  props.openOnHover       Whether to open sublists on hover.
 * @param {object}   props.selectedState     The selected state object.
 * @param {Function} props.setSelectedState  Function to set the selected state.
 * @param {boolean}  props.stackNestedGroups Whether to stack nested groups.
 *
 * @return {JSX.Element} The DroplistList component.
 */
const DroplistList = ( {
	align = 'left',
	closeDroplist = () => {},
	closeOnClick = false,
	depth = 0,
	droplistId = '',
	itemKey = '',
	listItems = [],
	openOnHover = false,
	selectedState = {},
	setSelectedState = () => {},
	stackNestedGroups = false,
} ) => {
	return (
		<div className="gform-droplist__list-container">
			<ul className={ classnames( {
				'gform-droplist__list': true,
				'gform-droplist__list--grouped': depth > 0,
			} ) }>
				{ getListItems(
					listItems,
					{
						align,
						closeDroplist,
						closeOnClick,
						droplistId,
						itemKey,
						openOnHover,
						selectedState,
						setSelectedState,
						stackNestedGroups,
					},
					depth,
				) }
			</ul>
		</div>
	);
};

DroplistList.propTypes = {
	align: PropTypes.oneOf( [ 'left', 'right' ] ),
	closeDroplist: PropTypes.func,
	closeOnClick: PropTypes.bool,
	depth: PropTypes.number,
	droplistId: PropTypes.string,
	itemKey: PropTypes.string,
	openOnHover: PropTypes.bool,
	selectedState: PropTypes.object,
	setSelectedState: PropTypes.func,
	listItems: PropTypes.arrayOf( PropTypes.object ),
};

DroplistList.displayName = 'DroplistList';

export default DroplistList;