@pie-lib/config-ui 11.10.0-beta.2 → 11.10.0-beta.4

package/lib/inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/inputs.jsx"],"names":["InputTypes","classes","PropTypes","object","isRequired","className","string","label","checked","bool","onChange","func","disabled","error","RawInputSwitch","switchRoot","propTypes","InputSwitch","justifyContent","transform","RawInputCheckbox","props","checkboxRoot","customColor","RawInputRadio","radioRoot","InputCheckbox","theme","color","palette","main","tertiary","InputRadio"],"mappings":"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","sourcesContent":["import Checkbox from '@material-ui/core/Checkbox';\nimport Radio from '@material-ui/core/Radio';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport Switch from '@material-ui/core/Switch';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\n\nconst InputTypes = {\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  label: PropTypes.string,\n  checked: PropTypes.bool,\n  onChange: PropTypes.func,\n  disabled: PropTypes.bool,\n  error: PropTypes.string,\n};\n\nconst RawInputSwitch = ({ classes, className, label, checked, onChange }) => {\n  return (\n    <InputContainer className={className} label={label}>\n      <Switch className={classes.switchRoot} checked={checked} onChange={onChange} aria-label={label} />\n    </InputContainer>\n  );\n};\n\nRawInputSwitch.propTypes = { ...InputTypes };\n\nconst InputSwitch = withStyles({\n  switchRoot: {\n    justifyContent: 'inherit',\n    transform: 'translate(-20%, 20%)',\n  },\n})(RawInputSwitch);\n\nconst RawInputCheckbox = (props) => {\n  const { classes, className, label, checked, onChange, disabled, error } = props;\n\n  return (\n    <InputContainer className={className} label={label}>\n      <Checkbox\n        className={classNames(classes.checkboxRoot, classes.customColor, error && classes.error)}\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n        aria-label={label}\n      />\n    </InputContainer>\n  );\n};\n\nRawInputCheckbox.propTypes = { ...InputTypes };\n\nconst RawInputRadio = (props) => {\n  const { classes, className, label, checked, onChange, disabled, error } = props;\n\n  return (\n    <InputContainer className={className} label={label}>\n      <Radio\n        className={classNames(classes.radioRoot, classes.customColor, error && classes.error)}\n        disabled={disabled}\n        checked={checked}\n        onChange={onChange}\n        aria-label={label}\n      />\n    </InputContainer>\n  );\n};\n\nRawInputRadio.propTypes = { ...InputTypes };\n\nconst InputCheckbox = withStyles((theme) => ({\n  checkboxRoot: {\n    transform: 'translate(-25%, 20%)',\n  },\n  error: {\n    color: theme.palette.error.main,\n  },\n  customColor: {\n    color: `${color.tertiary()} !important`,\n  },\n}))(RawInputCheckbox);\n\nconst InputRadio = withStyles((theme) => ({\n  radioRoot: {\n    transform: 'translate(-20%, 20%)',\n  },\n  error: {\n    color: theme.palette.error.main,\n  },\n  customColor: {\n    color: `${color.tertiary()} !important`,\n  },\n}))(RawInputRadio);\n\nexport { InputSwitch, InputCheckbox, InputRadio };\n"],"file":"inputs.js"}

