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

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

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

const { forwardRef } = React;

/**
 * @module KanbanControls
 *
 * @description A component used to display controls for the kanban, such as search and filters.
 *
 * @since 5.8.4
 *
 * @param {object}           props              The component props.
 * @param {JSX.Element|null} props.controlsLeft The content to display on the left side of the controls.
 * @param {Array}            props.modules      The modules for the kanban.
 * @param {object|null}      ref                The ref object for this component.
 *
 * @return {JSX.Element} The Kanban Controls component.
 */
const KanbanControls = forwardRef( ( props, ref ) => {
	const {
		controlsLeft = null,
		modules = [],
	} = props;

	const {
		Search,
		SimpleFilters,
	} = getModules( modules, [ 'Search', 'SimpleFilters' ] );

	if ( ! SimpleFilters && ! Search && ! controlsLeft ) {
		return null;
	}

	const componentProps = {
		className: classnames( {
			'gform-kanban__controls': true,
			'gform-kanban__controls--has-search': Search,
			'gform-kanban__controls--has-simple-filters': SimpleFilters,
		} ),
	};

	return (
		<div { ...componentProps } ref={ ref }>
			{ controlsLeft && (
				<div className="gform-kanban__controls-inner gform-kanban__controls-inner--left">
					{ controlsLeft }
				</div>
			) }
			{ ( Search || SimpleFilters ) && (
				<div className="gform-kanban__controls-inner gform-kanban__controls-inner--right">
					{ Search && <Search.Search { ...props } /> }
					{ SimpleFilters && <SimpleFilters.SimpleFilters { ...props } /> }
				</div>
			) }
		</div>
	);
} );

KanbanControls.propTypes = {
	modules: PropTypes.array,
};

KanbanControls.displayName = 'KanbanControls';

export default KanbanControls;