@pie-lib/config-ui 11.30.3-next.2 → 11.30.3-next.203
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.
- package/CHANGELOG.md +19 -67
- package/lib/alert-dialog.js +35 -42
- package/lib/alert-dialog.js.map +1 -1
- package/lib/checkbox.js +56 -71
- package/lib/checkbox.js.map +1 -1
- package/lib/choice-configuration/feedback-menu.js +29 -64
- package/lib/choice-configuration/feedback-menu.js.map +1 -1
- package/lib/choice-configuration/index.js +202 -262
- package/lib/choice-configuration/index.js.map +1 -1
- package/lib/choice-utils.js +6 -18
- package/lib/choice-utils.js.map +1 -1
- package/lib/feedback-config/feedback-selector.js +79 -115
- package/lib/feedback-config/feedback-selector.js.map +1 -1
- package/lib/feedback-config/group.js +26 -40
- package/lib/feedback-config/group.js.map +1 -1
- package/lib/feedback-config/index.js +47 -90
- package/lib/feedback-config/index.js.map +1 -1
- package/lib/form-section.js +31 -33
- package/lib/form-section.js.map +1 -1
- package/lib/help.js +39 -80
- package/lib/help.js.map +1 -1
- package/lib/index.js +1 -31
- package/lib/index.js.map +1 -1
- package/lib/input.js +21 -54
- package/lib/input.js.map +1 -1
- package/lib/inputs.js +61 -95
- package/lib/inputs.js.map +1 -1
- package/lib/langs.js +58 -101
- package/lib/langs.js.map +1 -1
- package/lib/layout/config-layout.js +40 -70
- package/lib/layout/config-layout.js.map +1 -1
- package/lib/layout/index.js +0 -3
- package/lib/layout/index.js.map +1 -1
- package/lib/layout/layout-contents.js +72 -103
- package/lib/layout/layout-contents.js.map +1 -1
- package/lib/layout/settings-box.js +27 -56
- package/lib/layout/settings-box.js.map +1 -1
- package/lib/mui-box/index.js +41 -57
- package/lib/mui-box/index.js.map +1 -1
- package/lib/number-text-field-custom.js +79 -161
- package/lib/number-text-field-custom.js.map +1 -1
- package/lib/number-text-field.js +80 -114
- package/lib/number-text-field.js.map +1 -1
- package/lib/radio-with-label.js +30 -31
- package/lib/radio-with-label.js.map +1 -1
- package/lib/settings/display-size.js +16 -32
- package/lib/settings/display-size.js.map +1 -1
- package/lib/settings/index.js +14 -47
- package/lib/settings/index.js.map +1 -1
- package/lib/settings/panel.js +159 -229
- package/lib/settings/panel.js.map +1 -1
- package/lib/settings/settings-radio-label.js +28 -30
- package/lib/settings/settings-radio-label.js.map +1 -1
- package/lib/settings/toggle.js +35 -46
- package/lib/settings/toggle.js.map +1 -1
- package/lib/tabs/index.js +22 -57
- package/lib/tabs/index.js.map +1 -1
- package/lib/tags-input/index.js +50 -99
- package/lib/tags-input/index.js.map +1 -1
- package/lib/two-choice.js +46 -90
- package/lib/two-choice.js.map +1 -1
- package/lib/with-stateful-model.js +8 -31
- package/lib/with-stateful-model.js.map +1 -1
- package/package.json +12 -20
- package/src/__tests__/alert-dialog.test.jsx +283 -0
- package/src/__tests__/checkbox.test.jsx +249 -0
- package/src/__tests__/form-section.test.jsx +334 -0
- package/src/__tests__/help.test.jsx +184 -0
- package/src/__tests__/input.test.jsx +192 -0
- package/src/__tests__/langs.test.jsx +435 -15
- package/src/__tests__/number-text-field-custom.test.jsx +438 -0
- package/src/__tests__/number-text-field.test.jsx +295 -102
- package/src/__tests__/radio-with-label.test.jsx +259 -0
- package/src/__tests__/settings-panel.test.js +66 -83
- package/src/__tests__/settings.test.jsx +515 -0
- package/src/__tests__/tabs.test.jsx +193 -0
- package/src/__tests__/two-choice.test.js +104 -18
- package/src/__tests__/with-stateful-model.test.jsx +145 -0
- package/src/alert-dialog.jsx +21 -19
- package/src/checkbox.jsx +42 -46
- package/src/choice-configuration/__tests__/feedback-menu.test.jsx +157 -4
- package/src/choice-configuration/__tests__/index.test.jsx +198 -56
- package/src/choice-configuration/feedback-menu.jsx +6 -6
- package/src/choice-configuration/index.jsx +201 -203
- package/src/feedback-config/__tests__/feedback-config.test.jsx +130 -60
- package/src/feedback-config/__tests__/feedback-selector.test.jsx +81 -44
- package/src/feedback-config/feedback-selector.jsx +50 -55
- package/src/feedback-config/group.jsx +21 -22
- package/src/feedback-config/index.jsx +27 -29
- package/src/form-section.jsx +26 -18
- package/src/help.jsx +20 -28
- package/src/input.jsx +1 -1
- package/src/inputs.jsx +34 -50
- package/src/langs.jsx +41 -46
- package/src/layout/__tests__/config.layout.test.jsx +55 -38
- package/src/layout/config-layout.jsx +38 -32
- package/src/layout/layout-contents.jsx +38 -39
- package/src/layout/settings-box.jsx +16 -19
- package/src/mui-box/index.jsx +35 -43
- package/src/number-text-field-custom.jsx +30 -36
- package/src/number-text-field.jsx +45 -29
- package/src/radio-with-label.jsx +25 -13
- package/src/settings/display-size.jsx +12 -11
- package/src/settings/panel.jsx +97 -91
- package/src/settings/settings-radio-label.jsx +25 -13
- package/src/settings/toggle.jsx +30 -29
- package/src/tabs/index.jsx +8 -8
- package/src/tags-input/__tests__/index.test.jsx +88 -37
- package/src/tags-input/index.jsx +35 -38
- package/src/two-choice.jsx +15 -19
- package/esm/index.css +0 -847
- package/esm/index.js +0 -213950
- package/esm/index.js.map +0 -1
- package/esm/package.json +0 -3
- package/src/__tests__/__snapshots__/langs.test.jsx.snap +0 -32
- package/src/__tests__/__snapshots__/settings-panel.test.js.snap +0 -115
- package/src/__tests__/__snapshots__/two-choice.test.js.snap +0 -171
- package/src/choice-configuration/__tests__/__snapshots__/feedback-menu.test.jsx.snap +0 -51
- package/src/choice-configuration/__tests__/__snapshots__/index.test.jsx.snap +0 -519
- package/src/feedback-config/__tests__/__snapshots__/feedback-config.test.jsx.snap +0 -27
- package/src/feedback-config/__tests__/__snapshots__/feedback-selector.test.jsx.snap +0 -38
- package/src/layout/__tests__/__snapshots__/config.layout.test.jsx.snap +0 -59
- package/src/tags-input/__tests__/__snapshots__/index.test.jsx.snap +0 -170
package/lib/settings/panel.js
CHANGED
|
@@ -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
|
|
41
|
-
|
|
42
|
-
var
|
|
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
|
|
63
|
-
|
|
64
|
-
function
|
|
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
|
-
|
|
84
|
-
|
|
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
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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 =
|
|
98
|
+
var StyledRadio = Radio;
|
|
99
|
+
var StyledLabel = (0, _styles.styled)('p')(function (_ref4) {
|
|
100
|
+
var theme = _ref4.theme;
|
|
121
101
|
return {
|
|
122
|
-
|
|
123
|
-
|
|
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
|
-
})
|
|
140
|
-
var
|
|
105
|
+
});
|
|
106
|
+
var StyledSelect = (0, _styles.styled)(_Select["default"])(function (_ref5) {
|
|
107
|
+
var theme = _ref5.theme;
|
|
141
108
|
return {
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
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
|
-
})
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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(
|
|
175
|
-
var 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
|
|
153
|
+
var StyledTypography = (0, _styles.styled)(_Typography["default"])(function (_ref8) {
|
|
154
|
+
var theme = _ref8.theme;
|
|
193
155
|
return {
|
|
194
|
-
|
|
195
|
-
|
|
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
|
|
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
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
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
|
|
174
|
+
padding: "0 ".concat(theme.spacing(1)),
|
|
175
|
+
backgroundColor: 'transparent'
|
|
218
176
|
}
|
|
219
177
|
};
|
|
220
|
-
})
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
|
|
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
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
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
|
|
231
|
+
var StyledGroup = (0, _styles.styled)('div')(function (_ref11) {
|
|
232
|
+
var theme = _ref11.theme;
|
|
280
233
|
return {
|
|
281
|
-
|
|
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
|
-
})
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
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
|
-
|
|
311
|
-
|
|
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
|
-
|
|
339
|
-
|
|
340
|
-
|
|
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(
|
|
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
|
-
}
|
|
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
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
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
|
|
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
|
-
|
|
393
|
-
|
|
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
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
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 (
|
|
423
|
-
var
|
|
424
|
-
|
|
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
|