@talend/react-components/lib/DateTimePickers/pickers/TimePicker/TimePicker.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TimePicker = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _timeExtraction = require("../../Time/time-extraction");
var _reactA11y = require("@talend/react-a11y");
var _TimePickerModule = _interopRequireDefault(require("./TimePicker.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function isBefore(a, b) {
  if (a.hours > b.hours) {
    return false;
  } else if (a.hours === b.hours && a.minutes > b.minutes) {
    return false;
  } else if (a.hours === b.hours && a.minutes === b.minutes && a.seconds >= b.seconds) {
    return false;
  }
  return true;
}
function addInterval({
  hours,
  minutes,
  ...seconds
}, interval = 60) {
  let newMinutes = minutes + interval;
  let newHours = hours;
  if (Math.floor(newMinutes / 60) > 0) {
    newHours += Math.floor(newMinutes / 60);
    newMinutes %= 60;
  }
  return {
    hours: newHours,
    minutes: newMinutes,
    ...seconds
  };
}
function getOptions(interval = 60, useSeconds) {
  const options = [];
  const start = {
    hours: 0,
    minutes: 0,
    seconds: 0
  };
  const end = {
    hours: 23,
    minutes: 59,
    seconds: 59
  };
  let current = start;
  while (isBefore(current, end)) {
    options.push({
      label: (0, _timeExtraction.timeToStr)(current, useSeconds),
      value: current
    });
    current = addInterval(current, interval);
  }
  return options;
}
class TimePicker extends _react.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.updateHighlightIndex = this.updateHighlightIndex.bind(this);
    this.scrollItemIntoView = this.scrollItemIntoView.bind(this);
    this.options = getOptions(props.interval, props.useSeconds);
    this.state = {
      hightlightedItemIndex: this.options.findIndex(option => option.label.includes(props.textInput))
    };
  }
  componentDidMount() {
    if (this.props.textInput) {
      this.scrollItemIntoView(this.props.textInput);
    }
  }
  onSelect(event, option, index) {
    this.setState({
      hightlightedItemIndex: index
    }, () => this.props.onChange(event, {
      textInput: option.label,
      time: {
        hours: (0, _timeExtraction.pad)(option.value.hours),
        minutes: (0, _timeExtraction.pad)(option.value.minutes),
        seconds: (0, _timeExtraction.pad)(option.value.seconds)
      }
    }));
  }
  scrollItemIntoView(textInput) {
    const found = this.options.findIndex(option => option.label.includes(textInput));
    if (found) {
      const ref = this.containerRef.childNodes[found];
      if (ref) {
        ref.scrollIntoView({
          block: 'center'
        });
      }
      if (found !== this.state.hightlightedItemIndex) {
        this.updateHighlightIndex(found);
      }
    }
  }
  updateHighlightIndex(index) {
    this.setState(({
      hightlightedItemIndex
    }) => {
      if (hightlightedItemIndex !== index) {
        return {
          hightlightedItemIndex: index
        };
      }
      return null;
    });
  }
  render() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: _TimePickerModule.default.container,
      ref: ref => this.containerRef = ref,
      role: "list",
      children: this.options.map((option, index) => {
        const className = (0, _classnames.default)('tc-time-picker-time', {
          highlight: index === this.state.hightlightedItemIndex
        });
        const ariaProps = {};
        if (index === this.state.hightlightedItemIndex) {
          ariaProps['aria-current'] = 'time';
        }
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          tabIndex: -1,
          role: "listitem",
          type: "button",
          className: className,
          onClick: event => this.onSelect(event, option),
          onKeyDown: event => this.props.onKeyDown(event, this.containerRef.childNodes[index]),
          ...ariaProps,
          children: option.label
        }, index);
      })
    });
  }
}
exports.TimePicker = TimePicker;
_defineProperty(TimePicker, "propTypes", {
  interval: _propTypes.default.number,
  onChange: _propTypes.default.func.isRequired,
  onKeyDown: _propTypes.default.func.isRequired,
  textInput: _propTypes.default.string,
  useSeconds: _propTypes.default.bool
});
_defineProperty(TimePicker, "defaultProps", {
  interval: 60,
  useSeconds: false
});
var _default = exports.default = _reactA11y.Gesture.withListGesture(TimePicker, true);
//# sourceMappingURL=TimePicker.component.js.map