Skip to content

Commit a3e76fe

Browse files
nkinsernkinser
committed
changes for single date picker
1 parent 0718c79 commit a3e76fe

9 files changed

+155
-54
lines changed

‎src/components/DayPicker.jsx‎

Lines changed: 29 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -679,6 +679,29 @@ class DayPicker extends React.PureComponent {
679679
this.transitionContainer = ref;
680680
}
681681

682+
getNextScrollableMonths(e) {
683+
const { onGetNextScrollableMonths } = this.props;
684+
if (e) e.preventDefault();
685+
686+
if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
687+
688+
this.setState(({ scrollableMonthMultiple }) => ({
689+
scrollableMonthMultiple: scrollableMonthMultiple + 1,
690+
}));
691+
}
692+
693+
getPrevScrollableMonths(e) {
694+
const { numberOfMonths, onGetPrevScrollableMonths } = this.props;
695+
if (e) e.preventDefault();
696+
697+
if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
698+
699+
this.setState(({ currentMonth, scrollableMonthMultiple }) => ({
700+
currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
701+
scrollableMonthMultiple: scrollableMonthMultiple + 1,
702+
}));
703+
}
704+
682705
maybeTransitionNextMonth(newFocusedDate) {
683706
const { numberOfMonths } = this.props;
684707
const { currentMonth, focusedDate } = this.state;
@@ -709,29 +732,6 @@ class DayPicker extends React.PureComponent {
709732
return false;
710733
}
711734

712-
getNextScrollableMonths(e) {
713-
const { onGetNextScrollableMonths } = this.props;
714-
if (e) e.preventDefault();
715-
716-
if (onGetNextScrollableMonths) onGetNextScrollableMonths(e);
717-
718-
this.setState(({ scrollableMonthMultiple }) => ({
719-
scrollableMonthMultiple: scrollableMonthMultiple + 1,
720-
}));
721-
}
722-
723-
getPrevScrollableMonths(e) {
724-
const { numberOfMonths, onGetPrevScrollableMonths } = this.props;
725-
if (e) e.preventDefault();
726-
727-
if (onGetPrevScrollableMonths) onGetPrevScrollableMonths(e);
728-
729-
this.setState(({ currentMonth, scrollableMonthMultiple }) => ({
730-
currentMonth: currentMonth.clone().subtract(numberOfMonths, 'month'),
731-
scrollableMonthMultiple: scrollableMonthMultiple + 1,
732-
}));
733-
}
734-
735735
isHorizontal() {
736736
const { orientation } = this.props;
737737
return orientation === HORIZONTAL_ORIENTATION;
@@ -879,15 +879,13 @@ class DayPicker extends React.PureComponent {
879879
return null;
880880
}
881881

882-
const onPrevMonthClick =
883-
orientation === VERTICAL_SCROLLABLE
884-
? this.getPrevScrollableMonths
885-
: this.onPrevMonthClick;
882+
const onPrevMonthClick = orientation === VERTICAL_SCROLLABLE
883+
? this.getPrevScrollableMonths
884+
: this.onPrevMonthClick;
886885

887-
const onNextMonthClick =
888-
orientation === VERTICAL_SCROLLABLE
889-
? this.getNextScrollableMonths
890-
: this.onNextMonthClick;
886+
const onNextMonthClick = orientation === VERTICAL_SCROLLABLE
887+
? this.getNextScrollableMonths
888+
: this.onNextMonthClick;
891889

892890
return (
893891
<DayPickerNavigation

‎src/components/DayPickerNavigation.jsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,7 @@ function DayPickerNavigation({
133133
);
134134
}
135135

136-
const isDefaultNav = isVerticalScrollable
137-
? isDefaultNavNext
138-
: (isDefaultNavNext || isDefaultNavPrev);
136+
const isDefaultNav = isDefaultNavNext || isDefaultNavPrev;
139137

140138
return (
141139
<div
@@ -157,8 +155,8 @@ function DayPickerNavigation({
157155
hasInlineStyles && inlineStyles,
158156
)}
159157
>
160-
{showNavPrevButton &&
161-
(renderNavPrevButton ? (
158+
{showNavPrevButton
159+
&& (renderNavPrevButton ? (
162160
renderNavPrevButton({
163161
ariaLabel: phrases.jumpToPrevMonth,
164162
disabled: disablePrev,
@@ -195,7 +193,8 @@ function DayPickerNavigation({
195193
...(isDefaultNavPrev ? [
196194
styles.DayPickerNavigation_button__verticalDefault,
197195
styles.DayPickerNavigation_prevButton__verticalDefault,
198-
isVerticalScrollable && styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
196+
isVerticalScrollable
197+
&& styles.DayPickerNavigation_prevButton__verticalScrollableDefault,
199198
] : []),
200199
] : []),
201200
)}
@@ -216,25 +215,25 @@ function DayPickerNavigation({
216215
</div>
217216
))}
218217

219-
{showNavNextButton &&
220-
(renderNavNextButton ? (
218+
{showNavNextButton
219+
&& (renderNavNextButton ? (
221220
renderNavNextButton({
222221
ariaLabel: phrases.jumpToNextMonth,
223222
disabled: disableNext,
224223
onClick: disableNext ? undefined : onNextMonthClick,
225224
onKeyUp: disableNext ? undefined : (e) => {
226225
const { key } = e;
227226
if (key === 'Enter' || key === ' ') {
228-
onNextMonthClick(e)
229-
};
227+
onNextMonthClick(e);
228+
}
230229
},
231230
onMouseUp: disableNext ? undefined : (e) => {
232231
e.currentTarget.blur();
233232
},
234233
})
235234
) : (
236235
<div // eslint-disable-line jsx-a11y/interactive-supports-focus
237-
role='button'
236+
role="button"
238237
{...navNextTabIndex}
239238
{...css(
240239
styles.DayPickerNavigation_button,
@@ -254,15 +253,15 @@ function DayPickerNavigation({
254253
...(isDefaultNavNext ? [
255254
styles.DayPickerNavigation_button__verticalDefault,
256255
styles.DayPickerNavigation_nextButton__verticalDefault,
257-
isVerticalScrollable &&
258-
styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
256+
isVerticalScrollable
257+
&& styles.DayPickerNavigation_nextButton__verticalScrollableDefault,
259258
] : []),
260259
] : []),
261260
)}
262261
aria-disabled={disableNext ? true : undefined}
263262
aria-label={phrases.jumpToNextMonth}
264263
onClick={disableNext ? undefined : onNextMonthClick}
265-
onKeyUp={ disableNext ? undefined : (e) => {
264+
onKeyUp={disableNext ? undefined : (e) => {
266265
const { key } = e;
267266
if (key === 'Enter' || key === ' ') {
268267
onNextMonthClick(e);

‎src/components/DayPickerRangeController.jsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1011,7 +1011,9 @@ export default class DayPickerRangeController extends React.PureComponent {
10111011
const { currentMonth, visibleDays } = this.state;
10121012

10131013
const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
1014-
const newVisibleDays = getVisibleDays(firstPreviousMonth, numberOfMonths, enableOutsideDays, true);
1014+
const newVisibleDays = getVisibleDays(
1015+
firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
1016+
);
10151017

10161018
this.setState({
10171019
currentMonth: firstPreviousMonth.clone(),

‎src/components/DayPickerSingleDateController.jsx‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
194194
this.onNextMonthClick = this.onNextMonthClick.bind(this);
195195
this.onMonthChange = this.onMonthChange.bind(this);
196196
this.onYearChange = this.onYearChange.bind(this);
197-
this.onMultiplyScrollableMonths = this.onMultiplyScrollableMonths.bind(this);
197+
this.onGetNextScrollableMonths = this.onGetNextScrollableMonths.bind(this);
198+
this.onGetPrevScrollableMonths = this.onGetPrevScrollableMonths.bind(this);
198199
this.getFirstFocusableDay = this.getFirstFocusableDay.bind(this);
199200
}
200201

@@ -461,7 +462,7 @@ export default class DayPickerSingleDateController extends React.PureComponent {
461462
});
462463
}
463464

464-
onMultiplyScrollableMonths() {
465+
onGetNextScrollableMonths() {
465466
const { numberOfMonths, enableOutsideDays } = this.props;
466467
const { currentMonth, visibleDays } = this.state;
467468

@@ -477,6 +478,24 @@ export default class DayPickerSingleDateController extends React.PureComponent {
477478
});
478479
}
479480

481+
onGetPrevScrollableMonths() {
482+
const { numberOfMonths, enableOutsideDays } = this.props;
483+
const { currentMonth, visibleDays } = this.state;
484+
485+
const firstPreviousMonth = currentMonth.clone().subtract(numberOfMonths, 'month');
486+
const newVisibleDays = getVisibleDays(
487+
firstPreviousMonth, numberOfMonths, enableOutsideDays, true,
488+
);
489+
490+
this.setState({
491+
currentMonth: firstPreviousMonth.clone(),
492+
visibleDays: {
493+
...visibleDays,
494+
...this.getModifiers(newVisibleDays),
495+
},
496+
});
497+
}
498+
480499
getFirstFocusableDay(newMonth) {
481500
const { date, numberOfMonths } = this.props;
482501

@@ -632,7 +651,8 @@ export default class DayPickerSingleDateController extends React.PureComponent {
632651
onNextMonthClick={this.onNextMonthClick}
633652
onMonthChange={this.onMonthChange}
634653
onYearChange={this.onYearChange}
635-
onMultiplyScrollableMonths={this.onMultiplyScrollableMonths}
654+
onGetNextScrollableMonths={this.onGetNextScrollableMonths}
655+
onGetPrevScrollableMonths={this.onGetPrevScrollableMonths}
636656
monthFormat={monthFormat}
637657
withPortal={withPortal}
638658
hidden={!focused}

‎stories/DayPickerRangeController.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,23 @@ storiesOf('DayPickerRangeController', module)
442442
</span>
443443
</div>
444444
)}
445+
navPrev={(
446+
<div style={{ position: 'relative' }}>
447+
<span
448+
style={{
449+
position: 'absolute',
450+
top: 20,
451+
left: 50,
452+
fontSize: 24,
453+
border: '1px solid gray',
454+
width: 200,
455+
padding: 10,
456+
}}
457+
>
458+
Show More Months
459+
</span>
460+
</div>
461+
)}
445462
/>
446463
</div>
447464
)))

‎stories/DayPickerSingleDateController.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import isSameDay from '../src/utils/isSameDay';
1010
import isInclusivelyAfterDay from '../src/utils/isInclusivelyAfterDay';
1111
import CustomizableCalendarDay, { defaultStyles, selectedStyles } from '../src/components/CustomizableCalendarDay';
1212

13-
import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION } from '../src/constants';
13+
import { NAV_POSITION_BOTTOM, VERTICAL_ORIENTATION, VERTICAL_SCROLLABLE } from '../src/constants';
1414

1515
import DayPickerSingleDateControllerWrapper from '../examples/DayPickerSingleDateControllerWrapper';
1616

@@ -220,6 +220,15 @@ storiesOf('DayPickerSingleDateController', module)
220220
orientation={VERTICAL_ORIENTATION}
221221
/>
222222
)))
223+
.add('verticalScrollable', withInfo()(() => (
224+
<DayPickerSingleDateControllerWrapper
225+
numberOfMonths={3}
226+
onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}
227+
onPrevMonthClick={action('DayPickerSingleDateController::onPrevMonthClick')}
228+
onNextMonthClick={action('DayPickerSingleDateController::onNextMonthClick')}
229+
orientation={VERTICAL_SCROLLABLE}
230+
/>
231+
)))
223232
.add('with custom month navigation icons', withInfo()(() => (
224233
<DayPickerSingleDateControllerWrapper
225234
onOutsideClick={action('DayPickerSingleDateController::onOutsideClick')}

‎test/components/DayPickerNavigation_spec.jsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,8 @@ describe('DayPickerNavigation', () => {
134134
expect(onPrevMonthStub).to.have.property('callCount', 1);
135135
prevMonthButton.simulate('keyup', { key: ' ' });
136136
expect(onPrevMonthStub).to.have.property('callCount', 2);
137+
prevMonthButton.simulate('keyup', { key: 'k' });
138+
expect(onPrevMonthStub).to.have.property('callCount', 2);
137139
});
138140

139141
it('props.onNextMonthClick is triggered by next month button key up', () => {
@@ -145,6 +147,8 @@ describe('DayPickerNavigation', () => {
145147
expect(onNextMonthStub).to.have.property('callCount', 1);
146148
nextMonthButton.simulate('keyup', { key: ' ' });
147149
expect(onNextMonthStub).to.have.property('callCount', 2);
150+
nextMonthButton.simulate('keyup', { key: 'k' });
151+
expect(onNextMonthStub).to.have.property('callCount', 2);
148152
});
149153

150154
it('props.onPrevMonthClick is triggered by custom prev month button click', () => {
@@ -192,5 +196,35 @@ describe('DayPickerNavigation', () => {
192196
nextMonthButton.simulate('click');
193197
expect(onNextMonthStub).to.have.property('callCount', 0);
194198
});
199+
200+
it('props.onPrevMonthClick is triggered by custom prev month button key up', () => {
201+
const onPrevMonthStub = sinon.stub();
202+
const renderNavPrevButtonStub = sinon.stub().onCall(0).callsFake(({ onKeyUp }) => <button onKeyUp={onKeyUp} type="button">Prev</button>);
203+
const prevMonthButton = shallow(<DayPickerNavigation
204+
onPrevMonthClick={onPrevMonthStub}
205+
renderNavPrevButton={renderNavPrevButtonStub}
206+
/>).dive().find('button').at(0);
207+
prevMonthButton.simulate('keyup', { key: 'Enter' });
208+
expect(onPrevMonthStub).to.have.property('callCount', 1);
209+
prevMonthButton.simulate('keyup', { key: ' ' });
210+
expect(onPrevMonthStub).to.have.property('callCount', 2);
211+
prevMonthButton.simulate('keyup', { key: 'k' });
212+
expect(onPrevMonthStub).to.have.property('callCount', 2);
213+
});
214+
215+
it('props.onNextMonthClick is triggered by custom next month button key up', () => {
216+
const onNextMonthStub = sinon.stub();
217+
const renderNavNextButtonStub = sinon.stub().onCall(0).callsFake(({ onKeyUp }) => <button onKeyUp={onKeyUp} type="button">Next</button>);
218+
const nextMonthButton = shallow(<DayPickerNavigation
219+
onNextMonthClick={onNextMonthStub}
220+
renderNavNextButton={renderNavNextButtonStub}
221+
/>).dive().find('button').at(0);
222+
nextMonthButton.simulate('keyup', { key: 'Enter' });
223+
expect(onNextMonthStub).to.have.property('callCount', 1);
224+
nextMonthButton.simulate('keyup', { key: ' ' });
225+
expect(onNextMonthStub).to.have.property('callCount', 2);
226+
nextMonthButton.simulate('keyup', { key: 'k' });
227+
expect(onNextMonthStub).to.have.property('callCount', 2);
228+
});
195229
});
196230
});

‎test/components/DayPickerSingleDateController_spec.jsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1178,7 +1178,7 @@ describe('DayPickerSingleDateController', () => {
11781178
expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
11791179
});
11801180

1181-
it('return value now has modifier arg for day after multiplying number of months', () => {
1181+
it('return value now has modifier arg for day after getting next scrollable months', () => {
11821182
const modifierToAdd = 'foo';
11831183
const numberOfMonths = 2;
11841184
const nextMonth = today.clone().add(numberOfMonths, 'month');
@@ -1197,10 +1197,34 @@ describe('DayPickerSingleDateController', () => {
11971197
)).instance();
11981198
let modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
11991199
expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.not.contain(modifierToAdd);
1200-
wrapper.onMultiplyScrollableMonths();
1200+
wrapper.onGetNextScrollableMonths();
12011201
modifiers = wrapper.addModifier(updatedDays, nextMonth, modifierToAdd);
12021202
expect(Array.from(modifiers[nextMonthISO][nextMonthDayISO])).to.contain(modifierToAdd);
12031203
});
1204+
1205+
it('return value now has modifier arg for day after getting previous scrollable months', () => {
1206+
const modifierToAdd = 'foo';
1207+
const numberOfMonths = 2;
1208+
const pastDateAfterMultiply = today.clone().subtract(numberOfMonths, 'months');
1209+
const monthISO = toISOMonthString(pastDateAfterMultiply);
1210+
const dayISO = toISODateString(pastDateAfterMultiply);
1211+
const updatedDays = {
1212+
[monthISO]: { [dayISO]: new Set(['bar', 'baz']) },
1213+
};
1214+
const wrapper = shallow((
1215+
<DayPickerSingleDateController
1216+
onDatesChange={sinon.stub()}
1217+
onFocusChange={sinon.stub()}
1218+
numberOfMonths={numberOfMonths}
1219+
orientation={VERTICAL_SCROLLABLE}
1220+
/>
1221+
)).instance();
1222+
let modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
1223+
expect(Array.from(modifiers[monthISO][dayISO])).to.not.contain(modifierToAdd);
1224+
wrapper.onGetPrevScrollableMonths();
1225+
modifiers = wrapper.addModifier(updatedDays, pastDateAfterMultiply, modifierToAdd);
1226+
expect(Array.from(modifiers[monthISO][dayISO])).to.contain(modifierToAdd);
1227+
});
12041228
});
12051229

12061230
describe('#deleteModifier', () => {

‎test/components/DayPicker_spec.jsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,6 @@ describe('DayPicker', () => {
224224
).dive();
225225
expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
226226
const nav = wrapper.find(DayPickerNavigation).get(1);
227-
console.log(nav);
228227
expect(nav.props.onNextMonthClick).to.equal(wrapper.instance().getNextScrollableMonths);
229228
});
230229

@@ -235,7 +234,6 @@ describe('DayPicker', () => {
235234
).dive();
236235
expect(wrapper.find(DayPickerNavigation)).to.have.length(2);
237236
const nav = wrapper.find(DayPickerNavigation).get(0);
238-
console.log(nav);
239237
expect(nav.props.onPrevMonthClick).to.equal(wrapper.instance().getPrevScrollableMonths);
240238
});
241239
});

0 commit comments

Comments
 (0)