@panneau/form-resource 2.0.60
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/es/index.js +284 -0
- package/lib/index.js +300 -0
- package/package.json +64 -0
package/es/index.js
ADDED
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
2
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
3
|
+
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
4
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
5
|
+
import PropTypes$1 from 'prop-types';
|
|
6
|
+
import React, { useMemo, useCallback, useState, useEffect } from 'react';
|
|
7
|
+
import { PropTypes } from '@panneau/core';
|
|
8
|
+
import { useLocales, useFormsComponents, FormProvider } from '@panneau/core/contexts';
|
|
9
|
+
import { useResourceUrlGenerator, useForm } from '@panneau/core/hooks';
|
|
10
|
+
import { getComponentFromName } from '@panneau/core/utils';
|
|
11
|
+
import { useResourceStore, useResourceUpdate, useResourceDestroy } from '@panneau/data';
|
|
12
|
+
import classNames from 'classnames';
|
|
13
|
+
import { FormattedMessage } from 'react-intl';
|
|
14
|
+
import Button from '@panneau/element-button';
|
|
15
|
+
import Form from '@panneau/element-form';
|
|
16
|
+
import { useResourceValues } from '@panneau/intl';
|
|
17
|
+
|
|
18
|
+
var _excluded$1 = ["resource", "action", "previous", "status", "value", "onSubmit", "errors", "generalError", "className"];
|
|
19
|
+
var propTypes$1 = {
|
|
20
|
+
resource: PropTypes.resource.isRequired,
|
|
21
|
+
action: PropTypes$1.string,
|
|
22
|
+
previous: PropTypes$1.string,
|
|
23
|
+
fields: PropTypes.fields.isRequired,
|
|
24
|
+
value: PropTypes$1.object,
|
|
25
|
+
// eslint-disable-line react/forbid-prop-types
|
|
26
|
+
onChange: PropTypes$1.func.isRequired,
|
|
27
|
+
onSubmit: PropTypes$1.func,
|
|
28
|
+
status: PropTypes.formStatus,
|
|
29
|
+
generalError: PropTypes$1.string,
|
|
30
|
+
errors: PropTypes$1.objectOf(PropTypes$1.arrayOf(PropTypes$1.string)),
|
|
31
|
+
className: PropTypes$1.string
|
|
32
|
+
};
|
|
33
|
+
var defaultProps$1 = {
|
|
34
|
+
action: null,
|
|
35
|
+
previous: null,
|
|
36
|
+
status: null,
|
|
37
|
+
value: null,
|
|
38
|
+
onSubmit: null,
|
|
39
|
+
generalError: null,
|
|
40
|
+
errors: null,
|
|
41
|
+
className: null
|
|
42
|
+
};
|
|
43
|
+
var DeleteForm = function DeleteForm(_ref) {
|
|
44
|
+
var resource = _ref.resource,
|
|
45
|
+
action = _ref.action,
|
|
46
|
+
previous = _ref.previous;
|
|
47
|
+
_ref.status;
|
|
48
|
+
var value = _ref.value,
|
|
49
|
+
onSubmit = _ref.onSubmit;
|
|
50
|
+
_ref.errors;
|
|
51
|
+
var generalError = _ref.generalError,
|
|
52
|
+
className = _ref.className,
|
|
53
|
+
props = _objectWithoutProperties(_ref, _excluded$1);
|
|
54
|
+
var _ref2 = value || {},
|
|
55
|
+
_ref2$id = _ref2.id,
|
|
56
|
+
id = _ref2$id === void 0 ? null : _ref2$id;
|
|
57
|
+
var resourceValues = useResourceValues(resource, {
|
|
58
|
+
id: id
|
|
59
|
+
});
|
|
60
|
+
// const { text, background } = usePanneauColorScheme();
|
|
61
|
+
|
|
62
|
+
return /*#__PURE__*/React.createElement(Form, Object.assign({
|
|
63
|
+
className: classNames(['form', _defineProperty({
|
|
64
|
+
'invalid-feedback': generalError !== null
|
|
65
|
+
}, className, className !== null)]),
|
|
66
|
+
action: action,
|
|
67
|
+
onSubmit: onSubmit,
|
|
68
|
+
withoutActions: true,
|
|
69
|
+
withoutErrors: true
|
|
70
|
+
}, props), /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
className: classNames(['card', _defineProperty({}, className, className !== null)])
|
|
72
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
73
|
+
className: "card-body"
|
|
74
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
75
|
+
values: resourceValues,
|
|
76
|
+
id: "yzfiXJ",
|
|
77
|
+
defaultMessage: [{
|
|
78
|
+
"type": 0,
|
|
79
|
+
"value": "Are you sure you want to delete "
|
|
80
|
+
}, {
|
|
81
|
+
"type": 1,
|
|
82
|
+
"value": "the_singular"
|
|
83
|
+
}, {
|
|
84
|
+
"type": 0,
|
|
85
|
+
"value": " #"
|
|
86
|
+
}, {
|
|
87
|
+
"type": 1,
|
|
88
|
+
"value": "id"
|
|
89
|
+
}, {
|
|
90
|
+
"type": 0,
|
|
91
|
+
"value": "?"
|
|
92
|
+
}]
|
|
93
|
+
}), generalError ? /*#__PURE__*/React.createElement("p", {
|
|
94
|
+
className: "text-danger"
|
|
95
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
96
|
+
id: "y9zauY",
|
|
97
|
+
defaultMessage: [{
|
|
98
|
+
"type": 0,
|
|
99
|
+
"value": "An error occured and we could not delete this item successfully."
|
|
100
|
+
}]
|
|
101
|
+
})) : null), /*#__PURE__*/React.createElement("div", {
|
|
102
|
+
className: "card-body d-flex"
|
|
103
|
+
}, previous !== null ? /*#__PURE__*/React.createElement(Button, {
|
|
104
|
+
href: previous,
|
|
105
|
+
className: "me-2",
|
|
106
|
+
theme: "secondary",
|
|
107
|
+
outline: true
|
|
108
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
109
|
+
id: "PyxZY2",
|
|
110
|
+
defaultMessage: [{
|
|
111
|
+
"type": 0,
|
|
112
|
+
"value": "Cancel"
|
|
113
|
+
}]
|
|
114
|
+
})) : null, /*#__PURE__*/React.createElement(Button, {
|
|
115
|
+
type: "submit",
|
|
116
|
+
className: "ms-auto",
|
|
117
|
+
theme: "danger"
|
|
118
|
+
}, /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
119
|
+
id: "Bhu3B2",
|
|
120
|
+
defaultMessage: [{
|
|
121
|
+
"type": 0,
|
|
122
|
+
"value": "Delete"
|
|
123
|
+
}]
|
|
124
|
+
})))));
|
|
125
|
+
};
|
|
126
|
+
DeleteForm.propTypes = propTypes$1;
|
|
127
|
+
DeleteForm.defaultProps = defaultProps$1;
|
|
128
|
+
|
|
129
|
+
var _excluded = ["component", "resource", "onSuccess", "item", "type", "isDelete"];
|
|
130
|
+
var propTypes = {
|
|
131
|
+
resource: PropTypes.resource.isRequired,
|
|
132
|
+
item: PropTypes$1.object,
|
|
133
|
+
// eslint-disable-line react/forbid-prop-types
|
|
134
|
+
type: PropTypes$1.string,
|
|
135
|
+
component: PropTypes$1.string,
|
|
136
|
+
onSuccess: PropTypes$1.func,
|
|
137
|
+
isDelete: PropTypes$1.bool
|
|
138
|
+
};
|
|
139
|
+
var defaultProps = {
|
|
140
|
+
item: null,
|
|
141
|
+
type: null,
|
|
142
|
+
component: null,
|
|
143
|
+
onSuccess: null,
|
|
144
|
+
isDelete: false
|
|
145
|
+
};
|
|
146
|
+
var ResourceForm = function ResourceForm(_ref) {
|
|
147
|
+
var component = _ref.component,
|
|
148
|
+
resource = _ref.resource,
|
|
149
|
+
onSuccess = _ref.onSuccess,
|
|
150
|
+
item = _ref.item,
|
|
151
|
+
type = _ref.type,
|
|
152
|
+
isDelete = _ref.isDelete,
|
|
153
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
154
|
+
var locales = useLocales();
|
|
155
|
+
var FormComponents = useFormsComponents();
|
|
156
|
+
var _resource$fields = resource.fields,
|
|
157
|
+
resourceFields = _resource$fields === void 0 ? [] : _resource$fields,
|
|
158
|
+
_resource$types = resource.types,
|
|
159
|
+
resourceTypes = _resource$types === void 0 ? [] : _resource$types,
|
|
160
|
+
forms = resource.forms;
|
|
161
|
+
var resourceType = type !== null ? resourceTypes.find(function (it) {
|
|
162
|
+
return it.id === type;
|
|
163
|
+
}) || null : null;
|
|
164
|
+
var _ref2 = resourceType || {},
|
|
165
|
+
_ref2$fields = _ref2.fields,
|
|
166
|
+
resourceTypeFields = _ref2$fields === void 0 ? null : _ref2$fields;
|
|
167
|
+
var isCreate = item === null || !item.id;
|
|
168
|
+
|
|
169
|
+
// Pick fields from resource root or form
|
|
170
|
+
var _ref3 = forms || {},
|
|
171
|
+
_ref3$default = _ref3["default"],
|
|
172
|
+
defaultForm = _ref3$default === void 0 ? null : _ref3$default,
|
|
173
|
+
_ref3$create = _ref3.create,
|
|
174
|
+
createForm = _ref3$create === void 0 ? null : _ref3$create,
|
|
175
|
+
_ref3$edit = _ref3.edit,
|
|
176
|
+
editForm = _ref3$edit === void 0 ? null : _ref3$edit,
|
|
177
|
+
_ref3$delete = _ref3["delete"],
|
|
178
|
+
deleteForm = _ref3$delete === void 0 ? null : _ref3$delete;
|
|
179
|
+
var _ref4 = defaultForm || {},
|
|
180
|
+
_ref4$fields = _ref4.fields,
|
|
181
|
+
defaultFields = _ref4$fields === void 0 ? null : _ref4$fields,
|
|
182
|
+
defaultComponent = _ref4.component;
|
|
183
|
+
var createOrEditSource = isCreate ? createForm || {} : editForm || {};
|
|
184
|
+
var _ref5 = isDelete ? deleteForm || {} : createOrEditSource || {},
|
|
185
|
+
_ref5$fields = _ref5.fields,
|
|
186
|
+
formFields = _ref5$fields === void 0 ? null : _ref5$fields,
|
|
187
|
+
_ref5$component = _ref5.component,
|
|
188
|
+
formComponent = _ref5$component === void 0 ? null : _ref5$component;
|
|
189
|
+
var finalFields = useMemo(function () {
|
|
190
|
+
return (formFields || defaultFields || resourceTypeFields || resourceFields).filter(function (_ref6) {
|
|
191
|
+
var _ref6$settings = _ref6.settings,
|
|
192
|
+
_ref6$settings2 = _ref6$settings === void 0 ? {} : _ref6$settings,
|
|
193
|
+
_ref6$settings2$hidde = _ref6$settings2.hiddenInForm,
|
|
194
|
+
hiddenInForm = _ref6$settings2$hidde === void 0 ? false : _ref6$settings2$hidde;
|
|
195
|
+
return !hiddenInForm;
|
|
196
|
+
});
|
|
197
|
+
}, [formFields, defaultFields, resourceTypeFields, resourceFields]);
|
|
198
|
+
|
|
199
|
+
// Form routes
|
|
200
|
+
var resourceRoute = useResourceUrlGenerator(resource);
|
|
201
|
+
var _useResourceStore = useResourceStore(resource),
|
|
202
|
+
store = _useResourceStore.store;
|
|
203
|
+
var _useResourceUpdate = useResourceUpdate(resource, item != null ? item.id : null),
|
|
204
|
+
update = _useResourceUpdate.update;
|
|
205
|
+
var _useResourceDestroy = useResourceDestroy(resource, item != null ? item.id : null),
|
|
206
|
+
destroy = _useResourceDestroy.destroy;
|
|
207
|
+
|
|
208
|
+
// Post actions
|
|
209
|
+
var postAction = isCreate ? store : update;
|
|
210
|
+
var postForm = useCallback(function (action, data) {
|
|
211
|
+
return isDelete ? destroy() : postAction(data);
|
|
212
|
+
}, [postAction, isDelete, destroy, store, update]);
|
|
213
|
+
|
|
214
|
+
// Form state
|
|
215
|
+
var getInitialValue = useCallback(function () {
|
|
216
|
+
return item !== null ? item : finalFields.reduce(function (defaultValues, _ref7) {
|
|
217
|
+
var name = _ref7.name,
|
|
218
|
+
_ref7$defaultValue = _ref7.defaultValue,
|
|
219
|
+
defaultValue = _ref7$defaultValue === void 0 ? null : _ref7$defaultValue;
|
|
220
|
+
return defaultValue !== null ? _objectSpread(_objectSpread({}, defaultValues), {}, _defineProperty({}, name, defaultValue)) : defaultValues;
|
|
221
|
+
}, type !== null ? {
|
|
222
|
+
type: type
|
|
223
|
+
} : null);
|
|
224
|
+
}, [item, type, finalFields]);
|
|
225
|
+
var _useState = useState(getInitialValue()),
|
|
226
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
227
|
+
value = _useState2[0],
|
|
228
|
+
setValueState = _useState2[1];
|
|
229
|
+
var setValue = useCallback(function (newValue) {
|
|
230
|
+
// console.log('new value in resource form', newValue); // eslint-disable-line
|
|
231
|
+
setValueState(newValue);
|
|
232
|
+
}, [setValueState]);
|
|
233
|
+
var _useForm = useForm({
|
|
234
|
+
fields: finalFields,
|
|
235
|
+
value: value,
|
|
236
|
+
postForm: postForm,
|
|
237
|
+
setValue: setValue,
|
|
238
|
+
onComplete: onSuccess,
|
|
239
|
+
locales: locales
|
|
240
|
+
}),
|
|
241
|
+
fields = _useForm.fields,
|
|
242
|
+
onSubmit = _useForm.onSubmit,
|
|
243
|
+
status = _useForm.status,
|
|
244
|
+
generalError = _useForm.generalError,
|
|
245
|
+
errors = _useForm.errors;
|
|
246
|
+
|
|
247
|
+
// Form action
|
|
248
|
+
var modifyAction = isCreate ? resourceRoute('store') : resourceRoute('update', {
|
|
249
|
+
id: item.id
|
|
250
|
+
});
|
|
251
|
+
var action = isDelete ? resourceRoute('destroy', {
|
|
252
|
+
id: item.id
|
|
253
|
+
}) : modifyAction;
|
|
254
|
+
var defaultFormName = isDelete ? component || formComponent || null : component || formComponent || defaultComponent || 'normal';
|
|
255
|
+
|
|
256
|
+
// Form component
|
|
257
|
+
var FormComponent = getComponentFromName(defaultFormName, FormComponents, isDelete ? DeleteForm : component);
|
|
258
|
+
|
|
259
|
+
// Lisen to item value change - this is important
|
|
260
|
+
useEffect(function () {
|
|
261
|
+
// console.log('get initial value from the top'); // eslint-disable-line
|
|
262
|
+
setValue(getInitialValue());
|
|
263
|
+
}, [getInitialValue, setValue]);
|
|
264
|
+
return /*#__PURE__*/React.createElement(FormProvider, {
|
|
265
|
+
value: value,
|
|
266
|
+
setValue: setValue
|
|
267
|
+
}, /*#__PURE__*/React.createElement(FormComponent, Object.assign({}, props, {
|
|
268
|
+
status: status,
|
|
269
|
+
resource: resource,
|
|
270
|
+
item: item,
|
|
271
|
+
fields: fields,
|
|
272
|
+
generalError: generalError,
|
|
273
|
+
errors: errors,
|
|
274
|
+
action: action,
|
|
275
|
+
onSubmit: onSubmit,
|
|
276
|
+
isCreate: isCreate,
|
|
277
|
+
value: value,
|
|
278
|
+
onChange: setValue
|
|
279
|
+
})));
|
|
280
|
+
};
|
|
281
|
+
ResourceForm.propTypes = propTypes;
|
|
282
|
+
ResourceForm.defaultProps = defaultProps;
|
|
283
|
+
|
|
284
|
+
export { ResourceForm as default };
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
6
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
8
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
9
|
+
var PropTypes = require('prop-types');
|
|
10
|
+
var React = require('react');
|
|
11
|
+
var core = require('@panneau/core');
|
|
12
|
+
var contexts = require('@panneau/core/contexts');
|
|
13
|
+
var hooks = require('@panneau/core/hooks');
|
|
14
|
+
var utils = require('@panneau/core/utils');
|
|
15
|
+
var data = require('@panneau/data');
|
|
16
|
+
var classNames = require('classnames');
|
|
17
|
+
var reactIntl = require('react-intl');
|
|
18
|
+
var Button = require('@panneau/element-button');
|
|
19
|
+
var Form = require('@panneau/element-form');
|
|
20
|
+
var intl = require('@panneau/intl');
|
|
21
|
+
|
|
22
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
|
+
|
|
24
|
+
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
|
|
25
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
26
|
+
var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
|
|
27
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
28
|
+
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
29
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
30
|
+
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
|
|
31
|
+
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
|
|
32
|
+
var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
|
|
33
|
+
|
|
34
|
+
var _excluded$1 = ["resource", "action", "previous", "status", "value", "onSubmit", "errors", "generalError", "className"];
|
|
35
|
+
var propTypes$1 = {
|
|
36
|
+
resource: core.PropTypes.resource.isRequired,
|
|
37
|
+
action: PropTypes__default["default"].string,
|
|
38
|
+
previous: PropTypes__default["default"].string,
|
|
39
|
+
fields: core.PropTypes.fields.isRequired,
|
|
40
|
+
value: PropTypes__default["default"].object,
|
|
41
|
+
// eslint-disable-line react/forbid-prop-types
|
|
42
|
+
onChange: PropTypes__default["default"].func.isRequired,
|
|
43
|
+
onSubmit: PropTypes__default["default"].func,
|
|
44
|
+
status: core.PropTypes.formStatus,
|
|
45
|
+
generalError: PropTypes__default["default"].string,
|
|
46
|
+
errors: PropTypes__default["default"].objectOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)),
|
|
47
|
+
className: PropTypes__default["default"].string
|
|
48
|
+
};
|
|
49
|
+
var defaultProps$1 = {
|
|
50
|
+
action: null,
|
|
51
|
+
previous: null,
|
|
52
|
+
status: null,
|
|
53
|
+
value: null,
|
|
54
|
+
onSubmit: null,
|
|
55
|
+
generalError: null,
|
|
56
|
+
errors: null,
|
|
57
|
+
className: null
|
|
58
|
+
};
|
|
59
|
+
var DeleteForm = function DeleteForm(_ref) {
|
|
60
|
+
var resource = _ref.resource,
|
|
61
|
+
action = _ref.action,
|
|
62
|
+
previous = _ref.previous;
|
|
63
|
+
_ref.status;
|
|
64
|
+
var value = _ref.value,
|
|
65
|
+
onSubmit = _ref.onSubmit;
|
|
66
|
+
_ref.errors;
|
|
67
|
+
var generalError = _ref.generalError,
|
|
68
|
+
className = _ref.className,
|
|
69
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
|
|
70
|
+
var _ref2 = value || {},
|
|
71
|
+
_ref2$id = _ref2.id,
|
|
72
|
+
id = _ref2$id === void 0 ? null : _ref2$id;
|
|
73
|
+
var resourceValues = intl.useResourceValues(resource, {
|
|
74
|
+
id: id
|
|
75
|
+
});
|
|
76
|
+
// const { text, background } = usePanneauColorScheme();
|
|
77
|
+
|
|
78
|
+
return /*#__PURE__*/React__default["default"].createElement(Form__default["default"], Object.assign({
|
|
79
|
+
className: classNames__default["default"](['form', _defineProperty__default["default"]({
|
|
80
|
+
'invalid-feedback': generalError !== null
|
|
81
|
+
}, className, className !== null)]),
|
|
82
|
+
action: action,
|
|
83
|
+
onSubmit: onSubmit,
|
|
84
|
+
withoutActions: true,
|
|
85
|
+
withoutErrors: true
|
|
86
|
+
}, props), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
87
|
+
className: classNames__default["default"](['card', _defineProperty__default["default"]({}, className, className !== null)])
|
|
88
|
+
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
89
|
+
className: "card-body"
|
|
90
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
91
|
+
values: resourceValues,
|
|
92
|
+
id: "yzfiXJ",
|
|
93
|
+
defaultMessage: [{
|
|
94
|
+
"type": 0,
|
|
95
|
+
"value": "Are you sure you want to delete "
|
|
96
|
+
}, {
|
|
97
|
+
"type": 1,
|
|
98
|
+
"value": "the_singular"
|
|
99
|
+
}, {
|
|
100
|
+
"type": 0,
|
|
101
|
+
"value": " #"
|
|
102
|
+
}, {
|
|
103
|
+
"type": 1,
|
|
104
|
+
"value": "id"
|
|
105
|
+
}, {
|
|
106
|
+
"type": 0,
|
|
107
|
+
"value": "?"
|
|
108
|
+
}]
|
|
109
|
+
}), generalError ? /*#__PURE__*/React__default["default"].createElement("p", {
|
|
110
|
+
className: "text-danger"
|
|
111
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
112
|
+
id: "y9zauY",
|
|
113
|
+
defaultMessage: [{
|
|
114
|
+
"type": 0,
|
|
115
|
+
"value": "An error occured and we could not delete this item successfully."
|
|
116
|
+
}]
|
|
117
|
+
})) : null), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
118
|
+
className: "card-body d-flex"
|
|
119
|
+
}, previous !== null ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
120
|
+
href: previous,
|
|
121
|
+
className: "me-2",
|
|
122
|
+
theme: "secondary",
|
|
123
|
+
outline: true
|
|
124
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
125
|
+
id: "PyxZY2",
|
|
126
|
+
defaultMessage: [{
|
|
127
|
+
"type": 0,
|
|
128
|
+
"value": "Cancel"
|
|
129
|
+
}]
|
|
130
|
+
})) : null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
|
|
131
|
+
type: "submit",
|
|
132
|
+
className: "ms-auto",
|
|
133
|
+
theme: "danger"
|
|
134
|
+
}, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
|
|
135
|
+
id: "Bhu3B2",
|
|
136
|
+
defaultMessage: [{
|
|
137
|
+
"type": 0,
|
|
138
|
+
"value": "Delete"
|
|
139
|
+
}]
|
|
140
|
+
})))));
|
|
141
|
+
};
|
|
142
|
+
DeleteForm.propTypes = propTypes$1;
|
|
143
|
+
DeleteForm.defaultProps = defaultProps$1;
|
|
144
|
+
|
|
145
|
+
var _excluded = ["component", "resource", "onSuccess", "item", "type", "isDelete"];
|
|
146
|
+
var propTypes = {
|
|
147
|
+
resource: core.PropTypes.resource.isRequired,
|
|
148
|
+
item: PropTypes__default["default"].object,
|
|
149
|
+
// eslint-disable-line react/forbid-prop-types
|
|
150
|
+
type: PropTypes__default["default"].string,
|
|
151
|
+
component: PropTypes__default["default"].string,
|
|
152
|
+
onSuccess: PropTypes__default["default"].func,
|
|
153
|
+
isDelete: PropTypes__default["default"].bool
|
|
154
|
+
};
|
|
155
|
+
var defaultProps = {
|
|
156
|
+
item: null,
|
|
157
|
+
type: null,
|
|
158
|
+
component: null,
|
|
159
|
+
onSuccess: null,
|
|
160
|
+
isDelete: false
|
|
161
|
+
};
|
|
162
|
+
var ResourceForm = function ResourceForm(_ref) {
|
|
163
|
+
var component = _ref.component,
|
|
164
|
+
resource = _ref.resource,
|
|
165
|
+
onSuccess = _ref.onSuccess,
|
|
166
|
+
item = _ref.item,
|
|
167
|
+
type = _ref.type,
|
|
168
|
+
isDelete = _ref.isDelete,
|
|
169
|
+
props = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
170
|
+
var locales = contexts.useLocales();
|
|
171
|
+
var FormComponents = contexts.useFormsComponents();
|
|
172
|
+
var _resource$fields = resource.fields,
|
|
173
|
+
resourceFields = _resource$fields === void 0 ? [] : _resource$fields,
|
|
174
|
+
_resource$types = resource.types,
|
|
175
|
+
resourceTypes = _resource$types === void 0 ? [] : _resource$types,
|
|
176
|
+
forms = resource.forms;
|
|
177
|
+
var resourceType = type !== null ? resourceTypes.find(function (it) {
|
|
178
|
+
return it.id === type;
|
|
179
|
+
}) || null : null;
|
|
180
|
+
var _ref2 = resourceType || {},
|
|
181
|
+
_ref2$fields = _ref2.fields,
|
|
182
|
+
resourceTypeFields = _ref2$fields === void 0 ? null : _ref2$fields;
|
|
183
|
+
var isCreate = item === null || !item.id;
|
|
184
|
+
|
|
185
|
+
// Pick fields from resource root or form
|
|
186
|
+
var _ref3 = forms || {},
|
|
187
|
+
_ref3$default = _ref3["default"],
|
|
188
|
+
defaultForm = _ref3$default === void 0 ? null : _ref3$default,
|
|
189
|
+
_ref3$create = _ref3.create,
|
|
190
|
+
createForm = _ref3$create === void 0 ? null : _ref3$create,
|
|
191
|
+
_ref3$edit = _ref3.edit,
|
|
192
|
+
editForm = _ref3$edit === void 0 ? null : _ref3$edit,
|
|
193
|
+
_ref3$delete = _ref3["delete"],
|
|
194
|
+
deleteForm = _ref3$delete === void 0 ? null : _ref3$delete;
|
|
195
|
+
var _ref4 = defaultForm || {},
|
|
196
|
+
_ref4$fields = _ref4.fields,
|
|
197
|
+
defaultFields = _ref4$fields === void 0 ? null : _ref4$fields,
|
|
198
|
+
defaultComponent = _ref4.component;
|
|
199
|
+
var createOrEditSource = isCreate ? createForm || {} : editForm || {};
|
|
200
|
+
var _ref5 = isDelete ? deleteForm || {} : createOrEditSource || {},
|
|
201
|
+
_ref5$fields = _ref5.fields,
|
|
202
|
+
formFields = _ref5$fields === void 0 ? null : _ref5$fields,
|
|
203
|
+
_ref5$component = _ref5.component,
|
|
204
|
+
formComponent = _ref5$component === void 0 ? null : _ref5$component;
|
|
205
|
+
var finalFields = React.useMemo(function () {
|
|
206
|
+
return (formFields || defaultFields || resourceTypeFields || resourceFields).filter(function (_ref6) {
|
|
207
|
+
var _ref6$settings = _ref6.settings,
|
|
208
|
+
_ref6$settings2 = _ref6$settings === void 0 ? {} : _ref6$settings,
|
|
209
|
+
_ref6$settings2$hidde = _ref6$settings2.hiddenInForm,
|
|
210
|
+
hiddenInForm = _ref6$settings2$hidde === void 0 ? false : _ref6$settings2$hidde;
|
|
211
|
+
return !hiddenInForm;
|
|
212
|
+
});
|
|
213
|
+
}, [formFields, defaultFields, resourceTypeFields, resourceFields]);
|
|
214
|
+
|
|
215
|
+
// Form routes
|
|
216
|
+
var resourceRoute = hooks.useResourceUrlGenerator(resource);
|
|
217
|
+
var _useResourceStore = data.useResourceStore(resource),
|
|
218
|
+
store = _useResourceStore.store;
|
|
219
|
+
var _useResourceUpdate = data.useResourceUpdate(resource, item != null ? item.id : null),
|
|
220
|
+
update = _useResourceUpdate.update;
|
|
221
|
+
var _useResourceDestroy = data.useResourceDestroy(resource, item != null ? item.id : null),
|
|
222
|
+
destroy = _useResourceDestroy.destroy;
|
|
223
|
+
|
|
224
|
+
// Post actions
|
|
225
|
+
var postAction = isCreate ? store : update;
|
|
226
|
+
var postForm = React.useCallback(function (action, data) {
|
|
227
|
+
return isDelete ? destroy() : postAction(data);
|
|
228
|
+
}, [postAction, isDelete, destroy, store, update]);
|
|
229
|
+
|
|
230
|
+
// Form state
|
|
231
|
+
var getInitialValue = React.useCallback(function () {
|
|
232
|
+
return item !== null ? item : finalFields.reduce(function (defaultValues, _ref7) {
|
|
233
|
+
var name = _ref7.name,
|
|
234
|
+
_ref7$defaultValue = _ref7.defaultValue,
|
|
235
|
+
defaultValue = _ref7$defaultValue === void 0 ? null : _ref7$defaultValue;
|
|
236
|
+
return defaultValue !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, defaultValues), {}, _defineProperty__default["default"]({}, name, defaultValue)) : defaultValues;
|
|
237
|
+
}, type !== null ? {
|
|
238
|
+
type: type
|
|
239
|
+
} : null);
|
|
240
|
+
}, [item, type, finalFields]);
|
|
241
|
+
var _useState = React.useState(getInitialValue()),
|
|
242
|
+
_useState2 = _slicedToArray__default["default"](_useState, 2),
|
|
243
|
+
value = _useState2[0],
|
|
244
|
+
setValueState = _useState2[1];
|
|
245
|
+
var setValue = React.useCallback(function (newValue) {
|
|
246
|
+
// console.log('new value in resource form', newValue); // eslint-disable-line
|
|
247
|
+
setValueState(newValue);
|
|
248
|
+
}, [setValueState]);
|
|
249
|
+
var _useForm = hooks.useForm({
|
|
250
|
+
fields: finalFields,
|
|
251
|
+
value: value,
|
|
252
|
+
postForm: postForm,
|
|
253
|
+
setValue: setValue,
|
|
254
|
+
onComplete: onSuccess,
|
|
255
|
+
locales: locales
|
|
256
|
+
}),
|
|
257
|
+
fields = _useForm.fields,
|
|
258
|
+
onSubmit = _useForm.onSubmit,
|
|
259
|
+
status = _useForm.status,
|
|
260
|
+
generalError = _useForm.generalError,
|
|
261
|
+
errors = _useForm.errors;
|
|
262
|
+
|
|
263
|
+
// Form action
|
|
264
|
+
var modifyAction = isCreate ? resourceRoute('store') : resourceRoute('update', {
|
|
265
|
+
id: item.id
|
|
266
|
+
});
|
|
267
|
+
var action = isDelete ? resourceRoute('destroy', {
|
|
268
|
+
id: item.id
|
|
269
|
+
}) : modifyAction;
|
|
270
|
+
var defaultFormName = isDelete ? component || formComponent || null : component || formComponent || defaultComponent || 'normal';
|
|
271
|
+
|
|
272
|
+
// Form component
|
|
273
|
+
var FormComponent = utils.getComponentFromName(defaultFormName, FormComponents, isDelete ? DeleteForm : component);
|
|
274
|
+
|
|
275
|
+
// Lisen to item value change - this is important
|
|
276
|
+
React.useEffect(function () {
|
|
277
|
+
// console.log('get initial value from the top'); // eslint-disable-line
|
|
278
|
+
setValue(getInitialValue());
|
|
279
|
+
}, [getInitialValue, setValue]);
|
|
280
|
+
return /*#__PURE__*/React__default["default"].createElement(contexts.FormProvider, {
|
|
281
|
+
value: value,
|
|
282
|
+
setValue: setValue
|
|
283
|
+
}, /*#__PURE__*/React__default["default"].createElement(FormComponent, Object.assign({}, props, {
|
|
284
|
+
status: status,
|
|
285
|
+
resource: resource,
|
|
286
|
+
item: item,
|
|
287
|
+
fields: fields,
|
|
288
|
+
generalError: generalError,
|
|
289
|
+
errors: errors,
|
|
290
|
+
action: action,
|
|
291
|
+
onSubmit: onSubmit,
|
|
292
|
+
isCreate: isCreate,
|
|
293
|
+
value: value,
|
|
294
|
+
onChange: setValue
|
|
295
|
+
})));
|
|
296
|
+
};
|
|
297
|
+
ResourceForm.propTypes = propTypes;
|
|
298
|
+
ResourceForm.defaultProps = defaultProps;
|
|
299
|
+
|
|
300
|
+
exports["default"] = ResourceForm;
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@panneau/form-resource",
|
|
3
|
+
"version": "2.0.60",
|
|
4
|
+
"description": "Default resource forms",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"javascript"
|
|
7
|
+
],
|
|
8
|
+
"homepage": "https://github.com/folkloreinc/panneau-js",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/folkloreinc/panneau-js.git"
|
|
12
|
+
},
|
|
13
|
+
"author": {
|
|
14
|
+
"name": "Folklore",
|
|
15
|
+
"email": "info@folklore.email"
|
|
16
|
+
},
|
|
17
|
+
"contributors": [
|
|
18
|
+
{
|
|
19
|
+
"name": "David Mongeau-Petitpas",
|
|
20
|
+
"email": "dmp@folklore.email"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "Nicolas Roy-Bourdages",
|
|
24
|
+
"email": "nrb@folklore.email"
|
|
25
|
+
}
|
|
26
|
+
],
|
|
27
|
+
"license": "ISC",
|
|
28
|
+
"main": "lib/index.js",
|
|
29
|
+
"module": "es/index.js",
|
|
30
|
+
"files": [
|
|
31
|
+
"lib",
|
|
32
|
+
"es",
|
|
33
|
+
"assets"
|
|
34
|
+
],
|
|
35
|
+
"scripts": {
|
|
36
|
+
"prepare": "../../scripts/prepare-package.sh"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
40
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
41
|
+
},
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
44
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"@babel/runtime": "^7.12.5",
|
|
48
|
+
"@panneau/core": "^2.0.58",
|
|
49
|
+
"@panneau/data": "^2.0.58",
|
|
50
|
+
"@panneau/element-button": "^2.0.59",
|
|
51
|
+
"@panneau/element-form": "^2.0.59",
|
|
52
|
+
"@panneau/field-fields": "^2.0.60",
|
|
53
|
+
"@panneau/intl": "^2.0.58",
|
|
54
|
+
"@panneau/themes": "^2.0.58",
|
|
55
|
+
"classnames": "^2.2.6",
|
|
56
|
+
"lodash": "^4.17.21",
|
|
57
|
+
"prop-types": "^15.7.2",
|
|
58
|
+
"react-intl": "^5.15.8||^6.0.0"
|
|
59
|
+
},
|
|
60
|
+
"publishConfig": {
|
|
61
|
+
"access": "public"
|
|
62
|
+
},
|
|
63
|
+
"gitHead": "4e81ab6690fb8acf858d67730a469569dfe890e3"
|
|
64
|
+
}
|