@pie-lib/config-ui 11.26.6-esmbeta.0 → 11.27.0-mui-update.0

package/lib/settings/panel.js

@@ -1,72 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Panel = 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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _get2 = _interopRequireDefault(require("lodash/get"));
-
 var _set = _interopRequireDefault(require("lodash/set"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _Input = _interopRequireDefault(require("@mui/material/Input"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _debug = _interopRequireDefault(require("debug"));
-
 var _toggle = _interopRequireDefault(require("./toggle"));
-
 var _twoChoice = require("../two-choice");
-
 var _settingsRadioLabel = _interopRequireDefault(require("./settings-radio-label"));
-
 var _numberTextField = _interopRequireDefault(require("../number-text-field"));
-
 var _checkbox = _interopRequireDefault(require("../checkbox"));
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _excluded = ["isConfigProperty"];
-
-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; } }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var log = (0, _debug["default"])('pie-lib:config-ui:settings:panel');
 var labelValue = {
   label: _propTypes["default"].string,
@@ -77,11 +44,10 @@ var baseTypes = {
   value: _propTypes["default"].string,
   onChange: _propTypes["default"].func
 };
-
 var CheckboxChoice = function CheckboxChoice(_ref) {
   var label = _ref.label,
-      value = _ref.value,
-      _onChange = _ref.onChange;
+    value = _ref.value,
+    _onChange = _ref.onChange;
   return /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
     checked: value,
     label: label,
@@ -90,21 +56,33 @@ var CheckboxChoice = function CheckboxChoice(_ref) {
     }
   });
 };
-
 CheckboxChoice.propTypes = {
   label: _propTypes["default"].string,
   value: _propTypes["default"].bool,
   onChange: _propTypes["default"].func
 };
-
-var Radio = function Radio(_ref2) {
-  var classes = _ref2.classes,
-      label = _ref2.label,
-      value = _ref2.value,
-      onChange = _ref2.onChange,
-      choices = _ref2.choices;
-  return /*#__PURE__*/_react["default"].createElement(_twoChoice.NChoice, {
-    className: classes.radioSettings,
+var StyledNChoice = (0, _styles.styled)(_twoChoice.NChoice)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    width: '100%',
+    '& > label': {
+      color: 'rgba(0, 0, 0, 0.89)',
+      transform: 'translate(0, 10px) scale(1)',
+      fontSize: '14px'
+    },
+    '& > div': {
+      marginTop: theme.spacing(2.5)
+    }
+  };
+});
+var Radio = function Radio(_ref3) {
+  var label = _ref3.label,
+    value = _ref3.value,
+    onChange = _ref3.onChange,
+    choices = _ref3.choices;
+  return /*#__PURE__*/_react["default"].createElement(StyledNChoice, {
     direction: "horizontal",
     customLabel: _settingsRadioLabel["default"],
     value: value,
@@ -113,66 +91,42 @@ var Radio = function Radio(_ref2) {
     onChange: onChange
   });
 };
-
 Radio.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   choices: _propTypes["default"].arrayOf(_propTypes["default"].shape(labelValue))
 });
