@teselagen/ui 0.6.6 → 0.7.1

package/src/DataTable/DisplayOptions.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { map, isEmpty, noop } from "lodash-es";
+import React, { useState } from "react";
+import { map, isEmpty, noop, startCase } from "lodash-es";
 import {
   Button,
   Checkbox,
@@ -10,209 +10,190 @@ import {
   Popover,
   Switch
 } from "@blueprintjs/core";
+import { getCCDisplayName } from "./utils/queryParams";
 
-export default class DisplayOptions extends React.Component {
-  state = {
-    isOpen: false,
-    searchTerms: {}
-  };
-
-  openPopover = () => {
-    this.setState({
-      isOpen: true
-    });
-  };
+const DisplayOptions = ({
+  compact,
+  extraCompact,
+  disabled,
+  hideDisplayOptionsIcon,
+  resetDefaultVisibility = noop,
+  updateColumnVisibility = noop,
+  updateTableDisplayDensity,
+  showForcedHiddenColumns,
+  setShowForcedHidden,
+  hasOptionForForcedHidden,
+  schema
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerms, setSearchTerms] = useState({});
 
-  closePopover = () => {
-    this.setState({
-      isOpen: false
-    });
-  };
-
-  changeTableDensity = e => {
-    const { updateTableDisplayDensity = noop } = this.props;
+  const changeTableDensity = e => {
     updateTableDisplayDensity(e.target.value);
-    this.closePopover();
+    setIsOpen(false);
   };
 
-  toggleForcedHidden = e => this.props.setShowForcedHidden(e.target.checked);
+  const toggleForcedHidden = e => setShowForcedHidden(e.target.checked);
+
+  if (hideDisplayOptionsIcon) {
+    return null; //don't show antyhing!
+  }
+  const { fields } = schema;
+  const fieldGroups = {};
+  const mainFields = [];
 
-  render() {
-    const { isOpen, searchTerms } = this.state;
-    const {
-      schema,
-      updateColumnVisibility = noop,
-      resetDefaultVisibility = noop,
-      compact,
-      extraCompact,
-      disabled,
-      hasOptionForForcedHidden,
-      showForcedHiddenColumns,
-      hideDisplayOptionsIcon
-    } = this.props;
-    if (hideDisplayOptionsIcon) {
-      return null; //don't show antyhing!
-    }
-    const { fields } = schema;
-    const fieldGroups = {};
-    const mainFields = [];
+  fields.forEach(field => {
+    if (field.hideInMenu) return;
+    if (!field.fieldGroup) return mainFields.push(field);
+    if (!fieldGroups[field.fieldGroup]) fieldGroups[field.fieldGroup] = [];
+    fieldGroups[field.fieldGroup].push(field);
+  });
 
-    fields.forEach(field => {
-      if (field.hideInMenu) return;
-      if (!field.fieldGroup) return mainFields.push(field);
-      if (!fieldGroups[field.fieldGroup]) fieldGroups[field.fieldGroup] = [];
-      fieldGroups[field.fieldGroup].push(field);
-    });
+  let numVisible = 0;
 
-    let numVisible = 0;
+  const getFieldCheckbox = (field, i) => {
+    const { displayName, isHidden, isForcedHidden, path } = field;
+    if (isForcedHidden) return;
+    if (!isHidden) numVisible++;
+    return (
+      <Checkbox
+        name={`${path}-${i}`}
+        key={path || i}
+        onChange={() => {
+          if (numVisible <= 1 && !isHidden) {
+            return window.toastr.warning(
+              "We have to display at least one column :)"
+            );
+          }
+          updateColumnVisibility({ shouldShow: isHidden, path });
+        }}
+        checked={!isHidden}
+        label={displayName}
+      />
+    );
+  };
 
-    const getFieldCheckbox = (field, i) => {
-      const { displayName, isHidden, isForcedHidden, path } = field;
-      if (isForcedHidden) return;
-      if (!isHidden) numVisible++;
+  let fieldGroupMenu;
+  if (!isEmpty(fieldGroups)) {
+    fieldGroupMenu = map(fieldGroups, (groupFields, groupName) => {
+      const searchTerm = searchTerms[groupName] || "";
+      const anyVisible = groupFields.some(
+        field => !field.isHidden && !field.isForcedHidden
+      );
+      const anyNotForcedHidden = groupFields.some(
+        field => !field.isForcedHidden
+      );
+      if (!anyNotForcedHidden) return;
       return (
-        <Checkbox
-          key={path || i}
-          onChange={() => {
-            if (numVisible <= 1 && !isHidden) {
-              return window.toastr.warning(
-                "We have to display at least one column :)"
-              );
-            }
-            updateColumnVisibility({ shouldShow: isHidden, path });
-          }}
-          checked={!isHidden}
-          label={displayName}
-        />
+        <MenuItem key={groupName} text={groupName}>
+          <InputGroup
+            leftIcon="search"
+            value={searchTerm}
+            onChange={e => {
+              setSearchTerms(prev => ({
+                ...prev,
+                [groupName]: e.target.value
+              }));
+            }}
+          />
+          <Button
+            className={Classes.MINIMAL}
+            text={(anyVisible ? "Hide" : "Show") + " All"}
+            style={{ margin: "10px 0" }}
+            onClick={() => {
+              updateColumnVisibility({
+                shouldShow: !anyVisible,
+                paths: groupFields.map(field => field.path)
+              });
+            }}
+          />
+          {groupFields
+            .filter(
+              field =>
+                startCase(getCCDisplayName(field)) // We have to use startCase with the camelCase here because the displayName is not always a string
+                  .toLowerCase()
+                  .indexOf(searchTerm.toLowerCase()) > -1
+            )
+            .map(getFieldCheckbox)}
+        </MenuItem>
       );
-    };
-
-    let fieldGroupMenu;
-    if (!isEmpty(fieldGroups)) {
-      fieldGroupMenu = map(fieldGroups, (groupFields, groupName) => {
-        const searchTerm = searchTerms[groupName] || "";
-        const anyVisible = groupFields.some(
-          field => !field.isHidden && !field.isForcedHidden
-        );
-        const anyNotForcedHidden = groupFields.some(
-          field => !field.isForcedHidden
-        );
-        if (!anyNotForcedHidden) return;
-        return (
-          <MenuItem key={groupName} text={groupName}>
-            <InputGroup
-              leftIcon="search"
-              value={searchTerm}
-              onChange={e => {
-                this.setState({
-                  searchTerms: {
-                    ...searchTerms,
-                    [groupName]: e.target.value
-                  }
-                });
-              }}
-            />
-            <Button
-              className={Classes.MINIMAL}
-              text={(anyVisible ? "Hide" : "Show") + " All"}
-              style={{ margin: "10px 0" }}
-              onClick={() => {
-                updateColumnVisibility({
-                  shouldShow: !anyVisible,
-                  paths: groupFields.map(field => field.path)
-                });
-              }}
-            />
-            {groupFields
-              .filter(
-                field =>
-                  field.displayName
-                    .toLowerCase()
-                    .indexOf(searchTerm.toLowerCase()) > -1
-              )
-              .map(getFieldCheckbox)}
-          </MenuItem>
-        );
-      });
-    }
+    });
+  }
 
-    return (
-      <Popover
-        isOpen={isOpen}
-        onClose={this.closePopover}
-        content={
-          <Menu>
-            <div style={{ padding: 10, paddingLeft: 20, paddingRight: 20 }}>
-              <h5 style={{ marginBottom: 10 }}>Display Density:</h5>
-              <div className={Classes.SELECT + " tg-table-display-density"}>
-                <select
-                  onChange={this.changeTableDensity}
-                  value={
-                    extraCompact
-                      ? "extraCompact"
-                      : compact
-                        ? "compact"
-                        : "normal"
-                  }
-                >
-                  <option className={Classes.POPOVER_DISMISS} value="normal">
-                    Comfortable
-                  </option>
-                  {/* tnr: as you can see we're calling what was "compact" Normal now in response to https://github.com/TeselaGen/lims/issues/4713 */}
-                  <option className={Classes.POPOVER_DISMISS} value="compact">
-                    Normal
-                  </option>
-                  <option
-                    className={Classes.POPOVER_DISMISS}
-                    value="extraCompact"
-                  >
-                    Compact
-                  </option>
-                </select>
-              </div>
-              <h5 style={{ marginBottom: 10, marginTop: 10 }}>
-                Displayed Columns:
-              </h5>
-              <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
-                {mainFields.map(getFieldCheckbox)}
-              </div>
-              <div>{fieldGroupMenu}</div>
-              {hasOptionForForcedHidden && (
-                <div style={{ marginTop: 15 }}>
-                  <Switch
-                    label="Show Empty Columns"
-                    checked={showForcedHiddenColumns}
-                    onChange={this.toggleForcedHidden}
-                  />
-                </div>
-              )}
-              <div
-                style={{
-                  width: "100%",
-                  display: "flex",
-                  justifyContent: "flex-end"
-                }}
+  return (
+    <Popover
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      content={
+        <Menu>
+          <div style={{ padding: 10, paddingLeft: 20, paddingRight: 20 }}>
+            <h5 style={{ marginBottom: 10 }}>Display Density:</h5>
+            <div className={Classes.SELECT + " tg-table-display-density"}>
+              <select
+                onChange={changeTableDensity}
+                value={
+                  extraCompact ? "extraCompact" : compact ? "compact" : "normal"
+                }
               >
-                <Button
-                  onClick={resetDefaultVisibility}
-                  title="Display Options"
-                  minimal
+                <option className={Classes.POPOVER_DISMISS} value="normal">
+                  Comfortable
+                </option>
+                {/* tnr: as you can see we're calling what was "compact" Normal now in response to https://github.com/TeselaGen/lims/issues/4713 */}
+                <option className={Classes.POPOVER_DISMISS} value="compact">
+                  Normal
+                </option>
+                <option
+                  className={Classes.POPOVER_DISMISS}
+                  value="extraCompact"
                 >
-                  Reset
-                </Button>
+                  Compact
+                </option>
+              </select>
+            </div>
+            <h5 style={{ marginBottom: 10, marginTop: 10 }}>
+              Displayed Columns:
+            </h5>
+            <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
+              {mainFields.map(getFieldCheckbox)}
+            </div>
+            <div>{fieldGroupMenu}</div>
+            {hasOptionForForcedHidden && (
+              <div style={{ marginTop: 15 }}>
+                <Switch
+                  label="Show Empty Columns"
+                  checked={showForcedHiddenColumns}
+                  onChange={toggleForcedHidden}
+                />
               </div>
+            )}
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                justifyContent: "flex-end"
+              }}
+            >
+              <Button
+                onClick={resetDefaultVisibility}
+                title="Display Options"
+                minimal
+              >
+                Reset
+              </Button>
             </div>
-          </Menu>
-        }
-      >
-        <Button
-          className="tg-table-display-options"
-          onClick={this.openPopover}
-          disabled={disabled}
-          minimal
-          icon="cog"
-        />
-      </Popover>
-    );
-  }
-}
+          </div>
+        </Menu>
+      }
+    >
+      <Button
+        className="tg-table-display-options"
+        onClick={() => setIsOpen(true)}
+        disabled={disabled}
+        minimal
+        icon="cog"
+      />
+    </Popover>
+  );
+};
+
+export default DisplayOptions;

