Datepicker improvements

package.json

@@ -22,6 +22,7 @@
   },
   "homepage": "https://github.com/devex-web-frontend/dx-components#readme",
   "devDependencies": {
+    "moment": "^2.15.0",
     "@kadira/storybook": "2.1.1",
     "autoprefixer": "^6.3.6",
     "babel-core": "^6.10.4",
@@ -92,7 +93,6 @@
   "dependencies": {
     "bower": "^1.7.9",
     "classnames": "^2.2.5",
-    "moment": "^2.15.0",
     "react": "^15.3.0",
     "react-css-themr": "~1.4.0",
     "react-dom": "^15.3.0",

src/components/Button/Button.jsx

@@ -3,16 +3,18 @@ import classnames from 'classnames';
 import {PURE} from 'dx-util/src/react/pure';
 import {themr} from 'react-css-themr';
 
+export const BUTTON_THEME = {
+	container: React.PropTypes.string
+};
+
 export const BUTTON = Symbol('Button');
 
 @PURE
 @themr(BUTTON)
 export default class Button extends React.Component {
 	static propTypes = {
 		children: React.PropTypes.node,
-		theme: React.PropTypes.shape({
-			container: React.PropTypes.string
-		}),
+		theme: React.PropTypes.shape(BUTTON_THEME),
 		type: React.PropTypes.string,
 		isDisabled: React.PropTypes.bool,
 		isPrimary: React.PropTypes.bool,

src/components/Calendar/Calendar.constants.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 export const CALENDAR_THEME = {
 	container: React.PropTypes.string,
 	header: React.PropTypes.string,
@@ -10,6 +9,7 @@ export const CALENDAR_THEME = {
 	monthHeader: React.PropTypes.string,
 	monthHeader__day: React.PropTypes.string,
 	week: React.PropTypes.string,
+	dayContainer: React.PropTypes.string,
 	day: React.PropTypes.string,
 	day_disabled: React.PropTypes.string,
 	day_current: React.PropTypes.string,

src/components/Calendar/Calendar.demo.styl

@@ -1,12 +1,27 @@
 @require "./Calendar.styl";
-
 .container {
+	padding: 0;
+	display: inline-block;
 	font-size: 12px;
 	color: #fff;
 	background-color: #3d3b39;
+	padding-bottom: 5px;
+}
+
+.monthHeader {
+	&__day {
+		width: 25px;
+	}
 }
+.dayContainer {
+	width: 25px;
+	position: relative;
+}
+
 
 .header {
+	text-align: center;
+	vertical-align: middle;
 	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 	padding: 10px 0;
 	font-weight: bold;
@@ -19,6 +34,7 @@
 
 .changeMonth {
 	&__container {
+		background: transparent;
 		border: none;
 		box-shadow: none;
 		vertical-align: top;
@@ -36,14 +52,16 @@
 	}
 }
 
-.month {
-	padding-bottom: 5px;
+.week {
+	width: 100%;
 }
 
 .monthHeader {
-	margin: 6px 0 12px;
-
 	&__day {
+		text-align: center;
+		vertical-align: middle;
+		box-sizing: border-box;
+		padding: 10px 0;
 		font-size: 10px;
 		line-height: 8px;
 		color: darken(#fff, 30);
@@ -52,10 +70,15 @@
 	}
 }
 
-.week {
+.dayContainer {
+	text-align: center;
 }
 
 .day {
+	box-sizing: border-box;
+	display: inline-block;
+	cursor: pointer;
+	margin: 0 10px 2px;
 	line-height: 8px;
 	padding: 5px;
 	user-select: none;
@@ -77,4 +100,4 @@
 	&_disabled {
 		color: #7c7b7b;
 	}
-}
+}

src/components/Calendar/Calendar.jsx

@@ -1,104 +1,157 @@
 import React from 'react';
 import {themr} from 'react-css-themr';
-import moment from 'moment';
 import Month from './Month';
 import {PURE} from 'dx-util/src/react/react';
 import ButtonIcon from '../ButtonIcon/ButtonIcon';
 import {MEMOIZE} from 'dx-util/src/function/function';
 import {CALENDAR_THEME} from './Calendar.constants';
-import noop from '../../util/func/noop';
+import {addMonths} from '../../util/func/date';
 
 export const CALENDAR = Symbol('Calendar');
 
 @PURE
 @themr(CALENDAR)
 export default class Calendar extends React.Component {
 	static propTypes = {
-		value: React.PropTypes.string.isRequired, // ISO - "2016-09-20T15:30:39.298Z"
-		headerDateFormat: React.PropTypes.string,
+		value: React.PropTypes.instanceOf(Date),
+		min: React.PropTypes.instanceOf(Date),
+		max: React.PropTypes.instanceOf(Date),
+
+		/**
+		 * Used to change the first day of week.
+		 * It varies from Saturday to Monday between different locales.
+		 * The allowed range is 0 (Sunday) to 6 (Saturday). The default is 1, Monday, as per ISO 8601.
+		 */
+		firstDayOfWeek: React.PropTypes.number,
+		headerDateFormatter: React.PropTypes.func,
+		headerDayFormatter: React.PropTypes.func,
+		dayFormatter: React.PropTypes.func,
 		headerDayFormat: React.PropTypes.string,
 		dayFormat: React.PropTypes.string,
 		onChange: React.PropTypes.func,
-		min: React.PropTypes.string, // ISO
-		max: React.PropTypes.string, // ISO
 		previousMonthIcon: React.PropTypes.string,
 		nextMonthIcon: React.PropTypes.string,
+		theme: React.PropTypes.shape(CALENDAR_THEME),
 		locale: React.PropTypes.string,
-		theme: React.PropTypes.shape(CALENDAR_THEME)
+		Month: React.PropTypes.func,
+		CalendarHeader: React.PropTypes.func,
+		Day: React.PropTypes.func
 	}
 
 	static defaultProps = {
-		onChange: noop,
-		min: null,
-		max: null,
-		headerDateFormat: 'MMM YYYY',
-		dayFormat: 'D',
-		headerDayFormat: 'ddd',
-		locale: 'en'
+		Month,
+		CalendarHeader,
+		locale: 'en',
+		...Month.defaultProps
 	}
 
 	state = {
-		displayedDate: moment(this.props.value)
-	}
-
-	componentWillReceiveProps(newProps) {
-		this.setState({
-			displayedDate: moment(newProps.value)
-		});
+		displayedDate: this.props.value
 	}
 
 	render() {
 		const {
 			theme,
 			onChange,
 			min,
+			locale,
 			max,
-			headerDateFormat,
-			headerDayFormat,
-			dayFormat,
 			previousMonthIcon,
 			nextMonthIcon,
-			locale,
-			value
+			Month,
+			Day,
+			value,
+			firstDayOfWeek,
+			headerDateFormatter: originalHeaderDateFormatter,
+			headerDayFormatter: originalHeaderDayFormatter,
+			dayFormatter: originalDayFormatter
 		} = this.props;
 
-		const displayedDate = this.state.displayedDate.locale(locale);
-		const headerDate = displayedDate.format(headerDateFormat);
+		const headerDayFormatter = value => {
+			return originalHeaderDayFormatter(value, locale);
+		};
+
+		const dayFormatter = value => {
+			return originalDayFormatter(value, locale);
+		};
+
+		const headerDateFormatter = value => {
+			return originalHeaderDateFormatter(value, locale);
+		};
+
+		const {displayedDate} = this.state;
+
+		return (
+			<div className={theme.container}>
+				<CalendarHeader theme={theme}
+				                value={displayedDate}
+				                headerDateFormatter={headerDateFormatter}
+				                previousMonthIcon={previousMonthIcon} nextMonthIcon={nextMonthIcon}
+				                onChange={this.onChangeDisplayedDate}/>
+				{
+					<Month selectedDate={value}
+					       displayedDate={displayedDate}
+					       onChange={onChange}
+					       min={min}
+					       max={max}
+					       theme={theme}
+					       headerDayFormatter={headerDayFormatter}
+					       dayFormatter={dayFormatter}
+					       Day={Day}
+					       firstDayOfWeek={firstDayOfWeek}/>
+
+				}
+			</div>
+		);
+	}
+
+	onChangeDisplayedDate = displayedDate => {
+		this.setState({
+			displayedDate
+		});
+	}
+}
+
+class CalendarHeader extends React.Component {
+	static propTypes = {
+		value: React.PropTypes.instanceOf(Date),
+		onChange: React.PropTypes.func,
+		locale: React.PropTypes.string,
+		headerDateFormatter: React.PropTypes.func,
+		previousMonthIcon: React.PropTypes.string,
+		nextMonthIcon: React.PropTypes.string,
+		theme: React.PropTypes.shape(CALENDAR_THEME),
+	}
+
+	render() {
+		const {
+			theme,
+			value,
+			headerDateFormatter,
+			previousMonthIcon,
+			nextMonthIcon,
+		} = this.props;
 
 		const changeMonthBtnTheme = {
 			container: theme.changeMonth__container,
 			icon: theme.changeMonth__icon
 		};
 
 		return (
-			<div className={theme.container}>
-				<div className={theme.header}>
-					<ButtonIcon name={previousMonthIcon}
-								theme={changeMonthBtnTheme}
-								onClick={this.onChangeMonth(-1)}/>
-					<span className={theme.header__text}>{headerDate}</span>
-					<ButtonIcon name={nextMonthIcon}
-								theme={changeMonthBtnTheme}
-								onClick={this.onChangeMonth(1)}/>
-				</div>
-				<Month selectedDate={moment(value).locale(locale)}
-					   onChange={onChange}
-					   startOfMonth={displayedDate.clone().startOf('month')}
-					   endOfMonth={displayedDate.clone().endOf('month')}
-					   currentDate={moment().locale(locale)}
-					   min={moment(min).locale(locale)}
-					   max={moment(max).locale(locale)}
-					   theme={theme}
-					   headerDayFormat={headerDayFormat}
-					   dayFormat={dayFormat}/>
+			<div className={theme.header}>
+				<ButtonIcon name={previousMonthIcon} theme={changeMonthBtnTheme} onClick={this.onChangeMonth(-1)}/>
+				<span className={theme.header__text}>
+					{headerDateFormatter ? headerDateFormatter(value) : value}
+				</span>
+				<ButtonIcon name={nextMonthIcon} theme={changeMonthBtnTheme} onClick={this.onChangeMonth(1)}/>
 			</div>
 		);
 	}
 
 	@MEMOIZE
 	onChangeMonth = step => () => {
-		this.setState({
-			displayedDate: this.state.displayedDate.clone().add(step, 'months')
-		});
+		const {value, onChange} = this.props;
+		const newValue = addMonths(value, step);
+		onChange && onChange(newValue);
 	}
 }