diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..9cda4fde --- /dev/null +++ b/.eslintrc @@ -0,0 +1,202 @@ +{ + "ecmaFeatures": { + "arrowFunctions": true, + "binaryLiterals": false, + "blockBindings": true, + "classes": true, + "defaultParams": true, + "destructuring": true, + "forOf": false, + "generators": true, + "modules": true, + "objectLiteralComputedProperties": true, + "objectLiteralDuplicateProperties": false, + "objectLiteralShorthandMethods": true, + "objectLiteralShorthandProperties": true, + "octalLiterals": true, + "regexUFlag": true, + "regexYFlag": true, + "superInFunctions": false, + "templateStrings": true, + "unicodeCodePointEscapes": false, + "globalReturn": false, + "jsx": true + }, + + "parser": "babel-eslint", + + "plugins": [ + "react" + ], + + "env": { + "browser": true, + "node": true, + "es6": true + }, + + "rules": { + "no-alert": 2, + "no-array-constructor": 2, + "no-bitwise": 0, + "no-caller": 2, + "no-catch-shadow": 0, + "no-cond-assign": 2, + "no-console": 1, + "no-constant-condition": 2, + "no-control-regex": 2, + "no-debugger": 2, + "no-delete-var": 2, + "no-div-regex": 0, + "no-dupe-keys": 2, + "no-dupe-args": 2, + "no-else-return": 1, + "no-empty": 2, + "no-empty-class": 2, + "no-empty-label": 2, + "no-eq-null": 0, + "no-eval": 2, + "no-ex-assign": 2, + "no-extend-native": 2, + "no-extra-bind": 2, + "no-extra-boolean-cast": 2, + "no-extra-parens": 0, + "no-extra-semi": 2, + "no-extra-strict": 2, + "no-fallthrough": 2, + "no-floating-decimal": 0, + "no-func-assign": 2, + "no-implied-eval": 2, + "no-inline-comments": 0, + "no-inner-declarations": [2, "functions"], + "no-invalid-regexp": 2, + "no-irregular-whitespace": 2, + "no-iterator": 2, + "no-label-var": 2, + "no-labels": 2, + "no-lone-blocks": 2, + "no-lonely-if": 0, + "no-loop-func": 2, + "no-mixed-requires": [1, true], + "no-mixed-spaces-and-tabs": [2, false], + "no-multi-spaces": [2, { exceptions: { "VariableDeclarator": true } }], + "no-multi-str": 2, + "no-multiple-empty-lines": [0, {"max": 2}], + "no-native-reassign": 2, + "no-negated-in-lhs": 2, + "no-nested-ternary": 1, + "no-new": 2, + "no-new-func": 2, + "no-new-object": 2, + "no-new-require": 0, + "no-new-wrappers": 2, + "no-obj-calls": 2, + "no-octal": 2, + "no-octal-escape": 2, + "no-path-concat": 0, + "no-plusplus": 0, + "no-process-env": 0, + "no-process-exit": 2, + "no-proto": 2, + "no-redeclare": 2, + "no-regex-spaces": 2, + "no-reserved-keys": 0, + "no-restricted-modules": 0, + "no-return-assign": 2, + "no-script-url": 2, + "no-self-compare": 0, + "no-sequences": 2, + "no-shadow": 2, + "no-shadow-restricted-names": 2, + "no-space-before-semi": 0, + "no-spaced-func": 2, + "no-sparse-arrays": 2, + "no-sync": 0, + "no-ternary": 0, + "no-trailing-spaces": 2, + "no-throw-literal": 0, + "no-undef": 2, + "no-undef-init": 2, + "no-undefined": 0, + "no-underscore-dangle": 0, + "no-unreachable": 2, + "no-unused-expressions": 2, + "no-unused-vars": [1, {"vars": "all", "args": "after-used"}], + "no-use-before-define": 2, + "no-void": 0, + "no-var": 0, + "no-warning-comments": [0, { "terms": ["todo", "fixme", "xxx"], "location": "start" }], + "no-with": 2, + "no-wrap-func": 2, + + "block-scoped-var": 0, + "brace-style": [0, "1tbs"], + "camelcase": 2, + "comma-spacing": 2, + "comma-style": 0, + "complexity": [0, 11], + "consistent-return": 2, + "consistent-this": [0, "that"], + "curly": [2, "all"], + "default-case": 0, + "dot-notation": [2, { "allowKeywords": true, "allowPattern": "^[a-zA-Z/d]+(_[a-zA-Z/d]+)+$" }], + "eol-last": 2, + "eqeqeq": 2, + "func-names": 0, + "func-style": [0, "declaration"], + "generator-star": 0, + "global-strict": [0, "never"], + "guard-for-in": 0, + "handle-callback-err": 0, + "indent": [2, 2], + "key-spacing": [2, { "beforeColon": false, "afterColon": true }], + "max-depth": [0, 4], + "max-len": [0, 80, 4], + "max-nested-callbacks": [0, 2], + "max-params": [0, 3], + "max-statements": [0, 10], + "new-cap": 0, + "new-parens": 2, + "one-var": 0, + "operator-assignment": [0, "always"], + "padded-blocks": 0, + "quote-props": 0, + "quotes": [0, "double"], + "radix": 0, + "semi": 2, + "semi-spacing": [2, {"before": false, "after": true}], + "sort-vars": 0, + "space-after-function-name": [2, "never"], + "space-after-keywords": [2, "always"], + "space-before-blocks": [0, "always"], + "space-before-function-parentheses": [0, "always"], + "space-in-brackets": [0, "never"], + "space-in-parens": [0, "never"], + "space-infix-ops": 2, + "space-return-throw-case": 2, + "space-unary-ops": [2, { "words": true, "nonwords": false }], + "spaced-line-comment": [0, "always"], + "strict": 2, + "use-isnan": 2, + "valid-jsdoc": 0, + "valid-typeof": 2, + "vars-on-top": 0, + "wrap-iife": 0, + "wrap-regex": 0, + "yoda": [2, "never"], + + // eslint-plugin-react rules + "react/jsx-boolean-value": [1, "always"], + "react/jsx-uses-react": 1, + "react/jsx-uses-vars": 1, + "react/jsx-no-undef": 2, + "react/no-did-mount-set-state": 1, + "react/no-did-update-set-state": 1, + "react/no-multi-comp": 1, + "react/no-unknown-property": 1, + "react/prop-types": 1, + "react/react-in-jsx-scope": 2, + "react/self-closing-comp": 1, + "react/wrap-multilines": 2 + } +} \ No newline at end of file diff --git a/dist/DateRangePicker.js b/dist/DateRangePicker.js index 0ba84193..23ac2a5f 100644 --- a/dist/DateRangePicker.js +++ b/dist/DateRangePicker.js @@ -41,7 +41,6 @@ var _PaginationArrow2 = _interopRequireDefault(_PaginationArrow); 'use strict'; var PureRenderMixin = _reactAddons2['default'].addons.PureRenderMixin; - var absoluteMinimum = _moment2['default'](new Date(-8640000000000000 / 2)).startOf('day'); var absoluteMaximum = _moment2['default'](new Date(8640000000000000 / 2)).startOf('day'); @@ -55,36 +54,38 @@ var DateRangePicker = _reactAddons2['default'].createClass({ mixins: [_utilsBemMixin2['default'], PureRenderMixin], propTypes: { - bemNamespace: _reactAddons2['default'].PropTypes.string, bemBlock: _reactAddons2['default'].PropTypes.string, - numberOfCalendars: _reactAddons2['default'].PropTypes.number, - firstOfWeek: _reactAddons2['default'].PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), + bemNamespace: _reactAddons2['default'].PropTypes.string, + dateStates: _reactAddons2['default'].PropTypes.array, // an array of date ranges and their states + defaultState: _reactAddons2['default'].PropTypes.string, disableNavigation: _reactAddons2['default'].PropTypes.bool, + firstOfWeek: _reactAddons2['default'].PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), initialDate: _reactAddons2['default'].PropTypes.instanceOf(Date), - initialRange: _reactAddons2['default'].PropTypes.object, + initialFromValue: _reactAddons2['default'].PropTypes.bool, initialMonth: _reactAddons2['default'].PropTypes.number, // Overrides values derived from initialDate/initialRange + initialRange: _reactAddons2['default'].PropTypes.object, initialYear: _reactAddons2['default'].PropTypes.number, // Overrides values derived from initialDate/initialRange - minimumDate: _reactAddons2['default'].PropTypes.instanceOf(Date), maximumDate: _reactAddons2['default'].PropTypes.instanceOf(Date), - selectionType: _reactAddons2['default'].PropTypes.oneOf(['single', 'range']), - stateDefinitions: _reactAddons2['default'].PropTypes.object, + minimumDate: _reactAddons2['default'].PropTypes.instanceOf(Date), + numberOfCalendars: _reactAddons2['default'].PropTypes.number, + onHighlightDate: _reactAddons2['default'].PropTypes.func, // triggered when a date is highlighted (hovered) + onHighlightRange: _reactAddons2['default'].PropTypes.func, // triggered when a range is highlighted (hovered) + onSelect: _reactAddons2['default'].PropTypes.func, // triggered when a date or range is selectec + onSelectStart: _reactAddons2['default'].PropTypes.func, // triggered when the first date in a range is selected + paginationArrowComponent: _reactAddons2['default'].PropTypes.func, selectedLabel: _reactAddons2['default'].PropTypes.string, - dateStates: _reactAddons2['default'].PropTypes.array, // an array of date ranges and their states - defaultState: _reactAddons2['default'].PropTypes.string, - initialFromValue: _reactAddons2['default'].PropTypes.bool, + selectionType: _reactAddons2['default'].PropTypes.oneOf(['single', 'range']), showLegend: _reactAddons2['default'].PropTypes.bool, - onSelect: _reactAddons2['default'].PropTypes.func, - onSelectStart: _reactAddons2['default'].PropTypes.func, - paginationArrowComponent: _reactAddons2['default'].PropTypes.func, - value: function value(props, propName, componentName) { + stateDefinitions: _reactAddons2['default'].PropTypes.object, + value: function value(props, propName) { var val = props[propName]; if (!val) { - return; + return null; } else if (_moment2['default'].isMoment(val)) { - return; + return null; } else if (val.start && val.end && _moment2['default'].isMoment(val.start) && _moment2['default'].isMoment(val.end)) { - return; + return null; } return new Error('Value must be a moment or a moment range'); } @@ -129,6 +130,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ }, getInitialState: function getInitialState() { + var now = new Date(); var _props = this.props; var initialYear = _props.initialYear; var initialMonth = _props.initialMonth; @@ -136,7 +138,6 @@ var DateRangePicker = _reactAddons2['default'].createClass({ var selectionType = _props.selectionType; var value = _props.value; - var now = new Date(); var year = now.getFullYear(); var month = now.getMonth(); @@ -162,6 +163,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ highlightStartDate: null, highlightedDate: null, highlightRange: null, + hideSelection: false, enabledRange: this.getEnabledRange(this.props), dateStates: this.getDateStates(this.props) }; @@ -186,7 +188,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ var defs = _immutable2['default'].fromJS(stateDefinitions); - dateStates.forEach((function (s) { + dateStates.forEach(function (s) { var r = s.range; var start = r.start.startOf('day'); var end = r.end.startOf('day'); @@ -199,7 +201,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ } actualStates.push(s); dateCursor = end; - }).bind(this)); + }); actualStates.push({ state: defaultState, @@ -207,7 +209,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ }); // sanitize date states - return _immutable2['default'].List(actualStates).map((function (s) { + return _immutable2['default'].List(actualStates).map(function (s) { var def = defs.get(s.state); return _immutable2['default'].Map({ range: s.range, @@ -215,7 +217,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ selectable: def.get('selectable', true), color: def.get('color') }); - }).bind(this)); + }); }, onSelect: function onSelect(date) { @@ -224,6 +226,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ startRangeSelection: function startRangeSelection(date) { this.setState({ + hideSelection: true, selectedStartDate: date }); if (typeof this.props.onSelectStart === 'function') { @@ -231,13 +234,17 @@ var DateRangePicker = _reactAddons2['default'].createClass({ } }, + statesForDate: function statesForDate(date) { + return this.state.dateStates.filter(function (d) { + return date.within(d.get('range')); + }).map(function (d) { + return d.get('state'); + }); + }, + statesForRange: function statesForRange(range) { if (range.start.isSame(range.end)) { - return this.state.dateStates.filter(function (d) { - return range.start.within(d.get('range')); - }).map(function (d) { - return d.get('state'); - }); + return this.statesForDate(range.start); } return this.state.dateStates.filter(function (d) { return d.get('range').intersect(range); @@ -250,9 +257,10 @@ var DateRangePicker = _reactAddons2['default'].createClass({ var highlightedDate = this.state.highlightedDate; if (highlightedDate) { this.setState({ + hideSelection: false, highlightedDate: null }); - this.props.onSelect(highlightedDate); + this.props.onSelect(highlightedDate, this.statesForDate(highlightedDate)); } }, @@ -262,7 +270,8 @@ var DateRangePicker = _reactAddons2['default'].createClass({ this.setState({ selectedStartDate: null, highlightedRange: null, - highlightedDate: null + highlightedDate: null, + hideSelection: false }); this.props.onSelect(range, this.statesForRange(range)); } @@ -270,7 +279,11 @@ var DateRangePicker = _reactAddons2['default'].createClass({ onHighlightDate: function onHighlightDate(date) { this.setState({ - highlightedDate: date }); + highlightedDate: date + }); + if (typeof this.props.onHighlightDate === 'function') { + this.props.onHighlightDate(date, this.statesForDate(date)); + } }, onHighlightRange: function onHighlightRange(range) { @@ -278,6 +291,9 @@ var DateRangePicker = _reactAddons2['default'].createClass({ highlightedRange: range, highlightedDate: null }); + if (typeof this.props.onHighlightRange === 'function') { + this.props.onHighlightRange(range, this.statesForRange(range)); + } }, onUnHighlightDate: function onUnHighlightDate() { @@ -298,7 +314,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ }, moveBack: function moveBack() { - var monthDate; + var monthDate = undefined; if (this.canMoveBack()) { monthDate = this.getMonthDate(); @@ -324,7 +340,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ }, moveForward: function moveForward() { - var monthDate; + var monthDate = undefined; if (this.canMoveForward()) { monthDate = this.getMonthDate(); @@ -378,6 +394,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ var _state2 = this.state; var dateStates = _state2.dateStates; var enabledRange = _state2.enabledRange; + var hideSelection = _state2.hideSelection; var highlightedDate = _state2.highlightedDate; var highlightedRange = _state2.highlightedRange; var highlightStartDate = _state2.highlightStartDate; @@ -387,7 +404,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ var year = monthDate.year(); var month = monthDate.month(); var key = '' + index + '-' + year + '-' + month; - var props; + var props = undefined; monthDate.add(index, 'months'); @@ -397,6 +414,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ dateStates: dateStates, enabledRange: enabledRange, firstOfWeek: firstOfWeek, + hideSelection: hideSelection, highlightedDate: highlightedDate, highlightedRange: highlightedRange, highlightStartDate: highlightStartDate, @@ -424,7 +442,7 @@ var DateRangePicker = _reactAddons2['default'].createClass({ render: function render() { var _props3 = this.props; - var PaginationArrow = _props3.paginationArrowComponent; + var PaginationArrowComponent = _props3.paginationArrowComponent; var numberOfCalendars = _props3.numberOfCalendars; var stateDefinitions = _props3.stateDefinitions; var selectedLabel = _props3.selectedLabel; @@ -435,9 +453,9 @@ var DateRangePicker = _reactAddons2['default'].createClass({ return _reactAddons2['default'].createElement( 'div', { className: this.cx({ element: null }) }, - _reactAddons2['default'].createElement(PaginationArrow, { direction: 'previous', onMouseEnter: this.moveBackIfSelecting, onClick: this.moveBack, disabled: !this.canMoveBack() }), + _reactAddons2['default'].createElement(PaginationArrowComponent, { direction: 'previous', onMouseEnter: this.moveBackIfSelecting, onClick: this.moveBack, disabled: !this.canMoveBack() }), calendars.toJS(), - _reactAddons2['default'].createElement(PaginationArrow, { direction: 'next', onMouseEnter: this.moveForwardIfSelecting, onClick: this.moveForward, disabled: !this.canMoveForward() }), + _reactAddons2['default'].createElement(PaginationArrowComponent, { direction: 'next', onMouseEnter: this.moveForwardIfSelecting, onClick: this.moveForward, disabled: !this.canMoveForward() }), showLegend ? _reactAddons2['default'].createElement(_Legend2['default'], { stateDefinitions: stateDefinitions, selectedLabel: selectedLabel }) : null ); } diff --git a/dist/Legend.js b/dist/Legend.js index c9f44efd..d249ccb8 100644 --- a/dist/Legend.js +++ b/dist/Legend.js @@ -10,10 +10,6 @@ var _reactAddons = require('react/addons'); var _reactAddons2 = _interopRequireDefault(_reactAddons); -var _utilsBemCx = require('./utils/bemCx'); - -var _utilsBemCx2 = _interopRequireDefault(_utilsBemCx); - var _utilsBemMixin = require('./utils/BemMixin'); var _utilsBemMixin2 = _interopRequireDefault(_utilsBemMixin); @@ -21,24 +17,26 @@ var _utilsBemMixin2 = _interopRequireDefault(_utilsBemMixin); 'use strict'; var PureRenderMixin = _reactAddons2['default'].addons.PureRenderMixin; -var cx = _reactAddons2['default'].addons.classSet; var Legend = _reactAddons2['default'].createClass({ displayName: 'Legend', mixins: [_utilsBemMixin2['default'], PureRenderMixin], + propTypes: { + selectedLabel: _reactAddons2['default'].PropTypes.string.isRequired, + stateDefinitions: _reactAddons2['default'].PropTypes.object.isRequired + }, + render: function render() { var _props = this.props; var selectedLabel = _props.selectedLabel; var stateDefinitions = _props.stateDefinitions; - var block = this.getBemBlock(); - var namespace = this.getBemNamespace(); var items = []; - var name; - var def; - var style; + var name = undefined; + var def = undefined; + var style = undefined; for (name in stateDefinitions) { def = stateDefinitions[name]; diff --git a/dist/PaginationArrow.js b/dist/PaginationArrow.js index b742bd1d..a44c2958 100644 --- a/dist/PaginationArrow.js +++ b/dist/PaginationArrow.js @@ -29,6 +29,17 @@ var PaginationArrow = _reactAddons2['default'].createClass({ mixins: [_utilsBemMixin2['default'], PureRenderMixin], + propTypes: { + disabled: _reactAddons2['default'].PropTypes.bool, + direction: _reactAddons2['default'].PropTypes.oneOf(['next', 'previous']) + }, + + getDefaultProps: function getDefaultProps() { + return { + disabled: false + }; + }, + render: function render() { var _props = this.props; var disabled = _props.disabled; diff --git a/dist/calendar/CalendarDate.js b/dist/calendar/CalendarDate.js index a60039d2..42861a49 100644 --- a/dist/calendar/CalendarDate.js +++ b/dist/calendar/CalendarDate.js @@ -41,7 +41,6 @@ var _CalendarSelection2 = _interopRequireDefault(_CalendarSelection); 'use strict'; var PureRenderMixin = _reactAddons2['default'].addons.PureRenderMixin; -var cx = _reactAddons2['default'].addons.classSet; var CalendarDate = _reactAddons2['default'].createClass({ displayName: 'CalendarDate', @@ -57,6 +56,7 @@ var CalendarDate = _reactAddons2['default'].createClass({ selectionType: _reactAddons2['default'].PropTypes.string.isRequired, value: _reactAddons2['default'].PropTypes.object, + hideSelection: _reactAddons2['default'].PropTypes.bool, highlightedRange: _reactAddons2['default'].PropTypes.object, highlightedDate: _reactAddons2['default'].PropTypes.object, selectedStartDate: _reactAddons2['default'].PropTypes.object, @@ -68,6 +68,12 @@ var CalendarDate = _reactAddons2['default'].createClass({ onCompleteSelection: _reactAddons2['default'].PropTypes.func }, + getDefaultProps: function getDefaultProps() { + return { + hideSelection: false + }; + }, + getInitialState: function getInitialState() { return { mouseDown: false @@ -104,7 +110,7 @@ var CalendarDate = _reactAddons2['default'].createClass({ var blockedRanges = this.nonSelectableStateRanges().map(function (r) { return r.get('range'); }); - var intersect; + var intersect = undefined; if (forwards) { intersect = blockedRanges.find(function (r) { @@ -195,9 +201,9 @@ var CalendarDate = _reactAddons2['default'].createClass({ var onHighlightRange = _props.onHighlightRange; var onHighlightDate = _props.onHighlightDate; - var datePair; - var range; - var forwards; + var datePair = undefined; + var range = undefined; + var forwards = undefined; if (selectionType === 'range') { if (selectedStartDate) { @@ -231,8 +237,6 @@ var CalendarDate = _reactAddons2['default'].createClass({ var completeSelection = _props2.completeSelection; var startRangeSelection = _props2.startRangeSelection; - var range; - if (selectionType === 'range') { if (selectedStartDate) { completeRangeSelection(); @@ -271,12 +275,13 @@ var CalendarDate = _reactAddons2['default'].createClass({ var value = _props4.value; var highlightedRange = _props4.highlightedRange; var highlightedDate = _props4.highlightedDate; + var hideSelection = _props4.hideSelection; var disabled = this.isDisabled(date); var highlighted = false; var selected = false; - if (value) { + if (value && !hideSelection) { if (!value.start && date.isSame(value)) { selected = true; } else if (value.start && value.start.isSame(value.end) && date.isSame(value.start)) { @@ -287,7 +292,7 @@ var CalendarDate = _reactAddons2['default'].createClass({ } if (highlightedRange && highlightedRange.contains(date)) { - highlighted = true; + selected = true; } else if (highlightedDate && date.isSame(highlightedDate)) { highlighted = true; } @@ -298,17 +303,18 @@ var CalendarDate = _reactAddons2['default'].createClass({ render: function render() { var _props5 = this.props; var value = _props5.value; - var firstOfMonth = _props5.firstOfMonth; var date = _props5.date; var highlightedRange = _props5.highlightedRange; var highlightedDate = _props5.highlightedDate; + var hideSelection = _props5.hideSelection; var bemModifiers = this.getBemModifiers(); var bemStates = this.getBemStates(); + var pending = false; - var color; - var amColor; - var pmColor; + var color = undefined; + var amColor = undefined; + var pmColor = undefined; var states = this.dateRangesForDate(date); var numStates = states.count(); var cellStyle = {}; @@ -317,7 +323,7 @@ var CalendarDate = _reactAddons2['default'].createClass({ var highlightModifier = null; var selectionModifier = null; - if (value && value.start) { + if (value && !hideSelection && value.start) { if (value.start.isSame(date) && value.start.isSame(value.end)) { selectionModifier = 'single'; } else if (value.contains(date)) { @@ -329,17 +335,19 @@ var CalendarDate = _reactAddons2['default'].createClass({ selectionModifier = 'segment'; } } - } else if (value && date.isSame(value)) { + } else if (value && !hideSelection && date.isSame(value)) { selectionModifier = 'single'; } if (highlightedRange && highlightedRange.contains(date)) { + pending = true; + if (date.isSame(highlightedRange.start)) { - highlightModifier = 'start'; + selectionModifier = 'start'; } else if (date.isSame(highlightedRange.end)) { - highlightModifier = 'end'; + selectionModifier = 'end'; } else { - highlightModifier = 'segment'; + selectionModifier = 'segment'; } } @@ -366,11 +374,11 @@ var CalendarDate = _reactAddons2['default'].createClass({ pmColor = states.getIn([1, 'color']); if (amColor) { - cellStyle['borderLeftColor'] = _utilsLightenDarkenColor2['default'](amColor, -10); + cellStyle.borderLeftColor = _utilsLightenDarkenColor2['default'](amColor, -10); } if (pmColor) { - cellStyle['borderRightColor'] = _utilsLightenDarkenColor2['default'](pmColor, -10); + cellStyle.borderRightColor = _utilsLightenDarkenColor2['default'](pmColor, -10); } } @@ -395,7 +403,7 @@ var CalendarDate = _reactAddons2['default'].createClass({ { className: this.cx({ element: 'DateLabel' }) }, date.format('D') ), - selectionModifier && _reactAddons2['default'].createElement(_CalendarSelection2['default'], { modifier: selectionModifier }), + selectionModifier && _reactAddons2['default'].createElement(_CalendarSelection2['default'], { modifier: selectionModifier, pending: pending }), highlightModifier && _reactAddons2['default'].createElement(_CalendarHighlight2['default'], { modifier: highlightModifier }) ); } diff --git a/dist/calendar/CalendarDatePeriod.js b/dist/calendar/CalendarDatePeriod.js index 12418cca..9c48d219 100644 --- a/dist/calendar/CalendarDatePeriod.js +++ b/dist/calendar/CalendarDatePeriod.js @@ -31,7 +31,7 @@ var CalendarDatePeriod = _reactAddons2['default'].createClass({ var period = _props.period; var modifiers = _defineProperty({}, period, true); - var style; + var style = undefined; if (color) { style = { backgroundColor: color }; diff --git a/dist/calendar/CalendarSelection.js b/dist/calendar/CalendarSelection.js index 4752ca9f..fc93e14e 100644 --- a/dist/calendar/CalendarSelection.js +++ b/dist/calendar/CalendarSelection.js @@ -29,9 +29,13 @@ var CalendarSelection = _reactAddons2['default'].createClass({ var _props = this.props; var modifier = _props.modifier; var inOtherMonth = _props.inOtherMonth; + var newSelectionStarted = _props.newSelectionStarted; + var pending = _props.pending; var modifiers = _defineProperty({}, modifier, true); var states = { + pending: pending, + newSelectionStarted: newSelectionStarted, inOtherMonth: inOtherMonth }; diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 00000000..40ae6e97 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,14 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var _DateRangePicker = require('./DateRangePicker'); + +var _DateRangePicker2 = _interopRequireDefault(_DateRangePicker); + +exports['default'] = _DateRangePicker2['default']; +module.exports = exports['default']; \ No newline at end of file diff --git a/dist/utils/bemCx.js b/dist/utils/bemCx.js index 5164b662..0ab81964 100644 --- a/dist/utils/bemCx.js +++ b/dist/utils/bemCx.js @@ -14,7 +14,7 @@ function bemCx() { var states = options.states; var bemClasses = []; - var baseClassName; + var baseClassName = undefined; if (element) { if (namespace) { diff --git a/dist/utils/lightenDarkenColor.js b/dist/utils/lightenDarkenColor.js index e31c2cf6..52020772 100644 --- a/dist/utils/lightenDarkenColor.js +++ b/dist/utils/lightenDarkenColor.js @@ -7,10 +7,10 @@ exports["default"] = lightenDarkenColor; function lightenDarkenColor(col, amt) { var usePound = false; - var num; - var r; - var b; - var g; + var num = undefined; + var r = undefined; + var b = undefined; + var g = undefined; if (col[0] === "#") { col = col.slice(1); diff --git a/example/css/react-calendar.scss b/example/css/react-calendar.scss index a4e5af05..2f2b7796 100644 --- a/example/css/react-calendar.scss +++ b/example/css/react-calendar.scss @@ -27,10 +27,11 @@ $ns: DateRangePicker; &__LegendItemColor { border-radius: 50%; display: inline-block; - height: 16px; + height: 14px; margin-right: 6px; vertical-align: text-bottom; - width: 16px; + width: 14px; + border: 1px solid rgba(#000, .25); &--selection { background-color: #ed5434; @@ -246,6 +247,11 @@ $ns: DateRangePicker; left: $selection-margin; right: $selection-margin; } + + &--is-pending { + background-color: rgba(#ed5434, .75); + border-width: 0; + } } &__CalendarHighlight { diff --git a/example/index.jsx b/example/index.jsx index 17ef511b..844a9e92 100644 --- a/example/index.jsx +++ b/example/index.jsx @@ -58,14 +58,16 @@ var DatePickerRange = React.createClass({ var DatePickerSingle = React.createClass({ getInitialState() { return { - value: null, + value: null }; }, + handleSelect(value) { this.setState({ - value: value, + value: value }); }, + render() { return (
@@ -73,7 +75,7 @@ var DatePickerSingle = React.createClass({ value={this.state.value} />
@@ -93,7 +95,7 @@ var Index = React.createClass({ render() { var stateDefinitions = { available: { - color: null, + color: '#ffffff', label: 'Available' }, enquire: { diff --git a/src/DateRangePicker.jsx b/src/DateRangePicker.jsx index e6a45eda..5dbbb3cb 100644 --- a/src/DateRangePicker.jsx +++ b/src/DateRangePicker.jsx @@ -11,58 +11,59 @@ import CalendarDate from './calendar/CalendarDate'; import PaginationArrow from './PaginationArrow'; -var PureRenderMixin = React.addons.PureRenderMixin; - -var absoluteMinimum = moment(new Date(-8640000000000000 / 2)).startOf('day'); -var absoluteMaximum = moment(new Date(8640000000000000 / 2)).startOf('day'); +const PureRenderMixin = React.addons.PureRenderMixin; +const absoluteMinimum = moment(new Date(-8640000000000000 / 2)).startOf('day'); +const absoluteMaximum = moment(new Date(8640000000000000 / 2)).startOf('day'); React.initializeTouchEvents(true); -function noop () {} +function noop() {} -var DateRangePicker = React.createClass({ +const DateRangePicker = React.createClass({ mixins: [BemMixin, PureRenderMixin], propTypes: { - bemNamespace: React.PropTypes.string, bemBlock: React.PropTypes.string, - numberOfCalendars: React.PropTypes.number, - firstOfWeek: React.PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), + bemNamespace: React.PropTypes.string, + dateStates: React.PropTypes.array, // an array of date ranges and their states + defaultState: React.PropTypes.string, disableNavigation: React.PropTypes.bool, + firstOfWeek: React.PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]), initialDate: React.PropTypes.instanceOf(Date), - initialRange: React.PropTypes.object, + initialFromValue: React.PropTypes.bool, initialMonth: React.PropTypes.number, // Overrides values derived from initialDate/initialRange + initialRange: React.PropTypes.object, initialYear: React.PropTypes.number, // Overrides values derived from initialDate/initialRange - minimumDate: React.PropTypes.instanceOf(Date), maximumDate: React.PropTypes.instanceOf(Date), - selectionType: React.PropTypes.oneOf(['single', 'range']), - stateDefinitions: React.PropTypes.object, + minimumDate: React.PropTypes.instanceOf(Date), + numberOfCalendars: React.PropTypes.number, + onHighlightDate: React.PropTypes.func, // triggered when a date is highlighted (hovered) + onHighlightRange: React.PropTypes.func, // triggered when a range is highlighted (hovered) + onSelect: React.PropTypes.func, // triggered when a date or range is selectec + onSelectStart: React.PropTypes.func, // triggered when the first date in a range is selected + paginationArrowComponent: React.PropTypes.func, selectedLabel: React.PropTypes.string, - dateStates: React.PropTypes.array, // an array of date ranges and their states - defaultState: React.PropTypes.string, - initialFromValue: React.PropTypes.bool, + selectionType: React.PropTypes.oneOf(['single', 'range']), showLegend: React.PropTypes.bool, - onSelect: React.PropTypes.func, - onSelectStart: React.PropTypes.func, - paginationArrowComponent: React.PropTypes.func, - value: function(props, propName, componentName) { - var val = props[propName]; + stateDefinitions: React.PropTypes.object, + value(props, propName) { + let val = props[propName]; if (!val) { - return - } else if(moment.isMoment(val)) { - return; + return null; + } else if (moment.isMoment(val)) { + return null; } else if (val.start && val.end && moment.isMoment(val.start) && moment.isMoment(val.end)) { - return; + return null; } return new Error('Value must be a moment or a moment range'); } }, getDefaultProps() { - var date = new Date(); - var initialDate = new Date(date.getFullYear(), date.getMonth(), date.getDate()); + let date = new Date(); + let initialDate = new Date(date.getFullYear(), date.getMonth(), date.getDate()); return { bemNamespace: null, @@ -99,10 +100,10 @@ var DateRangePicker = React.createClass({ }, getInitialState() { - var {initialYear, initialMonth, initialFromValue, selectionType, value} = this.props; - var now = new Date(); - var year = now.getFullYear(); - var month = now.getMonth(); + let now = new Date(); + let {initialYear, initialMonth, initialFromValue, selectionType, value} = this.props; + let year = now.getFullYear(); + let month = now.getMonth(); if (initialYear && initialMonth) { year = initialYear; @@ -126,31 +127,32 @@ var DateRangePicker = React.createClass({ highlightStartDate: null, highlightedDate: null, highlightRange: null, + hideSelection: false, enabledRange: this.getEnabledRange(this.props), dateStates: this.getDateStates(this.props) }; }, getEnabledRange(props) { - var min = props.minimumDate ? moment(props.minimumDate).startOf('day') : absoluteMinimum; - var max = props.maximumDate ? moment(props.maximumDate).startOf('day') : absoluteMaximum; + let min = props.minimumDate ? moment(props.minimumDate).startOf('day') : absoluteMinimum; + let max = props.maximumDate ? moment(props.maximumDate).startOf('day') : absoluteMaximum; return moment().range(min, max); }, getDateStates(props) { - var {dateStates, defaultState, stateDefinitions} = props; - var actualStates = []; - var minDate = absoluteMinimum; - var maxDate = absoluteMaximum; - var dateCursor = moment(minDate).startOf('day'); + let {dateStates, defaultState, stateDefinitions} = props; + let actualStates = []; + let minDate = absoluteMinimum; + let maxDate = absoluteMaximum; + let dateCursor = moment(minDate).startOf('day'); - var defs = Immutable.fromJS(stateDefinitions); + let defs = Immutable.fromJS(stateDefinitions); dateStates.forEach(function(s) { - var r = s.range; - var start = r.start.startOf('day'); - var end = r.end.startOf('day'); + let r = s.range; + let start = r.start.startOf('day'); + let end = r.end.startOf('day'); if (!dateCursor.isSame(start)) { actualStates.push({ @@ -163,7 +165,7 @@ var DateRangePicker = React.createClass({ } actualStates.push(s); dateCursor = end; - }.bind(this)); + }); actualStates.push({ state: defaultState, @@ -175,14 +177,14 @@ var DateRangePicker = React.createClass({ // sanitize date states return Immutable.List(actualStates).map(function(s) { - var def = defs.get(s.state); + let def = defs.get(s.state); return Immutable.Map({ range: s.range, state: s.state, selectable: def.get('selectable', true), color: def.get('color') }); - }.bind(this)); + }); }, onSelect(date) { @@ -191,37 +193,45 @@ var DateRangePicker = React.createClass({ startRangeSelection(date) { this.setState({ + hideSelection: true, selectedStartDate: date }); - if (typeof(this.props.onSelectStart) === 'function') { + if (typeof this.props.onSelectStart === 'function') { this.props.onSelectStart(moment(date)); } }, + statesForDate(date) { + return this.state.dateStates.filter(d => date.within(d.get('range'))).map(d => d.get('state')); + }, + statesForRange(range) { if (range.start.isSame(range.end)) { - return this.state.dateStates.filter(d => range.start.within(d.get('range'))).map(d => d.get('state')); + return this.statesForDate(range.start); } return this.state.dateStates.filter(d => d.get('range').intersect(range)).map(d => d.get('state')); }, + completeSelection() { - var highlightedDate = this.state.highlightedDate; + let highlightedDate = this.state.highlightedDate; if (highlightedDate) { this.setState({ + hideSelection: false, highlightedDate: null }); - this.props.onSelect(highlightedDate); + this.props.onSelect(highlightedDate, this.statesForDate(highlightedDate)); } }, completeRangeSelection() { - var range = this.state.highlightedRange; + let range = this.state.highlightedRange; if (range && !range.start.isSame(range.end)) { this.setState({ selectedStartDate: null, highlightedRange: null, - highlightedDate: null + highlightedDate: null, + hideSelection: false }); this.props.onSelect(range, this.statesForRange(range)); } @@ -229,8 +239,11 @@ var DateRangePicker = React.createClass({ onHighlightDate(date) { this.setState({ - highlightedDate: date, + highlightedDate: date }); + if (typeof this.props.onHighlightDate === 'function') { + this.props.onHighlightDate(date, this.statesForDate(date)); + } }, onHighlightRange(range) { @@ -238,6 +251,9 @@ var DateRangePicker = React.createClass({ highlightedRange: range, highlightedDate: null }); + if (typeof this.props.onHighlightRange === 'function') { + this.props.onHighlightRange(range, this.statesForRange(range)); + } }, onUnHighlightDate() { @@ -258,7 +274,7 @@ var DateRangePicker = React.createClass({ }, moveBack() { - var monthDate; + let monthDate; if (this.canMoveBack()) { monthDate = this.getMonthDate(); @@ -284,7 +300,7 @@ var DateRangePicker = React.createClass({ }, moveForward() { - var monthDate; + let monthDate; if (this.canMoveForward()) { monthDate = this.getMonthDate(); @@ -303,7 +319,7 @@ var DateRangePicker = React.createClass({ }, changeYear(year) { - var {enabledRange, month} = this.state; + let {enabledRange, month} = this.state; if (moment({years: year, months: month, date: 1}).unix() < enabledRange.start.unix()) { month = enabledRange.start.month(); @@ -326,7 +342,7 @@ var DateRangePicker = React.createClass({ }, renderCalendar(index) { - var { + let { bemBlock, bemNamespace, firstOfWeek, @@ -335,20 +351,21 @@ var DateRangePicker = React.createClass({ value } = this.props; - var { + let { dateStates, enabledRange, + hideSelection, highlightedDate, highlightedRange, highlightStartDate, selectedStartDate } = this.state; - var monthDate = this.getMonthDate(); - var year = monthDate.year(); - var month = monthDate.month(); - var key = `${ index}-${ year }-${ month }`; - var props; + let monthDate = this.getMonthDate(); + let year = monthDate.year(); + let month = monthDate.month(); + let key = `${ index}-${ year }-${ month }`; + let props; monthDate.add(index, 'months'); @@ -358,6 +375,7 @@ var DateRangePicker = React.createClass({ dateStates, enabledRange, firstOfWeek, + hideSelection, highlightedDate, highlightedRange, highlightStartDate, @@ -384,15 +402,15 @@ var DateRangePicker = React.createClass({ }, render: function() { - var {paginationArrowComponent: PaginationArrow, numberOfCalendars, stateDefinitions, selectedLabel, showLegend} = this.props; + let {paginationArrowComponent: PaginationArrowComponent, numberOfCalendars, stateDefinitions, selectedLabel, showLegend} = this.props; - var calendars = Immutable.Range(0, numberOfCalendars).map(this.renderCalendar); + let calendars = Immutable.Range(0, numberOfCalendars).map(this.renderCalendar); return (
- + {calendars.toJS()} - + {showLegend ? : null}
); diff --git a/src/Legend.jsx b/src/Legend.jsx index b523e5aa..12ce6f6b 100644 --- a/src/Legend.jsx +++ b/src/Legend.jsx @@ -1,24 +1,25 @@ 'use strict'; import React from 'react/addons'; -import bemCx from './utils/bemCx'; import BemMixin from './utils/BemMixin'; -var PureRenderMixin = React.addons.PureRenderMixin; -var cx = React.addons.classSet; +const PureRenderMixin = React.addons.PureRenderMixin; -var Legend = React.createClass({ +const Legend = React.createClass({ mixins: [BemMixin, PureRenderMixin], + propTypes: { + selectedLabel: React.PropTypes.string.isRequired, + stateDefinitions: React.PropTypes.object.isRequired + }, + render() { - var {selectedLabel, stateDefinitions} = this.props; - var block = this.getBemBlock(); - var namespace = this.getBemNamespace(); - var items = []; - var name; - var def; - var style; + let {selectedLabel, stateDefinitions} = this.props; + let items = []; + let name; + let def; + let style; for (name in stateDefinitions) { def = stateDefinitions[name]; diff --git a/src/PaginationArrow.jsx b/src/PaginationArrow.jsx index 63f6a20a..2af3540e 100644 --- a/src/PaginationArrow.jsx +++ b/src/PaginationArrow.jsx @@ -3,23 +3,34 @@ import React from 'react/addons'; import BemMixin from './utils/BemMixin'; -var PureRenderMixin = React.addons.PureRenderMixin; +const PureRenderMixin = React.addons.PureRenderMixin; -var PaginationArrow = React.createClass({ +const PaginationArrow = React.createClass({ mixins: [BemMixin, PureRenderMixin], + propTypes: { + disabled: React.PropTypes.bool, + direction: React.PropTypes.oneOf(['next', 'previous']) + }, + + getDefaultProps() { + return { + disabled: false + }; + }, + render() { - var {disabled, direction, ...props} = this.props; - var modifiers = {[direction]: true}; - var states = {disabled}; + let {disabled, direction, ...props} = this.props; + let modifiers = {[direction]: true}; + let states = {disabled}; - var elementOpts = { + let elementOpts = { modifiers, states }; - var iconOpts = { + let iconOpts = { element: 'PaginationArrowIcon', modifiers, states diff --git a/src/calendar/CalendarDate.jsx b/src/calendar/CalendarDate.jsx index a58a7dc3..a267deba 100644 --- a/src/calendar/CalendarDate.jsx +++ b/src/calendar/CalendarDate.jsx @@ -11,12 +11,10 @@ import CalendarDatePeriod from './CalendarDatePeriod'; import CalendarHighlight from './CalendarHighlight'; import CalendarSelection from './CalendarSelection'; +const PureRenderMixin = React.addons.PureRenderMixin; -var PureRenderMixin = React.addons.PureRenderMixin; -var cx = React.addons.classSet; - -var CalendarDate = React.createClass({ +const CalendarDate = React.createClass({ mixins: [BemMixin, PureRenderMixin], propTypes: { @@ -28,6 +26,7 @@ var CalendarDate = React.createClass({ selectionType: React.PropTypes.string.isRequired, value: React.PropTypes.object, + hideSelection: React.PropTypes.bool, highlightedRange: React.PropTypes.object, highlightedDate: React.PropTypes.object, selectedStartDate: React.PropTypes.object, @@ -39,6 +38,12 @@ var CalendarDate = React.createClass({ onCompleteSelection: React.PropTypes.func }, + getDefaultProps() { + return { + hideSelection: false + }; + }, + getInitialState() { return { mouseDown: false @@ -66,8 +71,8 @@ var CalendarDate = React.createClass({ * with a non-selectable state. Using forwards to determine * which direction to work */ - var blockedRanges = this.nonSelectableStateRanges().map(r => r.get('range')); - var intersect; + let blockedRanges = this.nonSelectableStateRanges().map(r => r.get('range')); + let intersect; if (forwards) { intersect = blockedRanges.find(r => range.intersect(r)); @@ -148,14 +153,14 @@ var CalendarDate = React.createClass({ }, highlightDate() { - var {date, selectionType, selectedStartDate, onHighlightRange, onHighlightDate} = this.props; - var datePair; - var range; - var forwards; + let {date, selectionType, selectedStartDate, onHighlightRange, onHighlightDate} = this.props; + let datePair; + let range; + let forwards; if (selectionType === 'range') { if (selectedStartDate) { - datePair = Immutable.List.of(selectedStartDate, date).sortBy(d => d.unix()); + datePair = Immutable.List.of(selectedStartDate, date).sortBy(d => d.unix()); range = moment().range(datePair.get(0), datePair.get(1)); forwards = (range.start.unix() === selectedStartDate.unix()); range = this.sanitizeRange(range, forwards); @@ -175,8 +180,7 @@ var CalendarDate = React.createClass({ }, selectDate() { - var {date, selectionType, selectedStartDate, completeRangeSelection, completeSelection, startRangeSelection} = this.props; - var range; + let {date, selectionType, selectedStartDate, completeRangeSelection, completeSelection, startRangeSelection} = this.props; if (selectionType === 'range') { if (selectedStartDate) { @@ -186,16 +190,16 @@ var CalendarDate = React.createClass({ } } else { if (!this.isDisabled(date) && this.isDateSelectable(date)) { - completeSelection() + completeSelection(); } } }, getBemModifiers() { - var {date, firstOfMonth} = this.props; + let {date, firstOfMonth} = this.props; - var otherMonth = false; - var weekend = false; + let otherMonth = false; + let weekend = false; if (date.month() !== firstOfMonth.month()) { otherMonth = true; @@ -209,12 +213,12 @@ var CalendarDate = React.createClass({ }, getBemStates() { - var {date, value, highlightedRange, highlightedDate} = this.props; - var disabled = this.isDisabled(date); - var highlighted = false; - var selected = false; + let {date, value, highlightedRange, highlightedDate, hideSelection} = this.props; + let disabled = this.isDisabled(date); + let highlighted = false; + let selected = false; - if (value) { + if (value && !hideSelection) { if (!value.start && date.isSame(value)) { selected = true; } else if (value.start && value.start.isSame(value.end) && date.isSame(value.start)) { @@ -225,7 +229,7 @@ var CalendarDate = React.createClass({ } if (highlightedRange && highlightedRange.contains(date)) { - highlighted = true; + selected = true; } else if (highlightedDate && date.isSame(highlightedDate)) { highlighted = true; } @@ -234,23 +238,24 @@ var CalendarDate = React.createClass({ }, render() { - var {value, firstOfMonth, date, highlightedRange, highlightedDate} = this.props; + let {value, date, highlightedRange, highlightedDate, hideSelection} = this.props; - var bemModifiers = this.getBemModifiers(); - var bemStates = this.getBemStates(); + let bemModifiers = this.getBemModifiers(); + let bemStates = this.getBemStates(); + let pending = false; - var color; - var amColor; - var pmColor; - var states = this.dateRangesForDate(date); - var numStates = states.count(); - var cellStyle = {}; - var style = {}; + let color; + let amColor; + let pmColor; + let states = this.dateRangesForDate(date); + let numStates = states.count(); + let cellStyle = {}; + let style = {}; - var highlightModifier = null; - var selectionModifier = null; + let highlightModifier = null; + let selectionModifier = null; - if (value && value.start) { + if (value && !hideSelection && value.start) { if (value.start.isSame(date) && value.start.isSame(value.end)) { selectionModifier = 'single'; } else if (value.contains(date)) { @@ -262,17 +267,19 @@ var CalendarDate = React.createClass({ selectionModifier = 'segment'; } } - } else if (value && date.isSame(value)) { + } else if (value && !hideSelection && date.isSame(value)) { selectionModifier = 'single'; } if (highlightedRange && highlightedRange.contains(date)) { + pending = true; + if (date.isSame(highlightedRange.start)) { - highlightModifier = 'start'; + selectionModifier = 'start'; } else if (date.isSame(highlightedRange.end)) { - highlightModifier = 'end'; + selectionModifier = 'end'; } else { - highlightModifier = 'segment'; + selectionModifier = 'segment'; } } @@ -299,11 +306,11 @@ var CalendarDate = React.createClass({ pmColor = states.getIn([1, 'color']); if (amColor) { - cellStyle['borderLeftColor'] = lightenDarkenColor(amColor, -10); + cellStyle.borderLeftColor = lightenDarkenColor(amColor, -10); } if (pmColor) { - cellStyle['borderRightColor'] = lightenDarkenColor(pmColor, -10); + cellStyle.borderRightColor = lightenDarkenColor(pmColor, -10); } } @@ -323,7 +330,7 @@ var CalendarDate = React.createClass({ {numStates === 1 &&
} {date.format('D')} - {selectionModifier && } + {selectionModifier && } {highlightModifier && } ); diff --git a/src/calendar/CalendarDatePeriod.jsx b/src/calendar/CalendarDatePeriod.jsx index a63865b5..69b061b4 100644 --- a/src/calendar/CalendarDatePeriod.jsx +++ b/src/calendar/CalendarDatePeriod.jsx @@ -2,15 +2,15 @@ import React from 'react/addons'; import BemMixin from '../utils/BemMixin'; -var PureRenderMixin = React.addons.PureRenderMixin; +const PureRenderMixin = React.addons.PureRenderMixin; -var CalendarDatePeriod = React.createClass({ +const CalendarDatePeriod = React.createClass({ mixins: [BemMixin, PureRenderMixin], render() { - var {color, period} = this.props; - var modifiers = {[period]: true}; - var style; + let {color, period} = this.props; + let modifiers = {[period]: true}; + let style; if (color) { style= {backgroundColor: color}; diff --git a/src/calendar/CalendarHighlight.jsx b/src/calendar/CalendarHighlight.jsx index bf102f1a..a7e5dd9f 100644 --- a/src/calendar/CalendarHighlight.jsx +++ b/src/calendar/CalendarHighlight.jsx @@ -3,16 +3,16 @@ import React from 'react/addons'; import BemMixin from '../utils/BemMixin'; -var PureRenderMixin = React.addons.PureRenderMixin; +const PureRenderMixin = React.addons.PureRenderMixin; -var CalendarHighlight = React.createClass({ +const CalendarHighlight = React.createClass({ mixins: [BemMixin, PureRenderMixin], render() { - var {modifier, inOtherMonth} = this.props; - var modifiers = {[modifier]: true}; - var states = { + let {modifier, inOtherMonth} = this.props; + let modifiers = {[modifier]: true}; + let states = { inOtherMonth }; diff --git a/src/calendar/CalendarMonth.jsx b/src/calendar/CalendarMonth.jsx index 750d44e8..078b3a9a 100644 --- a/src/calendar/CalendarMonth.jsx +++ b/src/calendar/CalendarMonth.jsx @@ -7,36 +7,36 @@ import Immutable from 'immutable'; import BemMixin from '../utils/BemMixin'; -var PureRenderMixin = React.addons.PureRenderMixin; +const PureRenderMixin = React.addons.PureRenderMixin; -var lang = moment().localeData(); +const lang = moment().localeData(); -var WEEKDAYS = Immutable.List(lang._weekdays).zip(Immutable.List(lang._weekdaysShort)); -var MONTHS = Immutable.List(lang._months); +const WEEKDAYS = Immutable.List(lang._weekdays).zip(Immutable.List(lang._weekdaysShort)); +const MONTHS = Immutable.List(lang._months); -var CalendarMonth = React.createClass({ +const CalendarMonth = React.createClass({ mixins: [BemMixin, PureRenderMixin], renderDay(date, i) { - var {dateComponent: CalendarDate, ...props} = this.props; + let {dateComponent: CalendarDate, ...props} = this.props; return ; }, renderWeek(dates, i) { - var days = dates.map(this.renderDay); + let days = dates.map(this.renderDay); return ( {days.toJS()} ); }, renderDayHeaders() { - var {firstOfWeek} = this.props; - var indices = Immutable.Range(firstOfWeek, 7).concat(Immutable.Range(0, firstOfWeek)); + let {firstOfWeek} = this.props; + let indices = Immutable.Range(firstOfWeek, 7).concat(Immutable.Range(0, firstOfWeek)); - var headers = indices.map(function(index) { - var weekday = WEEKDAYS.get(index); + let headers = indices.map(function(index) { + let weekday = WEEKDAYS.get(index); return ( {weekday[1]} ); @@ -52,7 +52,7 @@ var CalendarMonth = React.createClass({ }, renderYearChoice(year) { - var {enabledRange} = this.props; + let {enabledRange} = this.props; if (year < enabledRange.start.year()) { return; @@ -68,11 +68,11 @@ var CalendarMonth = React.createClass({ }, renderHeaderYear() { - var {firstOfMonth} = this.props; - var y = firstOfMonth.year(); - var years = Immutable.Range(y - 5, y).concat(Immutable.Range(y, y + 10)); - var choices = years.map(this.renderYearChoice); - var modifiers = {year: true}; + let {firstOfMonth} = this.props; + let y = firstOfMonth.year(); + let years = Immutable.Range(y - 5, y).concat(Immutable.Range(y, y + 10)); + let choices = years.map(this.renderYearChoice); + let modifiers = {year: true}; return ( @@ -87,9 +87,9 @@ var CalendarMonth = React.createClass({ }, renderMonthChoice(month , i) { - var {firstOfMonth, enabledRange} = this.props; - var disabled = false; - var year = firstOfMonth.year(); + let {firstOfMonth, enabledRange} = this.props; + let disabled = false; + let year = firstOfMonth.year(); if (moment({years: year, months: i + 1, date: 1}).unix() < enabledRange.start.unix()) { disabled = true; @@ -105,9 +105,9 @@ var CalendarMonth = React.createClass({ }, renderHeaderMonth() { - var {firstOfMonth} = this.props; - var choices = MONTHS.map(this.renderMonthChoice); - var modifiers = {month: true}; + let {firstOfMonth} = this.props; + let choices = MONTHS.map(this.renderMonthChoice); + let modifiers = {month: true}; return ( @@ -126,11 +126,11 @@ var CalendarMonth = React.createClass({ }, render() { - var {firstOfWeek, firstOfMonth} = this.props; + let {firstOfWeek, firstOfMonth} = this.props; - var cal = new calendar.Calendar(firstOfWeek); - var monthDates = Immutable.fromJS(cal.monthDates(firstOfMonth.year(), firstOfMonth.month())); - var weeks = monthDates.map(this.renderWeek); + let cal = new calendar.Calendar(firstOfWeek); + let monthDates = Immutable.fromJS(cal.monthDates(firstOfMonth.year(), firstOfMonth.month())); + let weeks = monthDates.map(this.renderWeek); return (
diff --git a/src/calendar/CalendarSelection.jsx b/src/calendar/CalendarSelection.jsx index 8ba78e01..7db0bdfc 100644 --- a/src/calendar/CalendarSelection.jsx +++ b/src/calendar/CalendarSelection.jsx @@ -3,16 +3,18 @@ import React from 'react/addons'; import BemMixin from '../utils/BemMixin'; -var PureRenderMixin = React.addons.PureRenderMixin; +const PureRenderMixin = React.addons.PureRenderMixin; -var CalendarSelection = React.createClass({ +const CalendarSelection = React.createClass({ mixins: [BemMixin, PureRenderMixin], render() { - var {modifier, inOtherMonth} = this.props; - var modifiers = {[modifier]: true}; - var states = { + let {modifier, inOtherMonth, newSelectionStarted, pending} = this.props; + let modifiers = {[modifier]: true}; + let states = { + pending, + newSelectionStarted, inOtherMonth }; diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..058f07f1 --- /dev/null +++ b/src/index.js @@ -0,0 +1,3 @@ +import DateRangePicker from './DateRangePicker'; + +export default DateRangePicker; diff --git a/src/utils/BemMixin.js b/src/utils/BemMixin.js index c2c16d2b..3207330d 100644 --- a/src/utils/BemMixin.js +++ b/src/utils/BemMixin.js @@ -2,7 +2,7 @@ import React from 'react'; import bemCx from './bemCx'; -var BemMixin = { +const BemMixin = { propTypes: { bemNamespace: React.PropTypes.string, bemBlock: React.PropTypes.string @@ -46,7 +46,7 @@ var BemMixin = { }, cx(options={}) { - var opts = { + let opts = { namespace: this.getBemNamespace(), element: this.constructor.displayName, block: this.getBemBlock(), diff --git a/src/utils/bemCx.js b/src/utils/bemCx.js index a7572881..b83cc65c 100644 --- a/src/utils/bemCx.js +++ b/src/utils/bemCx.js @@ -1,7 +1,7 @@ export default function bemCx(options={}) { - var {block, element, namespace, modifiers, states} = options; - var bemClasses = []; - var baseClassName; + let {block, element, namespace, modifiers, states} = options; + let bemClasses = []; + let baseClassName; if (element) { if (namespace) { diff --git a/src/utils/lightenDarkenColor.js b/src/utils/lightenDarkenColor.js index bfd8ef0f..74db9632 100644 --- a/src/utils/lightenDarkenColor.js +++ b/src/utils/lightenDarkenColor.js @@ -1,9 +1,9 @@ export default function lightenDarkenColor(col,amt) { - var usePound = false; - var num; - var r; - var b; - var g; + let usePound = false; + let num; + let r; + let b; + let g; if (col[0] === "#") { col = col.slice(1);