@teselagen/ui 0.4.9 → 0.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -38,7 +38,6 @@
     "mock-fs": "5.2.0",
     "nanoid": "^4.0.0",
     "papaparse": "^5.3.2",
-    "prop-types": "^15.6.2",
     "qs": "^6.9.6",
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",

package/src/CollapsibleCard/index.js

@@ -1,92 +1,68 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import { Button, Classes, Icon } from "@blueprintjs/core";
 import classNames from "classnames";
 import "./style.css";
 
-export default class CollapsibleCard extends Component {
-  state = {
-    open: true
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: !props.initialClosed
-    };
-  }
+export default function CollapsibleCard({
+  title,
+  icon,
+  openTitleElements,
+  noCard = false,
+  className,
+  style,
+  children,
+  initialClosed = false,
+  toggle,
+  isOpen
+}) {
+  let [open, setOpen] = useState(!initialClosed);
+  if (isOpen !== undefined) open = isOpen;
 
-  renderOpenCard() {
-    return this.props.children;
-  }
-
-  toggleCardInfo = () => {
-    if (this.props.toggle) this.props.toggle();
+  const toggleCardInfo = () => {
+    if (toggle) toggle();
     else {
-      this.setState({
-        open: !this.state.open
-      });
-    }
-  };
-
-  getIsOpen = () => {
-    if (this.props.isOpen !== undefined) {
-      return this.props.isOpen;
-    } else {
-      return this.state.open;
+      setOpen(!open);
     }
   };
 
-  render() {
-    const open = this.getIsOpen();
-    const {
-      title,
-      icon,
-      openTitleElements,
-      noCard = false,
-      className,
-      style
-    } = this.props;
-
-    // blueprintjs card will match our table color. which looks really bad when a table is in a card.
-    return (
-      <div
-        className={classNames({ "tg-card": !noCard, open }, className)}
-        style={{
-          paddingTop: 10,
-          paddingBottom: 10,
-          paddingLeft: 15,
-          paddingRight: 15,
-          ...style
-        }}
-      >
-        <div className="tg-card-header" style={{ marginBottom: 8 }}>
-          <div className="tg-card-header-title">
-            {icon && <Icon icon={icon} />}
-            <h6
-              style={{
-                marginBottom: 0,
-                marginRight: 10,
-                marginLeft: 10
-              }}
-            >
-              {title}
-            </h6>
-            <div>{open && openTitleElements}</div>
-          </div>
-          <div>
-            <Button
-              icon={open ? "minimize" : "maximize"}
-              className={classNames(
-                Classes.MINIMAL,
-                "info-btn",
-                "tg-collapse-toggle"
-              )}
-              onClick={this.toggleCardInfo}
-            />
-          </div>
+  return (
+    <div
+      className={classNames({ "tg-card": !noCard, open }, className)}
+      style={{
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 15,
+        paddingRight: 15,
+        ...style
+      }}
+    >
+      <div className="tg-card-header" style={{ marginBottom: 8 }}>
+        <div className="tg-card-header-title">
+          {icon && <Icon icon={icon} />}
+          <h6
+            style={{
+              marginBottom: 0,
+              marginRight: 10,
+              marginLeft: 10
+            }}
+          >
+            {title}
+          </h6>
+          <div>{open && openTitleElements}</div>
+        </div>
+        <div>
+          <Button
+            icon={open ? "minimize" : "maximize"}
+            className={classNames(
+              Classes.MINIMAL,
+              "info-btn",
+              "tg-collapse-toggle"
+            )}
+            onClick={toggleCardInfo}
+          />
         </div>
-        {open && this.renderOpenCard()}
       </div>
-    );
-  }
+      {open && children}
+    </div>
+  );
 }

package/src/InfoHelper/index.js

@@ -1,83 +1,78 @@
-import React, { Component } from "react";
+import React from "react";
 import { Popover, Button, Tooltip, Icon } from "@blueprintjs/core";
 import classnames from "classnames";
 import "./style.css";
 import { popoverOverflowModifiers } from "..";
 
-export default class InfoHelper extends Component {
-  render() {
-    const {
-      className,
-      content,
-      children,
-      icon = "info-sign",
-      isPopover,
-      isButton,
-      size,
-      isInline,
-      clickable,
-      color,
-      noMarginTop,
-      popoverProps = {},
-      disabled,
-      displayToSide,
-      style,
-      ...rest
-    } = this.props;
-    const IconToUse = isButton ? Button : Icon;
-    const iconProps = {
-      icon,
-      color,
-      disabled
-    };
-    if (!isButton) iconProps.iconSize = size;
+export default ({
+  className,
+  content,
+  children,
+  icon = "info-sign",
+  isPopover,
+  isButton,
+  size,
+  isInline,
+  clickable,
+  color,
+  noMarginTop,
+  popoverProps = {},
+  disabled,
+  displayToSide,
+  style,
+  ...rest
+}) => {
+  const IconToUse = isButton ? Button : Icon;
+  const iconProps = {
+    icon,
+    color,
+    disabled
+  };
+  if (!isButton) iconProps.iconSize = size;
 
-    const IconInner = <IconToUse {...iconProps} {...rest} />;
-    let toReturn;
-    const toolTipOrPopoverProps = {
-      disabled:
-        disabled ||
-        (!isPopover &&
-          window.Cypress &&
-          !window.Cypress.allowInfoHelperTooltips),
-      popoverClassName: "tg-info-helper-popover bp3-tooltip",
-      content: content || children,
-      modifiers: popoverOverflowModifiers,
-      ...popoverProps
-    };
-    if (displayToSide) {
-      toReturn = (
-        <React.Fragment>
-          {IconInner}
-          <span style={{ paddingLeft: 5, fontStyle: "italic" }}>
-            {content || children}
-          </span>
-        </React.Fragment>
-      );
-    } else if (isPopover) {
-      toReturn = <Popover {...toolTipOrPopoverProps} target={IconInner} />;
-    } else {
-      toReturn = <Tooltip {...toolTipOrPopoverProps} target={IconInner} />;
-    }
-    const El = isInline ? "span" : "div";
-    return (
-      <El
-        style={{
-          ...(clickable ? { cursor: "pointer" } : {}),
-          ...(isInline ? {} : { display: "flex" }),
-          ...style
-        }}
-        className={classnames(
-          "info-helper-wrapper",
-          {
-            "info-helper-wrapper-noMarginTop": noMarginTop,
-            "info-helper-clickable": isPopover
-          },
-          className
-        )}
-      >
-        {toReturn}
-      </El>
+  const IconInner = <IconToUse {...iconProps} {...rest} />;
+  let toReturn;
+  const toolTipOrPopoverProps = {
+    disabled:
+      disabled ||
+      (!isPopover && window.Cypress && !window.Cypress.allowInfoHelperTooltips),
+    popoverClassName: "tg-info-helper-popover bp3-tooltip",
+    content: content || children,
+    modifiers: popoverOverflowModifiers,
+    ...popoverProps
+  };
+  if (displayToSide) {
+    toReturn = (
+      <React.Fragment>
+        {IconInner}
+        <span style={{ paddingLeft: 5, fontStyle: "italic" }}>
+          {content || children}
+        </span>
+      </React.Fragment>
     );
+  } else if (isPopover) {
+    toReturn = <Popover {...toolTipOrPopoverProps} target={IconInner} />;
+  } else {
+    toReturn = <Tooltip {...toolTipOrPopoverProps} target={IconInner} />;
   }
-}
+  const El = isInline ? "span" : "div";
+  return (
+    <El
+      style={{
+        ...(clickable ? { cursor: "pointer" } : {}),
+        ...(isInline ? {} : { display: "flex" }),
+        ...style
+      }}
+      className={classnames(
+        "info-helper-wrapper",
+        {
+          "info-helper-wrapper-noMarginTop": noMarginTop,
+          "info-helper-clickable": isPopover
+        },
+        className
+      )}
+    >
+      {toReturn}
+    </El>
+  );
+};

package/src/Loading/index.js

@@ -1,74 +1,70 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import DNALoader from "../DNALoader";
 import "./style.css";
 import { BounceLoader } from "@teselagen/bounce-loader";
 
-export default class Loading extends React.Component {
-  state = {
-    longerThan200MS: false
-  };
+const Loading = ({
+  loading,
+  style: userStyle,
+  className,
+  containerStyle = {},
+  children,
+  displayInstantly = false,
+  bounce = false,
+  withTimeout,
+  inDialog,
+  centeredInPage
+}) => {
+  const [longerThan200MS, setLongerThan200MS] = useState(false);
 
-  componentDidMount() {
-    this.timeoutId = setTimeout(() => {
-      this.setState({
-        longerThan200MS: true
-      });
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setLongerThan200MS(true);
     }, 200);
-  }
 
-  componentWillUnmount() {
-    clearTimeout(this.timeoutId);
-  }
-
-  render() {
-    const {
-      loading,
-      style: userStyle,
-      className,
-      containerStyle = {},
-      children,
-      displayInstantly = false,
-      bounce = false,
-      withTimeout,
-      inDialog,
-      centeredInPage
-    } = this.props;
-    const { longerThan200MS } = this.state;
-    const style = {
-      ...userStyle,
-      ...(inDialog && { minHeight: 120 })
+    return () => {
+      clearTimeout(timeoutId);
     };
-    const LoaderComp = bounce || inDialog ? BounceLoader : DNALoader;
-    if (loading || !children) {
-      if (
-        !displayInstantly &&
-        !longerThan200MS &&
-        ((!bounce && !inDialog) || withTimeout)
-      ) {
-        return <div />;
-      }
-      return (
-        <div
-          className="tg-loader-container tg-flex justify-center align-center"
-          style={{
-            width: "100%",
-            ...containerStyle,
-            ...(centeredInPage && {
-              width: undefined,
-              zIndex: 20,
-              height: 10,
-              position: "fixed",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, 0)"
-            })
-          }}
-        >
-          <LoaderComp style={style} className={className} />
-        </div>
-      );
-    } else {
-      return children || null;
+  }, []);
+
+  const style = {
+    ...userStyle,
+    ...(inDialog && { minHeight: 120 })
+  };
+
+  const LoaderComp = bounce || inDialog ? BounceLoader : DNALoader;
+
+  if (loading || !children) {
+    if (
+      !displayInstantly &&
+      !longerThan200MS &&
+      ((!bounce && !inDialog) || withTimeout)
+    ) {
+      return <div />;
     }
+    return (
+      <div
+        className="tg-loader-container tg-flex justify-center align-center"
+        style={{
+          width: "100%",
+          ...containerStyle,
+          ...(centeredInPage && {
+            width: undefined,
+            zIndex: 20,
+            height: 10,
+            position: "fixed",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, 0)"
+          })
+        }}
+      >
+        <LoaderComp style={style} className={className} />
+      </div>
+    );
+  } else {
+    return children || null;
   }
-}
+};
+
+export default Loading;

package/src/Timeline/index.js

@@ -1,20 +1,13 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
+import React from "react";
 import "./style.css";
 
-class Timeline extends Component {
-  static propTypes = {
-    children: PropTypes.arrayOf(PropTypes.element)
-  };
-
-  render() {
-    return (
-      <div className="tg-timeline">
-        {this.props.children.length > 1 && <div className="tg-timeline-line" />}
-        {this.props.children}
-      </div>
-    );
-  }
+function Timeline(props) {
+  return (
+    <div className="tg-timeline">
+      {props.children.length > 1 && <div className="tg-timeline-line" />}
+      {props.children}
+    </div>
+  );
 }
 
 export { default as TimelineEvent } from "./TimelineEvent";