Skip to content

Commit bcf9ec4

Browse files
dleadbetterdleadbetter
authored
Merge pull request #303 from performant-software/feature/basira257_date_facet_input
BASIRA #257 - Date facet input
2 parents 2ed9f39 + 6dd77bc commit bcf9ec4

File tree

11 files changed

+103
-21
lines changed

11 files changed

+103
-21
lines changed

‎packages/controlled-vocabulary/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/controlled-vocabulary",
3-
"version": "2.2.17",
3+
"version": "2.2.18",
44
"description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
2323
"underscore": "^1.13.2"
2424
},
2525
"peerDependencies": {
26-
"@performant-software/semantic-components": "^2.2.17",
27-
"@performant-software/shared-components": "^2.2.17",
26+
"@performant-software/semantic-components": "^2.2.18",
27+
"@performant-software/shared-components": "^2.2.18",
2828
"react": ">= 16.13.1 < 19.0.0",
2929
"react-dom": ">= 16.13.1 < 19.0.0"
3030
},

‎packages/core-data/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/core-data",
3-
"version": "2.2.17",
3+
"version": "2.2.18",
44
"description": "A package of components used with the Core Data platform.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -40,8 +40,8 @@
4040
"underscore": "^1.13.2"
4141
},
4242
"peerDependencies": {
43-
"@performant-software/geospatial": "^2.2.17",
44-
"@performant-software/shared-components": "^2.2.17",
43+
"@performant-software/geospatial": "^2.2.18",
44+
"@performant-software/shared-components": "^2.2.18",
4545
"@peripleo/maplibre": "^0.5.2",
4646
"@peripleo/peripleo": "^0.5.2",
4747
"react": ">= 16.13.1 < 19.0.0",

‎packages/geospatial/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/geospatial",
3-
"version": "2.2.17",
3+
"version": "2.2.18",
44
"description": "A package of components for all things map-related.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",

‎packages/semantic-ui/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/semantic-components",
3-
"version": "2.2.17",
3+
"version": "2.2.18",
44
"description": "A package of shared components based on the Semantic UI Framework.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -35,7 +35,7 @@
3535
"zotero-translation-client": "^5.0.1"
3636
},
3737
"peerDependencies": {
38-
"@performant-software/shared-components": "^2.2.17",
38+
"@performant-software/shared-components": "^2.2.18",
3939
"@samvera/clover-iiif": "^2.3.2",
4040
"react": ">= 16.13.1 < 19.0.0",
4141
"react-dnd": "^11.1.3",

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,7 @@
1212
padding-left: 10px;
1313
padding-right: 10px;
1414
}
15+
16+
.facet-slider .ui.input {
17+
width: 65px;
18+
}

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

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,24 @@
11
// @flow
22

3+
import { useTimer } from '@performant-software/shared-components';
34
import Slider from 'rc-slider';
45
import React, {
56
forwardRef,
7+
useCallback,
68
useEffect,
79
useState
810
} from 'react';
9-
import { Grid } from 'semantic-ui-react';
11+
import { Grid, Input } from 'semantic-ui-react';
12+
import _ from 'underscore';
1013
import Facet, { type Props as FacetProps } from './Facet';
1114
import { type RangeSliderProps } from '../types/InstantSearch';
12-
1315
import './FacetSlider.css';
1416

15-
type Props = FacetProps & RangeSliderProps;
17+
type Props = FacetProps & RangeSliderProps & {
18+
editable?: boolean
19+
};
20+
21+
const RADIX = 10;
1622

