@helpscout/hsds-react/components/Timestamp/Timestamp.Time.js

React component library for Help Scout's Design System

"use strict";

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

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

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

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

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

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

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

var _getValidProps = _interopRequireDefault(require("@helpscout/react-utils/dist/getValidProps"));

var _Timestamp = require("./Timestamp.utils");

var _jsxRuntime = require("react/jsx-runtime");

var Time = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2.default)(Time, _React$Component);

  function Time() {
    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.timeoutId = undefined;
    _this._isMounted = false;
    return _this;
  }

  var _proto = Time.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var live = this.props.live;
    this._isMounted = true;

    if (live) {
      // Start the tick
      this.tick(true);
    }
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    var lastLive = prevProps.live,
        lastTimestamp = prevProps.timestamp;
    var _this$props = this.props,
        live = _this$props.live,
        timestamp = _this$props.timestamp;

    if (live !== lastLive || timestamp !== lastTimestamp) {
      if (!live && this.timeoutId) {
        // Clear the timeout if now not live
        clearTimeout(this.timeoutId);
        this.timeoutId = undefined;
      } // Tick to update the timestamp


      this.tick();
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this._isMounted = false;

    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
      this.timeoutId = undefined;
    }
  };

  _proto.tick = function tick(refresh) {
    var _this$props2 = this.props,
        live = _this$props2.live,
        timestamp = _this$props2.timestamp;

    if (!this._isMounted || !live) {
      return;
    }

    var period = (0, _Timestamp.calculateTimeoutPeriod)(timestamp);

    if (period > 0) {
      this.timeoutId = setTimeout(this.tick.bind(this), period);
    }

    if (!refresh) {
      this.forceUpdate();
    }
  };

  _proto.render = function render() {
    var _this$props3 = this.props,
        className = _this$props3.className,
        formatter = _this$props3.formatter,
        timestamp = _this$props3.timestamp,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props3, ["className", "formatter", "timestamp"]);
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("time", (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: className,
      dateTime: timestamp,
      children: formatter(timestamp)
    }));
  };

  return Time;
}(_react.default.Component);

Time.defaultProps = {
  'data-cy': 'Time',
  formatter: function formatter(timestamp) {
    return timestamp;
  },
  live: false
};
Time.propTypes = {
  /** Data attr for Cypress tests. */
  'data-cy': _propTypes.default.string,

  /** Custom class names to be added to the component. */
  className: _propTypes.default.string,

  /** A function to format the timestamp, which defaults to returning the timestamp string. */
  formatter: _propTypes.default.func,

  /** Enables the internal ticking mechanism to live update the timestamp. Default `false`. */
  live: _propTypes.default.bool,

  /** Timestamp for the Message. */
  timestamp: _propTypes.default.string
};
var _default = Time;
exports.default = _default;