@vuu-ui/vuu-data-react 4.0.0-alpha.9 → 4.0.0-beta.1
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/package.json +19 -19
- package/src/data-editing/get-data-item-edit-control.js +87 -20
- package/src/datasource-provider/VuuDataSourceProvider.js +11 -18
- package/src/datasource-provider/useAutoLoginToVuuServer.js +42 -0
- package/src/hooks/useSessionDataSource.js +1 -1
- package/src/hooks/useVuuTables.js +11 -2
- package/types/data-editing/EditForm.d.ts +3 -3
- package/types/data-editing/UnsavedChangesReport.d.ts +1 -1
- package/types/data-editing/get-data-item-edit-control.d.ts +10 -3
- package/types/data-editing/useEditForm.d.ts +3 -3
- package/types/datasource-provider/VuuDataSourceProvider.d.ts +14 -5
- package/types/lost-connection-indicator/LostConnectionIndicator.d.ts +1 -1
- package/types/session-editing-form/SessionEditingForm.d.ts +1 -1
- package/types/src/data-editing/EditForm.d.ts +0 -5
- package/types/src/data-editing/UnsavedChangesReport.d.ts +0 -6
- package/types/src/data-editing/edit-rule-validation-checker.d.ts +0 -4
- package/types/src/data-editing/edit-validation-rules.d.ts +0 -1
- package/types/src/data-editing/form-edit-state.d.ts +0 -7
- package/types/src/data-editing/get-data-item-edit-control.d.ts +0 -37
- package/types/src/data-editing/index.d.ts +0 -6
- package/types/src/data-editing/useEditForm.d.ts +0 -21
- package/types/src/datasource-provider/VuuDataSourceProvider.d.ts +0 -17
- package/types/src/datasource-provider/index.d.ts +0 -1
- package/types/src/datasource-provider/useAutoLoginToVuuServer.d.ts +0 -20
- package/types/src/hooks/useLookupValues.d.ts +0 -5
- package/types/src/hooks/useSessionDataSource.d.ts +0 -8
- package/types/src/hooks/useTypeaheadSuggestions.d.ts +0 -4
- package/types/src/hooks/useVisualLinks.d.ts +0 -2
- package/types/src/hooks/useVuuMenuActions.d.ts +0 -39
- package/types/src/hooks/useVuuTables.d.ts +0 -2
- package/types/src/index.d.ts +0 -10
- package/types/src/lost-connection-indicator/LostConnectionIndicator.d.ts +0 -1
- package/types/src/lost-connection-indicator/useLostConnection.d.ts +0 -1
- package/types/src/session-editing-form/SessionEditingForm.d.ts +0 -24
- package/types/src/session-editing-form/index.d.ts +0 -1
package/package.json
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "4.0.0-
|
|
2
|
+
"version": "4.0.0-beta.1",
|
|
3
3
|
"main": "./src/index.js",
|
|
4
4
|
"author": "heswell",
|
|
5
|
-
"type": "module",
|
|
6
5
|
"license": "Apache-2.0",
|
|
7
6
|
"scripts": {
|
|
8
7
|
"build:dev": "node ../../scripts/run-build.mjs",
|
|
@@ -11,25 +10,24 @@
|
|
|
11
10
|
"type-defs": "node ../../scripts/build-type-defs.mjs"
|
|
12
11
|
},
|
|
13
12
|
"devDependencies": {
|
|
14
|
-
"@vuu-ui/vuu-data-types": "4.0.0-
|
|
15
|
-
"@vuu-ui/vuu-filter-types": "4.0.0-
|
|
16
|
-
"@vuu-ui/vuu-protocol-types": "4.0.0-
|
|
17
|
-
"@vuu-ui/vuu-table-types": "4.0.0-
|
|
13
|
+
"@vuu-ui/vuu-data-types": "4.0.0-beta.1",
|
|
14
|
+
"@vuu-ui/vuu-filter-types": "4.0.0-beta.1",
|
|
15
|
+
"@vuu-ui/vuu-protocol-types": "4.0.0-beta.1",
|
|
16
|
+
"@vuu-ui/vuu-table-types": "4.0.0-beta.1"
|
|
18
17
|
},
|
|
19
18
|
"dependencies": {
|
|
20
|
-
"@vuu-ui/vuu-context-menu": "4.0.0-
|
|
21
|
-
"@vuu-ui/vuu-data-remote": "4.0.0-
|
|
22
|
-
"@vuu-ui/vuu-filter-parser": "4.0.0-
|
|
23
|
-
"@vuu-ui/vuu-filters": "4.0.0-
|
|
24
|
-
"@vuu-ui/vuu-layout": "4.0.0-
|
|
25
|
-
"@vuu-ui/vuu-notifications": "4.0.0-
|
|
26
|
-
"@vuu-ui/vuu-ui-controls": "4.0.0-
|
|
27
|
-
"@vuu-ui/vuu-utils": "4.0.0-
|
|
28
|
-
"@vuu-ui/vuu-table": "4.0.0-
|
|
29
|
-
"@salt-ds/core": "1.
|
|
30
|
-
"@salt-ds/styles": "0.
|
|
31
|
-
"@salt-ds/window": "0.1.
|
|
32
|
-
"@vuu-ui/core": "4.0.0-alpha.9"
|
|
19
|
+
"@vuu-ui/vuu-context-menu": "4.0.0-beta.1",
|
|
20
|
+
"@vuu-ui/vuu-data-remote": "4.0.0-beta.1",
|
|
21
|
+
"@vuu-ui/vuu-filter-parser": "4.0.0-beta.1",
|
|
22
|
+
"@vuu-ui/vuu-filters": "4.0.0-beta.1",
|
|
23
|
+
"@vuu-ui/vuu-layout": "4.0.0-beta.1",
|
|
24
|
+
"@vuu-ui/vuu-notifications": "4.0.0-beta.1",
|
|
25
|
+
"@vuu-ui/vuu-ui-controls": "4.0.0-beta.1",
|
|
26
|
+
"@vuu-ui/vuu-utils": "4.0.0-beta.1",
|
|
27
|
+
"@vuu-ui/vuu-table": "4.0.0-beta.1",
|
|
28
|
+
"@salt-ds/core": "1.72.0",
|
|
29
|
+
"@salt-ds/styles": "0.4.1",
|
|
30
|
+
"@salt-ds/window": "0.1.2"
|
|
33
31
|
},
|
|
34
32
|
"peerDependencies": {
|
|
35
33
|
"clsx": "^2.0.0",
|
|
@@ -44,10 +42,12 @@
|
|
|
44
42
|
"exports": {
|
|
45
43
|
".": {
|
|
46
44
|
"import": "./src/index.js",
|
|
45
|
+
"default": "./src/index.js",
|
|
47
46
|
"types": "./types/index.d.ts"
|
|
48
47
|
}
|
|
49
48
|
},
|
|
50
49
|
"module": "./src/index.js",
|
|
51
50
|
"name": "@vuu-ui/vuu-data-react",
|
|
51
|
+
"type": "module",
|
|
52
52
|
"types": "types/index.d.ts"
|
|
53
53
|
}
|
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { VuuDatePicker, VuuInput, VuuTimePicker, VuuTypeaheadInput } from "@vuu-ui/vuu-ui-controls";
|
|
3
|
-
import {
|
|
3
|
+
import { EpochTimestamp, getTemporalInfo, isDataValueEditable, isTimeDataValueWithMilliseconds, isValidTimeString, isValidTimeStringMillis, parseTemporalInput } from "@vuu-ui/vuu-utils";
|
|
4
4
|
import { ToggleFilter } from "@vuu-ui/vuu-filters";
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
const timeOfDayPattern = /^\d{2}:\d{2}(:\d{2}(\.\d{1,9})?)?$/;
|
|
6
|
+
const toEpochTimestamp = (value, { encoding })=>{
|
|
7
|
+
if (("string" == typeof value || "number" == typeof value) && !timeOfDayPattern.test(`${value}`)) return EpochTimestamp.fromWire(value, encoding);
|
|
8
|
+
};
|
|
9
|
+
const pad = (n)=>`${n}`.padStart(2, "0");
|
|
10
|
+
function toTimeString(value, timestamp, { timeZone }, milliseconds = false) {
|
|
11
|
+
if (timestamp) {
|
|
12
|
+
const { hour, minute, second, millisecond } = timestamp.getFields(timeZone);
|
|
13
|
+
const timeString = `${pad(hour)}:${pad(minute)}:${pad(second)}`;
|
|
14
|
+
return milliseconds ? `${timeString}.${`${millisecond}`.padStart(3, "0")}` : timeString;
|
|
15
|
+
}
|
|
16
|
+
if ("string" == typeof value) if (milliseconds) {
|
|
17
|
+
const timeString = 8 === value.length ? `${value}.000` : value.slice(0, 12);
|
|
18
|
+
if (isValidTimeStringMillis(timeString)) return timeString;
|
|
19
|
+
} else {
|
|
20
|
+
const timeString = value.slice(0, 8);
|
|
21
|
+
if (isValidTimeString(timeString)) return timeString;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
const BOOLEAN_TOGGLE_VALUES = [
|
|
25
|
+
true,
|
|
26
|
+
false
|
|
27
|
+
];
|
|
28
|
+
const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation = "update", errorMessage, labels, onCommit, table, values, variant })=>{
|
|
9
29
|
const dataVariant = variant && "toggle" !== variant ? variant : void 0;
|
|
30
|
+
const temporalInfo = getTemporalInfo(dataDescriptor);
|
|
10
31
|
if (!isDataValueEditable(dataDescriptor, editOperation, true)) return /*#__PURE__*/ jsx(VuuInput, {
|
|
11
32
|
variant: "secondary",
|
|
12
33
|
...InputProps,
|
|
@@ -14,26 +35,72 @@ const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitO
|
|
|
14
35
|
readOnly: true,
|
|
15
36
|
"data-edit-control": true
|
|
16
37
|
});
|
|
17
|
-
if (
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
38
|
+
if (temporalInfo?.kind === "time") {
|
|
39
|
+
const { value, onChange } = InputProps?.inputProps ?? {};
|
|
40
|
+
const baseValue = toEpochTimestamp(value, temporalInfo);
|
|
41
|
+
const handleCommitTime = (evt, timeString)=>{
|
|
42
|
+
if (baseValue) {
|
|
43
|
+
const timestamp = parseTemporalInput(timeString, temporalInfo, baseValue);
|
|
44
|
+
onCommit(evt, timestamp ? `${timestamp.toWire(temporalInfo.encoding)}` : "");
|
|
45
|
+
} else onCommit(evt, timeString);
|
|
46
|
+
};
|
|
47
|
+
return isTimeDataValueWithMilliseconds(dataDescriptor) ? /*#__PURE__*/ jsx(VuuTimePicker, {
|
|
48
|
+
className: className,
|
|
49
|
+
milliseconds: true,
|
|
50
|
+
value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo, true),
|
|
51
|
+
onChange: onChange,
|
|
52
|
+
onCommit: handleCommitTime,
|
|
53
|
+
"data-edit-control": true
|
|
54
|
+
}) : /*#__PURE__*/ jsx(VuuTimePicker, {
|
|
55
|
+
className: className,
|
|
56
|
+
value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo),
|
|
57
|
+
onChange: onChange,
|
|
58
|
+
onCommit: handleCommitTime,
|
|
59
|
+
"data-edit-control": true
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
if (temporalInfo) {
|
|
63
|
+
const baseValue = toEpochTimestamp(InputProps?.inputProps?.value, temporalInfo);
|
|
64
|
+
const handleCommitDate = (evt, startOfDayMillis)=>{
|
|
65
|
+
let timestamp = EpochTimestamp.fromMillis(startOfDayMillis);
|
|
66
|
+
if (baseValue && "datetime" === temporalInfo.kind) {
|
|
67
|
+
const { year, month, day } = timestamp.getFields(temporalInfo.timeZone);
|
|
68
|
+
const { hour, minute, second, millisecond } = baseValue.getFields(temporalInfo.timeZone);
|
|
69
|
+
timestamp = EpochTimestamp.fromFields({
|
|
70
|
+
year,
|
|
71
|
+
month,
|
|
72
|
+
day,
|
|
73
|
+
hour,
|
|
74
|
+
minute,
|
|
75
|
+
second,
|
|
76
|
+
millisecond
|
|
77
|
+
}, temporalInfo.timeZone, baseValue.subMilliNanos);
|
|
78
|
+
}
|
|
79
|
+
onCommit(evt, `${timestamp.toWire(temporalInfo.encoding)}`);
|
|
80
|
+
};
|
|
81
|
+
return /*#__PURE__*/ jsx(VuuDatePicker, {
|
|
82
|
+
className: className,
|
|
83
|
+
onCommit: handleCommitDate,
|
|
84
|
+
timeZone: temporalInfo.timeZone,
|
|
85
|
+
value: baseValue,
|
|
86
|
+
"data-edit-control": true
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
if ("toggle" === variant && "boolean" === dataDescriptor.serverDataType) return /*#__PURE__*/ jsx(ToggleFilter, {
|
|
29
90
|
className: className,
|
|
30
|
-
|
|
31
|
-
"data-edit-control": true
|
|
91
|
+
column: dataDescriptor.name,
|
|
92
|
+
"data-edit-control": true,
|
|
93
|
+
labels: labels,
|
|
94
|
+
onCommit: onCommit,
|
|
95
|
+
table: table,
|
|
96
|
+
values: values?.length ? values : BOOLEAN_TOGGLE_VALUES,
|
|
97
|
+
value: InputProps?.inputProps?.value ?? "all"
|
|
32
98
|
});
|
|
33
|
-
|
|
99
|
+
if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
|
|
34
100
|
className: className,
|
|
35
101
|
column: dataDescriptor.name,
|
|
36
102
|
"data-edit-control": true,
|
|
103
|
+
labels: labels,
|
|
37
104
|
onCommit: onCommit,
|
|
38
105
|
table: table,
|
|
39
106
|
values: values,
|
|
@@ -1,24 +1,17 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { DataProvider, useOptionalVuuConnectionId } from "@vuu-ui/core";
|
|
3
2
|
import { ConnectionManager, VuuDataSource } from "@vuu-ui/vuu-data-remote";
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
}, [
|
|
15
|
-
connectionId
|
|
16
|
-
]);
|
|
17
|
-
const getServerAPI = useMemo(()=>()=>ConnectionManager.serverAPIFor(connectionId), [
|
|
18
|
-
connectionId
|
|
19
|
-
]);
|
|
3
|
+
import { DataProvider } from "@vuu-ui/vuu-utils";
|
|
4
|
+
import { useAutoLoginToVuuServer } from "./useAutoLoginToVuuServer.js";
|
|
5
|
+
const getServerAPI = ()=>ConnectionManager.serverAPI;
|
|
6
|
+
const VuuDataSourceProvider = ({ authenticate, autoConnect = false, autoLogin = false, children, websocketUrl })=>{
|
|
7
|
+
useAutoLoginToVuuServer({
|
|
8
|
+
authenticate,
|
|
9
|
+
autoConnect,
|
|
10
|
+
autoLogin,
|
|
11
|
+
websocketUrl
|
|
12
|
+
});
|
|
20
13
|
return /*#__PURE__*/ jsx(DataProvider, {
|
|
21
|
-
VuuDataSource:
|
|
14
|
+
VuuDataSource: VuuDataSource,
|
|
22
15
|
getServerAPI: getServerAPI,
|
|
23
16
|
isLocalData: false,
|
|
24
17
|
children: children
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { ConnectionManager, authenticate as vuu_data_remote_authenticate } from "@vuu-ui/vuu-data-remote";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
const useAutoLoginToVuuServer = ({ authenticate = true, autoConnect = true, secure = true, token: tokenProp = "no-token", user = "steve", websocketUrl } = {})=>{
|
|
5
|
+
const [errorMessage, setErrorMessage] = useState("");
|
|
6
|
+
useEffect(()=>{
|
|
7
|
+
const connect = async ()=>{
|
|
8
|
+
try {
|
|
9
|
+
let token = tokenProp;
|
|
10
|
+
if (authenticate) {
|
|
11
|
+
const response = await vuu_data_remote_authenticate(user, "xyz", "/api/authn");
|
|
12
|
+
token = response.token;
|
|
13
|
+
}
|
|
14
|
+
const url = websocketUrl ?? `${secure ? "wss" : "ws"}://localhost/8090/websocket`;
|
|
15
|
+
ConnectionManager.connect({
|
|
16
|
+
url,
|
|
17
|
+
token
|
|
18
|
+
});
|
|
19
|
+
} catch (e) {
|
|
20
|
+
if (e instanceof Error) {
|
|
21
|
+
console.error(e.message);
|
|
22
|
+
setErrorMessage(e.message);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
if (autoConnect) connect();
|
|
27
|
+
return ()=>{
|
|
28
|
+
if (autoConnect) ConnectionManager.disconnect();
|
|
29
|
+
};
|
|
30
|
+
}, [
|
|
31
|
+
authenticate,
|
|
32
|
+
autoConnect,
|
|
33
|
+
secure,
|
|
34
|
+
tokenProp,
|
|
35
|
+
user,
|
|
36
|
+
websocketUrl
|
|
37
|
+
]);
|
|
38
|
+
if (errorMessage) return /*#__PURE__*/ jsx("p", {
|
|
39
|
+
children: "Unable to authenticate against Vuu Server A Vuu Server instance must be running to show this example."
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
export { useAutoLoginToVuuServer };
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
import { useData } from "@vuu-ui/
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
1
|
+
import { useData } from "@vuu-ui/vuu-utils";
|
|
2
|
+
import { useCallback, useEffect, useState } from "react";
|
|
3
3
|
const useVuuTables = ()=>{
|
|
4
4
|
const [tableSchemas, setTableSchemas] = useState();
|
|
5
5
|
const { getServerAPI } = useData();
|
|
6
|
+
const buildTables = useCallback((schemas)=>{
|
|
7
|
+
const vuuTables = new Map();
|
|
8
|
+
schemas.forEach((schema)=>{
|
|
9
|
+
const { module, table } = schema.table;
|
|
10
|
+
vuuTables.set(`${module}:${table}`, schema);
|
|
11
|
+
});
|
|
12
|
+
return vuuTables;
|
|
13
|
+
}, []);
|
|
6
14
|
useEffect(()=>{
|
|
7
15
|
async function fetchTableMetadata() {
|
|
8
16
|
try {
|
|
@@ -16,6 +24,7 @@ const useVuuTables = ()=>{
|
|
|
16
24
|
}
|
|
17
25
|
fetchTableMetadata();
|
|
18
26
|
}, [
|
|
27
|
+
buildTables,
|
|
19
28
|
getServerAPI
|
|
20
29
|
]);
|
|
21
30
|
return tableSchemas;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
import { EditFormHookProps } from "./useEditForm";
|
|
3
3
|
export interface EditFormProps extends EditFormHookProps, Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
|
|
4
4
|
}
|
|
5
|
-
export declare const EditForm: ({ className, dataSource, formFieldDescriptors, onSubmit: onSubmitProp, ...htmlAttributes }: EditFormProps) => import("react").JSX.Element;
|
|
5
|
+
export declare const EditForm: ({ className, dataSource, formFieldDescriptors, onSubmit: onSubmitProp, ...htmlAttributes }: EditFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,4 +3,4 @@ export interface UnsavedChangesReportProps<T extends Entity = Entity> {
|
|
|
3
3
|
entity: T;
|
|
4
4
|
editedEntity: T;
|
|
5
5
|
}
|
|
6
|
-
export declare const UnsavedChangesReport: ({ entity, editedEntity, }: UnsavedChangesReportProps) => import("react").JSX.Element;
|
|
6
|
+
export declare const UnsavedChangesReport: ({ entity, editedEntity, }: UnsavedChangesReportProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,6 +2,7 @@ import type { DataValueDescriptor, TableSchemaTable } from "@vuu-ui/vuu-data-typ
|
|
|
2
2
|
import { type VuuTypeaheadInputProps } from "@vuu-ui/vuu-ui-controls";
|
|
3
3
|
import { type CommitHandler } from "@vuu-ui/vuu-utils";
|
|
4
4
|
import type { InputProps } from "@salt-ds/core";
|
|
5
|
+
import { type ToggleFilterValue } from "@vuu-ui/vuu-filters";
|
|
5
6
|
/**
|
|
6
7
|
* variant can be used to provide a rendering hint to the filter control rendered.
|
|
7
8
|
* 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices
|
|
@@ -21,6 +22,11 @@ export interface DataItemEditControlProps {
|
|
|
21
22
|
dataDescriptor: DataValueDescriptor;
|
|
22
23
|
editOperation?: "insert" | "update";
|
|
23
24
|
errorMessage?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Optional labels, only used with 'toggle' variant. If provided, must
|
|
27
|
+
* have same number of items as values. Defaults to values.
|
|
28
|
+
*/
|
|
29
|
+
labels?: string[];
|
|
24
30
|
onCommit: CommitHandler<HTMLElement>;
|
|
25
31
|
table?: TableSchemaTable;
|
|
26
32
|
/**
|
|
@@ -28,10 +34,11 @@ export interface DataItemEditControlProps {
|
|
|
28
34
|
* They will be validated against server with Typeahead service, so
|
|
29
35
|
* unavailable options are not offered.
|
|
30
36
|
* Recommended for toggle filters, not usually necessary for other
|
|
31
|
-
* filter variants.
|
|
37
|
+
* filter variants. Boolean values are supported for toggle filters on
|
|
38
|
+
* boolean columns, where values default to [true, false].
|
|
32
39
|
*/
|
|
33
|
-
values?:
|
|
40
|
+
values?: ToggleFilterValue[];
|
|
34
41
|
variant?: FilterControlVariant;
|
|
35
42
|
}
|
|
36
43
|
export type ValidationStatus = "initial" | true | string;
|
|
37
|
-
export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react").JSX.Element;
|
|
44
|
+
export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, labels, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { DataSource, DataValueDescriptor } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { CommitHandler, Entity } from "@vuu-ui/vuu-utils";
|
|
3
|
+
import { FocusEventHandler, SyntheticEvent } from "react";
|
|
4
4
|
export interface EditFormHookProps {
|
|
5
5
|
dataSource?: DataSource;
|
|
6
6
|
formFieldDescriptors: DataValueDescriptor[];
|
|
@@ -14,7 +14,7 @@ export declare const useEditForm: ({ dataSource, formFieldDescriptors, onSubmit,
|
|
|
14
14
|
isClean: boolean;
|
|
15
15
|
ok: boolean;
|
|
16
16
|
onCancel: () => Promise<void>;
|
|
17
|
-
onChange:
|
|
17
|
+
onChange: (evt: SyntheticEvent<HTMLInputElement>) => void;
|
|
18
18
|
onCommit: CommitHandler<HTMLElement>;
|
|
19
19
|
onFocus: FocusEventHandler;
|
|
20
20
|
onSubmit: () => Promise<void>;
|
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
2
|
/**
|
|
3
|
-
*
|
|
4
|
-
*
|
|
3
|
+
* DataSource Providers inject a DataSource constructor, made available
|
|
4
|
+
* to clients via the useData hook. This provider offers the standard
|
|
5
|
+
* VuuDataSource, which will source data from a remote vuu server.
|
|
6
|
+
*
|
|
7
|
+
* In production code, it will generally be used without props, authentication
|
|
8
|
+
* and connection to vuu server will be handled elsewhere. The props are
|
|
9
|
+
* useful for rendering standalone components.
|
|
5
10
|
*/
|
|
6
|
-
export declare const VuuDataSourceProvider: ({ children, }: {
|
|
11
|
+
export declare const VuuDataSourceProvider: ({ authenticate, autoConnect, autoLogin, children, websocketUrl, }: {
|
|
12
|
+
authenticate?: boolean;
|
|
13
|
+
autoConnect?: boolean;
|
|
14
|
+
autoLogin?: boolean;
|
|
7
15
|
children: ReactNode;
|
|
8
|
-
|
|
16
|
+
websocketUrl?: string;
|
|
17
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const LostConnectionIndicator: () => import("react").JSX.Element;
|
|
1
|
+
export declare const LostConnectionIndicator: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -21,4 +21,4 @@ export interface SessionEditingFormProps extends HTMLAttributes<HTMLDivElement>
|
|
|
21
21
|
dataSource?: DataSource;
|
|
22
22
|
schema?: TableSchema;
|
|
23
23
|
}
|
|
24
|
-
export declare const SessionEditingForm: ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes }: SessionEditingFormProps) => import("react").JSX.Element;
|
|
24
|
+
export declare const SessionEditingForm: ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes }: SessionEditingFormProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
2
|
-
import { EditFormHookProps } from "./useEditForm";
|
|
3
|
-
export interface EditFormProps extends EditFormHookProps, Omit<HTMLAttributes<HTMLDivElement>, "onSubmit"> {
|
|
4
|
-
}
|
|
5
|
-
export declare const EditForm: ({ className, dataSource, formFieldDescriptors, onSubmit: onSubmitProp, ...htmlAttributes }: EditFormProps) => import("react").JSX.Element;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { Entity } from "@vuu-ui/vuu-utils";
|
|
2
|
-
export interface UnsavedChangesReportProps<T extends Entity = Entity> {
|
|
3
|
-
entity: T;
|
|
4
|
-
editedEntity: T;
|
|
5
|
-
}
|
|
6
|
-
export declare const UnsavedChangesReport: ({ entity, editedEntity, }: UnsavedChangesReportProps) => import("react").JSX.Element;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { DataValueDescriptor, DataValueValidationChecker, EditPhase, EditRuleValidationSuccessResult, EditValidationRule } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
export declare const OK: EditRuleValidationSuccessResult;
|
|
3
|
-
export declare function getEditValidationRules(descriptor: DataValueDescriptor, editPhase: EditPhase | "*"): EditValidationRule[];
|
|
4
|
-
export declare const buildValidationChecker: (rules: EditValidationRule[]) => DataValueValidationChecker;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const registerRules: () => void;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { Entity } from "@vuu-ui/vuu-utils";
|
|
2
|
-
export type FormEditState = {
|
|
3
|
-
isClean: boolean;
|
|
4
|
-
editedFields: string[];
|
|
5
|
-
};
|
|
6
|
-
export declare const CLEAN_FORM: FormEditState;
|
|
7
|
-
export declare const buildFormEditState: (entity: Entity | undefined, newEntity: Entity) => FormEditState;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import type { DataValueDescriptor, TableSchemaTable } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import { type VuuTypeaheadInputProps } from "@vuu-ui/vuu-ui-controls";
|
|
3
|
-
import { type CommitHandler } from "@vuu-ui/vuu-utils";
|
|
4
|
-
import type { InputProps } from "@salt-ds/core";
|
|
5
|
-
/**
|
|
6
|
-
* variant can be used to provide a rendering hint to the filter control rendered.
|
|
7
|
-
* 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices
|
|
8
|
-
* 'search' to render a search icon and require at least one character to be entered.
|
|
9
|
-
* 'pick' to show a dropdown list, even before any text is entered, best for smaller lists
|
|
10
|
-
*/
|
|
11
|
-
export type FilterControlVariant = "search" | "pick" | "toggle";
|
|
12
|
-
export interface DataItemEditControlProps {
|
|
13
|
-
InputProps?: Partial<InputProps>;
|
|
14
|
-
TypeaheadProps?: Pick<VuuTypeaheadInputProps, "highlightFirstSuggestion" | "minCharacterCountToTriggerSuggestions" | "selectOnTab">;
|
|
15
|
-
className?: string;
|
|
16
|
-
commitOnBlur?: boolean;
|
|
17
|
-
commitWhenCleared?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* A table column or form field Descriptor.
|
|
20
|
-
*/
|
|
21
|
-
dataDescriptor: DataValueDescriptor;
|
|
22
|
-
editOperation?: "insert" | "update";
|
|
23
|
-
errorMessage?: string;
|
|
24
|
-
onCommit: CommitHandler<HTMLElement>;
|
|
25
|
-
table?: TableSchemaTable;
|
|
26
|
-
/**
|
|
27
|
-
* Where provided, only these values will be offered as suggestions.
|
|
28
|
-
* They will be validated against server with Typeahead service, so
|
|
29
|
-
* unavailable options are not offered.
|
|
30
|
-
* Recommended for toggle filters, not usually necessary for other
|
|
31
|
-
* filter variants.
|
|
32
|
-
*/
|
|
33
|
-
values?: string[];
|
|
34
|
-
variant?: FilterControlVariant;
|
|
35
|
-
}
|
|
36
|
-
export type ValidationStatus = "initial" | true | string;
|
|
37
|
-
export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react").JSX.Element;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { DataSource, DataValueDescriptor } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import { CommitHandler, Entity } from "@vuu-ui/vuu-utils";
|
|
3
|
-
import { FocusEventHandler, SyntheticEvent } from "react";
|
|
4
|
-
export interface EditFormHookProps {
|
|
5
|
-
dataSource?: DataSource;
|
|
6
|
-
formFieldDescriptors: DataValueDescriptor[];
|
|
7
|
-
onSubmit?: () => void;
|
|
8
|
-
}
|
|
9
|
-
export declare const useEditForm: ({ dataSource, formFieldDescriptors, onSubmit, }: EditFormHookProps) => {
|
|
10
|
-
editedFields: string[];
|
|
11
|
-
editEntity: Entity | undefined;
|
|
12
|
-
errorMessages: Record<string, string>;
|
|
13
|
-
formFieldsContainerRef: import("react").RefObject<HTMLDivElement | null>;
|
|
14
|
-
isClean: boolean;
|
|
15
|
-
ok: boolean;
|
|
16
|
-
onCancel: () => Promise<void>;
|
|
17
|
-
onChange: (evt: SyntheticEvent<HTMLInputElement>) => void;
|
|
18
|
-
onCommit: CommitHandler<HTMLElement>;
|
|
19
|
-
onFocus: FocusEventHandler;
|
|
20
|
-
onSubmit: () => Promise<void>;
|
|
21
|
-
};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* DataSource Providers inject a DataSource constructor, made available
|
|
4
|
-
* to clients via the useData hook. This provider offers the standard
|
|
5
|
-
* VuuDataSource, which will source data from a remote vuu server.
|
|
6
|
-
*
|
|
7
|
-
* In production code, it will generally be used without props, authentication
|
|
8
|
-
* and connection to vuu server will be handled elsewhere. The props are
|
|
9
|
-
* useful for rendering standalone components.
|
|
10
|
-
*/
|
|
11
|
-
export declare const VuuDataSourceProvider: ({ authenticate, autoConnect, autoLogin, children, websocketUrl, }: {
|
|
12
|
-
authenticate?: boolean;
|
|
13
|
-
autoConnect?: boolean;
|
|
14
|
-
autoLogin?: boolean;
|
|
15
|
-
children: ReactNode;
|
|
16
|
-
websocketUrl?: string;
|
|
17
|
-
}) => import("react").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./VuuDataSourceProvider";
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export declare const useAutoLoginToVuuServer: ({ authenticate, autoConnect, secure, token: tokenProp, user, websocketUrl, }?: {
|
|
2
|
-
/**
|
|
3
|
-
* if true, auth url on vuuserver will be used to get token
|
|
4
|
-
* auth url is "/api/authn"
|
|
5
|
-
*/
|
|
6
|
-
authenticate?: boolean;
|
|
7
|
-
/**
|
|
8
|
-
* true by default, will go ahead and open websocket connection
|
|
9
|
-
*/
|
|
10
|
-
autoConnect?: boolean;
|
|
11
|
-
autoLogin?: boolean;
|
|
12
|
-
secure?: boolean;
|
|
13
|
-
/**
|
|
14
|
-
* use with no authenticate step, to provide auth token.
|
|
15
|
-
* Used when vuu server is performing no token check
|
|
16
|
-
*/
|
|
17
|
-
token?: string;
|
|
18
|
-
user?: string;
|
|
19
|
-
websocketUrl?: string;
|
|
20
|
-
}) => import("react").JSX.Element | undefined;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { DataSource, DataSourceConfigChangeHandler, DataSourceConstructorProps } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
export interface SessionStateHookProps {
|
|
3
|
-
onConfigChange?: DataSourceConfigChangeHandler;
|
|
4
|
-
}
|
|
5
|
-
export declare const useSessionDataSource: (props?: SessionStateHookProps) => {
|
|
6
|
-
clearDataSource: (sessionKey: string, unsubscribe?: boolean) => void;
|
|
7
|
-
getDataSource: (sessionKey: string, dataSourceConstructorProps?: DataSourceConstructorProps) => DataSource;
|
|
8
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { SuggestionFetcher, TableSchemaTable } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import { TypeaheadParams } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
-
export declare const getTypeaheadParams: (table: TableSchemaTable, column: string, text?: string, selectedValues?: string[]) => TypeaheadParams;
|
|
4
|
-
export declare const useTypeaheadSuggestions: () => SuggestionFetcher;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { type MenuActionHandler } from "@vuu-ui/vuu-context-menu";
|
|
2
|
-
import { DataSource, DataSourceVisualLinkCreatedMessage, RpcResponseHandler } from "@vuu-ui/vuu-data-types";
|
|
3
|
-
import type { LinkDescriptorWithLabel, VuuDataRowDto, VuuMenu, VuuMenuItem, VuuRowDataItemType } from "@vuu-ui/vuu-protocol-types";
|
|
4
|
-
import type { ColumnDescriptor, TableContextMenuDef } from "@vuu-ui/vuu-table-types";
|
|
5
|
-
export interface MenuActionConfig {
|
|
6
|
-
vuuMenu?: VuuMenu;
|
|
7
|
-
visualLink?: DataSourceVisualLinkCreatedMessage;
|
|
8
|
-
visualLinks?: LinkDescriptorWithLabel[];
|
|
9
|
-
}
|
|
10
|
-
export interface VuuMenuActionHookProps {
|
|
11
|
-
/**
|
|
12
|
-
* By default, vuuMenuActions will be handled automatically. When activated, a
|
|
13
|
-
* message will be sent to server and response will be handled here too.
|
|
14
|
-
* This prop allows client to provide a custom handler for a menu Item. This will
|
|
15
|
-
* take priority and if handler returns true, no further processing for the menu
|
|
16
|
-
* item will be handled by Vuu. This can also be used to prevent an item from being
|
|
17
|
-
* actioned, even when no custom handling is intended. If the handler returns false,
|
|
18
|
-
* Vuu will process the menuItem.
|
|
19
|
-
*/
|
|
20
|
-
clientSideMenuActionHandler?: MenuActionHandler;
|
|
21
|
-
dataSource?: DataSource;
|
|
22
|
-
menuActionConfig?: MenuActionConfig;
|
|
23
|
-
onRpcResponse?: RpcResponseHandler;
|
|
24
|
-
}
|
|
25
|
-
export interface VuuCellContextMenuItemOptions extends VuuMenuItem {
|
|
26
|
-
rowKey: string;
|
|
27
|
-
field: string;
|
|
28
|
-
value: VuuRowDataItemType;
|
|
29
|
-
}
|
|
30
|
-
export interface VuuRowContextMenuItemOptions extends VuuMenuItem {
|
|
31
|
-
rowKey: string;
|
|
32
|
-
row: VuuDataRowDto;
|
|
33
|
-
}
|
|
34
|
-
export interface VuuSelectedRowsContextMenuItemOptions extends VuuMenuItem {
|
|
35
|
-
columns: ColumnDescriptor[];
|
|
36
|
-
}
|
|
37
|
-
export declare const isRowMenu: (options: VuuMenuItem) => options is VuuRowContextMenuItemOptions;
|
|
38
|
-
export declare const isSelectionMenu: (options: VuuMenuItem) => options is VuuSelectedRowsContextMenuItemOptions;
|
|
39
|
-
export declare const useVuuMenuActions: ({ clientSideMenuActionHandler, dataSource, onRpcResponse, }: VuuMenuActionHookProps) => TableContextMenuDef;
|
package/types/src/index.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export * from "./data-editing";
|
|
2
|
-
export * from "./datasource-provider";
|
|
3
|
-
export { useLookupValues } from "./hooks/useLookupValues";
|
|
4
|
-
export { useSessionDataSource } from "./hooks/useSessionDataSource";
|
|
5
|
-
export { getTypeaheadParams, useTypeaheadSuggestions, } from "./hooks/useTypeaheadSuggestions";
|
|
6
|
-
export { useVisualLinks } from "./hooks/useVisualLinks";
|
|
7
|
-
export { isRowMenu, isSelectionMenu, useVuuMenuActions, type MenuActionConfig, } from "./hooks/useVuuMenuActions";
|
|
8
|
-
export { useVuuTables } from "./hooks/useVuuTables";
|
|
9
|
-
export { useLostConnection } from "./lost-connection-indicator/useLostConnection";
|
|
10
|
-
export * from "./session-editing-form";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const LostConnectionIndicator: () => import("react").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useLostConnection: () => void;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { DataSource, TableSchema } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import { VuuColumnDataType } from "@vuu-ui/vuu-protocol-types";
|
|
3
|
-
import { HTMLAttributes } from "react";
|
|
4
|
-
export type FormFieldDescriptor = {
|
|
5
|
-
isKeyField?: boolean;
|
|
6
|
-
label?: string;
|
|
7
|
-
name: string;
|
|
8
|
-
type: VuuColumnDataType;
|
|
9
|
-
description: string;
|
|
10
|
-
readonly?: boolean;
|
|
11
|
-
required?: boolean;
|
|
12
|
-
};
|
|
13
|
-
export type FormConfig = {
|
|
14
|
-
title: string;
|
|
15
|
-
key: string;
|
|
16
|
-
fields: FormFieldDescriptor[];
|
|
17
|
-
};
|
|
18
|
-
export interface SessionEditingFormProps extends HTMLAttributes<HTMLDivElement> {
|
|
19
|
-
config: FormConfig;
|
|
20
|
-
onClose?: () => void;
|
|
21
|
-
dataSource?: DataSource;
|
|
22
|
-
schema?: TableSchema;
|
|
23
|
-
}
|
|
24
|
-
export declare const SessionEditingForm: ({ className, config: { fields, key: keyField }, dataSource: dataSourceProp, id: idProp, onClose, schema, ...htmlAttributes }: SessionEditingFormProps) => import("react").JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./SessionEditingForm";
|