@gravityforms/components/react/admin/utils/description-list-item.js

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

import { React, PropTypes } from '@gravityforms/libraries';
import Box from '../elements/Box';
import Link from '../elements/Link';
import Text from '../elements/Text';

const { memo } = React;

/**
 * @module DescriptionListItem
 * @description Renders a description list item based on passed field data from the server.
 *
 * @since 3.4.0
 *
 * @param {object} props      Component props.
 * @param {object} props.data The data for the component.
 *
 * @return {JSX.Element} The Description List Item component.
 *
 */
const DescriptionListItem = memo( ( { data = {} } ) => {
	const renderNestedFields = ( entries ) => {
		if ( ! entries ) {
			return null;
		}

		return entries.map( ( nestedData, index ) => (
			<DescriptionListItem key={ index } data={ nestedData } />
		) );
	};

	let component = null;
	switch ( data.component ) {
		case 'Box':
			component = <Box { ...data.props }>{ renderNestedFields( data.components ) }</Box>;
			break;
		case 'Link':
			component = <Link { ...data.props } />;
			break;
		case 'Text':
			component = <Text { ...data.props } />;
			break;
		default:
			component = null;
	}

	return component;
} );

DescriptionListItem.propTypes = {
	data: PropTypes.object,
};

export default DescriptionListItem;