@maif/react-forms 1.0.29 → 1.0.30
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/dist/react-form.js +1 -1
- package/lib/constraints.js +1 -1
- package/lib/form.js +4 -8
- package/lib/inputs/BooleanInput.d.ts +2 -1
- package/lib/inputs/BooleanInput.js +20 -6
- package/lib/inputs/SelectInput.js +10 -8
- package/lib/style.d.ts +6 -2
- package/lib/style.js +3 -0
- package/lib/styleContext.d.ts +1 -1
- package/package.json +2 -2
package/lib/constraints.js
CHANGED
package/lib/form.js
CHANGED
|
@@ -1224,7 +1224,7 @@ var NestedForm = function NestedForm(_ref16) {
|
|
|
1224
1224
|
watch = _useFormContext.watch; // retrieve all hook methods
|
|
1225
1225
|
|
|
1226
1226
|
|
|
1227
|
-
var _useState5 = (0, _react.useState)(
|
|
1227
|
+
var _useState5 = (0, _react.useState)(!!step.collapsed),
|
|
1228
1228
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
1229
1229
|
collapsed = _useState6[0],
|
|
1230
1230
|
setCollapsed = _useState6[1];
|
|
@@ -1300,7 +1300,7 @@ var NestedForm = function NestedForm(_ref16) {
|
|
|
1300
1300
|
top: '5px',
|
|
1301
1301
|
left: '-16px'
|
|
1302
1302
|
},
|
|
1303
|
-
|
|
1303
|
+
strokeWidth: "3",
|
|
1304
1304
|
onClick: function onClick() {
|
|
1305
1305
|
return setCollapsed(!collapsed);
|
|
1306
1306
|
}
|
|
@@ -1312,7 +1312,7 @@ var NestedForm = function NestedForm(_ref16) {
|
|
|
1312
1312
|
top: '5px',
|
|
1313
1313
|
left: '-16px'
|
|
1314
1314
|
},
|
|
1315
|
-
|
|
1315
|
+
strokeWidth: "3",
|
|
1316
1316
|
onClick: function onClick() {
|
|
1317
1317
|
return setCollapsed(!collapsed);
|
|
1318
1318
|
}
|
|
@@ -1327,13 +1327,9 @@ var NestedForm = function NestedForm(_ref16) {
|
|
|
1327
1327
|
}
|
|
1328
1328
|
|
|
1329
1329
|
var realError = error && error[entry];
|
|
1330
|
-
var oneVisibleSetup = Object.values(schemaAndFlow.schema).some(function (v) {
|
|
1331
|
-
return !!v.visibleOnCollapse;
|
|
1332
|
-
});
|
|
1333
|
-
var isCollapsed = collapsed && (oneVisibleSetup ? !step.visibleOnCollapse : idx > 0);
|
|
1334
1330
|
return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
|
|
1335
1331
|
key: "".concat(entry, ".").concat(idx),
|
|
1336
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.display__none,
|
|
1332
|
+
className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, collapsed && !step.visibleOnCollapse || !visibleStep)),
|
|
1337
1333
|
entry: "".concat(parent, ".").concat(entry),
|
|
1338
1334
|
error: realError,
|
|
1339
1335
|
label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),
|
|
@@ -7,27 +7,41 @@ exports.BooleanInput = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
10
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
+
|
|
10
12
|
var _reactFeather = require("react-feather");
|
|
11
13
|
|
|
12
14
|
var _styleContext = require("../styleContext");
|
|
13
15
|
|
|
14
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
15
17
|
|
|
18
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
+
|
|
16
20
|
var BooleanInput = function BooleanInput(_ref) {
|
|
21
|
+
var _classNames;
|
|
22
|
+
|
|
17
23
|
var onChange = _ref.onChange,
|
|
18
|
-
value = _ref.value
|
|
24
|
+
value = _ref.value,
|
|
25
|
+
readOnly = _ref.readOnly;
|
|
19
26
|
var classes = (0, _styleContext.useCustomStyle)();
|
|
27
|
+
|
|
28
|
+
var handleClick = function handleClick(value) {
|
|
29
|
+
if (!readOnly) {
|
|
30
|
+
onChange(value);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
20
34
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
21
|
-
className: classes.cursor_pointer
|
|
35
|
+
className: (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, classes.cursor_pointer, !readOnly), _defineProperty(_classNames, classes.cursor_not_allowed, readOnly), _classNames))
|
|
22
36
|
}, !!value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleRight, {
|
|
23
|
-
className: classes.input__boolean__on,
|
|
37
|
+
className: (0, _classnames["default"])(classes.input__boolean__on),
|
|
24
38
|
onClick: function onClick() {
|
|
25
|
-
return
|
|
39
|
+
return handleClick(false);
|
|
26
40
|
}
|
|
27
41
|
}), !value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleLeft, {
|
|
28
|
-
className: classes.input__boolean__off,
|
|
42
|
+
className: (0, _classnames["default"])(classes.input__boolean__off),
|
|
29
43
|
onClick: function onClick() {
|
|
30
|
-
return
|
|
44
|
+
return handleClick(true);
|
|
31
45
|
}
|
|
32
46
|
}));
|
|
33
47
|
};
|
|
@@ -54,7 +54,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
54
54
|
var valueToSelectOption = function valueToSelectOption(value) {
|
|
55
55
|
var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
56
56
|
var isMulti = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
57
|
-
var maybeTransformer = arguments.length > 3 ? arguments[3] : undefined;
|
|
58
57
|
|
|
59
58
|
if (value === null) {
|
|
60
59
|
return null;
|
|
@@ -63,7 +62,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
|
|
|
63
62
|
if (isMulti) {
|
|
64
63
|
return (0, _Option.option)(value).map(function (v) {
|
|
65
64
|
return v.map(function (x) {
|
|
66
|
-
return valueToSelectOption(x, possibleValues, false
|
|
65
|
+
return valueToSelectOption(x, possibleValues, false);
|
|
67
66
|
});
|
|
68
67
|
}).getOrElse([]);
|
|
69
68
|
}
|
|
@@ -74,7 +73,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
|
|
|
74
73
|
return maybeValue.getOrElse({
|
|
75
74
|
label: maybeValue.map(function (v) {
|
|
76
75
|
return v.label;
|
|
77
|
-
}).getOrElse((value === null || value === void 0 ? void 0 : value.label) || value),
|
|
76
|
+
}).getOrElse((value === null || value === void 0 ? void 0 : value.label) || JSON.stringify(value)),
|
|
78
77
|
value: maybeValue.map(function (v) {
|
|
79
78
|
return v.value;
|
|
80
79
|
}).getOrElse((value === null || value === void 0 ? void 0 : value.value) || value)
|
|
@@ -84,10 +83,13 @@ var valueToSelectOption = function valueToSelectOption(value) {
|
|
|
84
83
|
var SelectInput = function SelectInput(props) {
|
|
85
84
|
var classes = (0, _styleContext.useCustomStyle)();
|
|
86
85
|
var possibleValues = (props.possibleValues || []).map(function (v) {
|
|
87
|
-
return props.transformer ? props.transformer(v) :
|
|
86
|
+
return props.transformer ? typeof props.transformer === 'function' ? props.transformer(v) : {
|
|
87
|
+
label: v[props.transformer.label],
|
|
88
|
+
value: v[props.transformer.value]
|
|
89
|
+
} : v;
|
|
88
90
|
}).map(function (v) {
|
|
89
91
|
return {
|
|
90
|
-
label: (v === null || v === void 0 ? void 0 : v.label) || v,
|
|
92
|
+
label: (v === null || v === void 0 ? void 0 : v.label) || JSON.stringify(v),
|
|
91
93
|
value: (v === null || v === void 0 ? void 0 : v.value) || v
|
|
92
94
|
};
|
|
93
95
|
});
|
|
@@ -102,13 +104,13 @@ var SelectInput = function SelectInput(props) {
|
|
|
102
104
|
values = _useState4[0],
|
|
103
105
|
setValues = _useState4[1];
|
|
104
106
|
|
|
105
|
-
var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti
|
|
107
|
+
var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti)),
|
|
106
108
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
107
109
|
value = _useState6[0],
|
|
108
110
|
setValue = _useState6[1];
|
|
109
111
|
|
|
110
112
|
(0, _react.useEffect)(function () {
|
|
111
|
-
setValue(valueToSelectOption(props.value, values, props.isMulti
|
|
113
|
+
setValue(valueToSelectOption(props.value, values, props.isMulti));
|
|
112
114
|
}, [props.value, values]);
|
|
113
115
|
(0, _react.useEffect)(function () {
|
|
114
116
|
if (props.optionsFrom) {
|
|
@@ -144,7 +146,7 @@ var SelectInput = function SelectInput(props) {
|
|
|
144
146
|
return x.value;
|
|
145
147
|
}));
|
|
146
148
|
} else {
|
|
147
|
-
props.onChange(changes.value);
|
|
149
|
+
props.onChange(changes === null || changes === void 0 ? void 0 : changes.value);
|
|
148
150
|
}
|
|
149
151
|
};
|
|
150
152
|
|
package/lib/style.d.ts
CHANGED
|
@@ -163,13 +163,17 @@ export namespace style {
|
|
|
163
163
|
namespace cursor_pointer {
|
|
164
164
|
const cursor: string;
|
|
165
165
|
}
|
|
166
|
+
namespace cursor_not_allowed {
|
|
167
|
+
const cursor_1: string;
|
|
168
|
+
export { cursor_1 as cursor };
|
|
169
|
+
}
|
|
166
170
|
namespace collapse {
|
|
167
171
|
const display_2: string;
|
|
168
172
|
export { display_2 as display };
|
|
169
173
|
const justifyContent_2: string;
|
|
170
174
|
export { justifyContent_2 as justifyContent };
|
|
171
|
-
const
|
|
172
|
-
export {
|
|
175
|
+
const cursor_2: string;
|
|
176
|
+
export { cursor_2 as cursor };
|
|
173
177
|
}
|
|
174
178
|
namespace collapse_label {
|
|
175
179
|
export const fontWeight: string;
|
package/lib/style.js
CHANGED
package/lib/styleContext.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline" | "nestedform__border" | "border__error">;
|
|
1
|
+
export function useCustomStyle(overrideStyle?: {}): import("jss").Classes<"code" | "flex" | "input" | "btn" | "btn_sm" | "btn_group" | "btn_red" | "btn_green" | "btn_blue" | "btn_grey" | "txt_red" | "ml_5" | "ml_10" | "mr_5" | "mr_10" | "mt_5" | "mt_10" | "mt_20" | "mb_5" | "p_15" | "pr_15" | "full_width" | "d_none" | "flexColumn" | "justifyContentBetween" | "jc_end" | "ac_center" | "ai_center" | "cursor_pointer" | "cursor_not_allowed" | "collapse" | "collapse_label" | "collapse_error" | "datepicker" | "input__boolean__on" | "input__boolean__off" | "input__invalid" | "invalid_feedback" | "display__none" | "collapse__inline" | "nestedform__border" | "border__error">;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maif/react-forms",
|
|
3
3
|
"description": "Build react safe forms as fast as possible",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.30",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"author": "MAIF team",
|
|
7
7
|
"keywords": [
|
|
@@ -121,6 +121,6 @@
|
|
|
121
121
|
"showdown": "1.9.1",
|
|
122
122
|
"typescript": "^4.3.5",
|
|
123
123
|
"uuid": "8.3.2",
|
|
124
|
-
"yup": "0.32.
|
|
124
|
+
"yup": "0.32.11"
|
|
125
125
|
}
|
|
126
126
|
}
|