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

Reduce impact on DOM render #732

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Reduce impact on DOM render #732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
42 changes: 23 additions & 19 deletions src/datetime/DateTime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default class Datetime extends React.Component {
onCalendarClose: nofn,
onChange: nofn,
onNavigate: nofn,
onBeforeNavigate: function(next) { return next; },
onBeforeNavigate: function(next) { return next; },
onNavigateBack: nofn,
onNavigateForward: nofn,
dateFormat: true,
Expand Down Expand Up @@ -108,7 +108,7 @@ export default class Datetime extends React.Component {
onKeyDown: this._onInputKeyDown
};

if ( this.props.renderInput ) {
if ( this.props.renderInput ) {
return (
<div>
{ this.props.renderInput( finalInputProps, this._openCalendar, this._closeCalendar ) }
Expand All @@ -122,6 +122,10 @@ export default class Datetime extends React.Component {
}

renderView( currentView, renderer ) {
// Don't to DOM if datepicker shouldn't be visible
if (!this.isOpen()) {
return null;
}
if ( this.props.renderView ) {
return this.props.renderView( currentView, () => renderer(currentView) );
}
Expand Down Expand Up @@ -150,18 +154,18 @@ export default class Datetime extends React.Component {
// { viewDate, selectedDate, renderYear, isValidDate, navigate, showView, updateDate }
viewProps.renderYear = props.renderYear;
return <YearsView {...viewProps } />;

case viewModes.MONTHS:
// { viewDate, selectedDate, renderMonth, isValidDate, navigate, showView, updateDate }
viewProps.renderMonth = props.renderMonth;
return <MonthsView {...viewProps} />;

case viewModes.DAYS:
// { viewDate, selectedDate, renderDay, isValidDate, navigate, showView, updateDate, timeFormat
// { viewDate, selectedDate, renderDay, isValidDate, navigate, showView, updateDate, timeFormat
viewProps.renderDay = props.renderDay;
viewProps.timeFormat = this.getFormat('time');
return <DaysView {...viewProps} />;

default:
// { viewDate, selectedDate, timeFormat, dateFormat, timeConstraints, setTime, showView }
viewProps.dateFormat = this.getFormat('date');
Expand All @@ -187,7 +191,7 @@ export default class Datetime extends React.Component {
inputValue: this.getInitialInputValue( props, selectedDate, inputFormat )
};
}

getInitialViewDate( propDate, selectedDate, format ) {
let viewDate;
if ( propDate ) {
Expand Down Expand Up @@ -251,7 +255,7 @@ export default class Datetime extends React.Component {

return cn;
}

isOpen() {
return !this.props.input || (this.props.open === undefined ? this.state.open : this.props.open);
}
Expand Down Expand Up @@ -303,7 +307,7 @@ export default class Datetime extends React.Component {
else if ( type === 'time' ) {
return this.getTimeFormat( this.getLocaleData() );
}

let locale = this.getLocaleData();
let dateFormat = this.getDateFormat( locale );
let timeFormat = this.getTimeFormat( locale );
Expand Down Expand Up @@ -368,7 +372,7 @@ export default class Datetime extends React.Component {

_viewNavigate = ( modifier, unit ) => {
let viewDate = this.state.viewDate.clone();

// Subtracting is just adding negative time
viewDate.add( modifier, unit );

Expand All @@ -381,11 +385,11 @@ export default class Datetime extends React.Component {

this.setState({viewDate});
}

_setTime = ( type, value ) => {
const state = this.state;
let date = (state.selectedDate || state.viewDate).clone();

date[ type ]( value );

if ( !this.props.value ) {
Expand Down Expand Up @@ -489,7 +493,7 @@ export default class Datetime extends React.Component {
if ( selectedDate && selectedDate.isValid() ) {
update.inputValue = selectedDate.format( this.getFormat('datetime') );
}

this.setState( update );
}

Expand All @@ -502,16 +506,16 @@ export default class Datetime extends React.Component {
getInitialInputValue( props, selectedDate, inputFormat ) {
if ( props.inputProps.value )
return props.inputProps.value;

if ( selectedDate && selectedDate.isValid() )
return selectedDate.format( inputFormat );

if ( props.value && typeof props.value === 'string' )
return props.value;

if ( props.initialValue && typeof props.initialValue === 'string' )
return props.initialValue;

return '';
}

Expand All @@ -533,7 +537,7 @@ export default class Datetime extends React.Component {
};

if ( !date ) return logError();

let viewDate;
if ( typeof date === 'string' ) {
viewDate = this.localMoment(date, this.getFormat('datetime') );
Expand All @@ -548,7 +552,7 @@ export default class Datetime extends React.Component {

/**
* Set the view currently shown by the calendar. View modes shipped with react-datetime are 'years', 'months', 'days' and 'time'.
* @param TYPES.string mode
* @param TYPES.string mode
*/
navigate( mode ) {
this._showView( mode );
Expand Down
46 changes: 23 additions & 23 deletions test/__snapshots__/snapshots.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`className: set to arbitraty value 1`] = `
<div
className="rdt arbitrary-value"
className="rdt arbitrary-value rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -495,7 +495,7 @@ exports[`className: set to arbitraty value 1`] = `

exports[`dateFormat set to false 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -598,7 +598,7 @@ exports[`dateFormat set to false 1`] = `

exports[`dateFormat set to true 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -1091,7 +1091,7 @@ exports[`dateFormat set to true 1`] = `

exports[`defaultValue: set to arbitrary value 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -1584,7 +1584,7 @@ exports[`defaultValue: set to arbitrary value 1`] = `

exports[`everything default: renders correctly 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -2562,7 +2562,7 @@ exports[`input input: set to false 1`] = `

exports[`input input: set to true 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -3055,7 +3055,7 @@ exports[`input input: set to true 1`] = `

exports[`inputProps with className specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="arbitrary-className"
Expand Down Expand Up @@ -3548,7 +3548,7 @@ exports[`inputProps with className specified 1`] = `

exports[`inputProps with disabled specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -4042,7 +4042,7 @@ exports[`inputProps with disabled specified 1`] = `

exports[`inputProps with name specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -4536,7 +4536,7 @@ exports[`inputProps with name specified 1`] = `

exports[`inputProps with placeholder specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -5030,7 +5030,7 @@ exports[`inputProps with placeholder specified 1`] = `

exports[`inputProps with required specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -5524,7 +5524,7 @@ exports[`inputProps with required specified 1`] = `

exports[`isValidDate: only valid if after yesterday 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -5992,7 +5992,7 @@ exports[`isValidDate: only valid if after yesterday 1`] = `

exports[`open set to false 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -6978,7 +6978,7 @@ exports[`open set to true 1`] = `

exports[`renderDay: specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -7471,7 +7471,7 @@ exports[`renderDay: specified 1`] = `

exports[`renderMonth: specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -7964,7 +7964,7 @@ exports[`renderMonth: specified 1`] = `

exports[`renderYear: specified 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -8457,7 +8457,7 @@ exports[`renderYear: specified 1`] = `

exports[`timeFormat set to false 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -8939,7 +8939,7 @@ exports[`timeFormat set to false 1`] = `

exports[`timeFormat set to true 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -9432,7 +9432,7 @@ exports[`timeFormat set to true 1`] = `

exports[`value: set to arbitrary value 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -9925,7 +9925,7 @@ exports[`value: set to arbitrary value 1`] = `

exports[`viewMode set to days 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -10418,7 +10418,7 @@ exports[`viewMode set to days 1`] = `

exports[`viewMode set to months 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -10911,7 +10911,7 @@ exports[`viewMode set to months 1`] = `

exports[`viewMode set to time 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down Expand Up @@ -11404,7 +11404,7 @@ exports[`viewMode set to time 1`] = `

exports[`viewMode set to years 1`] = `
<div
className="rdt"
className="rdt rdtOpen"
>
<input
className="form-control"
Expand Down
Loading