@gravityforms/components/react/admin/modules/List/index.js

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

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

const { forwardRef } = React;

/**
 * @module List
 * @description A list component to display a list of items.
 *
 * @since 1.1.15
 *
 * @param {object}                     props                  Component props.
 * @param {object}                     props.customAttributes Custom attributes for the component.
 * @param {string|Array|object}        props.customClasses    Custom classes for the component.
 * @param {Array}                      props.listItems        An array of list items to display.
 * @param {string|number|Array|object} props.spacing          The spacing for the component, as a string, number, array, or object.
 * @param {string}                     props.type             The list type, one of `unordered` or `ordered`.
 * @param {object|null}                ref                    Ref to the component.
 *
 * @return {JSX.Element}
 *
 * @example
 * import List from '@gravityforms/components/react/admin/modules/List';
 *
 * return (
 *      <List
 *          listItems={
 * 	            [
 * 	                'Example list item 1.',
 * 	                'Example list item 2.',
 *                  'Example list item 3.',
 * 	            ]
 * 	        }
 * 	        spacing={ { '': 6, md: 8 } }
 * 	    />
 * );
 *
 */
const List = forwardRef( ( {
	customAttributes = {},
	customClasses = [],
	listItems = [],
	spacing = '',
	type = 'unordered',
}, ref ) => {
	const isUnordered = type === 'unordered';
	const listAttributes = {
		className: classnames( {
			'gform-list': true,
			'gform-list--unordered': isUnordered,
			'gform-list--ordered': ! isUnordered,
			...spacerClasses( spacing ),
		}, customClasses ),
		...customAttributes,
	};
	const Component = isUnordered ? 'ul' : 'ol';

	return (
		<Component { ...listAttributes } ref={ ref }>
			{
				listItems.map( ( listItem, index ) => (
					<li
						className="gform-list__item"
						key={ index }
					>
						{ listItem }
					</li>
				) )
			}
		</Component>
	);
} );

List.propTypes = {
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	listItems: PropTypes.array,
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
	type: PropTypes.string,
};

List.displayName = 'List';

export default List;