lucid-ui/lib/components/SidePanel/examples/07.with-resize.js

A UI component library from AppNexus.

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

import React from 'react';
import { SidePanel } from '../../../index';

var _default = /*#__PURE__*/function (_React$Component) {
  _inherits(_default, _React$Component);

  var _super = _createSuper(_default);

  function _default(props, state) {
    var _this;

    _classCallCheck(this, _default);

    _this = _super.call(this, props, state);
    _this.state = {
      isExpanded: true,
      width: 240
    };
    _this.handleToggle = _this.handleToggle.bind(_assertThisInitialized(_this));
    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(_default, [{
    key: "handleToggle",
    value: function handleToggle() {
      this.setState({
        isExpanded: !this.state.isExpanded
      });
    }
  }, {
    key: "handleResize",
    value: function handleResize(width) {
      this.setState({
        width: width
      });
    }
  }, {
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("p", null, "resized width is obtatined with a callback"), /*#__PURE__*/React.createElement("p", null, "SidePanel width: ", this.state.width), /*#__PURE__*/React.createElement("button", {
        onClick: this.handleToggle
      }, "Toggle SidePanel"), /*#__PURE__*/React.createElement(SidePanel, {
        isExpanded: this.state.isExpanded,
        width: this.state.width,
        onCollapse: this.handleToggle,
        Header: "Stumptown keytar schlitz",
        onResize: this.handleResize
      }, /*#__PURE__*/React.createElement("p", null, "Stumptown keytar schlitz, vinyl vexillologist humblebrag sartorial crucifix cornhole. Four dollar toast 8-bit taiyaki asymmetrical helvetica kitsch farm-to-table thundercats. Occupy hammock waistcoat pabst ethical. Sartorial umami cardigan, farm-to-table bespoke 90's schlitz cray drinking vinegar actually freegan bushwick wolf. Shabby chic tofu celiac shaman, twee af squid blue bottle street art. Lumbersexual lo-fi stumptown, iceland locavore tacos chillwave portland beard celiac polaroid."), /*#__PURE__*/React.createElement("p", null, "Keffiyeh kinfolk lumbersexual, austin ennui sustainable mlkshk four loko selfies ramps pop-up coloring book before they sold out yuccie biodiesel. Yuccie taxidermy beard, +1 church-key umami echo park synth. Fanny pack farm-to-table pok pok, next level trust fund live-edge asymmetrical art party intelligentsia listicle sriracha. Tote bag ugh meggings, selfies vegan blog locavore messenger bag chambray etsy heirloom cronut enamel pin hammock umami. Bushwick venmo activated charcoal, mumblecore skateboard hashtag literally brooklyn etsy ennui 3 wolf moon. Before they sold out blog iPhone subway tile, truffaut dreamcatcher organic raclette portland whatever brooklyn succulents flexitarian gentrify cray. Kogi subway tile gochujang dreamcatcher.")));
    }
  }]);

  return _default;
}(React.Component);

export { _default as default };