@gravityforms/components/react/admin/modules/Kanban/KanbanEmpty.js

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

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

/**
 * @function hasNoCards
 * @description Check if all columns in the Kanban board are empty (i.e., have no cards).
 *
 * @since 5.8.5
 *
 * @param {Array} data - The Kanban board data.
 *
 * @return {boolean} - True if all columns are empty, false otherwise.
 */
const hasNoCards = ( data ) => {
	return data.every( ( column ) => column.cards.length === 0 );
};

/**
 * @module KanbanEmpty
 * @description The empty state for the Kanban component.
 *
 * @since 5.8.5
 *
 * @param {object}              props                 Component props.
 * @param {Array}               props.data            The data for the Kanban board.
 * @param {object}              props.emptyAttributes Custom attributes for the empty state container.
 * @param {string|Array|object} props.emptyClasses    Custom classes for the empty state container.
 * @param {JSX.Element}         props.EmptyImage      The image to display when the Kanban board is empty.
 * @param {object}              props.i18n            The i18n object containing strings for titles and messages.
 *
 * @return {JSX.Element|null} The rendered empty state or null if not applicable.
 */
const KanbanEmpty = ( {
	data = [],
	emptyAttributes = {},
	emptyClasses = [],
	EmptyImage = null,
	i18n = {},
} ) => {
	const {
		emptyColumnsMessage = '',
		emptyColumnsTitle = '',
		emptyCardsMessage = '',
		emptyCardsTitle = '',
	} = i18n;

	if ( data.length > 0 && ! hasNoCards( data ) ) {
		return null;
	}

	const emptyProps = {
		className: classnames( {
			'gform-kanban__empty': true,
		}, emptyClasses ),
		...emptyAttributes,
	};

	const emptyTitle = data.length === 0 ? emptyColumnsTitle : emptyCardsTitle;
	const emptyMessage = data.length === 0 ? emptyColumnsMessage : emptyCardsMessage;

	return (
		<div { ...emptyProps }>
			{ EmptyImage && <EmptyImage /> }
			{ emptyTitle && <Text size="text-md" weight="medium" spacing={ [ 5, 0, 0, 0 ] }>{ emptyTitle }</Text> }
			{ emptyMessage && <Text size="text-sm" spacing={ [ 3, 0, 0, 0 ] }>{ emptyMessage }</Text> }
		</div>
	);
};

KanbanEmpty.propTypes = {
	data: PropTypes.array,
	emptyAttributes: PropTypes.object,
	emptyClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	EmptyImage: PropTypes.oneOfType( [
		PropTypes.node,
		PropTypes.func,
		PropTypes.object,
	] ),
	i18n: PropTypes.object,
};

export default KanbanEmpty;