@tsed/react-formio 2.3.4 → 2.3.5
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/components/select/select.component.d.ts +1 -1
- package/dist/components/table/components/defaultOperationButton.component.d.ts +2 -2
- package/dist/index.js +46 -46
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +193 -193
- package/dist/index.modern.js.map +1 -1
- package/package.json +3 -3
- package/src/components/select/select.component.tsx +1 -1
- package/src/components/table/components/defaultOperationButton.component.tsx +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HTMLAttributes, ReactElement } from "react";
|
|
1
|
+
import { type HTMLAttributes, type ReactElement } from "react";
|
|
2
2
|
import { FormControlProps } from "../form-control/formControl.component";
|
|
3
3
|
export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
|
|
4
4
|
size?: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
1
|
+
import React, { type HTMLAttributes } from "react";
|
|
2
2
|
export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
|
|
3
3
|
buttonType?: string;
|
|
4
4
|
buttonSize?: string;
|
|
@@ -11,4 +11,4 @@ export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElem
|
|
|
11
11
|
i18n?: (i18n: string) => string;
|
|
12
12
|
ctx?: any;
|
|
13
13
|
}
|
|
14
|
-
export declare function DefaultOperationButton(props: OperationButtonProps):
|
|
14
|
+
export declare function DefaultOperationButton(props: OperationButtonProps): React.JSX.Element;
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@ var Wizard = require('formiojs/Wizard');
|
|
|
4
4
|
var WizardBuilder = require('formiojs/WizardBuilder');
|
|
5
5
|
var classnames = require('classnames');
|
|
6
6
|
var noop = require('lodash/noop');
|
|
7
|
-
var React
|
|
7
|
+
var React = require('react');
|
|
8
8
|
var formiojs = require('formiojs');
|
|
9
9
|
var Choices = require('@formio/choices.js');
|
|
10
10
|
var reactDnd = require('react-dnd');
|
|
@@ -31,7 +31,7 @@ var Wizard__default = /*#__PURE__*/_interopDefaultLegacy(Wizard);
|
|
|
31
31
|
var WizardBuilder__default = /*#__PURE__*/_interopDefaultLegacy(WizardBuilder);
|
|
32
32
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
33
33
|
var noop__default = /*#__PURE__*/_interopDefaultLegacy(noop);
|
|
34
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React
|
|
34
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
35
35
|
var Choices__default = /*#__PURE__*/_interopDefaultLegacy(Choices);
|
|
36
36
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
37
37
|
var AllComponents__default = /*#__PURE__*/_interopDefaultLegacy(AllComponents);
|
|
@@ -142,8 +142,8 @@ function Select(_ref) {
|
|
|
142
142
|
layout
|
|
143
143
|
} = _ref,
|
|
144
144
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
145
|
-
const ref = React
|
|
146
|
-
React
|
|
145
|
+
const ref = React.useRef(null);
|
|
146
|
+
React.useEffect(() => {
|
|
147
147
|
let instance;
|
|
148
148
|
if (layout === "choicesjs") {
|
|
149
149
|
instance = new Choices__default["default"](ref.current, {
|
|
@@ -383,8 +383,8 @@ function useDndRow(_ref) {
|
|
|
383
383
|
index
|
|
384
384
|
} = _ref,
|
|
385
385
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
386
|
-
const dropRef = React
|
|
387
|
-
const dragRef = React
|
|
386
|
+
const dropRef = React.useRef(null);
|
|
387
|
+
const dragRef = React.useRef(null);
|
|
388
388
|
const [, drop] = reactDnd.useDrop({
|
|
389
389
|
accept: DND_ITEM_TYPE,
|
|
390
390
|
drop(item) {
|
|
@@ -554,9 +554,9 @@ function InputText(_ref) {
|
|
|
554
554
|
placeholder
|
|
555
555
|
} = _ref,
|
|
556
556
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
557
|
-
const [localValue, setValue] = React
|
|
558
|
-
const change = React
|
|
559
|
-
React
|
|
557
|
+
const [localValue, setValue] = React.useState(value);
|
|
558
|
+
const change = React.useMemo(() => onChange && callLast(onChange, 300), [onChange]);
|
|
559
|
+
React.useEffect(() => {
|
|
560
560
|
setValue(value);
|
|
561
561
|
}, [value]);
|
|
562
562
|
return /*#__PURE__*/React__default["default"].createElement(FormControl, {
|
|
@@ -605,8 +605,8 @@ function DefaultColumnFilter(props) {
|
|
|
605
605
|
setFilter
|
|
606
606
|
}
|
|
607
607
|
} = props;
|
|
608
|
-
const [value, setValue] = React
|
|
609
|
-
const onChange = React
|
|
608
|
+
const [value, setValue] = React.useState(filterValue || "");
|
|
609
|
+
const onChange = React.useCallback((name, value) => {
|
|
610
610
|
setValue(value);
|
|
611
611
|
setFilterId(id);
|
|
612
612
|
setFilter(value || undefined);
|
|
@@ -652,13 +652,13 @@ function DefaultOperationButton(props) {
|
|
|
652
652
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
653
653
|
} = props,
|
|
654
654
|
otherProps = _objectWithoutPropertiesLoose(props, _excluded$b);
|
|
655
|
-
return /*#__PURE__*/
|
|
655
|
+
return /*#__PURE__*/React__default["default"].createElement("button", _extends({}, otherProps, {
|
|
656
656
|
"aria-label": "Operation button: " + (title || action),
|
|
657
657
|
className: classnames__default["default"](className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), "btn-" + buttonSize),
|
|
658
658
|
onClick: stopPropagationWrapper(() => onClick(action))
|
|
659
|
-
}), icon ? /*#__PURE__*/
|
|
659
|
+
}), icon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("i", {
|
|
660
660
|
className: iconClass(undefined, icon)
|
|
661
|
-
}), " ", title && " ") : null, title && /*#__PURE__*/
|
|
661
|
+
}), " ", title && " ") : null, title && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
662
662
|
className: icon && title ? "ml-1" : ""
|
|
663
663
|
}, i18n(title)));
|
|
664
664
|
}
|
|
@@ -787,8 +787,8 @@ function useCustomTable(props) {
|
|
|
787
787
|
}), [ColumnFilter, ArrowSort]);
|
|
788
788
|
const [filterId, setFilterId] = React__default["default"].useState(controlledFilterId);
|
|
789
789
|
// DND
|
|
790
|
-
const [records, setRecords] = React
|
|
791
|
-
React
|
|
790
|
+
const [records, setRecords] = React.useState(data);
|
|
791
|
+
React.useEffect(() => {
|
|
792
792
|
setRecords(data);
|
|
793
793
|
}, [data]);
|
|
794
794
|
const _onDrag = (dragIndex, hoverIndex) => {
|
|
@@ -942,7 +942,7 @@ function ActionsTable(_ref) {
|
|
|
942
942
|
const {
|
|
943
943
|
i18n = f => f
|
|
944
944
|
} = props;
|
|
945
|
-
const [currentAction, setAction] = React
|
|
945
|
+
const [currentAction, setAction] = React.useState("");
|
|
946
946
|
const columns = [{
|
|
947
947
|
Header: i18n("Actions"),
|
|
948
948
|
accessor: "title",
|
|
@@ -1054,14 +1054,14 @@ function _catch$1(body, recover) {
|
|
|
1054
1054
|
return result;
|
|
1055
1055
|
}
|
|
1056
1056
|
function useEvent(event, callback, events) {
|
|
1057
|
-
React
|
|
1057
|
+
React.useEffect(() => {
|
|
1058
1058
|
if (callback) {
|
|
1059
1059
|
events.set(event, callback);
|
|
1060
1060
|
}
|
|
1061
1061
|
}, [callback, event, events]);
|
|
1062
1062
|
}
|
|
1063
1063
|
function useEvents(funcs) {
|
|
1064
|
-
const events = React
|
|
1064
|
+
const events = React.useRef(new Map());
|
|
1065
1065
|
const hasEvent = event => {
|
|
1066
1066
|
return funcs.hasOwnProperty(event) && typeof funcs[event] === "function";
|
|
1067
1067
|
};
|
|
@@ -1123,9 +1123,9 @@ function useForm(props) {
|
|
|
1123
1123
|
url
|
|
1124
1124
|
} = props,
|
|
1125
1125
|
funcs = _objectWithoutPropertiesLoose(props, _excluded$7);
|
|
1126
|
-
const element = React
|
|
1127
|
-
const isLoaded = React
|
|
1128
|
-
const instance = React
|
|
1126
|
+
const element = React.useRef();
|
|
1127
|
+
const isLoaded = React.useRef();
|
|
1128
|
+
const instance = React.useRef();
|
|
1129
1129
|
const {
|
|
1130
1130
|
emit,
|
|
1131
1131
|
hasEvent
|
|
@@ -1163,7 +1163,7 @@ function useForm(props) {
|
|
|
1163
1163
|
}
|
|
1164
1164
|
return instance.current;
|
|
1165
1165
|
};
|
|
1166
|
-
React
|
|
1166
|
+
React.useEffect(() => {
|
|
1167
1167
|
if (instance.current) {
|
|
1168
1168
|
instance.current.ready.then(formio => {
|
|
1169
1169
|
if (isEqual__default["default"](formio.submission.data, submission == null ? void 0 : submission.data)) {
|
|
@@ -1173,7 +1173,7 @@ function useForm(props) {
|
|
|
1173
1173
|
});
|
|
1174
1174
|
}
|
|
1175
1175
|
}, [submission]);
|
|
1176
|
-
React
|
|
1176
|
+
React.useEffect(() => {
|
|
1177
1177
|
if (form && instance.current) {
|
|
1178
1178
|
instance.current.ready.then(formio => {
|
|
1179
1179
|
formio.form = form;
|
|
@@ -1183,7 +1183,7 @@ function useForm(props) {
|
|
|
1183
1183
|
});
|
|
1184
1184
|
}
|
|
1185
1185
|
}, [form, url]);
|
|
1186
|
-
React
|
|
1186
|
+
React.useEffect(() => {
|
|
1187
1187
|
if (src) {
|
|
1188
1188
|
if (instance.current) {
|
|
1189
1189
|
isLoaded.current = false;
|
|
@@ -1192,7 +1192,7 @@ function useForm(props) {
|
|
|
1192
1192
|
createWebForm(src, options);
|
|
1193
1193
|
}
|
|
1194
1194
|
}, [src]);
|
|
1195
|
-
React
|
|
1195
|
+
React.useEffect(() => {
|
|
1196
1196
|
if (form) {
|
|
1197
1197
|
createWebForm(form, options);
|
|
1198
1198
|
}
|
|
@@ -1493,12 +1493,12 @@ function useFormAccess(_ref) {
|
|
|
1493
1493
|
onSubmit,
|
|
1494
1494
|
options
|
|
1495
1495
|
} = _ref;
|
|
1496
|
-
const form = React
|
|
1497
|
-
const [submissions, setSubmissions] = React
|
|
1498
|
-
const onChange = React
|
|
1496
|
+
const form = React.useMemo(() => getFormAccess(roles), [roles]);
|
|
1497
|
+
const [submissions, setSubmissions] = React.useState(() => dataAccessToSubmissions(formDefinition, form));
|
|
1498
|
+
const onChange = React.useCallback((type, submission) => {
|
|
1499
1499
|
updateSubmissions(type, submission, submissions, setSubmissions);
|
|
1500
1500
|
}, [submissions]);
|
|
1501
|
-
React
|
|
1501
|
+
React.useEffect(() => {
|
|
1502
1502
|
const input = dataAccessToSubmissions(formDefinition, form);
|
|
1503
1503
|
if (formDefinition != null && formDefinition._id) {
|
|
1504
1504
|
if (shouldUpdate("access", submissions.access, input) || shouldUpdate("submissionAccess", submissions.submissionAccess, input)) {
|
|
@@ -1527,7 +1527,7 @@ function NamedFormAccess(_ref2) {
|
|
|
1527
1527
|
onSubmit,
|
|
1528
1528
|
children
|
|
1529
1529
|
} = _ref2;
|
|
1530
|
-
const [isValid, setIsValid] = React
|
|
1530
|
+
const [isValid, setIsValid] = React.useState(true);
|
|
1531
1531
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Form, {
|
|
1532
1532
|
name: name,
|
|
1533
1533
|
form: form[name],
|
|
@@ -1832,8 +1832,8 @@ FormBuilder.propTypes = {
|
|
|
1832
1832
|
};
|
|
1833
1833
|
|
|
1834
1834
|
function useTooltip(options) {
|
|
1835
|
-
const ref = React
|
|
1836
|
-
React
|
|
1835
|
+
const ref = React.useRef();
|
|
1836
|
+
React.useEffect(() => {
|
|
1837
1837
|
ref.current && new Tooltip__default["default"](ref.current, options);
|
|
1838
1838
|
}, [ref, options]);
|
|
1839
1839
|
return ref;
|
|
@@ -1933,8 +1933,8 @@ function InputTags(_ref) {
|
|
|
1933
1933
|
suffix
|
|
1934
1934
|
} = _ref,
|
|
1935
1935
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
1936
|
-
const ref = React
|
|
1937
|
-
React
|
|
1936
|
+
const ref = React.useRef();
|
|
1937
|
+
React.useEffect(() => {
|
|
1938
1938
|
const instance = new Choices__default["default"](ref.current, {
|
|
1939
1939
|
delimiter: ",",
|
|
1940
1940
|
editItems: true,
|
|
@@ -2149,7 +2149,7 @@ function useFormEdit(props) {
|
|
|
2149
2149
|
current,
|
|
2150
2150
|
future,
|
|
2151
2151
|
past
|
|
2152
|
-
}, dispatchFormAction] = React
|
|
2152
|
+
}, dispatchFormAction] = React.useReducer(reducer, createInitialState(props));
|
|
2153
2153
|
const onSubmit = () => {
|
|
2154
2154
|
if (props.onSubmit && typeof props.onSubmit === "function") {
|
|
2155
2155
|
props.onSubmit(current);
|
|
@@ -2160,7 +2160,7 @@ function useFormEdit(props) {
|
|
|
2160
2160
|
props.onCopy(current);
|
|
2161
2161
|
}
|
|
2162
2162
|
};
|
|
2163
|
-
React
|
|
2163
|
+
React.useEffect(() => {
|
|
2164
2164
|
if (props.form && (current._id !== props.form._id || current.modified !== props.form.modified)) {
|
|
2165
2165
|
dispatchFormAction({
|
|
2166
2166
|
type: "replaceForm",
|
|
@@ -2344,8 +2344,8 @@ function useFormSettings(_ref) {
|
|
|
2344
2344
|
options
|
|
2345
2345
|
} = _ref;
|
|
2346
2346
|
const form = getFormSettingsSchema();
|
|
2347
|
-
const [isValid, setIsValid] = React
|
|
2348
|
-
const [submission, setSubmission] = React
|
|
2347
|
+
const [isValid, setIsValid] = React.useState(true);
|
|
2348
|
+
const [submission, setSubmission] = React.useState(() => formSettingsToSubmission(formDefinition));
|
|
2349
2349
|
const onChange = _ref2 => {
|
|
2350
2350
|
let {
|
|
2351
2351
|
data,
|
|
@@ -2358,7 +2358,7 @@ function useFormSettings(_ref) {
|
|
|
2358
2358
|
}
|
|
2359
2359
|
setIsValid(isValid);
|
|
2360
2360
|
};
|
|
2361
|
-
React
|
|
2361
|
+
React.useEffect(() => {
|
|
2362
2362
|
const input = formSettingsToSubmission(formDefinition);
|
|
2363
2363
|
if (formDefinition != null && formDefinition._id && !isEqual__default["default"](submission.data, input.data)) {
|
|
2364
2364
|
setSubmission(input);
|
|
@@ -7086,7 +7086,7 @@ Loader.propTypes = {
|
|
|
7086
7086
|
|
|
7087
7087
|
const _excluded$3 = ["show", "children", "closeModal", "onClose", "title", "footer", "style", "className"];
|
|
7088
7088
|
function useModal() {
|
|
7089
|
-
const [show, setShowModal] = React
|
|
7089
|
+
const [show, setShowModal] = React.useState(false);
|
|
7090
7090
|
return {
|
|
7091
7091
|
show,
|
|
7092
7092
|
setShowModal,
|
|
@@ -7110,14 +7110,14 @@ function Modal(_ref) {
|
|
|
7110
7110
|
className = ""
|
|
7111
7111
|
} = _ref,
|
|
7112
7112
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
7113
|
-
const titleRef = React
|
|
7114
|
-
const footerRef = React
|
|
7115
|
-
const [maxHeight, setMaxHeight] = React
|
|
7113
|
+
const titleRef = React.useRef();
|
|
7114
|
+
const footerRef = React.useRef();
|
|
7115
|
+
const [maxHeight, setMaxHeight] = React.useState();
|
|
7116
7116
|
const onClickClose = () => {
|
|
7117
7117
|
closeModal();
|
|
7118
7118
|
onClose();
|
|
7119
7119
|
};
|
|
7120
|
-
React
|
|
7120
|
+
React.useEffect(() => {
|
|
7121
7121
|
if (titleRef.current || footerRef.current) {
|
|
7122
7122
|
var _titleRef$current, _footerRef$current;
|
|
7123
7123
|
const height = ((titleRef == null ? void 0 : (_titleRef$current = titleRef.current) == null ? void 0 : _titleRef$current.offsetHeight) || 0) + ((footerRef == null ? void 0 : (_footerRef$current = footerRef.current) == null ? void 0 : _footerRef$current.offsetHeight) || 0);
|
|
@@ -7203,7 +7203,7 @@ function RemoveModal(_ref2) {
|
|
|
7203
7203
|
const {
|
|
7204
7204
|
i18n = f => f
|
|
7205
7205
|
} = props;
|
|
7206
|
-
const [value, setValue] = React
|
|
7206
|
+
const [value, setValue] = React.useState();
|
|
7207
7207
|
return /*#__PURE__*/React__default["default"].createElement(Modal, _extends({}, props, {
|
|
7208
7208
|
className: classnames__default["default"](props.className, "formio-dialog-theme-remove"),
|
|
7209
7209
|
style: {
|