@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/internal/BGRuler/BGRuler.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */
+
+export var BGRuler = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(BGRuler, _React$Component);
+
+  function BGRuler() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.iframe = null;
+
+    _this.componentDidMount = function () {
+      if (_this.iframe && _this.iframe.contentWindow) {
+        _this.iframe.contentWindow.addEventListener('resize', _this.update, true);
+      }
+
+      _this.update();
+    };
+
+    _this.componentWillUnmount = function () {
+      if (_this.iframe && _this.iframe.contentWindow) {
+        _this.iframe.contentWindow.removeEventListener('resize', _this.update, true);
+      }
+    };
+
+    _this.update = function () {
+      _this.forceUpdate();
+    };
+
+    _this.iframeRef = function (ref) {
+      _this.iframe = ref;
+    };
+
+    return _this;
+  }
+
+  var _proto = BGRuler.prototype;
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        width = _this$props.width,
+        height = _this$props.height,
+        color = _this$props.color,
+        top = _this$props.top,
+        bottom = _this$props.bottom,
+        left = _this$props.left,
+        right = _this$props.right;
+    var wrapper = {
+      position: 'absolute',
+      width: width,
+      height: height,
+      top: top,
+      bottom: bottom,
+      left: left,
+      right: right,
+      overflow: 'hidden'
+    };
+    var iframe = {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      border: 0,
+      visibility: 'hidden'
+    };
+    var marks = {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      backgroundSize: '100px 20px',
+      backgroundRepeat: 'repeat-x'
+    };
+
+    var highMarks = _extends({}, marks, {
+      height: '100%',
+      backgroundImage: "linear-gradient(90deg, " + color + " 0, " + color + " 1px, transparent 1px)"
+    });
+
+    var middleMarks = _extends({}, marks, {
+      height: '75%',
+      backgroundImage: "linear-gradient(90deg, transparent 0, transparent 49px, " + color + " 49px, " + color + " 50px, transparent 50px)"
+    });
+
+    var shortMarks = _extends({}, marks, {
+      height: '40%',
+      backgroundImage: "\n        linear-gradient(90deg, transparent 0, transparent 9px, " + color + " 9px, " + color + " 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, " + color + " 19px, " + color + " 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, " + color + " 29px, " + color + " 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, " + color + " 39px, " + color + " 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, " + color + " 59px, " + color + " 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, " + color + " 69px, " + color + " 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, " + color + " 79px, " + color + " 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, " + color + " 89px, " + color + " 90px, transparent 90px)\n      "
+    });
+
+    var rulerWidth = this.iframe ? this.iframe.getBoundingClientRect().width : 0;
+    var labels = Array(Math.ceil(rulerWidth / 100) + 1).fill(null).map(function (value, index) {
+      var label = {
+        position: 'absolute',
+        fontFamily: 'Arial',
+        fontSize: 10,
+        lineHeight: 1,
+        color: color,
+        bottom: -1,
+        left: index * 100 + 5
+      };
+      return /*#__PURE__*/React.createElement("span", {
+        key: index,
+        style: label
+      }, index * 100);
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      style: wrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      style: highMarks
+    }), /*#__PURE__*/React.createElement("div", {
+      style: middleMarks
+    }), /*#__PURE__*/React.createElement("div", {
+      style: shortMarks
+    }), labels, /*#__PURE__*/React.createElement("iframe", {
+      title: "BGRuler",
+      style: iframe,
+      ref: this.iframeRef
+    }));
+  };
+
+  return BGRuler;
+}(React.Component);
+BGRuler.defaultProps = {
+  height: 20,
+  top: 0,
+  left: 0,
+  right: 0,
+  color: '#333'
+};