package/src/DataTable/EditabelCell.js

@@ -1,30 +1,20 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 
 export const EditableCell = ({
+  value,
+  setValue,
   cancelEdit,
   dataTest,
   finishEdit,
-  initialValue,
-  isEditableCellInitialValue,
-  isNumeric,
-  shouldSelectAll,
-  stopSelectAll
+  isNumeric
 }) => {
-  const [value, setValue] = useState(initialValue);
   const inputRef = useRef(null);
 
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.focus();
-      if (isEditableCellInitialValue && !isNumeric) {
-        inputRef.current.selectionStart = inputRef.current.value.length;
-        inputRef.current.selectionEnd = inputRef.current.value.length;
-      } else if (shouldSelectAll) {
-        inputRef.current.select();
-        stopSelectAll();
-      }
     }
-  }, [isEditableCellInitialValue, isNumeric, shouldSelectAll, stopSelectAll]);
+  }, [isNumeric]);
 
   return (
     <input
@@ -38,11 +28,10 @@ export const EditableCell = ({
       {...dataTest}
       autoFocus
       onKeyDown={e => {
+        e.stopPropagation();
         if (e.key === "Enter") {
-          finishEdit(value);
-          e.stopPropagation();
+          e.target.blur();
         } else if (e.key === "Escape") {
-          e.stopPropagation();
           cancelEdit();
         }
       }}

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/EditableCell.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}
+    />
+  );
+};