-var StyledRadio = (0, _styles.withStyles)(function (theme) {
+var StyledRadio = Radio;
+var StyledLabel = (0, _styles.styled)('p')(function (_ref4) {
+  var theme = _ref4.theme;
   return {
-    radioSettings: {
-      marginTop: theme.spacing.unit / 2,
-      paddingBottom: theme.spacing.unit / 2,
-      width: '100%',
-      '& > label': {
-        color: 'rgba(0, 0, 0, 0.89)',
-        transform: 'translate(0, 10px) scale(1)',
-        fontSize: '14px'
-      },
-      '& > div': {
-        marginTop: theme.spacing.unit * 2.5
-      }
-    },
-    label: {
-      display: 'none'
-    }
+    margin: 0,
+    fontSize: theme.typography.fontSize
   };
-})(Radio);
-var Dropdown = (0, _styles.withStyles)(function (theme) {
+});
+var StyledSelect = (0, _styles.styled)(_Select["default"])(function (_ref5) {
+  var theme = _ref5.theme;
   return {
-    label: {
-      margin: 0,
-      fontSize: theme.typography.fontSize
-    },
-    wrapper: {
-      marginTop: theme.spacing.unit / 2,
-      border: '2px solid lightgrey',
-      borderRadius: '4px',
-      padding: "0 ".concat(theme.spacing.unit, "px")
-    }
+    marginTop: theme.spacing(0.5),
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: "0 ".concat(theme.spacing(1), "px")
   };
-})(function (_ref3) {
-  var classes = _ref3.classes,
-      label = _ref3.label,
-      value = _ref3.value,
-      _onChange2 = _ref3.onChange,
-      _ref3$choices = _ref3.choices,
-      choices = _ref3$choices === void 0 ? [] : _ref3$choices;
-
+});
+var Dropdown = function Dropdown(_ref6) {
+  var label = _ref6.label,
+    value = _ref6.value,
+    _onChange2 = _ref6.onChange,
+    _ref6$choices = _ref6.choices,
+    choices = _ref6$choices === void 0 ? [] : _ref6$choices;
   var getItemLabel = function getItemLabel(l) {
     return typeof l === 'string' ? l : l.label;
   };
-
   var getItemValue = function getItemValue(l) {
     return typeof l === 'string' ? l : l.value;
   };
-
-  return /*#__PURE__*/_react["default"].createElement("div", null, label && /*#__PURE__*/_react["default"].createElement("p", {
-    className: classes.label
-  }, label), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-    className: classes.wrapper,
+  return /*#__PURE__*/_react["default"].createElement("div", null, label && /*#__PURE__*/_react["default"].createElement(StyledLabel, null, label), /*#__PURE__*/_react["default"].createElement(StyledSelect, {
     value: value || choices && choices[0],
-    onChange: function onChange(_ref4) {
-      var target = _ref4.target;
+    onChange: function onChange(_ref7) {
+      var target = _ref7.target;
       return _onChange2(target.value);
     },
     input: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
@@ -185,49 +139,44 @@ var Dropdown = (0, _styles.withStyles)(function (theme) {
       value: getItemValue(l)
     }, getItemLabel(l));
   })));
-});
+};
 Dropdown.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   choices: _propTypes["default"].arrayOf(_propTypes["default"].string)
 });
-var TextField = (0, _styles.withStyles)(function (theme) {
+var StyledTypography = (0, _styles.styled)(_Typography["default"])(function (_ref8) {
+  var theme = _ref8.theme;
   return {
-    field: {
-      marginRight: theme.spacing.unit * 3,
-      marginTop: theme.spacing.unit
-    }
+    marginRight: theme.spacing(3),
+    marginTop: theme.spacing(1)
   };
-})(function (_ref5) {
-  var classes = _ref5.classes,
-      label = _ref5.label;
-  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-    className: classes.field
-  }, label);
 });
