@pie-lib/config-ui 11.30.3-next.0 → 11.30.3-next.162

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