sdc-pomodoro/es/index.js

sdc-pomodoro React component

import React from 'react';
import { inject, observer } from 'mobx-react';
import { Label } from 'sdc-i18n-react';
import { observable, action } from 'mobx';
import { TimeFormatter } from 'sdc-react-basics';

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectDestructuringEmpty(obj) {
  if (obj == null) throw new TypeError("Cannot destructure undefined");
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _initializerDefineProperty(target, property, descriptor, context) {
  if (!descriptor) return;
  Object.defineProperty(target, property, {
    enumerable: descriptor.enumerable,
    configurable: descriptor.configurable,
    writable: descriptor.writable,
    value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
  });
}

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
  var desc = {};
  Object.keys(descriptor).forEach(function (key) {
    desc[key] = descriptor[key];
  });
  desc.enumerable = !!desc.enumerable;
  desc.configurable = !!desc.configurable;

  if ('value' in desc || desc.initializer) {
    desc.writable = true;
  }

  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
    return decorator(target, property, desc) || desc;
  }, desc);

  if (context && desc.initializer !== void 0) {
    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
    desc.initializer = undefined;
  }

  if (desc.initializer === void 0) {
    Object.defineProperty(target, property, desc);
    desc = null;
  }

  return desc;
}

var PomodoroControls = inject('pomodoroState')(observer(function (_ref) {
  var pomodoroState = _ref.pomodoroState;
  return React.createElement("div", {
    className: "pomodoro-controls"
  }, React.createElement("i", {
    className: 'fa fa-play' + (pomodoroState.running || pomodoroState.current.timeLeft <= 0 ? ' disabled' : ''),
    onClick: pomodoroState.start
  }), React.createElement("i", {
    className: 'fa fa-pause' + (pomodoroState.running ? '' : ' disabled'),
    onClick: pomodoroState.pause
  }), React.createElement("i", {
    className: 'fa fa-step-forward' + (pomodoroState.running ? '' : ' disabled'),
    onClick: pomodoroState.advance
  }), "\xA0\xA0", React.createElement("i", {
    className: 'fa fa-stop' + (pomodoroState.running ? '' : ' disabled'),
    onClick: pomodoroState.stop
  }), React.createElement("i", {
    className: 'fa fa-refresh' + (pomodoroState.running ? ' disabled' : ''),
    onClick: pomodoroState.reset({
      hard: true
    })
  }), "\xA0\xA0", React.createElement("i", {
    className: 'fa fa-cog' + (pomodoroState.running ? ' disabled' : ''),
    onClick: pomodoroState.toggleSettings
  }));
}));