package/lib/langs.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RawLangs = exports.LanguageControls = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
+
+var _InputLabel = _interopRequireDefault(require("@material-ui/core/InputLabel"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var log = (0, _debug["default"])('pie-elements:config-ui:langs');
+
+var styles = function styles(theme) {
+  return {
+    root: {
+      flexDirection: 'column',
+      alignItems: 'start',
+      display: 'flex',
+      position: 'relative',
+      paddingTop: '0px',
+      paddingRight: '0px'
+    },
+    formControl: {
+      position: 'initial'
+    },
+    inputLabel: {
+      paddingBottom: theme.spacing.unit
+    }
+  };
+};
+
+var RawLangs = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawLangs, _React$Component);
+
+  var _super = _createSuper(RawLangs);
+
+  function RawLangs(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RawLangs);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "choose", function (event) {
+      log('[choose] event: ', event);
+
+      if (_this.props.onChange) {
+        _this.props.onChange(event.target.value);
+      }
+    });
+    _this.uid = props.uid || (Math.random() * 10000).toFixed();
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RawLangs, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          langs = _this$props.langs,
+          selected = _this$props.selected,
+          label = _this$props.label,
+          classes = _this$props.classes;
+      log('[render] selected:', selected);
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.root
+      }, /*#__PURE__*/_react["default"].createElement(_FormControl["default"], {
+        className: classes.formControl
+      }, /*#__PURE__*/_react["default"].createElement(_InputLabel["default"], {
+        className: classes.inputLabel,
+        htmlFor: this.uid
+      }, label), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        value: selected,
+        onChange: this.choose,
+        input: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
+          id: this.uid
+        })
+      }, langs.map(function (l, index) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: index,
+          value: l
+        }, l);
+      }))));
+    }
+  }]);
+  return RawLangs;
+}(_react["default"].Component);
+
+exports.RawLangs = RawLangs;
+(0, _defineProperty2["default"])(RawLangs, "propTypes", {
+  onChange: _propTypes["default"].func,
+  langs: _propTypes["default"].array,
+  selected: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  classes: _propTypes["default"].object.isRequired,
+  uid: _propTypes["default"].string
+});
+var Langs = (0, _styles.withStyles)(styles, {
+  name: 'Langs'
+})(RawLangs);
+var _default = Langs;
+exports["default"] = _default;
+var LanguageControls = (0, _styles.withStyles)({
+  languageControls: {
+    display: 'grid',
+    gridAutoFlow: 'column',
+    gridAutoColumns: '1fr',
+    gridGap: '8px'
+  }
+})(function (_ref) {
+  var classes = _ref.classes,
+      langs = _ref.langs,
+      activeLang = _ref.activeLang,
+      defaultLang = _ref.defaultLang,
+      onActiveLangChange = _ref.onActiveLangChange,
+      onDefaultLangChange = _ref.onDefaultLangChange,
+      className = _ref.className;
+  var names = (0, _classnames["default"])(classes.languageControls, className);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: names
+  }, /*#__PURE__*/_react["default"].createElement(Langs, {
+    label: "Choose language to edit",
+    langs: langs,
+    selected: activeLang,
+    onChange: function onChange(l) {
+      return onActiveLangChange(l);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(Langs, {
+    label: "Default language",
+    langs: langs,
+    selected: defaultLang,
+    onChange: function onChange(l) {
+      return onDefaultLangChange(l);
+    }
+  }));
+});
+exports.LanguageControls = LanguageControls;
+LanguageControls.propTypes = {
+  langs: _propTypes["default"].array,
+  activeLang: _propTypes["default"].string.isRequired,
+  defaultLang: _propTypes["default"].string.isRequired,
+  onActiveLangChange: _propTypes["default"].func.isRequired,
+  onDefaultLangChange: _propTypes["default"].func.isRequired
+};
+//# sourceMappingURL=langs.js.map

package/lib/langs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/langs.jsx"],"names":["log","styles","theme","root","flexDirection","alignItems","display","position","paddingTop","paddingRight","formControl","inputLabel","paddingBottom","spacing","unit","RawLangs","props","event","onChange","target","value","uid","Math","random","toFixed","langs","selected","label","classes","choose","map","l","index","React","Component","PropTypes","func","array","string","object","isRequired","Langs","name","LanguageControls","languageControls","gridAutoFlow","gridAutoColumns","gridGap","activeLang","defaultLang","onActiveLangChange","onDefaultLangChange","className","names","propTypes"],"mappings":"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","sourcesContent":["import Input from '@material-ui/core/Input';\nimport InputLabel from '@material-ui/core/InputLabel';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport FormControl from '@material-ui/core/FormControl';\nimport debug from 'debug';\n\nconst log = debug('pie-elements:config-ui:langs');\n\nconst styles = (theme) => ({\n  root: {\n    flexDirection: 'column',\n    alignItems: 'start',\n    display: 'flex',\n    position: 'relative',\n    paddingTop: '0px',\n    paddingRight: '0px',\n  },\n  formControl: {\n    position: 'initial',\n  },\n  inputLabel: {\n    paddingBottom: theme.spacing.unit,\n  },\n});\n\nexport class RawLangs extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    langs: PropTypes.array,\n    selected: PropTypes.string,\n    label: PropTypes.string,\n    classes: PropTypes.object.isRequired,\n    uid: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n    this.uid = props.uid || (Math.random() * 10000).toFixed();\n  }\n\n  choose = (event) => {\n    log('[choose] event: ', event);\n\n    if (this.props.onChange) {\n      this.props.onChange(event.target.value);\n    }\n  };\n\n  render() {\n    let { langs, selected, label, classes } = this.props;\n\n    log('[render] selected:', selected);\n\n    return (\n      <div className={classes.root}>\n        <FormControl className={classes.formControl}>\n          <InputLabel className={classes.inputLabel} htmlFor={this.uid}>\n            {label}\n          </InputLabel>\n\n          <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>\n            {langs.map((l, index) => (\n              <MenuItem key={index} value={l}>\n                {l}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </div>\n    );\n  }\n}\n\nconst Langs = withStyles(styles, { name: 'Langs' })(RawLangs);\nexport default Langs;\n\nexport const LanguageControls = withStyles({\n  languageControls: {\n    display: 'grid',\n    gridAutoFlow: 'column',\n    gridAutoColumns: '1fr',\n    gridGap: '8px',\n  },\n})(({ classes, langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {\n  const names = classNames(classes.languageControls, className);\n\n  return (\n    <div className={names}>\n      <Langs\n        label=\"Choose language to edit\"\n        langs={langs}\n        selected={activeLang}\n        onChange={(l) => onActiveLangChange(l)}\n      />\n      <Langs label=\"Default language\" langs={langs} selected={defaultLang} onChange={(l) => onDefaultLangChange(l)} />\n    </div>\n  );\n});\n\nLanguageControls.propTypes = {\n  langs: PropTypes.array,\n  activeLang: PropTypes.string.isRequired,\n  defaultLang: PropTypes.string.isRequired,\n  onActiveLangChange: PropTypes.func.isRequired,\n  onDefaultLangChange: PropTypes.func.isRequired,\n};\n"],"file":"langs.js"}

package/lib/layout/config-layout.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactMeasure = _interopRequireWildcard(require("react-measure"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _layoutContents = _interopRequireDefault(require("./layout-contents"));
+
+var _settingsBox = _interopRequireDefault(require("./settings-box"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var styles = {
+  extraCSSRules: {}
+};
+
+var MeasuredConfigLayout = /*#__PURE__*/function (_AppendCSSRules) {
+  (0, _inherits2["default"])(MeasuredConfigLayout, _AppendCSSRules);
+
+  var _super = _createSuper(MeasuredConfigLayout);
+
+  function MeasuredConfigLayout() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, MeasuredConfigLayout);
+
+    for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {
+      props[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResize", function (contentRect) {
+      var bounds = contentRect.bounds;
+      var _this$props = _this.props,
+          sidePanelMinWidth = _this$props.sidePanelMinWidth,
+          dimensions = _this$props.dimensions;
+
+      var _ref = dimensions || {},
+          maxWidth = _ref.maxWidth;
+
+      var layoutMode = bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
+
+      _this.setState({
+        layoutMode: layoutMode
+      });
+    });
+    _this.state = {
+      layoutMode: undefined
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(MeasuredConfigLayout, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return /*#__PURE__*/_react["default"].createElement(_reactMeasure["default"], {
+        bounds: true,
+        onResize: this.onResize
+      }, function (_ref2) {
+        var measureRef = _ref2.measureRef;
+        var _this2$props = _this2.props,
+            children = _this2$props.children,
+            settings = _this2$props.settings,
+            hideSettings = _this2$props.hideSettings,
+            dimensions = _this2$props.dimensions,
+            classes = _this2$props.classes;
+        var layoutMode = _this2.state.layoutMode;
+        var settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/_react["default"].createElement(_settingsBox["default"], {
+          className: "settings-box"
+        }, settings) : settings;
+        var secondaryContent = hideSettings ? null : settingsPanel;
+        var finalClass = (0, _classnames["default"])('main-container', classes.extraCSSRules);
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          ref: measureRef,
+          className: finalClass
+        }, /*#__PURE__*/_react["default"].createElement(_layoutContents["default"], {
+          mode: layoutMode,
+          secondary: secondaryContent,
+          dimensions: dimensions
+        }, children));
+      });
+    }
+  }]);
+  return MeasuredConfigLayout;
+}(_renderUi.AppendCSSRules);
+
+(0, _defineProperty2["default"])(MeasuredConfigLayout, "propTypes", {
+  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].element), _propTypes["default"].element]),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].object,
+  dimensions: _propTypes["default"].object,
+  settings: _propTypes["default"].element,
+  sidePanelMinWidth: _propTypes["default"].number,
+  hideSettings: _propTypes["default"].bool
+});
+(0, _defineProperty2["default"])(MeasuredConfigLayout, "defaultProps", {
+  sidePanelMinWidth: 1135,
+  hideSettings: false,
+  dimensions: {}
+});
+var ConfigLayout = (0, _styles.withStyles)(styles)((0, _reactMeasure.withContentRect)('bounds')(MeasuredConfigLayout));
+var _default = ConfigLayout;
+exports["default"] = _default;
+//# sourceMappingURL=config-layout.js.map

