@react-fabric/form 1.0.0-beta.61 → 1.0.0-beta.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/builder/FileField.js +8 -5
- package/dist/cjs/builder/components/SchemaArrayForm.js +1 -1
- package/dist/cjs/builder/components/SchemaField.js +2 -2
- package/dist/cjs/form/Form.js +40 -15
- package/dist/cjs/hooks/useFileUploader.js +40 -28
- package/dist/cjs/i18n/index.js +4 -4
- package/dist/cjs/input/AvatarInput.js +14 -9
- package/dist/cjs/input/Hidden.js +1 -10
- package/dist/cjs/input/RadioGroup.js +3 -1
- package/dist/cjs/select/DualList.js +1 -1
- package/dist/cjs/select/List.js +4 -2
- package/dist/cjs/select/Select.js +1 -1
- package/dist/esm/builder/FileField.js +8 -5
- package/dist/esm/builder/components/SchemaArrayForm.js +1 -1
- package/dist/esm/builder/components/SchemaField.js +2 -2
- package/dist/esm/form/Form.js +40 -15
- package/dist/esm/hooks/useFileUploader.js +41 -29
- package/dist/esm/i18n/index.js +2 -2
- package/dist/esm/input/AvatarInput.js +14 -9
- package/dist/esm/input/Hidden.js +2 -11
- package/dist/esm/input/RadioGroup.js +3 -1
- package/dist/esm/select/DualList.js +1 -1
- package/dist/esm/select/List.js +4 -2
- package/dist/esm/select/Select.js +1 -1
- package/dist/types/builder/FileField.d.ts +2 -1
- package/dist/types/form/Form.d.ts +6 -2
- package/dist/types/hooks/useFileUploader.d.ts +4 -2
- package/dist/types/input/AvatarInput.d.ts +1 -1
- package/dist/types/input/Hidden.d.ts +3 -11
- package/dist/types/input/RadioGroup.d.ts +5 -1
- package/package.json +5 -5
- package/src/builder/FileField.tsx +5 -3
- package/src/builder/components/SchemaArrayForm.tsx +1 -1
- package/src/builder/components/SchemaField.tsx +2 -2
- package/src/form/Form.tsx +20 -13
- package/src/hooks/useFileUploader.ts +41 -29
- package/src/i18n/index.ts +2 -2
- package/src/input/AvatarInput.tsx +11 -11
- package/src/input/Hidden.tsx +4 -22
- package/src/input/RadioGroup.tsx +6 -0
- package/src/select/DualList.tsx +1 -1
- package/src/select/List.tsx +2 -2
- package/src/select/Select.tsx +1 -1
- /package/dist/cjs/i18n/{ar.json.js → ar/form.json.js} +0 -0
- /package/dist/cjs/i18n/{en.json.js → en/form.json.js} +0 -0
- /package/dist/esm/i18n/{ar.json.js → ar/form.json.js} +0 -0
- /package/dist/esm/i18n/{en.json.js → en/form.json.js} +0 -0
- /package/src/i18n/{ar.json → ar/form.json} +0 -0
- /package/src/i18n/{en.json → en/form.json} +0 -0
|
@@ -13,7 +13,7 @@ var Field = require('../input/Field.js');
|
|
|
13
13
|
var Hidden = require('../input/Hidden.js');
|
|
14
14
|
var jsxRuntime = require('react/jsx-runtime');
|
|
15
15
|
|
|
16
|
-
var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
|
|
16
|
+
var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "onChange", "multiple", "invalid", "error"];
|
|
17
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
18
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
19
|
var FileField = function FileField(_ref) {
|
|
@@ -24,7 +24,8 @@ var FileField = function FileField(_ref) {
|
|
|
24
24
|
accept = _ref.accept,
|
|
25
25
|
value = _ref.value;
|
|
26
26
|
_ref.fileUrl;
|
|
27
|
-
var
|
|
27
|
+
var onChange = _ref.onChange,
|
|
28
|
+
multiple = _ref.multiple;
|
|
28
29
|
_ref.invalid;
|
|
29
30
|
var error = _ref.error,
|
|
30
31
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -48,10 +49,12 @@ var FileField = function FileField(_ref) {
|
|
|
48
49
|
return function (_x, _x2) {
|
|
49
50
|
return _ref2.apply(this, arguments);
|
|
50
51
|
};
|
|
51
|
-
}(), value,
|
|
52
|
+
}(), value, {
|
|
53
|
+
multiple: multiple,
|
|
54
|
+
onChange: onChange
|
|
55
|
+
}),
|
|
52
56
|
pending = _useFileUploader.pending,
|
|
53
57
|
files = _useFileUploader.files,
|
|
54
|
-
list = _useFileUploader.list,
|
|
55
58
|
upload = _useFileUploader.upload,
|
|
56
59
|
remove = _useFileUploader.remove;
|
|
57
60
|
return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
@@ -60,7 +63,7 @@ var FileField = function FileField(_ref) {
|
|
|
60
63
|
inline: inline,
|
|
61
64
|
label: label,
|
|
62
65
|
children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
|
|
63
|
-
|
|
66
|
+
value: multiple ? files : files === null || files === void 0 ? void 0 : files[0]
|
|
64
67
|
}, rest))
|
|
65
68
|
}), /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
|
|
66
69
|
color: "danger-200",
|
|
@@ -138,7 +138,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
|
|
|
138
138
|
acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
|
|
139
139
|
}, index);
|
|
140
140
|
})
|
|
141
|
-
}), AddModal]
|
|
141
|
+
}), /*#__PURE__*/jsxRuntime.jsx(AddModal, {})]
|
|
142
142
|
});
|
|
143
143
|
};
|
|
144
144
|
|
|
@@ -189,7 +189,7 @@ var SchemaField = function SchemaField(_ref) {
|
|
|
189
189
|
children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
|
|
190
190
|
name: "".concat(field, ".id"),
|
|
191
191
|
children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, {
|
|
192
|
-
|
|
192
|
+
value: id
|
|
193
193
|
})
|
|
194
194
|
}), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
|
|
195
195
|
name: "".concat(field, ".datatype"),
|
|
@@ -250,7 +250,7 @@ var SchemaField = function SchemaField(_ref) {
|
|
|
250
250
|
});
|
|
251
251
|
}
|
|
252
252
|
})]
|
|
253
|
-
}), OptionModal]
|
|
253
|
+
}), /*#__PURE__*/jsxRuntime.jsx(OptionModal, {})]
|
|
254
254
|
}), type === schema.DATA_TYPES.FILE && /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
|
|
255
255
|
children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
|
|
256
256
|
name: "".concat(field, ".accept"),
|
package/dist/cjs/form/Form.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
|
-
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
|
|
5
4
|
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
|
|
5
|
+
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
|
|
6
6
|
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
7
|
var _regeneratorRuntime = require('@babel/runtime/regenerator');
|
|
8
8
|
var core = require('@react-fabric/core');
|
|
@@ -11,7 +11,7 @@ var react = require('react');
|
|
|
11
11
|
var reactHookForm = require('react-hook-form');
|
|
12
12
|
var jsxRuntime = require('react/jsx-runtime');
|
|
13
13
|
|
|
14
|
-
var _excluded = ["formRef", "resolver", "children", "defaultValues", "onSubmit", "onChange"];
|
|
14
|
+
var _excluded = ["formRef", "resolver", "children", "resetOnChange", "defaultValues", "onSubmit", "onChange"];
|
|
15
15
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
16
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
17
|
var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
|
|
@@ -50,8 +50,9 @@ var Form = function Form(_ref) {
|
|
|
50
50
|
var formRef = _ref.formRef,
|
|
51
51
|
resolver = _ref.resolver,
|
|
52
52
|
children = _ref.children,
|
|
53
|
+
resetOnChange = _ref.resetOnChange,
|
|
53
54
|
_ref$defaultValues = _ref.defaultValues,
|
|
54
|
-
|
|
55
|
+
_defaultValues = _ref$defaultValues === void 0 ? utilities.EMPTY_OBJECT : _ref$defaultValues,
|
|
55
56
|
_ref$onSubmit = _ref.onSubmit,
|
|
56
57
|
_onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
|
|
57
58
|
onChange = _ref.onChange,
|
|
@@ -60,7 +61,26 @@ var Form = function Form(_ref) {
|
|
|
60
61
|
var form = reactHookForm.useForm({
|
|
61
62
|
shouldFocusError: true,
|
|
62
63
|
resolver: resolver,
|
|
63
|
-
defaultValues:
|
|
64
|
+
defaultValues: function () {
|
|
65
|
+
var _defaultValues2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
|
|
66
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
67
|
+
while (1) switch (_context.prev = _context.next) {
|
|
68
|
+
case 0:
|
|
69
|
+
_context.next = 2;
|
|
70
|
+
return Promise.resolve(_defaultValues);
|
|
71
|
+
case 2:
|
|
72
|
+
return _context.abrupt("return", _context.sent);
|
|
73
|
+
case 3:
|
|
74
|
+
case "end":
|
|
75
|
+
return _context.stop();
|
|
76
|
+
}
|
|
77
|
+
}, _callee);
|
|
78
|
+
}));
|
|
79
|
+
function defaultValues() {
|
|
80
|
+
return _defaultValues2.apply(this, arguments);
|
|
81
|
+
}
|
|
82
|
+
return defaultValues;
|
|
83
|
+
}()
|
|
64
84
|
});
|
|
65
85
|
var _useTransition = react.useTransition(),
|
|
66
86
|
_useTransition2 = _slicedToArray(_useTransition, 2),
|
|
@@ -82,12 +102,17 @@ var Form = function Form(_ref) {
|
|
|
82
102
|
form.reset(reset);
|
|
83
103
|
form.clearErrors();
|
|
84
104
|
(_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector("[auto-focus], input, textarea")) === null || _ref$current === void 0 || _ref$current.focus();
|
|
85
|
-
}, [
|
|
105
|
+
}, []);
|
|
106
|
+
react.useEffect(function () {
|
|
107
|
+
if (resetOnChange) {
|
|
108
|
+
handleReset(_defaultValues);
|
|
109
|
+
}
|
|
110
|
+
}, [_defaultValues, resetOnChange]);
|
|
86
111
|
react.useImperativeHandle(formRef, function () {
|
|
87
112
|
return {
|
|
88
113
|
state: form.formState,
|
|
89
114
|
reset: function reset() {
|
|
90
|
-
return handleReset(
|
|
115
|
+
return handleReset(_defaultValues);
|
|
91
116
|
},
|
|
92
117
|
clear: function clear() {
|
|
93
118
|
return handleReset();
|
|
@@ -96,19 +121,19 @@ var Form = function Form(_ref) {
|
|
|
96
121
|
return form.handleSubmit(_onSubmit);
|
|
97
122
|
},
|
|
98
123
|
validate: function () {
|
|
99
|
-
var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function
|
|
100
|
-
return _regeneratorRuntime.wrap(function
|
|
101
|
-
while (1) switch (
|
|
124
|
+
var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields) {
|
|
125
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
126
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
102
127
|
case 0:
|
|
103
|
-
|
|
128
|
+
_context2.next = 2;
|
|
104
129
|
return form.trigger(fields);
|
|
105
130
|
case 2:
|
|
106
|
-
return
|
|
131
|
+
return _context2.abrupt("return", _context2.sent);
|
|
107
132
|
case 3:
|
|
108
133
|
case "end":
|
|
109
|
-
return
|
|
134
|
+
return _context2.stop();
|
|
110
135
|
}
|
|
111
|
-
},
|
|
136
|
+
}, _callee2);
|
|
112
137
|
}));
|
|
113
138
|
function validate(_x) {
|
|
114
139
|
return _validate.apply(this, arguments);
|
|
@@ -132,7 +157,7 @@ var Form = function Form(_ref) {
|
|
|
132
157
|
}, 50);
|
|
133
158
|
}
|
|
134
159
|
};
|
|
135
|
-
}, [_onSubmit, form, form.formState,
|
|
160
|
+
}, [_onSubmit, form, form.formState, _defaultValues]);
|
|
136
161
|
var onInvalid = react.useCallback(function (_, e) {
|
|
137
162
|
var el = e.target;
|
|
138
163
|
console.log("Invalid:", _, e);
|
|
@@ -145,7 +170,7 @@ var Form = function Form(_ref) {
|
|
|
145
170
|
children: /*#__PURE__*/jsxRuntime.jsxs("form", _objectSpread(_objectSpread({
|
|
146
171
|
ref: ref,
|
|
147
172
|
onReset: function onReset() {
|
|
148
|
-
return handleReset(
|
|
173
|
+
return handleReset(_defaultValues);
|
|
149
174
|
},
|
|
150
175
|
onSubmit: function onSubmit(e) {
|
|
151
176
|
e.stopPropagation();
|
|
@@ -29,7 +29,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
31
|
var useFileUploader = function useFileUploader(uploader, initialList) {
|
|
32
|
-
var
|
|
32
|
+
var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
|
|
33
|
+
_ref$multiple = _ref.multiple,
|
|
34
|
+
multiple = _ref$multiple === void 0 ? true : _ref$multiple,
|
|
35
|
+
onChange = _ref.onChange;
|
|
33
36
|
var _useReducer = react.useReducer(function (state, action) {
|
|
34
37
|
if (action.type === "start") {
|
|
35
38
|
if (!multiple) state.files.clear();
|
|
@@ -76,40 +79,26 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
|
|
|
76
79
|
if (action.type === "remove") {
|
|
77
80
|
state.files["delete"](action.key);
|
|
78
81
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
path: file.path,
|
|
83
|
-
mime: file.mime,
|
|
84
|
-
size: file.size,
|
|
85
|
-
uploaded: file.uploaded,
|
|
86
|
-
filename: file.filename
|
|
87
|
-
};
|
|
88
|
-
}).filter(Boolean);
|
|
89
|
-
return _objectSpread({}, state);
|
|
90
|
-
}, {
|
|
91
|
-
files: new Map(),
|
|
92
|
-
count: 0
|
|
93
|
-
}, function (state) {
|
|
94
|
-
if (initialList) {
|
|
95
|
-
if (utilities.isString(initialList)) {
|
|
82
|
+
if (action.type === "init") {
|
|
83
|
+
state.files = new Map();
|
|
84
|
+
if (utilities.isString(action.initialList)) {
|
|
96
85
|
var key = utilities.uuid();
|
|
97
86
|
state.files.set(key, {
|
|
98
87
|
key: key,
|
|
99
|
-
path: initialList,
|
|
88
|
+
path: action.initialList,
|
|
100
89
|
filename: "",
|
|
101
90
|
size: 0,
|
|
102
91
|
mime: ""
|
|
103
92
|
});
|
|
104
93
|
}
|
|
105
|
-
if (utilities.isObject(initialList)) {
|
|
94
|
+
if (utilities.isObject(action.initialList)) {
|
|
106
95
|
var _key = utilities.uuid();
|
|
107
|
-
state.files.set(_key, _objectSpread(_objectSpread({}, initialList), {}, {
|
|
96
|
+
state.files.set(_key, _objectSpread(_objectSpread({}, action.initialList), {}, {
|
|
108
97
|
key: _key
|
|
109
98
|
}));
|
|
110
99
|
}
|
|
111
|
-
if (utilities.isArray(initialList)) {
|
|
112
|
-
initialList.forEach(function (file) {
|
|
100
|
+
if (utilities.isArray(action.initialList)) {
|
|
101
|
+
action.initialList.forEach(function (file) {
|
|
113
102
|
var key = utilities.uuid();
|
|
114
103
|
state.files.set(key, _objectSpread(_objectSpread({}, file), {}, {
|
|
115
104
|
key: key
|
|
@@ -117,14 +106,38 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
|
|
|
117
106
|
});
|
|
118
107
|
}
|
|
119
108
|
}
|
|
120
|
-
state.list = Array.from(state.files.values())
|
|
121
|
-
|
|
109
|
+
state.list = Array.from(state.files.values()).map(function (file) {
|
|
110
|
+
return !file.progress && !file.error && {
|
|
111
|
+
key: file.key,
|
|
112
|
+
path: file.path,
|
|
113
|
+
mime: file.mime,
|
|
114
|
+
size: file.size,
|
|
115
|
+
uploaded: file.uploaded,
|
|
116
|
+
filename: file.filename
|
|
117
|
+
};
|
|
118
|
+
}).filter(Boolean);
|
|
119
|
+
if (action.type === "remove" || action.type === "stop") {
|
|
120
|
+
setTimeout(function () {
|
|
121
|
+
var _state$list$;
|
|
122
|
+
onChange === null || onChange === void 0 || onChange(multiple ? state.list : (_state$list$ = state.list[0]) !== null && _state$list$ !== void 0 ? _state$list$ : null);
|
|
123
|
+
}, 100);
|
|
124
|
+
}
|
|
125
|
+
return _objectSpread({}, state);
|
|
126
|
+
}, {
|
|
127
|
+
files: new Map(),
|
|
128
|
+
count: 0
|
|
122
129
|
}),
|
|
123
130
|
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
124
131
|
state = _useReducer2[0],
|
|
125
132
|
dispatch = _useReducer2[1];
|
|
133
|
+
react.useEffect(function () {
|
|
134
|
+
dispatch({
|
|
135
|
+
type: "init",
|
|
136
|
+
initialList: initialList
|
|
137
|
+
});
|
|
138
|
+
}, [initialList]);
|
|
126
139
|
var doUpload = react.useCallback( /*#__PURE__*/function () {
|
|
127
|
-
var
|
|
140
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
|
|
128
141
|
var data, _abort2;
|
|
129
142
|
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
130
143
|
while (1) switch (_context.prev = _context.next) {
|
|
@@ -185,7 +198,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
|
|
|
185
198
|
}, _callee);
|
|
186
199
|
}));
|
|
187
200
|
return function (_x, _x2) {
|
|
188
|
-
return
|
|
201
|
+
return _ref2.apply(this, arguments);
|
|
189
202
|
};
|
|
190
203
|
}(), []);
|
|
191
204
|
var upload = react.useCallback(function (files) {
|
|
@@ -212,7 +225,6 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
|
|
|
212
225
|
remove: remove,
|
|
213
226
|
retry: retry,
|
|
214
227
|
pending: state.count,
|
|
215
|
-
list: state.list,
|
|
216
228
|
files: Array.from(state.files.values())
|
|
217
229
|
};
|
|
218
230
|
};
|
package/dist/cjs/i18n/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var core = require('@react-fabric/core');
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var form$1 = require('./ar/form.json.js');
|
|
5
|
+
var form = require('./en/form.json.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
* React Fabric
|
|
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
|
|
|
28
28
|
*/
|
|
29
29
|
|
|
30
30
|
core.addTranslationBundle("form", {
|
|
31
|
-
en:
|
|
32
|
-
ar:
|
|
31
|
+
en: form.default,
|
|
32
|
+
ar: form$1.default
|
|
33
33
|
});
|
|
@@ -12,7 +12,7 @@ var useFileUploader = require('../hooks/useFileUploader.js');
|
|
|
12
12
|
var Hidden = require('./Hidden.js');
|
|
13
13
|
var jsxRuntime = require('react/jsx-runtime');
|
|
14
14
|
|
|
15
|
-
var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler"];
|
|
15
|
+
var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler", "onChange"];
|
|
16
16
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
17
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
18
|
/**
|
|
@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
24
24
|
* @returns {JSX.Element} - The rendered AvatarInput component.
|
|
25
25
|
*/
|
|
26
26
|
var AvatarInput = function AvatarInput(_ref) {
|
|
27
|
-
var
|
|
27
|
+
var _files$2;
|
|
28
28
|
var _ref$size = _ref.size,
|
|
29
29
|
size = _ref$size === void 0 ? "6rem" : _ref$size,
|
|
30
30
|
avatarName = _ref.avatarName,
|
|
@@ -36,6 +36,7 @@ var AvatarInput = function AvatarInput(_ref) {
|
|
|
36
36
|
variant = _ref.variant,
|
|
37
37
|
fileUrl = _ref.fileUrl,
|
|
38
38
|
uploadHandler = _ref.uploadHandler,
|
|
39
|
+
_onChange = _ref.onChange,
|
|
39
40
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
40
41
|
var _useFileUploader = useFileUploader.useFileUploader( /*#__PURE__*/function () {
|
|
41
42
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
|
|
@@ -55,9 +56,14 @@ var AvatarInput = function AvatarInput(_ref) {
|
|
|
55
56
|
return function (_x, _x2) {
|
|
56
57
|
return _ref2.apply(this, arguments);
|
|
57
58
|
};
|
|
58
|
-
}(), value,
|
|
59
|
+
}(), value !== null && value !== void 0 ? value : defaultValue, {
|
|
60
|
+
multiple: false,
|
|
61
|
+
onChange: function onChange(files) {
|
|
62
|
+
var _files$path;
|
|
63
|
+
return _onChange === null || _onChange === void 0 ? void 0 : _onChange((_files$path = files === null || files === void 0 ? void 0 : files.path) !== null && _files$path !== void 0 ? _files$path : null);
|
|
64
|
+
}
|
|
65
|
+
}),
|
|
59
66
|
files = _useFileUploader.files,
|
|
60
|
-
list = _useFileUploader.list,
|
|
61
67
|
upload = _useFileUploader.upload,
|
|
62
68
|
remove = _useFileUploader.remove;
|
|
63
69
|
var _useState = react.useState(""),
|
|
@@ -65,7 +71,7 @@ var AvatarInput = function AvatarInput(_ref) {
|
|
|
65
71
|
base64 = _useState2[0],
|
|
66
72
|
setBase64 = _useState2[1];
|
|
67
73
|
react.useEffect(function () {
|
|
68
|
-
if (
|
|
74
|
+
if (files !== null && files !== void 0 && files.length) {
|
|
69
75
|
var _files$;
|
|
70
76
|
var file = files === null || files === void 0 || (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.file;
|
|
71
77
|
void (file && new Response(file).blob().then(function (blob) {
|
|
@@ -82,14 +88,14 @@ var AvatarInput = function AvatarInput(_ref) {
|
|
|
82
88
|
var _ref3, _fileUrl;
|
|
83
89
|
setBase64((_ref3 = (_fileUrl = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "")) !== null && _fileUrl !== void 0 ? _fileUrl : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "");
|
|
84
90
|
}
|
|
85
|
-
}, [files,
|
|
91
|
+
}, [files, defaultValue]);
|
|
86
92
|
react.useEffect(function () {
|
|
87
93
|
var _fileUrl2, _fileUrl3;
|
|
88
94
|
!value && defaultValue && setBase64((_fileUrl2 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue)) !== null && _fileUrl2 !== void 0 ? _fileUrl2 : defaultValue);
|
|
89
95
|
value && setBase64((_fileUrl3 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(value)) !== null && _fileUrl3 !== void 0 ? _fileUrl3 : value);
|
|
90
96
|
}, [value, defaultValue]);
|
|
91
97
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
92
|
-
className: "flex flex-nowrap items-end overflow-hidden",
|
|
98
|
+
className: "flex flex-nowrap items-end overflow-hidden p-px",
|
|
93
99
|
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
94
100
|
className: classNames("inline-block leading-none relative outline overflow-hidden", rounded && "rounded-full", !rounded && "rounded"),
|
|
95
101
|
children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
|
|
@@ -114,8 +120,7 @@ var AvatarInput = function AvatarInput(_ref) {
|
|
|
114
120
|
})]
|
|
115
121
|
})]
|
|
116
122
|
}), /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
|
|
117
|
-
|
|
118
|
-
defaultValue: defaultValue
|
|
123
|
+
value: files === null || files === void 0 || (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.path
|
|
119
124
|
}, rest)), files.map(function (file, idx) {
|
|
120
125
|
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
121
126
|
className: "px-2 py-1 flex-1 overflow-hidden",
|
package/dist/cjs/input/Hidden.js
CHANGED
|
@@ -36,23 +36,14 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
36
36
|
* @returns {JSX.Element} The rendered hidden input field and error icon.
|
|
37
37
|
*/
|
|
38
38
|
var HiddenInput = function HiddenInput(_ref) {
|
|
39
|
-
var
|
|
40
|
-
defaultValue = _ref.defaultValue,
|
|
41
|
-
onChange = _ref.onChange,
|
|
42
|
-
invalid = _ref.invalid,
|
|
39
|
+
var invalid = _ref.invalid,
|
|
43
40
|
error = _ref.error,
|
|
44
41
|
_ref$value = _ref.value,
|
|
45
42
|
value = _ref$value === void 0 ? "" : _ref$value,
|
|
46
43
|
name = _ref.name;
|
|
47
|
-
react.useEffect(function () {
|
|
48
|
-
setTimeout(function () {
|
|
49
|
-
onChange === null || onChange === void 0 || onChange(hiddenValue !== null && hiddenValue !== void 0 ? hiddenValue : defaultValue);
|
|
50
|
-
}, 50);
|
|
51
|
-
}, [hiddenValue, defaultValue]);
|
|
52
44
|
return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
|
|
53
45
|
children: [/*#__PURE__*/jsxRuntime.jsx("input", {
|
|
54
46
|
type: "hidden",
|
|
55
|
-
onChange: onChange,
|
|
56
47
|
value: value,
|
|
57
48
|
name: name
|
|
58
49
|
}), /*#__PURE__*/jsxRuntime.jsx(ErrorIcon.ErrorIcon, {
|
|
@@ -7,7 +7,7 @@ var react = require('react');
|
|
|
7
7
|
var FieldWrapper = require('../internal/FieldWrapper.js');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
|
|
10
|
-
var _excluded = ["children", "name", "className", "optionWidth", "onChange"];
|
|
10
|
+
var _excluded = ["children", "name", "className", "optionWidth", "value", "onChange"];
|
|
11
11
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
12
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
13
13
|
/**
|
|
@@ -23,6 +23,7 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
23
23
|
name = _ref.name,
|
|
24
24
|
className = _ref.className,
|
|
25
25
|
optionWidth = _ref.optionWidth,
|
|
26
|
+
value = _ref.value,
|
|
26
27
|
onChange = _ref.onChange,
|
|
27
28
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
28
29
|
return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
|
|
@@ -31,6 +32,7 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
31
32
|
children: core.cloneChildren(children, function (child) {
|
|
32
33
|
return /*#__PURE__*/react.cloneElement(child, {
|
|
33
34
|
name: name,
|
|
35
|
+
checked: child.props.value === value,
|
|
34
36
|
onChange: onChange,
|
|
35
37
|
width: optionWidth
|
|
36
38
|
});
|
|
@@ -38,7 +38,7 @@ var DualList = function DualList(_ref) {
|
|
|
38
38
|
_ref$labelProperty = _ref.labelProperty,
|
|
39
39
|
labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
|
|
40
40
|
_ref$valueProperty = _ref.valueProperty,
|
|
41
|
-
valueProperty = _ref$valueProperty === void 0 ? "
|
|
41
|
+
valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
|
|
42
42
|
renderer = _ref.renderer,
|
|
43
43
|
onChange = _ref.onChange,
|
|
44
44
|
name = _ref.name,
|
package/dist/cjs/select/List.js
CHANGED
|
@@ -29,8 +29,10 @@ var List = function List(_ref) {
|
|
|
29
29
|
options = _ref.options,
|
|
30
30
|
height = _ref.height,
|
|
31
31
|
groupProperty = _ref.groupProperty,
|
|
32
|
-
labelProperty = _ref.labelProperty,
|
|
33
|
-
|
|
32
|
+
_ref$labelProperty = _ref.labelProperty,
|
|
33
|
+
labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
|
|
34
|
+
_ref$valueProperty = _ref.valueProperty,
|
|
35
|
+
valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
|
|
34
36
|
infoProperty = _ref.infoProperty,
|
|
35
37
|
sortProperty = _ref.sortProperty,
|
|
36
38
|
multiple = _ref.multiple,
|
|
@@ -34,7 +34,7 @@ var Select = function Select(_ref) {
|
|
|
34
34
|
_ref$labelProperty = _ref.labelProperty,
|
|
35
35
|
labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
|
|
36
36
|
_ref$valueProperty = _ref.valueProperty,
|
|
37
|
-
valueProperty = _ref$valueProperty === void 0 ? "
|
|
37
|
+
valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
|
|
38
38
|
sortProperty = _ref.sortProperty,
|
|
39
39
|
infoProperty = _ref.infoProperty,
|
|
40
40
|
multiple = _ref.multiple,
|
|
@@ -13,7 +13,7 @@ import { Field } from '../input/Field.js';
|
|
|
13
13
|
import { HiddenInput } from '../input/Hidden.js';
|
|
14
14
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
15
15
|
|
|
16
|
-
var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
|
|
16
|
+
var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "onChange", "multiple", "invalid", "error"];
|
|
17
17
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
18
18
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
19
|
var FileField = function FileField(_ref) {
|
|
@@ -24,7 +24,8 @@ var FileField = function FileField(_ref) {
|
|
|
24
24
|
accept = _ref.accept,
|
|
25
25
|
value = _ref.value;
|
|
26
26
|
_ref.fileUrl;
|
|
27
|
-
var
|
|
27
|
+
var onChange = _ref.onChange,
|
|
28
|
+
multiple = _ref.multiple;
|
|
28
29
|
_ref.invalid;
|
|
29
30
|
var error = _ref.error,
|
|
30
31
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -48,10 +49,12 @@ var FileField = function FileField(_ref) {
|
|
|
48
49
|
return function (_x, _x2) {
|
|
49
50
|
return _ref2.apply(this, arguments);
|
|
50
51
|
};
|
|
51
|
-
}(), value,
|
|
52
|
+
}(), value, {
|
|
53
|
+
multiple: multiple,
|
|
54
|
+
onChange: onChange
|
|
55
|
+
}),
|
|
52
56
|
pending = _useFileUploader.pending,
|
|
53
57
|
files = _useFileUploader.files,
|
|
54
|
-
list = _useFileUploader.list,
|
|
55
58
|
upload = _useFileUploader.upload,
|
|
56
59
|
remove = _useFileUploader.remove;
|
|
57
60
|
return /*#__PURE__*/jsxs(Fragment, {
|
|
@@ -60,7 +63,7 @@ var FileField = function FileField(_ref) {
|
|
|
60
63
|
inline: inline,
|
|
61
64
|
label: label,
|
|
62
65
|
children: /*#__PURE__*/jsx(HiddenInput, _objectSpread({
|
|
63
|
-
|
|
66
|
+
value: multiple ? files : files === null || files === void 0 ? void 0 : files[0]
|
|
64
67
|
}, rest))
|
|
65
68
|
}), /*#__PURE__*/jsx(Tooltip, {
|
|
66
69
|
color: "danger-200",
|
|
@@ -138,7 +138,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
|
|
|
138
138
|
acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(DATA_TYPES)
|
|
139
139
|
}, index);
|
|
140
140
|
})
|
|
141
|
-
}), AddModal]
|
|
141
|
+
}), /*#__PURE__*/jsx(AddModal, {})]
|
|
142
142
|
});
|
|
143
143
|
};
|
|
144
144
|
|
|
@@ -189,7 +189,7 @@ var SchemaField = function SchemaField(_ref) {
|
|
|
189
189
|
children: [/*#__PURE__*/jsx(Controller, {
|
|
190
190
|
name: "".concat(field, ".id"),
|
|
191
191
|
children: /*#__PURE__*/jsx(HiddenInput, {
|
|
192
|
-
|
|
192
|
+
value: id
|
|
193
193
|
})
|
|
194
194
|
}), /*#__PURE__*/jsx(Controller, {
|
|
195
195
|
name: "".concat(field, ".datatype"),
|
|
@@ -250,7 +250,7 @@ var SchemaField = function SchemaField(_ref) {
|
|
|
250
250
|
});
|
|
251
251
|
}
|
|
252
252
|
})]
|
|
253
|
-
}), OptionModal]
|
|
253
|
+
}), /*#__PURE__*/jsx(OptionModal, {})]
|
|
254
254
|
}), type === DATA_TYPES.FILE && /*#__PURE__*/jsx(Fragment, {
|
|
255
255
|
children: /*#__PURE__*/jsx(Controller, {
|
|
256
256
|
name: "".concat(field, ".accept"),
|