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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.AnimateOutExample = void 0;

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

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

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

var _ = _interopRequireDefault(require("."));

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

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

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

  function AnimateOutExample() {
    var _this;

    _this = _React$Component.call(this) || this;
    _this.state = {
      show: false
    };
    _this.toggleIn = _this.toggleIn.bind((0, _assertThisInitialized2.default)(_this));
    return _this;
  }

  var _proto = AnimateOutExample.prototype;

  _proto.toggleIn = function toggleIn() {
    this.setState({
      show: !this.state.show
    });
  };

  _proto.render = function render() {
    var show = this.state.show;
    var toggleIn = this.toggleIn;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
        onClick: toggleIn,
        children: "Toggle Animation"
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        style: {
          width: 300
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
          animateOnMount: false,
          duration: 200,
          easing: "bounce",
          in: show,
          sequence: "fade down",
          unmountOnExit: true,
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Card, {
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Heading, {
              children: "Anchorman"
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
              children: "Stay classy San Diego!"
            })]
          })
        })
      })]
    });
  };

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

exports.AnimateOutExample = AnimateOutExample;