package/lib/layout/config-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/layout/config-layout.jsx"],"names":["styles","extraCSSRules","MeasuredConfigLayout","props","contentRect","bounds","sidePanelMinWidth","dimensions","maxWidth","layoutMode","width","setState","state","undefined","onResize","measureRef","children","settings","hideSettings","classes","settingsPanel","secondaryContent","finalClass","AppendCSSRules","PropTypes","oneOfType","string","arrayOf","element","className","object","number","bool","ConfigLayout"],"mappings":"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","sourcesContent":["import React from 'react';\nimport Measure from 'react-measure';\nimport { withContentRect } from 'react-measure';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport LayoutContents from './layout-contents';\nimport SettingsBox from './settings-box';\nimport { AppendCSSRules } from '@pie-lib/render-ui';\n\nconst styles = {\n  extraCSSRules: {},\n};\n\nclass MeasuredConfigLayout extends AppendCSSRules {\n  static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),\n    className: PropTypes.string,\n    classes: PropTypes.object,\n    dimensions: PropTypes.object,\n    settings: PropTypes.element,\n    sidePanelMinWidth: PropTypes.number,\n    hideSettings: PropTypes.bool,\n  };\n\n  static defaultProps = {\n    sidePanelMinWidth: 1135,\n    hideSettings: false,\n    dimensions: {},\n  };\n\n  constructor(...props) {\n    super(...props);\n    this.state = { layoutMode: undefined };\n  }\n\n  onResize = (contentRect) => {\n    const { bounds } = contentRect;\n    const { sidePanelMinWidth, dimensions } = this.props;\n    const { maxWidth } = dimensions || {};\n\n    const layoutMode =\n      bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';\n\n    this.setState({ layoutMode });\n  };\n\n  render() {\n    return (\n      <Measure bounds onResize={this.onResize}>\n        {({ measureRef }) => {\n          const { children, settings, hideSettings, dimensions, classes } = this.props;\n          const { layoutMode } = this.state;\n\n          const settingsPanel =\n            layoutMode === 'inline' ? <SettingsBox className=\"settings-box\">{settings}</SettingsBox> : settings;\n          const secondaryContent = hideSettings ? null : settingsPanel;\n          const finalClass = classNames('main-container', classes.extraCSSRules);\n\n          return (\n            <div ref={measureRef} className={finalClass}>\n              <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>\n                {children}\n              </LayoutContents>\n            </div>\n          );\n        }}\n      </Measure>\n    );\n  }\n}\n\nconst ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));\n\nexport default ConfigLayout;\n"],"file":"config-layout.js"}

package/lib/layout/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ConfigLayout", {
+  enumerable: true,
+  get: function get() {
+    return _configLayout["default"];
+  }
+});
+Object.defineProperty(exports, "LayoutContents", {
+  enumerable: true,
+  get: function get() {
+    return _layoutContents["default"];
+  }
+});
+
+var _configLayout = _interopRequireDefault(require("./config-layout"));
+
+var _layoutContents = _interopRequireDefault(require("./layout-contents"));
+//# sourceMappingURL=index.js.map

