@pie-lib/config-ui 11.30.0-mui-update.0 → 11.30.1-beta-1

package/lib/settings/panel.js

@@ -1,39 +1,72 @@
 "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("@mui/material/styles");
+
+var _styles = require("@material-ui/core/styles");
+
 var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _set = _interopRequireDefault(require("lodash/set"));
-var _Select = _interopRequireDefault(require("@mui/material/Select"));
-var _Input = _interopRequireDefault(require("@mui/material/Input"));
-var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+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 _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("@mui/material/Typography"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
 var _excluded = ["isConfigProperty"];
-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; }
+
+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; }
+
 var log = (0, _debug["default"])('pie-lib:config-ui:settings:panel');
 var labelValue = {
   label: _propTypes["default"].string,
@@ -44,10 +77,11 @@ 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,
@@ -56,33 +90,21 @@ var CheckboxChoice = function CheckboxChoice(_ref) {
     }
   });
 };
+
 CheckboxChoice.propTypes = {
   label: _propTypes["default"].string,
   value: _propTypes["default"].bool,
   onChange: _propTypes["default"].func
 };
-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, {
+
+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,
     direction: "horizontal",
     customLabel: _settingsRadioLabel["default"],
     value: value,
@@ -91,42 +113,66 @@ var Radio = function Radio(_ref3) {
     onChange: onChange
   });
 };
+
 Radio.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   choices: _propTypes["default"].arrayOf(_propTypes["default"].shape(labelValue))
 });
-var StyledRadio = Radio;
-var StyledLabel = (0, _styles.styled)('p')(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledRadio = (0, _styles.withStyles)(function (theme) {
   return {
-    margin: 0,
-    fontSize: theme.typography.fontSize
+    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'
+    }
   };
-});
-var StyledSelect = (0, _styles.styled)(_Select["default"])(function (_ref5) {
-  var theme = _ref5.theme;
+})(Radio);
+var Dropdown = (0, _styles.withStyles)(function (theme) {
   return {
-    marginTop: theme.spacing(0.5),
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: "0 ".concat(theme.spacing(1), "px")
+    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")
+    }
   };
-});
-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;
+})(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 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(StyledLabel, null, label), /*#__PURE__*/_react["default"].createElement(StyledSelect, {
+
+  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,
     value: value || choices && choices[0],
-    onChange: function onChange(_ref7) {
-      var target = _ref7.target;
+    onChange: function onChange(_ref4) {
+      var target = _ref4.target;
       return _onChange2(target.value);
     },
     input: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
@@ -139,44 +185,49 @@ var Dropdown = function Dropdown(_ref6) {
       value: getItemValue(l)
     }, getItemLabel(l));
   })));
-};
+});
 Dropdown.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   choices: _propTypes["default"].arrayOf(_propTypes["default"].string)
 });
-var StyledTypography = (0, _styles.styled)(_Typography["default"])(function (_ref8) {
-  var theme = _ref8.theme;
+var TextField = (0, _styles.withStyles)(function (theme) {
   return {
-    marginRight: theme.spacing(3),
-    marginTop: theme.spacing(1)
+    field: {
+      marginRight: theme.spacing.unit * 3,
+      marginTop: theme.spacing.unit
+    }
   };
+})(function (_ref5) {
+  var classes = _ref5.classes,
+      label = _ref5.label;
+  return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    className: classes.field
+  }, label);
 });
