wix-style-react/dist/src/Timeline/TimelineItem.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Text = _interopRequireDefault(require("../Text"));
var _TimelineItemSt = require("./TimelineItem.st.css");
var _constants = require("./constants");
var _StringUtils = require("../utils/StringUtils");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Timeline/TimelineItem.js";
/** A timeline item is a display of a timeline event */
class TimelineItem extends _react.default.PureComponent {
  render() {
    var {
      idx,
      item,
      dataHook,
      gap
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("li", {
      className: _TimelineItemSt.classes.event,
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 15,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
      className: _TimelineItemSt.classes.prefix,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 17,
        columnNumber: 11
      }
    }, item.customPrefix ? /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": "".concat(_constants.dataHooks.timelineBulletIndicator, "-").concat(idx),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 19,
        columnNumber: 15
      }
    }, item.customPrefix) : /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": "".concat(_constants.dataHooks.timelineDefaultPrefix, "-").concat(idx),
      className: _TimelineItemSt.classes.defaultIndicator,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 23,
        columnNumber: 15
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: _TimelineItemSt.classes.line,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 28,
        columnNumber: 13
      }
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _TimelineItemSt.st)(_TimelineItemSt.classes.label, {
        withSuffix: !!item.suffix
      }),
      style: {
        [_TimelineItemSt.vars.marginBottom]: gap
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 30,
        columnNumber: 11
      }
    }, (0, _StringUtils.isString)(item.label) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
      dataHook: "".concat(_constants.dataHooks.timelineLabel, "-").concat(idx),
      weight: "thin",
      size: "small",
      className: _TimelineItemSt.classes.labelText,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 35,
        columnNumber: 15
      }
    }, item.label) : item.label, item.labelAction ? /*#__PURE__*/_react.default.createElement("div", {
      className: _TimelineItemSt.classes.labelAction,
      "data-hook": "".concat(_constants.dataHooks.timelineLabelAction, "-").concat(idx),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 47,
        columnNumber: 15
      }
    }, item.labelAction) : null), item.suffix ? /*#__PURE__*/_react.default.createElement("div", {
      className: _TimelineItemSt.classes.suffix,
      "data-hook": "".concat(_constants.dataHooks.timelineSuffix, "-").concat(idx),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 56,
        columnNumber: 13
      }
    }, (0, _StringUtils.isString)(item.suffix) ? /*#__PURE__*/_react.default.createElement(_Text.default, {
      dataHook: "".concat(_constants.dataHooks.timelineTextSuffix, "-").concat(idx),
      weight: "thin",
      light: true,
      secondary: true,
      size: "small",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 17
      }
    }, item.suffix) : item.suffix) : null));
  }
}
TimelineItem.displayName = 'TimelineItem';
TimelineItem.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** timeline event item index*/
  idx: _propTypes.default.number,
  /** timeline event item */
  item: _propTypes.default.shape({
    /** event text - could be a node or a string */
    label: _propTypes.default.node,
    /** action element in the end of event text */
    labelAction: _propTypes.default.node,
    /**  TODO: still in development. custom bullet element like icon or avatar */
    customPrefix: _propTypes.default.node,
    /** suffix text or element placed on the right */
    suffix: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])
  }).isRequired
};
var _default = exports.default = TimelineItem;
//# sourceMappingURL=TimelineItem.js.map