react-combo-search

React component encapsulating the logic for filtering with select dropdown and text / dates. Comes with react-combo-select and react-datetime out of the box, but can take render props for select and date picker so you are not forced to use these two packages.

Usability

Peer dependencies: React and react-dom. Optional dependencies: react-combo-select, react-datetime *font-awesome(peer of react-combo-select) and moment(peer of react-datetime)

import { ComboSearch } from 'react-combo-search';

and include css file (you may include this in different way) *if you use react-combo-select and react-datetime you are gonna need their css also

require('../node_modules/react-combo-search/css/style.css');

Demo

We prepared code sandbox demo. Unfortunately, we haven't found the time to add some generic data for you to filter, but you can freely play around with component ot get the feel of what it does. See demo here

props/options

onSearch and selectData

There are two mandatory props: first one is "onSearch" which gets fired on submit. Second one is "selectData", which is a required prop in react-combo-select and populates select with options

import React, {Component} from 'react';
import ComboSearch from 'react-combo-search';
// You should not forget to include css

export default class FakeComponent extends Component {

	constructor(props) {
		super(props);

		this.searchCallback = this.searchCallback.bind(this);
	}

	searchCallback(data) {
		console.log(data);
		// you may do something with form data here
		// like call API by async action creator, do client side filtering
		// and transform the data first if you need it in slightly different format
	}

	render() {
		return (
			<div>
				<ComboSearch
					onSearch={this.searchCallback}
					selectData={['Name', 'Surname', 'Title', 'Date of birth']}
					datePickerCriteria='Date of birth'
				/>
			</div>
		);
	}
}

classNames

If you decide on using existing components, you may want to style them differently. You can also pass any prop to style these two in additionalSelectProps and additionalDatePickerProps, see next table.

Property	Default	Description
classNames	---	Object containing classnames listed below
classNames.wrapper	ComboSearch	Component root element
classNames.datePickerRadioWrapper	ComboSearch__datePicker	Element wrapping radio buttons and date picker input
classNames.radioGroupWrapper	ComboSearch__RadioWrapper	Element wrapping radio buttons component
classNames.datePickerWrapper	ComboSearch__datePickerWrapper	Element wrapping date picker component
classNames.textInput	ComboSearch__input InputBox	Text input field
classNames.button	Button Button--action	Apply button, should you choose to use it
radioGroupClassNames	---	Object containing classnames for RadioGroup component listed below
radioGroupClassNames.wrapper	RadioGroup	Component root element
radioGroupClassNames.label	RadioGroup__label	Class name for label
radioGroupClassNames.fakeRadio	RadioGroup__fakeRadio	Outer span that can act as a fake radio button
radioGroupClassNames.fakeRadioInner	RadioGroup__fakeRadioInner	Inner span that can act as a part of a fake radio button
filterBarClassNames	---	Object containing classnames for FilterBar component listed below
filterBarClassNames.wrapper	FilterBar	Component root element
filterBarClassNames.filter	FilterBar__filter	Class name for individual filter, black card wih filter info
filterBarClassNames.removeButton	FilterBar__filterClose	Span tag that destroys filter on click
filterBarClassNames.text	FilterBar__filterText	Paragraph tag containing text inside the filter card

All props

Property	Type	Default	Description
onSearch	function	none	Callback to invoke on filter apply, gets passed form data as only argument
selectData	array of objects	none	Data for react-combo-select to populate select with options, with value and text props
datePickerCriteria	string or array	none	One or more of the options from selectData prop on which we want to open a date picker, either a string or an array of strings (value prop)
selectRenderFn	function	none	Function that returns jsx for your custom select component. Since select is a controlled component this function will get called like selectRenderFn(selectData, selectedText, selectedValue, changeCallback, ...yourArguments), where returning component sets its options to selectData, text to selectedText(optional), value to selectedValue and onChange to changeCallback.
selectRenderFnArgs	array	none	Array of arguments that will get passed to selectRenderFn that you passed. Eg [1, 2, 3] will get spread as arguments
datePickerRenderFn	function	none	Similar to selectRenderFn, will get called as datePickerRenderFn(changeCallback, ..yourArgs)
datePickerRenderFnArgs	array	none	I'll make sure they find their way to datePickerRenderFn
simpleVersion	boolean	false	If true, filter bar will not show and instead of accumulating filters, every submit will be separate
showRadioButtons	boolean	true	If false, the buttons will not render
hasButton	boolean	false	Shows "apply" button, and doesn't submit upon selecting date.
isInFetchingState	boolean	false	If true, component will go into state where submit, destroying filters and date picker is disabled and there is visual indication that some data is being filtered
selectDefaultValue	object	First item in selectData prop	option that is preselected in react-combo-select on component render, with value nad text props
validationCallback	function	(value) => { return value && value.length >= 3; }	Function to run to validate text input, will get called with value as argument
inputErrorMessage	string	"This field is required and should be at least 3 characters long"	Message to display if validation fails
dateFormat	string	"DD MMM YYYY"	Prop to pass to date picker, takes any valid moment.js format
validDateFilter	function	none	Function to validate which dates can be picked. See react-datetime docs for more info
additionalSelectProps	object	none	Object to spread on react-combo-select as props. Takes any props react-combo-select takes
additionalDatePickerProps	object	none	Object to spread on react-datetime as props. Takes any props react-datetime takes

Customizing and contributing

You can contact us in case you need some feature or want to contribute, but keep in mind we don't want to go overboard with trying to make this component a "swiss knife". It's possible that you may need additional className props, we haven't fully tested custom styling. Feel free to contact us should that be a case. You can also freely fork and play around with the project.