Merge pull request #303 from performant-software/feature/basira257_da…

…te_facet_input

BASIRA #257 - Date facet input

packages/controlled-vocabulary/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.17",
-    "@performant-software/shared-components": "^2.2.17",
+    "@performant-software/semantic-components": "^2.2.18",
+    "@performant-software/shared-components": "^2.2.18",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

packages/core-data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/core-data",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "A package of components used with the Core Data platform.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -40,8 +40,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/geospatial": "^2.2.17",
-    "@performant-software/shared-components": "^2.2.17",
+    "@performant-software/geospatial": "^2.2.18",
+    "@performant-software/shared-components": "^2.2.18",
     "@peripleo/maplibre": "^0.5.2",
     "@peripleo/peripleo": "^0.5.2",
     "react": ">= 16.13.1 < 19.0.0",

packages/geospatial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "A package of components for all things map-related.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

packages/semantic-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -35,7 +35,7 @@
     "zotero-translation-client": "^5.0.1"
   },
   "peerDependencies": {
-    "@performant-software/shared-components": "^2.2.17",
+    "@performant-software/shared-components": "^2.2.18",
     "@samvera/clover-iiif": "^2.3.2",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dnd": "^11.1.3",

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

@@ -12,3 +12,7 @@
   padding-left: 10px;
   padding-right: 10px;
 }
+
+.facet-slider .ui.input {
+  width: 65px;
+}

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

@@ -1,18 +1,24 @@
 // @flow
 
+import { useTimer } from '@performant-software/shared-components';
 import Slider from 'rc-slider';
 import React, {
   forwardRef,
+  useCallback,
   useEffect,
   useState
 } from 'react';
-import { Grid } from 'semantic-ui-react';
+import { Grid, Input } from 'semantic-ui-react';
+import _ from 'underscore';
 import Facet, { type Props as FacetProps } from './Facet';
 import { type RangeSliderProps } from '../types/InstantSearch';
-
 import './FacetSlider.css';
 
-type Props = FacetProps & RangeSliderProps;
+type Props = FacetProps & RangeSliderProps & {
+  editable?: boolean
+};
+
+const RADIX = 10;
 
 /**
  * This component can be used with the `useRange` hook from Instant Search Hooks.
@@ -29,9 +35,51 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
 
   const [value, setValue] = useState([min, max]);
 
+  const { clearTimer, setTimer } = useTimer();
+
   const from = Math.max(min, Number.isFinite(start[0]) ? start[0] : min);
   const to = Math.min(max, Number.isFinite(start[1]) ? start[1] : max);
 
+  /**
+   * Parses the input string to an integer.
+   *
+   * @type {function(*): number}
+   */
+  const getInputValue = useCallback((str) => {
+    let inputValue = parseInt(str, RADIX);
+
+    if (_.isNaN(inputValue)) {
+      inputValue = str;
+    }
+
+    return inputValue;
+  }, []);
+
+  /**
+   * Parses the input strings, sets the value on the state, and sets a timer to call "refine".
+   *
+   * @type {(function(*, *): void)|*}
+   */
+  const onChange = useCallback((newStart, newEnd) => {
+    // Set the new value on the state
+    const newValue = [
+      getInputValue(newStart),
+      getInputValue(newEnd)
+    ];
+
+    setValue(newValue);
+
+    // Use a timer to only refine the value when the user stops typing
+    clearTimer();
+
+    if (_.isNumber(newValue[0]) && _.isNumber(newValue[1])) {
+      setTimer(() => refine(newValue));
+    }
+  }, [getInputValue, refine]);
+
+  /**
+   * Sets the view value when to/from change.
+   */
   useEffect(() => {
     setValue([from, to]);
   }, [from, to]);
@@ -66,19 +114,34 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
           columns={2}
         >
           <Grid.Column>
-            { value[0] }
+            { !props.editable && value[0] }
+            { props.editable && (
+              <Input
+                onChange={(e, data) => onChange(data.value, value[1])}
+                value={value[0]}
+              />
+            )}
           </Grid.Column>
           <Grid.Column
             textAlign='right'
           >
-            { value[1] }
+            { !props.editable && value[1] }
+            { props.editable && (
+              <Input
+                onChange={(e, data) => onChange(value[0], data.value)}
+                value={value[1]}
+              />
+            )}
           </Grid.Column>
         </Grid>
       </div>
     </Facet>
   );
 });
 
-FacetSlider.defaultProps = Facet.defaultProps;
+FacetSlider.defaultProps = {
+  ...Facet.defaultProps,
+  editable: false
+};
 
 export default FacetSlider;

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

packages/storybook/src/semantic-ui/FacetSlider.stories.js

@@ -22,3 +22,18 @@ export const Default = () => (
     })}
   />
 );
+
+export const Editable = () => (
+  <FacetSlider
+    editable
+    title='Date Range'
+    useRangeSlider={() => ({
+      start: [],
+      range: {
+        min: 100,
+        max: 5000
+      },
+      refine: action('refine')
+    })}
+  />
+);

packages/user-defined-fields/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.17",
-    "@performant-software/shared-components": "^2.2.17",
+    "@performant-software/semantic-components": "^2.2.18",
+    "@performant-software/shared-components": "^2.2.18",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },

packages/visualize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "2.2.17",
+  "version": "2.2.18",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./dist/index.cjs.js",

react-components.json

@@ -8,5 +8,5 @@
     "packages/user-defined-fields",
     "packages/visualize"
   ],
-  "version": "2.2.17"
+  "version": "2.2.18"
 }