From 1f4911b4bcadd0689ed8ceef175cb46a36efdeeb Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Wed, 25 Nov 2015 00:58:36 +0100 Subject: [PATCH] Split examples to make them a bit more clear --- examples/src/Examples.js | 28 +++++++++++++--------- examples/src/examples/DisabledDays.js | 32 ++++++++++++++++++++++++++ examples/src/examples/InputField.js | 20 +++++++--------- examples/src/examples/SelectableDay.js | 2 +- examples/webpack.config.js | 13 ++++++++++- 5 files changed, 70 insertions(+), 25 deletions(-) create mode 100644 examples/src/examples/DisabledDays.js diff --git a/examples/src/Examples.js b/examples/src/Examples.js index 22e17ede33..6d974df7c9 100644 --- a/examples/src/Examples.js +++ b/examples/src/Examples.js @@ -5,13 +5,14 @@ import { createHistory } from "history"; import Prism from "./vendors/prism"; import "./vendors/prism.css"; -import SimpleCalendar from "./examples/SimpleCalendar"; -import SelectableDay from "./examples/SelectableDay"; +import Birthdays from "./examples/Birthdays"; +import DisabledDays from "./examples/DisabledDays"; import InputField from "./examples/InputField"; -import Range from "./examples/Range"; import Localized from "./examples/Localized"; +import Range from "./examples/Range"; +import SelectableDay from "./examples/SelectableDay"; +import SimpleCalendar from "./examples/SimpleCalendar"; import TouchEvents from "./examples/TouchEvents"; -import Birthdays from "./examples/Birthdays"; import YearCalendar from "./examples/YearCalendar"; import YearNavigation from "./examples/YearNavigation"; @@ -28,9 +29,14 @@ const EXAMPLES = { description: "This example uses the modifiers prop and DateUtils to select a day. Note how the selected day is stored in the parent component's state.", Component: SelectableDay }, + disabled: { + title: "Disabled Days", + description: "This example extends the previous one with a disabled modifier which avoid the user selecting a day in the past. Note that the handleDayClick method does not set the component’s state when a day has been marked as disabled.
It also uses the enableOutsideDays prop to display the days outside the current month.", + Component: DisabledDays + }, input: { title: "Input Field", - description: "Binding the calendar with an input field: users can change the field’s value or interact with the calendar, while both stay in sync.
In this example, past days are disabled with a disabled modifier. Setting showOutsideDays, it displays days not belonging to the month.", + description: "Binding the calendar with an input field: the user can both change the field’s value or interact with the calendar.", Component: InputField }, range: { @@ -40,19 +46,19 @@ const EXAMPLES = { }, localized: { title: "Localized Calendar", - description: "This calendar is localized using moment.js. Read more", + description: "This calendar is localized using moment.js. Read more about localization.", Component: Localized }, - touch: { - title: "Touch Events", - description: "Make a better interaction on touch devices with the included touch event handlers (as onDayTouchTap) and enabling react-touch-tap-event-plugin.", - Component: TouchEvents - }, yearNavigation: { title: "Year Navigation", description: "With the captionElement prop, you can use your own element as month caption. In this example, the caption element is a form to navigate between years and months.", Component: YearNavigation }, + touch: { + title: "Touch Events", + description: "Make a better interaction on touch devices with the included touch event handlers (as onDayTouchTap) and enabling react-touch-tap-event-plugin.", + Component: TouchEvents + }, birthdays: { title: "Birthdays", description: "Add custom content to days cells using the renderDay prop.", diff --git a/examples/src/examples/DisabledDays.js b/examples/src/examples/DisabledDays.js new file mode 100644 index 0000000000..769fb88a57 --- /dev/null +++ b/examples/src/examples/DisabledDays.js @@ -0,0 +1,32 @@ +import React from "react"; +import DayPicker, { DateUtils } from "react-day-picker"; + +import "react-day-picker/lib/style.css"; + +export default class DisabledDays extends React.Component { + + state = { + selectedDay: null + } + + handleDayClick(e, day, modifiers) { + if (modifiers.indexOf("disabled") > -1) { + console.log("User clicked a disabled day."); + return; + } + this.setState({ + selectedDay: day + }); + } + + render() { + + // Add the `selected` modifier to the cell of the clicked day + const modifiers = { + disabled: DateUtils.isPastDay, + selected: day => DateUtils.isSameDay(this.state.selectedDay, day) + }; + + return ; + } +} diff --git a/examples/src/examples/InputField.js b/examples/src/examples/InputField.js index 145b0db95b..52b941210b 100644 --- a/examples/src/examples/InputField.js +++ b/examples/src/examples/InputField.js @@ -13,24 +13,22 @@ export default class InputField extends React.Component { } handleInputChange(e) { - const { value } = e.target; - let { month } = this.state; // Change the current month only if the value entered by the user is a valid // date, according to the `L` format if (moment(value, "L", true).isValid()) { - month = moment(value, "L").toDate(); + this.setState({ + month: moment(value, "L").toDate(), + value + }, this.showCurrentDate); + } + else { + this.setState({ value }, this.showCurrentDate); } - - this.setState({ value, month }, this.showCurrentDate); - } - handleDayClick(e, day, modifiers) { - if (modifiers.indexOf("disabled") > -1) { - return; - } + handleDayClick(e, day) { this.setState({ value: moment(day).format("L"), month: day @@ -59,10 +57,8 @@ export default class InputField extends React.Component { DateUtils.isSameDay(selectedDay, day) }} onDayClick={ this.handleDayClick.bind(this) } diff --git a/examples/src/examples/SelectableDay.js b/examples/src/examples/SelectableDay.js index 560f57ab79..72540bf9f4 100644 --- a/examples/src/examples/SelectableDay.js +++ b/examples/src/examples/SelectableDay.js @@ -31,7 +31,7 @@ export default class SelectableDay extends React.Component { }; return ( -
+