@teselagen/ui 0.0.9 → 0.0.12

package/src/DataTable/CellDragHandle.js

@@ -0,0 +1,130 @@
+import { flatMap } from "lodash";
+import { forEach } from "lodash";
+import React, { useRef } from "react";
+import ReactDOM from "react-dom";
+
+export function CellDragHandle({
+  thisTable,
+  onDragEnd,
+  cellId,
+  isSelectionARectangle
+}) {
+  const xStart = useRef(0);
+  const timeoutkey = useRef();
+  const rowsToSelect = useRef();
+  const rectangleCellPaths = useRef();
+
+  const handleDrag = useRef(e => {
+    const table = ReactDOM.findDOMNode(thisTable).querySelector(".rt-table");
+    const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
+    const [rowId, path] = cellId.split(":");
+    const selectedTr = table.querySelector(
+      `.rt-tr-group.with-row-data[data-test-id="${rowId}"]`
+    );
+    const selectedIndex = selectedTr.dataset.index;
+
+    if (selectedTr && trs.length) {
+      const selectedY = selectedTr.getBoundingClientRect().y;
+      const cursorY = e.clientY;
+      clearTimeout(timeoutkey.current);
+      // eslint-disable-next-line no-inner-declarations
+      function updateScrollIfNecessary() {
+        const { y, height } = table.getBoundingClientRect();
+        if (cursorY < y) {
+          table.scrollBy(0, -5);
+        } else if (cursorY > y + height) {
+          table.scrollBy(0, 5);
+        }
+      }
+      updateScrollIfNecessary();
+      timeoutkey.current = setInterval(() => {
+        updateScrollIfNecessary();
+      }, 10);
+
+      const isCursorBelow = cursorY > selectedY;
+      rowsToSelect.current = [];
+      forEach(trs, (tr, index) => {
+        let isSelectedForUpdate;
+        const rowId = tr.dataset.testId;
+        const changeDashedBorder = (path, on) => {
+          tr.querySelector(`[data-test="tgCell_${path}"]`).parentNode.classList[
+            on ? "add" : "remove"
+          ]("selectedForUpdate");
+        };
+        if (isCursorBelow ? index > selectedIndex : index < selectedIndex) {
+          const { y, height } = tr.getBoundingClientRect();
+          if (isCursorBelow ? y < cursorY : y + height > cursorY) {
+            rowsToSelect.current.push(rowId);
+            isSelectedForUpdate = true;
+            //add dashed borders
+
+            if (rectangleCellPaths.current) {
+              rectangleCellPaths.current.forEach(path => {
+                changeDashedBorder(path, true);
+              });
+            } else {
+              changeDashedBorder(path, true);
+            }
+          }
+        }
+        if (!isSelectedForUpdate) {
+          if (rectangleCellPaths.current) {
+            rectangleCellPaths.current.forEach(path => {
+              changeDashedBorder(path, false);
+            });
+          } else {
+            changeDashedBorder(path, false);
+          }
+        }
+      });
+    }
+  });
+
+  const mouseup = useRef(() => {
+    clearTimeout(timeoutkey.current);
+    const table = ReactDOM.findDOMNode(thisTable);
+    const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
+    const [, path] = cellId.split(":");
+    //remove the dashed borders
+    forEach(trs, tr => {
+      if (rectangleCellPaths.current) {
+        rectangleCellPaths.current.forEach(path => {
+          const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
+          el.parentNode.classList.remove("selectedForUpdate");
+        });
+      } else {
+        const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
+        el.parentNode.classList.remove("selectedForUpdate");
+      }
+    });
+    document.removeEventListener("mousemove", handleDrag.current, false);
+    document.removeEventListener("mouseup", mouseup.current, false);
+    onDragEnd(
+      flatMap(rowsToSelect.current, id => {
+        if (rectangleCellPaths.current) {
+          return rectangleCellPaths.current.map(path => {
+            return `${id}:${path}`;
+          });
+        } else {
+          return `${id}:${path}`;
+        }
+      })
+    );
+  });
+
+  return (
+    <div
+      onMouseDown={e => {
+        rowsToSelect.current = [];
+        xStart.current = e.clientX;
+        const { isRect, selectedPaths } = isSelectionARectangle();
+        if (isRect) {
+          rectangleCellPaths.current = selectedPaths;
+        }
+        document.addEventListener("mousemove", handleDrag.current, false);
+        document.addEventListener("mouseup", mouseup.current, false);
+      }}
+      className="cellDragHandle"
+    ></div>
+  );
+}

package/src/DataTable/DisabledLoadingComponent.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { ReactTableDefaults } from "@teselagen/react-table";
+const { LoadingComponent } = ReactTableDefaults;
+
+function DisabledLoadingComponent({ disabled, loading, loadingText }) {
+  return (
+    <LoadingComponent
+      className={disabled ? "disabled" : ""}
+      loading={loading}
+      loadingText={disabled ? "" : loadingText}
+    />
+  );
+}
+
+export default DisabledLoadingComponent;

package/src/DataTable/DisplayOptions.js

@@ -0,0 +1,218 @@
+import React from "react";
+import { map, isEmpty, noop } from "lodash";
+import {
+  Button,
+  Checkbox,
+  Menu,
+  MenuItem,
+  Classes,
+  InputGroup,
+  Popover,
+  Switch
+} from "@blueprintjs/core";
+
+export default class DisplayOptions extends React.Component {
+  state = {
+    isOpen: false,
+    searchTerms: {}
+  };
+
+  openPopover = () => {
+    this.setState({
+      isOpen: true
+    });
+  };
+
+  closePopover = () => {
+    this.setState({
+      isOpen: false
+    });
+  };
+
+  changeTableDensity = e => {
+    const { updateTableDisplayDensity = noop } = this.props;
+    updateTableDisplayDensity(e.target.value);
+    this.closePopover();
+  };
+
+  toggleForcedHidden = e => this.props.setShowForcedHidden(e.target.checked);
+
+  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);
+    });
+
+    let numVisible = 0;
+
+    const getFieldCheckbox = (field, i) => {
+      const { displayName, isHidden, isForcedHidden, path } = field;
+      if (isForcedHidden) return;
+      if (!isHidden) numVisible++;
+      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}
+        />
+      );
+    };
+
+    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"
+                }}
+              >
+                <Button
+                  onClick={resetDefaultVisibility}
+                  title="Display Options"
+                  minimal
+                >
+                  Reset
+                </Button>
+              </div>
+            </div>
+          </Menu>
+        }
+      >
+        <Button
+          className="tg-table-display-options"
+          onClick={this.openPopover}
+          disabled={disabled}
+          minimal
+          icon="cog"
+        />
+      </Popover>
+    );
+  }
+}