rsuite/cjs/Calendar/TimeDropdown.js

A suite of react components

"use strict";

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

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

exports.__esModule = true;
exports.getRanges = getRanges;
exports.getMeridianHours = getMeridianHours;
exports.default = void 0;

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

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _getPosition = _interopRequireDefault(require("dom-lib/getPosition"));

var _scrollTop = _interopRequireDefault(require("dom-lib/scrollTop"));

var _partial = _interopRequireDefault(require("lodash/partial"));

var _camelCase = _interopRequireDefault(require("lodash/camelCase"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _utils = require("../utils");

var _CalendarContext = require("./CalendarContext");

/**
 * Get the effective range of hours, minutes and seconds
 * @param meridian
 */
function getRanges(meridian) {
  return {
    hours: {
      start: 0,
      end: meridian ? 11 : 23
    },
    minutes: {
      start: 0,
      end: 59
    },
    seconds: {
      start: 0,
      end: 59
    }
  };
}
/**
 * Convert the 24-hour clock to the 12-hour clock
 * @param hours
 */


function getMeridianHours(hours) {
  return hours >= 12 ? hours - 12 : hours;
}

var getTime = function getTime(props) {
  var format = props.format,
      date = props.date,
      showMeridian = props.showMeridian;
  var time = date || new Date();
  var nextTime = {};

  if (!format) {
    return nextTime;
  }

  if (/(H|h)/.test(format)) {
    var hours = _utils.DateUtils.getHours(time);

    nextTime.hours = showMeridian ? getMeridianHours(hours) : hours;
  }

  if (/m/.test(format)) {
    nextTime.minutes = _utils.DateUtils.getMinutes(time);
  }

  if (/s/.test(format)) {
    nextTime.seconds = _utils.DateUtils.getSeconds(time);
  }

  return nextTime;
};

var scrollTo = function scrollTo(time, row) {
  if (!row) {
    return;
  }

  Object.entries(time).forEach(function (_ref) {
    var type = _ref[0],
        value = _ref[1];
    var container = row.querySelector("[data-type=\"" + type + "\"]");
    var node = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + type + "-" + value + "\"]");

    if (node && container) {
      var position = (0, _getPosition.default)(node, container);

      if (position) {
        (0, _utils.scrollTopAnimation)(container, position.top, (0, _scrollTop.default)(container) !== 0);
      }
    }
  });
};

var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
  var _props$as = props.as,
      Component = _props$as === void 0 ? 'div' : _props$as,
      className = props.className,
      _props$classPrefix = props.classPrefix,
      classPrefix = _props$classPrefix === void 0 ? 'calendar-time-dropdown' : _props$classPrefix,
      show = props.show,
      _props$showMeridian = props.showMeridian,
      showMeridian = _props$showMeridian === void 0 ? false : _props$showMeridian,
      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "show", "showMeridian"]);

  var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
      locale = _useCalendarContext.locale,
      format = _useCalendarContext.format,
      date = _useCalendarContext.date,
      onSelect = _useCalendarContext.onChangePageTime;

  var rowRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    var time = getTime({
      format: format,
      date: date,
      showMeridian: showMeridian
    }); // The currently selected time scrolls to the visible range.

    if (show && rowRef.current) {
      scrollTo(time, rowRef.current);
    }
  }, [date, format, show, showMeridian]);

  var handleClick = function handleClick(type, d, event) {
    var nextDate = date || new Date();

    switch (type) {
      case 'hours':
        nextDate = _utils.DateUtils.setHours(date, showMeridian && _utils.DateUtils.getHours(nextDate) >= 12 ? d + 12 : d);
        break;

      case 'minutes':
        nextDate = _utils.DateUtils.setMinutes(date, d);
        break;

      case 'seconds':
        nextDate = _utils.DateUtils.setSeconds(date, d);
        break;
    }

    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextDate, event);
  };

  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
      prefix = _useClassNames.prefix,
      rootPrefix = _useClassNames.rootPrefix,
      merge = _useClassNames.merge;

  var renderColumn = function renderColumn(type, active) {
    if (!(0, _isNumber.default)(active)) {
      return null;
    }

    var _getRanges$type = getRanges(showMeridian)[type],
        start = _getRanges$type.start,
        end = _getRanges$type.end;
    var items = [];
    var hideFunc = props[(0, _camelCase.default)("hide_" + type)];
    var disabledFunc = props[(0, _camelCase.default)("disabled_" + type)];

    for (var i = start; i <= end; i += 1) {
      if (!(hideFunc !== null && hideFunc !== void 0 && hideFunc(i, date))) {
        var disabled = disabledFunc === null || disabledFunc === void 0 ? void 0 : disabledFunc(i, date);
        var itemClasses = prefix('cell', {
          'cell-active': active === i,
          'cell-disabled': disabled
        });
        items.push( /*#__PURE__*/_react.default.createElement("li", {
          key: i,
          role: "menuitem"
        }, /*#__PURE__*/_react.default.createElement("a", {
          role: "button",
          className: itemClasses,
          tabIndex: -1,
          "data-key": type + "-" + i,
          onClick: !disabled ? (0, _partial.default)(handleClick, type, i) : undefined
        }, showMeridian && type === 'hours' && i === 0 ? '12' : i)));
      }
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: prefix('column'),
      role: "listitem"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: prefix('column-title')
    }, locale === null || locale === void 0 ? void 0 : locale[type]), /*#__PURE__*/_react.default.createElement("ul", {
      "data-type": type,
      role: "menu"
    }, items));
  };

  var time = getTime({
    format: format,
    date: date,
    showMeridian: showMeridian
  });
  var classes = merge(className, rootPrefix(classPrefix));
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
    role: "list"
  }, _utils.DateUtils.omitHideDisabledProps(rest), {
    ref: ref,
    className: classes
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: prefix('content')
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: prefix('row'),
    ref: rowRef
  }, renderColumn('hours', time.hours), renderColumn('minutes', time.minutes), renderColumn('seconds', time.seconds))));
});

TimeDropdown.displayName = 'TimeDropdown';
TimeDropdown.propTypes = {
  show: _propTypes.default.bool,
  showMeridian: _propTypes.default.bool,
  className: _propTypes.default.string,
  classPrefix: _propTypes.default.string,
  disabledDate: _propTypes.default.func,
  disabledHours: _propTypes.default.func,
  disabledMinutes: _propTypes.default.func,
  disabledSeconds: _propTypes.default.func,
  hideHours: _propTypes.default.func,
  hideMinutes: _propTypes.default.func,
  hideSeconds: _propTypes.default.func
};
var _default = TimeDropdown;
exports.default = _default;