@gravityforms/components/react/admin/modules/SortableList/FieldListItem.js

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

import { React, PropTypes, classnames } from '@gravityforms/libraries';
import Icon from '../../elements/Icon';
import Tag from '../../elements/Tag';
import Button from '../../elements/Button';

/**
 * @module FieldListItem
 * @description A list component to display a list of items.
 *
 * @since 1.1.15
 *
 * @param {object}                     props                    Component props.
 * @param {string|Array|object}        props.customClasses      Custom classes for the component.
 * @param {string}                     props.id                 The ID for the item.
 * @param {string}                     props.icon               The icon to show for the item.
 * @param {string}                     props.tagText            The text to display in the item tag.
 * @param {boolean}                    props.showDuplicate      Show the controls to duplicate the item.
 * @param {boolean}                    props.showSettings       Show the controls to change the item settings.
 * @param {boolean}                    props.showDelete         Show the controls to delete the item.
 * @param {function}                   props.deleteItem         The callback to delete an item from the list.
 *
 * @return {JSX.Element}
 *
 * @example
 * import FieldListItem from '@gravityforms/components/react/admin/modules/FieldListItem';
 *
 * return (
 *      <FieldListItem />
 * );
 *
 */
const FieldListItem = ( {
	customClasses = [],
	id = '',
	icon = '',
	tagText = '',
	showDuplicate = true,
	showSettings = true,
	showDelete = true,
	deleteItem = () => {},
	updateItemSettings = () => {},
	formFieldMarkup = '',
} ) => {
	const containerAttrs = {
		className: classnames( {
			'gform-sortable-list-item--field': true,
		}, customClasses ),
	};

	const infoAttrs = {
		className: 'gform-sortable-list-item--field__info',
	};

	const iconAttrs = {
		icon,
	};

	const tagAttrs = {
		type: 'unstyled',
		content: tagText,
		customClasses: [
			'gform-sortable-list-item--field__label',
		],
	};

	const controlAttrs = {
		className: 'gform-sortable-list-item--field__controls',
	};

	const duplicateAttrs = {
		type: 'icon-grey',
		icon: 'duplicate',
	};

	const settingsAttrs = {
		type: 'icon-grey',
		icon: 'settings',
		onClick: ( e ) => {
			e.preventDefault();
			e.stopPropagation();
			updateItemSettings( id );
		},
	};

	const deleteAttrs = {
		type: 'icon-grey',
		icon: 'trash',
		onClick: () => {
			deleteItem( id );
		},
	};

	return (
		<div { ...containerAttrs } >
			{ formFieldMarkup ? (
				<div dangerouslySetInnerHTML={ { __html: formFieldMarkup } } />
			) : (
				<>
					<div { ...infoAttrs } >
						{ icon && <Icon { ...iconAttrs } /> }
						{ tagText && <Tag { ...tagAttrs } /> }
					</div>
					{ ( showDuplicate || showSettings || showDelete ) && (
						<div { ...controlAttrs } >
							{ showDuplicate && <Button { ...duplicateAttrs } /> }
							{ showSettings && <Button { ...settingsAttrs } /> }
							{ showDelete && <Button { ...deleteAttrs } /> }
						</div>
					) }
				</>
			) }
		</div>
	);
};

FieldListItem.propTypes = {
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	deleteItem: PropTypes.func,
	updateItemSettings: PropTypes.func,
	id: PropTypes.string,
	icon: PropTypes.string,
	tagText: PropTypes.string,
	showDuplicate: PropTypes.bool,
	showSettings: PropTypes.bool,
	showDelete: PropTypes.bool,
	formFieldMarkup: PropTypes.string,
};

FieldListItem.displayName = 'FieldListItem';

export default FieldListItem;