@pie-lib/config-ui 11.30.2-next.0 → 11.32.0-mui-update.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/CHANGELOG.md +34 -8
  2. package/lib/alert-dialog.js +35 -42
  3. package/lib/alert-dialog.js.map +1 -1
  4. package/lib/checkbox.js +56 -71
  5. package/lib/checkbox.js.map +1 -1
  6. package/lib/choice-configuration/feedback-menu.js +29 -64
  7. package/lib/choice-configuration/feedback-menu.js.map +1 -1
  8. package/lib/choice-configuration/index.js +202 -260
  9. package/lib/choice-configuration/index.js.map +1 -1
  10. package/lib/choice-utils.js +6 -18
  11. package/lib/choice-utils.js.map +1 -1
  12. package/lib/feedback-config/feedback-selector.js +77 -114
  13. package/lib/feedback-config/feedback-selector.js.map +1 -1
  14. package/lib/feedback-config/group.js +26 -40
  15. package/lib/feedback-config/group.js.map +1 -1
  16. package/lib/feedback-config/index.js +38 -90
  17. package/lib/feedback-config/index.js.map +1 -1
  18. package/lib/form-section.js +24 -33
  19. package/lib/form-section.js.map +1 -1
  20. package/lib/help.js +39 -80
  21. package/lib/help.js.map +1 -1
  22. package/lib/index.js +1 -31
  23. package/lib/index.js.map +1 -1
  24. package/lib/input.js +21 -54
  25. package/lib/input.js.map +1 -1
  26. package/lib/inputs.js +61 -95
  27. package/lib/inputs.js.map +1 -1
  28. package/lib/langs.js +56 -100
  29. package/lib/langs.js.map +1 -1
  30. package/lib/layout/config-layout.js +61 -100
  31. package/lib/layout/config-layout.js.map +1 -1
  32. package/lib/layout/index.js +0 -3
  33. package/lib/layout/index.js.map +1 -1
  34. package/lib/layout/layout-contents.js +73 -103
  35. package/lib/layout/layout-contents.js.map +1 -1
  36. package/lib/layout/settings-box.js +27 -56
  37. package/lib/layout/settings-box.js.map +1 -1
  38. package/lib/mui-box/index.js +41 -57
  39. package/lib/mui-box/index.js.map +1 -1
  40. package/lib/number-text-field-custom.js +79 -161
  41. package/lib/number-text-field-custom.js.map +1 -1
  42. package/lib/number-text-field.js +57 -115
  43. package/lib/number-text-field.js.map +1 -1
  44. package/lib/radio-with-label.js +23 -31
  45. package/lib/radio-with-label.js.map +1 -1
  46. package/lib/settings/display-size.js +16 -32
  47. package/lib/settings/display-size.js.map +1 -1
  48. package/lib/settings/index.js +14 -47
  49. package/lib/settings/index.js.map +1 -1
  50. package/lib/settings/panel.js +151 -229
  51. package/lib/settings/panel.js.map +1 -1
  52. package/lib/settings/settings-radio-label.js +21 -30
  53. package/lib/settings/settings-radio-label.js.map +1 -1
  54. package/lib/settings/toggle.js +34 -46
  55. package/lib/settings/toggle.js.map +1 -1
  56. package/lib/tabs/index.js +22 -57
  57. package/lib/tabs/index.js.map +1 -1
  58. package/lib/tags-input/index.js +50 -99
  59. package/lib/tags-input/index.js.map +1 -1
  60. package/lib/two-choice.js +46 -90
  61. package/lib/two-choice.js.map +1 -1
  62. package/lib/with-stateful-model.js +8 -31
  63. package/lib/with-stateful-model.js.map +1 -1
  64. package/package.json +12 -10
  65. package/src/__tests__/number-text-field.test.jsx +1 -1
  66. package/src/alert-dialog.jsx +21 -19
  67. package/src/checkbox.jsx +42 -46
  68. package/src/choice-configuration/feedback-menu.jsx +6 -6
  69. package/src/choice-configuration/index.jsx +202 -195
  70. package/src/feedback-config/feedback-selector.jsx +51 -53
  71. package/src/feedback-config/group.jsx +21 -22
  72. package/src/feedback-config/index.jsx +27 -29
  73. package/src/form-section.jsx +18 -18
  74. package/src/help.jsx +20 -28
  75. package/src/input.jsx +1 -1
  76. package/src/inputs.jsx +34 -50
  77. package/src/langs.jsx +40 -46
  78. package/src/layout/config-layout.jsx +38 -37
  79. package/src/layout/layout-contents.jsx +38 -39
  80. package/src/layout/settings-box.jsx +16 -19
  81. package/src/mui-box/index.jsx +35 -43
  82. package/src/number-text-field-custom.jsx +30 -36
  83. package/src/number-text-field.jsx +22 -30
  84. package/src/radio-with-label.jsx +17 -13
  85. package/src/settings/display-size.jsx +12 -11
  86. package/src/settings/panel.jsx +86 -89
  87. package/src/settings/settings-radio-label.jsx +17 -13
  88. package/src/settings/toggle.jsx +29 -29
  89. package/src/tabs/index.jsx +8 -8
  90. package/src/tags-input/index.jsx +35 -38
  91. package/src/two-choice.jsx +15 -19
