@maif/react-forms 1.0.31 → 1.0.32
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/README.md +4 -4
- package/lib/esm/index.js +30260 -0
- package/lib/index.js +30281 -39
- package/package.json +28 -35
- package/rollup.config.js +53 -0
- package/dist/react-form.js +0 -2
- package/dist/react-form.js.LICENSE.txt +0 -103
- package/lib/Option.d.ts +0 -39
- package/lib/Option.js +0 -66
- package/lib/constraints.d.ts +0 -90
- package/lib/constraints.js +0 -371
- package/lib/form.d.ts +0 -2
- package/lib/form.js +0 -1359
- package/lib/format.d.ts +0 -13
- package/lib/format.js +0 -20
- package/lib/index.d.ts +0 -4
- package/lib/inputs/ArrayInput.d.ts +0 -1
- package/lib/inputs/ArrayInput.js +0 -141
- package/lib/inputs/BooleanInput.d.ts +0 -5
- package/lib/inputs/BooleanInput.js +0 -49
- package/lib/inputs/CodeInput.d.ts +0 -9
- package/lib/inputs/CodeInput.js +0 -89
- package/lib/inputs/Collapse.d.ts +0 -1
- package/lib/inputs/Collapse.js +0 -73
- package/lib/inputs/MarkdownInput.d.ts +0 -1
- package/lib/inputs/MarkdownInput.js +0 -433
- package/lib/inputs/SelectInput.d.ts +0 -1
- package/lib/inputs/SelectInput.js +0 -238
- package/lib/inputs/SingleLineCode.d.ts +0 -9
- package/lib/inputs/SingleLineCode.js +0 -88
- package/lib/inputs/index.d.ts +0 -8
- package/lib/inputs/index.js +0 -109
- package/lib/inputs/objectInput.d.ts +0 -1
- package/lib/inputs/objectInput.js +0 -115
- package/lib/resolvers/index.d.ts +0 -2
- package/lib/resolvers/index.js +0 -19
- package/lib/resolvers/utils.d.ts +0 -5
- package/lib/resolvers/utils.js +0 -133
- package/lib/style.d.ts +0 -234
- package/lib/style.js +0 -181
- package/lib/styleContext.d.ts +0 -1
- package/lib/styleContext.js +0 -29
- package/lib/type.d.ts +0 -8
- package/lib/type.js +0 -15
- package/lib/utils.d.ts +0 -2
- package/lib/utils.js +0 -37
package/lib/form.js
DELETED
|
@@ -1,1359 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Form = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
|
-
var _yup = require("@hookform/resolvers/yup");
|
|
11
|
-
|
|
12
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
|
|
14
|
-
var _reactFeather = require("react-feather");
|
|
15
|
-
|
|
16
|
-
var _reactHookForm = require("react-hook-form");
|
|
17
|
-
|
|
18
|
-
var _reactRainbowComponents = require("react-rainbow-components");
|
|
19
|
-
|
|
20
|
-
var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
|
|
21
|
-
|
|
22
|
-
var _uuid = require("uuid");
|
|
23
|
-
|
|
24
|
-
var yup = _interopRequireWildcard(require("yup"));
|
|
25
|
-
|
|
26
|
-
var _styleContext = require("./styleContext");
|
|
27
|
-
|
|
28
|
-
var _type = require("./type");
|
|
29
|
-
|
|
30
|
-
var _format = require("./format");
|
|
31
|
-
|
|
32
|
-
var _index = require("./inputs/index");
|
|
33
|
-
|
|
34
|
-
var _index2 = require("./resolvers/index");
|
|
35
|
-
|
|
36
|
-
var _Option = require("./Option");
|
|
37
|
-
|
|
38
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
39
|
-
|
|
40
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
41
|
-
|
|
42
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
43
|
-
|
|
44
|
-
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
45
|
-
|
|
46
|
-
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
47
|
-
|
|
48
|
-
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
49
|
-
|
|
50
|
-
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
51
|
-
|
|
52
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
53
|
-
|
|
54
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
55
|
-
|
|
56
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
57
|
-
|
|
58
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
59
|
-
|
|
60
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
61
|
-
|
|
62
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
63
|
-
|
|
64
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
65
|
-
|
|
66
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
69
|
-
|
|
70
|
-
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; }
|
|
71
|
-
|
|
72
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
73
|
-
|
|
74
|
-
var usePrevious = function usePrevious(value) {
|
|
75
|
-
// The ref object is a generic container whose current property is mutable ...
|
|
76
|
-
// ... and can hold any value, similar to an instance property on a class
|
|
77
|
-
var ref = (0, _react.useRef)(); // Store current value in ref
|
|
78
|
-
|
|
79
|
-
(0, _react.useEffect)(function () {
|
|
80
|
-
ref.current = JSON.parse(JSON.stringify(value));
|
|
81
|
-
}, [value]); // Only re-run if value changes
|
|
82
|
-
// Return previous value (happens before update in useEffect above)
|
|
83
|
-
|
|
84
|
-
return ref.current;
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
var BasicWrapper = function BasicWrapper(_ref) {
|
|
88
|
-
var entry = _ref.entry,
|
|
89
|
-
className = _ref.className,
|
|
90
|
-
label = _ref.label,
|
|
91
|
-
error = _ref.error,
|
|
92
|
-
help = _ref.help,
|
|
93
|
-
children = _ref.children,
|
|
94
|
-
render = _ref.render;
|
|
95
|
-
var classes = (0, _styleContext.useCustomStyle)();
|
|
96
|
-
var id = (0, _uuid.v4)();
|
|
97
|
-
|
|
98
|
-
if (_typeof(entry) === 'object') {
|
|
99
|
-
return children;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
if (render) {
|
|
103
|
-
return render({
|
|
104
|
-
entry: entry,
|
|
105
|
-
label: label,
|
|
106
|
-
error: error,
|
|
107
|
-
help: help,
|
|
108
|
-
children: children
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
113
|
-
className: "form-group mt-3 ".concat(className)
|
|
114
|
-
}, label && /*#__PURE__*/_react["default"].createElement("label", {
|
|
115
|
-
className: "form-label d-flex align-content-center",
|
|
116
|
-
htmlFor: entry
|
|
117
|
-
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
118
|
-
className: "mr-2"
|
|
119
|
-
}, label), help && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactTooltip["default"], {
|
|
120
|
-
html: true,
|
|
121
|
-
place: 'bottom',
|
|
122
|
-
id: id
|
|
123
|
-
}), /*#__PURE__*/_react["default"].createElement("span", {
|
|
124
|
-
"data-html": true,
|
|
125
|
-
"data-tip": help,
|
|
126
|
-
"data-for": id
|
|
127
|
-
}, /*#__PURE__*/_react["default"].createElement(_reactFeather.HelpCircle, {
|
|
128
|
-
style: {
|
|
129
|
-
color: 'gray',
|
|
130
|
-
width: 17,
|
|
131
|
-
marginLeft: '.5rem',
|
|
132
|
-
cursor: 'help'
|
|
133
|
-
}
|
|
134
|
-
})))), children, error && /*#__PURE__*/_react["default"].createElement("div", {
|
|
135
|
-
className: classes.invalid_feedback
|
|
136
|
-
}, error.message));
|
|
137
|
-
};
|
|
138
|
-
|
|
139
|
-
var CustomizableInput = function CustomizableInput(props) {
|
|
140
|
-
if (props.render) {
|
|
141
|
-
return props.render(_objectSpread(_objectSpread({}, props.field), {}, {
|
|
142
|
-
error: props.error
|
|
143
|
-
}));
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
return props.children;
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
var defaultVal = function defaultVal(t, array, defaultValue) {
|
|
150
|
-
if (!!defaultValue) return defaultValue;
|
|
151
|
-
if (!!array) return [];
|
|
152
|
-
|
|
153
|
-
switch (t) {
|
|
154
|
-
case _type.type.bool:
|
|
155
|
-
return false;
|
|
156
|
-
|
|
157
|
-
case _type.type.number:
|
|
158
|
-
return 0;
|
|
159
|
-
|
|
160
|
-
case _type.type.object:
|
|
161
|
-
return undefined;
|
|
162
|
-
//todo: passur de moi
|
|
163
|
-
|
|
164
|
-
case _type.type.string:
|
|
165
|
-
return "";
|
|
166
|
-
|
|
167
|
-
default:
|
|
168
|
-
return undefined;
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
var getDefaultValues = function getDefaultValues(flow, schema) {
|
|
173
|
-
return flow.reduce(function (acc, key) {
|
|
174
|
-
if (_typeof(key) === 'object') {
|
|
175
|
-
return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
var entry = schema[key];
|
|
179
|
-
|
|
180
|
-
if (!entry) {
|
|
181
|
-
return acc;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, defaultVal(entry.type, entry.array || entry.isMulti, entry.defaultValue)));
|
|
185
|
-
}, {});
|
|
186
|
-
};
|
|
187
|
-
|
|
188
|
-
var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
|
|
189
|
-
var schema = _ref2.schema,
|
|
190
|
-
flow = _ref2.flow,
|
|
191
|
-
value = _ref2.value,
|
|
192
|
-
inputWrapper = _ref2.inputWrapper,
|
|
193
|
-
onSubmit = _ref2.onSubmit,
|
|
194
|
-
_ref2$onError = _ref2.onError,
|
|
195
|
-
onError = _ref2$onError === void 0 ? function () {} : _ref2$onError,
|
|
196
|
-
footer = _ref2.footer,
|
|
197
|
-
_ref2$style = _ref2.style,
|
|
198
|
-
style = _ref2$style === void 0 ? {} : _ref2$style,
|
|
199
|
-
className = _ref2.className,
|
|
200
|
-
_ref2$options = _ref2.options,
|
|
201
|
-
options = _ref2$options === void 0 ? {} : _ref2$options;
|
|
202
|
-
var classes = (0, _styleContext.useCustomStyle)(style);
|
|
203
|
-
var formFlow = flow || Object.keys(schema);
|
|
204
|
-
|
|
205
|
-
var maybeCustomHttpClient = function maybeCustomHttpClient(url, method) {
|
|
206
|
-
//todo: if present props.resolve()
|
|
207
|
-
if (options.httpClient) {
|
|
208
|
-
return options.httpClient(url, method);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
return fetch(url, {
|
|
212
|
-
method: method,
|
|
213
|
-
headers: {
|
|
214
|
-
Accept: 'application/json',
|
|
215
|
-
'Content-Type': 'application/json'
|
|
216
|
-
}
|
|
217
|
-
});
|
|
218
|
-
};
|
|
219
|
-
|
|
220
|
-
var defaultValues = getDefaultValues(formFlow, schema); //FIXME: get real schema through the switch
|
|
221
|
-
|
|
222
|
-
var _resolver = function resolver(rawData) {
|
|
223
|
-
var _getShapeAndDependenc = (0, _index2.getShapeAndDependencies)(formFlow, schema, [], rawData),
|
|
224
|
-
shape = _getShapeAndDependenc.shape,
|
|
225
|
-
dependencies = _getShapeAndDependenc.dependencies;
|
|
226
|
-
|
|
227
|
-
var resolver = yup.object().shape(shape, dependencies);
|
|
228
|
-
return resolver;
|
|
229
|
-
};
|
|
230
|
-
|
|
231
|
-
var cleanInputArray = function cleanInputArray(obj, subSchema) {
|
|
232
|
-
return Object.entries(obj).reduce(function (acc, curr) {
|
|
233
|
-
var _curr = _slicedToArray(curr, 2),
|
|
234
|
-
key = _curr[0],
|
|
235
|
-
v = _curr[1];
|
|
236
|
-
|
|
237
|
-
if (Array.isArray(v)) {
|
|
238
|
-
var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
|
|
239
|
-
return s[key];
|
|
240
|
-
}).map(function (entry) {
|
|
241
|
-
return !!entry.array && !entry.render;
|
|
242
|
-
}).getOrElse(false);
|
|
243
|
-
|
|
244
|
-
if (isArray) {
|
|
245
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (value) {
|
|
246
|
-
return {
|
|
247
|
-
value: value
|
|
248
|
-
};
|
|
249
|
-
})));
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
|
|
253
|
-
} else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
|
|
254
|
-
var _subSchema$key;
|
|
255
|
-
|
|
256
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_subSchema$key = subSchema[key]) === null || _subSchema$key === void 0 ? void 0 : _subSchema$key.schema) || {})));
|
|
257
|
-
} else {
|
|
258
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
|
|
259
|
-
}
|
|
260
|
-
}, {});
|
|
261
|
-
};
|
|
262
|
-
|
|
263
|
-
var cleanOutputArray = function cleanOutputArray(obj, subSchema) {
|
|
264
|
-
return Object.entries(obj).reduce(function (acc, curr) {
|
|
265
|
-
var _curr2 = _slicedToArray(curr, 2),
|
|
266
|
-
key = _curr2[0],
|
|
267
|
-
v = _curr2[1];
|
|
268
|
-
|
|
269
|
-
if (Array.isArray(v)) {
|
|
270
|
-
var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
|
|
271
|
-
return s[key];
|
|
272
|
-
}).map(function (entry) {
|
|
273
|
-
return !!entry.array && !entry.render;
|
|
274
|
-
}).getOrElse(false);
|
|
275
|
-
|
|
276
|
-
if (isArray) {
|
|
277
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (_ref3) {
|
|
278
|
-
var value = _ref3.value;
|
|
279
|
-
return value;
|
|
280
|
-
})));
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
|
|
284
|
-
} else if (!!v && _typeof(v) === 'object' && !(v instanceof Date)) {
|
|
285
|
-
var _subSchema$key2;
|
|
286
|
-
|
|
287
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_subSchema$key2 = subSchema[key]) === null || _subSchema$key2 === void 0 ? void 0 : _subSchema$key2.schema) || {})));
|
|
288
|
-
} else {
|
|
289
|
-
return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
|
|
290
|
-
}
|
|
291
|
-
}, {});
|
|
292
|
-
};
|
|
293
|
-
|
|
294
|
-
var methods = (0, _reactHookForm.useForm)({
|
|
295
|
-
resolver: function resolver(data, context, options) {
|
|
296
|
-
return (0, _yup.yupResolver)(_resolver(data))(data, context, options);
|
|
297
|
-
},
|
|
298
|
-
defaultValues: cleanInputArray(value || defaultValues, schema),
|
|
299
|
-
shouldFocusError: !options.autosubmit
|
|
300
|
-
});
|
|
301
|
-
var register = methods.register,
|
|
302
|
-
_handleSubmit = methods.handleSubmit,
|
|
303
|
-
errors = methods.formState.errors,
|
|
304
|
-
control = methods.control,
|
|
305
|
-
_reset = methods.reset,
|
|
306
|
-
watch = methods.watch,
|
|
307
|
-
trigger = methods.trigger,
|
|
308
|
-
getValues = methods.getValues,
|
|
309
|
-
setValue = methods.setValue;
|
|
310
|
-
(0, _react.useEffect)(function () {
|
|
311
|
-
if (value) {
|
|
312
|
-
_reset(cleanInputArray(value, schema));
|
|
313
|
-
}
|
|
314
|
-
}, [value, _reset]);
|
|
315
|
-
(0, _react.useEffect)(function () {
|
|
316
|
-
_reset(cleanInputArray(value || defaultValues, schema));
|
|
317
|
-
}, [schema]);
|
|
318
|
-
var data = watch();
|
|
319
|
-
var prevData = usePrevious(data);
|
|
320
|
-
(0, _react.useEffect)(function () {
|
|
321
|
-
//todo: with debounce
|
|
322
|
-
if (!!options.autosubmit && JSON.stringify(data) !== JSON.stringify(prevData)) {
|
|
323
|
-
_handleSubmit(function (data) {
|
|
324
|
-
var clean = cleanOutputArray(data, schema);
|
|
325
|
-
onSubmit(clean);
|
|
326
|
-
}, onError)();
|
|
327
|
-
}
|
|
328
|
-
}, [data]);
|
|
329
|
-
|
|
330
|
-
if (options.watch) {
|
|
331
|
-
if (typeof options.watch === 'function') {
|
|
332
|
-
options.watch(watch());
|
|
333
|
-
} else {
|
|
334
|
-
console.group('react-form watch');
|
|
335
|
-
console.log(watch());
|
|
336
|
-
console.groupEnd();
|
|
337
|
-
}
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
(0, _react.useImperativeHandle)(ref, function () {
|
|
341
|
-
return {
|
|
342
|
-
handleSubmit: function handleSubmit() {
|
|
343
|
-
return _handleSubmit(function (data) {
|
|
344
|
-
var clean = cleanOutputArray(data, schema);
|
|
345
|
-
onSubmit(clean);
|
|
346
|
-
}, onError)();
|
|
347
|
-
}
|
|
348
|
-
};
|
|
349
|
-
});
|
|
350
|
-
|
|
351
|
-
var functionalProperty = function functionalProperty(entry, prop) {
|
|
352
|
-
if (typeof prop === 'function') {
|
|
353
|
-
return prop({
|
|
354
|
-
rawValues: getValues(),
|
|
355
|
-
value: getValues(entry)
|
|
356
|
-
});
|
|
357
|
-
} else {
|
|
358
|
-
return prop;
|
|
359
|
-
}
|
|
360
|
-
};
|
|
361
|
-
|
|
362
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement("form", {
|
|
363
|
-
className: className || "".concat(classes.pr_15, " ").concat(classes.full_width),
|
|
364
|
-
onSubmit: _handleSubmit(function (data) {
|
|
365
|
-
var clean = cleanOutputArray(data, schema);
|
|
366
|
-
onSubmit(clean);
|
|
367
|
-
}, onError)
|
|
368
|
-
}, formFlow.map(function (entry, idx) {
|
|
369
|
-
var step = schema[entry];
|
|
370
|
-
|
|
371
|
-
if (!step && typeof entry === 'string') {
|
|
372
|
-
console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
|
|
373
|
-
return null;
|
|
374
|
-
}
|
|
375
|
-
|
|
376
|
-
var error = _typeof(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
|
|
377
|
-
return object && object[key];
|
|
378
|
-
}, errors);
|
|
379
|
-
var visibleStep = (0, _Option.option)(step).map(function (s) {
|
|
380
|
-
return s.visible;
|
|
381
|
-
}).map(function (visible) {
|
|
382
|
-
switch (_typeof(visible)) {
|
|
383
|
-
case 'object':
|
|
384
|
-
var _value = watch(step.visible.ref);
|
|
385
|
-
|
|
386
|
-
return (0, _Option.option)(step.visible.test).map(function (test) {
|
|
387
|
-
return test(_value);
|
|
388
|
-
}).getOrElse(_value);
|
|
389
|
-
|
|
390
|
-
case 'boolean':
|
|
391
|
-
return visible;
|
|
392
|
-
|
|
393
|
-
default:
|
|
394
|
-
return true;
|
|
395
|
-
}
|
|
396
|
-
}).getOrElse(true);
|
|
397
|
-
|
|
398
|
-
if (!visibleStep) {
|
|
399
|
-
return null;
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
|
|
403
|
-
key: "".concat(entry, "-").concat(idx),
|
|
404
|
-
entry: entry,
|
|
405
|
-
error: error,
|
|
406
|
-
label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),
|
|
407
|
-
help: step === null || step === void 0 ? void 0 : step.help,
|
|
408
|
-
render: inputWrapper
|
|
409
|
-
}, /*#__PURE__*/_react["default"].createElement(Step, {
|
|
410
|
-
key: idx,
|
|
411
|
-
entry: entry,
|
|
412
|
-
step: step,
|
|
413
|
-
error: error,
|
|
414
|
-
errors: errors,
|
|
415
|
-
register: register,
|
|
416
|
-
schema: schema,
|
|
417
|
-
control: control,
|
|
418
|
-
trigger: trigger,
|
|
419
|
-
getValues: getValues,
|
|
420
|
-
setValue: setValue,
|
|
421
|
-
watch: watch,
|
|
422
|
-
inputWrapper: inputWrapper,
|
|
423
|
-
httpClient: maybeCustomHttpClient,
|
|
424
|
-
functionalProperty: functionalProperty
|
|
425
|
-
}));
|
|
426
|
-
}), /*#__PURE__*/_react["default"].createElement(Footer, {
|
|
427
|
-
render: footer,
|
|
428
|
-
reset: function reset() {
|
|
429
|
-
return _reset(defaultValues);
|
|
430
|
-
},
|
|
431
|
-
valid: _handleSubmit(function (data) {
|
|
432
|
-
return onSubmit(cleanOutputArray(data, schema));
|
|
433
|
-
}, onError),
|
|
434
|
-
actions: options.actions
|
|
435
|
-
})));
|
|
436
|
-
});
|
|
437
|
-
|
|
438
|
-
exports.Form = Form;
|
|
439
|
-
|
|
440
|
-
var Footer = function Footer(props) {
|
|
441
|
-
var _props$actions, _props$actions$submit, _props$actions2, _props$actions2$submi, _props$actions3, _props$actions3$cance, _props$actions5, _props$actions5$cance, _props$actions6, _props$actions6$reset, _props$actions7, _props$actions7$reset, _props$actions8, _props$actions8$submi;
|
|
442
|
-
|
|
443
|
-
var classes = (0, _styleContext.useCustomStyle)();
|
|
444
|
-
|
|
445
|
-
if (props.render) {
|
|
446
|
-
return props.render({
|
|
447
|
-
reset: props.reset,
|
|
448
|
-
valid: props.valid
|
|
449
|
-
});
|
|
450
|
-
}
|
|
451
|
-
|
|
452
|
-
var isSubmitDisplayed = ((_props$actions = props.actions) === null || _props$actions === void 0 ? void 0 : (_props$actions$submit = _props$actions.submit) === null || _props$actions$submit === void 0 ? void 0 : _props$actions$submit.display) === undefined ? true : !!((_props$actions2 = props.actions) !== null && _props$actions2 !== void 0 && (_props$actions2$submi = _props$actions2.submit) !== null && _props$actions2$submi !== void 0 && _props$actions2$submi.display);
|
|
453
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
454
|
-
className: "".concat(classes.flex, " ").concat(classes.jc_end, " ").concat(classes.mt_5)
|
|
455
|
-
}, ((_props$actions3 = props.actions) === null || _props$actions3 === void 0 ? void 0 : (_props$actions3$cance = _props$actions3.cancel) === null || _props$actions3$cance === void 0 ? void 0 : _props$actions3$cance.display) && /*#__PURE__*/_react["default"].createElement("button", {
|
|
456
|
-
className: "".concat(classes.btn, " ").concat(classes.btn_red),
|
|
457
|
-
type: "button",
|
|
458
|
-
onClick: function onClick() {
|
|
459
|
-
var _props$actions4;
|
|
460
|
-
|
|
461
|
-
return (_props$actions4 = props.actions) === null || _props$actions4 === void 0 ? void 0 : _props$actions4.cancel.action();
|
|
462
|
-
}
|
|
463
|
-
}, ((_props$actions5 = props.actions) === null || _props$actions5 === void 0 ? void 0 : (_props$actions5$cance = _props$actions5.cancel) === null || _props$actions5$cance === void 0 ? void 0 : _props$actions5$cance.label) || 'Cancel'), ((_props$actions6 = props.actions) === null || _props$actions6 === void 0 ? void 0 : (_props$actions6$reset = _props$actions6.reset) === null || _props$actions6$reset === void 0 ? void 0 : _props$actions6$reset.display) && /*#__PURE__*/_react["default"].createElement("button", {
|
|
464
|
-
className: "".concat(classes.btn, " ").concat(classes.btn_red),
|
|
465
|
-
type: "button",
|
|
466
|
-
onClick: props.reset
|
|
467
|
-
}, ((_props$actions7 = props.actions) === null || _props$actions7 === void 0 ? void 0 : (_props$actions7$reset = _props$actions7.reset) === null || _props$actions7$reset === void 0 ? void 0 : _props$actions7$reset.label) || 'Reset'), isSubmitDisplayed && /*#__PURE__*/_react["default"].createElement("button", {
|
|
468
|
-
className: "".concat(classes.btn, " ").concat(classes.btn_green, " ").concat(classes.ml_10),
|
|
469
|
-
type: "submit"
|
|
470
|
-
}, ((_props$actions8 = props.actions) === null || _props$actions8 === void 0 ? void 0 : (_props$actions8$submi = _props$actions8.submit) === null || _props$actions8$submi === void 0 ? void 0 : _props$actions8$submi.label) || 'Save'));
|
|
471
|
-
};
|
|
472
|
-
|
|
473
|
-
var Step = function Step(_ref4) {
|
|
474
|
-
var entry = _ref4.entry,
|
|
475
|
-
realEntry = _ref4.realEntry,
|
|
476
|
-
step = _ref4.step,
|
|
477
|
-
error = _ref4.error,
|
|
478
|
-
errors = _ref4.errors,
|
|
479
|
-
register = _ref4.register,
|
|
480
|
-
schema = _ref4.schema,
|
|
481
|
-
control = _ref4.control,
|
|
482
|
-
trigger = _ref4.trigger,
|
|
483
|
-
getValues = _ref4.getValues,
|
|
484
|
-
_setValue = _ref4.setValue,
|
|
485
|
-
watch = _ref4.watch,
|
|
486
|
-
inputWrapper = _ref4.inputWrapper,
|
|
487
|
-
httpClient = _ref4.httpClient,
|
|
488
|
-
defaultValue = _ref4.defaultValue,
|
|
489
|
-
index = _ref4.index,
|
|
490
|
-
functionalProperty = _ref4.functionalProperty;
|
|
491
|
-
var classes = (0, _styleContext.useCustomStyle)();
|
|
492
|
-
|
|
493
|
-
if (entry && _typeof(entry) === 'object') {
|
|
494
|
-
var errored = entry.flow.some(function (step) {
|
|
495
|
-
return !!errors[step];
|
|
496
|
-
});
|
|
497
|
-
return /*#__PURE__*/_react["default"].createElement(_index.Collapse, _extends({}, entry, {
|
|
498
|
-
errored: errored
|
|
499
|
-
}), entry.flow.map(function (en, entryIdx) {
|
|
500
|
-
var stp = schema[en];
|
|
501
|
-
var err = _typeof(en) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
|
|
502
|
-
return object && object[key];
|
|
503
|
-
}, errors);
|
|
504
|
-
|
|
505
|
-
if (!stp && typeof en === 'string') {
|
|
506
|
-
console.error("no step found for the entry \"".concat(en, "\" in the given schema. Your form might not work properly. Please fix it"));
|
|
507
|
-
return null;
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
var visibleStep = (0, _Option.option)(stp).map(function (s) {
|
|
511
|
-
return s.visible;
|
|
512
|
-
}).map(function (visible) {
|
|
513
|
-
switch (_typeof(visible)) {
|
|
514
|
-
case 'object':
|
|
515
|
-
var value = watch(visible.ref);
|
|
516
|
-
return (0, _Option.option)(visible.test).map(function (test) {
|
|
517
|
-
return test(value);
|
|
518
|
-
}).getOrElse(value);
|
|
519
|
-
|
|
520
|
-
case 'boolean':
|
|
521
|
-
return visible;
|
|
522
|
-
|
|
523
|
-
default:
|
|
524
|
-
return true;
|
|
525
|
-
}
|
|
526
|
-
}).getOrElse(true);
|
|
527
|
-
|
|
528
|
-
if (!visibleStep) {
|
|
529
|
-
return null;
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
|
|
533
|
-
key: "collapse-".concat(en, "-").concat(entryIdx),
|
|
534
|
-
entry: en,
|
|
535
|
-
error: err,
|
|
536
|
-
label: functionalProperty(en, (stp === null || stp === void 0 ? void 0 : stp.label) === null ? null : (stp === null || stp === void 0 ? void 0 : stp.label) || en),
|
|
537
|
-
help: stp === null || stp === void 0 ? void 0 : stp.help,
|
|
538
|
-
render: inputWrapper
|
|
539
|
-
}, /*#__PURE__*/_react["default"].createElement(Step, {
|
|
540
|
-
entry: en,
|
|
541
|
-
step: stp,
|
|
542
|
-
error: err,
|
|
543
|
-
errors: errors,
|
|
544
|
-
register: register,
|
|
545
|
-
schema: schema,
|
|
546
|
-
control: control,
|
|
547
|
-
trigger: trigger,
|
|
548
|
-
getValues: getValues,
|
|
549
|
-
setValue: _setValue,
|
|
550
|
-
watch: watch,
|
|
551
|
-
inputWrapper: inputWrapper,
|
|
552
|
-
httpClient: httpClient,
|
|
553
|
-
defaultValue: stp === null || stp === void 0 ? void 0 : stp.defaultValue,
|
|
554
|
-
functionalProperty: functionalProperty
|
|
555
|
-
}));
|
|
556
|
-
}));
|
|
557
|
-
}
|
|
558
|
-
|
|
559
|
-
if (step.array) {
|
|
560
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
561
|
-
render: step.render,
|
|
562
|
-
field: {
|
|
563
|
-
setValue: function setValue(key, value) {
|
|
564
|
-
return _setValue(key, value);
|
|
565
|
-
},
|
|
566
|
-
rawValues: getValues(),
|
|
567
|
-
value: getValues(entry),
|
|
568
|
-
onChange: function onChange(v) {
|
|
569
|
-
return _setValue(entry, v);
|
|
570
|
-
}
|
|
571
|
-
},
|
|
572
|
-
error: error
|
|
573
|
-
}, /*#__PURE__*/_react["default"].createElement(ArrayStep, {
|
|
574
|
-
entry: entry,
|
|
575
|
-
step: step,
|
|
576
|
-
trigger: trigger,
|
|
577
|
-
register: register,
|
|
578
|
-
control: control,
|
|
579
|
-
error: error,
|
|
580
|
-
setValue: _setValue,
|
|
581
|
-
values: getValues(entry),
|
|
582
|
-
defaultValue: step.defaultValue || defaultVal(step.type),
|
|
583
|
-
getValues: getValues,
|
|
584
|
-
disabled: functionalProperty(entry, step.disabled),
|
|
585
|
-
component: function component(props, idx) {
|
|
586
|
-
var _error$idx;
|
|
587
|
-
|
|
588
|
-
return /*#__PURE__*/_react["default"].createElement(Step, {
|
|
589
|
-
entry: "".concat(entry, "[").concat(idx, "].value"),
|
|
590
|
-
step: _objectSpread(_objectSpread({}, schema[realEntry || entry]), {}, {
|
|
591
|
-
render: step.itemRender,
|
|
592
|
-
onChange: undefined,
|
|
593
|
-
array: false
|
|
594
|
-
}),
|
|
595
|
-
error: error && ((_error$idx = error[idx]) === null || _error$idx === void 0 ? void 0 : _error$idx.value),
|
|
596
|
-
register: register,
|
|
597
|
-
schema: schema,
|
|
598
|
-
control: control,
|
|
599
|
-
trigger: trigger,
|
|
600
|
-
getValues: getValues,
|
|
601
|
-
setValue: _setValue,
|
|
602
|
-
watch: watch,
|
|
603
|
-
inputWrapper: inputWrapper,
|
|
604
|
-
httpClient: httpClient,
|
|
605
|
-
defaultValue: props.defaultValue,
|
|
606
|
-
value: props.value,
|
|
607
|
-
index: idx,
|
|
608
|
-
functionalProperty: functionalProperty
|
|
609
|
-
});
|
|
610
|
-
}
|
|
611
|
-
}));
|
|
612
|
-
}
|
|
613
|
-
|
|
614
|
-
var registeredInput = register(entry);
|
|
615
|
-
|
|
616
|
-
var inputProps = _objectSpread(_objectSpread({}, registeredInput), {}, {
|
|
617
|
-
onChange: function onChange(e) {
|
|
618
|
-
registeredInput.onChange(e);
|
|
619
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
620
|
-
return onChange({
|
|
621
|
-
rawValues: getValues(),
|
|
622
|
-
value: e.target.value,
|
|
623
|
-
setValue: _setValue
|
|
624
|
-
});
|
|
625
|
-
});
|
|
626
|
-
}
|
|
627
|
-
});
|
|
628
|
-
|
|
629
|
-
switch (step.type) {
|
|
630
|
-
case _type.type.string:
|
|
631
|
-
switch (step.format) {
|
|
632
|
-
case _format.format.text:
|
|
633
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
634
|
-
render: step.render,
|
|
635
|
-
field: {
|
|
636
|
-
setValue: function setValue(key, value) {
|
|
637
|
-
return _setValue(key, value);
|
|
638
|
-
},
|
|
639
|
-
rawValues: getValues(),
|
|
640
|
-
value: getValues(entry),
|
|
641
|
-
onChange: function onChange(v) {
|
|
642
|
-
return _setValue(entry, v);
|
|
643
|
-
}
|
|
644
|
-
},
|
|
645
|
-
error: error
|
|
646
|
-
}, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
|
|
647
|
-
type: "text",
|
|
648
|
-
id: entry,
|
|
649
|
-
className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
|
|
650
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null
|
|
651
|
-
}, step.props, {
|
|
652
|
-
defaultValue: defaultValue,
|
|
653
|
-
placeholder: step.placeholder
|
|
654
|
-
}, inputProps)));
|
|
655
|
-
|
|
656
|
-
case _format.format.code:
|
|
657
|
-
case _format.format.singleLineCode:
|
|
658
|
-
var Component = step.format === _format.format.code ? _index.CodeInput : _index.SingleLineCode;
|
|
659
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
660
|
-
name: entry,
|
|
661
|
-
control: control,
|
|
662
|
-
render: function render(_ref5) {
|
|
663
|
-
var field = _ref5.field;
|
|
664
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
665
|
-
render: step.render,
|
|
666
|
-
field: _objectSpread({
|
|
667
|
-
setValue: function setValue(key, value) {
|
|
668
|
-
return _setValue(key, value);
|
|
669
|
-
},
|
|
670
|
-
rawValues: getValues()
|
|
671
|
-
}, field),
|
|
672
|
-
error: error
|
|
673
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, _extends({
|
|
674
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
|
|
675
|
-
readOnly: functionalProperty(entry, step.disabled) ? true : false,
|
|
676
|
-
onChange: function onChange(e) {
|
|
677
|
-
field.onChange(e);
|
|
678
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
679
|
-
return onChange({
|
|
680
|
-
rawValues: getValues(),
|
|
681
|
-
value: e,
|
|
682
|
-
setValue: _setValue
|
|
683
|
-
});
|
|
684
|
-
});
|
|
685
|
-
},
|
|
686
|
-
value: field.value,
|
|
687
|
-
defaultValue: defaultValue
|
|
688
|
-
}, step.props)));
|
|
689
|
-
}
|
|
690
|
-
});
|
|
691
|
-
|
|
692
|
-
case _format.format.markdown:
|
|
693
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
694
|
-
name: entry,
|
|
695
|
-
control: control,
|
|
696
|
-
render: function render(_ref6) {
|
|
697
|
-
var field = _ref6.field;
|
|
698
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
699
|
-
render: step.render,
|
|
700
|
-
field: _objectSpread({
|
|
701
|
-
setValue: function setValue(key, value) {
|
|
702
|
-
return _setValue(key, value);
|
|
703
|
-
},
|
|
704
|
-
rawValues: getValues()
|
|
705
|
-
}, field),
|
|
706
|
-
error: error
|
|
707
|
-
}, /*#__PURE__*/_react["default"].createElement(_index.MarkdownInput, _extends({}, step.props, {
|
|
708
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
|
|
709
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
710
|
-
onChange: function onChange(e) {
|
|
711
|
-
field.onChange(e);
|
|
712
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
713
|
-
return onChange({
|
|
714
|
-
rawValues: getValues(),
|
|
715
|
-
value: e,
|
|
716
|
-
setValue: _setValue
|
|
717
|
-
});
|
|
718
|
-
});
|
|
719
|
-
},
|
|
720
|
-
value: field.value,
|
|
721
|
-
defaultValue: defaultValue
|
|
722
|
-
}, step)));
|
|
723
|
-
}
|
|
724
|
-
});
|
|
725
|
-
|
|
726
|
-
case _format.format.buttonsSelect:
|
|
727
|
-
case _format.format.select:
|
|
728
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
729
|
-
name: entry,
|
|
730
|
-
control: control,
|
|
731
|
-
render: function render(_ref7) {
|
|
732
|
-
var field = _ref7.field;
|
|
733
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
734
|
-
render: step.render,
|
|
735
|
-
field: _objectSpread({
|
|
736
|
-
setValue: function setValue(key, value) {
|
|
737
|
-
return _setValue(key, value);
|
|
738
|
-
},
|
|
739
|
-
rawValues: getValues()
|
|
740
|
-
}, field),
|
|
741
|
-
error: error
|
|
742
|
-
}, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
|
|
743
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
|
|
744
|
-
disabled: functionalProperty(entry, step.disabled),
|
|
745
|
-
value: field.value,
|
|
746
|
-
possibleValues: step.options,
|
|
747
|
-
defaultValue: defaultValue,
|
|
748
|
-
httpClient: httpClient,
|
|
749
|
-
onChange: function onChange(value) {
|
|
750
|
-
field.onChange(value);
|
|
751
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
752
|
-
return onChange({
|
|
753
|
-
rawValues: getValues(),
|
|
754
|
-
value: value,
|
|
755
|
-
setValue: _setValue
|
|
756
|
-
});
|
|
757
|
-
});
|
|
758
|
-
}
|
|
759
|
-
})));
|
|
760
|
-
}
|
|
761
|
-
});
|
|
762
|
-
|
|
763
|
-
default:
|
|
764
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
765
|
-
render: step.render,
|
|
766
|
-
field: {
|
|
767
|
-
setValue: function setValue(key, value) {
|
|
768
|
-
return _setValue(key, value);
|
|
769
|
-
},
|
|
770
|
-
rawValues: getValues(),
|
|
771
|
-
value: getValues(entry),
|
|
772
|
-
onChange: function onChange(v) {
|
|
773
|
-
return _setValue(entry, v, {
|
|
774
|
-
shouldValidate: true
|
|
775
|
-
});
|
|
776
|
-
}
|
|
777
|
-
},
|
|
778
|
-
error: error
|
|
779
|
-
}, /*#__PURE__*/_react["default"].createElement("input", _extends({
|
|
780
|
-
type: step.format || 'text',
|
|
781
|
-
id: entry,
|
|
782
|
-
className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
|
|
783
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
784
|
-
defaultValue: defaultValue,
|
|
785
|
-
placeholder: step.placeholder
|
|
786
|
-
}, inputProps)));
|
|
787
|
-
}
|
|
788
|
-
|
|
789
|
-
case _type.type.number:
|
|
790
|
-
switch (step.format) {
|
|
791
|
-
case _format.format.buttonsSelect:
|
|
792
|
-
case _format.format.select:
|
|
793
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
794
|
-
name: entry,
|
|
795
|
-
control: control,
|
|
796
|
-
render: function render(_ref8) {
|
|
797
|
-
var field = _ref8.field;
|
|
798
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
799
|
-
render: step.render,
|
|
800
|
-
field: _objectSpread({
|
|
801
|
-
setValue: function setValue(key, value) {
|
|
802
|
-
return _setValue(key, value);
|
|
803
|
-
},
|
|
804
|
-
rawValues: getValues()
|
|
805
|
-
}, field),
|
|
806
|
-
error: error
|
|
807
|
-
}, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
|
|
808
|
-
className: (0, _classnames["default"])(classes.content, _defineProperty({}, classes.input__invalid, error)),
|
|
809
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
810
|
-
onChange: function onChange(e) {
|
|
811
|
-
field.onChange(e);
|
|
812
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
813
|
-
return onChange({
|
|
814
|
-
rawValues: getValues(),
|
|
815
|
-
value: e,
|
|
816
|
-
setValue: _setValue
|
|
817
|
-
});
|
|
818
|
-
});
|
|
819
|
-
},
|
|
820
|
-
value: field.value,
|
|
821
|
-
possibleValues: step.options,
|
|
822
|
-
defaultValue: defaultValue,
|
|
823
|
-
httpClient: httpClient
|
|
824
|
-
})));
|
|
825
|
-
}
|
|
826
|
-
});
|
|
827
|
-
|
|
828
|
-
default:
|
|
829
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
830
|
-
render: step.render,
|
|
831
|
-
field: {
|
|
832
|
-
setValue: function setValue(key, value) {
|
|
833
|
-
return _setValue(key, value);
|
|
834
|
-
},
|
|
835
|
-
rawValues: getValues(),
|
|
836
|
-
value: getValues(entry),
|
|
837
|
-
onChange: function onChange(v) {
|
|
838
|
-
return _setValue(entry, v);
|
|
839
|
-
}
|
|
840
|
-
},
|
|
841
|
-
error: error
|
|
842
|
-
}, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
|
|
843
|
-
type: step.format || 'number',
|
|
844
|
-
id: entry,
|
|
845
|
-
className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
|
|
846
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
847
|
-
name: entry,
|
|
848
|
-
placeholder: step.placeholder,
|
|
849
|
-
defaultValue: defaultValue
|
|
850
|
-
}, inputProps)));
|
|
851
|
-
}
|
|
852
|
-
|
|
853
|
-
case _type.type.bool:
|
|
854
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
855
|
-
name: entry,
|
|
856
|
-
control: control,
|
|
857
|
-
render: function render(_ref9) {
|
|
858
|
-
var field = _ref9.field;
|
|
859
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
860
|
-
render: step.render,
|
|
861
|
-
field: _objectSpread({
|
|
862
|
-
setValue: function setValue(key, value) {
|
|
863
|
-
return _setValue(key, value);
|
|
864
|
-
},
|
|
865
|
-
rawValues: getValues()
|
|
866
|
-
}, field),
|
|
867
|
-
error: error
|
|
868
|
-
}, /*#__PURE__*/_react["default"].createElement(_index.BooleanInput, _extends({}, step.props, {
|
|
869
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
|
|
870
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
871
|
-
onChange: function onChange(e) {
|
|
872
|
-
field.onChange(e);
|
|
873
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
874
|
-
return onChange({
|
|
875
|
-
rawValues: getValues(),
|
|
876
|
-
value: e,
|
|
877
|
-
setValue: _setValue
|
|
878
|
-
});
|
|
879
|
-
});
|
|
880
|
-
},
|
|
881
|
-
value: field.value
|
|
882
|
-
})));
|
|
883
|
-
}
|
|
884
|
-
});
|
|
885
|
-
|
|
886
|
-
case _type.type.object:
|
|
887
|
-
switch (step.format) {
|
|
888
|
-
case _format.format.buttonsSelect:
|
|
889
|
-
case _format.format.select:
|
|
890
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
891
|
-
name: entry,
|
|
892
|
-
control: control,
|
|
893
|
-
defaultValue: step.defaultValue,
|
|
894
|
-
render: function render(_ref10) {
|
|
895
|
-
var field = _ref10.field;
|
|
896
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
897
|
-
render: step.render,
|
|
898
|
-
field: _objectSpread({
|
|
899
|
-
setValue: function setValue(key, value) {
|
|
900
|
-
return _setValue(key, value);
|
|
901
|
-
},
|
|
902
|
-
rawValues: getValues()
|
|
903
|
-
}, field),
|
|
904
|
-
error: error
|
|
905
|
-
}, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, step, {
|
|
906
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
|
|
907
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
908
|
-
onChange: function onChange(e) {
|
|
909
|
-
field.onChange(e);
|
|
910
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
911
|
-
return onChange({
|
|
912
|
-
rawValues: getValues(),
|
|
913
|
-
value: e,
|
|
914
|
-
setValue: _setValue
|
|
915
|
-
});
|
|
916
|
-
});
|
|
917
|
-
},
|
|
918
|
-
value: field.value,
|
|
919
|
-
possibleValues: step.options,
|
|
920
|
-
httpClient: httpClient
|
|
921
|
-
})));
|
|
922
|
-
}
|
|
923
|
-
});
|
|
924
|
-
|
|
925
|
-
case _format.format.form:
|
|
926
|
-
//todo: disabled ?
|
|
927
|
-
var flow = (0, _Option.option)(step.flow).getOrElse((0, _Option.option)(step.schema).map(function (s) {
|
|
928
|
-
return Object.keys(s);
|
|
929
|
-
}).getOrNull());
|
|
930
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
931
|
-
render: step.render,
|
|
932
|
-
field: {
|
|
933
|
-
setValue: function setValue(key, value) {
|
|
934
|
-
return _setValue(key, value);
|
|
935
|
-
},
|
|
936
|
-
rawValues: getValues(),
|
|
937
|
-
value: getValues(entry),
|
|
938
|
-
onChange: function onChange(v) {
|
|
939
|
-
return _setValue(entry, v, {
|
|
940
|
-
shouldValidate: true
|
|
941
|
-
});
|
|
942
|
-
}
|
|
943
|
-
},
|
|
944
|
-
error: error
|
|
945
|
-
}, /*#__PURE__*/_react["default"].createElement(NestedForm, {
|
|
946
|
-
schema: step.schema,
|
|
947
|
-
flow: flow,
|
|
948
|
-
step: step,
|
|
949
|
-
parent: entry,
|
|
950
|
-
inputWrapper: inputWrapper,
|
|
951
|
-
maybeCustomHttpClient: httpClient,
|
|
952
|
-
value: getValues(entry) || defaultValue,
|
|
953
|
-
error: error,
|
|
954
|
-
index: index,
|
|
955
|
-
functionalProperty: functionalProperty
|
|
956
|
-
}));
|
|
957
|
-
|
|
958
|
-
default:
|
|
959
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
960
|
-
name: entry,
|
|
961
|
-
control: control,
|
|
962
|
-
defaultValue: step.defaultValue,
|
|
963
|
-
render: function render(_ref11) {
|
|
964
|
-
var field = _ref11.field;
|
|
965
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
966
|
-
render: step.render,
|
|
967
|
-
field: _objectSpread({
|
|
968
|
-
setValue: function setValue(key, value) {
|
|
969
|
-
return _setValue(key, value);
|
|
970
|
-
},
|
|
971
|
-
rawValues: getValues()
|
|
972
|
-
}, field),
|
|
973
|
-
error: error
|
|
974
|
-
}, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, step, {
|
|
975
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
|
|
976
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
977
|
-
onChange: function onChange(e) {
|
|
978
|
-
field.onChange(e);
|
|
979
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
980
|
-
return onChange({
|
|
981
|
-
rawValues: getValues(),
|
|
982
|
-
value: e,
|
|
983
|
-
setValue: _setValue
|
|
984
|
-
});
|
|
985
|
-
});
|
|
986
|
-
},
|
|
987
|
-
value: field.value,
|
|
988
|
-
possibleValues: step.options
|
|
989
|
-
})));
|
|
990
|
-
}
|
|
991
|
-
});
|
|
992
|
-
}
|
|
993
|
-
|
|
994
|
-
case _type.type.date:
|
|
995
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
996
|
-
name: entry,
|
|
997
|
-
control: control,
|
|
998
|
-
defaultValue: step.defaultValue,
|
|
999
|
-
render: function render(_ref12) {
|
|
1000
|
-
var field = _ref12.field;
|
|
1001
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
1002
|
-
render: step.render,
|
|
1003
|
-
field: _objectSpread({
|
|
1004
|
-
setValue: function setValue(key, value) {
|
|
1005
|
-
return _setValue(key, value);
|
|
1006
|
-
},
|
|
1007
|
-
rawValues: getValues()
|
|
1008
|
-
}, field),
|
|
1009
|
-
error: error
|
|
1010
|
-
}, /*#__PURE__*/_react["default"].createElement(_reactRainbowComponents.DatePicker, _extends({}, step.props, {
|
|
1011
|
-
id: "datePicker-1",
|
|
1012
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
|
|
1013
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
1014
|
-
value: field.value,
|
|
1015
|
-
onChange: function onChange(e) {
|
|
1016
|
-
field.onChange(e);
|
|
1017
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
1018
|
-
return onChange({
|
|
1019
|
-
rawValues: getValues(),
|
|
1020
|
-
value: e,
|
|
1021
|
-
setValue: _setValue
|
|
1022
|
-
});
|
|
1023
|
-
});
|
|
1024
|
-
},
|
|
1025
|
-
formatStyle: "large"
|
|
1026
|
-
})));
|
|
1027
|
-
}
|
|
1028
|
-
});
|
|
1029
|
-
|
|
1030
|
-
case _type.type.file:
|
|
1031
|
-
if (step.format === _format.format.hidden) {
|
|
1032
|
-
return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
|
|
1033
|
-
name: entry,
|
|
1034
|
-
control: control,
|
|
1035
|
-
render: function render(_ref13) {
|
|
1036
|
-
var field = _ref13.field;
|
|
1037
|
-
|
|
1038
|
-
var FileInput = function FileInput(_ref14) {
|
|
1039
|
-
var onChange = _ref14.onChange;
|
|
1040
|
-
|
|
1041
|
-
var _useState = (0, _react.useState)(false),
|
|
1042
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
1043
|
-
uploading = _useState2[0],
|
|
1044
|
-
setUploading = _useState2[1];
|
|
1045
|
-
|
|
1046
|
-
var _useState3 = (0, _react.useState)(undefined),
|
|
1047
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
1048
|
-
input = _useState4[0],
|
|
1049
|
-
setInput = _useState4[1];
|
|
1050
|
-
|
|
1051
|
-
var setFiles = function setFiles(e) {
|
|
1052
|
-
var files = e.target.files;
|
|
1053
|
-
setUploading(true);
|
|
1054
|
-
onChange(files);
|
|
1055
|
-
setUploading(false);
|
|
1056
|
-
};
|
|
1057
|
-
|
|
1058
|
-
var trigger = function trigger() {
|
|
1059
|
-
input.click();
|
|
1060
|
-
};
|
|
1061
|
-
|
|
1062
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
1063
|
-
className: (0, _classnames["default"])("d-flex flex-row justify-content-start", _defineProperty({}, classes.input__invalid, error))
|
|
1064
|
-
}, /*#__PURE__*/_react["default"].createElement("input", {
|
|
1065
|
-
ref: function ref(r) {
|
|
1066
|
-
return setInput(r);
|
|
1067
|
-
},
|
|
1068
|
-
type: "file",
|
|
1069
|
-
multiple: true,
|
|
1070
|
-
className: classes.d_none,
|
|
1071
|
-
onChange: setFiles
|
|
1072
|
-
}), /*#__PURE__*/_react["default"].createElement("button", {
|
|
1073
|
-
type: "button",
|
|
1074
|
-
className: "".concat(classes.btn, " ").concat(classes.flex, " ").concat(classes.ai_center),
|
|
1075
|
-
disabled: uploading || functionalProperty(entry, step.disabled),
|
|
1076
|
-
onClick: trigger
|
|
1077
|
-
}, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), /*#__PURE__*/_react["default"].createElement("span", {
|
|
1078
|
-
className: "".concat(classes.ml_5)
|
|
1079
|
-
}, "Select file")));
|
|
1080
|
-
};
|
|
1081
|
-
|
|
1082
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
1083
|
-
render: step.render,
|
|
1084
|
-
field: _objectSpread({
|
|
1085
|
-
setValue: function setValue(key, value) {
|
|
1086
|
-
return _setValue(key, value);
|
|
1087
|
-
},
|
|
1088
|
-
rawValues: getValues()
|
|
1089
|
-
}, field),
|
|
1090
|
-
error: error
|
|
1091
|
-
}, /*#__PURE__*/_react["default"].createElement(FileInput, {
|
|
1092
|
-
onChange: function onChange(e) {
|
|
1093
|
-
field.onChange(e);
|
|
1094
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
1095
|
-
return onChange({
|
|
1096
|
-
rawValues: getValues(),
|
|
1097
|
-
value: e,
|
|
1098
|
-
setValue: _setValue
|
|
1099
|
-
});
|
|
1100
|
-
});
|
|
1101
|
-
},
|
|
1102
|
-
error: error
|
|
1103
|
-
}));
|
|
1104
|
-
}
|
|
1105
|
-
});
|
|
1106
|
-
}
|
|
1107
|
-
|
|
1108
|
-
return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
|
|
1109
|
-
render: step.render,
|
|
1110
|
-
field: {
|
|
1111
|
-
setValue: function setValue(key, value) {
|
|
1112
|
-
return _setValue(key, value);
|
|
1113
|
-
},
|
|
1114
|
-
rawValues: getValues(),
|
|
1115
|
-
value: getValues(entry),
|
|
1116
|
-
onChange: function onChange(v) {
|
|
1117
|
-
return _setValue(entry, v, {
|
|
1118
|
-
shouldValidate: true
|
|
1119
|
-
});
|
|
1120
|
-
}
|
|
1121
|
-
},
|
|
1122
|
-
error: error
|
|
1123
|
-
}, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
|
|
1124
|
-
type: "file",
|
|
1125
|
-
id: entry,
|
|
1126
|
-
className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
|
|
1127
|
-
readOnly: functionalProperty(entry, step.disabled) ? 'readOnly' : null,
|
|
1128
|
-
name: entry,
|
|
1129
|
-
placeholder: step.placeholder
|
|
1130
|
-
}, inputProps)));
|
|
1131
|
-
|
|
1132
|
-
default:
|
|
1133
|
-
return null;
|
|
1134
|
-
}
|
|
1135
|
-
};
|
|
1136
|
-
|
|
1137
|
-
var ArrayStep = function ArrayStep(_ref15) {
|
|
1138
|
-
var entry = _ref15.entry,
|
|
1139
|
-
step = _ref15.step,
|
|
1140
|
-
control = _ref15.control,
|
|
1141
|
-
trigger = _ref15.trigger,
|
|
1142
|
-
register = _ref15.register,
|
|
1143
|
-
error = _ref15.error,
|
|
1144
|
-
component = _ref15.component,
|
|
1145
|
-
values = _ref15.values,
|
|
1146
|
-
defaultValue = _ref15.defaultValue,
|
|
1147
|
-
setValue = _ref15.setValue,
|
|
1148
|
-
getValues = _ref15.getValues,
|
|
1149
|
-
disabled = _ref15.disabled;
|
|
1150
|
-
var classes = (0, _styleContext.useCustomStyle)();
|
|
1151
|
-
|
|
1152
|
-
var _useFieldArray = (0, _reactHookForm.useFieldArray)({
|
|
1153
|
-
control: control,
|
|
1154
|
-
// control props comes from useForm (optional: if you are using FormContext)
|
|
1155
|
-
name: entry // unique name for your Field Array
|
|
1156
|
-
// keyName: "id", default to "id", you can change the key name
|
|
1157
|
-
|
|
1158
|
-
}),
|
|
1159
|
-
fields = _useFieldArray.fields,
|
|
1160
|
-
append = _useFieldArray.append,
|
|
1161
|
-
remove = _useFieldArray.remove;
|
|
1162
|
-
|
|
1163
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, fields.map(function (field, idx) {
|
|
1164
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
1165
|
-
key: field.id,
|
|
1166
|
-
className: "d-flex flex-row"
|
|
1167
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
1168
|
-
className: "flex-grow-1"
|
|
1169
|
-
}, component(_objectSpread(_objectSpread({
|
|
1170
|
-
key: field.id
|
|
1171
|
-
}, field), {}, {
|
|
1172
|
-
defaultValue: values[idx] || defaultValue
|
|
1173
|
-
}), idx)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
1174
|
-
className: "input-group-append"
|
|
1175
|
-
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
1176
|
-
className: "btn btn-danger btn-sm",
|
|
1177
|
-
disabled: disabled,
|
|
1178
|
-
onClick: function onClick() {
|
|
1179
|
-
remove(idx);
|
|
1180
|
-
trigger(entry);
|
|
1181
|
-
}
|
|
1182
|
-
}, "remove")));
|
|
1183
|
-
}), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("input", {
|
|
1184
|
-
type: "button",
|
|
1185
|
-
className: (0, _classnames["default"])("btn btn-info mt-2", _defineProperty({}, classes.input__invalid, error)),
|
|
1186
|
-
onClick: function onClick() {
|
|
1187
|
-
append({
|
|
1188
|
-
value: step.addableDefaultValue || defaultVal(step.type)
|
|
1189
|
-
});
|
|
1190
|
-
trigger(entry);
|
|
1191
|
-
(0, _Option.option)(step.onChange).map(function (onChange) {
|
|
1192
|
-
return onChange({
|
|
1193
|
-
rawValues: getValues(),
|
|
1194
|
-
value: getValues(entry),
|
|
1195
|
-
setValue: setValue
|
|
1196
|
-
});
|
|
1197
|
-
});
|
|
1198
|
-
},
|
|
1199
|
-
disabled: disabled,
|
|
1200
|
-
value: "Add"
|
|
1201
|
-
}), error && /*#__PURE__*/_react["default"].createElement("div", {
|
|
1202
|
-
className: "invalid-feedback"
|
|
1203
|
-
}, error.message)));
|
|
1204
|
-
};
|
|
1205
|
-
|
|
1206
|
-
var NestedForm = function NestedForm(_ref16) {
|
|
1207
|
-
var _classNames15;
|
|
1208
|
-
|
|
1209
|
-
var schema = _ref16.schema,
|
|
1210
|
-
flow = _ref16.flow,
|
|
1211
|
-
parent = _ref16.parent,
|
|
1212
|
-
inputWrapper = _ref16.inputWrapper,
|
|
1213
|
-
maybeCustomHttpClient = _ref16.maybeCustomHttpClient,
|
|
1214
|
-
index = _ref16.index,
|
|
1215
|
-
error = _ref16.error,
|
|
1216
|
-
value = _ref16.value,
|
|
1217
|
-
step = _ref16.step,
|
|
1218
|
-
functionalProperty = _ref16.functionalProperty;
|
|
1219
|
-
|
|
1220
|
-
var _useFormContext = (0, _reactHookForm.useFormContext)(),
|
|
1221
|
-
register = _useFormContext.register,
|
|
1222
|
-
control = _useFormContext.control,
|
|
1223
|
-
getValues = _useFormContext.getValues,
|
|
1224
|
-
setValue = _useFormContext.setValue,
|
|
1225
|
-
trigger = _useFormContext.trigger,
|
|
1226
|
-
watch = _useFormContext.watch; // retrieve all hook methods
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
var _useState5 = (0, _react.useState)(!!step.collapsed),
|
|
1230
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
1231
|
-
collapsed = _useState6[0],
|
|
1232
|
-
setCollapsed = _useState6[1];
|
|
1233
|
-
|
|
1234
|
-
var classes = (0, _styleContext.useCustomStyle)();
|
|
1235
|
-
var schemaAndFlow = (0, _Option.option)(step.conditionalSchema).map(function (condiSchema) {
|
|
1236
|
-
var ref = (0, _Option.option)(condiSchema.ref).map(function (ref) {
|
|
1237
|
-
return getValues(ref);
|
|
1238
|
-
}).getOrNull();
|
|
1239
|
-
var rawData = getValues();
|
|
1240
|
-
var filterSwitch = condiSchema["switch"].find(function (s) {
|
|
1241
|
-
if (typeof s.condition === 'function') {
|
|
1242
|
-
return s.condition({
|
|
1243
|
-
rawData: rawData,
|
|
1244
|
-
ref: ref
|
|
1245
|
-
});
|
|
1246
|
-
} else {
|
|
1247
|
-
return s.condition === ref;
|
|
1248
|
-
}
|
|
1249
|
-
});
|
|
1250
|
-
return (0, _Option.option)(filterSwitch).getOrElse(condiSchema["switch"].find(function (s) {
|
|
1251
|
-
return s["default"];
|
|
1252
|
-
}));
|
|
1253
|
-
}).getOrElse({
|
|
1254
|
-
schema: schema,
|
|
1255
|
-
flow: flow
|
|
1256
|
-
});
|
|
1257
|
-
var prevSchema = usePrevious(schemaAndFlow.schema);
|
|
1258
|
-
(0, _react.useEffect)(function () {
|
|
1259
|
-
if (!!prevSchema && JSON.stringify(prevSchema) !== JSON.stringify(schemaAndFlow.schema)) {
|
|
1260
|
-
var def = getDefaultValues(schemaAndFlow.flow, schemaAndFlow.schema);
|
|
1261
|
-
setValue(parent, def, {
|
|
1262
|
-
shouldValidate: false
|
|
1263
|
-
});
|
|
1264
|
-
}
|
|
1265
|
-
}, [prevSchema, schemaAndFlow.schema]);
|
|
1266
|
-
var computedSandF = schemaAndFlow.flow.reduce(function (acc, entry) {
|
|
1267
|
-
var step = schemaAndFlow.schema[entry];
|
|
1268
|
-
var visibleStep = (0, _Option.option)(step).map(function (s) {
|
|
1269
|
-
return s.visible;
|
|
1270
|
-
}).map(function (visible) {
|
|
1271
|
-
switch (_typeof(visible)) {
|
|
1272
|
-
case 'object':
|
|
1273
|
-
var _value2 = watch(visible.ref);
|
|
1274
|
-
|
|
1275
|
-
return (0, _Option.option)(visible.test).map(function (test) {
|
|
1276
|
-
return test(_value2);
|
|
1277
|
-
}).getOrElse(_value2);
|
|
1278
|
-
|
|
1279
|
-
case 'boolean':
|
|
1280
|
-
return visible;
|
|
1281
|
-
|
|
1282
|
-
default:
|
|
1283
|
-
return true;
|
|
1284
|
-
}
|
|
1285
|
-
}).getOrElse(true);
|
|
1286
|
-
return [].concat(_toConsumableArray(acc), [{
|
|
1287
|
-
step: step,
|
|
1288
|
-
visibleStep: visibleStep,
|
|
1289
|
-
entry: entry
|
|
1290
|
-
}]);
|
|
1291
|
-
}, []);
|
|
1292
|
-
var bordered = computedSandF.filter(function (x) {
|
|
1293
|
-
return x.visibleStep;
|
|
1294
|
-
}).length > 1 && step.label !== null;
|
|
1295
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
1296
|
-
className: (0, _classnames["default"])((_classNames15 = {}, _defineProperty(_classNames15, classes.nestedform__border, bordered), _defineProperty(_classNames15, classes.border__error, !!error), _classNames15))
|
|
1297
|
-
}, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowDown, {
|
|
1298
|
-
size: 30,
|
|
1299
|
-
className: classes.cursor_pointer,
|
|
1300
|
-
style: {
|
|
1301
|
-
position: 'absolute',
|
|
1302
|
-
top: '5px',
|
|
1303
|
-
left: '-16px'
|
|
1304
|
-
},
|
|
1305
|
-
strokeWidth: "3",
|
|
1306
|
-
onClick: function onClick() {
|
|
1307
|
-
return setCollapsed(!collapsed);
|
|
1308
|
-
}
|
|
1309
|
-
}), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.ArrowUp, {
|
|
1310
|
-
size: 30,
|
|
1311
|
-
className: classes.cursor_pointer,
|
|
1312
|
-
style: {
|
|
1313
|
-
position: 'absolute',
|
|
1314
|
-
top: '5px',
|
|
1315
|
-
left: '-16px'
|
|
1316
|
-
},
|
|
1317
|
-
strokeWidth: "3",
|
|
1318
|
-
onClick: function onClick() {
|
|
1319
|
-
return setCollapsed(!collapsed);
|
|
1320
|
-
}
|
|
1321
|
-
}), computedSandF.map(function (_ref17, idx) {
|
|
1322
|
-
var step = _ref17.step,
|
|
1323
|
-
visibleStep = _ref17.visibleStep,
|
|
1324
|
-
entry = _ref17.entry;
|
|
1325
|
-
|
|
1326
|
-
if (!step && typeof entry === 'string') {
|
|
1327
|
-
console.error("no step found for the entry \"".concat(entry, "\" in the given schema. Your form might not work properly. Please fix it"));
|
|
1328
|
-
return null;
|
|
1329
|
-
}
|
|
1330
|
-
|
|
1331
|
-
var realError = error && error[entry];
|
|
1332
|
-
return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
|
|
1333
|
-
key: "".concat(entry, ".").concat(idx),
|
|
1334
|
-
className: (0, _classnames["default"])(_defineProperty({}, classes.display__none, collapsed && !step.visibleOnCollapse || !visibleStep)),
|
|
1335
|
-
entry: "".concat(parent, ".").concat(entry),
|
|
1336
|
-
error: realError,
|
|
1337
|
-
label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),
|
|
1338
|
-
help: step.help,
|
|
1339
|
-
render: inputWrapper
|
|
1340
|
-
}, /*#__PURE__*/_react["default"].createElement(Step, {
|
|
1341
|
-
key: "step.".concat(entry, ".").concat(idx),
|
|
1342
|
-
entry: "".concat(parent, ".").concat(entry),
|
|
1343
|
-
realEntry: entry,
|
|
1344
|
-
step: schemaAndFlow.schema[entry],
|
|
1345
|
-
error: realError,
|
|
1346
|
-
register: register,
|
|
1347
|
-
schema: schemaAndFlow.schema,
|
|
1348
|
-
control: control,
|
|
1349
|
-
trigger: trigger,
|
|
1350
|
-
getValues: getValues,
|
|
1351
|
-
setValue: setValue,
|
|
1352
|
-
watch: watch,
|
|
1353
|
-
inputWrapper: inputWrapper,
|
|
1354
|
-
httpClient: maybeCustomHttpClient,
|
|
1355
|
-
defaultValue: value && value[entry],
|
|
1356
|
-
functionalProperty: functionalProperty
|
|
1357
|
-
}));
|
|
1358
|
-
}));
|
|
1359
|
-
};
|