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

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

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

/**
 * @module KanbanLoader
 * @description A component used to display a loader for a Kanban card.
 *
 * @since 5.8.5
 *
 * @param {object}              props                  The component props.
 * @param {boolean}             props.animating        Whether the loader is animating or not.
 * @param {object}              props.customAttributes The attributes for the loader element.
 * @param {string|Array|object} props.customClasses    The CSS classes for the loader element.
 * @param {boolean}             props.variableWidth    Whether the loader should have a variable width or not.
 *
 * @return {JSX.Element} The Kanban loader component.
 */
const KanbanLoader = ( {
	animating = true,
	customAttributes = {},
	customClasses = [],
	variableWidth = true,
} ) => {
	const width = variableWidth ? `${ Math.floor( 50 + ( Math.random() * 50 ) ) }%` : '100%';
	const componentProps = {
		className: classnames( {
			'gform-kanban__loader': true,
			'gform-kanban__loader--animating': animating,
		}, customClasses ),
		style: { width },
		...customAttributes,
	};

	return (
		<div { ...componentProps } />
	);
};

KanbanLoader.propTypes = {
	animating: PropTypes.bool,
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	width: PropTypes.string,
};

KanbanLoader.displayName = 'KanbanLoader';

export default KanbanLoader;