@@ -1,72 +1,39 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports["default"] = exports.Panel = void 0;
9
-
10
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
-
12
9
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
-
14
10
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
-
16
- var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
17
-
18
- var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
19
-
20
11
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
21
-
22
12
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
23
-
13
+ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
24
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
25
-
26
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
27
-
28
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
29
-
30
17
  var _react = _interopRequireDefault(require("react"));
31
-
32
18
  var _propTypes = _interopRequireDefault(require("prop-types"));
33
-
34
- var _styles = require("@material-ui/core/styles");
35
-
36
19
  var _get2 = _interopRequireDefault(require("lodash/get"));
37
-
38
20
  var _set = _interopRequireDefault(require("lodash/set"));
39
-
40
- var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
41
-
42
- var _Input = _interopRequireDefault(require("@material-ui/core/Input"));
43
-
44
- var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
45
-
21
+ var _styles = require("@mui/material/styles");
22
+ var _Select = _interopRequireDefault(require("@mui/material/Select"));
23
+ var _Input = _interopRequireDefault(require("@mui/material/Input"));
24
+ var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
25
+ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
46
26
  var _debug = _interopRequireDefault(require("debug"));
47
-
48
27
  var _toggle = _interopRequireDefault(require("./toggle"));
49
-
50
28
  var _twoChoice = require("../two-choice");
51
-
52
29
  var _settingsRadioLabel = _interopRequireDefault(require("./settings-radio-label"));
53
-
54
30
  var _numberTextField = _interopRequireDefault(require("../number-text-field"));
55
-
56
31
  var _checkbox = _interopRequireDefault(require("../checkbox"));
57
-
58
- var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
59
-
60
32
  var _excluded = ["isConfigProperty"];
61
-
62
- 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); }; }
63
-
64
- 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; } }
65
-
66
- 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; }
67
-
68
- 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; }
69
-
33
+ 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)); }
34
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
35
+ 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; }
36
+ 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; }
70
37
  var log = (0, _debug["default"])('pie-lib:config-ui:settings:panel');
71
38
  var labelValue = {
72
39
  label: _propTypes["default"].string,
@@ -77,11 +44,10 @@ var baseTypes = {
77
44
  value: _propTypes["default"].string,
78
45
  onChange: _propTypes["default"].func
79
46
  };
80
-
81
47
  var CheckboxChoice = function CheckboxChoice(_ref) {
82
48
  var label = _ref.label,
83
- value = _ref.value,
84
- _onChange = _ref.onChange;
49
+ value = _ref.value,
50
+ _onChange = _ref.onChange;
85
51
  return /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
86
52
  checked: value,
87
53
  label: label,
@@ -90,21 +56,33 @@ var CheckboxChoice = function CheckboxChoice(_ref) {
90
56
  }
91
57
  });
92
58
  };
93
-
94
59
  CheckboxChoice.propTypes = {
95
60
  label: _propTypes["default"].string,
96
61
  value: _propTypes["default"].bool,
97
62
  onChange: _propTypes["default"].func
98
63
  };
