@wavemaker-ai/react-runtime 1.0.0-rc.647655 → 1.0.0-rc.647684
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/actions/notification-action.js +3 -3
- package/actions/toast.js +2 -1
- package/components/basic/icon/index.js +36 -5
- package/components/basic/iframe/index.js +18 -8
- package/components/basic/label/index.js +4 -3
- package/components/basic/message/index.js +1 -0
- package/components/basic/search/index.d.ts +72 -3
- package/components/basic/search/index.js +84 -32
- package/components/basic/search/props.d.ts +4 -0
- package/components/basic/search/providers.d.ts +1 -1
- package/components/basic/search/providers.js +6 -3
- package/components/common/WmAppIcon/index.js +11 -8
- package/components/common/WmAppIcon/props.d.ts +2 -0
- package/components/container/accordion/accordion-pane/index.d.ts +1 -0
- package/components/container/accordion/accordion-pane/index.js +7 -3
- package/components/container/accordion/accordion-pane/props.d.ts +1 -0
- package/components/container/index.js +13 -5
- package/components/container/layout-grid/index.js +1 -0
- package/components/container/linear-layout/index.js +0 -1
- package/components/container/panel/components/panel-header/index.js +1 -3
- package/components/container/tabs/tab-pane/index.d.ts +1 -0
- package/components/container/tabs/tab-pane/index.js +2 -2
- package/components/container/tabs/tab-pane/props.d.ts +1 -0
- package/components/container/wizard/index.js +11 -10
- package/components/container/wizard/utils.js +1 -0
- package/components/data/form/base-form/hooks/useFormOperations.js +9 -15
- package/components/data/form/base-form/index.js +17 -14
- package/components/data/form/base-form/utils.js +5 -4
- package/components/data/form/dynamic-fields/WmxDynamicFormField.d.ts +11 -0
- package/components/data/form/dynamic-fields/WmxDynamicFormField.js +77 -0
- package/components/data/form/dynamic-fields/index.js +12 -1
- package/components/data/form/form-action/index.d.ts +2 -2
- package/components/data/form/form-action/index.js +2 -2
- package/components/data/form/form-context.d.ts +12 -13
- package/components/data/form/form-context.js +4 -6
- package/components/data/form/form-controller/withFormController.js +4 -18
- package/components/data/form/form-field/index.js +10 -6
- package/components/data/list/components/ListItems.js +1 -3
- package/components/data/list/index.js +5 -4
- package/components/data/pagination/hooks/usePagination.js +2 -2
- package/components/data/table/components/RowCells.js +3 -1
- package/components/data/table/components/TableBody.js +2 -1
- package/components/data/table/components/TableDataRow.js +1 -1
- package/components/data/table/components/TableHeader.js +5 -1
- package/components/data/table/hooks/useRowHandlers.d.ts +4 -2
- package/components/data/table/hooks/useRowHandlers.js +23 -11
- package/components/data/table/hooks/useRowSelection.d.ts +1 -1
- package/components/data/table/hooks/useRowSelection.js +93 -74
- package/components/data/table/hooks/useTableColumns.js +5 -5
- package/components/data/table/hooks/useTableState.js +14 -2
- package/components/data/table/index.js +54 -50
- package/components/data/table/props.d.ts +12 -8
- package/components/data/table/utils/buildSelectionColumns.js +31 -31
- package/components/data/table/utils/columnBuilder.js +1 -1
- package/components/data/table/utils/index.d.ts +9 -1
- package/components/data/table/utils/index.js +30 -2
- package/components/data/table/utils/selectionUtils.d.ts +7 -0
- package/components/data/table/utils/selectionUtils.js +28 -1
- package/components/dialogs/dialog-actions/index.js +11 -2
- package/components/dialogs/dialog-header/index.js +1 -1
- package/components/dialogs/index.js +14 -2
- package/components/input/chips/index.js +29 -5
- package/components/input/color-picker/index.js +4 -6
- package/components/input/epoch/date/index.js +3 -2
- package/components/input/epoch/date/utils.js +4 -2
- package/components/input/epoch/datetime/index.js +2 -2
- package/components/input/epoch/datetime/props.d.ts +2 -2
- package/components/input/epoch/time/utils.d.ts +1 -1
- package/components/input/epoch/time/utils.js +2 -2
- package/components/input/fileupload/useFileUpload.js +19 -24
- package/components/input/select/index.js +8 -6
- package/components/input/text/index.js +2 -2
- package/components/input/textarea/index.js +41 -16
- package/components/navbar/nav/index.js +10 -5
- package/components/navigation/breadcrumb/index.js +2 -1
- package/components/navigation/popover/index.d.ts +1 -1
- package/components/navigation/popover/index.js +10 -2
- package/components/navigation/popover/props.d.ts +1 -1
- package/components/page/page-content/index.js +24 -4
- package/components/page/page-content/props.d.ts +1 -0
- package/components/page/partial-container/index.js +1 -1
- package/components/wmx/WmxRenderer.d.ts +8 -0
- package/components/wmx/WmxRenderer.js +57 -0
- package/core/appstore.js +1 -1
- package/core/proxy-service.d.ts +16 -1
- package/core/proxy-service.js +39 -12
- package/core/util/index.d.ts +0 -2
- package/core/util/index.js +0 -29
- package/higherOrder/BaseDateTime.js +8 -1
- package/higherOrder/BasePage.js +31 -65
- package/higherOrder/DataNav.js +4 -1
- package/higherOrder/withBaseWrapper.js +3 -4
- package/hooks/useHttp.js +4 -2
- package/hooks/useLayoutSize.js +1 -1
- package/package-lock.json +360 -696
- package/package.json +3 -3
- package/runtime-dynamic/app-initializer.js +2 -1
- package/runtime-dynamic/components/partial-content.js +2 -1
- package/runtime-dynamic/components/wmx-placeholder.d.ts +18 -0
- package/runtime-dynamic/components/wmx-placeholder.js +48 -0
- package/runtime-dynamic/main.js +6 -0
- package/runtime-dynamic/services/compile-render.js +75 -12
- package/store/slices/i18nSlice.d.ts +0 -1
- package/store/slices/i18nSlice.js +0 -2
- package/utils/layoutsize-util.js +12 -7
- package/utils/style-utils.d.ts +6 -0
- package/utils/style-utils.js +10 -0
- package/utils/wmx.utils.d.ts +6 -0
- package/utils/wmx.utils.js +41 -0
- package/variables/crud-variable.js +1 -1
- package/variables/live-variable.js +1 -1
- package/variables/service-variable.js +6 -3
|
@@ -44,12 +44,12 @@ class NotificationAction extends BaseAction {
|
|
|
44
44
|
return this.invoke(arg1, arg2, arg3);
|
|
45
45
|
}
|
|
46
46
|
prepareToastOptions(params = {}) {
|
|
47
|
-
var _a, _b, _c, _d;
|
|
47
|
+
var _a, _b, _c, _d, _e;
|
|
48
48
|
const configParams = this.config.paramProvider();
|
|
49
49
|
const mergedParams = __spreadValues(__spreadValues({}, configParams), params);
|
|
50
50
|
const alertClass = (_b = (_a = String(mergedParams.class)) == null ? void 0 : _a.toLowerCase()) != null ? _b : "info";
|
|
51
51
|
const type = NOTIFICATION_TYPE[alertClass] || "info";
|
|
52
|
-
const position = (_c = mergedParams.
|
|
52
|
+
const position = (_d = (_c = mergedParams.position) != null ? _c : mergedParams.toasterPosition) != null ? _d : "bottom right";
|
|
53
53
|
let duration = parseInt(String(mergedParams.duration));
|
|
54
54
|
if (isNaN(duration)) {
|
|
55
55
|
duration = type === "success" ? DEFAULT_DURATION : null;
|
|
@@ -63,7 +63,7 @@ class NotificationAction extends BaseAction {
|
|
|
63
63
|
name: this.name,
|
|
64
64
|
styles: mergedParams.styles || {},
|
|
65
65
|
hideOnClick: mergedParams.hideOnClick !== false,
|
|
66
|
-
showTypeLabel: (
|
|
66
|
+
showTypeLabel: (_e = mergedParams.showTypeLabel) != null ? _e : false,
|
|
67
67
|
onClose: () => {
|
|
68
68
|
if (this.config.onClose) {
|
|
69
69
|
this.config.onClose(this, null);
|
package/actions/toast.js
CHANGED
|
@@ -90,7 +90,8 @@ const CustomToast = ({ toast, onClose }) => {
|
|
|
90
90
|
onClick: handleClick,
|
|
91
91
|
sx: {
|
|
92
92
|
"& .MuiSnackbarContent-root": {
|
|
93
|
-
alignItems: "unset !important"
|
|
93
|
+
alignItems: "unset !important",
|
|
94
|
+
minWidth: "unset"
|
|
94
95
|
},
|
|
95
96
|
"& .MuiSnackbar-root": {
|
|
96
97
|
all: "unset !important"
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
2
4
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
6
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
@@ -14,6 +16,19 @@ var __spreadValues = (a, b) => {
|
|
|
14
16
|
}
|
|
15
17
|
return a;
|
|
16
18
|
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
17
32
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
18
33
|
import { memo, useMemo } from "react";
|
|
19
34
|
import clsx from "clsx";
|
|
@@ -21,9 +36,10 @@ import Box from "@mui/material/Box";
|
|
|
21
36
|
import { withBaseWrapper } from "../../../higherOrder/withBaseWrapper";
|
|
22
37
|
import Label from "../label";
|
|
23
38
|
import { WmAppIcon } from "../../common/WmAppIcon";
|
|
39
|
+
import { removeInvalidAttributes } from "../../../utils/attr";
|
|
24
40
|
const DEFAULT_CLASS = "app-icon-wrapper";
|
|
25
41
|
const WmIcon = memo((props) => {
|
|
26
|
-
const {
|
|
42
|
+
const _a = props, {
|
|
27
43
|
name,
|
|
28
44
|
listener,
|
|
29
45
|
caption,
|
|
@@ -37,7 +53,21 @@ const WmIcon = memo((props) => {
|
|
|
37
53
|
styles,
|
|
38
54
|
className,
|
|
39
55
|
id
|
|
40
|
-
} =
|
|
56
|
+
} = _a, restProps = __objRest(_a, [
|
|
57
|
+
"name",
|
|
58
|
+
"listener",
|
|
59
|
+
"caption",
|
|
60
|
+
"hint",
|
|
61
|
+
"iconclass",
|
|
62
|
+
"iconurl",
|
|
63
|
+
"prefabName",
|
|
64
|
+
"iconposition",
|
|
65
|
+
"iconsize",
|
|
66
|
+
"arialabel",
|
|
67
|
+
"styles",
|
|
68
|
+
"className",
|
|
69
|
+
"id"
|
|
70
|
+
]);
|
|
41
71
|
const wrapperStyle = useMemo(() => {
|
|
42
72
|
const rootStyle = __spreadValues({}, styles || {});
|
|
43
73
|
if (iconsize) {
|
|
@@ -49,7 +79,7 @@ const WmIcon = memo((props) => {
|
|
|
49
79
|
}, [styles, iconsize]);
|
|
50
80
|
return /* @__PURE__ */ jsxs(
|
|
51
81
|
Box,
|
|
52
|
-
{
|
|
82
|
+
__spreadProps(__spreadValues({
|
|
53
83
|
className: clsx(
|
|
54
84
|
DEFAULT_CLASS,
|
|
55
85
|
"wm-icon-root",
|
|
@@ -61,7 +91,8 @@ const WmIcon = memo((props) => {
|
|
|
61
91
|
"aria-label": arialabel,
|
|
62
92
|
id,
|
|
63
93
|
"data-icon-position": iconposition,
|
|
64
|
-
hidden: props.hidden
|
|
94
|
+
hidden: props.hidden
|
|
95
|
+
}, removeInvalidAttributes(restProps)), {
|
|
65
96
|
children: [
|
|
66
97
|
/* @__PURE__ */ jsxs(Box, { component: "span", className: "sr-only", children: [
|
|
67
98
|
caption,
|
|
@@ -93,7 +124,7 @@ const WmIcon = memo((props) => {
|
|
|
93
124
|
}
|
|
94
125
|
)
|
|
95
126
|
]
|
|
96
|
-
}
|
|
127
|
+
})
|
|
97
128
|
);
|
|
98
129
|
});
|
|
99
130
|
WmIcon.displayName = "WmIcon";
|
|
@@ -27,17 +27,22 @@ import {
|
|
|
27
27
|
import { needsEncoding, toCssLength } from "./iframe.utils";
|
|
28
28
|
const DEFAULT_CLASS = "embed-responsive app-iframe";
|
|
29
29
|
const WmIframe = (props) => {
|
|
30
|
+
var _a, _b;
|
|
30
31
|
const {
|
|
31
32
|
iframesrc,
|
|
32
33
|
encodeurl = false,
|
|
33
34
|
name,
|
|
34
35
|
hint,
|
|
35
36
|
arialabel,
|
|
36
|
-
width
|
|
37
|
-
height
|
|
37
|
+
width,
|
|
38
|
+
height,
|
|
38
39
|
className,
|
|
39
40
|
styles
|
|
40
41
|
} = props;
|
|
42
|
+
const styleWidth = styles == null ? void 0 : styles.width;
|
|
43
|
+
const styleHeight = styles == null ? void 0 : styles.height;
|
|
44
|
+
const effectiveWidth = (_a = width != null ? width : styleWidth) != null ? _a : "300px";
|
|
45
|
+
const effectiveHeight = (_b = height != null ? height : styleHeight) != null ? _b : "150px";
|
|
41
46
|
const { safeIframeSrc, showContentLoadError, errorMsg } = useMemo(() => {
|
|
42
47
|
if (!iframesrc) {
|
|
43
48
|
return {
|
|
@@ -63,13 +68,18 @@ const WmIframe = (props) => {
|
|
|
63
68
|
const rootStyle = __spreadValues({}, styles || {});
|
|
64
69
|
delete rootStyle.width;
|
|
65
70
|
delete rootStyle.height;
|
|
66
|
-
rootStyle["--wm-iframe-width"] = toCssLength(
|
|
67
|
-
rootStyle["--wm-iframe-height"] = toCssLength(
|
|
68
|
-
rootStyle["--wm-iframe-inner-width"] = toCssLength(
|
|
69
|
-
rootStyle["--wm-iframe-inner-height"] = toCssLength(
|
|
71
|
+
rootStyle["--wm-iframe-width"] = toCssLength(effectiveWidth);
|
|
72
|
+
rootStyle["--wm-iframe-height"] = toCssLength(effectiveHeight);
|
|
73
|
+
rootStyle["--wm-iframe-inner-width"] = toCssLength(effectiveWidth || "100%");
|
|
74
|
+
rootStyle["--wm-iframe-inner-height"] = toCssLength(effectiveHeight || "400px");
|
|
70
75
|
return rootStyle;
|
|
71
|
-
}, [styles,
|
|
72
|
-
const iframeElementStyle = useMemo(() =>
|
|
76
|
+
}, [styles, effectiveWidth, effectiveHeight]);
|
|
77
|
+
const iframeElementStyle = useMemo(() => {
|
|
78
|
+
const elementStyle = __spreadValues({}, styles || {});
|
|
79
|
+
delete elementStyle.width;
|
|
80
|
+
delete elementStyle.height;
|
|
81
|
+
return elementStyle;
|
|
82
|
+
}, [styles]);
|
|
73
83
|
return /* @__PURE__ */ jsxs(
|
|
74
84
|
Box,
|
|
75
85
|
{
|
|
@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
|
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
32
|
import { jsx } from "react/jsx-runtime";
|
|
33
|
-
import { Fragment, memo } from "react";
|
|
33
|
+
import { Fragment, memo, useMemo } from "react";
|
|
34
34
|
import clsx from "clsx";
|
|
35
35
|
import DOMPurify from "dompurify";
|
|
36
36
|
import Box from "@mui/material/Box";
|
|
@@ -75,7 +75,7 @@ const WmLabel = memo(
|
|
|
75
75
|
htmlFor,
|
|
76
76
|
onClick,
|
|
77
77
|
listener,
|
|
78
|
-
variant
|
|
78
|
+
variant,
|
|
79
79
|
viewParent,
|
|
80
80
|
loading,
|
|
81
81
|
showSkeleton
|
|
@@ -116,6 +116,7 @@ const WmLabel = memo(
|
|
|
116
116
|
onClick(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name]);
|
|
117
117
|
}
|
|
118
118
|
};
|
|
119
|
+
const validProps = useMemo(() => removeInvalidAttributes(rest), [rest]);
|
|
119
120
|
if (shouldRenderAsHTML) {
|
|
120
121
|
return /* @__PURE__ */ jsx(
|
|
121
122
|
Box,
|
|
@@ -129,7 +130,7 @@ const WmLabel = memo(
|
|
|
129
130
|
caption: captionString,
|
|
130
131
|
variant,
|
|
131
132
|
dangerouslySetInnerHTML: { __html: sanitizedContent }
|
|
132
|
-
},
|
|
133
|
+
}, validProps), {
|
|
133
134
|
onClick: handleOnClick
|
|
134
135
|
})
|
|
135
136
|
);
|
|
@@ -37,6 +37,7 @@ declare const WmSearchStandalone: React.ComponentType<import("../../data/form/fo
|
|
|
37
37
|
getDisplayExpression?: (data: any) => string;
|
|
38
38
|
isSearchInChips?: boolean;
|
|
39
39
|
onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
|
|
40
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
40
41
|
clearSearch?: unknown;
|
|
41
42
|
destroy?: (((names: string[]) => void) | ((formName?: string) => void)) & (((names: string[]) => void) | ((formName?: string) => void));
|
|
42
43
|
standalone?: boolean;
|
|
@@ -131,8 +132,78 @@ export { WmSearchStandalone as WmSearch };
|
|
|
131
132
|
*
|
|
132
133
|
* @param props - {@link WmSearchProps}
|
|
133
134
|
*/
|
|
134
|
-
declare const _default: React.
|
|
135
|
+
declare const _default: React.ComponentType<{
|
|
136
|
+
searchon?: import("./props").SearchOn;
|
|
137
|
+
showclear?: boolean | string;
|
|
138
|
+
fieldName?: string;
|
|
139
|
+
debouncetime?: number;
|
|
140
|
+
searchkey?: string;
|
|
141
|
+
matchmode?: string;
|
|
142
|
+
minchars?: number;
|
|
143
|
+
limit?: number;
|
|
144
|
+
placeholder?: string;
|
|
145
|
+
dropup?: boolean;
|
|
146
|
+
type?: import("./props").SearchType;
|
|
147
|
+
showsearchicon?: boolean;
|
|
148
|
+
showbackbutton?: boolean;
|
|
149
|
+
imagewidth?: string;
|
|
150
|
+
datacompletemsg?: string;
|
|
151
|
+
loadingdatamsg?: string;
|
|
152
|
+
clearsearchiconclass?: string;
|
|
153
|
+
clearsearchiconurl?: string;
|
|
154
|
+
backsearchiconclass?: string;
|
|
155
|
+
backsearchiconurl?: string;
|
|
156
|
+
searchiconclass?: string;
|
|
157
|
+
searchiconurl?: string;
|
|
158
|
+
navsearchbar?: boolean;
|
|
159
|
+
shortcutkey?: string;
|
|
160
|
+
id?: string;
|
|
161
|
+
onBeforeservicecall?: (widget: any, inputData: any) => void;
|
|
162
|
+
onSelect?: (event: React.MouseEvent<HTMLLIElement>, widget: any, selectedValue: any) => void;
|
|
163
|
+
onSubmit?: (event: React.MouseEvent<HTMLDivElement>, widget: any) => void;
|
|
164
|
+
onClear?: (event: any, widget: any) => void;
|
|
165
|
+
onSearch?: (event: React.MouseEvent<HTMLButtonElement>, widget: any) => void;
|
|
166
|
+
onDatasetready?: (widget: any, data: any[]) => void;
|
|
167
|
+
onQuerySearch?: (params: any, success: (val: any) => void, error: (err: any) => void) => void;
|
|
168
|
+
autofocus?: boolean;
|
|
169
|
+
dataPath?: string;
|
|
170
|
+
getDisplayExpression?: (data: any) => string;
|
|
171
|
+
isSearchInChips?: boolean;
|
|
172
|
+
onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
|
|
173
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
174
|
+
clearSearch?: unknown;
|
|
175
|
+
destroy?: (((names: string[]) => void) | ((formName?: string) => void)) & (((names: string[]) => void) | ((formName?: string) => void));
|
|
135
176
|
standalone?: boolean;
|
|
177
|
+
datafield?: string;
|
|
178
|
+
displayfield?: string;
|
|
179
|
+
displaylabel?: string;
|
|
180
|
+
displayimagesrc?: string | ((data: any) => string);
|
|
181
|
+
displayexpression?: (data: any) => string;
|
|
182
|
+
usekeys?: boolean;
|
|
183
|
+
orderby?: string;
|
|
184
|
+
multiple?: boolean;
|
|
185
|
+
readonly?: boolean;
|
|
186
|
+
content?: string;
|
|
187
|
+
collapsible?: boolean;
|
|
188
|
+
groupby?: string;
|
|
189
|
+
allowempty?: boolean;
|
|
190
|
+
compareby?: string | any[];
|
|
191
|
+
disabled?: boolean;
|
|
192
|
+
required?: boolean;
|
|
193
|
+
isDestroyed?: boolean;
|
|
194
|
+
widgetType?: string;
|
|
195
|
+
validation?: any;
|
|
196
|
+
casesensitive?: boolean;
|
|
197
|
+
class?: string;
|
|
198
|
+
value?: any;
|
|
199
|
+
datasetItems?: any[];
|
|
200
|
+
selectedItems?: any[];
|
|
201
|
+
displayValue?: string;
|
|
202
|
+
groupedData?: any;
|
|
203
|
+
handleHeaderClick?: any;
|
|
204
|
+
toggleAllHeaders?: any;
|
|
205
|
+
isUpdateRequired?: boolean;
|
|
206
|
+
query?: string;
|
|
136
207
|
ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
|
|
137
208
|
animation?: string;
|
|
138
209
|
show?: boolean | string;
|
|
@@ -158,14 +229,12 @@ declare const _default: React.NamedExoticComponent<import("../../data/form/form-
|
|
|
158
229
|
eventCallback?: (eventName: string, data: any) => void;
|
|
159
230
|
forwardedRef?: React.ForwardedRef<any>;
|
|
160
231
|
viewParent?: any;
|
|
161
|
-
destroy?: ((names: string[]) => void) | ((formName?: string) => void);
|
|
162
232
|
hint?: string;
|
|
163
233
|
arialabel?: string;
|
|
164
234
|
tabindex?: number;
|
|
165
235
|
styles?: React.CSSProperties;
|
|
166
236
|
children?: React.ReactNode;
|
|
167
237
|
hidden?: boolean;
|
|
168
|
-
id?: string;
|
|
169
238
|
name?: string;
|
|
170
239
|
listener?: Record<string, any>;
|
|
171
240
|
"data-widget-id"?: string;
|
|
@@ -105,6 +105,7 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
105
105
|
onSubmit,
|
|
106
106
|
onClear,
|
|
107
107
|
onSearch,
|
|
108
|
+
onKeyDown: onKeyDownProp,
|
|
108
109
|
onDatasetready,
|
|
109
110
|
styles: styles = {},
|
|
110
111
|
name,
|
|
@@ -179,6 +180,7 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
179
180
|
"onSubmit",
|
|
180
181
|
"onClear",
|
|
181
182
|
"onSearch",
|
|
183
|
+
"onKeyDown",
|
|
182
184
|
"onDatasetready",
|
|
183
185
|
// Added onDatasetready callback
|
|
184
186
|
"styles",
|
|
@@ -219,6 +221,8 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
219
221
|
const listRef = useRef(null);
|
|
220
222
|
const initializedRef = useRef(false);
|
|
221
223
|
const isLoadingNextPageRef = useRef(false);
|
|
224
|
+
const latestQueryRef = useRef("");
|
|
225
|
+
const latestDatavalueRef = useRef(datavalue);
|
|
222
226
|
const [query, setQuery] = useState(typeof datavalue === "string" ? datavalue : "");
|
|
223
227
|
const [isOpen, setIsOpen] = useState(false);
|
|
224
228
|
const [loadingItems, setLoadingItems] = useState(false);
|
|
@@ -271,12 +275,28 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
271
275
|
handleQueryChange(queryValue);
|
|
272
276
|
}, [queryProp]);
|
|
273
277
|
useEffect(() => {
|
|
274
|
-
|
|
278
|
+
latestQueryRef.current = query;
|
|
279
|
+
}, [query]);
|
|
280
|
+
useEffect(() => {
|
|
281
|
+
latestDatavalueRef.current = datavalue;
|
|
282
|
+
}, [datavalue]);
|
|
283
|
+
useEffect(() => {
|
|
284
|
+
var _a2, _b;
|
|
275
285
|
if (datavalue === void 0 || datavalue === null || datavalue === "") {
|
|
276
286
|
setQuery("");
|
|
277
287
|
handleQueryChange("");
|
|
278
288
|
setSelectedItem(null);
|
|
279
289
|
setFormattedDataset([]);
|
|
290
|
+
setIsOpen(false);
|
|
291
|
+
setMenuOpen(false);
|
|
292
|
+
(_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.cancel();
|
|
293
|
+
return;
|
|
294
|
+
}
|
|
295
|
+
if (props.isSearchInChips) {
|
|
296
|
+
if (!isPlainObject(datavalue)) {
|
|
297
|
+
setQuery(datavalue);
|
|
298
|
+
handleQueryChange(datavalue);
|
|
299
|
+
}
|
|
280
300
|
return;
|
|
281
301
|
}
|
|
282
302
|
if ((isPlainObject(datavalue) || Array.isArray(datavalue)) && searchkey && Object.keys(datavalue).length > 0) {
|
|
@@ -298,13 +318,15 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
298
318
|
handleQueryChange(displayValue2);
|
|
299
319
|
handleUpdateDatavalue(findItem);
|
|
300
320
|
} else {
|
|
301
|
-
(
|
|
321
|
+
setQuery(datavalue);
|
|
322
|
+
handleQueryChange(datavalue);
|
|
323
|
+
(_b = debouncedSearchItemRef.current) == null ? void 0 : _b.call(debouncedSearchItemRef, datavalue);
|
|
302
324
|
}
|
|
303
325
|
} else if (!isPlainObject(datavalue)) {
|
|
304
326
|
setQuery(datavalue);
|
|
305
327
|
handleQueryChange(datavalue);
|
|
306
328
|
}
|
|
307
|
-
}, [datavalue]);
|
|
329
|
+
}, [datavalue, props.isSearchInChips]);
|
|
308
330
|
const searchStyle = __spreadValues({
|
|
309
331
|
width
|
|
310
332
|
}, styles);
|
|
@@ -314,6 +336,7 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
314
336
|
}
|
|
315
337
|
debouncedSearchItemRef.current = debounce(async (value2) => {
|
|
316
338
|
const response = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(props, value2));
|
|
339
|
+
if (latestDatavalueRef.current !== value2) return;
|
|
317
340
|
if (response && response.length > 0) {
|
|
318
341
|
let key = (searchkey == null ? void 0 : searchkey.split(",")[0]) || searchkey;
|
|
319
342
|
if (!key) return;
|
|
@@ -432,6 +455,9 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
432
455
|
if (searchkey && isUpdateRequired2) {
|
|
433
456
|
try {
|
|
434
457
|
const response2 = await (dataProvider == null ? void 0 : dataProvider.invokeVariable(dataConfig, query2));
|
|
458
|
+
if (latestQueryRef.current !== query2) {
|
|
459
|
+
return [];
|
|
460
|
+
}
|
|
435
461
|
if (response2) {
|
|
436
462
|
const dataSet = Array.isArray(response2) ? response2 : [response2];
|
|
437
463
|
if (!nextPage) {
|
|
@@ -469,6 +495,9 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
469
495
|
const localDataProvider = new LocalDataProvider();
|
|
470
496
|
const response = await localDataProvider.filter(dataConfig);
|
|
471
497
|
const { data, isLastPage } = response;
|
|
498
|
+
if (latestQueryRef.current !== query2) {
|
|
499
|
+
return [];
|
|
500
|
+
}
|
|
472
501
|
setHasMoreData(data.length > 0 && !isLastPage);
|
|
473
502
|
if (!nextPage) {
|
|
474
503
|
setFormattedDataset(data);
|
|
@@ -539,6 +568,9 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
539
568
|
setLoadingItems(true);
|
|
540
569
|
const data = await ((_a2 = getDataSourceRef.current) == null ? void 0 : _a2.call(getDataSourceRef, query2)) || [];
|
|
541
570
|
setLoadingItems(false);
|
|
571
|
+
if (latestQueryRef.current !== query2) {
|
|
572
|
+
return;
|
|
573
|
+
}
|
|
542
574
|
setFormattedDataset(data);
|
|
543
575
|
if (data && data.length > 0) {
|
|
544
576
|
setIsOpen(true);
|
|
@@ -562,9 +594,11 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
562
594
|
};
|
|
563
595
|
}, [minchars, debouncetime]);
|
|
564
596
|
useEffect(() => {
|
|
565
|
-
var _a2;
|
|
597
|
+
var _a2, _b;
|
|
566
598
|
if (query && (type === "autocomplete" && listenQuery || type === "search" && searchon === "typing")) {
|
|
567
599
|
(_a2 = debouncedSearchRef.current) == null ? void 0 : _a2.call(debouncedSearchRef, query);
|
|
600
|
+
} else {
|
|
601
|
+
(_b = debouncedSearchRef.current) == null ? void 0 : _b.cancel();
|
|
568
602
|
}
|
|
569
603
|
}, [query, type, listenQuery, searchon]);
|
|
570
604
|
function clearDataValue() {
|
|
@@ -695,18 +729,16 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
695
729
|
}
|
|
696
730
|
};
|
|
697
731
|
const handleFocus = (event) => {
|
|
698
|
-
if (
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
setGroupedData(getGroupedData(normalizedData));
|
|
706
|
-
}
|
|
707
|
-
setIsOpen(true);
|
|
708
|
-
setMenuOpen(true);
|
|
732
|
+
if (formattedDataset.length > 0 && !selectedItem) {
|
|
733
|
+
setIsOpen(true);
|
|
734
|
+
setMenuOpen(true);
|
|
735
|
+
} else if (type === "autocomplete" && normalizedData && normalizedData.length > 0) {
|
|
736
|
+
setFormattedDataset(normalizedData);
|
|
737
|
+
if (props == null ? void 0 : props.groupby) {
|
|
738
|
+
setGroupedData(getGroupedData(normalizedData));
|
|
709
739
|
}
|
|
740
|
+
setIsOpen(true);
|
|
741
|
+
setMenuOpen(true);
|
|
710
742
|
}
|
|
711
743
|
if (onFocus && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
|
|
712
744
|
onFocus(
|
|
@@ -775,7 +807,7 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
775
807
|
return ((_a2 = item == null ? void 0 : item.dataObject) == null ? void 0 : _a2.dataObject) || (item == null ? void 0 : item.dataObject) || item;
|
|
776
808
|
}
|
|
777
809
|
const handleMatchSelect = (match) => {
|
|
778
|
-
var _a2, _b;
|
|
810
|
+
var _a2, _b, _c;
|
|
779
811
|
if (readonly || disabled) {
|
|
780
812
|
return;
|
|
781
813
|
}
|
|
@@ -814,10 +846,16 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
814
846
|
// Chips expects queryModel (DataSetItem), not the raw dataObject
|
|
815
847
|
props.isSearchInChips ? item : selectedItem2
|
|
816
848
|
);
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
849
|
+
}
|
|
850
|
+
if (onSubmit && !props.isSearchInChips && (standalone || (listener == null ? void 0 : listener.Widgets) && name && name in listener.Widgets)) {
|
|
851
|
+
const submitEvent = new MouseEvent("click");
|
|
852
|
+
submitEvent.data = {
|
|
853
|
+
item: ((_c = item == null ? void 0 : item.dataObject) == null ? void 0 : _c.dataObject) || (item == null ? void 0 : item.dataObject) || item,
|
|
854
|
+
model: item.value,
|
|
855
|
+
label: item.label,
|
|
856
|
+
query
|
|
857
|
+
};
|
|
858
|
+
onSubmit(submitEvent, props);
|
|
821
859
|
}
|
|
822
860
|
} catch (error) {
|
|
823
861
|
console.error("Error parsing item data:", error);
|
|
@@ -924,20 +962,17 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
924
962
|
const highlightMatch = (text, query2) => {
|
|
925
963
|
if (!query2 || !text) return text;
|
|
926
964
|
try {
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
}
|
|
932
|
-
return part;
|
|
933
|
-
});
|
|
965
|
+
return text.replace(
|
|
966
|
+
new RegExp(`(${query2})`, "gi"),
|
|
967
|
+
'<strong class="wm-search-match-highlight">$1</strong>'
|
|
968
|
+
);
|
|
934
969
|
} catch (e) {
|
|
935
970
|
return text;
|
|
936
971
|
}
|
|
937
972
|
};
|
|
938
973
|
const renderItem = (item, query2, index) => {
|
|
939
974
|
const dataItem = prepareDataItem(item, index);
|
|
940
|
-
const displayText = typeof dataItem.displayValue === "string" ? DOMPurify.sanitize(dataItem.displayValue) : String(dataItem.label);
|
|
975
|
+
const displayText = typeof dataItem.displayValue === "string" ? DOMPurify.sanitize(dataItem.displayValue) : DOMPurify.sanitize(String(dataItem.label));
|
|
941
976
|
function handleClick(event) {
|
|
942
977
|
handleMenuItemClick(event, dataItem);
|
|
943
978
|
}
|
|
@@ -973,7 +1008,20 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
973
1008
|
className: "wm-search-item-image"
|
|
974
1009
|
}
|
|
975
1010
|
),
|
|
976
|
-
/* @__PURE__ */ jsx(
|
|
1011
|
+
/* @__PURE__ */ jsx(
|
|
1012
|
+
Box,
|
|
1013
|
+
{
|
|
1014
|
+
component: "span",
|
|
1015
|
+
className: "",
|
|
1016
|
+
title: displayText,
|
|
1017
|
+
dangerouslySetInnerHTML: {
|
|
1018
|
+
__html: getDisplayExpression ? highlightMatch(
|
|
1019
|
+
DOMPurify.sanitize(String(getDisplayExpression(getSelectedItem(item)))),
|
|
1020
|
+
query2
|
|
1021
|
+
) : highlightMatch(displayText, query2)
|
|
1022
|
+
}
|
|
1023
|
+
}
|
|
1024
|
+
)
|
|
977
1025
|
] })
|
|
978
1026
|
}
|
|
979
1027
|
)
|
|
@@ -1179,7 +1227,10 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
1179
1227
|
readOnly: readonly,
|
|
1180
1228
|
onBlur: (e) => handleBlur(e),
|
|
1181
1229
|
onFocus: (e) => handleFocus(e),
|
|
1182
|
-
onKeyDown: (e) =>
|
|
1230
|
+
onKeyDown: (e) => {
|
|
1231
|
+
onKeyDownProp == null ? void 0 : onKeyDownProp(e);
|
|
1232
|
+
handleKeyDown(e);
|
|
1233
|
+
}
|
|
1183
1234
|
}
|
|
1184
1235
|
),
|
|
1185
1236
|
type === "autocomplete" ? null : /* @__PURE__ */ jsx(Box, { component: "span", className: "input-group-addon", children: /* @__PURE__ */ jsx(Box, { component: "form", noValidate: true, autoComplete: "off", children: renderSearchIcon() }) }),
|
|
@@ -1190,9 +1241,10 @@ const Search = React.forwardRef((props, ref) => {
|
|
|
1190
1241
|
})
|
|
1191
1242
|
) });
|
|
1192
1243
|
});
|
|
1193
|
-
const
|
|
1244
|
+
const WithFormSearch = withFormController(Search);
|
|
1245
|
+
const WmSearchStandalone = withStandalone(WithFormSearch);
|
|
1194
1246
|
Search.displayName = "WmSearch";
|
|
1195
|
-
var search_default =
|
|
1247
|
+
var search_default = withBaseWrapper(WithFormSearch);
|
|
1196
1248
|
export {
|
|
1197
1249
|
WmSearchStandalone as WmSearch,
|
|
1198
1250
|
search_default as default
|
|
@@ -152,6 +152,10 @@ export interface SearchProps extends DatasetAwareFormComponentProps {
|
|
|
152
152
|
* Callback fired when the search value changes.
|
|
153
153
|
*/
|
|
154
154
|
onChange?: (event: any, widget: any, newVal?: any, oldVal?: any) => void;
|
|
155
|
+
/**
|
|
156
|
+
* Callback fired on keydown in the search input (e.g. Chips' backspace-to-delete-chip handling).
|
|
157
|
+
*/
|
|
158
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
155
159
|
clearSearch?: unknown;
|
|
156
160
|
destroy?: ((names: string[]) => void) | ((formName?: string) => void);
|
|
157
161
|
/**
|
|
@@ -43,7 +43,7 @@ export declare class LocalDataProvider implements IDataProvider {
|
|
|
43
43
|
}
|
|
44
44
|
export declare class DataProvider {
|
|
45
45
|
private localDataProvider;
|
|
46
|
-
init(component: any):
|
|
46
|
+
init(component: any): boolean;
|
|
47
47
|
invokeVariable(component: any, query: string): Promise<any>;
|
|
48
48
|
filter(config: DataProviderConfig): Promise<{
|
|
49
49
|
data: any[];
|
|
@@ -194,10 +194,13 @@ class DataProvider {
|
|
|
194
194
|
}
|
|
195
195
|
// Check if the variable is of type service variable and whether update is required
|
|
196
196
|
init(component) {
|
|
197
|
-
|
|
198
|
-
let datasource = component == null ? void 0 : component.datasource;
|
|
197
|
+
const datasource = component == null ? void 0 : component.datasource;
|
|
199
198
|
if (datasource && datasource.execute) {
|
|
200
|
-
|
|
199
|
+
if (!datasource.execute(DataSource.Operation.IS_API_AWARE)) {
|
|
200
|
+
return false;
|
|
201
|
+
}
|
|
202
|
+
const hasData = !!((component == null ? void 0 : component.dataset) && component.dataset.length);
|
|
203
|
+
return !!datasource.execute(DataSource.Operation.IS_UPDATE_REQUIRED, hasData);
|
|
201
204
|
}
|
|
202
205
|
return false;
|
|
203
206
|
}
|
|
@@ -64,6 +64,7 @@ function SvgIconInline({
|
|
|
64
64
|
}
|
|
65
65
|
const WmAppIcon = memo((props) => {
|
|
66
66
|
const {
|
|
67
|
+
icon,
|
|
67
68
|
iconclass,
|
|
68
69
|
iconurl,
|
|
69
70
|
defaultIconClass,
|
|
@@ -73,19 +74,21 @@ const WmAppIcon = memo((props) => {
|
|
|
73
74
|
prefabName
|
|
74
75
|
} = props;
|
|
75
76
|
const extras = useMemo(() => toExtraClasses(defaultClasses), [defaultClasses]);
|
|
76
|
-
const
|
|
77
|
-
const
|
|
77
|
+
const effectiveIconurl = iconurl || (isSvgIconUrl(icon) ? icon : null);
|
|
78
|
+
const effectiveIconclass = iconclass || (icon && !isSvgIconUrl(icon) ? icon : null);
|
|
79
|
+
const isSvg = isSvgIconUrl(effectiveIconurl);
|
|
80
|
+
const isImage = !!effectiveIconurl && !isSvg;
|
|
78
81
|
const fontClass = useMemo(
|
|
79
|
-
() => [defaultIconClass,
|
|
80
|
-
[defaultIconClass,
|
|
82
|
+
() => [defaultIconClass, effectiveIconclass].filter(Boolean).join(" "),
|
|
83
|
+
[defaultIconClass, effectiveIconclass]
|
|
81
84
|
);
|
|
82
85
|
const resolvedImageUrl = useMemo(
|
|
83
|
-
() => isImage ? resolveIconUrl(
|
|
84
|
-
[isImage,
|
|
86
|
+
() => isImage ? resolveIconUrl(effectiveIconurl, prefabName) : null,
|
|
87
|
+
[isImage, effectiveIconurl, prefabName]
|
|
85
88
|
);
|
|
86
89
|
const resolvedSvgUrl = useMemo(
|
|
87
|
-
() => isSvg &&
|
|
88
|
-
[isSvg,
|
|
90
|
+
() => isSvg && effectiveIconurl ? resolveIconUrl(effectiveIconurl, prefabName) : null,
|
|
91
|
+
[isSvg, effectiveIconurl, prefabName]
|
|
89
92
|
);
|
|
90
93
|
if (isSvg && resolvedSvgUrl) {
|
|
91
94
|
return /* @__PURE__ */ jsx("span", { style: { display: "contents" }, children: /* @__PURE__ */ jsx(
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { CSSProperties } from "react";
|
|
2
2
|
export interface WmAppIconProps {
|
|
3
|
+
/** Generic icon value: `.svg` URL -> inline SVG, anything else -> font-icon class. Lower priority than iconclass/iconurl. */
|
|
4
|
+
icon?: string | null;
|
|
3
5
|
/** Font-icon CSS class (e.g. `wi wi-user`). Lowest priority when iconurl is set. */
|
|
4
6
|
iconclass?: string | null;
|
|
5
7
|
/** Icon URL. `.svg` -> inline SVG, anything else -> `<img>`. Wins over iconclass. */
|
|
@@ -30,6 +30,7 @@ declare const _default: React.ComponentType<{
|
|
|
30
30
|
render?: (props: WmAccordionPaneProps, onLoadCallback?: () => void) => React.ReactNode;
|
|
31
31
|
tabindex?: number;
|
|
32
32
|
layoutClassName?: string;
|
|
33
|
+
direction?: string;
|
|
33
34
|
standalone?: boolean;
|
|
34
35
|
ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
|
|
35
36
|
animation?: string;
|