From c4722e851c020de755f14a59f3c6ecff6eae83d0 Mon Sep 17 00:00:00 2001 From: Ivan Date: Fri, 7 Oct 2022 11:25:54 +0200 Subject: [PATCH 1/5] added clear button --- .../react-ui/src/widgets/RangeWidgetUI.js | 70 +++++++++++++------ 1 file changed, 48 insertions(+), 22 deletions(-) diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js index 86f2b8251..7f0f71203 100644 --- a/packages/react-ui/src/widgets/RangeWidgetUI.js +++ b/packages/react-ui/src/widgets/RangeWidgetUI.js @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; -import { Box, makeStyles, Slider, TextField } from '@material-ui/core'; +import { Box, Link, makeStyles, Slider, TextField } from '@material-ui/core'; import { debounce } from '@carto/react-core'; const useStyles = makeStyles((theme) => ({ @@ -54,6 +54,15 @@ const useStyles = makeStyles((theme) => ({ margin: 0 } } + }, + clearWrapper: { + display: 'flex', + flexDirection: 'row-reverse', + height: theme.spacing(1.5) + }, + clearButton: { + ...theme.typography.caption, + cursor: 'pointer' } })); @@ -108,6 +117,8 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { setInputsValues(Object.assign([], inputsValues, { [index]: value })); }; + const hasBeenModified = min !== inputsValues[0] || max !== inputsValues[1]; + useEffect(() => { if (!data) { return; @@ -138,35 +149,50 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { onSelectedRangeChange && onSelectedRangeChange(newValues); }; + const resetSlider = () => { + const newValues = [min, max]; + setInputsValues(newValues); + setSliderValues([...newValues]); + }; + return ( - (index === 0 ? 'min value' : 'max value')} - classes={{ - rail: classes.sliderWithThumbRail - }} - value={sliderValues} - min={min} - max={max} - onChange={handleSliderChange} - /> - {limits && limits.length === 2 && ( + + {hasBeenModified && ( + + Clear + + )} + + (index === 0 ? 'min limit' : 'max limit')} - className={classes.sliderLimit} + getAriaLabel={(index) => (index === 0 ? 'min value' : 'max value')} classes={{ - rail: classes.sliderLimitRail, - thumb: classes.sliderLimitThumb, - track: classes.sliderLimitsTrack, - mark: classes.sliderLimitMarks, - markActive: classes.sliderLimitMarks + rail: classes.sliderWithThumbRail }} - value={limits} + value={sliderValues} min={min} max={max} - marks={limitsMarks} + onChange={handleSliderChange} /> - )} + {limits && limits.length === 2 && ( + (index === 0 ? 'min limit' : 'max limit')} + className={classes.sliderLimit} + classes={{ + rail: classes.sliderLimitRail, + thumb: classes.sliderLimitThumb, + track: classes.sliderLimitsTrack, + mark: classes.sliderLimitMarks, + markActive: classes.sliderLimitMarks + }} + value={limits} + min={min} + max={max} + marks={limitsMarks} + /> + )} + Date: Fri, 7 Oct 2022 11:27:07 +0200 Subject: [PATCH 2/5] add changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 848d48ac5..65583d8bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Not released +- Add **clear** button to RangeWidget [#485](https://github.com/CartoDB/carto-react/pull/485) + ## 1.5 ### 1.5.0-alpha.1 (2022-10-05) From 2316e4acc55a7e441d110a989664c703ac8ee756 Mon Sep 17 00:00:00 2001 From: Ivan Date: Fri, 14 Oct 2022 11:12:10 +0200 Subject: [PATCH 3/5] simplify change values operation --- packages/react-ui/src/widgets/RangeWidgetUI.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js index 7f0f71203..4ce72e9ea 100644 --- a/packages/react-ui/src/widgets/RangeWidgetUI.js +++ b/packages/react-ui/src/widgets/RangeWidgetUI.js @@ -106,7 +106,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { [onSelectedRangeChange] ); - const handleSliderChange = (_, newValues) => { + const changeSliderValues = (newValues) => { setInputsValues([...newValues]); setSliderValues([...newValues]); debouncedOnSelectedRangeChange && debouncedOnSelectedRangeChange([...newValues]); @@ -144,15 +144,11 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { const newValues = Object.assign([], inputsValues, { [index]: value }).sort( (a, b) => a - b ); - setInputsValues(newValues); - setSliderValues([...newValues]); - onSelectedRangeChange && onSelectedRangeChange(newValues); + changeSliderValues(newValues); }; const resetSlider = () => { - const newValues = [min, max]; - setInputsValues(newValues); - setSliderValues([...newValues]); + changeSliderValues([min, max]); }; return ( @@ -173,7 +169,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) { value={sliderValues} min={min} max={max} - onChange={handleSliderChange} + onChange={(_, values) => changeSliderValues(values)} /> {limits && limits.length === 2 && ( Date: Fri, 14 Oct 2022 12:41:38 +0200 Subject: [PATCH 4/5] fix test --- .../react-ui/__tests__/widgets/RangeWidgetUI.test.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js index 7cba3b950..dbc50ddb3 100644 --- a/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js +++ b/packages/react-ui/__tests__/widgets/RangeWidgetUI.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen } from '@testing-library/react'; +import { render, fireEvent, screen, waitFor } from '@testing-library/react'; import { getMaterialUIContext } from './testUtils'; import RangeWidgetUI from '../../src/widgets/RangeWidgetUI'; @@ -101,7 +101,7 @@ describe('SliderWidgetUI', () => { expect(container.getElementsByClassName('MuiSlider-mark').length).toBe(0); }); - test('On selected method is called when we change slider values', () => { + test('On selected method is called when we change slider values', async () => { const mockOnSelectedRangeChange = jest.fn(); render(); const inputMin = screen.getByRole('spinbutton', { name: 'min value' }); @@ -112,12 +112,14 @@ describe('SliderWidgetUI', () => { fireEvent.change(inputMin, { target: { value: 20 } }); fireEvent.blur(inputMin); - expect(mockOnSelectedRangeChange).toHaveBeenCalledWith([20, 100]); + await waitFor(() => + expect(mockOnSelectedRangeChange).toHaveBeenCalledWith([20, 100]) + ); fireEvent.change(inputMax, { target: { value: 80 } }); fireEvent.blur(inputMax); - expect(mockOnSelectedRangeChange).toHaveBeenCalledWith([20, 80]); + await waitFor(() => expect(mockOnSelectedRangeChange).toHaveBeenCalledWith([20, 80])); expect(minValue).toHaveAttribute('aria-valuenow', '20'); expect(maxValue).toHaveAttribute('aria-valuenow', '80'); From 1a9449ab9079497e0a8d706a8071d04e4defd773 Mon Sep 17 00:00:00 2001 From: Ivan Date: Fri, 14 Oct 2022 13:22:33 +0200 Subject: [PATCH 5/5] remove line --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fed380129..cd4af1e5f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,6 @@ ## Not released - Update Storybook to v6.5.12 [#487](https://github.com/CartoDB/carto-react/pull/487) - - Add **clear** button to RangeWidget [#485](https://github.com/CartoDB/carto-react/pull/485) ## 1.5