@gravityforms/components/react/admin/utils/CommonActiveFilters.js

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

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

const { forwardRef } = React;

/**
 * @module CommonActiveFilters
 * @description The common active filters component.
 *
 * @since 5.8.4
 *
 * @param {object}              props                       Component props.
 * @param {object}              props.customAttributes      Custom attributes for the active filters component.
 * @param {string|Array|object} props.customClasses         Classes for the active filters component.
 * @param {Array}               props.filters               The active filters to display.
 * @param {string}              props.label                 The label for the active filters.
 * @param {object}              props.labelAttributes       Attributes for the label.
 * @param {string|Array|object} props.labelClasses          Classes for the label.
 * @param {object}              props.pillAttributes        Attributes for the filter pills.
 * @param {string|Array|object} props.pillClasses           Classes for the filter pills.
 * @param {object}              props.resetButtonAttributes Attributes for the reset button.
 * @param {string|Array|object} props.resetButtonClasses    Classes for the reset button.
 * @param {object|null}         ref                         The ref object for this component.
 *
 * @return {JSX.Element|null} The Common Active Filters component.
 */
const CommonActiveFilters = forwardRef( ( {
	customAttributes = {},
	customClasses = [],
	filters = [],
	label = '',
	labelAttributes = {},
	labelClasses = [],
	pillAttributes = {},
	pillClasses = [],
	resetButtonAttributes = {},
	resetButtonClasses = [],
}, ref ) => {
	if ( ! filters.length ) {
		return null;
	}

	const componentProps = {
		...customAttributes,
		className: classnames( 'gform-common-modules__active-filters', customClasses ),
	};

	const labelProps = {
		color: 'comet',
		size: 'text-sm',
		weight: 'medium',
		...labelAttributes,
		customClasses: classnames(
			[ 'gform-common-modules__active-filters-label' ],
			labelClasses,
		),
	};

	const pillProps = {
		icon: 'circle-close',
		iconPrefix: 'gravity-component-icon',
		...pillAttributes,
		customClasses: classnames(
			'gform-common-modules__active-filters-pill',
			pillClasses,
		),
	};

	const resetButtonProps = {
		size: 'size-height-s',
		type: 'white',
		...resetButtonAttributes,
		customClasses: classnames(
			'gform-common-modules__active-filters-reset-button',
			resetButtonClasses,
		),
	};

	return (
		<div { ...componentProps } ref={ ref }>
			<Text { ...labelProps }>
				{ label }
			</Text>
			{ filters.map( ( filter ) => (
				<Pill
					{ ...pillProps }
					key={ filter.id }
					content={ filter.label }
					onClick={ ( event ) => {
						const { onClick = () => {} } = pillProps;
						onClick( event, filter );
					} }
				/>
			) ) }
			<Button { ...resetButtonProps } />
		</div>
	);
} );

CommonActiveFilters.propTypes = {
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	filters: PropTypes.arrayOf( PropTypes.object ),
	label: PropTypes.string,
	labelAttributes: PropTypes.object,
	labelClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	pillAttributes: PropTypes.object,
	pillClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	resetButtonAttributes: PropTypes.object,
	resetButtonClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
};

CommonActiveFilters.displayName = 'CommonActiveFilters';

export default CommonActiveFilters;