choerodon-ui/pro/lib/date-picker/TimesView.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

var _moment = _interopRequireDefault(require("moment"));

var _classnames = _interopRequireDefault(require("classnames"));

var _mobx = require("mobx");

var _mobxReact = require("mobx-react");

var _noop = _interopRequireDefault(require("lodash/noop"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _enum = require("./enum");

var _DaysView2 = _interopRequireWildcard(require("./DaysView"));

var _enum2 = require("../data-set/enum");

var _localeContext = require("../locale-context");

var _EventManager = require("../_util/EventManager");

var _stepMapping;

var stepMapping = (_stepMapping = {}, (0, _defineProperty2["default"])(_stepMapping, _enum.TimeUnit.hour, 'hour'), (0, _defineProperty2["default"])(_stepMapping, _enum.TimeUnit.minute, 'minute'), (0, _defineProperty2["default"])(_stepMapping, _enum.TimeUnit.second, 'second'), _stepMapping);

var TimesView = /*#__PURE__*/function (_DaysView) {
  (0, _inherits2["default"])(TimesView, _DaysView);

  var _super = (0, _createSuper2["default"])(TimesView);

  function TimesView() {
    (0, _classCallCheck2["default"])(this, TimesView);
    return _super.apply(this, arguments);
  }

  (0, _createClass2["default"])(TimesView, [{
    key: "getViewClassName",
    value: function getViewClassName() {
      var prefixCls = this.prefixCls;
      return "".concat(prefixCls, "-time");
    }
  }, {
    key: "showHour",
    get: function get() {
      var format = this.observableProps.format;
      return format.indexOf('H') > -1 || format.indexOf('h') > -1 || format.indexOf('k') > -1;
    }
  }, {
    key: "showMinute",
    get: function get() {
      var format = this.observableProps.format;
      return format.indexOf('m') > -1;
    }
  }, {
    key: "showSecond",
    get: function get() {
      var format = this.observableProps.format;
      return format.indexOf('s') > -1;
    }
  }, {
    key: "use12Hours",
    get: function get() {
      var format = this.observableProps.format;
      return format.indexOf('h') > -1 || format.indexOf('a') > -1 || format.indexOf('A') > -1;
    }
  }, {
    key: "timeUnitQueue",
    get: function get() {
      var showHour = this.showHour,
          showMinute = this.showMinute,
          showSecond = this.showSecond,
          use12Hours = this.use12Hours;
      var queue = [];

      if (showHour) {
        queue.push(_enum.TimeUnit.hour);
      }

      if (showMinute) {
        queue.push(_enum.TimeUnit.minute);
      }

      if (showSecond) {
        queue.push(_enum.TimeUnit.second);
      }

      if (use12Hours) {
        queue.push(_enum.TimeUnit.a);
      }

      return queue;
    }
  }, {
    key: "barStyle",
    get: function get() {
      return {
        width: "".concat(100 / this.timeUnitQueue.length, "%")
      };
    }
  }, {
    key: "activeStyle",
    get: function get() {
      var timeUnitQueue = this.timeUnitQueue;
      var width = 100 / timeUnitQueue.length;
      return {
        width: "".concat(width, "%"),
        left: "".concat(timeUnitQueue.indexOf(this.getCurrentUnit()) * width, "%")
      };
    }
  }, {
    key: "savePanel",
    value: function savePanel(node) {
      this.panel = node;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(TimesView.prototype), "getObservableProps", this).call(this, props, context)), {}, {
        format: props.format
      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(TimesView.prototype), "componentDidMount", this).call(this);

      if (this.panel) {
        // 兼容Firefox wheel为通用事件
        this.panel.addEventListener('wheel', this.handleWheel, {
          passive: false
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.panel) {
        this.panel.removeEventListener('wheel', this.handleWheel);
      }
    }
  }, {
    key: "handleDateTimeSelect",
    value: function handleDateTimeSelect() {
      this.changeViewMode(_enum.ViewMode.dateTime);
    }
  }, {
    key: "handleKeyDownHome",
    value: function handleKeyDownHome(e) {
      this.handleKeyDownPageUp(e);
    }
  }, {
    key: "handleKeyDownEnd",
    value: function handleKeyDownEnd(e) {
      this.handleKeyDownPageDown(e);
    }
  }, {
    key: "handleKeyDownLeft",
    value: function handleKeyDownLeft(e) {
      (0, _EventManager.stopEvent)(e);

      if (e.altKey) {
        if (this.props.mode !== _enum.ViewMode.time) {
          this.changeViewMode(_enum.ViewMode.dateTime);
        }
      } else {
        this.changeUnit(this.getPrevUnit());
      }
    }
  }, {
    key: "handleKeyDownRight",
    value: function handleKeyDownRight(e) {
      (0, _EventManager.stopEvent)(e);

      if (!e.altKey) {
        this.changeUnit(this.getNextUnit());
      }
    }
  }, {
    key: "handleKeyDownUp",
    value: function handleKeyDownUp(e) {
      (0, _EventManager.stopEvent)(e);
      var unit = this.getCurrentUnit();

      if (unit === _enum.TimeUnit.a) {
        this.changeSelectedDate(this.getCloneDate().subtract(12, _enum.TimeUnit.hour));
      } else {
        var step = this.props.step;
        var unitStep = step[stepMapping[unit]] || 1;
        var date = this.getCloneDate();
        var parentUnit = unit === _enum.TimeUnit.second ? _enum.TimeUnit.minute : unit === _enum.TimeUnit.minute ? _enum.TimeUnit.hour : null;

        if (parentUnit) {
          var parentStep = step[stepMapping[parentUnit]];

          if (parentStep) {
            var preValue = date.get(parentUnit);
            date.subtract(unitStep, unit);

            if (preValue !== date.get(parentUnit)) {
              date.subtract(parentStep - 1, parentUnit);
            }

            this.changeSelectedDate(date);
            return;
          }
        }

        this.changeSelectedDate(date.subtract(unitStep, unit));
      }
    }
  }, {
    key: "handleKeyDownDown",
    value: function handleKeyDownDown(e) {
      (0, _EventManager.stopEvent)(e);
      var unit = this.getCurrentUnit();

      if (unit === _enum.TimeUnit.a) {
        this.changeSelectedDate(this.getCloneDate().add(12, _enum.TimeUnit.hour));
      } else {
        var step = this.props.step;
        var unitStep = step[stepMapping[unit]] || 1;
        var date = this.getCloneDate();
        var parentUnit = unit === _enum.TimeUnit.second ? _enum.TimeUnit.minute : unit === _enum.TimeUnit.minute ? _enum.TimeUnit.hour : null;

        if (parentUnit) {
          var parentStep = step[stepMapping[parentUnit]];

          if (parentStep) {
            var preValue = date.get(parentUnit);
            date.add(unitStep, unit);

            if (preValue !== date.get(parentUnit)) {
              date.add(parentStep - 1, parentUnit);
            }

            this.changeSelectedDate(date);
            return;
          }
        }

        this.changeSelectedDate(date.add(unitStep, unit));
      }
    }
  }, {
    key: "handleKeyDownPageUp",
    value: function handleKeyDownPageUp(e) {
      (0, _EventManager.stopEvent)(e);
      var unit = this.getCurrentUnit();

      if (unit === _enum.TimeUnit.a) {
        this.changeSelectedDate(this.getCloneDate().set(_enum.TimeUnit.hour, 0));
      } else {
        this.changeSelectedDate(this.getCloneDate().set(unit, 0));
      }
    }
  }, {
    key: "handleKeyDownPageDown",
    value: function handleKeyDownPageDown(e) {
      (0, _EventManager.stopEvent)(e);
      var unit = this.getCurrentUnit();

      if (unit === _enum.TimeUnit.a) {
        this.changeSelectedDate(this.getCloneDate().set(_enum.TimeUnit.hour, 12));
      } else {
        var step = this.props.step;
        var unitStep = step[stepMapping[unit]] || 1;
        var size = unit === _enum.TimeUnit.hour ? this.use12Hours ? 12 : 24 : 60;
        this.changeSelectedDate(this.getCloneDate().set(unit, size - unitStep));
      }
    }
  }, {
    key: "handleTimeCellClick",
    value: function handleTimeCellClick(date, unit) {
      this.changeUnit(unit);
      this.changeSelectedDate(date);
    }
  }, {
    key: "handleWheel",
    value: function handleWheel(e) {
      e.preventDefault();

      if (e.deltaY > 0) {
        this.handleKeyDownDown(e);
      } else if (e.deltaY < 0) {
        this.handleKeyDownUp(e);
      }
    }
  }, {
    key: "renderHeader",
    value: function renderHeader() {
      var prefixCls = this.prefixCls,
          _this$props = this.props,
          date = _this$props.date,
          mode = _this$props.mode,
          format = this.observableProps.format;

      if (mode === _enum.ViewMode.time) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(prefixCls, "-header")
        }, /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(prefixCls, "-view-select")
        }, date.format(format)));
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-header")
      }, /*#__PURE__*/_react["default"].createElement("a", {
        className: "".concat(prefixCls, "-view-select"),
        onClick: this.handleMonthSelect
      }, date.localeData().monthsShort(date)), /*#__PURE__*/_react["default"].createElement("a", {
        className: "".concat(prefixCls, "-view-select"),
        onClick: this.handleDateTimeSelect
      }, date.date()), /*#__PURE__*/_react["default"].createElement("a", {
        className: "".concat(prefixCls, "-view-select"),
        onClick: this.handleYearSelect
      }, date.year()));
    }
  }, {
    key: "renderFooter",
    value: function renderFooter() {
      var prefixCls = this.prefixCls,
          disabledNow = this.props.disabledNow;
      var footerProps = {
        className: (0, _classnames["default"])("".concat(prefixCls, "-footer-now-btn"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-now-disabled"), disabledNow)),
        onClick: !disabledNow ? this.choose.bind(this, (0, _moment["default"])()) : _noop["default"],
        hidden: this.props.datetimeSide
      };
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-footer")
      }, /*#__PURE__*/_react["default"].createElement("a", (0, _extends2["default"])({}, footerProps), (0, _localeContext.$l)('DatePicker', 'now')), /*#__PURE__*/_react["default"].createElement("a", {
        className: "".concat(prefixCls, "-footer-view-select"),
        onClick: this.choose.bind(this, this.props.date)
      }, (0, _localeContext.$l)('DatePicker', 'ok')));
    }
  }, {
    key: "renderPanel",
    value: function renderPanel() {
      var className = this.getPanelClass();
      return /*#__PURE__*/_react["default"].createElement("div", {
        ref: this.savePanel,
        className: className
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(className, "-inner")
      }, this.renderPanelBody()));
    }
  }, {
    key: "renderPanelBody",
    value: function renderPanelBody() {
      var showHour = this.showHour,
          showMinute = this.showMinute,
          showSecond = this.showSecond,
          use12Hours = this.use12Hours,
          activeStyle = this.activeStyle;
      return [showHour && this.getTimeBar(_enum.TimeUnit.hour), showMinute && this.getTimeBar(_enum.TimeUnit.minute), showSecond && this.getTimeBar(_enum.TimeUnit.second), use12Hours && this.getTimeBar(_enum.TimeUnit.a), /*#__PURE__*/_react["default"].createElement("div", {
        key: "active",
        style: activeStyle,
        className: "".concat(this.prefixCls, "-time-focus-active")
      })];
    }
  }, {
    key: "renderCell",
    value: function renderCell(props) {
      return /*#__PURE__*/_react["default"].createElement("li", (0, _extends2["default"])({}, props));
    }
  }, {
    key: "getTimeBar",
    value: function getTimeBar(unit) {
      var prefixCls = this.prefixCls,
          use12Hours = this.use12Hours,
          _this$props2 = this.props,
          date = _this$props2.date,
          _this$props2$renderer = _this$props2.renderer,
          renderer = _this$props2$renderer === void 0 ? this.renderCell : _this$props2$renderer,
          _this$props2$isValidD = _this$props2.isValidDate,
          isValidDate = _this$props2$isValidD === void 0 ? _DaysView2.alwaysValidDate : _this$props2$isValidD,
          step = _this$props2.step,
          onDateMouseLeave = _this$props2.onDateMouseLeave,
          format = this.observableProps.format;
      var isUpperCase = format.indexOf('A') > -1;
      var items = [];
      var selected = date.clone();
      var finalUnit = unit === _enum.TimeUnit.a ? _enum.TimeUnit.hour : unit;
      var selectedValue = selected.get(finalUnit);
      var size = unit === _enum.TimeUnit.a ? 13 : unit === _enum.TimeUnit.hour ? use12Hours ? 12 : 24 : 60;
      var begin = unit === _enum.TimeUnit.a ? selectedValue % 12 : unit === _enum.TimeUnit.hour && use12Hours && selectedValue > 11 ? 12 : 0;
      var pre = date.clone().set(finalUnit, begin);
      var last = pre.clone().add(size, finalUnit);

      while (pre.isBefore(last)) {
        var _classNames2;

        var current = pre.clone();
        var isDisabled = !isValidDate(current, selected);
        var text = unit === _enum.TimeUnit.a ? current.format(isUpperCase ? 'A' : 'a') : String(pre.get(unit) - (use12Hours && finalUnit === _enum.TimeUnit.hour && pre.get(unit) > 11 ? 12 : 0) || (use12Hours && finalUnit === _enum.TimeUnit.hour ? 12 : 0));
        var className = (0, _classnames["default"])("".concat(prefixCls, "-cell"), (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-selected"), unit === _enum.TimeUnit.a ? current.get(_enum.TimeUnit.hour) === selectedValue : current.isSame(selected, finalUnit)), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-disabled"), isDisabled), _classNames2));
        var props = {
          key: text,
          className: className,
          children: /*#__PURE__*/_react["default"].createElement("div", {
            className: "".concat(prefixCls, "-cell-inner")
          }, text)
        };

        if (!isDisabled) {
          props.onClick = this.handleTimeCellClick.bind(this, current, unit);
          props.onMouseEnter = this.handleDateMouseEnter.bind(this, current);
          props.onMouseLeave = onDateMouseLeave;
        }

        items.push(renderer(props, text, current, selected));
        pre.add(unit === _enum.TimeUnit.a ? 12 : step[stepMapping[unit]] || 1, finalUnit);
      }

      var top = unit === _enum.TimeUnit.a ? -Math.floor(selectedValue / 12) : (unit === _enum.TimeUnit.hour && use12Hours ? -selectedValue % 12 : -selectedValue) / (step[stepMapping[unit]] || 1);
      return /*#__PURE__*/_react["default"].createElement("div", {
        key: unit,
        className: "".concat(prefixCls, "-time-list"),
        onMouseEnter: this.changeUnit.bind(this, unit),
        style: this.barStyle
      }, /*#__PURE__*/_react["default"].createElement("ul", {
        style: {
          top: "".concat((top + 3.5) * 100, "%")
        }
      }, items), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-time-focus")
      }));
    }
  }, {
    key: "getPanelClass",
    value: function getPanelClass() {
      return "".concat(this.prefixCls, "-time-panel");
    }
  }, {
    key: "getCurrentUnit",
    value: function getCurrentUnit() {
      var currentUnit = this.currentUnit;
      return currentUnit || this.timeUnitQueue[0];
    }
  }, {
    key: "getPrevUnit",
    value: function getPrevUnit() {
      var timeUnitQueue = this.timeUnitQueue;
      return timeUnitQueue[timeUnitQueue.indexOf(this.getCurrentUnit()) - 1];
    }
  }, {
    key: "getNextUnit",
    value: function getNextUnit() {
      var timeUnitQueue = this.timeUnitQueue;
      return timeUnitQueue[timeUnitQueue.indexOf(this.getCurrentUnit()) + 1];
    }
  }, {
    key: "changeUnit",
    value: function changeUnit(unit) {
      if (unit !== undefined && unit !== this.currentUnit) {
        this.currentUnit = unit;
      }
    }
  }, {
    key: "choose",
    value: function choose(date) {
      var mode = this.props.mode;
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(TimesView.prototype), "choose", this).call(this, date);

      if (mode !== _enum.ViewMode.time) {
        this.changeSelectedDate(date);
        this.changeViewMode(mode);
      }
    }
  }]);
  return TimesView;
}(_DaysView2["default"]);

