diff --git a/docs/docs/components/toggle.md b/docs/docs/components/toggle.md new file mode 100644 index 00000000..e561f0cf --- /dev/null +++ b/docs/docs/components/toggle.md @@ -0,0 +1,31 @@ +--- +id: toggle +title: Toggle +--- + +`Toggle` renders a Toggle Checkbox in a Card element providing a filter for the performed search. + +## Usage + +```jsx + +``` + +## Props + +* **title** `String` *optional* + + The optional title for the Card element. + +* **label** `label` *optional* + + An optional label to for the Checkbox element. + +- **filterValue** `Array` + + An array containing the filter to be applied to the search query when active. + diff --git a/src/lib/components/Toggle/Toggle.js b/src/lib/components/Toggle/Toggle.js new file mode 100644 index 00000000..68fc87aa --- /dev/null +++ b/src/lib/components/Toggle/Toggle.js @@ -0,0 +1,70 @@ +/* + * This file is part of React-SearchKit. + * Copyright (C) 2020 CERN. + * + * React-SearchKit is free software; you can redistribute it and/or modify it + * under the terms of the MIT License; see LICENSE file for more details. + */ + +import React, { Component } from 'react'; +import { Checkbox } from 'semantic-ui-react'; +import Overridable from 'react-overridable'; +import _get from 'lodash/get'; +import { Card } from 'semantic-ui-react'; +import PropTypes from 'prop-types'; + +class ToggleComponent extends Component{ + + _isChecked = (userSelectionFilters) => { + const isFilterActive = userSelectionFilters.filter( + (filter) => filter[0] === this.props.filterValue[0] + ).length > 0 + return isFilterActive + }; + + onToggleClicked = () => { + this.props.updateQueryFilters(this.props.filterValue); + }; + + render() { + const { + userSelectionFilters, + overridableId, + ...props + } = this.props; + var isChecked = this._isChecked(userSelectionFilters); + return( + + + + + {this.props.title} + + + + + + + ) + } +} + +ToggleComponent.propTypes = { + title: PropTypes.string, + label: PropTypes.string, + userSelectionFilters: PropTypes.array.isRequired, + updateQueryFilters: PropTypes.func.isRequired, + overridableId: PropTypes.string, + }; + + ToggleComponent.defaultProps = { + overridableId: '', + }; + +export default Overridable.component( + 'SearchFilters.ToggleComponent', ToggleComponent); diff --git a/src/lib/components/Toggle/index.js b/src/lib/components/Toggle/index.js new file mode 100644 index 00000000..b3bf1cdb --- /dev/null +++ b/src/lib/components/Toggle/index.js @@ -0,0 +1,22 @@ +/* + * This file is part of React-SearchKit. + * Copyright (C) 2020 CERN. + * + * React-SearchKit is free software; you can redistribute it and/or modify it + * under the terms of the MIT License; see LICENSE file for more details. + */ + +import { connect } from '../../store'; +import { updateQueryFilters } from '../../state/actions'; +import ToggleComponent from './Toggle'; + +const mapDispatchToProps = dispatch => ({ + updateQueryFilters: filter => dispatch(updateQueryFilters(filter)), +}); + +export const Toggle = connect( + state => ({ + userSelectionFilters: state.query.filters + }), + mapDispatchToProps, +)(ToggleComponent); diff --git a/src/lib/components/index.js b/src/lib/components/index.js index a47e7683..3cfc4add 100644 --- a/src/lib/components/index.js +++ b/src/lib/components/index.js @@ -8,6 +8,7 @@ export { ActiveFilters } from './ActiveFilters'; export { BucketAggregation } from './BucketAggregation'; +export { Toggle } from './Toggle'; export { AutocompleteSearchBar } from './AutocompleteSearchBar'; export { Count } from './Count'; export { EmptyResults } from './EmptyResults';