99
-
100
- var Radio = function Radio(_ref2) {
101
- var classes = _ref2.classes,
102
- label = _ref2.label,
103
- value = _ref2.value,
104
- onChange = _ref2.onChange,
105
- choices = _ref2.choices;
106
- return /*#__PURE__*/_react["default"].createElement(_twoChoice.NChoice, {
107
- className: classes.radioSettings,
64
+ var StyledNChoice = (0, _styles.styled)(_twoChoice.NChoice)(function (_ref2) {
65
+ var theme = _ref2.theme;
66
+ return {
67
+ marginTop: theme.spacing(0.5),
68
+ paddingBottom: theme.spacing(0.5),
69
+ width: '100%',
70
+ '& > label': {
71
+ color: 'rgba(0, 0, 0, 0.89)',
72
+ transform: 'translate(0, 10px) scale(1)',
73
+ fontSize: '14px'
74
+ },
75
+ '& > div': {
76
+ marginTop: theme.spacing(2.5)
77
+ }
78
+ };
79
+ });
80
+ var Radio = function Radio(_ref3) {
81
+ var label = _ref3.label,
82
+ value = _ref3.value,
83
+ onChange = _ref3.onChange,
84
+ choices = _ref3.choices;
85
+ return /*#__PURE__*/_react["default"].createElement(StyledNChoice, {
108
86
  direction: "horizontal",
109
87
  customLabel: _settingsRadioLabel["default"],
110
88
  value: value,
@@ -113,121 +91,100 @@ var Radio = function Radio(_ref2) {
113
91
  onChange: onChange
114
92
  });
115
93
  };
116
-
117
94
  Radio.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
118
95
  choices: _propTypes["default"].arrayOf(_propTypes["default"].shape(labelValue))
119
96
  });
120
- var StyledRadio = (0, _styles.withStyles)(function (theme) {
97
+ var StyledRadio = Radio;
98
+ var StyledLabel = (0, _styles.styled)('p')(function (_ref4) {
99
+ var theme = _ref4.theme;
121
100
  return {
122
- radioSettings: {
123
- marginTop: theme.spacing.unit / 2,
124
- paddingBottom: theme.spacing.unit / 2,
125
- width: '100%',
126
- '& > label': {
127
- color: 'rgba(0, 0, 0, 0.89)',
128
- transform: 'translate(0, 10px) scale(1)',
129
- fontSize: '14px'
130
- },
131
- '& > div': {
132
- marginTop: theme.spacing.unit * 2.5
133
- }
134
- },
135
- label: {
136
- display: 'none'
137
- }
101
+ margin: 0,
102
+ fontSize: theme.typography.fontSize
138
103
  };
139
- })(Radio);
140
- var Dropdown = (0, _styles.withStyles)(function (theme) {
104
+ });
105
+ var StyledSelect = (0, _styles.styled)(_Select["default"])(function (_ref5) {
106
+ var theme = _ref5.theme;
141
107
  return {
142
- label: {
143
- margin: 0,
144
- fontSize: theme.typography.fontSize
145
- },
146
- wrapper: {
147
- marginTop: theme.spacing.unit / 2,
148
- border: '2px solid lightgrey',
149
- borderRadius: '4px',
150
- padding: "0 ".concat(theme.spacing.unit, "px")
151
- }
108
+ marginTop: theme.spacing(0.5),
109
+ border: '2px solid lightgrey',
110
+ padding: "0 ".concat(theme.spacing(1)),
111
+ borderRadius: '4px'
152
112
  };
153
- })(function (_ref3) {
154
- var classes = _ref3.classes,
155
- label = _ref3.label,
156
- value = _ref3.value,
157
- _onChange2 = _ref3.onChange,
158
- _ref3$choices = _ref3.choices,
159
- choices = _ref3$choices === void 0 ? [] : _ref3$choices;
160
-
113
+ });
114
+ var Dropdown = function Dropdown(_ref6) {
115
+ var label = _ref6.label,
116
+ value = _ref6.value,
117
+ _onChange2 = _ref6.onChange,
118
+ _ref6$choices = _ref6.choices,
119
+ choices = _ref6$choices === void 0 ? [] : _ref6$choices;
161
120
  var getItemLabel = function getItemLabel(l) {
162
121
  return typeof l === 'string' ? l : l.label;
163
122
  };
164
-
165
123
  var getItemValue = function getItemValue(l) {
166
124
  return typeof l === 'string' ? l : l.value;
167
125
  };
168
-
169
- return /*#__PURE__*/_react["default"].createElement("div", null, label && /*#__PURE__*/_react["default"].createElement("p", {
170
- className: classes.label
171
- }, label), /*#__PURE__*/_react["default"].createElement(_Select["default"], {
172
- className: classes.wrapper,
126
+ return /*#__PURE__*/_react["default"].createElement("div", null, label && /*#__PURE__*/_react["default"].createElement(StyledLabel, null, label), /*#__PURE__*/_react["default"].createElement(StyledSelect, {
173
127
  value: value || choices && choices[0],
174
- onChange: function onChange(_ref4) {
175
- var target = _ref4.target;
128
+ onChange: function onChange(_ref7) {
129
+ var target = _ref7.target;
176
130
  return _onChange2(target.value);
177
131
  },
178
132
  input: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
179
133
  id: "dropdown-".concat(label)
180
134
  }),
181
- disableUnderline: true
135
+ disableUnderline: true,
136
+ MenuProps: {
137
+ transitionDuration: {
138
+ enter: 225,
139
+ exit: 195
140
+ }
141
+ }
182
142
  }, choices.map(function (l, index) {
183
143
  return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
184
144
  key: index,
185
145
  value: getItemValue(l)
186
146
  }, getItemLabel(l));
187
147
  })));
188
- });
148
+ };
189
149
  Dropdown.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
190
150
  choices: _propTypes["default"].arrayOf(_propTypes["default"].string)
191
151
  });