var _class, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8, _descriptor9, _descriptor10, _descriptor11, _descriptor12, _descriptor13, _descriptor14, _descriptor15, _descriptor16, _temp;
var PomodoroState = (_class = (_temp = function PomodoroState() {
  var _this = this;

  _classCallCheck(this, PomodoroState);

  _initializerDefineProperty(this, "durations", _descriptor, this);

  _initializerDefineProperty(this, "current", _descriptor2, this);

  _initializerDefineProperty(this, "settings", _descriptor3, this);

  _initializerDefineProperty(this, "planning", _descriptor4, this);

  _initializerDefineProperty(this, "running", _descriptor5, this);

  _initializerDefineProperty(this, "reference", _descriptor6, this);

  _initializerDefineProperty(this, "autoCycle", _descriptor7, this);

  _initializerDefineProperty(this, "mode", _descriptor8, this);

  _initializerDefineProperty(this, "update", _descriptor9, this);

  _initializerDefineProperty(this, "advance", _descriptor10, this);

  _initializerDefineProperty(this, "cycle", _descriptor11, this);

  _initializerDefineProperty(this, "start", _descriptor12, this);

  _initializerDefineProperty(this, "stop", _descriptor13, this);

  this.adjust = function (field, step) {
    return action(function () {
      _this.durations[field] = _this.durations[field] + step;
    });
  };

  _initializerDefineProperty(this, "toggleSettings", _descriptor14, this);

  this.reset = function (_ref) {
    var mode = _ref.mode,
        hard = _ref.hard;
    return action(function () {
      if (!_this.running) {
        _this.mode = mode || (_this.planning ? 'plan' : 'work');
        _this.current = {
          timeLeft: _this.durations[_this.mode],
          ticks: 0,
          elapsed: 0
        };

        if (hard) {
          _this.durations.count = 0;
        }

        _this.reference = new Date().valueOf();
      }
    });
  };

  _initializerDefineProperty(this, "pause", _descriptor15, this);

  _initializerDefineProperty(this, "cont", _descriptor16, this);

  this.reset({
    hard: true
  })();
}, _temp), (_descriptor = _applyDecoratedDescriptor(_class.prototype, "durations", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return {
      plan: 300,
      work: 1200,
      "short": 300,
      pattern: 4,
      count: 0,
      "long": 900
    };
  }
}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "current", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return {};
  }
}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, "settings", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return false;
  }
}), _descriptor4 = _applyDecoratedDescriptor(_class.prototype, "planning", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return true;
  }
}), _descriptor5 = _applyDecoratedDescriptor(_class.prototype, "running", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return false;
  }
}), _descriptor6 = _applyDecoratedDescriptor(_class.prototype, "reference", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return 0;
  }
}), _descriptor7 = _applyDecoratedDescriptor(_class.prototype, "autoCycle", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return true;
  }
}), _descriptor8 = _applyDecoratedDescriptor(_class.prototype, "mode", [observable], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    return null;
  }
}), _descriptor9 = _applyDecoratedDescriptor(_class.prototype, "update", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this2 = this;

    return function () {
      var elapsed = new Date().valueOf() - _this2.reference;

      var timeLeft = Math.floor(_this2.durations[_this2.mode] - elapsed / 1000);
      _this2.current = {
        timeLeft: timeLeft,
        ticks: 9 - Math.floor(elapsed / 100) % 10,
        elapsed: elapsed
      };

      if (timeLeft <= 0 && _this2.current.ticks === 0) {
        _this2.advance();
      }
    };
  }
}), _descriptor10 = _applyDecoratedDescriptor(_class.prototype, "advance", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this3 = this;

    return function () {
      _this3.pause();

      if (_this3.autoCycle) {
        _this3.cycle();

        _this3.cont();
      }
    };
  }
}), _descriptor11 = _applyDecoratedDescriptor(_class.prototype, "cycle", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this4 = this;

    return function () {
      if (_this4.mode === 'plan') {
        _this4.reset({
          mode: 'work'
        })();
      } else if (_this4.mode === 'work') {
        _this4.durations.count = _this4.durations.count + 1;

        if (_this4.durations.count < _this4.durations.pattern) {
          _this4.reset({
            mode: 'short'
          })();
        } else {
          _this4.durations.count = 0;

          _this4.reset({
            mode: 'long'
          })();
        }
      } else {
        if (_this4.planning) {
          _this4.reset({
            mode: 'plan'
          })();
        } else {
          _this4.reset({
            mode: 'work'
          })();
        }
      }
    };
  }
}), _descriptor12 = _applyDecoratedDescriptor(_class.prototype, "start", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this5 = this;

    return function () {
      if (!_this5.running && _this5.current.timeLeft > 0) {
        _this5.cont();
      }
    };
  }
}), _descriptor13 = _applyDecoratedDescriptor(_class.prototype, "stop", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this6 = this;

    return function () {
      if (_this6.running) {
        _this6.pause();

        _this6.reset({
          hard: true
        })();
      }
    };
  }
}), _descriptor14 = _applyDecoratedDescriptor(_class.prototype, "toggleSettings", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this7 = this;

    return function () {
      _this7.settings = !_this7.settings;
    };
  }
}), _descriptor15 = _applyDecoratedDescriptor(_class.prototype, "pause", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this8 = this;

    return function () {
      if (_this8.running) {
        _this8.running = false;

        if (_this8.timer) {
          clearInterval(_this8.timer);
          _this8.timer = null;
        }
      }
    };
  }
}), _descriptor16 = _applyDecoratedDescriptor(_class.prototype, "cont", [action], {
  configurable: true,
  enumerable: true,
  writable: true,
  initializer: function initializer() {
    var _this9 = this;

    return function () {
      if (!_this9.running) {
        _this9.reference = new Date().valueOf() - _this9.current.elapsed;
        _this9.timer = setInterval(_this9.update, 100);
        _this9.running = true;
        _this9.settings = false;
      }
    };
  }
})), _class);
var pomodoroState = new PomodoroState();

