@gravityforms/components/react/admin/elements/StatusIndicator/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 StatusIndicator
 * @description Renders a simple icon component.
 *
 * @since 3.3.0
 *
 * @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 {boolean}                    props.hasDot           Whether the component has a dot.
 * @param {boolean}                    props.isStatic         Whether the component is static.
 * @param {string}                     props.label            The label for the component.
 * @param {boolean}                    props.pill             Whether the component is a pill.
 * @param {string}                     props.size             The size for the component, one of `sm`, `md`, or `lg`.
 * @param {string|number|Array|object} props.spacing          The spacing for the component, as a string, number, array, or object.
 * @param {string}                     props.status           The status for the component.
 * @param {string}                     props.theme            The theme for the component.
 * @param {object|null}                ref                    Ref to the component.
 *
 * @return {JSX.Element} The StatusIndicator component.
 *
 * @example
 * import Icon from '@gravityforms/components/react/admin/elements/StatusIndicator';
 *
 * return <StatusIndicator />;
 *
 */
const StatusIndicator = forwardRef( ( {
	customAttributes = {},
	customClasses = [],
	hasDot = true,
	isStatic = true,
	label = '',
	pill = true,
	size = 'sm',
	spacing = '',
	status = 'active',
	theme = 'cosmos',
}, ref ) => {
	const componentProps = {
		className: classnames( {
			'gform-status-indicator': true,
			'gform-status--no-hover': isStatic,
			'gform-status--no-pill': ! pill,
			'gform-status--no-icon': ! hasDot,
			[ `gform-status-indicator--theme-${ theme }` ]: true,
			[ `gform-status--${ status }` ]: true,
			[ `gform-status-indicator--size-${ size }` ]: true,
			...spacerClasses( spacing ),
		}, customClasses ),
		ref,
		...customAttributes,
	};

	const textSizeTypographyClassMap = {
		sm: 'gform-typography--size-text-xs',
		md: 'gform-typography--size-text-sm',
		lg: 'gform-typography--size-text-sm',
	};

	const textProps = {
		className: classnames( [
			'gform-status-indicator-status',
			'gform-typography--weight-medium',
			textSizeTypographyClassMap[ size ],
		] ),
	};

	return (
		<span { ...componentProps }>
			<span { ...textProps }>{ label }</span>
		</span>
	);
} );

StatusIndicator.propTypes = {
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	hasDot: PropTypes.bool,
	isStatic: PropTypes.bool,
	label: PropTypes.string,
	pill: PropTypes.bool,
	size: PropTypes.oneOf( [ 'sm', 'md', 'lg' ] ),
	spacing: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.number,
		PropTypes.array,
		PropTypes.object,
	] ),
	status: PropTypes.string,
	theme: PropTypes.string,
};

StatusIndicator.displayName = 'StatusIndicator';

export default StatusIndicator;