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

package/DisabledLoadingComponent.js

@@ -1,15 +0,0 @@
-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/DisplayOptions.js

@@ -1,199 +0,0 @@
-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/DropdownButton.js

@@ -1,36 +0,0 @@
-/* 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/DropdownCell.js

@@ -1,61 +0,0 @@
-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/EditableCell.js

@@ -1,44 +0,0 @@
-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/FillWindow.css

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

package/FillWindow.js

@@ -1,69 +0,0 @@
-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;
-  }
-}