Skip to content

Commit

Permalink
Date picker [LG-3864] year input rollover (#2138)
Browse files Browse the repository at this point in the history 
* prevents rollover in year segment

* Update DatePicker.spec.tsx
  • Loading branch information
@TheSonOfThomp
TheSonOfThomp authored Dec 14, 2023
1 parent c9f7c74 commit 848a631
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 54 deletions.
8 changes: 4 additions & 4 deletions packages/date-picker/src/DatePicker/DatePicker.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1352,7 +1352,7 @@ describe('packages/date-picker', () => {
expect(onDateChange).toHaveBeenCalled();
});

test('rolls year value over from max prop to min prop', () => {
test('does not roll over year', () => {
const onDateChange = jest.fn();
const { yearInput } = renderDatePicker({
onDateChange,
Expand All @@ -1363,7 +1363,7 @@ describe('packages/date-picker', () => {
userEvent.click(yearInput);
userEvent.keyboard(`{arrowup}`);
expect(onDateChange).toHaveBeenCalledWith(
newUTC(1969, Month.July, 5),
newUTC(2021, Month.July, 5),
);
});

Expand Down Expand Up @@ -1522,7 +1522,7 @@ describe('packages/date-picker', () => {
);
});

test('rolls year value over from min prop to max prop', () => {
test('does not roll over year', () => {
const onDateChange = jest.fn();
const { yearInput } = renderDatePicker({
onDateChange,
Expand All @@ -1533,7 +1533,7 @@ describe('packages/date-picker', () => {
userEvent.click(yearInput);
userEvent.keyboard(`{arrowdown}`);
expect(onDateChange).toHaveBeenCalledWith(
newUTC(2020, Month.July, 5),
newUTC(1968, Month.July, 5),
);
});

Expand Down
56 changes: 12 additions & 44 deletions ...es/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with default `min` when the new value is greater than the `max` value', () => {
test('rolls value over to default `min` value if value exceeds `max`', () => {
const { input } = renderSegment({
segment: 'day',
onChange: onChangeHandler,
Expand All @@ -300,7 +300,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
test('rolls value over to provided `min` value if value exceeds `max`', () => {
const { input } = renderSegment({
segment: 'day',
onChange: onChangeHandler,
Expand Down Expand Up @@ -344,7 +344,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with default `max` value when the new value is less than the `min` value', () => {
test('rolls value over to default `max` value if value exceeds `min`', () => {
const { input } = renderSegment({
segment: 'day',
onChange: onChangeHandler,
Expand All @@ -371,7 +371,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
test('rolls value over to provided `max` value if value exceeds `min`', () => {
const { input } = renderSegment({
segment: 'day',
onChange: onChangeHandler,
Expand Down Expand Up @@ -421,7 +421,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with default `min` when the new value is greater than the `max` value', () => {
test('rolls value over to default `min` value if value exceeds `max`', () => {
const { input } = renderSegment({
segment: 'month',
onChange: onChangeHandler,
Expand Down Expand Up @@ -452,7 +452,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
test('rolls value over to provided `min` value if value exceeds `max`', () => {
const { input } = renderSegment({
segment: 'month',
onChange: onChangeHandler,
Expand Down Expand Up @@ -500,7 +500,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with default `max` value when the new value is less than the `min` value', () => {
test('rolls value over to default `max` value if value exceeds `min`', () => {
const { input } = renderSegment({
segment: 'month',
onChange: onChangeHandler,
Expand Down Expand Up @@ -531,7 +531,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
test('rolls value over to provided `max` value if value exceeds `min`', () => {
const { input } = renderSegment({
segment: 'month',
onChange: onChangeHandler,
Expand Down Expand Up @@ -582,7 +582,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with default `min` when the new value is greater than the `max` value', () => {
test('does _not_ rollover if value exceeds max', () => {
const { input } = renderSegment({
segment: 'year',
onChange: onChangeHandler,
Expand All @@ -592,7 +592,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
userEvent.type(input, '{arrowup}');
expect(onChangeHandler).toHaveBeenCalledWith(
expect.objectContaining({
value: formatter(defaultMin['year']),
value: formatter(defaultMax['year'] + 1),
}),
);
});
Expand All @@ -612,22 +612,6 @@ describe('packages/date-picker/shared/date-input-segment', () => {
}),
);
});

test('calls handler with provided `min` prop when the new value is greater than the `max` value', () => {
const { input } = renderSegment({
segment: 'year',
onChange: onChangeHandler,
value: formatter(defaultMax['year']),
min: 1969,
});

userEvent.type(input, '{arrowup}');
expect(onChangeHandler).toHaveBeenCalledWith(
expect.objectContaining({
value: formatter(1969),
}),
);
});
});

describe('Down arrow', () => {
Expand Down Expand Up @@ -660,7 +644,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
);
});

test('calls handler with default `max` value when the new value is less than the `min` value', () => {
test('does _not_ rollover if value exceeds min', () => {
const { input } = renderSegment({
segment: 'year',
onChange: onChangeHandler,
Expand All @@ -670,7 +654,7 @@ describe('packages/date-picker/shared/date-input-segment', () => {
userEvent.type(input, '{arrowdown}');
expect(onChangeHandler).toHaveBeenCalledWith(
expect.objectContaining({
value: formatter(defaultMax['year']),
value: formatter(defaultMin['year'] - 1),
}),
);
});
Expand All @@ -690,22 +674,6 @@ describe('packages/date-picker/shared/date-input-segment', () => {
}),
);
});

test('calls handler with provided `max` prop value when the new value is less than the `min` value', () => {
const { input } = renderSegment({
segment: 'year',
onChange: onChangeHandler,
value: formatter(defaultMin['year']),
max: 2000,
});

userEvent.type(input, '{arrowdown}');
expect(onChangeHandler).toHaveBeenCalledWith(
expect.objectContaining({
value: formatter(2000),
}),
);
});
});
});
});
Expand Down
14 changes: 8 additions & 6 deletions packages/date-picker/src/shared/components/DateInput/DateInputSegment/DateInputSegment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,16 @@ export const DateInputSegment = React.forwardRef<

e.preventDefault();
const valueDiff = key === keyMap.ArrowUp ? 1 : -1;
const defaultVal = key === keyMap.ArrowUp ? min : max;

const currentValue: number = value
? Number(value)
: key === keyMap.ArrowUp
? max
: min;
const incrementedValue: number = value
? Number(value) + valueDiff
: defaultVal;

const newValue = rollover(currentValue + valueDiff, min, max);
const newValue =
segment === 'year'
? incrementedValue
: rollover(incrementedValue, min, max);
const valueString = formatter(newValue);

onChange({
Expand Down

0 comments on commit 848a631

Please sign in to comment.