@helpscout/hsds-react/components/ChatScroller/ChatScroller.storiesHelpers.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 _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

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

var _helix = require("@helpscout/helix");

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

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

var MessageSpec = (0, _helix.createSpec)({
  id: _helix.faker.datatype.uuid(),
  message: _helix.faker.lorem.sentence()
});

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

    function Chat() {
      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.state = {
        messages: MessageSpec.generate(5),
        isTyping: false
      };

      _this.addMessage = function () {
        _this.setState({
          messages: [].concat(_this.state.messages, [MessageSpec.generate()])
        });
      };

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

      return _this;
    }

    var _proto = Chat.prototype;

    _proto.render = function render() {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          onClick: this.addMessage,
          children: "Add Message"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
          onClick: this.toggleTyping,
          children: "Toggle Typing"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          style: {
            width: 320,
            height: 300
          },
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChatScroller, {
            messages: this.state.messages,
            isTyping: this.state.isTyping,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              style: {
                display: 'flex',
                height: '100%',
                width: '100%'
              },
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Scrollable, {
                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                  style: {
                    padding: '0 15px'
                  },
                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Message, {
                    from: true,
                    avatar: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Avatar, {
                      name: "Arctic Puffin"
                    }),
                    children: this.state.messages.map(function (props) {
                      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Message.Chat, {
                        children: props.message
                      }, props.id);
                    })
                  }), this.state.isTyping && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Message.Chat, {
                    typing: true
                  })]
                })
              })
            })
          })
        })]
      });
    };

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

  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    style: {
      width: 400,
      height: 400
    },
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Chat, {})
  });
};

exports.Default = Default;