storybook-addon-material-ui/dist/components/ThemeSideBar.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 _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _ContentCopy = _interopRequireDefault(require("@material-ui/icons/ContentCopy"));

var _SwitchCamera = _interopRequireDefault(require("@material-ui/icons/SwitchCamera"));

var _SclToggle = _interopRequireDefault(require("../material-desktop/SclToggle"));

var _SvgButton = _interopRequireDefault(require("../material-desktop/SvgButton"));

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

var _ThemePropBlock = _interopRequireDefault(require("./ThemePropBlock"));

var _Utils = require("../Utils");

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 _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; }

var BAR_WIDTH = 400;
var propTypes = {
  open: _propTypes.default.bool.isRequired,
  themeName: _propTypes.default.string.isRequired,
  theme: _propTypes.default.object.isRequired,
  muiTheme: _propTypes.default.object.isRequired,
  fullTheme: _propTypes.default.func.isRequired,
  shouldComponentUpdate: _propTypes.default.bool.isRequired,
  shouldShowData: _propTypes.default.bool.isRequired
};

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

  function ThemeSideBar(props) {
    var _this;

    _classCallCheck(this, ThemeSideBar);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ThemeSideBar).call(this, props));
    _this.state = {
      selectedTable: '',
      selectedProp: '',
      selectedVal: '',
      isSelectedStyleObj: true
    };
    _this.clipString = _this.clipString.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.onSelect = _this.onSelect.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.onSwitchStyleObj = _this.onSwitchStyleObj.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    _this.onCopy = _this.onCopy.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  _createClass(ThemeSideBar, [{
    key: "shouldComponentUpdate",
    value: function shouldComponentUpdate(nextProps, nextState) {
      // fixme shouldComponentUpdate - remove
      return nextProps.shouldComponentUpdate;
    }
  }, {
    key: "onSelect",
    value: function onSelect(sel) {
      this.setState(sel);
    }
  }, {
    key: "onSwitchStyleObj",
    value: function onSwitchStyleObj() {
      var isObj = this.state.isSelectedStyleObj;
      this.setState({
        isSelectedStyleObj: !isObj
      });
    }
  }, {
    key: "onCopy",
    value: function onCopy() {
      var text = this.clipString();
      (0, _Utils.copyToClipboardThis)(text);
    }
  }, {
    key: "clipString",
    value: function clipString() {
      var table = this.state.selectedTable;
      var prop = this.state.selectedProp;
      var val = this.state.selectedVal;
      var isObj = this.state.isSelectedStyleObj;
      var strTbl = table;
      var strVal = isObj ? "".concat(prop, ": ").concat(val, ",") : "".concat(table, ".").concat(prop, " = ").concat(val, ";");
      return prop ? strVal : strTbl;
    }
  }, {
    key: "renderContent",
    value: function renderContent() {
      var _this2 = this;

      var palette = this.context.muiTheme.palette;
      var styleHR = {
        borderBottom: "solid ".concat(palette.borderColor, " 1px")
      };
      var blockStyle = {
        width: 21,
        height: 21,
        marginLeft: 4,
        border: "solid 1px ".concat(palette.borderColor),
        backgroundColor: 'rgba(0, 0, 0, 0)',
        cursor: 'pointer'
      };
      return _react.default.createElement("div", {
        className: "".concat(_.CSS_CLASS, "-theme_sidebar-content"),
        style: {
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'stretch'
        }
      }, _react.default.createElement("div", {
        style: {
          paddingLeft: 3,
          paddingBottom: 6
        }
      }, _react.default.createElement(_Paper.default, {
        style: {
          paddingLeft: 16,
          paddingRight: 8,
          paddingTop: 8
        }
      }, _react.default.createElement("h3", {
        style: {
          margin: 0,
          marginBottom: 4,
          color: palette.secondaryTextColor,
          fontSize: 16
        }
      }, "".concat(this.props.themeName, " properties")), _react.default.createElement("div", {
        style: styleHR
      }), _react.default.createElement("div", {
        style: {
          marginTop: 8,
          display: 'flex',
          alignItems: 'center',
          fontSize: 14,
          color: palette.secondaryTextColor
        }
      }, _react.default.createElement("div", {
        style: {
          color: !this.props.fullTheme() ? palette.textColor : ''
        }
      }, "Theme Settings"), _react.default.createElement(_SclToggle.default, {
        label: "" // labelPosition="right"
        ,
        labelStyle: this.toggleHeadStyle,
        toggled: this.props.fullTheme(),
        onToggle: function onToggle() {
          return _this2.props.fullTheme(!_this2.props.fullTheme());
        }
      }), _react.default.createElement("div", {
        style: {
          color: this.props.fullTheme() ? palette.textColor : ''
        }
      }, "Full Settings")), _react.default.createElement("div", {
        style: {
          paddingBottom: 8,
          paddingRight: 8
        }
      }, _react.default.createElement("div", {
        style: {
          marginTop: 8,
          //                      paddingBottom: 8,
          //                        padding: 2,
          width: '100%',
          height: 24,
          display: 'flex',
          alignItems: 'center',
          border: '1px grey solid',
          borderColor: palette.borderColor,
          backgroundColor: 'rgba(128, 128, 128, 0.1)'
        }
      }, _react.default.createElement("input", {
        type: "text",
        onChange: null,
        value: this.clipString(),
        title: 'click to copy to clipboard',
        disabled: true,
        style: {
          width: '100%',
          padding: 2,
          margin: 0,
          border: 'none',
          backgroundColor: 'rgba(0, 0, 0, 0)',
          color: palette.secondaryTextColor,
          cursor: 'text'
        }
      }), _react.default.createElement(_SvgButton.default, {
        icon: _react.default.createElement(_ContentCopy.default, null),
        tooltip: "Copy to clipboard",
        width: 48,
        onTouchTap: this.onCopy
      }), _react.default.createElement("div", {
        style: {
          width: 4
        }
      }), _react.default.createElement(_SvgButton.default, {
        icon: _react.default.createElement(_SwitchCamera.default, null),
        tooltip: "switch style",
        width: 48,
        onTouchTap: this.onSwitchStyleObj
      }))))), this.props.shouldShowData ? themesList(this.props.fullTheme() ? this.props.muiTheme : this.props.theme, this.props, this.onSelect) : null);
    }
  }, {
    key: "render",
    value: function render() {
      //        const barWidth = this.props.open ? BAR_WIDTH : 0; // fixme BAR_WIDTH
      return _react.default.createElement("div", {
        className: "".concat(_.CSS_CLASS, "-theme_sidebar"),
        style: {
          width: '100%',
          height: '100%'
        }
      }, this.props.open ? this.renderContent() : null);
    }
  }]);

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