var PomodoroPhase = observer(function () {
  return React.createElement("div", {
    className: "pomodoro-phase"
  }, React.createElement(Label, {
    value: 'pomodoro.phase.' + pomodoroState.mode
  }));
});

var PomodoroSequence = observer(function (_ref) {
  _objectDestructuringEmpty(_ref);

  var _pomodoroState$durati = pomodoroState.durations,
      plan = _pomodoroState$durati.plan,
      work = _pomodoroState$durati.work,
      _short = _pomodoroState$durati["short"],
      _long = _pomodoroState$durati["long"],
      pattern = _pomodoroState$durati.pattern,
      count = _pomodoroState$durati.count;
  var planning = pomodoroState.planning ? plan : 0;
  var total = pattern * work + (pattern - 1) * _short + _long + pattern * planning;
  var planWidth = 100 * planning / total + '%';
  var workWidth = 100 * work / total + '%';
  var shortWidth = 100 * _short / total + '%';
  var longWidth = 100 * _long / total + '%';
  return React.createElement("div", {
    className: "pomodoro-sequence"
  }, Array.apply(null, {
    length: pattern - 1
  }).map(Number.call, Number).map(function (i) {
    return React.createElement(React.Fragment, {
      key: i
    }, React.createElement("span", {
      className: 'plan' + (i === count && pomodoroState.mode === 'plan' ? ' active' : ''),
      style: {
        width: planWidth
      }
    }), React.createElement("span", {
      className: 'work' + (i === count && pomodoroState.mode === 'work' ? ' active' : ''),
      style: {
        width: workWidth
      }
    }), React.createElement("span", {
      className: 'short' + (i + 1 === count && pomodoroState.mode === 'short' ? ' active' : ''),
      style: {
        width: shortWidth
      }
    }));
  }), React.createElement("span", {
    className: 'plan' + (pattern === count + 1 && pomodoroState.mode === 'plan' ? ' active' : ''),
    style: {
      width: planWidth
    }
  }), React.createElement("span", {
    className: 'work' + (pattern === count + 1 && pomodoroState.mode === 'work' ? ' active' : ''),
    style: {
      width: workWidth
    }
  }), React.createElement("span", {
    className: 'long' + (pomodoroState.mode === 'long' ? ' active' : ''),
    style: {
      width: longWidth
    }
  }));
});

var PomodoroConfig = inject('pomodoroState')(observer(function (_ref) {
  var pomodoroState = _ref.pomodoroState,
      field = _ref.field,
      _ref$step = _ref.step,
      step = _ref$step === void 0 ? 300 : _ref$step;
  return pomodoroState.settings ? React.createElement("div", {
    className: "time-settings"
  }, React.createElement("span", {
    className: "settings-label"
  }, React.createElement(Label, {
    value: 'pomodoro.config.' + field
  })), React.createElement("span", {
    className: "settings-input"
  }, React.createElement("i", {
    className: "fa fa-plus",
    onClick: pomodoroState.adjust(field, step)
  }), React.createElement("i", {
    className: "fa fa-minus",
    onClick: pomodoroState.adjust(field, -step)
  }), React.createElement(TimeFormatter, {
    time: pomodoroState.durations[field]
  }))) : null;
}));

