storybook-addon-material-ui/dist/containers/PanelContainer.js

Storybook Addon for Material UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@material-ui/core/styles");

var beauti = _interopRequireWildcard(require("js-beautify"));

var _AddonPanel = _interopRequireDefault(require("../components/AddonPanel"));

var _WithChannel = _interopRequireDefault(require("../adk/WithChannel"));

var _config = require("../config");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _typeof(obj) { 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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

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

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 _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _global = global,
    document = _global.document,
    window = _global.window;
var logger = console;
var lightBaseTheme = (0, _styles.createMuiTheme)();
var PROGRESS_STATUS = {
  'button-clone': 'soon',
  // todo: [] button_clone
  'button-download': 'done',
  // todo: [x] button_download
  'button-clean': 'soon',
  // todo: [] button_clean
  'textarea-edit': 'done',
  // todo: [x] textarea-edit
  'textarea-update': 'done' // todo: [x] textarea-update

};

var progressInfo = function progressInfo() {
  var keys = Object.keys(PROGRESS_STATUS);
  logger.group('PROGRESS_STATUS:');
  keys.forEach(function (val) {
    if (PROGRESS_STATUS[val] === 'done') {
      logger.info("".concat(val, ": ").concat(PROGRESS_STATUS[val]));
      return;
    }

    logger.warn("".concat(val, ": ").concat(PROGRESS_STATUS[val]));
  });
  logger.groupEnd('PROGRESS_STATUS:');
};

var genNameList = function genNameList(themesAppliedList) {
  return themesAppliedList.map(function (val, ind) {
    return val.themeName || "Theme ".concat(ind + 1);
  });
};

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

  function PanelContainer(props) {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, PanelContainer);

    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
      args[_key - 1] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(PanelContainer)).call.apply(_getPrototypeOf2, [this, props].concat(args)));

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onInitChannel", function (initData) {
      // const _themesNameList = genNameList(initData.themesAppliedList);
      var themesNameList = genNameList(initData);

      var queryData = _this.queryFetch();

      _this.setState(_objectSpread({
        themesAppliedList: initData
      }, queryData, {
        themesNameList: themesNameList,
        isReady: true
      }));

      console.log('TCL: PanelContainer -> initData', initData);
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDataChannel", function (stateData) {
      //        const stateData = JSON.parse(strData);
      var themesNameList = genNameList(stateData.themesAppliedList);
      _this.isChannelData = true; // note: this state received by channel, don't need to send back

      _this.setState(_objectSpread({}, stateData, {
        themesNameList: themesNameList
      }));
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onThemeSelect", function (ind) {
      _this.setState({
        themeInd: ind
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onChangeTheme", function (str) {
      // const str = event.target.value;
      try {
        var newTheme = JSON.parse(str);
        var themesAppliedList = _this.state.themesAppliedList;
        themesAppliedList[_this.state.themeInd] = newTheme;

        _this.setState({
          themesAppliedList: themesAppliedList,
          isThemeInvalid: false,
          themeString: str
        });
      } catch (e) {
        _this.setState({
          isThemeInvalid: true,
          themeString: str
        });
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onThemeEditing", function (isFocus) {
      return function () {
        var themeString = _this.getCurrentTheme(1);

        _this.setState({
          isThemeEditing: isFocus,
          themeString: themeString
        });
      };
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onToggleSideBar", function (f) {
      _this.setState({
        isSideBarOpen: f
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onDnLoadTheme", function () {
      var uri = "data:application/json;charset=utf-8;base64,\n".concat(window.btoa(_this.getCurrentTheme(4)));
      var fileName = _this.state.themesAppliedList[_this.state.themeInd].themeFile || 'theme.json';
      var downloadTheme = document.createElement('a');
      downloadTheme.href = uri;
      downloadTheme.download = fileName;
      document.body.appendChild(downloadTheme);
      downloadTheme.click();
      document.body.removeChild(downloadTheme);
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCloneTheme", function () {
      progressInfo(_assertThisInitialized(_assertThisInitialized(_this)));
      return null; //        const themesAppliedList = this.state.themesAppliedList;
      //        const newTheme = Object.assign({}, themesAppliedList[this.state.themeInd]); // fixme:  deeper
      //        newTheme.themeName = `${themesAppliedList[this.state.themeInd].themeName} clone`;
      //        newTheme.themeFile = `${themesAppliedList[this.state.themeInd].themeFile}.clone`;
      //        const newAppliedList = themesAppliedList.slice(0, this.state.themeInd + 1)
      //            .concat(newTheme, themesAppliedList.slice(this.state.themeInd + 1));
      //        const themesNameList = genNameList(newAppliedList);
      //        logger.log(themesNameList);
      //        this.setState({ themesAppliedList: newAppliedList, themesNameList });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onCleanTheme", function () {
      progressInfo(_assertThisInitialized(_assertThisInitialized(_this)));
      return null; //        const themesAppliedList = this.state.themesAppliedList;
      //        const newTheme = {};
      //        newTheme.themeName = themesAppliedList[this.state.themeInd].themeName;
      //        newTheme.themeFile = themesAppliedList[this.state.themeInd].themeFile;
      //        themesAppliedList[this.state.themeInd] = newTheme;
      //        const themesNameList = genNameList(themesAppliedList);
      //        this.setState({ themesAppliedList, themesNameList });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getCurrentTheme", function () {
      var indent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 2;
      return beauti.js_beautify(JSON.stringify(_this.state.themesAppliedList[_this.state.themeInd]), {
        indent_size: indent,
        indent_char: ' ',
        eol: '\n',
        end_with_newline: true
      });
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dataChannelSend", function (data) {
      if (_this.isChannelData) return false; // this.props.channel.emit(EVENT_ID_BACK, data);

      try {
        var theme = _this.state.themesRenderedList[_this.state.themeInd];

        _this.props.store.send(theme);

        return true;
      } catch (err) {
        return false;
      }
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "queryFetch", function () {
      var themeInd = _this.props.api.getQueryParam('theme-ind');

      var isSideBarOpen = _this.props.api.getQueryParam('theme-sidebar');

      var isFullTheme = _this.props.api.getQueryParam('theme-full');

      var data = JSON.parse(JSON.stringify({
        themeInd: themeInd,
        isSideBarOpen: isSideBarOpen,
        isFullTheme: isFullTheme
      }));
      var keys = Object.keys(data);
      keys.forEach(function (val) {
        data[val] = JSON.parse(data[val]);
      });
      return data;
    });

    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "querySet", function (state) {
      if (state.isReady) {
        var themeInd = state.themeInd,
            isSideBarOpen = state.isSideBarOpen,
            isFullTheme = state.isFullTheme;
        var queryParams = {
          'theme-ind': themeInd,
          'theme-sidebar': isSideBarOpen,
          'theme-full': isFullTheme
        };

        _this.props.api.setQueryParams(queryParams);
      }
    });

    _this.state = {
      isReady: false,
      isThemeInvalid: false,
      isThemeEditing: false,
      themeString: '',
      themeInd: 0
    };
    _this.isChannelData = false; // future: get from state with own theme ind

    _this.muiTheme = lightBaseTheme;
    return _this;
  }

  _createClass(PanelContainer, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      // this.props.channel.on(EVENT_ID_INIT, this.onInitChannel);
      // this.props.channel.on(EVENT_ID_DATA, this.onDataChannel);
      this.props.store.connect();
      this.props.store.onData(this.onInitChannel);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      //        if (!this.isChannelData) this.props.channel.emit(EVENT_ID_DATA, nextState);
      this.querySet(this.state);
      this.dataChannelSend(this.state);
      this.isChannelData = false;
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.props.store.disconnect(); // this.props.channel.removeListener(EVENT_ID_INIT, this.onInitChannel);
      // this.props.channel.removeListener(EVENT_ID_DATA, this.onDataChannel);
    }
  }, {
    key: "render",
    value: function render() {
      return this.state.isReady ? _react.default.createElement(_styles.MuiThemeProvider, {
        theme: this.muiTheme
      }, _react.default.createElement(_AddonPanel.default, {
        themesNameList: this.state.themesNameList,
        defautThemeInd: this.state.themeInd,
        isSideBarOpen: this.state.isSideBarOpen,
        onThemeSelect: this.onThemeSelect,
        onToggleSideBar: this.onToggleSideBar,
        themeJSON: this.state.isThemeInvalid || this.state.isThemeEditing ? this.state.themeString : this.getCurrentTheme(1),
        isThemeInvalid: this.state.isThemeInvalid,
        onThemeEditing: this.onThemeEditing,
        onChangeTheme: this.onChangeTheme,
        onDnLoadTheme: this.onDnLoadTheme,
        onCloneTheme: this.onCloneTheme,
        onCleanTheme: this.onCleanTheme
      })) : _react.default.createElement("div", {
        style: {
          padding: 16,
          fontFamily: '"San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif',
          color: 'rgb(68, 68, 68)'
        }
      }, "waiting for muiTheme decorator...");
    }
  }]);

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

_defineProperty(PanelContainer, "propTypes", {
  store: _propTypes.default.shape().isRequired,
  api: _propTypes.default.shape().isRequired
});

var _default = (0, _WithChannel.default)({
  EVENT_ID_INIT: _config.EVENT_ID_INIT,
  EVENT_ID_DATA: _config.EVENT_ID_DATA,
  EVENT_ID_BACK: _config.EVENT_ID_BACK
})(PanelContainer);

exports.default = _default;