Merge pull request #185 from performant-software/feature/basira187_search_ui

BASIRA #187 - Search UI

Author: dleadbetter

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,8 +12,8 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/semantic-components": "^1.0.12",
-    "@performant-software/shared-components": "^1.0.12",
+    "@performant-software/semantic-components": "^1.0.13",
+    "@performant-software/shared-components": "^1.0.13",
     "i18next": "^21.9.2",
     "semantic-ui-react": "^2.1.2",
     "underscore": "^1.13.2"

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./build/index.js",
@@ -12,16 +12,17 @@
     "build": "webpack --mode production && flow-copy-source -v src types"
   },
   "dependencies": {
-    "@performant-software/shared-components": "^1.0.12",
+    "@performant-software/shared-components": "^1.0.13",
     "@react-google-maps/api": "^2.8.1",
     "axios": "^0.26.1",
     "i18next": "^19.4.4",
+    "rc-slider": "^10.2.0",
     "react-calendar": "^3.3.0",
     "react-color": "^2.18.1",
     "react-dnd": "^11.1.3",
     "react-dnd-html5-backend": "^11.1.3",
     "react-i18next": "^11.4.0",
-    "react-pdf": "^5.7.2",
+    "react-pdf": "^7.1.1",
     "react-syntax-highlighter": "^15.5.0",
     "react-uuid": "^1.0.2",
     "semantic-ui-less": "2.4.1",

packages/semantic-ui/src/components/CurrentFacetLabels.css

@@ -0,0 +1,45 @@
+// @flow
+
+import React from 'react';
+import { Button, Label } from 'semantic-ui-react';
+import _ from 'underscore';
+
+type Item = {
+  label: string,
+  onClick: () => void
+};
+
+type Props = {
+  count?: number,
+  items: Array<Item>,
+  onShowMore?: () => void
+};
+
+const CurrentFacetLabels = (props: Props) => (
+  <Label.Group>
+    { _.map(props.items, (item) => (
+      <Label
+        content={item.label}
+        onRemove={item.onClick}
+      />
+    ))}
+    { props.count && props.count > props.items.length && props.onShowMore && (
+      <Label
+        as={Button}
+        content={`+${props.count - props.items.length}`}
+        onClick={props.onShowMore}
+      />
+    )}
+  </Label.Group>
+);
+
+CurrentFacetLabels.defaultProps = {
+  count: undefined,
+  onShowMore: undefined
+};
+
+export default CurrentFacetLabels;
+
+export type {
+  Item
+};

packages/semantic-ui/src/components/CurrentFacetLabels.js

@@ -0,0 +1,61 @@
+// @flow
+
+import React, { useMemo, useState } from 'react';
+import _ from 'underscore';
+import CurrentFacetLabels from './CurrentFacetLabels';
+import CurrentFacetsModal from './CurrentFacetsModal';
+import { type CurrentRefinementsProps } from '../types/InstantSearch';
+
+type Props = CurrentRefinementsProps & {
+  limit?: number
+};
+
+const CurrentFacets = ({ useCurrentRefinements, ...props }: Props) => {
+  const [modal, setModal] = useState(false);
+  const { items } = useCurrentRefinements(props);
+
+  /**
+   * Sets the facet items based on the current refinements.
+   */
+  const facets = useMemo(() => (
+    _.flatten(_.map(items, (group) => _.map(group.refinements, (refinement) => ({
+      label: `${group.label}: ${refinement.label}`,
+      onClick: () => group.refine(refinement)
+    }))))
+  ), [items]);
+
+  /**
+   * Limits the list of facets to the passed "limit" prop.
+   */
+  const filteredFacets = useMemo(() => _.filter(facets, (facet, index) => (
+    !props.limit || index < props.limit
+  )), [facets, props.limit]);
+
+  /**
+   * Don't render the component if no refinements are applied.
+   */
+  if (_.isEmpty(facets)) {
+    return null;
+  }
+
+  return (
+    <>
+      <CurrentFacetLabels
+        count={facets.length}
+        items={filteredFacets}
+        onShowMore={() => setModal(true)}
+      />
+      <CurrentFacetsModal
+        items={facets}
+        open={modal}
+        onClose={() => setModal(false)}
+      />
+    </>
+  );
+};
+
+CurrentFacets.defaultProps = {
+  limit: undefined
+};
+
+export default CurrentFacets;

packages/semantic-ui/src/components/CurrentFacets.css

@@ -0,0 +1,41 @@
+// @flow
+
+import React from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+import CurrentFacetLabels, { type Item } from './CurrentFacetLabels';
+import i18n from '../i18n/i18n';
+
+type Props = {
+  items: Array<Item>,
+  onClose: () => void,
+  open?: boolean
+};
+
+const CurrentFacetsModal = (props: Props) => (
+  <Modal
+    centered={false}
+    open={props.open}
+  >
+    <Modal.Header
+      content={i18n.t('CurrentFacetsModal.title')}
+    />
+    <Modal.Content>
+      <CurrentFacetLabels
+        items={props.items}
+      />
+    </Modal.Content>
+    <Modal.Actions>
+      <Button
+        content={i18n.t('Common.buttons.done')}
+        onClick={props.onClose}
+        primary
+      />
+    </Modal.Actions>
+  </Modal>
+);
+
+CurrentFacetsModal.defaultProps = {
+  open: undefined
+};
+
+export default CurrentFacetsModal;

packages/semantic-ui/src/components/CurrentFacets.js

@@ -0,0 +1,20 @@
+.facet.ui.accordion {
+  padding-bottom: 1em;
+}
+
+.facet.ui.accordion > .title > .facet-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.facet.ui.accordion > .title > .facet-title .header {
+  margin-bottom: 0;
+}
+
+.facet.ui.accordion > .title:not(.ui) {
+  padding-top: 0;
+}
+
+.facet.ui.accordion .content {
+  margin-bottom: 1em;
+}

packages/semantic-ui/src/components/CurrentFacetsModal.css

@@ -0,0 +1,67 @@
+// @flow
+
+import React, { useState, type Node } from 'react';
+import {
+  Accordion,
+  Divider,
+  Header,
+  Icon
+} from 'semantic-ui-react';
+import './Facet.css';
+
+type Props = {
+  children?: Node,
+  defaultActive?: boolean,
+  divided?: boolean,
+  title: string
+};
+
+const Facet = (props: Props) => {
+  const [active, setActive] = useState(props.defaultActive);
+
+  return (
+    <>
+      <Accordion
+        className='facet'
+      >
+        <Accordion.Title
+          active={active}
+          index={0}
+          onClick={() => setActive((prevActive) => !prevActive)}
+        >
+          <div
+            className='facet-title'
+          >
+            <Header
+              content={props.title}
+              size='tiny'
+            />
+            <Icon
+              name='dropdown'
+            />
+          </div>
+        </Accordion.Title>
+        <Accordion.Content
+          active={active}
+        >
+          { props.children }
+        </Accordion.Content>
+      </Accordion>
+      { props.divided && (
+        <Divider />
+      )}
+    </>
+  );
+};
+
+Facet.defaultProps = {
+  children: undefined,
+  defaultActive: true,
+  divided: false
+};
+
+export type {
+  Props
+};
+
+export default Facet;