TimesView.displayName = 'TimesView';
TimesView.defaultProps = (0, _objectSpread2["default"])({
  datetimeSide: false
}, _DaysView2["default"].defaultProps);
TimesView.type = _enum2.FieldType.time;
(0, _tslib.__decorate)([_mobx.observable], TimesView.prototype, "currentUnit", void 0);
(0, _tslib.__decorate)([_mobx.computed], TimesView.prototype, "showHour", null);
(0, _tslib.__decorate)([_mobx.computed], TimesView.prototype, "showMinute", null);
(0, _tslib.__decorate)([_mobx.computed], TimesView.prototype, "showSecond", null);
(0, _tslib.__decorate)([_mobx.computed], TimesView.prototype, "use12Hours", null);
(0, _tslib.__decorate)([_mobx.computed], TimesView.prototype, "timeUnitQueue", null);
(0, _tslib.__decorate)([_mobx.computed], TimesView.prototype, "barStyle", null);
(0, _tslib.__decorate)([_mobx.computed], TimesView.prototype, "activeStyle", null);
(0, _tslib.__decorate)([_autobind["default"]], TimesView.prototype, "savePanel", null);
(0, _tslib.__decorate)([_autobind["default"]], TimesView.prototype, "handleDateTimeSelect", null);
(0, _tslib.__decorate)([_autobind["default"]], TimesView.prototype, "handleWheel", null);
(0, _tslib.__decorate)([_autobind["default"]], TimesView.prototype, "renderCell", null);
(0, _tslib.__decorate)([_mobx.action], TimesView.prototype, "changeUnit", null);
TimesView = (0, _tslib.__decorate)([_mobxReact.observer], TimesView);
var _default = TimesView;
exports["default"] = _default;
//# sourceMappingURL=TimesView.js.map