From f231c8c13bd792d13332b4f4973af1caf1591c85 Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Tue, 5 Nov 2024 14:10:12 +0100 Subject: [PATCH 1/3] UISACQCOMP-227 Added new `subscribeOnReset` prop to `` --- CHANGELOG.md | 4 +++ lib/AcqDateRangeFilter/AcqDateRangeFilter.js | 31 ++++++++++++++++++-- package.json | 2 +- 3 files changed, 34 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c7033e01..9e1ca147 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## (6.1.0 IN PROGRESS) +## (6.0.1 IN PROGRESS) + +* Added new `subscribeOnReset` prop to ``. Refs UISACQCOMP-227. + ## [6.0.0](https://github.com/folio-org/stripes-acq-components/tree/v6.0.0) (2024-10-29) [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v5.1.2...v6.0.0) diff --git a/lib/AcqDateRangeFilter/AcqDateRangeFilter.js b/lib/AcqDateRangeFilter/AcqDateRangeFilter.js index 17b3442d..e57a930c 100644 --- a/lib/AcqDateRangeFilter/AcqDateRangeFilter.js +++ b/lib/AcqDateRangeFilter/AcqDateRangeFilter.js @@ -1,9 +1,11 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef } from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; -import { omit } from 'lodash'; +import omit from 'lodash/omit'; +import noop from 'lodash/noop'; import { DateRangeFilter } from '@folio/stripes/smart-components'; +import { nativeChangeFieldValue } from '@folio/stripes/components'; import { useLocaleDateFormat } from '../hooks'; import { FilterAccordion } from '../FilterAccordion'; @@ -43,6 +45,7 @@ const AcqDateRangeFilter = ({ name, onChange, dateFormat, + subscribeOnReset, ...rest }) => { const stripesDateFormat = useLocaleDateFormat(); @@ -50,6 +53,8 @@ const AcqDateRangeFilter = ({ () => dateFormat || stripesDateFormat, [stripesDateFormat, dateFormat], ); + const startDateInputRef = useRef(); + const endDateInputRef = useRef(); const filterValue = activeFilters?.[0]; const selectedValues = useMemo(() => { @@ -63,6 +68,24 @@ const AcqDateRangeFilter = ({ return `${startDateBackend}:${endDateBackend}`; }, [localeDateFormat]); + const onSearchReset = useCallback(() => { + // use setTimeout to avoid event conflicts that prevent some fields from being cleared. + setTimeout(() => { + if (startDateInputRef.current?.value) { + nativeChangeFieldValue(startDateInputRef, false, ''); + } + + if (endDateInputRef.current?.value) { + nativeChangeFieldValue(endDateInputRef, false, ''); + } + }); + }, []); + + useEffect(() => { + subscribeOnReset(onSearchReset); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + return ( @@ -94,11 +119,13 @@ AcqDateRangeFilter.propTypes = { id: PropTypes.string, label: PropTypes.node, labelId: PropTypes.string, + subscribeOnReset: PropTypes.func, }; AcqDateRangeFilter.defaultProps = { closedByDefault: true, disabled: false, + subscribeOnReset: noop, }; export default AcqDateRangeFilter; diff --git a/package.json b/package.json index 44a22585..1ab707a0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@folio/stripes-acq-components", - "version": "6.0.0", + "version": "6.0.1", "description": "Component library for Stripes Acquisitions modules", "publishConfig": { "registry": "https://repository.folio.org/repository/npm-folio/" From a3d40c3fc47920cc2e66a3b47f2832b0a4c52c53 Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Wed, 6 Nov 2024 13:52:37 +0100 Subject: [PATCH 2/3] UISACQCOMP-227 added tests for AcqDateRangeFilter reset --- .../AcqDateRangeFilter.test.js | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js b/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js index 591923e4..39a3b3a2 100644 --- a/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js +++ b/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js @@ -1,12 +1,21 @@ import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, waitFor } from '@testing-library/react'; import { noop } from 'lodash'; +import { nativeChangeFieldValue } from '@folio/stripes/components'; + import AcqDateRangeFilter from './AcqDateRangeFilter'; +jest.mock('@folio/stripes/components', () => ({ + ...jest.requireActual('@folio/stripes-components'), + nativeChangeFieldValue: jest.fn(), +})); + const FILTER_LABEL = 'some date filter'; const FILTER_NAME = 'some-date-filter'; +const mockSubscribeOnReset = jest.fn(); + const renderFilter = (closedByDefault, onChange = noop, dateFormat) => (render( (render( closedByDefault={closedByDefault} onChange={onChange} dateFormat={dateFormat} + subscribeOnReset={mockSubscribeOnReset} />, )); @@ -32,6 +42,12 @@ describe('AcqDateRangeFilter component', () => { expect(button.getAttribute('aria-expanded') || 'false').toBe('false'); }); + it('should subscribe to reset events', () => { + renderFilter(); + + expect(mockSubscribeOnReset).toHaveBeenCalled(); + }); + it('should be opened by default when closedByDefault=false prop is passed', () => { const { container } = renderFilter(false); const button = container.querySelector('[id="accordion-toggle-button-some-date-filter"]'); @@ -78,4 +94,26 @@ describe('AcqDateRangeFilter component', () => { expect(onChangeFilter).toHaveBeenCalled(); }); + + describe('when reset handler is called', () => { + it('should clear dates', async () => { + const callResetHandler = mockSubscribeOnReset.mockImplementation(cb => { + cb?.(); + }); + + const { getByLabelText } = renderFilter(false, () => {}, 'YYYY-DD-MM'); + const fromDate = getByLabelText('stripes-smart-components.dateRange.from'); + const toDate = getByLabelText('stripes-smart-components.dateRange.to'); + + fireEvent.change(fromDate, { target: { value: '2000-01-01' } }); + fireEvent.change(toDate, { target: { value: '2020-01-01' } }); + + expect(fromDate).toHaveValue('2000-01-01'); + expect(toDate).toHaveValue('2020-01-01'); + + callResetHandler(); + + await waitFor(() => expect(nativeChangeFieldValue).toHaveBeenCalledTimes(2)); + }); + }); }); From 5310682ab5d736f40a3eae2c8fe9734ed6b1a41a Mon Sep 17 00:00:00 2001 From: Denys Bohdan Date: Thu, 7 Nov 2024 14:25:11 +0100 Subject: [PATCH 3/3] UISACQCOMP-227 fix code review --- lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js b/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js index 39a3b3a2..fa9a4d2c 100644 --- a/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js +++ b/lib/AcqDateRangeFilter/AcqDateRangeFilter.test.js @@ -7,7 +7,7 @@ import { nativeChangeFieldValue } from '@folio/stripes/components'; import AcqDateRangeFilter from './AcqDateRangeFilter'; jest.mock('@folio/stripes/components', () => ({ - ...jest.requireActual('@folio/stripes-components'), + ...jest.requireActual('@folio/stripes/components'), nativeChangeFieldValue: jest.fn(), }));