redux-date-range-picker-utils

Builders for redux actions, action-types and reducers for date-range-picker. All developer need – is to create a component

Installation

npm install --save redux-date-range-picker-utils

Examples

Action-types

import { createActionTypes } from 'redux-date-range-picker-utils';
const DATE_PICKER = createActionTypes('MY_DATE_PICKER');
// =>
// {
//   DATE_PICKER_TOGGLE_DROPDOWN: 'MY_DATE_PICKER_DATE_PICKER_TOGGLE_DROPDOWN',
//   DATE_PICKER_OPEN_DROPDOWN: 'MY_DATE_PICKER_DATE_PICKER_OPEN_DROPDOWN',
//   DATE_PICKER_CLOSE_DROPDOWN: 'MY_DATE_PICKER_DATE_PICKER_CLOSE_DROPDOWN',
//   DATE_PICKER_SHIFT_CURRENT_MONTH: 'MY_DATE_PICKER_DATE_PICKER_SHIFT_CURRENT_MONTH',
//   DATE_PICKER_SELECT_DATE: 'MY_DATE_PICKER_DATE_PICKER_SELECT_DATE',
// }
export { DATE_PICKER };

Actions

import { createActions } from 'redux-date-range-picker-utils';
import { DATE_PICKER } from './action-types';
const actions = createActions(DATE_PICKER, { prefix: 'myCustomPrefix' } /* optional */);
// =>
//{
//  myCustomPrefixToggleDropdown, or toggleDropdown
//  myCustomPrefixOpenDropdown, or openDropdown
//  myCustomPrefixCloseDropdown, or closeDropdown
//  myCustomPrefixShiftCurrentMonth, or shiftCurrentMonth
//  myCustomPrefixSelectDate or selectDate
//}
export default actions;

Reducer

import { createReducer } from 'redux-date-range-picker-utils';
import { DATE_PICKER, CUSTOM_ACTION_TYPE } from './action-types';
const reducer = createReducer(DATE_PICKER, { 
	[CUSTOM_ACTION_TYPE]: customHandler /* optional */
	[DATE_PICKER.TOGGLE_DROPDOWN]: customToggleDropdownHandler /* optional (overrides default one) */
});
export default reducer;

State methods

get('prop'); // Get prop => prop value
set({ propName: 'propValue' }); // BatchUpdate props with object => current chainable interface
toggle(); // Toggle dropdown => current chainable interface
open(); // Open dropdown => current chainable interface
close(); // Close dropdown => current chainable interface
shiftCurrentMonth(shiftSize); // Shift current month by +-shiftSize (year will change also) => current chainable interface
selectDate(date); // Date, moment or string. Select a date => current chainable interface

State props

{
	// Actual selected date
	from: 'YYYY-MM-DD', // or null
	to: 'YYYY-MM-DD', // or null
	// Clicked, but not selected yet
	selectedFrom: 'YYYY-MM-DD', // or null
	selectedTo: 'YYYY-MM-DD', // or null
	isDropdownOpen: Boolean,
	currentMonth: +'M', // Index of current month
	currentYear: +'YYYY' // Current year
}

Component

import actions from './actions';
import Component from './component';
// ... Somewhere in high level component that connects to store .render() method 
	<Component {...actions} {...state.path.to.state} />

import InputBlock from './input-block';
import Calendar from './calendar';
function Component (props) {
	return (
		<InputBlock onClick={() => props.myCustomPrefixToggleDropdown()}/>
		<Calendar
			isVisible={props.get('isDropdownOpen')}
			currentMonth={props.get('currentMonth')}
			onDateClick={(date) => props.myCustomPrefixSelectDate(date)}
		/>
	);
}
export default Component;