package/lib/layout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/layout/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import ConfigLayout from './config-layout';\nimport LayoutContents from './layout-contents';\n\nexport { LayoutContents, ConfigLayout };\n"],"file":"index.js"}

package/lib/layout/layout-contents.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _tabs = _interopRequireDefault(require("../tabs"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var RawLayoutContents = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawLayoutContents, _React$Component);
+
+  var _super = _createSuper(RawLayoutContents);
+
+  function RawLayoutContents() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RawLayoutContents);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getConfiguration", function () {
+      var _secondary$props, _secondary$props2, _secondary$props2$chi, _secondary$props2$chi2;
+
+      var secondary = _this.props.secondary; // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
+
+      return (secondary === null || secondary === void 0 ? void 0 : (_secondary$props = secondary.props) === null || _secondary$props === void 0 ? void 0 : _secondary$props.configuration) || (secondary === null || secondary === void 0 ? void 0 : (_secondary$props2 = secondary.props) === null || _secondary$props2 === void 0 ? void 0 : (_secondary$props2$chi = _secondary$props2.children) === null || _secondary$props2$chi === void 0 ? void 0 : (_secondary$props2$chi2 = _secondary$props2$chi.props) === null || _secondary$props2$chi2 === void 0 ? void 0 : _secondary$props2$chi2.configuration) || undefined;
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RawLayoutContents, [{
+    key: "render",
+    value: // // eslint-disable-next-line no-unused-vars
+    // componentDidUpdate(prevProps, prevState, snapshot) {
+    //   const configuration = this.getConfiguration();
+    //   const { mode } = this.props;
+    //
+    //   // promptHolder class is used to wrap up inputs:
+    //   // we don't want inputs to fill the entire scrollable container,
+    //   // but instead we want inputs to fit in the first view,
+    //   // so we calculate the maximum space inputs need
+    //   try {
+    //     if (
+    //       configuration?.maxWidth &&
+    //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
+    //         configuration?.maxWidth
+    //     ) {
+    //       document.documentElement.style.setProperty(
+    //         '--pie-prompt-holder-max-width',
+    //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
+    //       );
+    //     }
+    //   } catch (e) {
+    //     console.log(e.toString());
+    //   }
+    // }
+    function render() {
+      var _this$props = this.props,
+          mode = _this$props.mode,
+          secondary = _this$props.secondary,
+          children = _this$props.children,
+          classes = _this$props.classes,
+          dimensions = _this$props.dimensions;
+
+      var _ref = dimensions || {},
+          minHeight = _ref.minHeight,
+          minWidth = _ref.minWidth,
+          maxHeight = _ref.maxHeight,
+          maxWidth = _ref.maxWidth;
+
+      var configuration = this.getConfiguration();
+      var hasSettingsPanel = Object.entries(configuration || {}).some(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+            obj = _ref3[1];
+
+        return !!(obj !== null && obj !== void 0 && obj.settings);
+      }); // ebsr has configuration.partA and configuration.partB
+      // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
+
+      if (!hasSettingsPanel) {
+        try {
+          var _JSON$stringify, _JSON$stringify$match;
+
+          hasSettingsPanel = (_JSON$stringify = JSON.stringify(configuration)) === null || _JSON$stringify === void 0 ? void 0 : (_JSON$stringify$match = _JSON$stringify.match(/settings":true/)) === null || _JSON$stringify$match === void 0 ? void 0 : _JSON$stringify$match.length;
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.log(e.toString());
+        }
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.container,
+        style: {
+          minHeight: minHeight,
+          minWidth: minWidth,
+          maxHeight: maxHeight,
+          maxWidth: maxWidth
+        }
+      }, mode === 'inline' && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.flow, classes.contentContainer)
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.configContainer, 'design-container')
+      }, children), hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.settingsContainer, 'settings-container')
+      }, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/_react["default"].createElement(_tabs["default"], {
+        onChange: this.onTabsChange,
+        contentClassName: classes.contentContainer,
+        indicatorColor: "primary"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        title: "Design",
+        className: "design-container"
+      }, children), /*#__PURE__*/_react["default"].createElement("div", {
+        title: "Settings",
+        className: "settings-container"
+      }, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.contentContainer, 'design-container')
+      }, children));
+    }
+  }]);
+  return RawLayoutContents;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(RawLayoutContents, "propTypes", {
+  mode: _propTypes["default"].oneOf(['tabbed', 'inline']),
+  secondary: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  classes: _propTypes["default"].object,
+  dimensions: _propTypes["default"].object
+});
+
+var styles = function styles(theme) {
+  return {
+    flow: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    },
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'relative'
+    },
+    contentContainer: {
+      padding: "".concat(theme.spacing.unit * 2, "px 0")
+    },
+    configContainer: {
+      flex: '1'
+    },
+    settingsContainer: {
+      marginLeft: theme.spacing.unit * 2
+    }
+  };
+};
+
+var _default = (0, _core.withStyles)(styles)(RawLayoutContents);
+
+exports["default"] = _default;
+//# sourceMappingURL=layout-contents.js.map

