@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
69 lines (65 loc) • 1.91 kB
JavaScript
import { React, classnames } from '@gravityforms/libraries';
import DroplistGroupItem from './DroplistGroupItem';
import DroplistItem from './DroplistItem';
/**
* @function getListItems
* @description Helper function to get droplist items.
*
* @since 4.3.0
*
* @param {Array} items List of items to render.
* @param {object} propsWithState Props and state to pass to the list items.
* @param {number} depth Depth of the item.
*
* @return {Array} The list of items.
*/
export const getListItems = ( items = [], propsWithState = {}, depth = 0 ) => {
return items.map( ( item, index ) => {
if ( item.listItems ) {
const key = item.key || buildItemKey( propsWithState.droplistId, depth, index, 'group' );
const props = {
depth,
index,
item,
propsWithState: {
...propsWithState,
itemKey: key,
},
};
return <DroplistGroupItem key={ key } { ...props } />;
}
const itemClassName = classnames( {
'gform-droplist__item': true,
'gform-droplist__item--has-divider': item.hasDivider,
}, item.customClasses || [] );
const key = item.key || buildItemKey( propsWithState.droplistId, depth, index, 'item' );
const droplistItemProps = {
...( item.props || {} ),
depth,
index,
propsWithState: {
...propsWithState,
itemKey: key,
},
};
return (
<li key={ key } className={ itemClassName }>
<DroplistItem { ...droplistItemProps } />
</li>
);
} );
};
/**
* @function buildItemKey
* @description Helper function to build an item key.
*
* @since 6.0.1
*
* @param {string} prefix The prefix for the key.
* @param {string} depth The depth of the item.
* @param {string} index The index of the item.
* @param {string} type The type of the item.
*
* @return {string} The item key.
*/
export const buildItemKey = ( prefix, depth, index, type ) => `${ prefix }-${ depth }-${ index }-${ type }`;