-var NumberField = (0, _styles.withStyles)(function (theme) {
+var TextField = function TextField(_ref9) {
+  var label = _ref9.label;
+  return /*#__PURE__*/_react["default"].createElement(StyledTypography, null, label);
+};
+var StyledNumberTextField = (0, _styles.styled)(_numberTextField["default"])(function (_ref0) {
+  var theme = _ref0.theme;
   return {
-    field: {
-      width: '35%',
-      marginRight: theme.spacing.unit * 3,
-      marginTop: theme.spacing.unit
-    },
-    wrapper: {
-      marginTop: theme.spacing.unit / 2,
+    width: '35%',
+    marginRight: theme.spacing(3),
+    marginTop: theme.spacing(1),
+    '& .MuiInputBase-root': {
+      marginTop: theme.spacing(0.5),
       border: '2px solid lightgrey',
       borderRadius: '4px',
-      padding: "0 ".concat(theme.spacing.unit, "px")
+      padding: "0 ".concat(theme.spacing(1), "px")
     }
   };
-})(function (_ref6) {
-  var classes = _ref6.classes,
-      label = _ref6.label,
-      value = _ref6.value,
-      _ref6$onChange = _ref6.onChange,
-      _onChange3 = _ref6$onChange === void 0 ? function () {} : _ref6$onChange,
-      suffix = _ref6.suffix,
-      min = _ref6.min,
-      max = _ref6.max;
-
-  return /*#__PURE__*/_react["default"].createElement(_numberTextField["default"], {
+});
+var NumberField = function NumberField(_ref1) {
+  var label = _ref1.label,
+    value = _ref1.value,
+    _ref1$onChange = _ref1.onChange,
+    _onChange3 = _ref1$onChange === void 0 ? function () {} : _ref1$onChange,
+    suffix = _ref1.suffix,
+    min = _ref1.min,
+    max = _ref1.max;
+  return /*#__PURE__*/_react["default"].createElement(StyledNumberTextField, {
     label: label || 'Label',
     value: value,
     max: max,
@@ -236,27 +185,22 @@ var NumberField = (0, _styles.withStyles)(function (theme) {
       return _onChange3(value);
     },
     suffix: suffix,
-    className: classes.field,
     showErrorWhenOutsideRange: true,
-    inputClassName: classes.wrapper,
-    disableUnderline: true,
-    classes: classes
+    disableUnderline: true
   });
-});
+};
 NumberField.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
-  classes: _propTypes["default"].object,
   suffix: _propTypes["default"].string,
   min: _propTypes["default"].number,
   max: _propTypes["default"].number,
   value: _propTypes["default"].number
 });
 TextField.propTypes = _objectSpread({}, baseTypes);
-
-var ToggleWrapper = function ToggleWrapper(_ref7) {
-  var disabled = _ref7.disabled,
-      label = _ref7.label,
-      value = _ref7.value,
-      onChange = _ref7.onChange;
+var ToggleWrapper = function ToggleWrapper(_ref10) {
+  var disabled = _ref10.disabled,
+    label = _ref10.label,
+    value = _ref10.value,
+    onChange = _ref10.onChange;
   return /*#__PURE__*/_react["default"].createElement(_toggle["default"], {
     label: label,
     checked: !!value,
@@ -264,7 +208,6 @@ var ToggleWrapper = function ToggleWrapper(_ref7) {
     toggle: onChange
   });
 };
-
 ToggleWrapper.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   value: _propTypes["default"].bool
 });
@@ -276,47 +219,49 @@ var tagMap = {
   checkbox: CheckboxChoice,
   textField: TextField
 };
-var Group = (0, _styles.withStyles)(function (theme) {
+var StyledGroup = (0, _styles.styled)('div')(function (_ref11) {
+  var theme = _ref11.theme;
   return {
-    group: {
-      margin: "0 0 ".concat(theme.spacing.unit * 2, "px 0")
-    },
-    groupHeader: {
-      color: '#495B8F',
-      fontSize: theme.typography.fontSize + 2,
-      fontWeight: 600,
-      marginBottom: theme.spacing.unit
-    },
-    numberFields: {
-      fontSize: theme.typography.fontSize,
-      marginBottom: 0
-    }
+    margin: "0 0 ".concat(theme.spacing(2), "px 0")
+  };
+});
+var StyledGroupHeader = (0, _styles.styled)('div')(function (_ref12) {
+  var theme = _ref12.theme;
+  return {
+    color: '#495B8F',
+    fontSize: theme.typography.fontSize + 2,
+    fontWeight: 600,
+    marginBottom: theme.spacing(1)
+  };
+});
+var StyledNumberFields = (0, _styles.styled)('p')(function (_ref13) {
+  var theme = _ref13.theme;
+  return {
+    fontSize: theme.typography.fontSize,
+    marginBottom: 0
   };
-})(function (props) {
-  var classes = props.classes,
-      model = props.model,
-      label = props.label,
-      group = props.group,
-      configuration = props.configuration,
-      _onChange4 = props.onChange;
+});
+var Group = function Group(props) {
+  var model = props.model,
+    label = props.label,
+    group = props.group,
+    configuration = props.configuration,
+    _onChange4 = props.onChange;
+
   /**
    * @param group - the group of settings
    * @param key - the key(or path) to be used to set or get from model or configuration
    * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)
    * @returns tag that corresponds to element type */
-
   var getTag = function getTag(group, key, innerKey) {
     var _get = (0, _get2["default"])(group, innerKey || key),
-        isConfigProperty = _get.isConfigProperty,
-        properties = (0, _objectWithoutProperties2["default"])(_get, _excluded);
-
+      isConfigProperty = _get.isConfigProperty,
+      properties = (0, _objectWithoutProperties2["default"])(_get, _excluded);
     var value = isConfigProperty ? (0, _get2["default"])(configuration, key) : (0, _get2["default"])(model, key);
-
     var tagProps = _objectSpread(_objectSpread({}, properties), {}, {
       key: key,
       value: value
     });
-
     var Tag = tagMap[tagProps.type];
     return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
       key: key
@@ -326,76 +271,53 @@ var Group = (0, _styles.withStyles)(function (theme) {
       }
     }));
   };
-
   var content = function content(group, key) {
     var currentGroup = group[key];
-
     if (!currentGroup) {
       return null;
     }
-
     var type = currentGroup.type,
-        label = currentGroup.label,
-        fields = currentGroup.fields,
-        choices = currentGroup.choices;
-
+      label = currentGroup.label,
+      fields = currentGroup.fields,
+      choices = currentGroup.choices;
     if (type === 'numberFields') {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: "numberField-".concat(label)
-      }, /*#__PURE__*/_react["default"].createElement("p", {
-        className: classes.numberFields
-      }, label), Object.keys(fields).map(function (fieldKey) {
+      }, /*#__PURE__*/_react["default"].createElement(StyledNumberFields, null, label), Object.keys(fields).map(function (fieldKey) {
         return getTag(group, "".concat(key, ".").concat(fieldKey), "".concat(key, ".fields.").concat(fieldKey));
       }));
     }
-
     if (type === 'checkboxes') {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: "checkbox-".concat(label)
       }, /*#__PURE__*/_react["default"].createElement("p", null, label), Object.keys(choices).map(function (choiceKey) {
         return getTag(group, "".concat(key, ".").concat(choiceKey), "".concat(key, ".choices.").concat(choiceKey));
       }));
-    } // if type is toggle, radio, dropdown, numberField or numberText
-
+    }
 