package/lib/layout/layout-contents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/layout/layout-contents.jsx"],"names":["RawLayoutContents","secondary","props","configuration","children","undefined","mode","classes","dimensions","minHeight","minWidth","maxHeight","maxWidth","getConfiguration","hasSettingsPanel","Object","entries","some","obj","settings","JSON","stringify","match","length","e","console","log","toString","container","flow","contentContainer","configContainer","settingsContainer","onTabsChange","React","Component","PropTypes","oneOf","oneOfType","arrayOf","node","object","styles","theme","display","justifyContent","flexDirection","position","padding","spacing","unit","flex","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport Tabs from '../tabs';\nimport classNames from 'classnames';\n\nclass RawLayoutContents extends React.Component {\n  static propTypes = {\n    mode: PropTypes.oneOf(['tabbed', 'inline']),\n    secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n    classes: PropTypes.object,\n    dimensions: PropTypes.object,\n  };\n\n  getConfiguration = () => {\n    const { secondary } = this.props;\n    // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null\n\n    return secondary?.props?.configuration || secondary?.props?.children?.props?.configuration || undefined;\n  };\n\n  // // eslint-disable-next-line no-unused-vars\n  // componentDidUpdate(prevProps, prevState, snapshot) {\n  //   const configuration = this.getConfiguration();\n  //   const { mode } = this.props;\n  //\n  //   // promptHolder class is used to wrap up inputs:\n  //   // we don't want inputs to fill the entire scrollable container,\n  //   // but instead we want inputs to fit in the first view,\n  //   // so we calculate the maximum space inputs need\n  //   try {\n  //     if (\n  //       configuration?.maxWidth &&\n  //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==\n  //         configuration?.maxWidth\n  //     ) {\n  //       document.documentElement.style.setProperty(\n  //         '--pie-prompt-holder-max-width',\n  //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,\n  //       );\n  //     }\n  //   } catch (e) {\n  //     console.log(e.toString());\n  //   }\n  // }\n\n  render() {\n    const { mode, secondary, children, classes, dimensions } = this.props;\n    const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};\n    const configuration = this.getConfiguration();\n\n    let hasSettingsPanel = Object.entries(configuration || {}).some(([, obj]) => !!obj?.settings);\n    // ebsr has configuration.partA and configuration.partB\n    // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings\n\n    if (!hasSettingsPanel) {\n      try {\n        hasSettingsPanel = JSON.stringify(configuration)?.match(/settings\":true/)?.length;\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.log(e.toString());\n      }\n    }\n\n    return (\n      <div className={classes.container} style={{ minHeight, minWidth, maxHeight, maxWidth }}>\n        {mode === 'inline' && (\n          <div className={classnames(classes.flow, classes.contentContainer)}>\n            <div className={classnames(classes.configContainer, 'design-container')}>{children}</div>\n            {hasSettingsPanel && (\n              <div className={classnames(classes.settingsContainer, 'settings-container')}>{secondary}</div>\n            )}\n          </div>\n        )}\n\n        {mode === 'tabbed' && hasSettingsPanel && (\n          <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor=\"primary\">\n            <div title=\"Design\" className=\"design-container\">\n              {children}\n            </div>\n            <div title=\"Settings\" className=\"settings-container\">\n              {secondary}\n            </div>\n          </Tabs>\n        )}\n\n        {mode === 'tabbed' && !hasSettingsPanel && (\n          <div className={classNames(classes.contentContainer, 'design-container')}>{children}</div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  flow: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'column',\n    position: 'relative',\n  },\n  contentContainer: {\n    padding: `${theme.spacing.unit * 2}px 0`,\n  },\n  configContainer: {\n    flex: '1',\n  },\n  settingsContainer: {\n    marginLeft: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(RawLayoutContents);\n"],"file":"layout-contents.js"}