Package Exports

redux-date-range-picker-utils

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-date-range-picker-utils) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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;