1723
/**
1824
* 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
2935

3036
const [value, setValue] = useState([min, max]);
3137

38+
const { clearTimer, setTimer } = useTimer();
39+
3240
const from = Math.max(min, Number.isFinite(start[0]) ? start[0] : min);
3341
const to = Math.min(max, Number.isFinite(start[1]) ? start[1] : max);
3442

43+
/**
44+
* Parses the input string to an integer.
45+
*
46+
* @type {function(*): number}
47+
*/
48+
const getInputValue = useCallback((str) => {
49+
let inputValue = parseInt(str, RADIX);
50+
51+
if (_.isNaN(inputValue)) {
52+
inputValue = str;
53+
}
54+
55+
return inputValue;
56+
}, []);
57+
58+
/**
59+
* Parses the input strings, sets the value on the state, and sets a timer to call "refine".
60+
*
61+
* @type {(function(*, *): void)|*}
62+
*/
63+
const onChange = useCallback((newStart, newEnd) => {
64+
// Set the new value on the state
65+
const newValue = [
66+
getInputValue(newStart),
67+
getInputValue(newEnd)
68+
];
69+
70+
setValue(newValue);
71+
72+
// Use a timer to only refine the value when the user stops typing
73+
clearTimer();
74+
75+
if (_.isNumber(newValue[0]) && _.isNumber(newValue[1])) {
76+
setTimer(() => refine(newValue));
77+
}
78+
}, [getInputValue, refine]);
79+
80+
/**
81+
* Sets the view value when to/from change.
82+
*/
3583
useEffect(() => {
3684
setValue([from, to]);
3785
}, [from, to]);
@@ -66,19 +114,34 @@ const FacetSlider = forwardRef(({ useRangeSlider, ...props }: Props, ref: HTMLEl
66114
columns={2}
67115
>
68116
<Grid.Column>
69-
{ value[0] }
117+
{ !props.editable && value[0] }
118+
{ props.editable && (
119+
<Input
120+
onChange={(e, data) => onChange(data.value, value[1])}
121+
value={value[0]}
122+
/>
123+
)}
70124
</Grid.Column>
71125
<Grid.Column
72126
textAlign='right'
73127
>
74-
{ value[1] }
128+
{ !props.editable && value[1] }
129+
{ props.editable && (
130+
<Input
131+
onChange={(e, data) => onChange(value[0], data.value)}
132+
value={value[1]}
133+
/>
134+
)}
75135
</Grid.Column>
76136
</Grid>
77137
</div>
78138
</Facet>
79139
);
80140
});
81141

82-
FacetSlider.defaultProps = Facet.defaultProps;
142+
FacetSlider.defaultProps = {
143+
...Facet.defaultProps,
144+
editable: false
145+
};
83146

84147
export default FacetSlider;

‎packages/shared/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/shared-components",
3-
"version": "2.2.17",
3+
"version": "2.2.18",
44
"description": "A package of shared, framework agnostic, components.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,18 @@ export const Default = () => (
2222
})}
2323
/>
2424
);
25+
26+
export const Editable = () => (
27+
<FacetSlider
28+
editable
29+
title='Date Range'
30+
useRangeSlider={() => ({
31+
start: [],
32+
range: {
33+
min: 100,
34+
max: 5000
35+
},
36+
refine: action('refine')
37+
})}
38+
/>
39+
);

‎packages/user-defined-fields/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/user-defined-fields",
3-
"version": "2.2.17",
3+
"version": "2.2.18",
44
"description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
2323
"underscore": "^1.13.2"
2424
},
2525
"peerDependencies": {
26-
"@performant-software/semantic-components": "^2.2.17",
27-
"@performant-software/shared-components": "^2.2.17",
26+
"@performant-software/semantic-components": "^2.2.18",
27+
"@performant-software/shared-components": "^2.2.18",
2828
"react": ">= 16.13.1 < 19.0.0",
2929
"react-dom": ">= 16.13.1 < 19.0.0"
3030
},

‎packages/visualize/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@performant-software/visualize",
3-
"version": "2.2.17",
3+
"version": "2.2.18",
44
"description": "A package of components used for data visualization",
55
"license": "MIT",
66
"main": "./dist/index.cjs.js",

0 commit comments

Comments
 (0)