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

React component library for Help Scout's Design System

"use strict";

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

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

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

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

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

var _react2 = require("@storybook/react");

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

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

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

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

var stories = (0, _react2.storiesOf)('PhaseOut/ChatList', module);

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);
  });
};

stories.add('default', function () {
  var itemMarkup = getItemMarkup();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      width: 300
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChatList, {
      children: itemMarkup
    })
  });
});

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

  function ChatListItemStateExample() {
    var _this;

    _this = _React$Component.call(this) || this;
    _this.state = (0, _extends2.default)({}, _chat.default.generate(), {
      avatar: undefined,
      name: 'This is a super long name',
      isAssigned: false,
      isTyping: false,
      isFocused: false,
      isWaiting: false,
      isViewing: false,
      newMessageCount: 0
    });
    _this.toggleAssigned = _this.toggleAssigned.bind((0, _assertThisInitialized2.default)(_this));
    _this.toggleCount = _this.toggleCount.bind((0, _assertThisInitialized2.default)(_this));
    _this.toggleFocused = _this.toggleFocused.bind((0, _assertThisInitialized2.default)(_this));
    _this.toggleTyping = _this.toggleTyping.bind((0, _assertThisInitialized2.default)(_this));
    _this.toggleViewing = _this.toggleViewing.bind((0, _assertThisInitialized2.default)(_this));
    _this.toggleWaiting = _this.toggleWaiting.bind((0, _assertThisInitialized2.default)(_this));
    _this.handleOnClick = _this.handleOnClick.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  var _proto = ChatListItemStateExample.prototype;

  _proto.handleOnClick = function handleOnClick() {
    if (this.state.isFocused) {
      this.setState({
        newMessageCount: 0
      });
    }
  };

  _proto.toggleAssigned = function toggleAssigned() {
    var avatarFixture = _avatar.default.generate();

    var avatar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
      image: avatarFixture.image,
      name: avatarFixture.name,
      size: "xs",
      shape: "rounded"
    });
    this.setState({
      isAssigned: !this.state.isAssigned,
      avatar: this.state.avatar ? undefined : avatar
    });
  };

  _proto.toggleCount = function toggleCount() {
    this.setState({
      newMessageCount: this.state.newMessageCount ? 0 : 3
    });
  };

  _proto.toggleFocused = function toggleFocused() {
    this.setState({
      isFocused: !this.state.isFocused
    });
  };

  _proto.toggleTyping = function toggleTyping() {
    this.setState({
      isTyping: !this.state.isTyping
    });
  };

  _proto.toggleViewing = function toggleViewing() {
    this.setState({
      isViewing: !this.state.isViewing
    });
  };

  _proto.toggleWaiting = function toggleWaiting() {
    this.setState({
      isWaiting: !this.state.isWaiting
    });
  };

  _proto.render = function render() {
    var item = this.state;
    var handleOnClick = this.handleOnClick;
    var toggleAssigned = this.toggleAssigned;
    var toggleCount = this.toggleCount;
    var toggleFocused = this.toggleFocused;
    var toggleTyping = this.toggleTyping;
    var toggleViewing = this.toggleViewing;
    var toggleWaiting = this.toggleWaiting;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChatList.Item, {
        avatar: item.avatar,
        isAssigned: item.isAssigned,
        isFocused: item.isFocused,
        isTyping: item.isTyping,
        isViewing: item.isViewing,
        isWaiting: item.isWaiting,
        onClick: handleOnClick,
        message: item.message,
        name: item.name,
        newMessageCount: item.newMessageCount,
        tags: item.tags,
        timestamp: item.timestamp
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.List, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.List.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
            onClick: toggleAssigned,
            children: "Toggle Assigned"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.List.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
            onClick: toggleCount,
            children: "Toggle Count"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.List.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
            onClick: toggleFocused,
            children: "Toggle Focused"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.List.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
            onClick: toggleTyping,
            children: "Toggle Typing"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.List.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
            onClick: toggleViewing,
            children: "Toggle Viewing"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.List.Item, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Button, {
            onClick: toggleWaiting,
            children: "Toggle Waiting"
          })
        })]
      })]
    });
  };

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

stories.add('item: states', function () {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      width: 300
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChatListItemStateExample, {})
  });
});