@teselagen/ui 0.7.33-beta.1 → 0.7.33-beta.2

package/src/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/DisplayOptions.js

@@ -0,0 +1,199 @@
+import React, { useState } from "react";
+import { map, isEmpty, noop, startCase } from "lodash-es";
+import {
+  Button,
+  Checkbox,
+  Menu,
+  MenuItem,
+  Classes,
+  InputGroup,
+  Popover,
+  Switch
+} from "@blueprintjs/core";
+import { getCCDisplayName } from "./utils/queryParams";
+
+const DisplayOptions = ({
+  compact,
+  extraCompact,
+  disabled,
+  hideDisplayOptionsIcon,
+  resetDefaultVisibility = noop,
+  updateColumnVisibility = noop,
+  updateTableDisplayDensity,
+  showForcedHiddenColumns,
+  setShowForcedHidden,
+  hasOptionForForcedHidden,
+  schema
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerms, setSearchTerms] = useState({});
+
+  const changeTableDensity = e => {
+    updateTableDisplayDensity(e.target.value);
+    setIsOpen(false);
+  };
+
+  const toggleForcedHidden = e => setShowForcedHidden(e.target.checked);
+
+  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
+        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}
+      />
+    );
+  };
+
+  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 => {
+              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>
+      );
+    });
+  }
+
+  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"
+                }
+              >
+                <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={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={() => setIsOpen(true)}
+        disabled={disabled}
+        minimal
+        icon="cog"
+      />
+    </Popover>
+  );
+};
+
+export default DisplayOptions;

package/src/DropdownButton.js

@@ -0,0 +1,36 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React from "react";
+import { Button, Popover, Position } from "@blueprintjs/core";
+import classnames from "classnames";
+import popoverOverflowModifiers from "./utils/popoverOverflowModifiers";
+
+function DropdownButton({
+  disabled,
+  menu,
+  noRightIcon,
+  popoverProps,
+  className,
+  ...rest
+}) {
+  return (
+    <Popover
+      minimal
+      modifiers={popoverOverflowModifiers}
+      disabled={disabled}
+      autoFocus={false}
+      content={menu}
+      position={Position.BOTTOM_LEFT}
+      {...popoverProps}
+    >
+      <Button
+        disabled={disabled}
+        className={classnames(className, "dropdown-button")}
+        rightIcon={noRightIcon ? undefined : "caret-down"}
+        {...rest}
+      />
+    </Popover>
+  );
+}
+
+export default DropdownButton;

package/src/DropdownCell.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import TgSelect from "../TgSelect";
+
+export const DropdownCell = ({
+  options,
+  isMulti,
+  initialValue,
+  finishEdit,
+  cancelEdit,
+  dataTest
+}) => {
+  const [v, setV] = useState(
+    isMulti
+      ? initialValue.split(",").map(v => ({ value: v, label: v }))
+      : initialValue
+  );
+  return (
+    <div
+      className={classNames("tg-dropdown-cell-edit-container", {
+        "tg-dropdown-cell-edit-container-multi": isMulti
+      })}
+    >
+      <TgSelect
+        small
+        multi={isMulti}
+        autoOpen
+        value={v}
+        onChange={val => {
+          if (isMulti) {
+            setV(val);
+            return;
+          }
+          finishEdit(val ? val.value : null);
+        }}
+        {...dataTest}
+        popoverProps={{
+          onClose: e => {
+            if (isMulti) {
+              if (e && e.key === "Escape") {
+                cancelEdit();
+              } else {
+                finishEdit(
+                  v && v.map
+                    ? v
+                        .map(v => v.value)
+                        .filter(v => v)
+                        .join(",")
+                    : v
+                );
+              }
+            } else {
+              cancelEdit();
+            }
+          }
+        }}
+        options={options.map(value => ({ label: value, value }))}
+      />
+    </div>
+  );
+};

package/src/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}
+    />
+  );
+};

package/src/FillWindow.css

@@ -0,0 +1,6 @@
+.tg-fillWindow {
+  background: white;
+}
+.bp3-dark .tg-fillWindow {
+  background: #293742;
+}

package/src/FillWindow.js

@@ -0,0 +1,69 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { isFunction } from "lodash-es";
+import rerenderOnWindowResize from "./rerenderOnWindowResize";
+import "./FillWindow.css";
+
+// use like:
+// <FillWindow>
+//         {({ width, height }) => {
+//           return <div style={{width, height}}></div>
+//         }
+// <FillWindow/>
+
+export default class FillWindow extends React.Component {
+  constructor(props) {
+    super(props);
+    rerenderOnWindowResize(this);
+  }
+  // this is left here for posterity. componentDidMount didn't work before commit ee1853a5ae2e6e27b720dd225650cc2154076db5 "fixing rerenderOnWindowResize to bind this keyword correctly"
+  // componentDidMount(){
+  //   this.setState({thomas: "realCool"})
+  // }
+
+  render() {
+    const w = window,
+      d = document,
+      e = d.documentElement,
+      g = d.getElementsByTagName("body")[0],
+      width = w.innerWidth || e.clientWidth || g.clientWidth,
+      height = w.innerHeight || e.clientHeight || g.clientHeight;
+    const windowDimensions = {
+      width,
+      height
+    };
+    const {
+      containerStyle = {},
+      style,
+      styleOverrides,
+      className,
+      asPortal,
+      ...rest
+    } = this.props;
+    if (this.props.disabled) return this.props.children(windowDimensions);
+    const inner = (
+      <div
+        className={
+          "tg-fillWindow " + (asPortal ? "bp3-portal " : "") + (className || "")
+        }
+        style={{
+          ...style,
+          width,
+          height,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          ...containerStyle,
+          ...styleOverrides
+        }}
+        {...rest}
+      >
+        {this.props.children && isFunction(this.props.children)
+          ? this.props.children(windowDimensions)
+          : this.props.children}
+      </div>
+    );
+    if (asPortal) return createPortal(inner, window.document.body);
+    return inner;
+  }
+}