diff --git a/packages/dx-react-scheduler/src/plugins/day-view.test.tsx b/packages/dx-react-scheduler/src/plugins/day-view.test.tsx index 4fa9b66170..98b939c69a 100644 --- a/packages/dx-react-scheduler/src/plugins/day-view.test.tsx +++ b/packages/dx-react-scheduler/src/plugins/day-view.test.tsx @@ -3,8 +3,11 @@ import { mount } from 'enzyme'; import { pluginDepsToComponents, getComputedState } from '@devexpress/dx-testing'; import { PluginHost } from '@devexpress/dx-react-core'; import { - computed, viewCellsData, - calculateWeekDateIntervals, getTimeTableHeight, + computed, + viewCellsData, + timeCellsData, + calculateWeekDateIntervals, + getTimeTableHeight, } from '@devexpress/dx-scheduler-core'; import { DayView } from './day-view'; import { BasicView } from './basic-view'; @@ -18,6 +21,7 @@ jest.mock('@devexpress/dx-scheduler-core', () => ({ availableViews: jest.fn(), calculateWeekDateIntervals: jest.fn(), getTimeTableHeight: jest.fn(), + timeCellsData: jest.fn(), })); const defaultDeps = { @@ -58,6 +62,7 @@ describe('Day View', () => { (getters, viewName, baseComputed) => baseComputed(getters, viewName), ); global.Date.now = () => 123; + timeCellsData.mockImplementation(() => 'timeCellsData'); }); afterEach(() => { jest.resetAllMocks(); @@ -108,6 +113,21 @@ describe('Day View', () => { expect(calculateWeekDateIntervals) .toHaveBeenCalledWith(2, 3, 4, 5, 1); }); + + it('should export timeCellsData getter', () => { + const tree = mount(( + + {pluginDepsToComponents(defaultDeps)} + + + )); + + expect(timeCellsData) + .toBeCalledWith(undefined, 0, 24, 30, expect.any(Number)); + + expect(getComputedState(tree).timeCellsData) + .toBe('timeCellsData'); + }); }); describe('Templates', () => { @@ -128,7 +148,7 @@ describe('Day View', () => { rowComponent: expect.any(Function), tickCellComponent: expect.any(Function), labelComponent: expect.any(Function), - cellsData: getComputedState(tree).viewCellsData, + cellsData: getComputedState(tree).timeCellsData, formatDate: defaultDeps.getter.formatDate, }); }); diff --git a/packages/dx-react-scheduler/src/plugins/day-view.tsx b/packages/dx-react-scheduler/src/plugins/day-view.tsx index 9346f40a94..84781098d3 100644 --- a/packages/dx-react-scheduler/src/plugins/day-view.tsx +++ b/packages/dx-react-scheduler/src/plugins/day-view.tsx @@ -5,11 +5,17 @@ import { TemplateConnector, TemplatePlaceholder, PluginComponents, + Getter, } from '@devexpress/dx-react-core'; import { - viewCellsData as viewCellsDataCore, calculateWeekDateIntervals, - VIEW_TYPES, getTimeTableHeight, + viewCellsData as viewCellsDataCore, + calculateWeekDateIntervals, + VIEW_TYPES, + getTimeTableHeight, + timeCellsData as timeCellsDataCore, + computed, } from '@devexpress/dx-scheduler-core'; +import { memoize } from '@devexpress/dx-core'; import { BasicView } from './basic-view'; import { VerticalViewProps } from '../types'; @@ -28,6 +34,10 @@ const calculateAppointmentsIntervalsBaseComputed = cellDuration => ({ }) => calculateWeekDateIntervals( appointments, startViewDate, endViewDate, excludedDays, cellDuration, ); +const timeCellsDataComputed = (startDayHour, endDayHour) => ({ + viewCellsData, cellDuration, +}) => timeCellsDataCore(viewCellsData, startDayHour, endDayHour, cellDuration, Date.now()); + const TimeScalePlaceholder = () => ; class DayViewBase extends React.PureComponent { @@ -57,6 +67,13 @@ class DayViewBase extends React.PureComponent { timeTableRowComponent: 'TimeTableRow', }; + timeCellsDataComputed = memoize((viewName, startDayHour, endDayHour) => getters => computed( + getters, + viewName, + timeCellsDataComputed(startDayHour, endDayHour), + getters.timeCellsData, + )); + render() { const { layoutComponent, @@ -108,22 +125,28 @@ class DayViewBase extends React.PureComponent { }} /> + +