gistfile1.txt

const options = {
	'show-me': [
		{ id: 1, label: 'All Products', value: 'all-products' },
		{ id: 2, label: 'All Wackamoles', value: 'all-Wackamoles' },
		{ id: 3, label: 'All Products', value: 'all-products' },
		{ id: 4, label: 'All Wackamoles', value: 'all-Wackamoles' },
		{ id: 5, label: 'All Products', value: 'all-products' },
		{ id: 6, label: 'All Wackamoles', value: 'all-Wackamoles' },
		{ id: 7, label: 'All Products', value: 'all-products' },
		{ id: 8, label: 'All Wackamoles', value: 'all-Wackamoles' },
		{ id: 9, label: 'All Products', value: 'all-products' },
		{ id: 10, label: 'All Wackamoles', value: 'all-Wackamoles' },
		{ id: 11, label: 'All Products', value: 'all-products' },
		{ id: 22, label: 'All Wackamoles', value: 'all-Wackamoles' },
		{ id: 13, label: 'All Products', value: 'all-products' },
		{ id: 24, label: 'All Wackamoles', value: 'all-Wackamoles' },
		{ id: 15, label: 'All Products', value: 'all-products' },
		{ id: 26, label: 'All Wackamoles', value: 'all-Wackamoles' }
	]
};

const Example = createReactClass({
	displayName: 'FilterExample',

	propTypes () {
		return {
			align: PropTypes.string
		};
	},

	getInitialState () {
		return {
			'show-me': {
				selectedItem: options['show-me'][0],
				isActive: true,
				comboboxSelection: [options['show-me'][0]]
			}
		};
	},

	onChangePredicate (event, { id }) {
		const idSuffix = id.split('sample-panel-filtering-')[1];
		this.setState({
			[idSuffix]: {
				...this.state[idSuffix],
				selectedItem: this.state[idSuffix].comboboxSelection[0]
			}
		});
	},

	onRemove (event, { id }) {
		const idSuffix = id.split('sample-panel-filtering-')[1];
		this.setState({
			[idSuffix]: {
				...this.state[idSuffix],
				isActive: false
			}
		});
	},

	render () {
		return this.state['show-me'].isActive && (
			<IconSettings iconPath="/assets/icons">
				<Filter
					align={this.props.align}
					id="sample-panel-filtering-show-me"
					onChange={this.onChangePredicate}
					onRemove={this.onRemove}
					property="Show Me"
					predicate={this.state['show-me'].selectedItem.label}
					{...this.props}
				>
					<Combobox
						events={{
							onSelect: (event, data) => {
								this.setState({ 'show-me': {
									...this.state['show-me'],
									comboboxSelection: data.selection
								} });
							}
						}}
						labels={{
							label: 'Show Me',
							placeholder: 'Select record type'
						}}
						menuPosition="relative"
						options={options['show-me']}
						selection={this.state['show-me'].comboboxSelection}
						variant="readonly"
					/>
				</Filter>
			</IconSettings>
		);
	}
});