var PomodoroPattern = inject('pomodoroState')(observer(function (_ref) {
  var pomodoroState = _ref.pomodoroState,
      field = _ref.field,
      _ref$step = _ref.step,
      step = _ref$step === void 0 ? 1 : _ref$step;
  return pomodoroState.settings ? React.createElement("div", {
    className: "time-settings"
  }, React.createElement("span", {
    className: "settings-label"
  }, React.createElement(Label, {
    value: 'pomodoro.config.' + field
  })), React.createElement("span", {
    className: "settings-input"
  }, React.createElement("i", {
    className: "fa fa-plus",
    onClick: pomodoroState.adjust(field, step)
  }), React.createElement("i", {
    className: "fa fa-minus",
    onClick: pomodoroState.adjust(field, -step)
  }), React.createElement("div", null, pomodoroState.durations[field]))) : null;
}));

var PomodoroSettings = observer(function () {
  return pomodoroState.settings ? React.createElement("div", {
    className: "pomodoro-settings"
  }, React.createElement(PomodoroConfig, {
    field: "plan",
    step: 60
  }), React.createElement(PomodoroConfig, {
    field: "work"
  }), React.createElement(PomodoroConfig, {
    field: "short",
    step: 60
  }), React.createElement(PomodoroConfig, {
    field: "long"
  }), React.createElement(PomodoroPattern, {
    field: "pattern"
  })) : null;
});

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css = ".sdc-pomodoro-panel {\n  border: solid 1px #ccc;\n  width: 250px;\n  font-family: \"Arial Rounded MT Bold\", \"Helvetica Rounded\", Arial, sans-serif; }\n  .sdc-pomodoro-panel .pomodoro-sequence {\n    border-bottom: solid 1px #ccc;\n    line-height: 0; }\n    .sdc-pomodoro-panel .pomodoro-sequence span {\n      display: inline-block;\n      height: 12px; }\n    .sdc-pomodoro-panel .pomodoro-sequence .plan {\n      background-color: #ccf; }\n      .sdc-pomodoro-panel .pomodoro-sequence .plan.active {\n        background-color: #99c; }\n    .sdc-pomodoro-panel .pomodoro-sequence .work {\n      background-color: #cfc; }\n      .sdc-pomodoro-panel .pomodoro-sequence .work.active {\n        background-color: #9c9; }\n    .sdc-pomodoro-panel .pomodoro-sequence .short {\n      background-color: #fec; }\n      .sdc-pomodoro-panel .pomodoro-sequence .short.active {\n        background-color: #cb9; }\n    .sdc-pomodoro-panel .pomodoro-sequence .long {\n      background-color: #fcc; }\n      .sdc-pomodoro-panel .pomodoro-sequence .long.active {\n        background-color: #c99; }\n  .sdc-pomodoro-panel .pomodoro-phase {\n    width: 100%;\n    text-align: center;\n    border-bottom: solid 1px #ccc; }\n  .sdc-pomodoro-panel .pomodoro-settings {\n    box-shadow: 0 0 4px 1px #999;\n    background-color: #fffaf5;\n    z-index: 100; }\n  .sdc-pomodoro-panel .pomodoro-controls {\n    font-size: 24px;\n    width: 100%;\n    text-align: center;\n    margin-top: 4px;\n    margin-bottom: 8px; }\n    .sdc-pomodoro-panel .pomodoro-controls i {\n      padding: 0 4px;\n      color: #666;\n      opacity: 0.5; }\n      .sdc-pomodoro-panel .pomodoro-controls i.disabled {\n        opacity: 0.25; }\n        .sdc-pomodoro-panel .pomodoro-controls i.disabled:hover {\n          opacity: 0.25; }\n      .sdc-pomodoro-panel .pomodoro-controls i.fa-play {\n        color: #090; }\n      .sdc-pomodoro-panel .pomodoro-controls i.fa-step-forward {\n        color: #900; }\n      .sdc-pomodoro-panel .pomodoro-controls i.fa-pause {\n        color: #880; }\n      .sdc-pomodoro-panel .pomodoro-controls i.fa-stop {\n        color: #900; }\n      .sdc-pomodoro-panel .pomodoro-controls i.fa-refresh {\n        color: #900; }\n      .sdc-pomodoro-panel .pomodoro-controls i:hover {\n        opacity: 1.0; }\n  .sdc-pomodoro-panel .time-settings {\n    text-align: center; }\n    .sdc-pomodoro-panel .time-settings .settings-label {\n      display: inline-block;\n      width: 40%; }\n    .sdc-pomodoro-panel .time-settings .settings-input {\n      display: inline-block;\n      width: 50%;\n      border: solid 1px #ccc;\n      margin-bottom: 2px;\n      padding: 2px 4px; }\n      .sdc-pomodoro-panel .time-settings .settings-input div {\n        margin-top: 2px; }\n      .sdc-pomodoro-panel .time-settings .settings-input .fa {\n        margin: 4px; }\n      .sdc-pomodoro-panel .time-settings .settings-input .fa-plus {\n        float: right;\n        color: #090; }\n      .sdc-pomodoro-panel .time-settings .settings-input .fa-minus {\n        float: left;\n        color: #900; }\n  .sdc-pomodoro-panel .time-display {\n    display: inline-block;\n    width: 3rem;\n    padding: 4px 8px; }\n    .sdc-pomodoro-panel .time-display.pomodoro-time {\n      font-size: 72px;\n      text-align: center;\n      width: 100%;\n      padding: 0;\n      border-bottom: solid 3px #ccc; }\n      .sdc-pomodoro-panel .time-display.pomodoro-time .dimmed {\n        opacity: 0.25; }\n      .sdc-pomodoro-panel .time-display.pomodoro-time .ticks {\n        font-size: 18px; }\n      .sdc-pomodoro-panel .time-display.pomodoro-time.plan {\n        background-color: #eef;\n        border-color: #99c; }\n      .sdc-pomodoro-panel .time-display.pomodoro-time.work {\n        background-color: #efe;\n        border-color: #9c9; }\n      .sdc-pomodoro-panel .time-display.pomodoro-time.short {\n        background-color: #ffe;\n        border-color: #cc9; }\n      .sdc-pomodoro-panel .time-display.pomodoro-time.long {\n        background-color: #fee;\n        border-color: #c99; }\n\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhbmVsLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxzQkFBc0I7RUFDdEIsWUFBWTtFQUNaLDRFQUE0RSxFQUFFO0VBQzlFO0lBQ0UsNkJBQTZCO0lBQzdCLGNBQWMsRUFBRTtJQUNoQjtNQUNFLHFCQUFxQjtNQUNyQixZQUFZLEVBQUU7SUFDaEI7TUFDRSxzQkFBc0IsRUFBRTtNQUN4QjtRQUNFLHNCQUFzQixFQUFFO0lBQzVCO01BQ0Usc0JBQXNCLEVBQUU7TUFDeEI7UUFDRSxzQkFBc0IsRUFBRTtJQUM1QjtNQUNFLHNCQUFzQixFQUFFO01BQ3hCO1FBQ0Usc0JBQXNCLEVBQUU7SUFDNUI7TUFDRSxzQkFBc0IsRUFBRTtNQUN4QjtRQUNFLHNCQUFzQixFQUFFO0VBQzlCO0lBQ0UsV0FBVztJQUNYLGtCQUFrQjtJQUNsQiw2QkFBNkIsRUFBRTtFQUNqQztJQUNFLDRCQUE0QjtJQUM1Qix5QkFBeUI7SUFDekIsWUFBWSxFQUFFO0VBQ2hCO0lBQ0UsZUFBZTtJQUNmLFdBQVc7SUFDWCxrQkFBa0I7SUFDbEIsZUFBZTtJQUNmLGtCQUFrQixFQUFFO0lBQ3BCO01BQ0UsY0FBYztNQUNkLFdBQVc7TUFDWCxZQUFZLEVBQUU7TUFDZDtRQUNFLGFBQWEsRUFBRTtRQUNmO1VBQ0UsYUFBYSxFQUFFO01BQ25CO1FBQ0UsV0FBVyxFQUFFO01BQ2Y7UUFDRSxXQUFXLEVBQUU7TUFDZjtRQUNFLFdBQVcsRUFBRTtNQUNmO1FBQ0UsV0FBVyxFQUFFO01BQ2Y7UUFDRSxXQUFXLEVBQUU7TUFDZjtRQUNFLFlBQVksRUFBRTtFQUNwQjtJQUNFLGtCQUFrQixFQUFFO0lBQ3BCO01BQ0UscUJBQXFCO01BQ3JCLFVBQVUsRUFBRTtJQUNkO01BQ0UscUJBQXFCO01BQ3JCLFVBQVU7TUFDVixzQkFBc0I7TUFDdEIsa0JBQWtCO01BQ2xCLGdCQUFnQixFQUFFO01BQ2xCO1FBQ0UsZUFBZSxFQUFFO01BQ25CO1FBQ0UsV0FBVyxFQUFFO01BQ2Y7UUFDRSxZQUFZO1FBQ1osV0FBVyxFQUFFO01BQ2Y7UUFDRSxXQUFXO1FBQ1gsV0FBVyxFQUFFO0VBQ25CO0lBQ0UscUJBQXFCO0lBQ3JCLFdBQVc7SUFDWCxnQkFBZ0IsRUFBRTtJQUNsQjtNQUNFLGVBQWU7TUFDZixrQkFBa0I7TUFDbEIsV0FBVztNQUNYLFVBQVU7TUFDViw2QkFBNkIsRUFBRTtNQUMvQjtRQUNFLGFBQWEsRUFBRTtNQUNqQjtRQUNFLGVBQWUsRUFBRTtNQUNuQjtRQUNFLHNCQUFzQjtRQUN0QixrQkFBa0IsRUFBRTtNQUN0QjtRQUNFLHNCQUFzQjtRQUN0QixrQkFBa0IsRUFBRTtNQUN0QjtRQUNFLHNCQUFzQjtRQUN0QixrQkFBa0IsRUFBRTtNQUN0QjtRQUNFLHNCQUFzQjtRQUN0QixrQkFBa0IsRUFBRSIsImZpbGUiOiJwYW5lbC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLnNkYy1wb21vZG9yby1wYW5lbCB7XG4gIGJvcmRlcjogc29saWQgMXB4ICNjY2M7XG4gIHdpZHRoOiAyNTBweDtcbiAgZm9udC1mYW1pbHk6IFwiQXJpYWwgUm91bmRlZCBNVCBCb2xkXCIsIFwiSGVsdmV0aWNhIFJvdW5kZWRcIiwgQXJpYWwsIHNhbnMtc2VyaWY7IH1cbiAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tc2VxdWVuY2Uge1xuICAgIGJvcmRlci1ib3R0b206IHNvbGlkIDFweCAjY2NjO1xuICAgIGxpbmUtaGVpZ2h0OiAwOyB9XG4gICAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tc2VxdWVuY2Ugc3BhbiB7XG4gICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICBoZWlnaHQ6IDEycHg7IH1cbiAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1zZXF1ZW5jZSAucGxhbiB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjY2NmOyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1zZXF1ZW5jZSAucGxhbi5hY3RpdmUge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjOTljOyB9XG4gICAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tc2VxdWVuY2UgLndvcmsge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2NmYzsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tc2VxdWVuY2UgLndvcmsuYWN0aXZlIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzljOTsgfVxuICAgIC5zZGMtcG9tb2Rvcm8tcGFuZWwgLnBvbW9kb3JvLXNlcXVlbmNlIC5zaG9ydCB7XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmVjOyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1zZXF1ZW5jZSAuc2hvcnQuYWN0aXZlIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2NiOTsgfVxuICAgIC5zZGMtcG9tb2Rvcm8tcGFuZWwgLnBvbW9kb3JvLXNlcXVlbmNlIC5sb25nIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmY2M7IH1cbiAgICAgIC5zZGMtcG9tb2Rvcm8tcGFuZWwgLnBvbW9kb3JvLXNlcXVlbmNlIC5sb25nLmFjdGl2ZSB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNjOTk7IH1cbiAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tcGhhc2Uge1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBib3JkZXItYm90dG9tOiBzb2xpZCAxcHggI2NjYzsgfVxuICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1zZXR0aW5ncyB7XG4gICAgYm94LXNoYWRvdzogMCAwIDRweCAxcHggIzk5OTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmYWY1O1xuICAgIHotaW5kZXg6IDEwMDsgfVxuICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1jb250cm9scyB7XG4gICAgZm9udC1zaXplOiAyNHB4O1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBtYXJnaW4tdG9wOiA0cHg7XG4gICAgbWFyZ2luLWJvdHRvbTogOHB4OyB9XG4gICAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tY29udHJvbHMgaSB7XG4gICAgICBwYWRkaW5nOiAwIDRweDtcbiAgICAgIGNvbG9yOiAjNjY2O1xuICAgICAgb3BhY2l0eTogMC41OyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1jb250cm9scyBpLmRpc2FibGVkIHtcbiAgICAgICAgb3BhY2l0eTogMC4yNTsgfVxuICAgICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1jb250cm9scyBpLmRpc2FibGVkOmhvdmVyIHtcbiAgICAgICAgICBvcGFjaXR5OiAwLjI1OyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1jb250cm9scyBpLmZhLXBsYXkge1xuICAgICAgICBjb2xvcjogIzA5MDsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tY29udHJvbHMgaS5mYS1zdGVwLWZvcndhcmQge1xuICAgICAgICBjb2xvcjogIzkwMDsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tY29udHJvbHMgaS5mYS1wYXVzZSB7XG4gICAgICAgIGNvbG9yOiAjODgwOyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC5wb21vZG9yby1jb250cm9scyBpLmZhLXN0b3Age1xuICAgICAgICBjb2xvcjogIzkwMDsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAucG9tb2Rvcm8tY29udHJvbHMgaS5mYS1yZWZyZXNoIHtcbiAgICAgICAgY29sb3I6ICM5MDA7IH1cbiAgICAgIC5zZGMtcG9tb2Rvcm8tcGFuZWwgLnBvbW9kb3JvLWNvbnRyb2xzIGk6aG92ZXIge1xuICAgICAgICBvcGFjaXR5OiAxLjA7IH1cbiAgLnNkYy1wb21vZG9yby1wYW5lbCAudGltZS1zZXR0aW5ncyB7XG4gICAgdGV4dC1hbGlnbjogY2VudGVyOyB9XG4gICAgLnNkYy1wb21vZG9yby1wYW5lbCAudGltZS1zZXR0aW5ncyAuc2V0dGluZ3MtbGFiZWwge1xuICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgd2lkdGg6IDQwJTsgfVxuICAgIC5zZGMtcG9tb2Rvcm8tcGFuZWwgLnRpbWUtc2V0dGluZ3MgLnNldHRpbmdzLWlucHV0IHtcbiAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgIHdpZHRoOiA1MCU7XG4gICAgICBib3JkZXI6IHNvbGlkIDFweCAjY2NjO1xuICAgICAgbWFyZ2luLWJvdHRvbTogMnB4O1xuICAgICAgcGFkZGluZzogMnB4IDRweDsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAudGltZS1zZXR0aW5ncyAuc2V0dGluZ3MtaW5wdXQgZGl2IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMnB4OyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC50aW1lLXNldHRpbmdzIC5zZXR0aW5ncy1pbnB1dCAuZmEge1xuICAgICAgICBtYXJnaW46IDRweDsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAudGltZS1zZXR0aW5ncyAuc2V0dGluZ3MtaW5wdXQgLmZhLXBsdXMge1xuICAgICAgICBmbG9hdDogcmlnaHQ7XG4gICAgICAgIGNvbG9yOiAjMDkwOyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC50aW1lLXNldHRpbmdzIC5zZXR0aW5ncy1pbnB1dCAuZmEtbWludXMge1xuICAgICAgICBmbG9hdDogbGVmdDtcbiAgICAgICAgY29sb3I6ICM5MDA7IH1cbiAgLnNkYy1wb21vZG9yby1wYW5lbCAudGltZS1kaXNwbGF5IHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgd2lkdGg6IDNyZW07XG4gICAgcGFkZGluZzogNHB4IDhweDsgfVxuICAgIC5zZGMtcG9tb2Rvcm8tcGFuZWwgLnRpbWUtZGlzcGxheS5wb21vZG9yby10aW1lIHtcbiAgICAgIGZvbnQtc2l6ZTogNzJweDtcbiAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIGJvcmRlci1ib3R0b206IHNvbGlkIDNweCAjY2NjOyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC50aW1lLWRpc3BsYXkucG9tb2Rvcm8tdGltZSAuZGltbWVkIHtcbiAgICAgICAgb3BhY2l0eTogMC4yNTsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAudGltZS1kaXNwbGF5LnBvbW9kb3JvLXRpbWUgLnRpY2tzIHtcbiAgICAgICAgZm9udC1zaXplOiAxOHB4OyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC50aW1lLWRpc3BsYXkucG9tb2Rvcm8tdGltZS5wbGFuIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2VlZjtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAjOTljOyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC50aW1lLWRpc3BsYXkucG9tb2Rvcm8tdGltZS53b3JrIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2VmZTtcbiAgICAgICAgYm9yZGVyLWNvbG9yOiAjOWM5OyB9XG4gICAgICAuc2RjLXBvbW9kb3JvLXBhbmVsIC50aW1lLWRpc3BsYXkucG9tb2Rvcm8tdGltZS5zaG9ydCB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmU7XG4gICAgICAgIGJvcmRlci1jb2xvcjogI2NjOTsgfVxuICAgICAgLnNkYy1wb21vZG9yby1wYW5lbCAudGltZS1kaXNwbGF5LnBvbW9kb3JvLXRpbWUubG9uZyB7XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZWU7XG4gICAgICAgIGJvcmRlci1jb2xvcjogI2M5OTsgfVxuIl19 */";
styleInject(css);

