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

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

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

const { forwardRef } = React;

/**
 * @module CommonSimpleFilters
 * @description The Common Simple Filters module.
 *
 * @since 5.8.4
 *
 * @param {object}              props                    The component props.
 * @param {number}              props.count              The count of active filters.
 * @param {object}              props.countAttributes    Attributes for the count element.
 * @param {string|Array|object} props.countClasses       Classes for the count element.
 * @param {object}              props.customAttributes   Custom attributes for the component.
 * @param {string|Array|object} props.customClasses      Classes for the component.
 * @param {object}              props.droplistAttributes Attributes for the droplist.
 * @param {string|Array|object} props.droplistClasses    Classes for the
 * @param {object|null}         ref                      Ref to the component.
 *
 * @return {JSX.Element} The Common Simple Filters component.
 */
const CommonSimpleFilters = forwardRef( ( {
	count = 0,
	countAttributes = {},
	countClasses = [],
	customAttributes = {},
	customClasses = [],
	droplistAttributes = {},
	droplistClasses = [],
}, ref ) => {
	const componentProps = {
		className: classnames( 'gform-common-modules__simple-filters', customClasses ),
		...customAttributes,
	};

	const droplistProps = {
		align: 'right',
		closeOnClick: true,
		openOnHover: true,
		customClasses: classnames( 'gform-common-modules__simple-filters-droplist', droplistClasses ),
		...droplistAttributes,
		triggerAttributes: {
			icon: 'filters',
			iconPrefix: 'gravity-component-icon',
			...( droplistAttributes.triggerAttributes || {} ),
		},
	};

	const countProps = {
		...countAttributes,
		className: classnames( [
			'gform-common-modules__simple-filters-count',
			'gform-typography--size-text-xxs',
			'gform-typography--weight-medium',
		], countClasses ),
	};

	return (
		<div { ...componentProps } ref={ ref }>
			<Droplist { ...droplistProps } />
			{ count ? (
				<span { ...countProps }>
					{ count }
				</span>
			) : null }
		</div>
	);
} );

CommonSimpleFilters.propTypes = {
	count: PropTypes.number,
	countAttributes: PropTypes.object,
	countClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	droplistAttributes: PropTypes.object,
	droplistClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
};

CommonSimpleFilters.displayName = 'CommonSimpleFilters';

export default CommonSimpleFilters;