components: adds toggle filter component

src/lib/components/Toggle/ToggleElement.js

@@ -0,0 +1,49 @@
+/*
+ * 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';
+
+
+class ToggleComponent extends Component{
+    constructor(props) {
+        super(props);
+        this.title = props.title;
+        this.label = props.label;
+        this.filterValue = props.filterValue;
+        this.updateQueryFilters = props.updateQueryFilters;
+      }
+
+      onToggleClicked = () => {
+        this.updateQueryFilters(this.filterValue);
+      };
+
+      render() {
+        return(
+        <Overridable id={'ToggleComponent'}>
+            <Card>
+                <Card.Content>
+                    <Card.Header>{this.title}</Card.Header>
+                </Card.Content>
+                <Card.Content>
+                    <Checkbox
+                        toggle
+                        label={this.label}
+                        onClick={this.onToggleClicked}
+                    />
+                </Card.Content>
+            </Card>
+        </Overridable>
+        )
+      }
+}
+
+export default Overridable.component('ToggleComponent', ToggleComponent);

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 './ToggleElement';
+
+const mapDispatchToProps = dispatch => ({
+  updateQueryFilters: filter => dispatch(updateQueryFilters(filter)),
+});
+
+export const Toggle = connect(
+  state => ({
+    userSelectionFilters: state.query.filters
+  }),
+  mapDispatchToProps,
+)(ToggleComponent);

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';