var PomodoroTime = observer(function (_ref) {
  var value = _ref.value,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      blink = _ref.blink,
      ticks = _ref.ticks,
      props = _objectWithoutProperties(_ref, ["value", "className", "blink", "ticks"]);

  var mins = Math.floor(value / 60);
  var secs = ('0' + value % 60).slice(-2);
  return React.createElement("span", _extends({
    className: 'time-display ' + className
  }, props), mins, React.createElement("span", {
    className: blink && ticks > 0 && ticks < 6 ? 'dimmed' : ''
  }, ":"), secs, ticks !== undefined && React.createElement("span", {
    className: "ticks"
  }, ".", ticks));
});

var PomodoroPanel = inject('pomodoroState')(observer(function (_ref) {
  var pomodoroState = _ref.pomodoroState,
      props = _objectWithoutProperties(_ref, ["pomodoroState"]);

  return React.createElement("div", _extends({
    className: "sdc-pomodoro-panel"
  }, props), React.createElement(PomodoroTime, {
    value: pomodoroState.current.timeLeft,
    ticks: pomodoroState.current.ticks,
    className: 'pomodoro-time ' + pomodoroState.mode,
    blink: true
  }), React.createElement(PomodoroSequence, null), React.createElement(PomodoroPhase, null), React.createElement(PomodoroControls, null), React.createElement(PomodoroSettings, null));
}));

export { PomodoroPanel, PomodoroTime, pomodoroState };
//# sourceMappingURL=index.js.map