exports.default = ThemeSideBar;
ThemeSideBar.propTypes = propTypes;
ThemeSideBar.contextTypes = {
  muiTheme: _propTypes.default.object.isRequired
};

function forTable(tableTame, objListFunc) {
  return function (val) {
    var objList = objListFunc();
    var obj = objList[tableTame];

    if (val == undefined) {
      return obj;
    }

    objList[tableTame] = val;
    objListFunc(objList);
    return val;
  };
}

function themesList(themeObj, _props, onSelect) {
  var onThemeTableOverride = function onThemeTableOverride(tableName) {
    return function (propName, value) {
      var overTheme = {};

      if (tableName === 'miscellaneous') {
        overTheme[propName] = value;

        _props.onThemeOverride(overTheme);

        return;
      }

      overTheme[tableName] = {};
      overTheme[tableName][propName] = value;

      _props.onThemeOverride(overTheme);
    };
  };

  var themePropTable = function themePropTable(tableName, table) {
    return _react.default.createElement(_ThemePropBlock.default, {
      key: tableName,
      settingsObj: table,
      settingsName: tableName,
      open: forTable(tableName, _props.collapseList),
      override: forTable(tableName, _props.themesOverrideList),
      onThemeTableOverride: onThemeTableOverride(tableName),
      onSelect: onSelect
    });
  };

  var keyList = Object.keys(themeObj);
  var strList = {};
  keyList.forEach(function (val) {
    if (typeof themeObj[val] === 'string') {
      strList[val] = themeObj[val];
    }
  });
  var strListNode = themePropTable('miscellaneous', strList);
  var paletteList = themeObj.palette ? themePropTable('palette', themeObj.palette) : _react.default.createElement("div", null, " ", 'No palette here', " ");
  var tablesListObj = keyList.map(function (val) {
    if (_typeof(themeObj[val]) === 'object' && val !== 'palette') {
      return themePropTable(val, themeObj[val]);
    }

    return null;
  });
  var scrollStyle = {
    height: '100%',
    overflowY: 'scroll'
  };
  return _react.default.createElement("div", {
    className: "".concat(_.CSS_CLASS, "-theme_sidebar-tables"),
    style: {
      height: 100,
      flexGrow: 1,
      flexShrink: 1
    }
  }, _react.default.createElement("div", {
    className: "".concat(_.CSS_CLASS, "-theme_sidebar-tables-scroll"),
    style: scrollStyle
  }, _react.default.createElement("div", {
    style: {
      paddingLeft: 3,
      paddingRight: 12
    }
  }, _react.default.createElement("div", {
    style: {
      backgroundColor: 'rgba(128, 128, 128, 0.04)'
    }
  }, paletteList, tablesListObj, strListNode, _react.default.createElement("div", {
    style: {
      height: 16
    }
  })))));
}