-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;
+var NumberField = (0, _styles.withStyles)(function (theme) {
   return {
-    width: '35%',
-    marginRight: theme.spacing(3),
-    marginTop: theme.spacing(1),
-    '& .MuiInputBase-root': {
-      marginTop: theme.spacing(0.5),
+    field: {
+      width: '35%',
+      marginRight: theme.spacing.unit * 3,
+      marginTop: theme.spacing.unit
+    },
+    wrapper: {
+      marginTop: theme.spacing.unit / 2,
       border: '2px solid lightgrey',
       borderRadius: '4px',
-      padding: "0 ".concat(theme.spacing(1), "px")
+      padding: "0 ".concat(theme.spacing.unit, "px")
     }
   };
-});
-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, {
+})(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"], {
     label: label || 'Label',
     value: value,
     max: max,
@@ -185,22 +236,27 @@ var NumberField = function NumberField(_ref1) {
       return _onChange3(value);
     },
     suffix: suffix,
+    className: classes.field,
     showErrorWhenOutsideRange: true,
-    disableUnderline: true
+    inputClassName: classes.wrapper,
+    disableUnderline: true,
+    classes: classes
   });
-};
+});
 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(_ref10) {
-  var disabled = _ref10.disabled,
-    label = _ref10.label,
-    value = _ref10.value,
-    onChange = _ref10.onChange;
+
+var ToggleWrapper = function ToggleWrapper(_ref7) {
+  var disabled = _ref7.disabled,
+      label = _ref7.label,
+      value = _ref7.value,
+      onChange = _ref7.onChange;
   return /*#__PURE__*/_react["default"].createElement(_toggle["default"], {
     label: label,
     checked: !!value,
@@ -208,6 +264,7 @@ var ToggleWrapper = function ToggleWrapper(_ref10) {
     toggle: onChange
   });
 };
+
 ToggleWrapper.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
   value: _propTypes["default"].bool
 });
@@ -219,49 +276,47 @@ var tagMap = {
   checkbox: CheckboxChoice,
   textField: TextField
 };
-var StyledGroup = (0, _styles.styled)('div')(function (_ref11) {
-  var theme = _ref11.theme;
+var Group = (0, _styles.withStyles)(function (theme) {
   return {
-    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
+    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
+    }
   };
-});
-var Group = function Group(props) {
-  var model = props.model,
-    label = props.label,
-    group = props.group,
-    configuration = props.configuration,
-    _onChange4 = props.onChange;
-
+})(function (props) {
+  var classes = props.classes,
+      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
@@ -271,53 +326,76 @@ var Group = function Group(props) {
       }
     }));
   };
+
   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(StyledNumberFields, null, label), Object.keys(fields).map(function (fieldKey) {
+      }, /*#__PURE__*/_react["default"].createElement("p", {
+        className: classes.numberFields
+      }, 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(StyledGroup, null, /*#__PURE__*/_react["default"].createElement(StyledGroupHeader, null, label), Object.keys(group).map(function (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 content(group, key);
   }));
-};
-var Panel = exports.Panel = /*#__PURE__*/function (_React$Component) {
+});
+
+var Panel = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Panel, _React$Component);
+
+  var _super = _createSuper(Panel);
+
   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 = _callSuper(this, Panel, [].concat(args));
-    (0, _defineProperty2["default"])(_this, "change", function (key, value) {
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["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);
@@ -328,23 +406,26 @@ var Panel = exports.Panel = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-  (0, _inherits2["default"])(Panel, _React$Component);
-  return (0, _createClass2["default"])(Panel, [{
+
+  (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 (_ref14) {
-          var _ref15 = (0, _slicedToArray2["default"])(_ref14, 2),
-            propVal = _ref15[1];
+        var showGroup = Object.entries(groups[group]).some(function (_ref8) {
+          var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
+              propVal = _ref9[1];
+
           return !!propVal;
         });
+
         if (showGroup) {
           return /*#__PURE__*/_react["default"].createElement(Group, {
             label: group,
@@ -355,12 +436,16 @@ var Panel = exports.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,
@@ -373,5 +458,6 @@ var Panel = exports.Panel = /*#__PURE__*/function (_React$Component) {
   onChangeModel: function onChangeModel() {},
   onChangeConfiguration: function onChangeConfiguration() {}
 });
-var _default = exports["default"] = Panel;
+var _default = Panel;
+exports["default"] = _default;
 //# sourceMappingURL=panel.js.map