package/internal/BGRuler/BGRuler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BGRuler.tsx"],"names":["React","BGRuler","iframe","componentDidMount","contentWindow","addEventListener","update","componentWillUnmount","removeEventListener","forceUpdate","iframeRef","ref","render","props","width","height","color","top","bottom","left","right","wrapper","position","overflow","border","visibility","marks","backgroundSize","backgroundRepeat","highMarks","backgroundImage","middleMarks","shortMarks","rulerWidth","getBoundingClientRect","labels","Array","Math","ceil","fill","map","value","index","label","fontFamily","fontSize","lineHeight","Component","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\n\n/**\n * Компонент рисует пиксельную линейку на заднем фоне.\n * Помогает контролировать размеры элементов при скриншотном тестировании.\n *\n * @see FxInput/__stories__/FxInput.stories.tsx\n */\nexport class BGRuler extends React.Component<{\n  width?: string | number;\n  height?: string | number;\n  top?: string | number;\n  bottom?: string | number;\n  right?: string | number;\n  left?: string | number;\n  color?: string;\n}> {\n  public static defaultProps = {\n    height: 20,\n    top: 0,\n    left: 0,\n    right: 0,\n    color: '#333',\n  };\n\n  private iframe: HTMLIFrameElement | null = null;\n\n  public componentDidMount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.addEventListener('resize', this.update, true);\n    }\n    this.update();\n  };\n\n  public componentWillUnmount = () => {\n    if (this.iframe && this.iframe.contentWindow) {\n      this.iframe.contentWindow.removeEventListener('resize', this.update, true);\n    }\n  };\n\n  public update = () => {\n    this.forceUpdate();\n  };\n\n  public render() {\n    const { width, height, color, top, bottom, left, right } = this.props;\n    const wrapper: React.CSSProperties = {\n      position: 'absolute',\n      width,\n      height,\n      top,\n      bottom,\n      left,\n      right,\n      overflow: 'hidden',\n    };\n    const iframe: React.CSSProperties = {\n      position: 'absolute',\n      width: '100%',\n      height: '100%',\n      border: 0,\n      visibility: 'hidden',\n    };\n    const marks: React.CSSProperties = {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      backgroundSize: '100px 20px',\n      backgroundRepeat: 'repeat-x',\n    };\n    const highMarks: React.CSSProperties = {\n      ...marks,\n      height: '100%',\n      backgroundImage: `linear-gradient(90deg, ${color} 0, ${color} 1px, transparent 1px)`,\n    };\n    const middleMarks: React.CSSProperties = {\n      ...marks,\n      height: '75%',\n      backgroundImage: `linear-gradient(90deg, transparent 0, transparent 49px, ${color} 49px, ${color} 50px, transparent 50px)`,\n    };\n    const shortMarks: React.CSSProperties = {\n      ...marks,\n      height: '40%',\n      backgroundImage: `\n        linear-gradient(90deg, transparent 0, transparent 9px, ${color} 9px, ${color} 10px, transparent 10px),\n        linear-gradient(90deg, transparent 0, transparent 19px, ${color} 19px, ${color} 20px, transparent 20px),\n        linear-gradient(90deg, transparent 0, transparent 29px, ${color} 29px, ${color} 30px, transparent 30px),\n        linear-gradient(90deg, transparent 0, transparent 39px, ${color} 39px, ${color} 40px, transparent 40px),\n        linear-gradient(90deg, transparent 0, transparent 59px, ${color} 59px, ${color} 60px, transparent 60px),\n        linear-gradient(90deg, transparent 0, transparent 69px, ${color} 69px, ${color} 70px, transparent 70px),\n        linear-gradient(90deg, transparent 0, transparent 79px, ${color} 79px, ${color} 80px, transparent 80px),\n        linear-gradient(90deg, transparent 0, transparent 89px, ${color} 89px, ${color} 90px, transparent 90px)\n      `,\n    };\n    const rulerWidth = this.iframe ? this.iframe.getBoundingClientRect().width : 0;\n    const labels = Array(Math.ceil(rulerWidth / 100) + 1)\n      .fill(null)\n      .map((value, index) => {\n        const label: React.CSSProperties = {\n          position: 'absolute',\n          fontFamily: 'Arial',\n          fontSize: 10,\n          lineHeight: 1,\n          color,\n          bottom: -1,\n          left: index * 100 + 5,\n        };\n        return (\n          <span key={index} style={label}>\n            {index * 100}\n          </span>\n        );\n      });\n    return (\n      <div style={wrapper}>\n        <div style={highMarks} />\n        <div style={middleMarks} />\n        <div style={shortMarks} />\n        {labels}\n        <iframe title=\"BGRuler\" style={iframe} ref={this.iframeRef} />\n      </div>\n    );\n  }\n\n  private iframeRef = (ref: HTMLIFrameElement | null) => {\n    this.iframe = ref;\n  };\n}\n"]}

package/internal/BGRuler/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/internal/BGRuler.js",
+  "module": "BGRuler",
+  "types": "../BGRuler.d.ts",
+  "sideEffects": false
+}

package/internal/BGRuler.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+/**
+ * Компонент рисует пиксельную линейку на заднем фоне.
+ * Помогает контролировать размеры элементов при скриншотном тестировании.
+ *
+ * @see FxInput/__stories__/FxInput.stories.tsx
+ */
+export declare class BGRuler extends React.Component<{
+    width?: string | number;
+    height?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+    right?: string | number;
+    left?: string | number;
+    color?: string;
+}> {
+    static defaultProps: {
+        height: number;
+        top: number;
+        left: number;
+        right: number;
+        color: string;
+    };
+    private iframe;
+    componentDidMount: () => void;
+    componentWillUnmount: () => void;
+    update: () => void;
+    render(): JSX.Element;
+    private iframeRef;
+}

