apply edit validators once input committed (finos#888)

ScottLogic · Oct 2, 2023 · eff81fe · eff81fe
1 parent 35b8e16
commit eff81fe
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/vuu-ui/packages/vuu-table/src/table-next/cell-renderers/dropdown-cell/DropdownCell.tsx b/vuu-ui/packages/vuu-table/src/table-next/cell-renderers/dropdown-cell/DropdownCell.tsx
@@ -1,29 +1,46 @@
-import { Dropdown, DropdownOpenKey } from "@finos/vuu-ui-controls";
+import {
+  Dropdown,
+  DropdownOpenKey,
+  SelectionChangeHandler,
+} from "@finos/vuu-ui-controls";
 import {
   isColumnTypeRenderer,
   isTypeDescriptor,
   registerComponent,
 } from "@finos/vuu-utils";
 import { TableCellProps } from "@finos/vuu-datagrid-types";
+// import { dispatchCommitEvent } from "@finos/vuu-ui-controls";
 
 import "./DropdownCell.css";
+import { useCallback, useState } from "react";
 
 const classBase = "vuuTableDropdownCell";
 
 const openKeys: DropdownOpenKey[] = ["Enter", " "];
 
 export const DropdownCell = ({ column, columnMap, row }: TableCellProps) => {
-  const { valueFormatter } = column;
   const values =
     isTypeDescriptor(column.type) && isColumnTypeRenderer(column.type?.renderer)
       ? column.type?.renderer?.values
       : [];
 
   const dataIdx = columnMap[column.name];
-  const value = valueFormatter(row[dataIdx]);
+  const [value, setValue] = useState(row[dataIdx]);
+
+  const handleSelectionChange = useCallback<SelectionChangeHandler>(
+    (evt, selectedItem) => {
+      if (selectedItem) {
+        setValue(selectedItem);
+        // dispatchCommitEvent(evt.target as HTMLElement);
+      }
+    },
+    []
+  );
+
   return (
     <Dropdown
       className={classBase}
+      onSelectionChange={handleSelectionChange}
       openKeys={openKeys}
       selected={value}
       source={values}

diff --git a/vuu-ui/packages/vuu-ui-controls/src/editable/editable-utils.ts b/vuu-ui/packages/vuu-ui-controls/src/editable/editable-utils.ts
@@ -15,6 +15,7 @@ function applyRules(
   rules: EditValidationRule[],
   value: VuuRowDataItemType
 ): string | false | undefined {
+  console.log(`apply rules to ${value}`);
   let result: false | string | undefined = undefined;
   for (const rule of rules) {
     const editRuleValidator = getEditRuleValidator(rule.name);
@@ -42,5 +43,6 @@ function applyRules(
     }
   }
 
+  console.log(result);
   return result;
 }
diff --git a/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts b/vuu-ui/packages/vuu-ui-controls/src/editable/useEditableText.ts
@@ -16,7 +16,7 @@ export interface EditableTextHookProps<
   onCommit: (value: T) => boolean;
 }
 
-const dispatchCommitEvent = (el: HTMLInputElement) => {
+export const dispatchCommitEvent = (el: HTMLElement) => {
   const commitEvent = new Event("vuu-commit");
   el.dispatchEvent(commitEvent);
 };
@@ -32,12 +32,18 @@ export const useEditableText = <
   const [value, setValue] = useState(initialValue);
   const initialValueRef = useRef<T>(initialValue);
   const isDirtyRef = useRef(false);
+  const hasCommittedRef = useRef(false);
+
+  const handleBlur = useCallback(() => {
+    console.log("blur");
+  }, []);
 
   const handleKeyDown = useCallback(
     (evt: KeyboardEvent<HTMLElement>) => {
       if (evt.key === "Enter") {
         evt.stopPropagation();
         if (isDirtyRef.current) {
+          hasCommittedRef.current = true;
           const warningMessage = clientSideEditValidationCheck?.(value);
           if (warningMessage) {
             setMessage(warningMessage);
@@ -51,8 +57,14 @@ export const useEditableText = <
           }
         } else {
           dispatchCommitEvent(evt.target as HTMLInputElement);
+          hasCommittedRef.current = false;
         }
-      } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
+      } else if (
+        evt.key === "ArrowRight" ||
+        evt.key === "ArrowLeft" ||
+        evt.key === "ArrowUp" ||
+        evt.key === "ArrowDown"
+      ) {
         evt.stopPropagation();
       } else if (evt.key === "Escape") {
         if (isDirtyRef.current) {
@@ -65,13 +77,25 @@ export const useEditableText = <
     [clientSideEditValidationCheck, onCommit, value]
   );
 
-  const handleChange = useCallback<FormEventHandler>((evt) => {
-    const { value } = evt.target as HTMLInputElement;
-    isDirtyRef.current = value !== initialValueRef.current;
-    setValue(value as T);
-  }, []);
+  const handleChange = useCallback<FormEventHandler>(
+    (evt) => {
+      const { value } = evt.target as HTMLInputElement;
+      isDirtyRef.current = value !== initialValueRef.current;
+      setValue(value as T);
+      console.log(`value changes to ${value} message ${message}`);
+      if (hasCommittedRef.current) {
+        const warningMessage = clientSideEditValidationCheck?.(value);
+        console.log({ warningMessage });
+        if (warningMessage !== message && warningMessage !== false) {
+          setMessage(warningMessage);
+        }
+      }
+    },
+    [clientSideEditValidationCheck, message]
+  );
 
   return {
+    onBlur: handleBlur,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     value,