refactor onChange for TimeInput, add styling for ColumnFilter

Author: heswell

vuu-ui/packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx

@@ -26,8 +26,6 @@ export interface DataItemEditControlProps {
    * A table column or form field Descriptor.
    */
   dataDescriptor: DataValueDescriptor;
-  defaultValue?: string | number | readonly string[];
-  value?: string | number | readonly string[]; //TODO - will be used in VuuTimePicker
   errorMessage?: string;
   onCommit: CommitHandler<HTMLElement>;
   table?: TableSchemaTable;
@@ -41,7 +39,6 @@ export const getDataItemEditControl = ({
   className,
   commitWhenCleared,
   dataDescriptor,
-  defaultValue,
   errorMessage,
   onCommit,
   table,
@@ -63,13 +60,17 @@ export const getDataItemEditControl = ({
       />
     );
   } else if (isTimeDataValue(dataDescriptor)) {
-    return (
-      <VuuTimePicker
-        className={className}
-        defaultValue={asTimeString(defaultValue, true)}
-        onCommit={handleCommitNumber}
-      />
-    );
+    if (InputProps?.inputProps) {
+      const { value, onChange } = InputProps.inputProps;
+      return (
+        <VuuTimePicker
+          className={className}
+          value={asTimeString(value, true)}
+          onChange={onChange}
+          onCommit={onCommit}
+        />
+      );
+    }
   } else if (isDateTimeDataValue(dataDescriptor)) {
     return (
       <VuuDatePicker className={className} onCommit={handleCommitNumber} />

vuu-ui/packages/vuu-filters/src/column-filter/ColumnFilter.css

@@ -1,7 +1,9 @@
 .vuuColumnFilter {
     border: solid 1px var(--salt-editable-borderColor);
-    border-radius: 6px;
     max-width: 200px;
+    padding-left: 4px;
+    padding-right: 4px;
+    width: var(--vuuColumnFilter-width, fit-content);
 
 
     .vuuColumnFilter-rangeHigh {
@@ -14,9 +16,26 @@
         position: absolute;
         background: var(--salt-separable-primary-borderColor);
         /* Accomodate button border */
-        left: 0;
-        top: calc(-1 * var(--salt-spacing-100));
-        bottom: calc(-1 * var(--salt-spacing-100));
+        left: calc(-1 * var(--salt-spacing-100));
+        top: -1px;
+        bottom: -1px;
+    }
+
+    .vuuTimePicker {
+        border-radius: 6px;
+    }
+
+    .vuuTimePicker + .vuuTimePicker {
+        margin-left: var(--salt-spacing-100);
+    }
+
+    .vuuTimeInput {
+        border: none;
+        outline: none;
+    }
+
+    .vuuTimeInput:focus-visible {
+        outline: none;
     }
 
 }

vuu-ui/packages/vuu-filters/src/column-filter/ColumnFilter.tsx

@@ -15,7 +15,12 @@ import columnFilterCss from "./ColumnFilter.css";
 import { getDataItemEditControl } from "@vuu-ui/vuu-data-react";
 import { ForwardedRef, forwardRef, ReactElement, useMemo } from "react";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { assertValidOperator, assertValidValue, Operator, useColumnFilter } from "./useColumnFilter";
+import {
+  assertValidOperator,
+  assertValidValue,
+  Operator,
+  useColumnFilter,
+} from "./useColumnFilter";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 
 const classBase = "vuuColumnFilter";
@@ -126,10 +131,9 @@ export const ColumnFilter = forwardRef(function ColumnFilter(
         </Menu>
       ) : null}
       {getDataItemEditControl({
-        InputProps: { inputProps },        
+        InputProps: { inputProps },
         dataDescriptor: column,
         onCommit: handleCommit,
-        defaultValue: Array.isArray(filterValue) ? filterValue[0] : filterValue,
         table,
       })}
       {op === "between"
@@ -138,9 +142,6 @@ export const ColumnFilter = forwardRef(function ColumnFilter(
             InputProps: { inputProps: rangeInputProps },
             dataDescriptor: column,
             onCommit: handleRangeCommit,
-            defaultValue: Array.isArray(filterValue)
-              ? filterValue[1]
-              : filterValue,
             table,
           })
         : null}

vuu-ui/packages/vuu-filters/src/column-filter/useColumnFilter.ts

@@ -89,6 +89,7 @@ export const useColumnFilter = ({
 
   const handleCommit = useCallback<CommitHandler<HTMLElement>>(
     (e, newValue) => {
+      console.log(`[useColumnFilter] handleCommit ${newValue}`);
       if (Array.isArray(filterValue.current)) {
         filterValue.current = [
           newValue as FilterValue,

vuu-ui/packages/vuu-theme/css/components/components.css

@@ -6,6 +6,7 @@
 @import url(dropdown.css);
 @import url(dialog.css);
 @import url(filters.css);
+@import url(form-field.css);
 @import url(header.css);
 @import url(icon.css);
 @import url(input.css);
@@ -16,6 +17,7 @@
 @import url(palette.css);
 @import url(save-layout-panel.css);
 @import url(scrollable.css);
+@import url(segmented-button-group.css);
 @import url(shell.css);
 @import url(split-button.css);
 @import url(splitter.css);

vuu-ui/packages/vuu-theme/css/components/form-field.css

@@ -0,0 +1,7 @@
+.salt-theme.vuu-theme {
+
+    .saltFormField:has(.vuuColumnFilter){
+        width: fit-content;
+    }
+
+}

vuu-ui/packages/vuu-theme/css/components/segmented-button-group.css

@@ -0,0 +1,7 @@
+.salt-theme.vuu-theme {
+
+    .saltSegmentedButtonGroup {
+        border-radius: 4px;
+        padding: 1px;
+    }
+}

vuu-ui/packages/vuu-ui-controls/src/time-input/MaskedInput.ts

@@ -1,4 +1,5 @@
 import {
+  createSyntheticEvent,
   decrementTimeUnitValue,
   EventEmitter,
   Hours,
@@ -13,6 +14,7 @@ import {
   zeroTime,
   zeroTimeUnit,
 } from "@vuu-ui/vuu-utils";
+import { ChangeEventHandler } from "react";
 
 export type Digit = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
 
@@ -32,12 +34,12 @@ const FullSelection: Selection = { end: 0, start: 8 };
 const CursorAtEnd: Selection = { end: 8, start: 8 };
 
 export type MaskedInputEvents = {
-  change: (value: TimeString) => void;
+  change: ChangeEventHandler<HTMLInputElement>;
 };
 
 export class MaskedInput extends EventEmitter<MaskedInputEvents> {
   #controlled = false;
-  #input: HTMLInputElement | null;
+  #input: HTMLInputElement | null = null;
   #isFocused = false;
   #isIncrementalChange = false;
   #selectionStart = -1;
@@ -51,14 +53,35 @@ export class MaskedInput extends EventEmitter<MaskedInputEvents> {
     inputEl: HTMLInputElement | null = null,
   ) {
     super();
-    this.#input = inputEl;
+    if (inputEl) {
+      this.input = inputEl;
+    }
     this.#value = defaultValue ?? zeroTime;
   }
 
   set input(el: HTMLInputElement) {
+    if (this.#input) {
+      throw Error(
+        "MaskedInput cannot be reused, create a new instance for a new input",
+      );
+    }
     this.#input = el;
+    el.addEventListener("change", this.emitSyntheticChangeEvent);
   }
 
+  /**
+   * The change event is fired programatically. This will only be handled
+   * by a native event handler ( not a React handler). We handle this event
+   * and convert to a React (Synthetic) event.
+   */
+  private emitSyntheticChangeEvent = (e: Event) => {
+    const syntheticEvent = createSyntheticEvent(
+      e,
+    ) as React.ChangeEvent<HTMLInputElement>;
+
+    this.emit("change", syntheticEvent);
+  };
+
   get cursorPos() {
     return this.selectionStart;
   }
@@ -92,11 +115,23 @@ export class MaskedInput extends EventEmitter<MaskedInputEvents> {
     if (!this.#controlled) {
       this.#isIncrementalChange = false;
       this.#value = value;
-      if (this.#input) {
-        this.#input.value = value;
-      }
     }
-    this.emit("change", value);
+
+    if (this.#input) {
+      // HM this updateds the input value, even if we are controlled.
+      // Thats not right, but if we don't update it, the event will
+      // not carry thwe right value. I don;t thibnk we can simulate
+      // the correct behaviour
+      this.#input.value = value;
+      // this triggers the native change event, which we convert
+      // // to synthetic event and emit in input setter above
+      this.#input.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
   }
 
   private setUnitValue(unit: TimeUnit, value: Hours | Minutes | Seconds) {
@@ -132,31 +167,31 @@ export class MaskedInput extends EventEmitter<MaskedInputEvents> {
       this.#isIncrementalChange = false;
 
       requestAnimationFrame(() => {
-        if (isValidTimeString(value) && !isIncremental) {
-          this.advanceSelection();
-        } else {
+        if (isIncremental) {
           this.restoreSelection();
+        } else {
+          this.advanceSelection();
         }
       });
     }
   }
 
   clear(unit: TimeUnit) {
     if (this.#input) {
+      let newValue = this.#value;
       if (unit === "hours") {
-        this.#value = zeroTimeUnit.concat(this.#value.slice(2)) as TimeString;
+        newValue = zeroTimeUnit.concat(this.#value.slice(2)) as TimeString;
       } else if (unit === "minutes") {
-        this.#value = this.#value
+        newValue = this.#value
           .slice(0, 3)
           .concat(zeroTimeUnit)
           .concat(this.#value.slice(5)) as TimeString;
       } else if (unit === "seconds") {
-        this.#value = this.#value
-          .slice(0, 6)
-          .concat(zeroTimeUnit) as TimeString;
+        newValue = this.#value.slice(0, 6).concat(zeroTimeUnit) as TimeString;
+      }
+      if (newValue !== this.#value) {
+        this.setValue(newValue);
       }
-      this.#input.value = this.#value;
-      this.emit("change", this.#value as TimeString);
     }
   }
 
@@ -306,11 +341,9 @@ export class MaskedInput extends EventEmitter<MaskedInputEvents> {
             .slice(0, cursorPos - offset)
             .concat(zeroTime.slice(cursorPos - offset, cursorPos))
             .concat(this.#value.slice(cursorPos)) as TimeString;
-          this.#value = newValue;
           this.selectionStart -= offset;
           this.selectionEnd -= offset;
-          this.#input.value = this.#value;
-          this.emit("change", this.#value as TimeString);
+          this.setValue(newValue);
 
           requestAnimationFrame(() => {
             this.#input?.setSelectionRange(
@@ -372,6 +405,7 @@ export class MaskedInput extends EventEmitter<MaskedInputEvents> {
 
   click() {
     if (this.#input) {
+      this.#isFocused = true;
       const selection = this.getSelection();
       if (selection === NullSelection) {
         this.select("hours");

vuu-ui/packages/vuu-ui-controls/src/time-input/TimeInput.css

@@ -1,14 +1,28 @@
+.salt-density-high .vuuTimeInput {
+    --time-input-width: 60px;
+}
+.salt-density-medium .vuuTimeInput {
+    --time-input-width: 70px;
+}
+.salt-density-low .vuuTimeInput {
+    --time-input-width: 80px;
+}
+.salt-density-touch .vuuTimeInput {
+    --time-input-width: 90px;
+}
+
 .vuuTimeInput {
+    border-width: 1px;
     font-family: var(--salt-typography-fontFamily);
-    width: 80px;
+    width: var(--vuuTimeInput-width, var(--time-input-width));
 
     &:focus::-webkit-input-placeholder {
         color: transparent;
     }
 
 }
 
-.invalid::selection {
-    background-color: red !important;
-    color: white !important;
-}
+.invalid {
+    border-color: red;
+}
+