package/internal/Calendar/Calendar/Calendar.js

@@ -0,0 +1,433 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React from 'react';
+import normalizeWheel from 'normalize-wheel';
+import throttle from 'lodash.throttle';
+import { MAX_DATE, MAX_MONTH, MAX_YEAR, MIN_DATE, MIN_MONTH, MIN_YEAR } from "../../../lib/date/constants";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { Animation } from "../../../lib/animation";
+import { isMobile } from "../../../lib/client";
+import { themeConfig } from "../config";
+import * as CalendarUtils from "../CalendarUtils";
+import { MonthViewModel } from "../MonthViewModel";
+import * as CalendarScrollEvents from "../CalendarScrollEvents";
+import { Month } from "../Month";
+import { styles } from "../Calendar.styles";
+import { create, isGreater, isLess } from "../CalendarDateShape";
+
+var getTodayDate = function getTodayDate() {
+  var date = new Date();
+  return {
+    date: date.getDate(),
+    month: date.getMonth(),
+    year: date.getFullYear()
+  };
+};
+
+export var Calendar = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Calendar, _React$Component);
+
+  function Calendar(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.theme = void 0;
+    _this.wheelEndTimeout = void 0;
+    _this.root = void 0;
+    _this.animation = Animation();
+    _this.touchStartY = null;
+
+    _this.scrollToMonth = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(month, year) {
+        var _this$props, minDate, maxDate, currentMonth, diffInMonths, maxMonthsToAdd, onEnd, isYearChanges, monthsToPrependCount, monthsToPrepend, monthsToAppendCount, monthsToAppend;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!_this.animation.inProgress()) {
+                  _context.next = 4;
+                  break;
+                }
+
+                _this.animation.finish(); // FIXME: Dirty hack to await batched updates
+
+
+                _context.next = 4;
+                return new Promise(function (r) {
+                  return setTimeout(r);
+                });
+
+              case 4:
+                _this$props = _this.props, minDate = _this$props.minDate, maxDate = _this$props.maxDate;
+
+                if (!(minDate && isGreater(minDate, create(32, month, year)))) {
+                  _context.next = 8;
+                  break;
+                }
+
+                _this.scrollToMonth(minDate.month, minDate.year);
+
+                return _context.abrupt("return");
+
+              case 8:
+                if (!(maxDate && isLess(maxDate, create(0, month, year)))) {
+                  _context.next = 11;
+                  break;
+                }
+
+                _this.scrollToMonth(maxDate.month, maxDate.year);
+
+                return _context.abrupt("return");
+
+              case 11:
+                currentMonth = _this.state.months[1];
+                diffInMonths = currentMonth.month + currentMonth.year * 12 - month - year * 12;
+
+                if (!(diffInMonths === 0)) {
+                  _context.next = 16;
+                  break;
+                }
+
+                _this.scrollTo(0);
+
+                return _context.abrupt("return");
+
+              case 16:
+                maxMonthsToAdd = themeConfig(_this.theme).MAX_MONTHS_TO_APPEND_ON_SCROLL;
+
+                onEnd = function onEnd() {
+                  return _this.setState({
+                    months: CalendarUtils.getMonths(month, year),
+                    scrollPosition: 0
+                  });
+                };
+
+                isYearChanges = function isYearChanges(state) {
+                  return state.months[1].year !== year && // if diff in months is 2 or less,
+                  // either year is not changing either months already
+                  // have right isFirstInYear/isLastInYear flags
+                  Math.abs(diffInMonths) > 2;
+                }; // If scrolling upwards, prepend maximum maxMonthsToAdd months
+                // and scroll to the first month
+
+
+                if (diffInMonths > 0) {
+                  monthsToPrependCount = Math.min(Math.abs(diffInMonths) - 1, maxMonthsToAdd);
+                  monthsToPrepend = Array.from({
+                    length: monthsToPrependCount
+                  }, function (_, index) {
+                    return MonthViewModel.create(month + index, year);
+                  });
+
+                  _this.setState(function (state) {
+                    var yearChanges = isYearChanges(state);
+
+                    if (yearChanges) {
+                      // Mutating here can lead to some unexpected bugs
+                      // but we couldn't find any yet
+                      state.months[0].isFirstInYear = true;
+
+                      if (monthsToPrepend.length) {
+                        // Mutating item here is safe as it was just created
+                        monthsToPrepend[monthsToPrepend.length - 1].isLastInYear = true;
+                      }
+                    }
+
+                    return {
+                      months: monthsToPrepend.concat(state.months),
+                      scrollPosition: -CalendarUtils.getMonthsHeight(monthsToPrepend, _this.theme)
+                    };
+                  }, function () {
+                    var targetPosition = _this.state.months[0].getHeight(_this.theme);
+
+                    _this.scrollTo(targetPosition, onEnd);
+                  });
+                } // If scrolling downwards, append maximum maxMonthsToAdd months
+                // and scroll to the last but one month
+
+
+                if (diffInMonths < 0) {
+                  monthsToAppendCount = Math.min(Math.abs(diffInMonths), maxMonthsToAdd);
+                  monthsToAppend = Array.from({
+                    length: monthsToAppendCount
+                  }, function (_, index) {
+                    return MonthViewModel.create(month + index - monthsToAppendCount + 2, year);
+                  });
+
+                  _this.setState(function (state) {
+                    if (isYearChanges(state)) {
+                      // Mutating here can lead to some unexpected bugs
+                      // but we couldn't find any yet
+                      state.months[state.months.length - 1].isLastInYear = true; // Mutating item here is safe as it was just created
+
+                      if (monthsToAppend[0]) {
+                        monthsToAppend[0].isFirstInYear = true;
+                      }
+                    }
+
+                    return {
+                      months: state.months.concat(monthsToAppend)
+                    };
+                  }, function () {
+                    var targetPosition = -1 * CalendarUtils.getMonthsHeight(_this.state.months.slice(1, -2), _this.theme);
+
+                    _this.scrollTo(targetPosition, onEnd);
+                  });
+                }
+
+              case 21:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    _this.renderMain = function () {
+      var positions = _this.getMonthPositions();
+
+      var wrapperStyle = {
+        height: themeConfig(_this.theme).WRAPPER_HEIGHT
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        ref: _this.refRoot,
+        className: styles.root(_this.theme),
+        "data-tid": "Calendar"
+      }, /*#__PURE__*/React.createElement("div", {
+        style: wrapperStyle,
+        className: styles.wrapper()
+      }, _this.state.months.map(function (x, i) {
+        return [positions[i], x];
+      }).filter(function (_ref2) {
+        var top = _ref2[0],
+            month = _ref2[1];
+        return CalendarUtils.isMonthVisible(top, month, _this.theme);
+      }).map(_this.renderMonth, _assertThisInitialized(_this))));
+    };
+
+    _this.refRoot = function (element) {
+      if (!_this.root && element) {
+        if (isMobile) {
+          element.addEventListener('touchstart', _this.handleTouchStart);
+          element.addEventListener('touchmove', _this.throttledHandleTouchMove);
+        } else {
+          element.addEventListener('wheel', _this.handleWheel, {
+            passive: false
+          });
+        }
+      }
+
+      if (_this.root && !element) {
+        if (isMobile) {
+          _this.root.removeEventListener('touchstart', _this.handleTouchStart);
+
+          _this.root.removeEventListener('touchmove', _this.throttledHandleTouchMove);
+        } else {
+          _this.root.removeEventListener('wheel', _this.handleWheel);
+        }
+      }
+
+      _this.root = element;
+    };
+
+    _this.handleMonthYearChange = function (month, year) {
+      _this.scrollToMonth(month, year);
+    };
+
+    _this.executeAnimations = function (pixelY) {
+      _this.setState(function (_ref3) {
+        var months = _ref3.months,
+            scrollPosition = _ref3.scrollPosition;
+        var targetPosition = CalendarUtils.calculateScrollPosition(months, scrollPosition, pixelY, _this.theme).scrollPosition;
+        return {
+          scrollTarget: targetPosition
+        };
+      }, _this.handleWheelEnd);
+
+      _this.animation.animate(pixelY, function (deltaY) {
+        return (// FIXME: Typescript not resolving setState cb type
+          _this.setState(CalendarUtils.applyDelta(deltaY, _this.theme))
+        );
+      });
+
+      CalendarScrollEvents.emit();
+    };
+
+    _this.handleTouchStart = function (event) {
+      if (!(event instanceof TouchEvent)) {
+        return;
+      }
+
+      var clientY = event.targetTouches[0].clientY;
+      _this.touchStartY = clientY;
+    };
+
+    _this.handleTouchMove = function (event) {
+      if (!(event instanceof TouchEvent)) {
+        return;
+      }
+
+      var clientY = event.changedTouches[0].clientY;
+      var deltaY = (_this.touchStartY || 0) - clientY;
+      _this.touchStartY = clientY;
+
+      _this.executeAnimations(deltaY);
+    };
+
+    _this.throttledHandleTouchMove = throttle(_this.handleTouchMove, 10);
+
+    _this.handleWheel = function (event) {
+      if (!(event instanceof WheelEvent)) {
+        return;
+      }
+
+      event.preventDefault();
+
+      var _normalizeWheel = normalizeWheel(event),
+          pixelY = _normalizeWheel.pixelY;
+
+      _this.executeAnimations(pixelY);
+    };
+
+    _this.handleWheelEnd = function () {
+      if (_this.wheelEndTimeout) {
+        clearTimeout(_this.wheelEndTimeout);
+      }
+
+      _this.wheelEndTimeout = window.setTimeout(_this.scrollToNearestWeek, 300);
+    };
+
+    _this.scrollToNearestWeek = function () {
+      var _this$state = _this.state,
+          scrollTarget = _this$state.scrollTarget,
+          scrollDirection = _this$state.scrollDirection;
+      var trasholdHeight = themeConfig(_this.theme).MONTH_TITLE_OFFSET_HEIGHT + themeConfig(_this.theme).DAY_SIZE;
+
+      if (scrollTarget < trasholdHeight) {
+        var targetPosition = 0;
+
+        if (scrollDirection < 0) {
+          targetPosition = trasholdHeight;
+        }
+
+        _this.setState({
+          scrollTarget: targetPosition
+        }, function () {
+          var amount = scrollTarget - targetPosition;
+
+          _this.animation.animate(amount, function (deltaY) {
+            return (// FIXME: Typescript not resolving setState cb type
+              _this.setState(CalendarUtils.applyDelta(deltaY, _this.theme))
+            );
+          });
+        });
+      }
+    };
+
+    _this.scrollTo = function (pos, onEnd) {
+      var scrollAmmount = pos - _this.state.scrollPosition;
+      return _this.scrollAmount(scrollAmmount, onEnd);
+    };
+
+    _this.scrollAmount = function (scrollAmmount, onEnd) {
+      return _this.animation.animate(scrollAmmount, function (deltaY) {
+        return _this.setState(function (_ref4) {
+          var scrollPosition = _ref4.scrollPosition;
+          return {
+            scrollPosition: scrollPosition + deltaY
+          };
+        });
+      }, onEnd);
+    };
+
+    var today = getTodayDate();
+    var initialMonth = props.initialMonth == null ? today.month : props.initialMonth;
+    var initialYear = props.initialYear == null ? today.year : props.initialYear;
+    _this.state = {
+      scrollPosition: 0,
+      months: CalendarUtils.getMonths(initialMonth, initialYear),
+      today: today,
+      scrollDirection: 1,
+      scrollTarget: 0,
+      touchStart: 0
+    };
+    return _this;
+  }
+
+  var _proto = Calendar.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.animation.inProgress()) {
+      this.animation.cancel();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  }
+  /**
+  * Scrolls calendar to given date
+  * @public
+  */
+  ;
+
+  _proto.renderMonth = function renderMonth(_ref5) {
+    var top = _ref5[0],
+        month = _ref5[1];
+    return /*#__PURE__*/React.createElement(Month, {
+      key: month.month + '-' + month.year,
+      top: top,
+      month: month,
+      maxDate: this.props.maxDate,
+      minDate: this.props.minDate,
+      today: this.state.today,
+      value: this.props.value,
+      onDateClick: this.props.onSelect,
+      onMonthYearChange: this.handleMonthYearChange,
+      isHoliday: this.props.isHoliday
+    });
+  };
+
+  _proto.getMonthPositions = function getMonthPositions() {
+    var _this$state2 = this.state,
+        scrollPosition = _this$state2.scrollPosition,
+        months = _this$state2.months;
+    var positions = [scrollPosition - months[0].getHeight(this.theme)];
+
+    for (var i = 1; i < months.length; i++) {
+      var position = positions[i - 1] + months[i - 1].getHeight(this.theme);
+      positions.push(position);
+    }
+
+    return positions;
+  };
+
+  return Calendar;
+}(React.Component);
+Calendar.__KONTUR_REACT_UI__ = 'Calendar';
+Calendar.defaultProps = {
+  holidays: [],
+  minDate: {
+    year: MIN_YEAR,
+    month: MIN_MONTH,
+    date: MIN_DATE
+  },
+  maxDate: {
+    year: MAX_YEAR,
+    month: MAX_MONTH,
+    date: MAX_DATE
+  }
+};