+    // if type is toggle, radio, dropdown, numberField or numberText
     return getTag(group, key);
   };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.group
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.groupHeader
-  }, label), Object.keys(group).map(function (key) {
+  return /*#__PURE__*/_react["default"].createElement(StyledGroup, null, /*#__PURE__*/_react["default"].createElement(StyledGroupHeader, null, label), Object.keys(group).map(function (key) {
     return content(group, key);
   }));
-});
-
-var Panel = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Panel, _React$Component);
-
-  var _super = _createSuper(Panel);
-
+};
+var Panel = exports.Panel = /*#__PURE__*/function (_React$Component) {
   function Panel() {
     var _this;
-
     (0, _classCallCheck2["default"])(this, Panel);
-
     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), "change", function (key, value) {
+    _this = _callSuper(this, Panel, [].concat(args));
+    (0, _defineProperty2["default"])(_this, "change", function (key, value) {
       var isConfigProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       log('[changeModel]', key, value);
       var _this$props = _this.props,
-          onChangeModel = _this$props.onChangeModel,
-          onChangeConfiguration = _this$props.onChangeConfiguration;
-
+        onChangeModel = _this$props.onChangeModel,
+        onChangeConfiguration = _this$props.onChangeConfiguration;
       var model = _objectSpread({}, _this.props.model);
-
       var configuration = _objectSpread({}, _this.props.configuration);
-
       if (isConfigProperty) {
         (0, _set["default"])(configuration, key, value);
         onChangeConfiguration(configuration, key);
@@ -406,26 +328,23 @@ var Panel = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
-  (0, _createClass2["default"])(Panel, [{
+  (0, _inherits2["default"])(Panel, _React$Component);
+  return (0, _createClass2["default"])(Panel, [{
     key: "render",
     value: function render() {
       var _this2 = this;
-
       var _this$props2 = this.props,
-          groups = _this$props2.groups,
-          model = _this$props2.model,
-          configuration = _this$props2.configuration,
-          modal = _this$props2.modal;
+        groups = _this$props2.groups,
+        model = _this$props2.model,
+        configuration = _this$props2.configuration,
+        modal = _this$props2.modal;
       log('render:', model);
       var renderedGroups = Object.keys(groups || {}).map(function (group) {
-        var showGroup = Object.entries(groups[group]).some(function (_ref8) {
-          var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
-              propVal = _ref9[1];
-
+        var showGroup = Object.entries(groups[group]).some(function (_ref14) {
+          var _ref15 = (0, _slicedToArray2["default"])(_ref14, 2),
+            propVal = _ref15[1];
           return !!propVal;
         });
-
         if (showGroup) {
           return /*#__PURE__*/_react["default"].createElement(Group, {
             label: group,
@@ -436,16 +355,12 @@ var Panel = /*#__PURE__*/function (_React$Component) {
             onChange: _this2.change
           });
         }
-
         return null;
       });
       return /*#__PURE__*/_react["default"].createElement("div", null, renderedGroups, modal);
     }
   }]);
-  return Panel;
 }(_react["default"].Component);
-
-exports.Panel = Panel;
 (0, _defineProperty2["default"])(Panel, "propTypes", {
   model: _propTypes["default"].object,
   configuration: _propTypes["default"].object,
@@ -458,6 +373,5 @@ exports.Panel = Panel;
   onChangeModel: function onChangeModel() {},
   onChangeConfiguration: function onChangeConfiguration() {}
 });
-var _default = Panel;
-exports["default"] = _default;
+var _default = exports["default"] = Panel;
 //# sourceMappingURL=panel.js.map