Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gt - Update DateInput #265

Merged
merged 4 commits into from
Jul 19, 2017
Merged

gt - Update DateInput #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d2ad2dd
gt - Update DateInput
gthomas-appfolio Jul 14, 2017
d0c7f6d
pl - add test for Calendar component (controlled visible dates)
Jul 17, 2017
a0e0b90
pl - add test for DateInput (controlled visible dates)
Jul 17, 2017
261a5e0
pl - delete dateVisible from props when pass it to Table component
Jul 19, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions src/components/Calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,10 @@ import style from './Calendar.scss';
const Day = ({ day, dateFormat, ...props }) => {
const classNames = classnames(
'text-center',
{ 'bg-primary text-white': day.selected },
{ 'text-muted': !day.sameMonth },
{ 'bg-faded text-muted': !day.sameMonth }, // Lighten days in months before & after
{ 'bg-primary text-white': day.selected }, // Highlight selected date
{ 'text-primary font-weight-bold': !day.selected && isToday(day.date) }, // Highlight today's date
{ invisible: !day.visible }, // If date is (optionally) filtered out
style.date
);
return (
Expand All @@ -40,6 +42,7 @@ class Calendar extends Component {
className: React.PropTypes.string,
date: React.PropTypes.instanceOf(Date),
dateFormat: React.PropTypes.string,
dateVisible: React.PropTypes.func,
onSelect: React.PropTypes.func,
weekDayFormat: React.PropTypes.string
};
Expand All @@ -48,6 +51,7 @@ class Calendar extends Component {
className: '',
date: new Date(),
dateFormat: 'D',
dateVisible: () => true,
weekDayFormat: 'dd',
onSelect: () => {}
};
Expand All @@ -63,6 +67,7 @@ class Calendar extends Component {
return {
selected: isSameDay(currentDate, date),
date: startOfDay(date),
visible: this.props.dateVisible(date),
past: isPast(date),
today: isToday(date),
sameMonth: isSameMonth(currentDate, date),
Expand All @@ -84,6 +89,7 @@ class Calendar extends Component {
render() {
const { date, dateFormat, onSelect, weekDayFormat, ...props } = this.props;
const weeks = this.visibleWeeks(date);
delete props.dateVisible; // Table doesn't need dateVisible

return (
<Table
Expand All @@ -100,7 +106,7 @@ class Calendar extends Component {
<tbody>
{weeks.map((days, w) => (
<tr key={w}>
{days.map((day, d) => <Day day={day} dateFormat={dateFormat} key={d} onClick={() => onSelect(day.date)} />)}
{days.map((day, d) => <Day day={day} dateFormat={dateFormat} key={d} onClick={() => day.visible && onSelect(day.date)} />)}
</tr>
))}
</tbody>
Expand Down
77 changes: 43 additions & 34 deletions src/components/DateInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,25 +49,29 @@ export default class DateInput extends Component {

static propTypes = {
className: React.PropTypes.string,
dateVisible: React.PropTypes.func,
dateFormat: React.PropTypes.string,
defaultValue: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object
]),
value: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object
]),
disabled: React.PropTypes.bool,
header: React.PropTypes.node,
footer: React.PropTypes.node,
keyboard: React.PropTypes.bool,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func,
showOnFocus: React.PropTypes.bool,
disabled: React.PropTypes.bool,
value: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.object
])
// TODO allow custom header/footer, header & day format?
}

static defaultProps = {
className: '',
dateVisible: () => true,
dateFormat: 'M/D/YYYY',
keyboard: true,
onBlur: () => {},
Expand Down Expand Up @@ -175,7 +179,7 @@ export default class DateInput extends Component {
toggle = () => (this.state.open ? this.close() : this.show());

render() {
const { className, disabled, onBlur, showOnFocus } = this.props;
const { className, dateVisible, disabled, footer, header, onBlur, showOnFocus } = this.props;
const { open } = this.state;
const value = this.getCurrentValue();
const date = this.getCurrentDate();
Expand Down Expand Up @@ -207,41 +211,46 @@ export default class DateInput extends Component {
onKeyDown={this.onKeyDown}
style={{ minWidth: '19rem' }}
>
<header className="d-flex py-2">
<ButtonGroup size="sm">
<Button ref="prevYear" color="link" onClick={() => this.prevYear()}>
<Icon name="angle-double-left" fixedWidth />
</Button>
<Button ref="prevMonth" color="link" onClick={() => this.prevMonth()}>
<Icon name="angle-left" fixedWidth />
</Button>
</ButtonGroup>

<span className="m-auto">
{format(date, 'MMMM YYYY')}
</span>

<ButtonGroup size="sm">
<Button ref="nextMonth" color="link" onClick={() => this.nextMonth()}>
<Icon name="angle-right" fixedWidth />
</Button>
<Button ref="nextYear" color="link" onClick={() => this.nextYear()}>
<Icon name="angle-double-right" fixedWidth />
</Button>
</ButtonGroup>
</header>
{header || (
<header className="d-flex py-2">
<ButtonGroup size="sm">
<Button ref="prevYear" color="link" onClick={() => this.prevYear()}>
<Icon name="angle-double-left" fixedWidth />
</Button>
<Button ref="prevMonth" color="link" onClick={() => this.prevMonth()}>
<Icon name="angle-left" fixedWidth />
</Button>
</ButtonGroup>

<span className="m-auto">
{format(date, 'MMMM YYYY')}
</span>

<ButtonGroup size="sm">
<Button ref="nextMonth" color="link" onClick={() => this.nextMonth()}>
<Icon name="angle-right" fixedWidth />
</Button>
<Button ref="nextYear" color="link" onClick={() => this.nextYear()}>
<Icon name="angle-double-right" fixedWidth />
</Button>
</ButtonGroup>
</header>
)}

<Calendar
date={date}
dateVisible={dateVisible}
onSelect={this.onSelect}
className="m-0"
/>

<footer className="text-center pb-2 pt-1">
<div>
<Button ref="today" onClick={this.today} className="mr-2">Today</Button>
</div>
</footer>
{footer || (
<footer className="text-center pb-2 pt-1">
<div>
<Button ref="today" onClick={this.today} className="mr-2">Today</Button>
</div>
</footer>
)}
</DropdownMenu>
</Dropdown>
</div>);
Expand Down
17 changes: 16 additions & 1 deletion stories/DateInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Calendar, DateInput, FormRow } from '../src';
import { Calendar, DateInput, Icon, FormRow } from '../src';
import { action, storiesOf } from '@storybook/react';
import { boolean, text } from '@storybook/addon-knobs';

Expand Down Expand Up @@ -41,6 +41,21 @@ storiesOf('DateInput', module)
<FormRow type={DateInput} onChange={action('onChange')} label="'Garbage in'" value="Garbage in" />
</div>
))
.addWithInfo('Custom header and footer', () => (
<div className="d-inline-flex">
<DateInput
header={<h2 className="text-center text-danger p-2 font-italic">PIRELLI</h2>}
footer={(
<div className="d-flex justify-content-around p-3">
<Icon name="flag-checkered" />
<Icon name="flag-checkered" />
<Icon name="flag-checkered" />
<Icon name="flag-checkered" />
<Icon name="flag-checkered" />
</div>)}
/>
</div>
))
.addWithInfo('Calendar', () => (
<div className="d-inline-flex">
<Calendar
Expand Down
24 changes: 24 additions & 0 deletions test/components/Calendar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,4 +45,28 @@ describe('<Calendar />', () => {
firstDate.simulate('click');
assert(callback.calledWith(expectedDate));
});

it('should hide dates which are not visible based on dateVisible', () => {
const specifiedDate = new Date(2017, 7, 14);
const dateVisible = (date) => isSameDay(date, specifiedDate);
const component = mount(<Calendar date={specifiedDate} dateVisible={dateVisible} />);
component.find('Day').forEach((dayComponent) => {
if (isSameDay(dayComponent.props().day.date, specifiedDate)) {
assert.equal(dayComponent.props().day.visible, true);
} else {
assert.equal(dayComponent.props().day.visible, false);
}
});
});

it('should not call onSelect if clicking on a invisible date', () => {
const specifiedDate = new Date(2017, 7, 14);
const dateVisible = (date) => isSameDay(date, specifiedDate);
const callback = sinon.spy();
const component = mount(<Calendar date={specifiedDate} dateVisible={dateVisible} onSelect={callback} />);
const firstDate = component.find('Day').first();
assert.equal(firstDate.props().day.visible, false);
firstDate.simulate('click');
assert(callback.notCalled);
});
});
39 changes: 39 additions & 0 deletions test/components/DateInput.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,4 +231,43 @@ describe('<DateInput />', () => {
assert(isSameDay(component.instance().getCurrentDate(), expectedDate));
});
});

context('date picker with controlled visible dates', () => {
const callback = sinon.spy();
const defaultDate = new Date(2017, 7, 14);
const dateVisible = (date) => isSameDay(date, defaultDate);
const component = mount(<DateInput defaultValue={defaultDate} onChange={callback} dateVisible={dateVisible} showOnFocus />);
const toggle = component.find('InputGroupButton');
toggle.simulate('click');

it('should pass dateVisible func to Calendar component', () => {
const calendar = component.find('Calendar');
assert.equal(calendar.props().dateVisible, dateVisible);
});

it('should not allow to pick invisible date', () => {
callback.reset();
const currentDate = component.instance().getCurrentDate();
const firstDate = component.find('Day').first();
assert.equal(isSameDay(currentDate, firstDate.props().day.date), false);

firstDate.simulate('click');
assert(callback.notCalled);
assert(isSameDay(currentDate, component.instance().getCurrentDate()));
});
});

it('should render custom header prop', () => {
const Custom = () => (<div className='custom-header'>Custom Header</div>);
const component = mount(<DateInput header={<Custom />} />);
assert.equal(component.find('div.custom-header').length, 1);
assert.equal(component.find('header.py-2').length, 0);
});

it('should render custom footer prop', () => {
const Custom = () => (<div className='custom-footer'>Custom Footer</div>);
const component = mount(<DateInput footer={<Custom />} />);
assert.equal(component.find('div.custom-footer').length, 1);
assert.equal(component.find('footer.pb-2').length, 0);
});
});