192
- var TextField = (0, _styles.withStyles)(function (theme) {
152
+ var StyledTypography = (0, _styles.styled)(_Typography["default"])(function (_ref8) {
153
+ var theme = _ref8.theme;
193
154
  return {
194
- field: {
195
- marginRight: theme.spacing.unit * 3,
196
- marginTop: theme.spacing.unit
197
- }
155
+ marginRight: theme.spacing(3),
156
+ marginTop: theme.spacing(1)
198
157
  };
199
- })(function (_ref5) {
200
- var classes = _ref5.classes,
201
- label = _ref5.label;
202
- return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
203
- className: classes.field
204
- }, label);
205
158
  });
206
- var NumberField = (0, _styles.withStyles)(function (theme) {
159
+ var TextField = function TextField(_ref9) {
160
+ var label = _ref9.label;
161
+ return /*#__PURE__*/_react["default"].createElement(StyledTypography, null, label);
162
+ };
163
+ var StyledNumberTextField = (0, _styles.styled)(_numberTextField["default"])(function (_ref0) {
164
+ var theme = _ref0.theme;
207
165
  return {
208
- field: {
209
- width: '35%',
210
- marginRight: theme.spacing.unit * 3,
211
- marginTop: theme.spacing.unit
212
- },
213
- wrapper: {
214
- marginTop: theme.spacing.unit / 2,
166
+ width: '35%',
167
+ marginRight: theme.spacing(3),
168
+ marginTop: theme.spacing(1),
169
+ '& .MuiInputBase-root': {
170
+ marginTop: theme.spacing(0.5),
215
171
  border: '2px solid lightgrey',
216
172
  borderRadius: '4px',
217
- padding: "0 ".concat(theme.spacing.unit, "px")
173
+ padding: "0 ".concat(theme.spacing(1)),
174
+ backgroundColor: 'transparent'
218
175
  }
219
176
  };
220
- })(function (_ref6) {
221
- var classes = _ref6.classes,
222
- label = _ref6.label,
223
- value = _ref6.value,
224
- _ref6$onChange = _ref6.onChange,
225
- _onChange3 = _ref6$onChange === void 0 ? function () {} : _ref6$onChange,
226
- suffix = _ref6.suffix,
227
- min = _ref6.min,
228
- max = _ref6.max;
229
-
230
- return /*#__PURE__*/_react["default"].createElement(_numberTextField["default"], {
177
+ });
178
+ var NumberField = function NumberField(_ref1) {
179
+ var label = _ref1.label,
180
+ value = _ref1.value,
181
+ _ref1$onChange = _ref1.onChange,
182
+ _onChange3 = _ref1$onChange === void 0 ? function () {} : _ref1$onChange,
183
+ suffix = _ref1.suffix,
184
+ min = _ref1.min,
185
+ max = _ref1.max;
186
+ return /*#__PURE__*/_react["default"].createElement(StyledNumberTextField, {
187
+ variant: 'standard',
231
188
  label: label || 'Label',
232
189
  value: value,
233
190
  max: max,
@@ -236,27 +193,22 @@ var NumberField = (0, _styles.withStyles)(function (theme) {
236
193
  return _onChange3(value);
237
194
  },
238
195
  suffix: suffix,
239
- className: classes.field,
240
196
  showErrorWhenOutsideRange: true,
241
- inputClassName: classes.wrapper,
242
- disableUnderline: true,
243
- classes: classes
197
+ disableUnderline: true
244
198
  });
245
- });
199
+ };
246
200
  NumberField.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
247
- classes: _propTypes["default"].object,
248
201
  suffix: _propTypes["default"].string,
249
202
  min: _propTypes["default"].number,
250
203
  max: _propTypes["default"].number,
251
204
  value: _propTypes["default"].number
252
205
  });
253
206
  TextField.propTypes = _objectSpread({}, baseTypes);
254
-
255
- var ToggleWrapper = function ToggleWrapper(_ref7) {
256
- var disabled = _ref7.disabled,
257
- label = _ref7.label,
258
- value = _ref7.value,
259
- onChange = _ref7.onChange;
207
+ var ToggleWrapper = function ToggleWrapper(_ref10) {
208
+ var disabled = _ref10.disabled,
209
+ label = _ref10.label,
210
+ value = _ref10.value,
211
+ onChange = _ref10.onChange;
260
212
  return /*#__PURE__*/_react["default"].createElement(_toggle["default"], {
261
213
  label: label,
262
214
  checked: !!value,
@@ -264,7 +216,6 @@ var ToggleWrapper = function ToggleWrapper(_ref7) {
264
216
  toggle: onChange
265
217
  });
266
218
  };
267
-
268
219
  ToggleWrapper.propTypes = _objectSpread(_objectSpread({}, baseTypes), {}, {
269
220
  value: _propTypes["default"].bool
270
221
  });
@@ -276,47 +227,49 @@ var tagMap = {
276
227
  checkbox: CheckboxChoice,
277
228
  textField: TextField
278
229
  };
279
- var Group = (0, _styles.withStyles)(function (theme) {
230
+ var StyledGroup = (0, _styles.styled)('div')(function (_ref11) {
231
+ var theme = _ref11.theme;
280
232
  return {
281
- group: {
282
- margin: "0 0 ".concat(theme.spacing.unit * 2, "px 0")
283
- },
284
- groupHeader: {
285
- color: '#495B8F',
286
- fontSize: theme.typography.fontSize + 2,
287
- fontWeight: 600,
288
- marginBottom: theme.spacing.unit
289
- },
290
- numberFields: {
291
- fontSize: theme.typography.fontSize,
292
- marginBottom: 0
293
- }
233
+ margin: "0 0 ".concat(theme.spacing(2), " 0")
234
+ };
235
+ });
236
+ var StyledGroupHeader = (0, _styles.styled)('div')(function (_ref12) {
237
+ var theme = _ref12.theme;
238
+ return {
239
+ color: '#495B8F',
240
+ fontSize: theme.typography.fontSize + 2,
241
+ fontWeight: 600,
242
+ marginBottom: theme.spacing(1)
243
+ };
244
+ });
245
+ var StyledNumberFields = (0, _styles.styled)('p')(function (_ref13) {
246
+ var theme = _ref13.theme;
247
+ return {
248
+ fontSize: theme.typography.fontSize,
249
+ marginBottom: 0
294
250
  };
295
- })(function (props) {
296
- var classes = props.classes,
297
- model = props.model,
298
- label = props.label,
299
- group = props.group,
300
- configuration = props.configuration,
301
- _onChange4 = props.onChange;
251
+ });
252
+ var Group = function Group(props) {
253
+ var model = props.model,
254
+ label = props.label,
255
+ group = props.group,
256
+ configuration = props.configuration,
257
+ _onChange4 = props.onChange;
258
+
302
259
  /**
303
260
  * @param group - the group of settings
304
261
  * @param key - the key(or path) to be used to set or get from model or configuration
305
262
  * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)
306
263
  * @returns tag that corresponds to element type */
307
-
308
264
  var getTag = function getTag(group, key, innerKey) {
309
265
  var _get = (0, _get2["default"])(group, innerKey || key),
310
- isConfigProperty = _get.isConfigProperty,
311
- properties = (0, _objectWithoutProperties2["default"])(_get, _excluded);
312
-
266
+ isConfigProperty = _get.isConfigProperty,
267
+ properties = (0, _objectWithoutProperties2["default"])(_get, _excluded);
313
268
  var value = isConfigProperty ? (0, _get2["default"])(configuration, key) : (0, _get2["default"])(model, key);
314
-
315
269
  var tagProps = _objectSpread(_objectSpread({}, properties), {}, {
316
270
  key: key,
317
271
  value: value
318
272
  });
319
-
320
273
  var Tag = tagMap[tagProps.type];
321
274
  return /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({
322
275
  key: key
@@ -326,76 +279,53 @@ var Group = (0, _styles.withStyles)(function (theme) {
326
279
  }
327
280
  }));
328
281
  };
329
-
330
282
  var content = function content(group, key) {
331
283
  var currentGroup = group[key];
332
-
333
284
  if (!currentGroup) {
334
285
  return null;
335
286
  }
336
-
337
287
  var type = currentGroup.type,
338
- label = currentGroup.label,
339
- fields = currentGroup.fields,
340
- choices = currentGroup.choices;
341
-
288
+ label = currentGroup.label,
289
+ fields = currentGroup.fields,
290
+ choices = currentGroup.choices;
342
291
  if (type === 'numberFields') {
343
292
  return /*#__PURE__*/_react["default"].createElement("div", {
344
293
  key: "numberField-".concat(label)
345
- }, /*#__PURE__*/_react["default"].createElement("p", {
346
- className: classes.numberFields
347
- }, label), Object.keys(fields).map(function (fieldKey) {
294
+ }, /*#__PURE__*/_react["default"].createElement(StyledNumberFields, null, label), Object.keys(fields).map(function (fieldKey) {
348
295
  return getTag(group, "".concat(key, ".").concat(fieldKey), "".concat(key, ".fields.").concat(fieldKey));
349
296
  }));
350
297
  }
351
-
352
298
  if (type === 'checkboxes') {
353
299
  return /*#__PURE__*/_react["default"].createElement("div", {
354
300
  key: "checkbox-".concat(label)
355
301
  }, /*#__PURE__*/_react["default"].createElement("p", null, label), Object.keys(choices).map(function (choiceKey) {
356
302
  return getTag(group, "".concat(key, ".").concat(choiceKey), "".concat(key, ".choices.").concat(choiceKey));
357
303
  }));
358
- } // if type is toggle, radio, dropdown, numberField or numberText
359
-
304
+ }
360
305
 
306
+ // if type is toggle, radio, dropdown, numberField or numberText
361
307
  return getTag(group, key);
362
308
  };
363
-
364
- return /*#__PURE__*/_react["default"].createElement("div", {
365
- className: classes.group
366
- }, /*#__PURE__*/_react["default"].createElement("div", {
367
- className: classes.groupHeader
368
- }, label), Object.keys(group).map(function (key) {
309
+ return /*#__PURE__*/_react["default"].createElement(StyledGroup, null, /*#__PURE__*/_react["default"].createElement(StyledGroupHeader, null, label), Object.keys(group).map(function (key) {
369
310
  return content(group, key);
370
311
  }));
371
- });
372
-
373
- var Panel = /*#__PURE__*/function (_React$Component) {
374
- (0, _inherits2["default"])(Panel, _React$Component);
375
-
376
- var _super = _createSuper(Panel);
377
-
312
+ };
313
+ var Panel = exports.Panel = /*#__PURE__*/function (_React$Component) {
378
314
  function Panel() {
379
315
  var _this;
380
-
381
316
  (0, _classCallCheck2["default"])(this, Panel);
382
-
383
317
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
384
318
  args[_key] = arguments[_key];
385
319
  }
386
-
387
- _this = _super.call.apply(_super, [this].concat(args));
388
- (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "change", function (key, value) {
320
+ _this = _callSuper(this, Panel, [].concat(args));
321
+ (0, _defineProperty2["default"])(_this, "change", function (key, value) {
389
322
  var isConfigProperty = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
390
323
  log('[changeModel]', key, value);
391
324
  var _this$props = _this.props,
392
- onChangeModel = _this$props.onChangeModel,
393
- onChangeConfiguration = _this$props.onChangeConfiguration;
394
-
325
+ onChangeModel = _this$props.onChangeModel,
326
+ onChangeConfiguration = _this$props.onChangeConfiguration;
395
327
  var model = _objectSpread({}, _this.props.model);
396
-
397
328
  var configuration = _objectSpread({}, _this.props.configuration);
398
-
399
329
  if (isConfigProperty) {
400
330
  (0, _set["default"])(configuration, key, value);
401
331
  onChangeConfiguration(configuration, key);
@@ -406,26 +336,23 @@ var Panel = /*#__PURE__*/function (_React$Component) {
406
336
  });
407
337
  return _this;
408
338
  }
409
-
410
- (0, _createClass2["default"])(Panel, [{
339
+ (0, _inherits2["default"])(Panel, _React$Component);
340
+ return (0, _createClass2["default"])(Panel, [{
411
341
  key: "render",
412
342
  value: function render() {
413
343
  var _this2 = this;
414
-
415
344
  var _this$props2 = this.props,
416
- groups = _this$props2.groups,
417
- model = _this$props2.model,
418
- configuration = _this$props2.configuration,
419
- modal = _this$props2.modal;
345
+ groups = _this$props2.groups,
346
+ model = _this$props2.model,
347
+ configuration = _this$props2.configuration,
348
+ modal = _this$props2.modal;
420
349
  log('render:', model);
421
350
  var renderedGroups = Object.keys(groups || {}).map(function (group) {
422
- var showGroup = Object.entries(groups[group]).some(function (_ref8) {
423
- var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
424
- propVal = _ref9[1];
425
-
351
+ var showGroup = Object.entries(groups[group]).some(function (_ref14) {
352
+ var _ref15 = (0, _slicedToArray2["default"])(_ref14, 2),
353
+ propVal = _ref15[1];
426
354
  return !!propVal;
427
355
  });
428
-
429
356
  if (showGroup) {
430
357
  return /*#__PURE__*/_react["default"].createElement(Group, {
431
358
  label: group,
@@ -436,16 +363,12 @@ var Panel = /*#__PURE__*/function (_React$Component) {
436
363
  onChange: _this2.change
437
364
  });
438
365
  }
439
-
440
366
  return null;
441
367
  });
442
368
  return /*#__PURE__*/_react["default"].createElement("div", null, renderedGroups, modal);
443
369
  }
444
370
  }]);
445
- return Panel;
446
371
  }(_react["default"].Component);
447
-
448
- exports.Panel = Panel;
449
372
  (0, _defineProperty2["default"])(Panel, "propTypes", {
450
373
  model: _propTypes["default"].object,
451
374
  configuration: _propTypes["default"].object,
@@ -458,6 +381,5 @@ exports.Panel = Panel;
458
381
  onChangeModel: function onChangeModel() {},
459
382
  onChangeConfiguration: function onChangeConfiguration() {}
460
383
  });
461
- var _default = Panel;
462
- exports["default"] = _default;
384
+ var _default = exports["default"] = Panel;
463
385
  //# sourceMappingURL=panel.js.map