@teselagen/ui 0.0.11 → 0.0.13

package/src/DataTable/viewColumn.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { Icon, Button, Tooltip } from "@blueprintjs/core";
+
+export const viewColumn = {
+  width: 35,
+  noEllipsis: true,
+  hideInMenu: true,
+  immovable: true,
+  type: "action",
+  render: () => {
+    return <Icon className="dt-eyeIcon" icon="eye-open" />;
+  }
+};
+export const openColumn = {
+  ...viewColumn,
+  render: (val, record, rowInfo, props) => {
+    return (
+      <Tooltip content="Open">
+        <Button
+          onClick={e => {
+            e.stopPropagation();
+            props.onDoubleClick &&
+              props.onDoubleClick(
+                rowInfo.original,
+                rowInfo.index,
+                props.history
+              );
+          }}
+          minimal
+          small
+          className="dt-eyeIcon"
+          icon="document-open"
+        />
+      </Tooltip>
+    );
+  }
+};

package/src/DialogFooter/index.js

@@ -0,0 +1,79 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+
+import React, { useRef } from "react";
+import { Intent, Button, Classes } from "@blueprintjs/core";
+import { noop } from "lodash";
+import classNames from "classnames";
+
+function DialogFooter({
+  hideModal,
+  loading,
+  submitting,
+  onBackClick,
+  style,
+  onClick = noop,
+  secondaryAction,
+  intent = Intent.PRIMARY,
+  secondaryIntent,
+  backText = "Back",
+  secondaryText = "Cancel",
+  additionalButtons,
+  className,
+  secondaryClassName = "",
+  text = "Submit",
+  disabled,
+  containerClassname,
+  noCancel
+}) {
+  const r = useRef();
+  return (
+    <div
+      style={style}
+      ref={r}
+      className={classNames(Classes.DIALOG_FOOTER, containerClassname)}
+    >
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        {onBackClick && (
+          <Button
+            className={Classes.MINIMAL + " " + secondaryClassName}
+            text={backText}
+            onClick={onBackClick}
+          />
+        )}
+        {!noCancel && (
+          <Button
+            intent={secondaryIntent}
+            className={Classes.MINIMAL + " " + secondaryClassName}
+            text={secondaryText}
+            onClick={
+              secondaryAction ||
+              hideModal ||
+              function() {
+                try {
+                  r.current
+                    .closest(".bp3-dialog")
+                    .querySelector(".bp3-dialog-close-button")
+                    .click();
+                } catch (error) {
+                  console.error(`error closing dialog:`, error);
+                }
+              }
+            }
+          />
+        )}
+        {additionalButtons}
+        <Button
+          text={text}
+          intent={intent}
+          type="submit"
+          className={className}
+          onClick={onClick}
+          disabled={disabled}
+          loading={loading || submitting}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DialogFooter;

package/src/DialogFooter/style.css

@@ -0,0 +1,9 @@
+.tg-dialog-footer-error {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 5;
+}
+
+.tg-dialog-footer-error .bp3-form-group {
+  margin-bottom: 0;
+}

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/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 { isFunction } from "lodash";
+import reactDom from "react-dom";
+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 reactDom.createPortal(inner, window.document.body);
+    return inner;
+  }
+}