@helpscout/hsds-react/components/ChatList/ChatList.storiesHelpers.js

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.List = exports._Item = void 0;

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

var _avatar = _interopRequireDefault(require("../../utilities/specs/avatar.specs"));

var _chat = _interopRequireDefault(require("../../utilities/specs/chat.specs"));

var _index = require("../index");

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

var avatars = _avatar.default.generate(8);

var getItemMarkup = function getItemMarkup() {
  var fixtures = _chat.default.generate(8);

  var values = Object.values(fixtures).filter(function (i) {
    return !!i;
  });
  return values.map(function (item, index) {
    var avatar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
      image: avatars[4].image,
      name: avatars[4].name,
      size: "xs",
      shape: "rounded"
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChatList.Item, {
      avatar: item.isAssigned ? avatar : null,
      isAssigned: item.isAssigned,
      isFocused: index === 2,
      isTyping: item.isTyping,
      isViewing: item.isViewing,
      isWaiting: item.isWaiting,
      message: item.message,
      name: item.name,
      newMessageCount: item.newMessageCount,
      tags: item.tags,
      timestamp: item.timestamp
    }, item.id);
  });
};

var _Item = function _Item() {
  var itemMarkup = getItemMarkup();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      width: 300
    },
    children: itemMarkup[0]
  });
};

exports._Item = _Item;

var List = function List() {
  var itemMarkup = getItemMarkup();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      width: 300
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.ChatList, {
      children: [itemMarkup[0], itemMarkup[1]]
    })
  });
};

exports.List = List;