@teselagen/ui 0.9.6 → 0.9.8

package/src/DataTable/EditabelCell.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const EditableCell = ({
+  cancelEdit,
+  dataTest,
+  finishEdit,
+  isNumeric,
+  initialValue
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isNumeric]);
+
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={inputRef}
+      {...dataTest}
+      autoFocus
+      onKeyDown={e => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.target.blur();
+        } else if (e.key === "Escape") {
+          cancelEdit();
+        }
+      }}
+      onBlur={() => finishEdit(value)}
+      onChange={e => setValue(e.target.value)}
+      type={isNumeric ? "number" : undefined}
+      value={value}
+    />
+  );
+};

package/src/DataTable/EditabelCell.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const EditableCell = ({
+  cancelEdit,
+  dataTest,
+  finishEdit,
+  isNumeric,
+  initialValue
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isNumeric]);
+
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={inputRef}
+      {...dataTest}
+      autoFocus
+      onKeyDown={e => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+          e.target.blur();
+        } else if (e.key === "Escape") {
+          cancelEdit();
+        }
+      }}
+      onBlur={() => finishEdit(value)}
+      onChange={e => setValue(e.target.value)}
+      type={isNumeric ? "number" : undefined}
+      value={value}
+    />
+  );
+};

package/src/DataTable/PagingTool.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import classNames from "classnames";
-import { noop, get, toInteger } from "lodash-es";
+import { noop, toInteger } from "lodash-es";
 import { Button, Classes } from "@blueprintjs/core";
 import { onEnterOrBlurHelper } from "../utils/handlerHelpers";
 import { defaultPageSizes } from "./utils/queryParams";
@@ -69,7 +69,7 @@ const PagingTool = ({
   const setPageSize = controlled_setPageSize || _setPageSize;
 
   const onPageChange = useCallback(() => {
-    const record = get(entities, "[0]");
+    const record = entities?.[0];
     if (
       !keepSelectionOnPageChange &&
       (!record || !getIdOrCodeOrIndex(record))