@vuu-ui/vuu-data-react 4.0.0-alpha.17 → 4.0.0-alpha.19

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.17",
+  "version": "4.0.0-alpha.19",
   "main": "./src/index.js",
   "author": "heswell",
   "type": "module",
@@ -11,25 +11,25 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.17"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.19"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-data-remote": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-filters": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-layout": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-notifications": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.17",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.17",
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-data-remote": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-filters": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-layout": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-notifications": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.19",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.19",
     "@salt-ds/core": "1.67.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/core": "4.0.0-alpha.17"
+    "@vuu-ui/core": "4.0.0-alpha.19"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",

package/src/data-editing/get-data-item-edit-control.js

@@ -1,12 +1,29 @@
 import { jsx } from "react/jsx-runtime";
 import { VuuDatePicker, VuuInput, VuuTimePicker, VuuTypeaheadInput } from "@vuu-ui/vuu-ui-controls";
-import { asTimeString, isDataValueEditable, isDateTimeDataValue, isTimeDataValue } from "@vuu-ui/vuu-utils";
+import { EpochTimestamp, getTemporalInfo, isDataValueEditable, isTimeDataValueWithMilliseconds, isValidTimeString, isValidTimeStringMillis, parseTemporalInput } from "@vuu-ui/vuu-utils";
 import { ToggleFilter } from "@vuu-ui/vuu-filters";
-const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation = "update", errorMessage, onCommit, table, values, variant })=>{
-    const handleCommitNumber = (evt, value)=>{
-        onCommit(evt, value.toString());
-    };
+const timeOfDayPattern = /^\d{2}:\d{2}(:\d{2}(\.\d{1,9})?)?$/;
+const toEpochTimestamp = (value, { encoding })=>{
+    if (("string" == typeof value || "number" == typeof value) && !timeOfDayPattern.test(`${value}`)) return EpochTimestamp.fromWire(value, encoding);
+};
+const pad = (n)=>`${n}`.padStart(2, "0");
+function toTimeString(value, timestamp, { timeZone }, milliseconds = false) {
+    if (timestamp) {
+        const { hour, minute, second, millisecond } = timestamp.getFields(timeZone);
+        const timeString = `${pad(hour)}:${pad(minute)}:${pad(second)}`;
+        return milliseconds ? `${timeString}.${`${millisecond}`.padStart(3, "0")}` : timeString;
+    }
+    if ("string" == typeof value) if (milliseconds) {
+        const timeString = 8 === value.length ? `${value}.000` : value.slice(0, 12);
+        if (isValidTimeStringMillis(timeString)) return timeString;
+    } else {
+        const timeString = value.slice(0, 8);
+        if (isValidTimeString(timeString)) return timeString;
+    }
+}
+const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation = "update", errorMessage, labels, onCommit, table, values, variant })=>{
     const dataVariant = variant && "toggle" !== variant ? variant : void 0;
+    const temporalInfo = getTemporalInfo(dataDescriptor);
     if (!isDataValueEditable(dataDescriptor, editOperation, true)) return /*#__PURE__*/ jsx(VuuInput, {
         variant: "secondary",
         ...InputProps,
@@ -14,26 +31,62 @@ const getDataItemEditControl = ({ InputProps, TypeaheadProps, className, commitO
         readOnly: true,
         "data-edit-control": true
     });
-    if (isTimeDataValue(dataDescriptor)) {
-        if (InputProps?.inputProps) {
-            const { value, onChange } = InputProps.inputProps;
-            return /*#__PURE__*/ jsx(VuuTimePicker, {
-                className: className,
-                value: asTimeString(value, true),
-                onChange: onChange,
-                onCommit: onCommit,
-                "data-edit-control": true
-            });
-        }
-    } else if (isDateTimeDataValue(dataDescriptor)) return /*#__PURE__*/ jsx(VuuDatePicker, {
-        className: className,
-        onCommit: handleCommitNumber,
-        "data-edit-control": true
-    });
-    else if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
+    if (temporalInfo?.kind === "time") {
+        const { value, onChange } = InputProps?.inputProps ?? {};
+        const baseValue = toEpochTimestamp(value, temporalInfo);
+        const handleCommitTime = (evt, timeString)=>{
+            if (baseValue) {
+                const timestamp = parseTemporalInput(timeString, temporalInfo, baseValue);
+                onCommit(evt, timestamp ? `${timestamp.toWire(temporalInfo.encoding)}` : "");
+            } else onCommit(evt, timeString);
+        };
+        return isTimeDataValueWithMilliseconds(dataDescriptor) ? /*#__PURE__*/ jsx(VuuTimePicker, {
+            className: className,
+            milliseconds: true,
+            value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo, true),
+            onChange: onChange,
+            onCommit: handleCommitTime,
+            "data-edit-control": true
+        }) : /*#__PURE__*/ jsx(VuuTimePicker, {
+            className: className,
+            value: "" === value ? "" : toTimeString(value, baseValue, temporalInfo),
+            onChange: onChange,
+            onCommit: handleCommitTime,
+            "data-edit-control": true
+        });
+    }
+    if (temporalInfo) {
+        const baseValue = toEpochTimestamp(InputProps?.inputProps?.value, temporalInfo);
+        const handleCommitDate = (evt, startOfDayMillis)=>{
+            let timestamp = EpochTimestamp.fromMillis(startOfDayMillis);
+            if (baseValue && "datetime" === temporalInfo.kind) {
+                const { year, month, day } = timestamp.getFields(temporalInfo.timeZone);
+                const { hour, minute, second, millisecond } = baseValue.getFields(temporalInfo.timeZone);
+                timestamp = EpochTimestamp.fromFields({
+                    year,
+                    month,
+                    day,
+                    hour,
+                    minute,
+                    second,
+                    millisecond
+                }, temporalInfo.timeZone, baseValue.subMilliNanos);
+            }
+            onCommit(evt, `${timestamp.toWire(temporalInfo.encoding)}`);
+        };
+        return /*#__PURE__*/ jsx(VuuDatePicker, {
+            className: className,
+            onCommit: handleCommitDate,
+            timeZone: temporalInfo.timeZone,
+            value: baseValue,
+            "data-edit-control": true
+        });
+    }
+    if ("string" === dataDescriptor.serverDataType && table) if ("toggle" === variant && values?.length) return /*#__PURE__*/ jsx(ToggleFilter, {
         className: className,
         column: dataDescriptor.name,
         "data-edit-control": true,
+        labels: labels,
         onCommit: onCommit,
         table: table,
         values: values,

package/types/data-editing/get-data-item-edit-control.d.ts

@@ -21,6 +21,11 @@ export interface DataItemEditControlProps {
     dataDescriptor: DataValueDescriptor;
     editOperation?: "insert" | "update";
     errorMessage?: string;
+    /**
+     * Optional labels, only used with 'toggle' variant. If provided, must
+     * have same number of items as values. Defaults to values.
+     */
+    labels?: string[];
     onCommit: CommitHandler<HTMLElement>;
     table?: TableSchemaTable;
     /**
@@ -34,4 +39,4 @@ export interface DataItemEditControlProps {
     variant?: FilterControlVariant;
 }
 export type ValidationStatus = "initial" | true | string;
-export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react").JSX.Element;
+export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, labels, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react").JSX.Element;