@wix/design-system/dist/cjs/Sidebar/docs/SimpleExample.js

@wix/design-system

var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");
var _createClass = require("@babel/runtime/helpers/createClass");
var _possibleConstructorReturn = require("@babel/runtime/helpers/possibleConstructorReturn");
var _getPrototypeOf = require("@babel/runtime/helpers/getPrototypeOf");
var _inherits = require("@babel/runtime/helpers/inherits");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Sidebar/docs/SimpleExample.jsx";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/* eslint-disable */
var SimpleSidebar = /*#__PURE__*/function (_React$Component) {
  "use strict";

  function SimpleSidebar(props) {
    var _this;
    _classCallCheck(this, SimpleSidebar);
    _this = _callSuper(this, SimpleSidebar, [props]);
    _this.state = {
      isHidden: false
    };
    _this.onClick = _this.onClick.bind(_this);
    return _this;
  }
  _inherits(SimpleSidebar, _React$Component);
  return _createClass(SimpleSidebar, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement("div", {
        style: {
          overflow: 'hidden',
          height: '500px',
          color: 'white'
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 11,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement(Sidebar, {
        selectedKey: 'item1',
        isHidden: this.state.isHidden,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 12,
          columnNumber: 9
        }
      }, /*#__PURE__*/React.createElement(Sidebar.PersistentHeader, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 13,
          columnNumber: 11
        }
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          textAlign: 'center',
          fontSize: '20px',
          margin: '10px'
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 14,
          columnNumber: 13
        }
      }, "Simple Sidebar")), /*#__PURE__*/React.createElement(Sidebar.Item, {
        itemKey: 'item1',
        disable: "true",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 21,
          columnNumber: 11
        }
      }, "This is just a long text without any margins or padding that will break into several lines"), /*#__PURE__*/React.createElement(Sidebar.Item, {
        itemKey: 'item2',
        disable: "true",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 25,
          columnNumber: 11
        }
      }, /*#__PURE__*/React.createElement(Box, {
        margin: 1,
        backgroundColor: "#eee",
        padding: 1,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 26,
          columnNumber: 13
        }
      }, /*#__PURE__*/React.createElement(Checkbox, {
        disabled: true,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 27,
          columnNumber: 15
        }
      }, "Disabled"))), /*#__PURE__*/React.createElement(Sidebar.Item, {
        itemKey: 'item3',
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 32,
          columnNumber: 11
        }
      }, /*#__PURE__*/React.createElement(Box, {
        margin: 3,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 33,
          columnNumber: 13
        }
      }, /*#__PURE__*/React.createElement(Button, {
        size: "small",
        skin: "premium",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 34,
          columnNumber: 15
        }
      }, "A button"))), /*#__PURE__*/React.createElement(Sidebar.PersistentFooter, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 40,
          columnNumber: 11
        }
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          textAlign: 'center',
          fontSize: '20px',
          margin: '10px'
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 41,
          columnNumber: 13
        }
      }, "Sidebar Footer"))), /*#__PURE__*/React.createElement("button", {
        style: {
          position: 'absolute',
          left: '300px',
          top: '50%'
        },
        onClick: this.onClick,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 49,
          columnNumber: 9
        }
      }, "Toggle"));
    }
  }, {
    key: "onClick",
    value: function onClick() {
      this.setState({
        isHidden: !this.state.isHidden
      });
    }
  }]);
}(React.Component);