@wix/design-system/dist/esm/TimeTable/docs/examples/customContent.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/esm/TimeTable/docs/examples/customContent.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 TogglablePopover = /*#__PURE__*/function (_React$Component) {
  "use strict";

  function TogglablePopover() {
    var _this;
    _classCallCheck(this, TogglablePopover);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, TogglablePopover, [].concat(args));
    _this.state = {
      shown: false
    };
    return _this;
  }
  _inherits(TogglablePopover, _React$Component);
  return _createClass(TogglablePopover, [{
    key: "render",
    value: function render() {
      var _this2 = this;
      var shown = this.state.shown;
      var _this$props = this.props,
        content = _this$props.content,
        children = _this$props.children;
      return /*#__PURE__*/React.createElement(Popover, {
        animate: true,
        flip: true,
        showArrow: true,
        appendTo: "parent",
        placement: "right",
        width: 230,
        shown: shown,
        onClick: function onClick() {
          return _this2.setState({
            shown: !shown
          });
        },
        onClickOutside: function onClickOutside() {
          return _this2.setState({
            shown: false
          });
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 11,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement(Popover.Element, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 22,
          columnNumber: 9
        }
      }, children), /*#__PURE__*/React.createElement(Popover.Content, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 23,
          columnNumber: 9
        }
      }, /*#__PURE__*/React.createElement(Box, {
        padding: 2,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 24,
          columnNumber: 11
        }
      }, content)));
    }
  }]);
}(React.Component);
;
var TimeTableExample = /*#__PURE__*/function (_React$Component2) {
  "use strict";

  function TimeTableExample() {
    var _this3;
    _classCallCheck(this, TimeTableExample);
    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }
    _this3 = _callSuper(this, TimeTableExample, [].concat(args));
    _this3.state = {
      columns: [{
        title: '1',
        subtitle: 'DAY',
        items: []
      }, {
        title: '2',
        subtitle: 'DAY',
        items: [{
          content: function content(_ref) {
            var Item = _ref.Item,
              disabled = _ref.disabled,
              draggable = _ref.draggable;
            return /*#__PURE__*/React.createElement(TogglablePopover, {
              content: "Some content inside popover!",
              __self: _this3,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 45,
                columnNumber: 15
              }
            }, /*#__PURE__*/React.createElement(Item, {
              disabled: disabled,
              draggable: draggable,
              __self: _this3,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 46,
                columnNumber: 17
              }
            }, "Click on this item to show Popover!"));
          }
        }]
      }, {
        title: '3',
        subtitle: 'DAY',
        items: []
      }, {
        title: '4',
        subtitle: 'DAY',
        items: [{
          content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Badge, {
            skin: "success",
            type: "outlined",
            size: "small",
            uppercase: true,
            __self: _this3,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 66,
              columnNumber: 17
            }
          }, "Wow"), /*#__PURE__*/React.createElement(Box, {
            marginTop: 1,
            __self: _this3,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 67,
              columnNumber: 17
            }
          }, "Custom node used as item content!"))
        }],
        active: true
      }, {
        title: '5',
        subtitle: 'DAY',
        items: []
      }, {
        title: '6',
        subtitle: 'DAY',
        items: []
      }, {
        title: '7',
        subtitle: 'DAY',
        items: []
      }]
    };
    _this3.handleOnChange = function (columns) {
      _this3.setState({
        columns: columns
      });
    };
    return _this3;
  }
  _inherits(TimeTableExample, _React$Component2);
  return _createClass(TimeTableExample, [{
    key: "render",
    value: function render() {
      return /*#__PURE__*/React.createElement(TimeTable, {
        columns: this.state.columns,
        onChange: this.handleOnChange,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 98,
          columnNumber: 7
        }
      });
    }
  }]);
}(React.Component);
;
render(/*#__PURE__*/React.createElement(TimeTableExample, {
  __self: this,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 106,
    columnNumber: 8
  }
}));