@panneau/form-two-pane 3.0.293 → 3.0.295
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 +20 -7
- package/package.json +12 -12
package/es/index.js
CHANGED
|
@@ -4,14 +4,17 @@ import classNames from 'classnames';
|
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { PropTypes as PropTypes$1 } from '@panneau/core';
|
|
7
|
-
import { useFieldComponent } from '@panneau/core/contexts';
|
|
7
|
+
import { useFieldComponent, usePreviewComponent } from '@panneau/core/contexts';
|
|
8
8
|
import Form from '@panneau/element-form';
|
|
9
9
|
|
|
10
10
|
var styles = {};
|
|
11
11
|
|
|
12
|
-
var _excluded = ["fields", "status", "value", "setValue", "onSubmit", "buttons", "children", "className"];
|
|
12
|
+
var _excluded = ["resource", "fields", "status", "value", "setValue", "onSubmit", "buttons", "children", "className"];
|
|
13
13
|
var propTypes = {
|
|
14
14
|
fields: PropTypes.objectOf(PropTypes.shape({})).isRequired,
|
|
15
|
+
resource: PropTypes.shape({
|
|
16
|
+
id: PropTypes.string
|
|
17
|
+
}),
|
|
15
18
|
value: PropTypes.object,
|
|
16
19
|
// eslint-disable-line react/forbid-prop-types
|
|
17
20
|
setValue: PropTypes.func,
|
|
@@ -31,6 +34,7 @@ var propTypes = {
|
|
|
31
34
|
className: PropTypes.string
|
|
32
35
|
};
|
|
33
36
|
var defaultProps = {
|
|
37
|
+
resource: null,
|
|
34
38
|
status: null,
|
|
35
39
|
value: null,
|
|
36
40
|
setValue: null,
|
|
@@ -41,7 +45,8 @@ var defaultProps = {
|
|
|
41
45
|
className: null
|
|
42
46
|
};
|
|
43
47
|
var TwoPaneForm = function TwoPaneForm(_ref) {
|
|
44
|
-
var
|
|
48
|
+
var resource = _ref.resource,
|
|
49
|
+
fields = _ref.fields,
|
|
45
50
|
status = _ref.status,
|
|
46
51
|
value = _ref.value,
|
|
47
52
|
setValue = _ref.setValue,
|
|
@@ -50,12 +55,17 @@ var TwoPaneForm = function TwoPaneForm(_ref) {
|
|
|
50
55
|
children = _ref.children,
|
|
51
56
|
className = _ref.className,
|
|
52
57
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
58
|
+
var _ref2 = resource || {},
|
|
59
|
+
_ref2$id = _ref2.id,
|
|
60
|
+
id = _ref2$id === void 0 ? null : _ref2$id;
|
|
53
61
|
var FieldsComponent = useFieldComponent('fields');
|
|
62
|
+
var PreviewComponent = usePreviewComponent(id);
|
|
54
63
|
var onChange = setValue || null;
|
|
55
64
|
return /*#__PURE__*/React.createElement("div", {
|
|
56
|
-
className: "
|
|
65
|
+
className: "container-fluid row gx-4"
|
|
57
66
|
}, /*#__PURE__*/React.createElement(Form, Object.assign({
|
|
58
|
-
className: classNames([styles.container, 'form', '
|
|
67
|
+
className: classNames([styles.container, 'form', 'col-12', 'col-lg-6', _defineProperty({}, className, className !== null)]),
|
|
68
|
+
resource: resource,
|
|
59
69
|
status: status,
|
|
60
70
|
buttons: buttons,
|
|
61
71
|
onSubmit: onSubmit
|
|
@@ -64,8 +74,11 @@ var TwoPaneForm = function TwoPaneForm(_ref) {
|
|
|
64
74
|
value: value,
|
|
65
75
|
onChange: onChange
|
|
66
76
|
})), /*#__PURE__*/React.createElement("div", {
|
|
67
|
-
className: "
|
|
68
|
-
},
|
|
77
|
+
className: "col-12 col-lg-6"
|
|
78
|
+
}, PreviewComponent !== null ? /*#__PURE__*/React.createElement(PreviewComponent, {
|
|
79
|
+
resource: resource,
|
|
80
|
+
value: value
|
|
81
|
+
}) : children));
|
|
69
82
|
};
|
|
70
83
|
TwoPaneForm.propTypes = propTypes;
|
|
71
84
|
TwoPaneForm.defaultProps = defaultProps;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/form-two-pane",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.295",
|
|
4
4
|
"description": "Two-pane resource forms",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -50,21 +50,21 @@
|
|
|
50
50
|
"build": "../../scripts/prepare-package.sh"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
54
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
53
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
54
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
55
55
|
},
|
|
56
56
|
"peerDependencies": {
|
|
57
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
58
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
57
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
58
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
61
|
"@babel/runtime": "^7.12.5",
|
|
62
|
-
"@panneau/core": "^3.0.
|
|
63
|
-
"@panneau/data": "^3.0.
|
|
64
|
-
"@panneau/element-button": "^3.0.
|
|
65
|
-
"@panneau/element-form": "^3.0.
|
|
66
|
-
"@panneau/field-fields": "^3.0.
|
|
67
|
-
"@panneau/themes": "^3.0.
|
|
62
|
+
"@panneau/core": "^3.0.295",
|
|
63
|
+
"@panneau/data": "^3.0.295",
|
|
64
|
+
"@panneau/element-button": "^3.0.295",
|
|
65
|
+
"@panneau/element-form": "^3.0.295",
|
|
66
|
+
"@panneau/field-fields": "^3.0.295",
|
|
67
|
+
"@panneau/themes": "^3.0.295",
|
|
68
68
|
"classnames": "^2.5.1",
|
|
69
69
|
"lodash-es": "^4.17.21",
|
|
70
70
|
"prop-types": "^15.7.2",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "f24b1d1db695249b3d91abccf1c0d91b8c1cea8e"
|
|
77
77
|
}
|