From a0c8c1a9ac5e34eac5e39c8586932157d8ef0a00 Mon Sep 17 00:00:00 2001 From: Lucas Myers Date: Wed, 28 Oct 2015 16:22:18 -0700 Subject: [PATCH 1/6] Adding support for custom icons as https://github.com/Eonasdan/bootstrap-datetimepicker does: - defaults to glyphicons - pass in optional icons object to replace some/all of the icons - unit tests --- src/DateTimeField.js | 10 ++++--- src/DateTimePicker.js | 6 ++-- src/DateTimePickerHours.js | 4 +-- src/DateTimePickerIcons.js | 35 +++++++++++++++++++++++ src/DateTimePickerMinutes.js | 4 +-- src/DateTimePickerTime.js | 11 +++---- src/__tests__/DateTimePickerIcons-test.js | 35 +++++++++++++++++++++++ 7 files changed, 90 insertions(+), 15 deletions(-) create mode 100644 src/DateTimePickerIcons.js create mode 100644 src/__tests__/DateTimePickerIcons-test.js diff --git a/src/DateTimeField.js b/src/DateTimeField.js index 63bdc716..9bf27a15 100644 --- a/src/DateTimeField.js +++ b/src/DateTimeField.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from "react"; import moment from "moment"; -import { Glyphicon } from "react-bootstrap"; import DateTimePicker from "./DateTimePicker.js"; +import DateTimePickerIcons from "./DateTimePickerIcons.js"; import Constants from "./Constants.js"; export default class DateTimeField extends Component { @@ -47,14 +47,15 @@ export default class DateTimeField extends Component { showToday: PropTypes.bool, viewMode: PropTypes.string, size: PropTypes.oneOf([Constants.SIZE_SMALL, Constants.SIZE_MEDIUM, Constants.SIZE_LARGE]), - daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.integer) + daysOfWeekDisabled: PropTypes.arrayOf(PropTypes.integer), + icons: PropTypes.object } state = { showDatePicker: this.props.mode !== Constants.MODE_TIME, showTimePicker: this.props.mode === Constants.MODE_TIME, inputFormat: this.resolvePropsInputFormat(), - buttonIcon: this.props.mode === Constants.MODE_TIME ? "time" : "calendar", + buttonIcon: this.props.mode === Constants.MODE_TIME ? "time" : "date", widgetStyle: { display: "block", left: -9999 @@ -344,6 +345,7 @@ export default class DateTimeField extends Component { addMonth={this.addMonth} addYear={this.addYear} daysOfWeekDisabled={this.props.daysOfWeekDisabled} + icons={this.props.icons} maxDate={this.props.maxDate} minDate={this.props.minDate} mode={this.props.mode} @@ -372,7 +374,7 @@ export default class DateTimeField extends Component {
- +
diff --git a/src/DateTimePicker.js b/src/DateTimePicker.js index 4a55c5b3..d9339abf 100644 --- a/src/DateTimePicker.js +++ b/src/DateTimePicker.js @@ -1,8 +1,8 @@ import React, { Component, PropTypes } from "react"; -import { Glyphicon } from "react-bootstrap"; import classnames from "classnames"; import DateTimePickerDate from "./DateTimePickerDate.js"; import DateTimePickerTime from "./DateTimePickerTime.js"; +import DateTimePickerIcons from "./DateTimePickerIcons.js"; import Constants from "./Constants.js"; export default class DateTimePicker extends Component { @@ -50,6 +50,7 @@ export default class DateTimePicker extends Component { addMonth={this.props.addMonth} addYear={this.props.addYear} daysOfWeekDisabled={this.props.daysOfWeekDisabled} + icons={this.props.icons} maxDate={this.props.maxDate} minDate={this.props.minDate} selectedDate={this.props.selectedDate} @@ -75,6 +76,7 @@ export default class DateTimePicker extends Component { - + diff --git a/src/DateTimePickerHours.js b/src/DateTimePickerHours.js index 0f0947be..3ecdd973 100644 --- a/src/DateTimePickerHours.js +++ b/src/DateTimePickerHours.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from "react"; -import { Glyphicon } from "react-bootstrap"; +import DateTimePickerIcons from "./DateTimePickerIcons.js"; import Constants from "./Constants.js"; export default class DateTimePickerHours extends Component { @@ -20,7 +20,7 @@ export default class DateTimePickerHours extends Component { - + diff --git a/src/DateTimePickerIcons.js b/src/DateTimePickerIcons.js new file mode 100644 index 00000000..e9d286be --- /dev/null +++ b/src/DateTimePickerIcons.js @@ -0,0 +1,35 @@ +import React, { Component, PropTypes } from "react"; + +export default class DateTimePickerIcons extends Component { + static defaultProps = { + defaultIcons: { + time: 'glyphicon glyphicon-time', + date: 'glyphicon glyphicon-calendar', + up: 'glyphicon glyphicon-chevron-up', + down: 'glyphicon glyphicon-chevron-down', + previous: 'glyphicon glyphicon-chevron-left', + next: 'glyphicon glyphicon-chevron-right', + today: 'glyphicon glyphicon-screenshot', + clear: 'glyphicon glyphicon-trash', + close: 'glyphicon glyphicon-remove' + } + } + + getIcon = () => { + var ret = this.props.icons && this.props.icons[this.props.glyph] ? this.props.icons[this.props.glyph] : this.props.defaultIcons[this.props.glyph]; + return ret; + } + + getClasses = () => { + var ret = this.props.className ? "" + this.props.className + " " + this.getIcon() : this.getIcon(); + return ret; + } + + render() { + return ( + + {this.props.children} + + ); + } +} diff --git a/src/DateTimePickerMinutes.js b/src/DateTimePickerMinutes.js index 5fe18833..cfc7dab6 100644 --- a/src/DateTimePickerMinutes.js +++ b/src/DateTimePickerMinutes.js @@ -1,5 +1,5 @@ import React, { Component, PropTypes } from "react"; -import { Glyphicon } from "react-bootstrap"; +import DateTimePickerIcons from "./DateTimePickerIcons.js"; import Constants from "./Constants.js"; export default class DateTimePickerMinutes extends Component { @@ -19,7 +19,7 @@ export default class DateTimePickerMinutes extends Component { - + diff --git a/src/DateTimePickerTime.js b/src/DateTimePickerTime.js index 21ac0bc8..b4d1c890 100644 --- a/src/DateTimePickerTime.js +++ b/src/DateTimePickerTime.js @@ -1,7 +1,7 @@ import React, { Component, PropTypes } from "react"; -import { Glyphicon } from "react-bootstrap"; import DateTimePickerMinutes from "./DateTimePickerMinutes"; import DateTimePickerHours from "./DateTimePickerHours"; +import DateTimePickerIcons from "./DateTimePickerIcons.js"; import Constants from "./Constants.js"; export default class DateTimePickerTime extends Component { @@ -65,11 +65,11 @@ export default class DateTimePickerTime extends Component { - + - + @@ -87,11 +87,11 @@ export default class DateTimePickerTime extends Component { - + - + @@ -105,6 +105,7 @@ export default class DateTimePickerTime extends Component { } render() { + return (
{this.renderPicker()} diff --git a/src/__tests__/DateTimePickerIcons-test.js b/src/__tests__/DateTimePickerIcons-test.js new file mode 100644 index 00000000..80159fdc --- /dev/null +++ b/src/__tests__/DateTimePickerIcons-test.js @@ -0,0 +1,35 @@ +import React from "react/addons"; +import Constants from "../Constants.js"; +jest.dontMock("../DateTimePickerIcons.js"); +const { TestUtils } = React.addons; + +describe("DateTimePickerIcons",function() { + const DateTimePickerIcons = require("../DateTimePickerIcons.js"); + let icon, customIcons; + + describe("UI", function() { + it("renders an icon with a default class", function() { + icon = TestUtils.renderIntoDocument( + + ); + const iconElement = TestUtils.scryRenderedDOMComponentsWithClass(icon, "glyphicon-time"); + expect(iconElement.length).toBe(1); + expect(iconElement[0].props.className).toBe("glyphicon glyphicon-time"); + }); + + it("renders an icon with a custom class", function() { + icon = TestUtils.renderIntoDocument( + + ); + const iconElement = TestUtils.scryRenderedDOMComponentsWithClass(icon, "fa-clock-o"); + expect(iconElement.length).toBe(1); + expect(iconElement[0].props.className).toBe("fa fa-clock-o"); + }); + }); + +}); From 0d3aa08acd4cfad2ee9827e5af7fded9709c766a Mon Sep 17 00:00:00 2001 From: Lucas Myers Date: Thu, 29 Oct 2015 15:06:09 -0700 Subject: [PATCH 2/6] Additional unit test for custom icons --- src/__tests__/DateTimePickerIcons-test.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/__tests__/DateTimePickerIcons-test.js b/src/__tests__/DateTimePickerIcons-test.js index 80159fdc..abf74e92 100644 --- a/src/__tests__/DateTimePickerIcons-test.js +++ b/src/__tests__/DateTimePickerIcons-test.js @@ -30,6 +30,18 @@ describe("DateTimePickerIcons",function() { expect(iconElement.length).toBe(1); expect(iconElement[0].props.className).toBe("fa fa-clock-o"); }); + + it("renders an icon with a default class when custom icons are passes in without an override for that icon", function() { + icon = TestUtils.renderIntoDocument( + + ); + const iconElement = TestUtils.scryRenderedDOMComponentsWithClass(icon, "glyphicon-time"); + expect(iconElement.length).toBe(1); + expect(iconElement[0].props.className).toBe("glyphicon glyphicon-time"); + }); }); }); From 7b77458f65c5ac3218dfed2e5d3020462b6855f2 Mon Sep 17 00:00:00 2001 From: Lucas Myers Date: Thu, 29 Oct 2015 15:13:57 -0700 Subject: [PATCH 3/6] Updated Days, Months, and Years headers to use icons as https://github.com/Eonasdan/bootstrap-datetimepicker does --- src/DateTimePickerDate.js | 4 +++- src/DateTimePickerDays.js | 10 ++++++++-- src/DateTimePickerMonths.js | 9 +++++++-- src/DateTimePickerYears.js | 9 +++++++-- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/DateTimePickerDate.js b/src/DateTimePickerDate.js index df3cb868..bef39b69 100644 --- a/src/DateTimePickerDate.js +++ b/src/DateTimePickerDate.js @@ -84,6 +84,7 @@ export default class DateTimePickerDate extends Component {
- + - + diff --git a/src/DateTimePickerMonths.js b/src/DateTimePickerMonths.js index cb95d6be..461ebe91 100644 --- a/src/DateTimePickerMonths.js +++ b/src/DateTimePickerMonths.js @@ -1,6 +1,7 @@ import React, { Component, PropTypes } from "react"; import classnames from "classnames"; import moment from "moment"; +import DateTimePickerIcons from "./DateTimePickerIcons.js"; export default class DateTimePickerMonths extends Component { static propTypes = { @@ -35,11 +36,15 @@ export default class DateTimePickerMonths extends Component {
‹ + + {moment.months()[this.props.viewDate.month()]} {this.props.viewDate.year()}› + +
- + - + diff --git a/src/DateTimePickerYears.js b/src/DateTimePickerYears.js index 23e01903..707722fe 100644 --- a/src/DateTimePickerYears.js +++ b/src/DateTimePickerYears.js @@ -1,5 +1,6 @@ import React, { Component, PropTypes } from "react"; import classnames from "classnames"; +import DateTimePickerIcons from "./DateTimePickerIcons.js"; export default class DateTimePickerYears extends Component { static propTypes = { @@ -37,11 +38,15 @@ export default class DateTimePickerYears extends Component {
‹ + + {this.props.viewDate.year()}› + +
- + - + From a05b29db11a98c0245e4e3bd2fcc748ae1430c09 Mon Sep 17 00:00:00 2001 From: Lucas Myers Date: Thu, 29 Oct 2015 15:17:34 -0700 Subject: [PATCH 4/6] Added icon example using fontawesome to examples --- examples/basic/basic.js | 26 ++++++++++++++++++-------- examples/basic/index.html | 1 + 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/examples/basic/basic.js b/examples/basic/basic.js index f2947c32..76f418eb 100644 --- a/examples/basic/basic.js +++ b/examples/basic/basic.js @@ -76,15 +76,25 @@ class Basic extends Component { -
-
- Example with default Text - - 
 {''}
-
+
+
+ Example with default Text + + 
 {''}
+
+
+
+
+ Example with Icons + + 
 {''}
+
Default Basic Example diff --git a/examples/basic/index.html b/examples/basic/index.html index 6cb4dfc6..da25f817 100644 --- a/examples/basic/index.html +++ b/examples/basic/index.html @@ -3,6 +3,7 @@ Basic Example + From 18455fa2355167973b2ed022d0172292af282384 Mon Sep 17 00:00:00 2001 From: Lucas Myers Date: Thu, 29 Oct 2015 15:18:21 -0700 Subject: [PATCH 5/6] Updated REAMDE.md with documentation on icons --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 41a8e97f..b6bbbefe 100644 --- a/README.md +++ b/README.md @@ -43,6 +43,7 @@ DateTimeField | **minDate** | moment | undefined | The earliest date allowed for entry in the calendar view. | | **maxDate** | moment | undefined | The latest date allowed for entry in the calendar view. | | **mode** | string | undefined | Allows to selectively display only the time picker ('time') or the date picker ('date') | +| **icons** | object| {time: 'glyphicon glyphicon-time', date: 'glyphicon glyphicon-calendar', up: 'glyphicon glyphicon-chevron-up', down: 'glyphicon glyphicon-chevron-down', previous: 'glyphicon glyphicon-chevron-left', next: 'glyphicon glyphicon-chevron-right', today: 'glyphicon glyphicon-screenshot', clear: 'glyphicon glyphicon-trash', close: 'glyphicon glyphicon-remove'} | Optionally replace any/all of the icons | Update Warning =============================== From 92da7dc50d50695600d94b790dadb04b60d21aa1 Mon Sep 17 00:00:00 2001 From: Lucas Myers Date: Thu, 29 Oct 2015 15:57:06 -0700 Subject: [PATCH 6/6] Put Months and Years click handlers back on headers --- src/DateTimePickerMonths.js | 8 ++++---- src/DateTimePickerYears.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/DateTimePickerMonths.js b/src/DateTimePickerMonths.js index 461ebe91..8368a85a 100644 --- a/src/DateTimePickerMonths.js +++ b/src/DateTimePickerMonths.js @@ -36,14 +36,14 @@ export default class DateTimePickerMonths extends Component {
‹ + + {year} - {year + 9}› + +
- - diff --git a/src/DateTimePickerYears.js b/src/DateTimePickerYears.js index 707722fe..61fae006 100644 --- a/src/DateTimePickerYears.js +++ b/src/DateTimePickerYears.js @@ -38,14 +38,14 @@ export default class DateTimePickerYears extends Component {
- + + {this.props.viewDate.year()} - + +
- -
- + + {year} - {year + 9} - + +