@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.
Files changed (46) hide show
  1. package/README.md +4 -4
  2. package/lib/esm/index.js +30260 -0
  3. package/lib/index.js +30281 -39
  4. package/package.json +28 -35
  5. package/rollup.config.js +53 -0
  6. package/dist/react-form.js +0 -2
  7. package/dist/react-form.js.LICENSE.txt +0 -103
  8. package/lib/Option.d.ts +0 -39
  9. package/lib/Option.js +0 -66
  10. package/lib/constraints.d.ts +0 -90
  11. package/lib/constraints.js +0 -371
  12. package/lib/form.d.ts +0 -2
  13. package/lib/form.js +0 -1359
  14. package/lib/format.d.ts +0 -13
  15. package/lib/format.js +0 -20
  16. package/lib/index.d.ts +0 -4
  17. package/lib/inputs/ArrayInput.d.ts +0 -1
  18. package/lib/inputs/ArrayInput.js +0 -141
  19. package/lib/inputs/BooleanInput.d.ts +0 -5
  20. package/lib/inputs/BooleanInput.js +0 -49
  21. package/lib/inputs/CodeInput.d.ts +0 -9
  22. package/lib/inputs/CodeInput.js +0 -89
  23. package/lib/inputs/Collapse.d.ts +0 -1
  24. package/lib/inputs/Collapse.js +0 -73
  25. package/lib/inputs/MarkdownInput.d.ts +0 -1
  26. package/lib/inputs/MarkdownInput.js +0 -433
  27. package/lib/inputs/SelectInput.d.ts +0 -1
  28. package/lib/inputs/SelectInput.js +0 -238
  29. package/lib/inputs/SingleLineCode.d.ts +0 -9
  30. package/lib/inputs/SingleLineCode.js +0 -88
  31. package/lib/inputs/index.d.ts +0 -8
  32. package/lib/inputs/index.js +0 -109
  33. package/lib/inputs/objectInput.d.ts +0 -1
  34. package/lib/inputs/objectInput.js +0 -115
  35. package/lib/resolvers/index.d.ts +0 -2
  36. package/lib/resolvers/index.js +0 -19
  37. package/lib/resolvers/utils.d.ts +0 -5
  38. package/lib/resolvers/utils.js +0 -133
  39. package/lib/style.d.ts +0 -234
  40. package/lib/style.js +0 -181
  41. package/lib/styleContext.d.ts +0 -1
  42. package/lib/styleContext.js +0 -29
  43. package/lib/type.d.ts +0 -8
  44. package/lib/type.js +0 -15
  45. package/lib/utils.d.ts +0 -2
  46. 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
- };