@helpscout/hsds-react/components/Timestamp/Timestamp.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 _classnames = _interopRequireDefault(require("classnames"));

var _Flexy = _interopRequireDefault(require("../Flexy"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _Text = _interopRequireDefault(require("../Text"));

var _Timestamp = _interopRequireDefault(require("./Timestamp.Time"));

var _Timestamp2 = require("./Timestamp.css");

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

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

  function Timestamp() {
    return _React$Component.apply(this, arguments) || this;
  }

  var _proto = Timestamp.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        children = _this$props.children,
        className = _this$props.className,
        formatter = _this$props.formatter,
        live = _this$props.live,
        muted = _this$props.muted,
        read = _this$props.read,
        timestamp = _this$props.timestamp,
        rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, ["children", "className", "formatter", "live", "muted", "read", "timestamp"]);
    var componentClassName = (0, _classnames.default)('c-Timestamp', muted && 'is-muted', className);
    var readMarkup = read ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      name: "tick-large",
      size: "12",
      faint: true,
      title: "Read"
    }) : null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Timestamp2.TimestampUI, (0, _extends2.default)({}, (0, _getValidProps.default)(rest), {
      className: componentClassName,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Flexy.default, {
        gap: "xs",
        just: "left",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
            size: "12",
            faint: true,
            disableSelect: true,
            noWrap: true,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Timestamp.default, {
              formatter: formatter,
              live: live,
              timestamp: "" + timestamp
            })
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flexy.default.Item, {
          children: readMarkup
        })]
      })
    }));
  };

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

Timestamp.Time = _Timestamp.default;
Timestamp.defaultProps = {
  'data-cy': 'Timestamp',
  live: false,
  read: false,
  timestamp: '9:41am'
};
Timestamp.propTypes = {
  children: _propTypes.default.any,

  /** 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,

  /** Determines if the Message is read. */
  read: _propTypes.default.bool,

  /** Timestamp for the Message. */
  timestamp: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  muted: _propTypes.default.bool
};
var _default = Timestamp;
exports.default = _default;