From f13fd5a53f7c3e9824ba99056f1c434a706b7a7a Mon Sep 17 00:00:00 2001 From: Ricardo Machado Date: Tue, 21 Mar 2017 13:49:51 +0100 Subject: [PATCH] Calendar component - Issue #36 (WIP) (#45) * Changes the builder to use the util.inspect() to output the error Adds the Calendar component Updates the example to show the dates (not final) Changes the DaysPanel to export directly the class Makes the code more explicit on the calendar.js Makes the styles customizable Fixes the _default.yaml to be able to build Fixes SCSS to build :D Changes the builder to actually output (and colorize) when an error happens Adds classNames to elements to make them more specific Fixes bug where an error would be triggered when the initialDates attribute was not set. Also resets the minLimit to the passed one when provided via attributes or to null when none is available Hides the nav button when not enabled Changes the _default.yaml to have decent colors for the rendering :P Adds the function leftPad() to the helpers to do left padding of the months and days Improves the code based on the reviews' feedback. Also makes it more testable and fixes some bugs detected when developing the unit tests Converts the DaysPanel to a stateless component with no mods (for now) Improves the code based on reviews' feedback. Also makes it more testable and introduces a new method to merge the locale definitions Removes the enzyme-to-json package and brings jest-serializdr-enzyme which is then configured in the jest config Reverts the removal to give time to migrate the other unit tests. Adds the serializer configuration to the jest.config.json Adds the unit tests and its snapshots Updates the tests for UTC Removes the mods and the dataAttrs from the 'defaultProps'. Updates the snapshots Attempt to set some colors matching the defined color pattern Updates the snapshots Adds some aria-labels to increase accessibility Adds updated snapshots Fixes a lint error :P Adds a function to normalize the dates on the time Changes the code to use the newly added function Updates the tests to use the normalizeDate() and updates the snapshots Moves the 'bind' to its own declaration, to prevent warnings from linting Changed the 'extraClasses' variable to be named 'mods' Changes the 'npm test' to set the testing to be always UTC (to solve CI issues) Also added the TZ=utc to the update-snapshots script Adds a function processProps() to be used by both the constructor and the componentWillReceiveProps() from the Calendar component Adds a wrapper component to make the test of the props being changed. Also adds a test to verify the componentWillReceiveProps. Updates the snapshots Improves coverage of the componentWillReceiveProps Downgraded eslint-plugin-react due to a bug on the jsx-indent rule: https://github.com/yannickcr/eslint-plugin-react/issues/1117 Fixes the issue with the eslint-plugin-react's version, enabling the indentLogicalExpressions Adds the possibility to override the display text in the navigation buttons, as well as the aria-label attribute * Adds the examples with a normal calendar with all props set and a range calendar with all props set * Fixes issue where renderDate was not between the min and max limits, so needed to be readjusted * Fixes issue where in the edge-months (0 and 11) we were doing improper math :D * Updates the snapshots and the tests to cover properly with the new changes * Fixes poor configuration on the .eslintrc * Improved readability on the ternary operator of the handling of the renderDate --- packages/travix-ui-kit/.eslintrc | 1 + packages/travix-ui-kit/builder/index.js | 3 +- packages/travix-ui-kit/components/_helpers.js | 36 + .../components/calendar/calendar.js | 314 + .../components/calendar/calendar.md | 102 + .../components/calendar/calendar.scss | 175 + .../components/calendar/constants/calendar.js | 8 + .../components/calendar/panels/days.js | 6 + .../components/calendar/views/days.js | 353 + packages/travix-ui-kit/components/index.js | 2 + packages/travix-ui-kit/components/index.scss | 1 + packages/travix-ui-kit/package.json | 7 +- packages/travix-ui-kit/tests/jest.config.json | 7 +- .../calendar.normal.spec.js.snap | 10704 ++++++++++++++++ .../__snapshots__/calendar.range.spec.js.snap | 1644 +++ .../unit/calendar/calendar.normal.spec.js | 406 + .../unit/calendar/calendar.range.spec.js | 151 + .../unit/calendar/calendarWrapper.mock.js | 44 + packages/travix-ui-kit/themes/_default.yaml | 111 +- 19 files changed, 14045 insertions(+), 30 deletions(-) create mode 100644 packages/travix-ui-kit/components/calendar/calendar.js create mode 100644 packages/travix-ui-kit/components/calendar/calendar.md create mode 100644 packages/travix-ui-kit/components/calendar/calendar.scss create mode 100644 packages/travix-ui-kit/components/calendar/constants/calendar.js create mode 100644 packages/travix-ui-kit/components/calendar/panels/days.js create mode 100644 packages/travix-ui-kit/components/calendar/views/days.js create mode 100644 packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap create mode 100644 packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.range.spec.js.snap create mode 100644 packages/travix-ui-kit/tests/unit/calendar/calendar.normal.spec.js create mode 100644 packages/travix-ui-kit/tests/unit/calendar/calendar.range.spec.js create mode 100644 packages/travix-ui-kit/tests/unit/calendar/calendarWrapper.mock.js diff --git a/packages/travix-ui-kit/.eslintrc b/packages/travix-ui-kit/.eslintrc index 1e6473a..c9c964b 100644 --- a/packages/travix-ui-kit/.eslintrc +++ b/packages/travix-ui-kit/.eslintrc @@ -31,6 +31,7 @@ "comma-dangle": ["error", "always-multiline"], "import/no-extraneous-dependencies": ["error", {"devDependencies": true}], "max-len": [2, {"code": 120, "comments": 120, "tabWidth": 4}], + "react/jsx-indent": [2, 2], "react/react-in-jsx-scope": 0, "no-else-return": 0 } diff --git a/packages/travix-ui-kit/builder/index.js b/packages/travix-ui-kit/builder/index.js index a2e0efb..b7f90cf 100755 --- a/packages/travix-ui-kit/builder/index.js +++ b/packages/travix-ui-kit/builder/index.js @@ -3,6 +3,7 @@ const builder = require('./builder'); const pkg = require('../package.json'); const program = require('commander'); +const util = require('util'); program .version(pkg.version) @@ -16,4 +17,4 @@ program.parse(process.argv); builder(program) .then(() => console.log('Done!')) - .catch(console.error); + .catch(e => console.error(util.inspect(e, true, undefined, true))); diff --git a/packages/travix-ui-kit/components/_helpers.js b/packages/travix-ui-kit/components/_helpers.js index 6d1dbbb..694b371 100644 --- a/packages/travix-ui-kit/components/_helpers.js +++ b/packages/travix-ui-kit/components/_helpers.js @@ -22,8 +22,44 @@ function getDataAttributes(attributes = {}) { }, {}); } +/** + * @function leftPad + * @param {Number} value The value to be left padded + * @return {String} The value with a leading 0 if it's between 1 - 9 + */ +function leftPad(value, maxLength = 2, leftPaddedBy = '0') { + const valueStringified = value.toString(); + if (valueStringified.length >= maxLength) { + return valueStringified; + } + + return leftPaddedBy.repeat(maxLength - valueStringified.length) + valueStringified; +} + +/** + * Receives a date object and normalizes it to the proper hours, minutes, + * seconds and milliseconds. + * + * @method normalizeDate + * @param {Date} dateObject Date object to be normalized. + * @param {Number} hours Value to set the hours to. Defaults to 0 + * @param {Number} minutes Value to set the minutes to. Defaults to 0 + * @param {Number} seconds Value to set the seconds to. Defaults to 0 + * @param {Number} milliseconds Value to set the milliseconds to. Defaults to 0 + * @return {Date} The normalized date object. + */ +function normalizeDate(dateObject, hours = 0, minutes = 0, seconds = 0, milliseconds = 0) { + dateObject.setHours(hours); + dateObject.setMinutes(minutes); + dateObject.setSeconds(seconds); + dateObject.setMilliseconds(milliseconds); + return dateObject; +} + // Exports export default { getClassNamesWithMods, getDataAttributes, + leftPad, + normalizeDate, }; diff --git a/packages/travix-ui-kit/components/calendar/calendar.js b/packages/travix-ui-kit/components/calendar/calendar.js new file mode 100644 index 0000000..52e9fa0 --- /dev/null +++ b/packages/travix-ui-kit/components/calendar/calendar.js @@ -0,0 +1,314 @@ +import React, { Component, PropTypes } from 'react'; +import { getClassNamesWithMods, getDataAttributes, normalizeDate } from '../_helpers'; +import DaysPanel from './panels/days'; +import calendarConstants from './constants/calendar'; + +const { + CALENDAR_MOVE_TO_NEXT, + CALENDAR_MOVE_TO_PREVIOUS, + CALENDAR_SELECTION_TYPE_RANGE, +} = calendarConstants; + + +/** + * Processes the given props and the existing state and returns + * a new state. + * + * @function processProps + * @param {Object} props Props to base the new state on. + * @param {Object} state (Existing) state to be based on for the existing values. + * @return {Object} New state to be set/used. + * @static + */ +function processProps(props) { + const { initialDates, maxDate, minDate, selectionType } = props; + const maxLimit = maxDate ? normalizeDate(new Date(maxDate), 23, 59, 59, 999) : null; + + const renderDate = (initialDates && initialDates.length && initialDates[0]) ? new Date(initialDates[0]) : new Date(); + normalizeDate(renderDate); + + let minLimit = minDate ? normalizeDate(new Date(minDate)) : null; + let selectedDates = [null, null]; + + if (initialDates) { + selectedDates = selectedDates.map((item, idx) => { + if (!initialDates[idx]) { + return null; + } + + return normalizeDate(new Date(initialDates[idx])); + }); + } + + /** + * If a minDate or a maxDate is set, let's check if any selectedDates are outside of the boundaries. + * If so, resets the selectedDates. + */ + if (minLimit || maxLimit) { + const isAnyDateOutOfLimit = selectedDates.some(item => ( + item && ( + (minLimit && (minLimit.getTime() > item.getTime())) || + (maxLimit && (maxLimit.getTime() < item.getTime())) + ) + )); + + if (isAnyDateOutOfLimit) { + selectedDates = [null, null]; + console.warn(`A calendar instance contains a selectedDate outside of the minDate and maxDate boundaries`); // eslint-disable-line + } + } + + /** If initialDates is defined and we have a start date, we want to set it as the minLimit */ + if (selectedDates[0] && (selectionType === CALENDAR_SELECTION_TYPE_RANGE)) { + minLimit = selectedDates[0]; + } + + /** If the renderDate is not between any of the minLimit and/or maxDate, we need to redefine it. */ + if ( + (minLimit && (renderDate.getMonth() < minLimit.getMonth())) || + (maxLimit && (renderDate.getMonth() > maxLimit.getMonth())) + ) { + renderDate.setMonth(minLimit.getMonth()); + } + + return { + maxLimit, + minLimit, + renderDate, + selectedDates, + }; +} + +export default class Calendar extends Component { + constructor(props) { + super(); + + this.moveToMonth = this.moveToMonth.bind(this); + this.state = processProps(props); + } + + componentWillReceiveProps(newProps) { + const { initialDates, maxDate, minDate, selectionType } = newProps; + + let propsChanged = ( + (maxDate !== this.props.maxDate) || + (minDate !== this.props.minDate) || + (selectionType !== this.props.selectionType) + ); + + if (initialDates) { + if (this.props.initialDates) { + propsChanged = propsChanged || initialDates.some((item, idx) => item !== this.props.initialDates[idx]); + } else { + propsChanged = true; + } + } + + if (propsChanged) { + this.setState(() => processProps(newProps)); + } + } + + /** + * Changes the renderDate of the calendar to the previous or next month. + * Also triggers the onNavPreviousMonth/onNavNextMonth when the state gets changed + * and passes the new date to it. + * + * @method moveToMonth + * @param {String} direction Defines to which month is the calendar moving (previous or next). + */ + moveToMonth(direction) { + const { onNavNextMonth, onNavPreviousMonth } = this.props; + + this.setState(({ renderDate }) => { + renderDate.setMonth(renderDate.getMonth() + (direction === CALENDAR_MOVE_TO_PREVIOUS ? -1 : 1)); + return { renderDate }; + }, () => { + if ((direction === CALENDAR_MOVE_TO_PREVIOUS) && onNavPreviousMonth) { + onNavPreviousMonth(this.state.renderDate); + } else if ((direction === CALENDAR_MOVE_TO_NEXT) && onNavNextMonth) { + onNavNextMonth(this.state.renderDate); + } + }); + } + + /** + * Handler for the day's selection. Passed to the DaysPanel -> DaysView. + * Also triggers the onSelectDay function (when passed) after the state is updated, + * passing the selectedDates array to it. + * + * @method onSelectDay + * @param {Date} dateSelected Date selected by the user. + */ + onSelectDay(dateSelected) { + const { onSelectDay, selectionType, minDate } = this.props; + + this.setState((prevState) => { + let { minLimit, renderDate, selectedDates } = prevState; + + /** + * If the calendar's selectionType is 'normal', we always set the date selected + * to the first position of the selectedDates array. + * If the selectionType is 'range', we need to verify the following requirements: + * + * - If there's no start date selected, then the selected date becomes the start + * date and the minLimit becomes that same date. Prevents the range selection to the past. + * + * - If there's a start date already selected: + * + * - If there's no end date selected, then the selected date becomes the end date. Also + * if the start and end dates are the same, it will remove the minLimit as the layout renders + * them as a 'normal' selection. + * + * - If there's an end date selected and the user is clicking on the start date again, it + * clears the selections and the limits, resetting the range. + */ + if (selectionType === CALENDAR_SELECTION_TYPE_RANGE) { + if (selectedDates[0]) { + if (!selectedDates[1]) { + selectedDates[1] = dateSelected; + if (selectedDates[0].toDateString() === selectedDates[1].toDateString()) { + minLimit = minDate ? normalizeDate(new Date(minDate)) : null; + } + } else { + selectedDates = [null, null]; + minLimit = minDate ? normalizeDate(new Date(minDate)) : null; + } + } else { + selectedDates[0] = dateSelected; + minLimit = dateSelected; + selectedDates[1] = null; + } + } else { + selectedDates[0] = dateSelected; + } + + /** + * If the user selects a day of the previous or next month, the rendered month switches to + * the one of the selected date. + */ + if (dateSelected.getMonth() !== renderDate.getMonth()) { + renderDate = new Date(dateSelected.toDateString()); + } + + return { + minLimit, + renderDate, + selectedDates, + }; + }, () => { + if (onSelectDay) { + onSelectDay(this.state.selectedDates); + } + }); + } + + render() { + const { dataAttrs = {}, isDaySelectableFn, locale, mods = [], navButtons, selectionType } = this.props; + const { maxLimit, minLimit, renderDate, selectedDates } = this.state; + + const restProps = getDataAttributes(dataAttrs); + const className = getClassNamesWithMods('ui-calendar', mods); + + return ( +
+ this.moveToMonth(CALENDAR_MOVE_TO_NEXT)} + onNavPreviousMonth={() => this.moveToMonth(CALENDAR_MOVE_TO_PREVIOUS)} + onSelectDay={dt => this.onSelectDay(dt)} + renderDate={renderDate} + selectedDates={selectedDates} + selectionType={selectionType} + /> +
+ ); + } +} + +Calendar.defaultProps = { + selectionType: 'normal', +}; + +Calendar.propTypes = { + /** + * Data attribute. You can use it to set up GTM key or any custom data-* attribute + */ + dataAttrs: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.object, + ]), + + /** + * Optional. Initial value of the calendar. Defaults to the current date as per the locale. + */ + initialDates: PropTypes.array, + + /** + * Optional. Function to be triggered to evaluate if the date (passed as an argument) + * is selectable. Must return a boolean. + */ + isDaySelectableFn: PropTypes.func, + + /** + * Locale definitions, with the calendar's months and weekdays in the right language. + * Also contains the startWeekDay which defines in which week day starts the week. + */ + locale: PropTypes.shape({ + months: PropTypes.array, + weekDays: PropTypes.array, + startWeekDay: PropTypes.number, + }), + + /** + * Sets the max date boundary. Defaults to `null`. + */ + maxDate: PropTypes.string, + + /** + * Sets the min date boundary. Defaults to `null`. + */ + minDate: PropTypes.string, + + /** + * You can provide set of custom modifications. + */ + mods: PropTypes.arrayOf(PropTypes.string), + + navButtons: PropTypes.shape({ + days: PropTypes.shape({ + next: PropTypes.shape({ + ariaLabel: PropTypes.string, + displayValue: PropTypes.string, + }), + previous: PropTypes.shape({ + ariaLabel: PropTypes.string, + displayValue: PropTypes.string, + }), + }), + }), + + /** + * Function to be triggered when pressing the nav's "next" button. + */ + onNavNextMonth: PropTypes.func, + + /** + * Function to be triggered when pressing the nav's "previous" button. + */ + onNavPreviousMonth: PropTypes.func, + + /** + * Function to be triggered when selecting a day. + */ + onSelectDay: PropTypes.func, + + /** + * Optional. Type of date selection. + */ + selectionType: PropTypes.oneOf(['normal', 'range']), +}; diff --git a/packages/travix-ui-kit/components/calendar/calendar.md b/packages/travix-ui-kit/components/calendar/calendar.md new file mode 100644 index 0000000..f816ae0 --- /dev/null +++ b/packages/travix-ui-kit/components/calendar/calendar.md @@ -0,0 +1,102 @@ +# Basic calendar with attributes set: + +
+ ((dt.getDay() > 0) && (dt.getDay() < 6))} + locale={{ + months: [ + { name: 'Janeiro', short: 'Jan' }, + { name: 'Fevereiro', short: 'Fev' }, + { name: 'Março', short: 'Mar' }, + { name: 'Abril', short: 'Abr' }, + { name: 'Maio', short: 'Mai' }, + { name: 'Junho', short: 'Jun' }, + { name: 'Julho', short: 'Jul' }, + { name: 'Agosto', short: 'Ago' }, + { name: 'Setembro', short: 'Set' }, + { name: 'Outubro', short: 'Out' }, + { name: 'Novembro', short: 'Nov' }, + { name: 'Dezembro', short: 'Dez' }, + ], + weekDays: [ + { name: 'Domingo', short: 'Dom' }, + { name: 'Segunda', short: 'Seg' }, + { name: 'Terça', short: 'Ter' }, + { name: 'Quarta', short: 'Qua' }, + { name: 'Quinta', short: 'Qui' }, + { name: 'Sexta', short: 'Sex' }, + { name: 'Sábado', short: 'Sáb' }, + ], + }} + minDate="2017-04-01" + maxDate="2017-06-01" + navButtons={{ + days: { + next: { + displayValue: '›' + }, + previous: { + displayValue: '‹' + }, + } + }} + onSelectDay={dt => (document.getElementById('output_1').value = dt[0].toDateString())} + /> + +
+ + +--- + +# Range calendar with attributes set: + +
+ ((dt.getDay() > 0) && (dt.getDay() < 6))} + locale={{ + months: [ + { name: 'Janeiro', short: 'Jan' }, + { name: 'Fevereiro', short: 'Fev' }, + { name: 'Março', short: 'Mar' }, + { name: 'Abril', short: 'Abr' }, + { name: 'Maio', short: 'Mai' }, + { name: 'Junho', short: 'Jun' }, + { name: 'Julho', short: 'Jul' }, + { name: 'Agosto', short: 'Ago' }, + { name: 'Setembro', short: 'Set' }, + { name: 'Outubro', short: 'Out' }, + { name: 'Novembro', short: 'Nov' }, + { name: 'Dezembro', short: 'Dez' }, + ], + weekDays: [ + { name: 'Domingo', short: 'Dom' }, + { name: 'Segunda', short: 'Seg' }, + { name: 'Terça', short: 'Ter' }, + { name: 'Quarta', short: 'Qua' }, + { name: 'Quinta', short: 'Qui' }, + { name: 'Sexta', short: 'Sex' }, + { name: 'Sábado', short: 'Sáb' }, + ], + }} + minDate="2017-04-01" + maxDate="2017-06-01" + navButtons={{ + days: { + next: { + displayValue: '›' + }, + previous: { + displayValue: '‹' + }, + } + }} + onSelectDay={dt => { + document.getElementById('output_2').value = dt[0].toDateString() + ' / ' + dt[1].toDateString(); + }} + selectionType="range" + /> + +
+--- diff --git a/packages/travix-ui-kit/components/calendar/calendar.scss b/packages/travix-ui-kit/components/calendar/calendar.scss new file mode 100644 index 0000000..6b0ea33 --- /dev/null +++ b/packages/travix-ui-kit/components/calendar/calendar.scss @@ -0,0 +1,175 @@ +.ui-calendar { + display: flex; + flex-flow: column wrap; + height: $tx-calendar-height; + width: $tx-calendar-width; +} + +.ui-calendar-days-panel { + align-items: stretch; + display: flex; + flex-flow: column wrap; + flex: 1 1 100%; + + &_hidden { + display: none; + } +} + +.ui-calendar-days { + align-items: stretch; + display: flex; + flex-flow: column wrap; + flex: 1 1 100%; +} + +.ui-calendar-days__nav { + align-items: stretch; + background: $tx-calendar-nav-background; + border-radius: $tx-calendar-nav-border-radius; + display: flex; + flex: 0 0 $tx-calendar-nav-height; + flex-flow: row nowrap; + width: 100%; +} + +.ui-calendar-days__previous-month, +.ui-calendar-days__next-month { + align-self: center; + background: $tx-calendar-nav-button-background-color-end; + background: linear-gradient(to bottom,$tx-calendar-nav-button-background-color-start 0,$tx-calendar-nav-button-background-color-end 100%); + border: none; + border-radius: $tx-calendar-nav-button-border-radius; + box-shadow: 0 2px $tx-calendar-nav-button-box-shadow-color; + cursor: pointer; + color: $tx-calendar-nav-button-color; + flex: 0 0 $tx-calendar-nav-button-width; + font-weight: $tx-calendar-nav-button-font-weight; + height: $tx-calendar-nav-button-height; + margin: $tx-calendar-nav-button-margin; + + &[disabled] { + visibility: hidden; + } +} + +.ui-calendar-days__rendered-month { + align-self: center; + color: $tx-calendar-nav-label-color; + flex: 1 1 100%; + font-family: sans-serif; + font-weight: $tx-calendar-nav-label-font-weight; + text-align: center; +} + +.ui-calendar-days__weekdays { + align-items: center; + background-color: $tx-calendar-header-background-color; + display: flex; + flex: 0 0 $tx-calendar-header-height; + flex-flow: row nowrap; +} + +.ui-calendar-days__weekday { + color: $tx-calendar-header-weekday-color; + display: flex; + flex: 1 1 14.285%; + font-family: sans-serif; + font-size: $tx-calendar-header-weekday-font-size; + font-weight: $tx-calendar-header-weekday-font-weight; + justify-content: center; + text-transform: lowercase; +} + +.ui-calendar-days__options { + border: 1px solid $tx-calendar-options-border-color; + display: flex; + flex: 1 1 auto; + flex-flow: row wrap; +} + +.ui-calendar-days-option { + background: $tx-calendar-options-option-background-color; + border: none; + border-bottom: 1px solid $tx-calendar-options-option-border-bottom; + border-right: 1px solid $tx-calendar-options-option-border-right; + color: $tx-calendar-options-option-color; + cursor: pointer; + flex: 1 1 14.285%; + font-size: $tx-calendar-options-option-font-size; + outline: none; + + &:nth-of-type(7), + &:nth-of-type(14), + &:nth-of-type(21), + &:nth-of-type(28), + &:nth-of-type(35), + &:nth-of-type(42) { + border-right: none; + } + + &:nth-of-type(36), + &:nth-of-type(37), + &:nth-of-type(38), + &:nth-of-type(39), + &:nth-of-type(40), + &:nth-of-type(41), + &:nth-of-type(42) { + border-bottom: none; + } + + &[disabled] { + background: $tx-calendar-options-option-disabled-background-color; + color: $tx-calendar-options-option-disabled-color; + } + + &.ui-calendar-days-option_selected, + &.ui-calendar-days-option_selected-start, + &.ui-calendar-days-option_selected-end, + &:not([disabled]):hover { + background: $tx-calendar-options-option-hover-background-color; + color: $tx-calendar-options-option-hover-color; + } + + &.ui-calendar-days-option_selected-between { + background: $tx-calendar-options-option-range-between-background-color; + } + + &:not([disabled]):focus { + z-index: 1; + } +} + +.ui-calendar-days-option_selected-start, +.ui-calendar-days-option_selected-end { + position: relative; + + &:before, + &:after { + border: 18px solid $tx-calendar-options-option-range-after-border-color; + bottom: 0; + content: " "; + position: absolute; + top: 0; + } +} + +.ui-calendar-days-option_selected-start:after { + border-left: 10px solid $tx-calendar-options-option-range-start-after-border-color; + border-right: none; + right: -10px; +} + +.ui-calendar-days-option_selected-end:before { + border-left: none; + border-right: 10px solid $tx-calendar-options-option-range-end-after-border-color; + left: -10px; +} + +.ui-calendar-days-option_previous-month { + background: $tx-calendar-options-option-previous-month-background-color; +} + +.ui-calendar-days-option_next-month { + background: $tx-calendar-options-option-next-month-background-color; +} diff --git a/packages/travix-ui-kit/components/calendar/constants/calendar.js b/packages/travix-ui-kit/components/calendar/constants/calendar.js new file mode 100644 index 0000000..b89bfc6 --- /dev/null +++ b/packages/travix-ui-kit/components/calendar/constants/calendar.js @@ -0,0 +1,8 @@ +/** + * This file contains constants used by the calendar component. + */ +module.exports.CALENDAR_MOVE_TO_NEXT = 'next'; +module.exports.CALENDAR_MOVE_TO_PREVIOUS = 'previous'; + +module.exports.CALENDAR_SELECTION_TYPE_NORMAL = 'normal'; +module.exports.CALENDAR_SELECTION_TYPE_RANGE = 'range'; diff --git a/packages/travix-ui-kit/components/calendar/panels/days.js b/packages/travix-ui-kit/components/calendar/panels/days.js new file mode 100644 index 0000000..cf6c438 --- /dev/null +++ b/packages/travix-ui-kit/components/calendar/panels/days.js @@ -0,0 +1,6 @@ +import React from 'react'; +import DaysView from '../views/days'; + +export default function Days(props) { + return
; +} diff --git a/packages/travix-ui-kit/components/calendar/views/days.js b/packages/travix-ui-kit/components/calendar/views/days.js new file mode 100644 index 0000000..02475c0 --- /dev/null +++ b/packages/travix-ui-kit/components/calendar/views/days.js @@ -0,0 +1,353 @@ +import React, { Component, PropTypes } from 'react'; + +import { getClassNamesWithMods, getDataAttributes, leftPad } from '../../_helpers'; +import calendarConstants from '../constants/calendar'; + +const { CALENDAR_SELECTION_TYPE_RANGE } = calendarConstants; + +class Days extends Component { + constructor(props) { + super(props); + + this.getLocale = this.getLocale.bind(this); + this.isOptionEnabled = this.isOptionEnabled.bind(this); + this.renderDays = this.renderDays.bind(this); + this.renderNav = this.renderNav.bind(this); + this.renderWeekDays = this.renderWeekDays.bind(this); + + this.locale = this.getLocale(); + this.navButtons = this.getNavButtons(); + } + + /** + * Returns a merge between a default locale and a provided one via props. + * + * @method getLocale + * @return {Object} The final locale, which is stored in a property of the instance. + */ + getLocale() { + const { locale } = this.props; + + const defaultLocale = { + months: [ + { name: 'January', short: 'Jan' }, + { name: 'February', short: 'Feb' }, + { name: 'March', short: 'Mar' }, + { name: 'April', short: 'Apr' }, + { name: 'May', short: 'May' }, + { name: 'June', short: 'Jun' }, + { name: 'July', short: 'Jul' }, + { name: 'August', short: 'Aug' }, + { name: 'September', short: 'Sep' }, + { name: 'October', short: 'Oct' }, + { name: 'November', short: 'Nov' }, + { name: 'December', short: 'Dec' }, + ], + startWeekDay: 1, + weekDays: [ + { name: 'Sunday', short: 'Sun' }, + { name: 'Monday', short: 'Mon' }, + { name: 'Tuesday', short: 'Tue' }, + { name: 'Wednesday', short: 'Wed' }, + { name: 'Thursday', short: 'Thu' }, + { name: 'Friday', short: 'Fri' }, + { name: 'Saturday', short: 'Sat' }, + ], + }; + + return locale ? Object.assign(defaultLocale, locale) : defaultLocale; + } + + getNavButtons() { + const { navButtons } = this.props; + + const defaultNavButtons = { + days: { + next: { + displayValue: '>', + }, + previous: { + displayValue: '<', + }, + }, + }; + + return navButtons ? Object.assign(defaultNavButtons, navButtons) : defaultNavButtons; + } + + /** + * If any of the boundaries is defined and the date being rendered is out of those boundaries + * or if there's a function to check if the day is selectable and it returns false, + * returns false. + * + * @method isOptionEnabled + * @param {Date} dateToBeRendered Date object to be verified. + * @return {Boolean} Returns true when enabled, false when disabled. + */ + isOptionEnabled(dateToBeRendered) { + const { isDaySelectableFn, maxDate, minDate } = this.props; + + if ( + (maxDate && (maxDate.getTime() < dateToBeRendered.getTime())) || + (minDate && (minDate.getTime() > dateToBeRendered.getTime())) || + (isDaySelectableFn && !isDaySelectableFn(dateToBeRendered)) + ) { + return false; + } + + return true; + } + + /** + * Renders the options with the days in the view. + * It does so, by calculating the number of days needed from the previous month and, + * starting from that day, iterates 42 days (to fill in all the 'options' in the calendar). + * While doing so, it handles the classes that the option element must have. Depending on + * if it is a 'range' or 'normal' calendar will determine how the selection (when applicable) + * should be rendered. + * Also handles the special case where, in a 'range' calendar, if both start and end dates are + * equal, it displays as a 'normal' selection (with the 'selected' modifier). + * + * @method renderDays + * @return {HTMLElement} + */ + renderDays() { + const { onSelectDay, renderDate, selectedDates, selectionType } = this.props; + const { months, startWeekDay, weekDays } = this.locale; + + /** Calculates the amount of days that */ + const currentDate = new Date(renderDate.getFullYear(), renderDate.getMonth(), 1, 0, 0, 0); + const firstWeekDayOfMonth = currentDate.getDay(); + const numDaysOfPreviousMonth = firstWeekDayOfMonth < startWeekDay ? 6 : (firstWeekDayOfMonth - startWeekDay); + + currentDate.setDate(currentDate.getDate() - numDaysOfPreviousMonth); + + const options = []; + let counter = 0; + + const limits = selectedDates.map(item => (item ? item.getTime() : null)); + const selectedDatesAreEqual = (limits.length === 2) && (limits[0] === limits[1]); + + do { + const mods = []; + const selectedDate = selectedDates && selectedDates.find((item) => { + return item && (item.toDateString() === currentDate.toDateString()); + }); + + if (currentDate.getMonth() < renderDate.getMonth()) { + mods.push('previous-month'); + } else if (currentDate.getMonth() > renderDate.getMonth()) { + mods.push('next-month'); + } + + if (selectedDate) { + if ((selectionType === CALENDAR_SELECTION_TYPE_RANGE) && !selectedDatesAreEqual) { + mods.push((selectedDates.indexOf(selectedDate) === 0) ? 'selected-start' : 'selected-end'); + } else { + mods.push('selected'); + } + } else if (limits[1] && (limits[0] <= currentDate.getTime()) && (limits[1] >= currentDate.getTime())) { + mods.push('selected-between'); + } + + const className = getClassNamesWithMods('ui-calendar-days-option', mods); + + const dateInYYYYMMDD = [ + currentDate.getFullYear(), + leftPad(currentDate.getMonth() + 1), + leftPad(currentDate.getDate()), + ].join('-'); + + const ariaLabel = [ + `${weekDays[currentDate.getDay()].name},`, + currentDate.getDate(), + months[currentDate.getMonth()].name, + currentDate.getFullYear(), + ].join(' '); + + const onClickHandler = onSelectDay.bind(null, new Date(currentDate.toDateString())); + + options.push( + + ); + currentDate.setDate(currentDate.getDate() + 1); + counter += 1; + } while (counter < 42); + + return
{options}
; + } + + /** + * Renders the navigation of the days' calendar. + * + * @method renderNav + * @return {HTMLElement} + */ + renderNav() { + const { renderDate, minDate, maxDate, onNavPreviousMonth, onNavNextMonth } = this.props; + const locale = this.locale; + const { next, previous } = this.navButtons.days; + + const nextMonth = renderDate.getMonth() === 11 ? 0 : (renderDate.getMonth() + 1); + const previousMonth = renderDate.getMonth() === 0 ? 11 : (renderDate.getMonth() - 1); + + const isPreviousMonthDisabled = minDate && (minDate.getMonth() >= renderDate.getMonth()); + const isNextMonthDisabled = maxDate && (maxDate.getMonth() <= renderDate.getMonth()); + + return ( + + ); + } + + /** + * Renders the week days header of the days' calendar. + * + * @method renderWeekDays + * @return {HTMLElement} + */ + renderWeekDays() { + const { startWeekDay, weekDays } = this.locale; + return ( +
+ {weekDays.slice(startWeekDay).map((weekDay, idx) => { + return
{weekDay.short}
; + })} + {startWeekDay > 0 ?
{weekDays[0].short}
: null} +
+ ); + } + + render() { + const { dataAttrs, mods } = this.props; + const className = getClassNamesWithMods('ui-calendar-days', mods); + const restProps = getDataAttributes(dataAttrs); + + return ( +
+ {this.renderNav()} + {this.renderWeekDays()} + {this.renderDays()} +
+ ); + } +} + +Days.defaultProps = { + dataAttrs: {}, + hide: false, + maxDate: null, + minDate: null, + mods: [], +}; + +Days.propTypes = { + /** + * Data attribute. You can use it to set up GTM key or any custom data-* attribute + */ + dataAttrs: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.object, + ]), + + /** + * Optional. Function to be triggered to evaluate if the date (passed as an argument) + * is selectable. Must return a boolean. + */ + isDaySelectableFn: PropTypes.func, + + /** + * Locale definitions, with the calendar's months and weekdays in the right language. + * Also contains the startWeekDay which defines in which week day starts the week. + */ + locale: PropTypes.shape({ + months: PropTypes.array, + weekDays: PropTypes.array, + startWeekDay: PropTypes.number, + }), + + /** + * You can provide set of custom modifications. + */ + mods: PropTypes.arrayOf(PropTypes.string), + + /** + * Sets the max date boundary. Defaults to `null`. + */ + maxDate: PropTypes.objectOf(Date), + + /** + * Sets the min date boundary. Defaults to `null`. + */ + minDate: PropTypes.objectOf(Date), + + navButtons: PropTypes.shape({ + days: PropTypes.shape({ + next: PropTypes.shape({ + ariaLabel: PropTypes.string, + displayValue: PropTypes.string, + }), + previous: PropTypes.shape({ + ariaLabel: PropTypes.string, + displayValue: PropTypes.string, + }), + }), + }), + + /** + * Function to be triggered when pressing the nav's "next" button. + */ + onNavNextMonth: PropTypes.func, + + /** + * Function to be triggered when pressing the nav's "previous" button. + */ + onNavPreviousMonth: PropTypes.func, + + /** + * Function to be triggered when selecting a day. + */ + onSelectDay: PropTypes.func, + + /** + * Date to be rendered in the view + */ + renderDate: PropTypes.objectOf(Date).isRequired, + + /** + * Date that is selected (might not be the one rendered). + */ + selectedDates: PropTypes.arrayOf(PropTypes.objectOf(Date)), + + /** + * Optional. Type of date selection. + */ + selectionType: PropTypes.oneOf(['normal', 'range']), +}; + +export default Days; diff --git a/packages/travix-ui-kit/components/index.js b/packages/travix-ui-kit/components/index.js index 74fd3ad..da216b2 100644 --- a/packages/travix-ui-kit/components/index.js +++ b/packages/travix-ui-kit/components/index.js @@ -1,4 +1,5 @@ import Button from './button/button'; +import Calendar from './calendar/calendar'; import List from './list/list'; import Modal from './modal/modal'; import Price from './price/price'; @@ -7,6 +8,7 @@ import Spinner from './spinner/spinner'; export default { Button, + Calendar, List, Modal, Price, diff --git a/packages/travix-ui-kit/components/index.scss b/packages/travix-ui-kit/components/index.scss index 2b37c08..586bd71 100644 --- a/packages/travix-ui-kit/components/index.scss +++ b/packages/travix-ui-kit/components/index.scss @@ -1,4 +1,5 @@ @import "./button/button.scss"; +@import "./calendar/calendar.scss"; @import "./global/global.scss"; @import "./list/list.scss"; @import "./modal/modal.scss"; diff --git a/packages/travix-ui-kit/package.json b/packages/travix-ui-kit/package.json index 1b0375c..eaa1c7e 100644 --- a/packages/travix-ui-kit/package.json +++ b/packages/travix-ui-kit/package.json @@ -10,8 +10,8 @@ "prebuild:watch": "babel --copy-files ./components --out-dir lib --ignore *.scss,*.md -w &", "styleguide-server": "styleguidist server", "styleguide-build": "styleguidist build", - "test": "jest -c ./tests/jest.config.json", - "update-snapshots": "jest -c ./tests/jest.config.json -u", + "test": "TZ=utc jest -c ./tests/jest.config.json", + "update-snapshots": "TZ=utc jest -c ./tests/jest.config.json -u", "cov": "jest -c ./tests/jest.config.json --coverage --no-cache", "coverage:coveralls": "cat ./coverage/lcov.info | coveralls", "lint": "eslint --color '{components,tests,utils,scripts}/**/*.js'", @@ -78,9 +78,10 @@ "eslint-config-travix": "^2.2.0", "eslint-plugin-babel": "^4.0.0", "eslint-plugin-import": "^2.2.0", - "eslint-plugin-react": "^6.6.0", + "eslint-plugin-react": "^6.10.2", "jest": "^19.0.0", "jest-cli": "^19.0.1", + "jest-serializer-enzyme": "^1.0.0", "react-addons-test-utils": "^0.14.8", "react-styleguidist": "^4.6.2", "webpack-hot-middleware": "^2.15.0" diff --git a/packages/travix-ui-kit/tests/jest.config.json b/packages/travix-ui-kit/tests/jest.config.json index e3f0811..fa95bca 100644 --- a/packages/travix-ui-kit/tests/jest.config.json +++ b/packages/travix-ui-kit/tests/jest.config.json @@ -2,6 +2,7 @@ "collectCoverage": true, "collectCoverageFrom": [ "builder/**/*.js", + "!builder/index.js", "!builder/webpack.config.js", "components/**/*.js", "!components/index.js" @@ -10,7 +11,11 @@ "js", "json" ], + "snapshotSerializers": [ + "/node_modules/jest-serializer-enzyme" + ], "transform": { ".*": "/node_modules/babel-jest" - } + }, + "watchman": false } diff --git a/packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap b/packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap new file mode 100644 index 0000000..ec8b193 --- /dev/null +++ b/packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.normal.spec.js.snap @@ -0,0 +1,10704 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Calendar (normal mode) #render() should apply the new initialDates on Calendar even when changed in runtime by the parent component 1`] = ` + +
+ +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ + + +
+ +`; + +exports[`Calendar (normal mode) #render() should apply the new minDate on Calendar even when changed by the parent component 1`] = ` + +
+ +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ + + +
+ +`; + +exports[`Calendar (normal mode) #render() should merge the locale definition with the default one 1`] = ` + +
+ +
+ +
+ +
+
+ Seg +
+
+ Ter +
+
+ Qua +
+
+ Qui +
+
+ Sex +
+
+ Sáb +
+
+ Dom +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should merge the locale definition with the default one 2`] = ` + +
+ +
+ +
+ +
+
+ Sun +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should only be able to select a date that fits the isDaySelectableFn condition, when set 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should only change the renderDate and do nothing else if nav callbacks are not defined 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should only change the selectedDate and do nothing else if selection callbacks are not defined 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should render the Calendar and re-render on change of the props 1`] = ` + +
+ +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ + + +
+ +`; + +exports[`Calendar (normal mode) #render() should render the calendar with selectionType as normal, initialized in the current date 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should reset selectedDates, when at least one of the initialDates are outside min/max limit 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should set maxLimit, with a given "maxDate" attribute 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should set minLimit, with a given "minDate" attribute 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should set renderDate and not minLimit, with a given "initalDates" attribute 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should set renderDate to next/previous months when the next/previous btns are pressed 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should set renderDate to the month of the date pressed when different from current one 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should set selectedDate to the date of the button pressed 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should set the navButtons display values as defined on props, using default aria-labels 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should use be possible to navigate between months 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (normal mode) #render() should use the aria-labels defined on the navButtons attribute 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; diff --git a/packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.range.spec.js.snap b/packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.range.spec.js.snap new file mode 100644 index 0000000..1b679fa --- /dev/null +++ b/packages/travix-ui-kit/tests/unit/calendar/__snapshots__/calendar.range.spec.js.snap @@ -0,0 +1,1644 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Calendar (range mode) #render() should render the calendar with selectionType as range, initialized in the current date 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (range mode) #render() should set the minLimit and dates properly and reset them at 3rd click 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; + +exports[`Calendar (range mode) #render() should set the minLimit to the same date as the first initialDates when provided 1`] = ` + +
+ +
+ +
+ +
+
+ Mon +
+
+ Tue +
+
+ Wed +
+
+ Thu +
+
+ Fri +
+
+ Sat +
+
+ Sun +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+ +`; diff --git a/packages/travix-ui-kit/tests/unit/calendar/calendar.normal.spec.js b/packages/travix-ui-kit/tests/unit/calendar/calendar.normal.spec.js new file mode 100644 index 0000000..23ff46d --- /dev/null +++ b/packages/travix-ui-kit/tests/unit/calendar/calendar.normal.spec.js @@ -0,0 +1,406 @@ +import { mount } from 'enzyme'; +import React from 'react'; +import Calendar from '../../../components/calendar/calendar'; +import CalendarWrapper from './calendarWrapper.mock'; +import { normalizeDate } from '../../../components/_helpers'; + +describe('Calendar (normal mode)', () => { + describe('#render()', () => { + it('should render the calendar with selectionType as normal, initialized in the current date', () => { + const todayDate = normalizeDate(new Date()); + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + selectionType: 'normal', + }); + expect(wrapper.state()).toEqual({ + maxLimit: null, + minLimit: null, + renderDate: todayDate, + selectedDates: [null, null], + }); + }); + + it('should set renderDate and not minLimit, with a given "initalDates" attribute', () => { + const initialDate = '2017-03-20'; + const initialDateObject = normalizeDate(new Date(initialDate)); + + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + initialDates: [initialDate], + selectionType: 'normal', + }); + expect(wrapper.state()).toEqual({ + maxLimit: null, + minLimit: null, + renderDate: initialDateObject, + selectedDates: [initialDateObject, null], + }); + }); + + it('should set maxLimit, with a given "maxDate" attribute', () => { + const maxDate = '2017-03-20'; + const todayDate = normalizeDate(new Date()); + const maxDateObject = normalizeDate(new Date(maxDate), 23, 59, 59, 999); + + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + maxDate, + selectionType: 'normal', + }); + expect(wrapper.state()).toEqual({ + maxLimit: maxDateObject, + minLimit: null, + renderDate: todayDate, + selectedDates: [null, null], + }); + }); + + it('should set minLimit, with a given "minDate" attribute', () => { + const minDate = '2017-03-20'; + const todayDate = normalizeDate(new Date()); + const minDateObject = normalizeDate(new Date(minDate)); + + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + minDate, + selectionType: 'normal', + }); + expect(wrapper.state()).toEqual({ + maxLimit: null, + minLimit: minDateObject, + renderDate: todayDate, + selectedDates: [null, null], + }); + }); + + it('should reset selectedDates, when at least one of the initialDates are outside min/max limit', () => { + const initialDates = ['2017-03-23', '2017-03-29']; + const initialDatesObjects = initialDates.map(dateStr => normalizeDate(new Date(dateStr))); + const maxDate = '2017-03-25'; + const maxDateObject = normalizeDate(new Date(maxDate), 23, 59, 59, 999); + const minDate = '2017-03-20'; + const minDateObject = normalizeDate(new Date(minDate)); + + + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + initialDates, + maxDate, + minDate, + selectionType: 'normal', + }); + expect(wrapper.state()).toEqual({ + maxLimit: maxDateObject, + minLimit: minDateObject, + renderDate: initialDatesObjects[0], + selectedDates: [null, null], + }); + }); + + it('should set renderDate to next/previous months when the next/previous btns are pressed', () => { + const initialDate = '2017-03-05'; + const initialDateObject = normalizeDate(new Date(initialDate)); + const nextMonthDateObj = normalizeDate(new Date(initialDate)); + + const nextMock = jest.fn(); + const previousMock = jest.fn(); + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + /** Clicks to go next month */ + wrapper.find('.ui-calendar-days__next-month').simulate('click'); + + nextMonthDateObj.setMonth(nextMonthDateObj.getMonth() + 1); + + expect(wrapper.state().renderDate).toEqual(nextMonthDateObj); + expect(nextMock.mock.calls.length).toEqual(1); + expect(nextMock.mock.calls[0][0]).toEqual(wrapper.state().renderDate); + + /** Clicks to go next month */ + wrapper.find('.ui-calendar-days__previous-month').simulate('click'); + + expect(wrapper.state().renderDate).toEqual(initialDateObject); + expect(previousMock.mock.calls.length).toEqual(1); + expect(previousMock.mock.calls[0][0]).toEqual(wrapper.state().renderDate); + }); + + it('should set selectedDate to the date of the button pressed', () => { + const initialDate = '2017-03-05'; + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + /** Clicks to go select the day */ + wrapper.find(`[data-date="2017-03-25"]`).simulate('click'); + + expect(wrapper.state().selectedDates[0].getDate()).toEqual(25); + }); + + it('should set renderDate to the month of the date pressed when different from current one', () => { + const initialDate = '2017-03-05'; + const selectDayMock = jest.fn(); + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + /** Clicks to go select the day */ + expect(wrapper.state().renderDate.getMonth()).toEqual(2); + + wrapper.find(`[data-date="2017-04-01"]`).simulate('click'); + + expect(wrapper.state().selectedDates[0].getMonth()).toEqual(3); + expect(wrapper.state().renderDate.getMonth()).toEqual(3); + expect(selectDayMock.mock.calls.length).toEqual(1); + expect(selectDayMock.mock.calls[0][0]).toEqual(wrapper.state().selectedDates); + }); + + it('should only change the renderDate and do nothing else if nav callbacks are not defined', () => { + const initialDate = '2017-03-05'; + const initialDateObject = normalizeDate(new Date(initialDate)); + const nextMonthDateObj = normalizeDate(new Date(initialDate)); + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + /** Clicks to go next month */ + wrapper.find('.ui-calendar-days__next-month').simulate('click'); + + nextMonthDateObj.setMonth(nextMonthDateObj.getMonth() + 1); + + expect(wrapper.state().renderDate).toEqual(nextMonthDateObj); + + /** Clicks to go next month */ + wrapper.find('.ui-calendar-days__previous-month').simulate('click'); + + expect(wrapper.state().renderDate).toEqual(initialDateObject); + }); + + it('should only change the selectedDate and do nothing else if selection callbacks are not defined', () => { + const initialDate = '2017-03-05'; + const selectedDate = '2017-03-20'; + const expectedSelectedDate = normalizeDate(new Date(selectedDate)); + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + /** Clicks to go next month */ + wrapper.find(`[data-date="${selectedDate}"]`).simulate('click'); + + + expect(wrapper.state().selectedDates).toEqual([expectedSelectedDate, null]); + }); + + it('should only be able to select a date that fits the isDaySelectableFn condition, when set', () => { + const initialDate = '2017-03-05'; + const nonSelectableDate = '2017-03-20'; + const selectableDate = '2017-03-21'; + + const isDaySelectableFn = dt => dt.getDate() === 21; + const onSelectDayMock = jest.fn(); + + const initialDateObject = normalizeDate(new Date(initialDate)); + const selectableDateObject = normalizeDate(new Date(selectableDate)); + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + expect(wrapper.state().selectedDates).toEqual([initialDateObject, null]); + + wrapper.find(`[data-date="${nonSelectableDate}"]`).simulate('click'); + expect(wrapper.state().selectedDates).toEqual([initialDateObject, null]); + + wrapper.find(`[data-date="${selectableDate}"]`).simulate('click'); + expect(wrapper.state().selectedDates).toEqual([selectableDateObject, null]); + + expect(onSelectDayMock.mock.calls.length).toEqual(1); + expect(onSelectDayMock.mock.calls[0][0]).toBeInstanceOf(Array); + expect(onSelectDayMock.mock.calls[0][0][0]).toBeInstanceOf(Date); + expect(onSelectDayMock.mock.calls[0][0][1]).toEqual(null); + }); + + it('should merge the locale definition with the default one', () => { + const myLocale = { + weekDays: [ + { name: 'Domingo', short: 'Dom' }, + { name: 'Segunda', short: 'Seg' }, + { name: 'Terça', short: 'Ter' }, + { name: 'Quarta', short: 'Qua' }, + { name: 'Quinta', short: 'Qui' }, + { name: 'Sexta', short: 'Sex' }, + { name: 'Sábado', short: 'Sáb' }, + ], + }; + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + expect(wrapper.find('.ui-calendar-days__weekday').first().text()).toEqual('Seg'); + }); + + it('should merge the locale definition with the default one', () => { + const myLocale = { startWeekDay: 0 }; + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + expect(wrapper.find('.ui-calendar-days__weekday').first().text()).toEqual('Sun'); + }); + + it('should apply the new initialDates on Calendar even when changed in runtime by the parent component', () => { + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-03-03'); + + wrapper.find('#changeInitialDate').simulate('click'); + + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-04-03'); + }); + + it('should render the Calendar and re-render on change of the props', () => { + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + wrapper.find('#changeInitialDate').simulate('click'); + + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-04-03'); + + // Check what happens when the props are the same. + wrapper.find('#changeInitialDate').simulate('click'); + + expect(wrapper.find('Calendar').props().initialDates[0]).toEqual('2017-04-03'); + }); + + it('should apply the new minDate on Calendar even when changed by the parent component', () => { + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + expect(wrapper.find('Calendar').props().minDate).toEqual('2017-03-01'); + + wrapper.find('#changeMinDate').simulate('click'); + + expect(wrapper.find('Calendar').props().minDate).toEqual('2017-04-01'); + }); + + it('should set the navButtons display values as defined on props, using default aria-labels', () => { + const navButtons = { + days: { + next: { + displayValue: '›', + }, + previous: { + displayValue: '‹', + }, + }, + }; + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + const nextBtn = wrapper.find('.ui-calendar-days__next-month'); + const previousBtn = wrapper.find('.ui-calendar-days__previous-month'); + expect(nextBtn.text()).toEqual(navButtons.days.next.displayValue); + expect(previousBtn.text()).toEqual(navButtons.days.previous.displayValue); + + expect(nextBtn.props()['aria-label']).toEqual('April'); + expect(previousBtn.props()['aria-label']).toEqual('February'); + }); + + it('should use the aria-labels defined on the navButtons attribute', () => { + const navButtons = { + days: { + next: { + ariaLabel: 'Next month', + displayValue: '›', + }, + previous: { + ariaLabel: 'Previous month', + displayValue: '‹', + }, + }, + }; + + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + const nextBtn = wrapper.find('.ui-calendar-days__next-month'); + const previousBtn = wrapper.find('.ui-calendar-days__previous-month'); + expect(nextBtn.text()).toEqual(navButtons.days.next.displayValue); + expect(previousBtn.text()).toEqual(navButtons.days.previous.displayValue); + + expect(nextBtn.props()['aria-label']).toEqual(navButtons.days.next.ariaLabel); + expect(previousBtn.props()['aria-label']).toEqual(navButtons.days.previous.ariaLabel); + }); + + it('should use be possible to navigate between months', () => { + const wrapper = mount( + + ); + expect(wrapper).toMatchSnapshot(); + + const daysView = wrapper.find('Days').at(1); + const nextBtn = wrapper.find('.ui-calendar-days__next-month'); + const previousBtn = wrapper.find('.ui-calendar-days__previous-month'); + + previousBtn.simulate('click'); + expect(daysView.props().renderDate.getMonth()).toEqual(11); + + nextBtn.simulate('click'); + expect(daysView.props().renderDate.getMonth()).toEqual(0); + + nextBtn.simulate('click'); + expect(daysView.props().renderDate.getMonth()).toEqual(1); + }); + }); +}); diff --git a/packages/travix-ui-kit/tests/unit/calendar/calendar.range.spec.js b/packages/travix-ui-kit/tests/unit/calendar/calendar.range.spec.js new file mode 100644 index 0000000..6a18054 --- /dev/null +++ b/packages/travix-ui-kit/tests/unit/calendar/calendar.range.spec.js @@ -0,0 +1,151 @@ +import { mount } from 'enzyme'; +import React from 'react'; +import Calendar from '../../../components/calendar/calendar'; +import { normalizeDate } from '../../../components/_helpers'; + +describe('Calendar (range mode)', () => { + describe('#render()', () => { + it('should render the calendar with selectionType as range, initialized in the current date', () => { + const todayDate = normalizeDate(new Date()); + + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + selectionType: 'range', + }); + expect(wrapper.state()).toEqual({ + maxLimit: null, + minLimit: null, + renderDate: todayDate, + selectedDates: [null, null], + }); + }); + + it('should set the minLimit to the same date as the first initialDates when provided', () => { + const initialDate = '2017-03-25'; + const initialDateObj = normalizeDate(new Date(initialDate)); + + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + initialDates: [initialDate], + selectionType: 'range', + }); + expect(wrapper.state()).toEqual({ + maxLimit: null, + minLimit: initialDateObj, + renderDate: initialDateObj, + selectedDates: [initialDateObj, null], + }); + }); + + it('should set the minLimit and dates properly and reset them at 3rd click', () => { + const todayDate = normalizeDate(new Date()); + + const wrapper = mount( + + ); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.props()).toEqual({ + selectionType: 'range', + }); + expect(wrapper.state()).toEqual({ + maxLimit: null, + minLimit: null, + renderDate: todayDate, + selectedDates: [null, null], + }); + + const expectedStartDate = normalizeDate(new Date('2017-03-25')); + + const startRangeOption = wrapper.find('[data-date="2017-03-25"]'); + startRangeOption.simulate('click'); + expect(startRangeOption.props().className.includes('ui-calendar-days-option_selected-start')).toEqual(true); + expect(wrapper.state().minLimit).toEqual(expectedStartDate); + expect(wrapper.state().selectedDates[0]).toEqual(expectedStartDate); + expect(wrapper.find('[data-date="2017-03-24"]').props().disabled).toEqual(true); + + const expectedEndDate = new Date('2017-03-29'); + expectedEndDate.setHours(0); + expectedEndDate.setMinutes(0); + expectedEndDate.setSeconds(0); + expectedEndDate.setMilliseconds(0); + + // Selects the end date on the 2nd click + const endRangeOption = wrapper.find('[data-date="2017-03-29"]'); + endRangeOption.simulate('click'); + + const betweenRangeOption = wrapper.find('[data-date="2017-03-28"]'); + + expect(endRangeOption.props().className.includes('ui-calendar-days-option_selected-end')).toEqual(true); + expect(wrapper.state().selectedDates[1]).toEqual(expectedEndDate); + expect(betweenRangeOption.props().className.includes('ui-calendar-days-option_selected-between')).toEqual(true); + + // On 3rd click resets the calendar, removing the selection + betweenRangeOption.simulate('click'); + expect(wrapper.state().minLimit).toEqual(null); + expect(wrapper.state().selectedDates).toEqual([null, null]); + }); + + it('should render the selection as normal (not range) when start and end date are the same', () => { + const expectedEndDate = normalizeDate(new Date('2017-03-25')); + const expectedStartDate = normalizeDate(new Date('2017-03-25')); + const wrapper = mount( + + ); + + const startRangeOption = wrapper.find('[data-date="2017-03-25"]'); + startRangeOption.simulate('click'); + expect(startRangeOption.props().className.includes('ui-calendar-days-option_selected-start')).toEqual(true); + expect(wrapper.state().minLimit).toEqual(expectedStartDate); + expect(wrapper.state().selectedDates[0]).toEqual(expectedStartDate); + + // Selects the end date on the 2nd click + const endRangeOption = wrapper.find('[data-date="2017-03-25"]'); + endRangeOption.simulate('click'); + + expect(endRangeOption.props().className.includes('ui-calendar-days-option_selected')).toEqual(true); + expect(wrapper.state().minLimit).toEqual(null); + expect(wrapper.state().selectedDates[1]).toEqual(expectedEndDate); + }); + + it('should put the minLimit back to the one passed on props, when resetting it', () => { + const expectedEndDate = normalizeDate(new Date('2017-03-25')); + const expectedStartDate = normalizeDate(new Date('2017-03-25')); + const minDate = '2017-03-05'; + const expectedInitialMinLimit = normalizeDate(new Date(minDate)); + + const wrapper = mount( + + ); + + expect(wrapper.state().minLimit).toEqual(expectedInitialMinLimit); + + const startRangeOption = wrapper.find('[data-date="2017-03-25"]'); + startRangeOption.simulate('click'); + expect(startRangeOption.props().className.includes('ui-calendar-days-option_selected-start')).toEqual(true); + expect(wrapper.state().minLimit).toEqual(expectedStartDate); + expect(wrapper.state().selectedDates[0]).toEqual(expectedStartDate); + + // Selects the end date on the 2nd click + const endRangeOption = wrapper.find('[data-date="2017-03-25"]'); + endRangeOption.simulate('click'); + + expect(endRangeOption.props().className.includes('ui-calendar-days-option_selected')).toEqual(true); + expect(wrapper.state().minLimit).toEqual(expectedInitialMinLimit); + expect(wrapper.state().selectedDates[1]).toEqual(expectedEndDate); + + // And resets the dates with the 3rd click + wrapper.find('[data-date="2017-03-26"]').simulate('click'); + expect(wrapper.state().minLimit).toEqual(expectedInitialMinLimit); + expect(wrapper.state().selectedDates).toEqual([null, null]); + }); + }); +}); diff --git a/packages/travix-ui-kit/tests/unit/calendar/calendarWrapper.mock.js b/packages/travix-ui-kit/tests/unit/calendar/calendarWrapper.mock.js new file mode 100644 index 0000000..fb295b5 --- /dev/null +++ b/packages/travix-ui-kit/tests/unit/calendar/calendarWrapper.mock.js @@ -0,0 +1,44 @@ +const React = require('react'); +const Calendar = require('../../../components/calendar/calendar'); + +export default class CalendarWrapper extends React.Component { + constructor(props) { + super(); + + this.changeInitialDates = this.changeInitialDates.bind(this); + this.changeMinDate = this.changeMinDate.bind(this); + this.state = { + initialDates: props.initialDates ? [].concat(props.initialDates) : undefined, + minDate: props.minDate, + }; + } + + changeInitialDates() { + this.setState((prevState) => { + prevState.initialDates = ['2017-04-03', null]; + return prevState; + }); + } + + changeMinDate() { + this.setState((prevState) => { + prevState.minDate = '2017-04-01'; + return prevState; + }); + } + + render() { + return ( +
+ + + +
+ ); + } +} + +CalendarWrapper.propTypes = { + initialDates: React.PropTypes.arrayOf(String), + minDate: React.PropTypes.string, +}; diff --git a/packages/travix-ui-kit/themes/_default.yaml b/packages/travix-ui-kit/themes/_default.yaml index b907de9..50b6590 100644 --- a/packages/travix-ui-kit/themes/_default.yaml +++ b/packages/travix-ui-kit/themes/_default.yaml @@ -23,8 +23,11 @@ generic: accent-darker: &accent-darker '#0B4848' accent-dark: &accent-dark '#177D7D' accent: &accent '#2A9595' + accent-border: &accent-border '#E6BB00' + accent-bottom: &accent-bottom '#FFD05E' accent-light: &accent-light '#46BCBC' accent-lighter: &accent-lighter '#6EE1E1' + accent-top: &accent-top '#FFD97C' primary-darker: &primary-darker '#162052' primary-dark: &primary-dark '#283A8E' @@ -86,6 +89,89 @@ button: color: "transparent" hover: params: "0 0" +calendar: + height: 300px + nav: + background: *primary-lighter + border-radius: '5px 5px 0 0' + button: + background-color-end: *accent-bottom + background-color-start: *accent-top + border-radius: 50% + box-shadow-color: *accent-border + color: *primary-lighter + font-weight: '700' + height: 27px + margin: '0 5px' + width: 27px + height: 41px + label: + color: *blank + font-weight: '500' + header: + background-color: *primary-lighter + height: 32px + weekday: + color: *secondary + font-size: 14px + font-weight: bold + options: + border-color: *secondary + option: + background-color: *blank + border-bottom: *secondary + border-right: *secondary + color: *primary-darker + disabled: + background-color: *secondary + color: *secondary-darkest + font-size: 14px + hover: + background-color: *active + color: *blank + next-month: + background-color: *secondary-light + previous-month: + background-color: *secondary-light + range: + after: + border-color: transparent + between: + background-color: *secondary-dark + end: + after: + border-color: *active + background-color: *secondary-dark + start: + after: + border-color: *active + background-color: *secondary-dark + width: 300px +list: + bullets: + color: *active +modal: + z-index: '100' + color: + dark: *primary-dark + secondary: *secondary + overlay: + background: + color: *primary-dark + opacity: '0.65' + container: + background: + color: *blank + box-shadow: + color: 'rgba(0,0,0,.3)' + content: + padding-left-right: '24px' + content-devider: + color: *secondary + close-button: + color: *text-dark + hover: + color: *active price: height: underline: 6px @@ -131,28 +217,3 @@ spinner: lighter: *accent dark: *primary darker: *primary-lighter -list: - bullets: - color: *active -modal: - z-index: '100' - color: - dark: *primary-dark - secondary: *secondary - overlay: - background: - color: *primary-dark - opacity: '0.65' - container: - background: - color: *blank - box-shadow: - color: 'rgba(0,0,0,.3)' - content: - padding-left-right: '24px' - content-devider: - color: *secondary - close-button: - color: *text-dark - hover: - color: *active