@gravityforms/components/react/admin/utils/CommonSearch.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 Input from '../elements/Input';

const { forwardRef } = React;

/**
 * @module CommonSearch
 * @description The common search component.
 *
 * @since 5.8.4
 *
 * @param {object}              props                  Component props.
 * @param {object}              props.buttonAttributes Attributes for the search button.
 * @param {string|Array|object} props.buttonClasses    Classes for the search button.
 * @param {object}              props.customAttributes Custom attributes for the search component.
 * @param {string|Array|object} props.customClasses    Classes for the search component.
 * @param {object}              props.inputAttributes  Attributes for the search input.
 * @param {string|Array|object} props.inputClasses     Classes for the search input.
 * @param {object|null}         ref                    The ref object for this component.
 *
 * @return {JSX.Element} The Common Search component.
 */
const CommonSearch = forwardRef( ( {
	buttonAttributes = {},
	buttonClasses = [],
	customAttributes = {},
	customClasses = [],
	inputAttributes = {},
	inputClasses = [],
}, ref ) => {
	const componentProps = {
		...customAttributes,
		className: classnames( 'gform-common-modules__search', customClasses ),
	};

	const inputProps = {
		clearable: true,
		controlled: true,
		...inputAttributes,
		customClasses: classnames( 'gform-common-modules__search-input', inputClasses ),
	};

	const buttonProps = {
		size: 'size-height-m',
		type: 'white',
		...buttonAttributes,
		customClasses: classnames( 'gform-common-modules__search-button', buttonClasses ),
	};

	return (
		<div { ...componentProps } ref={ ref }>
			<Input { ...inputProps } />
			<Button { ...buttonProps } />
		</div>
	);
} );

CommonSearch.propTypes = {
	buttonAttributes: PropTypes.object,
	buttonClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	customAttributes: PropTypes.object,
	customClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
	inputAttributes: PropTypes.object,
	inputClasses: PropTypes.oneOfType( [
		PropTypes.string,
		PropTypes.array,
		PropTypes.object,
	] ),
};

CommonSearch.displayName = 'CommonSearch';

export default CommonSearch;