react-date-field
Version:
React DateField
1,923 lines (1,445 loc) • 519 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("React"));
else if(typeof define === 'function' && define.amd)
define(["React"], factory);
else if(typeof exports === 'object')
exports["ReactDateField"] = factory(require("React"));
else
root["ReactDateField"] = factory(root["React"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict';
var React = __webpack_require__(1)
var assign = __webpack_require__(7)
var Field = __webpack_require__(9)
var DatePickerFactory = React.createFactory(__webpack_require__(10))
var toUpperFirst = __webpack_require__(2)
var toMoment = __webpack_require__(3)
var isDate = __webpack_require__(4)
var isMoment = __webpack_require__(5)
var CONFIG = __webpack_require__(6)
function emptyFn(){}
var Utils = __webpack_require__(8)
module.exports = React.createClass({
displayName: 'ReactDateField',
mixins: [
Utils
],
getInitialState: function() {
return {
defaultValue: this.props.defaultValue,
pickerVisible: this.props.defaultPickerVisible
}
},
getDefaultProps: function() {
return {
constrainTo: true,
validate: true,
calendarToolColor: '#a8a8a8',
calendarToolOverColor: '#7F7C7C',
calendarToolWidth: 12,
showPickerOnFocus: true,
dateFormat: CONFIG.dateFormat,
strict: true,
defaultPickerFactory: DatePickerFactory,
defaultPickerStyle: {
position: 'absolute',
left: 0,
top: '100%'
}
}
},
render: function(){
this.toMoment = function(value, config){
return toMoment(value, this.props.dateFormat, config || {
strict: this.props.strict
})
}
var state = this.state
var props = this.prepareProps(this.props, state)
var picker = this.renderPicker(props, state)
var hiddenField = this.renderHiddenField(props, state)
return React.createElement("div", React.__spread({}, this.prepareWrapperProps(props, state)),
hiddenField,
React.createElement(Field, React.__spread({}, props.fieldProps),
picker
)
)
},
renderPicker: function(props, state){
return this._renderPicker(props, state)
},
renderHiddenField: function(props, state) {
return props.hiddenName?
React.createElement("input", {type: "hidden", value: this.getValue(props, state), name: props.hiddenName}):
null
},
format: function(moment){
return moment.format(this.props.dateFormat)
},
prepareProps: function(thisProps, state) {
var props = {}
assign(props, thisProps)
props.value = this.prepareValue(props, state)
props.tools = this.renderTools
props.style = this.prepareStyle(props)
props.fieldProps = this.prepareFieldProps(props, state)
props.pickerProps = this.preparePickerProps(props)
return props
},
renderTools: function(props, clearTool){
var calendarTool = props.renderCalendarTool || this.renderCalendarTool
return [
clearTool,
calendarTool(props)
]
},
renderCalendarTool: function(props){
var state = this.state
var color = state.calendarToolMouseOver?
props.calendarToolOverColor:
props.calendarToolColor
var width = props.calendarToolWidth
var style = {
height : '100%',
position: 'relative',
display : 'flex',
flexFlow: 'column',
alignItems: 'stretch',
cursor : 'pointer',
padding : '7px 5px 5px 5px',
boxSizing: 'border-box'
}
var innerStyle = {
height: '100%',
width: width,
borderColor: color,
borderStyle: 'solid',
borderWidth: '4px 2px 2px 2px',
position: 'relative'
}
var topMarkerStyle = {
borderColor: color,
borderStyle: 'solid',
borderWidth: '0px 3px 0px 3px',
height: 5,
right: 1,
left: 1,
top: -6,
position: 'absolute'
}
var centerMarkerStyle = {
position: 'absolute',
bottom: 2,
right: 2,
width: 4,
height: 4,
background: color
}
return React.createElement("div", {style: style,
onMouseEnter: this.handleCalendarToolMouseEnter,
onMouseLeave: this.handleCalendarToolMouseLeave,
onClick: this.handleCalendarToolClick,
onMouseDown: this.handleCalendarToolMouseDown
},
React.createElement("div", {style: innerStyle},
React.createElement("div", {style: topMarkerStyle}),
React.createElement("div", {style: centerMarkerStyle})
)
)
},
handleCalendarToolMouseEnter: function(){
this.setState({
calendarToolMouseOver: true
})
},
handleCalendarToolMouseLeave: function(){
this.setState({
calendarToolMouseOver: false
})
},
handleCalendarToolClick: function(){
this.togglePicker()
},
handleCalendarToolMouseDown: function(event){
event.preventDefault()
},
prepareValue: function(props, state){
var value = this.getValue(props, state)
props.strictMoment = this.toMoment(value, { strict: true })
props.moment = props.strictMoment.isValid()?
this.toMoment(props.strictMoment):
this.toMoment(value)
if (isDate(value) || typeof value == 'number' || isMoment(value)){
value = this.format(props.moment)
}
var valid = true
if (props.strictMoment.isValid()){
value = this.format(props.moment)
} else if (!props.moment.isValid()){
valid = false
// delete props.moment
}
props.valid = valid
return value
},
preparePickerProps: function(props){
var pickerProps = this._preparePickerProps(props)
if (props.valid){
pickerProps.date = props.moment
}
pickerProps.onMouseDown = this.handlePickerMouseDown.bind(this, props, pickerProps)
pickerProps.onChange = this.handlePickerChange.bind(this, props, pickerProps)
// pickerProps.style.position
return pickerProps
},
handlePickerMouseDown: function(props, pickerProps, event){
var initialPickerProps = this.props.pickerProps
if (initialPickerProps && initialPickerProps.onMouseDown){
initialPickerProps.onMouseDown(event)
}
event.preventDefault()
},
handlePickerChange: function(props, pickerProps, moment, text){
var initialPickerProps = this.props.pickerProps || {}
var args = [].slice.call(arguments, 2)
;(initialPickerProps.onChange || emptyFn).apply(null, args)
this.notify(text)
this.setPickerVisible(false)
},
prepareFieldProps: function(props, state) {
var fieldProps = this._prepareFieldProps(props, state)
fieldProps.value = props.value
if (fieldProps.validate === true){
fieldProps.validate = function(){
return props.strictMoment.isValid()
}
}
return fieldProps
},
prepareStyle: function(props) {
var style = {}
assign(style, props.defaultStyle, props.style)
return style
},
getValue: function(props, state) {
return props.value === undefined?
state.defaultValue:
props.value
},
handleKeyDown: function(props, event){
var key = event.key
var fn = 'handle' + toUpperFirst(key) + 'KeyDown'
if (this[fn]){
this[fn](props, event)
}
},
handleChange: function(props, value, fieldProps, event) {
if (props.readOnly && event && event.type == 'input'){
//cancel change event from input
return
}
var moment = this.toMoment(value)
if (this.props.value === undefined){
this.setState({
defaultValue: value
})
}
var args = [value, moment, event]
;(props.onChange || emptyFn).apply(null, args)
var fieldProps = this.props.fieldProps || {}
;(fieldProps.onChange || emptyFn).apply(null, args)
},
prepareWrapperProps: function(props){
var wrapperProps = this._prepareWrapperProps.apply(this, arguments)
wrapperProps.style = this.prepareWrapperStyle(props, wrapperProps)
return wrapperProps
},
prepareWrapperStyle: function(props, wrapperProps){
var style = assign({}, wrapperProps.style)
if (style.position != 'absolute'){
//in order for the
style.position = 'relative'
}
return style
},
notify: function(){
return this._notify.apply(this, arguments)
},
focus: function(){
return this._focus.apply(this, arguments)
},
getInput: function(){
return this._getInput.apply(this, arguments)
},
isFocused: function(){
return this._isFocused.apply(this, arguments)
},
handleFocus: function(event){
if (this.props.showPickerOnFocus){
this.setPickerVisible(true)
}
var fieldProps = this.props.fieldProps
if (fieldProps && fieldProps.onFocus){
fieldProps.onFocus(event)
}
if (this.props.onFocus){
this.props.onFocus(event)
}
},
handleBlur: function(event){
this.setPickerVisible(false)
var fieldProps = this.props.fieldProps
if (fieldProps && fieldProps.onBlur){
fieldProps.onBlur(event)
}
if (this.props.onBlur){
this.props.onBlur(event)
}
},
isPickerVisible: function(){
return this._isPickerVisible()
},
setPickerVisible: function(bool){
if (bool != this.state.pickerVisible){
var value = this.getValue(this.props, this.state)
var fn = bool?
this.props.onPickerShow:
this.props.onPickerHide
;(fn || emptyFn)(value)
this.setState({
pickerVisible: bool
})
}
},
togglePicker: function(){
this.setState({
pickerVisible: !this.state.pickerVisible
})
}
})
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {
'use strict'
module.exports = function toUpperFirst(str){
if (!str){
return str
}
return str.charAt(0).toUpperCase() + str.substring(1)
}
/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(11)
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var objectToString = Object.prototype.toString
module.exports = function(value){
return objectToString.apply(value) === '[object Date]'
}
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = __webpack_require__(12)
/***/ },
/* 6 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
module.exports = {
dateFormat: 'YYYY-MM-DD'
}
/***/ },
/* 7 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
function ToObject(val) {
if (val == null) {
throw new TypeError('Object.assign cannot be called with null or undefined');
}
return Object(val);
}
module.exports = Object.assign || function (target, source) {
var from;
var keys;
var to = ToObject(target);
for (var s = 1; s < arguments.length; s++) {
from = arguments[s];
keys = Object.keys(Object(from));
for (var i = 0; i < keys.length; i++) {
to[keys[i]] = from[keys[i]];
}
}
return to;
};
/***/ },
/* 8 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var assign = __webpack_require__(22)
var hasOwn = function(obj, prop){
return Object.prototype.hasOwnProperty.call(obj, prop)
}
var toUpperFirst = __webpack_require__(13)
var constrainPicker = __webpack_require__(14)
function emptyFn(){}
function copyKeys(which, target, src){
Object.keys(which).forEach(function(key){
if (hasOwn(src, key)){
target[key] = src[key]
}
})
}
var PROP_NAMES = {
style : true,
className: true
}
module.exports = {
_prepareWrapperProps: function(props) {
var wrapperProps = assign({}, props.wrapperProps)
copyKeys(PROP_NAMES, wrapperProps, props)
return wrapperProps
},
_prepareFieldProps: function(props, state) {
var fieldProps = assign({}, props)
delete fieldProps.style
delete fieldProps.className
delete fieldProps.fieldProps
delete fieldProps.defaultStyle
delete fieldProps.readOnly
assign(fieldProps, props.fieldProps)
if (props.readOnly){
fieldProps.inputProps = assign({}, fieldProps.inputProps)
fieldProps.inputProps.style = assign({
cursor: 'pointer'
}, fieldProps.inputProps.style)
}
fieldProps.ref = 'field'
fieldProps.style = assign({}, props.fieldStyle, fieldProps.style)
fieldProps.onFocus = this.handleFocus
fieldProps.onBlur = this.handleBlur
fieldProps.onKeyDown = (this.handleKeyDown || emptyFn).bind(this, props)
fieldProps.onChange = (this.handleChange || emptyFn).bind(this, props)
delete fieldProps.data
return fieldProps
},
_preparePickerProps: function(props) {
var pickerProps = assign({}, props.pickerProps)
pickerProps.style = assign({}, props.defaultPickerStyle, props.pickerStyle, pickerProps.style)
pickerProps.ref = "picker"
return pickerProps
},
_constrainPicker: constrainPicker,
_renderPicker: function(props, state){
var pickerProps = props.pickerProps
var visible = state.pickerVisible
if (!visible){
pickerProps.style.display = 'none'
}
if (visible){
if (props.constrainTo){
;(this.constrainPicker || this._constrainPicker)(props, pickerProps, props.constrainTo)
}
}
var defaultFactory = this.props.defaultPickerFactory
var picker = (props.pickerFactory || defaultFactory)(pickerProps)
if (picker === undefined){
picker = defaultFactory(pickerProps)
}
return picker
},
_isFocused: function(){
return this.refs.field.isFocused()
},
_getInput: function(){
return this.refs.field?
this.refs.field.getInput():
null
},
_focus: function(){
this.refs.field.focus()
},
_notify: function(value, event) {
this.refs.field.notify(value, event)
},
_isPickerVisible: function(){
return this.props.pickerVisible == null?
this.state.pickerVisible:
this.props.pickerVisible
}
}
/***/ },
/* 9 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict';
var assign = __webpack_require__(23)
var React = __webpack_require__(1)
function emptyFn() {}
var TOOL_STYLES = {
true : {display: 'inline-block'},
false: {cursor: 'text', color: 'transparent'}
}
var INDEX = 0
var DESCRIPTOR = {
displayName: 'ReactInputField',
propTypes: {
validate : React.PropTypes.oneOfType([
React.PropTypes.func,
React.PropTypes.bool
]),
isEmpty : React.PropTypes.func,
clearTool: React.PropTypes.bool
},
getInitialState: function(){
return {
defaultValue: this.props.defaultValue
}
},
getDefaultProps: function () {
return {
focusOnClick: true,
defaultClearToolStyle: {
fontSize : 20,
paddingRight: 5,
paddingLeft : 5,
alignSelf : 'center',
cursor : 'pointer',
userSelect : 'none',
boxSizing: 'border-box'
},
clearToolColor : '#a8a8a8',
clearToolOverColor: '#7F7C7C',
defaultStyle: {
display : 'inline-flex',
flexFlow : 'row',
alignItems: 'stretch',
border : '1px solid #a8a8a8',
boxSizing : 'border-box'
// ,
// height : 30
},
defaultInvalidStyle: {
border : '1px solid rgb(248, 144, 144)'
},
defaultInputStyle: {
flex : 1,
border : 0,
height : '100%',
padding: '6px 2px',
outline: 'none',
boxSizing: 'border-box'
},
defaultInputInvalidStyle: {
},
emptyValue: '',
inputClassName: '',
inputProps : null,
clearTool: true,
defaultClassName: 'z-field',
emptyClassName : 'z-empty-value',
invalidClassName: 'z-invalid',
toolsPosition: 'right'
}
},
render: function() {
if (this.valid === undefined){
this.valid = true
}
var props = this.prepareProps(this.props, this.state)
if (this.valid !== props.valid && typeof props.onValidityChange === 'function'){
setTimeout(function(){
props.onValidityChange(props.valid, props.value, props)
}, 0)
}
this.valid = props.valid
props.children = this.renderChildren(props, this.state)
// delete props.value
var divProps = assign({}, props)
delete divProps.value
delete divProps.placeholder
return React.createElement("div", React.__spread({}, divProps))
},
renderChildren: function(props, state){
var field = this.renderField(props, state)
var tools = this.renderTools(props, state)
var children = [field, props.children]
if (props.toolsPosition == 'after' || props.toolsPosition == 'right'){
children.push.apply(children, tools)
} else {
children = (tools || []).concat(field)
}
return children
},
renderField: function(props) {
var inputProps = this.prepareInputProps(props)
inputProps.ref = 'input'
if (props.inputFactory){
return props.inputFactory(inputProps, props)
}
return React.createElement("input", React.__spread({}, inputProps))
},
renderTools: function(props, state) {
var clearTool = this.renderClearTool(props, state)
var result = [clearTool]
if (typeof props.tools === 'function'){
result = props.tools(props, clearTool)
}
return result
},
renderClearTool: function(props, state) {
if (!props.clearTool || props.readOnly || props.disabled){
return
}
var visible = !this.isEmpty(props)
var visibilityStyle = TOOL_STYLES[visible]
var style = assign({}, visibilityStyle, this.prepareClearToolStyle(props, state))
if (!visible){
assign(style, visibilityStyle)
}
return React.createElement("div", {
className: "z-clear-tool",
onClick: this.handleClearToolClick,
onMouseDown: this.handleClearToolMouseDown,
onMouseOver: this.handleClearToolOver,
onMouseOut: this.handleClearToolOut,
style: style
}, "✖")
},
handleClearToolMouseDown: function(event) {
event.preventDefault()
},
handleClearToolOver: function(){
this.setState({
clearToolOver: true
})
},
handleClearToolOut: function(){
this.setState({
clearToolOver: false
})
},
isEmpty: function(props) {
var emptyValue = this.getEmptyValue(props)
if (typeof props.isEmpty === 'function'){
return props.isEmpty(props, emptyValue)
}
return props.value + '' === emptyValue + ''
},
getEmptyValue: function(props){
var value = props.emptyValue
if (typeof value === 'function'){
value = value(props)
}
return value
},
isValid: function(props) {
var value = props.value
var result = true
if (typeof props.validate === 'function'){
result = props.validate(value, props) !== false
}
return result
},
getInput: function() {
return this.refs.input.getDOMNode()
},
focus: function(){
var input = this.getInput()
if (input && typeof input.focus === 'function'){
input.focus()
}
},
handleClick: function(event){
if (this.props.focusOnClick && !this.isFocused()){
this.focus()
}
},
handleMouseDown: function(event) {
;(this.props.onMouseDown || emptyFn)(event)
// event.preventDefault()
},
handleClearToolClick: function(event) {
this.notify(this.getEmptyValue(this.props), event)
},
handleChange: function(event) {
event.stopPropagation()
this.notify(event.target.value, event)
},
handleSelect: function(event) {
event.stopPropagation()
;(this.props.onSelect || emptyFn)(event)
},
notify: function(value, event) {
if (this.props.value === undefined){
this.setState({
defaultValue: value
})
}
;(this.props.onChange || emptyFn)(value, this.props, event)
},
//*****************//
// PREPARE METHODS //
//*****************//
prepareProps: function(thisProps, state) {
var props = {}
assign(props, thisProps)
props.value = this.prepareValue(props, state)
props.valid = this.isValid(props)
props.onClick = this.handleClick
props.onMouseDown = this.handleMouseDown
props.className = this.prepareClassName(props)
props.style = this.prepareStyle(props)
return props
},
prepareValue: function(props, state) {
var value = props.value === undefined?
state.defaultValue:
props.value
return value
},
prepareClassName: function(props) {
var result = [props.className, props.defaultClassName]
if (this.isEmpty(props)){
result.push(props.emptyClassName)
}
if (!props.valid){
result.push(props.invalidClassName)
}
return result.join(' ')
},
prepareStyle: function(props) {
var style = assign({}, props.defaultStyle, props.style)
if (!props.valid){
assign(style, props.defaultInvalidStyle, props.invalidStyle)
}
return style
},
prepareInputProps: function(props) {
var inputProps = {
className: props.inputClassName
}
assign(inputProps, props.defaultInputProps, props.inputProps)
inputProps.key = 'field'
inputProps.value = props.value
inputProps.placeholder = props.placeholder
inputProps.onChange = this.handleChange
inputProps.onSelect = this.handleSelect
inputProps.style = this.prepareInputStyle(props)
inputProps.onFocus = this.handleFocus
inputProps.onBlur = this.handleBlur
inputProps.name = props.name
inputProps.disabled = props.disabled
inputProps.readOnly = props.readOnly
return inputProps
},
handleFocus: function(){
this._focused = true
},
handleBlur: function(){
this._focused = false
},
isFocused: function(){
return !!this._focused
},
prepareInputStyle: function(props) {
var inputStyle = props.inputProps?
props.inputProps.style:
null
var style = assign({}, props.defaultInputStyle, props.inputStyle, inputStyle)
if (!props.valid){
assign(style, props.defaultInputInvalidStyle, props.inputInvalidStyle)
}
return style
},
prepareClearToolStyle: function(props, state) {
var defaultClearToolOverStyle
var clearToolOverStyle
var clearToolColor
if (state && state.clearToolOver){
defaultClearToolOverStyle = props.defaultClearToolOverStyle
clearToolOverStyle = props.clearToolOverStyle
}
if (props.clearToolColor){
clearToolColor = {
color: props.clearToolColor
}
if (state && state.clearToolOver && props.clearToolOverColor){
clearToolColor = {
color: props.clearToolOverColor
}
}
}
var style = assign(
{},
props.defaultClearToolStyle,
defaultClearToolOverStyle,
clearToolColor,
props.clearToolStyle,
clearToolOverStyle
)
return style
}
}
var ReactClass = React.createClass(DESCRIPTOR)
ReactClass.descriptor = DESCRIPTOR
module.exports = ReactClass
/***/ },
/* 10 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict'
var React = __webpack_require__(1)
var moment = __webpack_require__(24)
var asConfig = __webpack_require__(15)
var assign = __webpack_require__(7)
var MonthView = __webpack_require__(18)
var YearView = __webpack_require__(19)
var DecadeView = __webpack_require__(20)
var Header = __webpack_require__(21)
var toMoment = __webpack_require__(11)
var isMoment = __webpack_require__(12)
var hasOwn = function(obj, key){
return Object.prototype.hasOwnProperty.call(obj, key)
}
// if (React.createFactory){
// MonthView = React.createFactory(MonthView)
// YearView = React.createFactory(YearView)
// DecadeView = React.createFactory(DecadeView)
// }
var Views = {
month : MonthView,
year : YearView,
decade: DecadeView
}
var getWeekDayNames = __webpack_require__(16)
function emptyFn(){}
var DatePicker = React.createClass({
displayName: 'DatePicker',
propTypes: {
todayText: React.PropTypes.string,
gotoSelectedText: React.PropTypes.string,
renderFooter: React.PropTypes.func,
onChange: React.PropTypes.func,
date: React.PropTypes.any,
viewDate: React.PropTypes.any
},
getViewOrder: function() {
return ['month', 'year', 'decade']
},
getDefaultProps: function() {
var props = assign({}, asConfig())
delete props.viewDate
delete props.date
return props
},
getInitialState: function() {
return {
view: this.props.defaultView,
viewDate: this.props.defaultViewDate
}
},
getViewName: function() {
return this.props.view != null?
this.props.view:
this.state.view || 'month'
},
addViewIndex: function(amount) {
var viewName = this.getViewName()
var order = this.getViewOrder()
var index = order.indexOf(viewName)
index += amount
return index % order.length
},
getNextViewName: function() {
return this.getViewOrder()[this.addViewIndex(1)]
},
getPrevViewName: function() {
return this.getViewOrder()[this.addViewIndex(-1)]
},
getView: function() {
return Views[this.getViewName()] || Views.month
},
getViewFactory: function() {
var view = this.getView()
if (React.createFactory){
view.__factory = view.__factory || React.createFactory(view)
view = view.__factory
}
return view
},
getViewDate: function() {
var date = hasOwn(this.props, 'viewDate')?
this.props.viewDate:
this.state.viewDate
date = this.toMoment(date || this.props.date || new Date())
return date
},
render: function() {
this.toMoment = function(value){
return toMoment(value, this.props.dateFormat)
}
var view = this.getViewFactory()
var props = asConfig(this.props)
props.viewDate = this.getViewDate()
props.renderDay = this.props.renderDay
props.onRenderDay = this.props.onRenderDay
props.onChange = this.handleChange
props.onSelect = this.handleSelect
var className = (this.props.className || '') + ' date-picker'
return (
React.createElement("div", React.__spread({className: className}, this.props),
React.createElement("div", {className: "dp-inner"},
this.renderHeader(view),
React.createElement("div", {className: "dp-body"},
React.createElement("div", {className: "dp-anim-target"},
view(props)
)
),
this.renderFooter(props)
)
)
)
},
renderFooter: function(props) {
if (this.props.hideFooter){
return
}
if (this.props.today){
console.warn('Please use "todayText" prop instead of "today"!')
}
if (this.props.gotoSelected){
console.warn('Please use "gotoSelectedText" prop instead of "gotoSelected"!')
}
var todayText = this.props.todayText || 'Today'
var gotoSelectedText = this.props.gotoSelectedText || 'Go to selected'
var footerProps = {
todayText : todayText,
gotoSelectedText : gotoSelectedText,
onTodayClick : this.gotoNow,
onGotoSelectedClick: this.gotoSelected,
date : props.date,
viewDate : props.viewDate
}
var result
if (typeof this.props.renderFooter == 'function'){
result = this.props.renderFooter(footerProps)
}
if (result !== undefined){
return result
}
return (
React.createElement("div", {className: "dp-footer"},
React.createElement("div", {className: "dp-footer-today", onClick: this.gotoNow},
todayText
),
React.createElement("div", {className: "dp-footer-selected", onClick: this.gotoSelected},
gotoSelectedText
)
)
)
},
gotoNow: function() {
this.gotoDate(+new Date())
},
gotoSelected: function() {
this.gotoDate(this.props.date || +new Date())
},
gotoDate: function(value) {
this.setView('month')
this.setViewDate(value)
},
getViewColspan: function(){
var map = {
month : 5,
year : 2,
decade: 2
}
return map[this.getViewName()]
},
renderHeader: function(view) {
var viewDate = this.getViewDate()
var headerText = this.getView().getHeaderText(viewDate)
var colspan = this.getViewColspan()
var prev = this.props.navPrev
var next = this.props.navNext
return React.createElement(Header, {
prevText: prev,
nextText: next,
colspan: colspan,
onPrev: this.handlePrevNav,
onNext: this.handleNextNav,
onChange: this.handleViewChange
},
headerText
)
},
handleRenderDay: function (date) {
return (this.props.renderDay || emptyFn)(date) || []
},
handleViewChange: function() {
this.setView(this.getNextViewName())
},
/**
* Use this method to set the view.
*
* @param {String} view 'month'/'year'/'decade'
*
* It calls onViewChange, and if the view is uncontrolled, also sets it is state,
* so the datepicker gets re-rendered view the new view
*
*/
setView: function(view) {
if (typeof this.props.onViewChange == 'function'){
this.props.onViewChange(view)
}
if (this.props.view == null){
this.setState({
view: view
})
}
},
setViewDate: function(moment) {
moment = this.toMoment(moment)
var fn = this.props.onViewDateChange
if (typeof fn == 'function'){
var text = moment.format(this.props.dateFormat)
var view = this.getViewName()
fn(moment, text, view)
}
if (!hasOwn(this.props, 'viewDate')){
this.setState({
viewDate: moment
})
}
},
getNext: function() {
var current = this.getViewDate()
return ({
month: function() {
return moment(current).add(1, 'month')
},
year: function() {
return moment(current).add(1, 'year')
},
decade: function() {
return moment(current).add(10, 'year')
}
})[this.getViewName()]()
},
getPrev: function() {
var current = this.getViewDate()
return ({
month: function() {
return moment(current).add(-1, 'month')
},
year: function() {
return moment(current).add(-1, 'year')
},
decade: function() {
return moment(current).add(-10, 'year')
}
})[this.getViewName()]()
},
handleNavigation: function(direction, event) {
var viewMoment = direction == -1?
this.getPrev():
this.getNext()
this.setViewDate(viewMoment)
if (typeof this.props.onNav === 'function'){
var text = viewMoment.format(this.props.dateFormat)
var view = this.getViewName()
this.props.onNav(viewMoment, text, view, direction, event)
}
},
handlePrevNav: function(event) {
this.handleNavigation(-1, event)
},
handleNextNav: function(event) {
this.handleNavigation(1, event)
},
handleChange: function(date, event) {
date = moment(date)
var text = date.format(this.props.dateFormat)
;(this.props.onChange || emptyFn)(date, text, event)
},
handleSelect: function(date, event) {
var viewName = this.getViewName()
var property = ({
decade: 'year',
year : 'month'
})[viewName]
var value = date.get(property)
var viewMoment = moment(this.getViewDate()).set(property, value)
var view = this.getPrevViewName()
this.setViewDate(viewMoment)
this.setView(view)
if (typeof this.props.onSelect === 'function'){
var text = viewMoment.format(this.props.dateFormat)
this.props.onSelect(viewMoment, text, view, event)
}
}
})
module.exports = DatePicker
/***/ },
/* 11 */
/***/ function(module, exports, __webpack_require__) {
'use strict'
var moment = __webpack_require__(24)
var CONFIG = __webpack_require__(17)
/**
* This function will be used to convert a date to a moment.
*
* It accepts input as sring, date or moment
*
* @param {String/Date/Moment} value
* @param {String} [dateFormat] if value is string, it will be parsed to a moment using this format
* @param {Object} [config]
* @param {Boolean} [config.strict] whether to perform strict parsing on strings
* @return {Moment}
*/
module.exports = function(value, dateFormat, config){
var strict = !!(config && config.strict)
dateFormat = dateFormat || CONFIG.dateFormat
if (typeof value == 'string'){
return moment(value, dateFormat, strict)
}
return moment.isMoment(value)?
value:
moment(value == null? new Date(): value)
}
/***/ },
/* 12 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var moment = __webpack_require__(24)
module.exports = function(value){
return moment.isMoment(value)
}
/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {
'use strict'
module.exports = function toUpperFirst(str){
if (!str){
return str
}
return str.charAt(0).toUpperCase() + str.substring(1)
}
/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
var Region = __webpack_require__(26)
var assign = __webpack_require__(22)
var selectParent = __webpack_require__(27)
module.exports = function(props, pickerProps, constrainTo){
var constrainRegion
if (constrainTo === true){
constrainRegion = Region.getDocRegion()
}
if (!constrainRegion && typeof constrainTo === 'string'){
var parent = selectParent(constrainTo, this.getDOMNode())
constrainRegion = Region.from(parent)
}
if (!constrainRegion && typeof constrainTo === 'function'){
constrainRegion = Region.from(constrainTo())
}
var field = this.refs.field
if (!field){
return
}
var fieldRegion = Region.from(field.getDOMNode())
if (typeof props.constrainPicker === 'function'){
props.constrainPicker(pickerProps, fieldRegion, constrainRegion)
return
}
if (!constrainRegion || !(constrainRegion instanceof Region)){
return
}
var topAvailable = fieldRegion.top - constrainRegion.top
var bottomAvailable = constrainRegion.bottom - fieldRegion.bottom
var max = bottomAvailable
var style = pickerProps.style
if (topAvailable > bottomAvailable){
style.bottom = '100%'
delete style.top
}
}
/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {
'use strict'
var assign = __webpack_require__(7)
var CONFIG = __webpack_require__(17)
var KEYS = Object.keys(CONFIG)
function copyList(src, target, list){
if (src){
list.forEach(function(key){
target[key] = src[key]
})
}
return target
}
/**
* Returns an object that copies from given source object
* on the resulting object only the properties also found in cfg.
*
* If no cfg specified, CONFIG is assumed
*
* @param {object} source
* @param {Object} [cfg] If not specied, CONFIG will be used
*
* @return {Object}
*/
module.exports = function asConfig(source, cfg){
var keys = KEYS
if (cfg){
keys = Object.keys(cfg)
}
cfg = cfg || CONFIG
if (!source){
return assign({}, cfg)
}
return copyList(source, assign({}, cfg), keys)
}
/***/ },
/* 16 */
/***/ function(module, exports, __webpack_require__) {
'use strict'
var moment = __webpack_require__(24)
var DEFAULT_WEEK_START_DAY = moment().startOf('week').format('d') * 1
module.exports = function getWeekDayNames(startDay){
var names = moment.weekdaysShort()
var index = startDay || DEFAULT_WEEK_START_DAY
while (index > 0){
names.push(names.shift())
index--
}
return names
}
/***/ },
/* 17 */
/***/ function(module, exports, __webpack_require__) {
'use strict'
var getWeekDayNames = __webpack_require__(16)
module.exports = {
//the names of week days to be displayed in month view - first should be sunday
weekDayNames: getWeekDayNames(),
//the day to display as first day of week. defaults to 0, which is sunday
weekStartDay: 0,
//the format in which days should be displayed in month view
dayFormat: 'D',
//the format in which months should be displayed in year view
monthFormat: 'MMMM',
//the format in which years should be displayed in decade view
yearFormat: 'YYYY',
//text for navigating to prev period
navPrev : '‹',
//text for navigating to next period
navNext : '›',
//the view to render initially. Possible values are: 'month', 'year', 'decade'
view: null,
defaultView: 'month',
//the date to mark as selected in the date picker.
//Can be a Date object, a moment object or a string.
//If it's a string, it will be parsed using dateFormat
date: null,
minDate: null,
maxDate: null,
//the date where to open the picker. defaults to today if no date and no viewDate specified
viewDate: null,
defaultViewDate: null,
//if the date property is given as string, it will be parsed using this format
dateFormat: 'YYYY-MM-DD'
}
/***/ },
/* 18 */
/***/ function(module, exports, __webpack_require__) {
/** @jsx React.DOM */'use strict'
var React = __webpack_require__(1)
var moment = __webpack_require__(24)
var FORMAT = __webpack_require__(25)
var asConfig = __webpack_require__(15)
var toMoment = __webpack_require__(11)
var TODAY
function emptyFn(){}
var MonthView = React.createClass({
displayName: 'MonthView',
/**
* Formats the given date in the specified format.
* @method format
*
* @param {Date/String/Moment} value
* @param {String} [format] If none specified, #dateFormat will be used
*
* @return {String}
*/
formatAsDay: function(moment, dayDisplayFormat){
return moment.format(dayDisplayFormat || 'D')
},
getDefaultProps: function() {
return asConfig()
},
getWeekStartMoment: function(value){
var clone = moment(value).startOf('week')
// if (DEFAULT_WEEK_START_DAY != this.weekStartDay){
// clone.add('days', this.weekStartDay - DEFAULT_WEEK_START_DAY)
// }
return clone
},
/**
* Returns all the days in the specified month.
*
* @param {Moment/Date/Number} value
* @return {Moment[]}
*/
getDaysInMonth: function(value){
var first = moment(value).startOf('month')
var start = this.getWeekStartMoment(first)
var result = []
var i = 0
if (first.add(-1, 'days').isBefore(start)){
//make sure the last day of prev month is included
start.add(-1, 'weeks')
}
for (; i < 42; i++){
result.push(moment(start))
start.add(1, 'days')
}
return result
},
render: function() {
TODAY = +moment().startOf('day')
var viewMoment = this.props.viewMoment = toMoment(this.props.viewDate, this.props.dateFormat)
this.props.minDate && (this.props.minDate = +toMoment(this.props.minDate, this.props.dateFormat))
this.props.maxDate && (this.props.maxDate = +toMoment(this.props.maxDate, this.props.dateFormat))
this.monthFirst = moment(viewMoment).startOf('month')
this.monthLast = moment(viewMoment).endOf('month')
if (this.props.date){
this.props.moment = moment(this.props.date).startOf('day')
}
var daysInView = this.getDaysInMonth(viewMoment)
return (
React.createElement("table", {className: "dp-table dp-month-view"},
React.createElement("tbody", null,
this.renderWeekDayNames(),
this.renderDays(daysInView)
)
)
)
},
/**
* Render the given array of days
* @param {Moment[]} days
* @return {React.DOM}
*/
renderDays: function(days) {
var nodes = days.map(this.renderDay, this)
var len = days.length
var buckets = []
var bucketsLen = Math.ceil(len / 7)
var i = 0
for ( ; i < bucketsLen; i++){
buckets.push(nodes.slice(i * 7, (i + 1) * 7))
}
return buckets.map(function(bucket, i){
return React.createElement("tr", {key: "row" + i, className: "dp-week dp-row"}, bucket)
})
},
renderDay: function(date) {
var dayText = FORMAT.day(date)
var classes = ["dp-cell dp-day"]
var dateTimestamp = +date
if (dateTimestamp == TODAY){
classes.push('dp-current')
} else if (dateTimestamp < this.monthFirst){
classes.push('dp-prev')
} else if (dateTimestamp > this.monthLast){
classes.push('dp-next')
}
if (this.props.minDate && date < this.props.minDate){
classes.push('dp-disabled dp-before-min')
}
if (this.props.maxDate && date > this.props.maxDate){
classes.push('dp-disabled dp-after-max')
}
if (dateTimestamp == this.props.moment){
classes.push('dp-value')
}
var renderDayProps = {
key : dayText,
text : dayText,
date : date,
className: classes.join(' '),
style : {},
onClick : this.handleClick.bind(this, date, dateTimestamp),
children : dayText
}
if (typeof this.props.onRenderDay === 'function'){
renderDayProps = this.props.onRenderDay(renderDayProps)
}
var defaultRenderFunction = React.DOM.td
var renderFunction = this.props.renderDay || defaultRenderFunction
var result = renderFunction(renderDayProps)
if (result === undefined){
result = defaultRenderFunction(renderDayProps)
}
return result
},
renderWeekDayNames: function(){
var names = this.props.weekDayNames
return (
React.createElement("tr", {className: "dp-row dp-week-day-names"},
names.map(function(name) {return React.createElement("td", {key: name, className: "dp-cell dp-week-d