@teselagen/ui 0.7.33-beta.6 → 0.7.33

package/index.js

@@ -0,0 +1,196 @@
+import React from "react";
+import { Dialog } from "@blueprintjs/core";
+import { connect } from "react-redux";
+import { lifecycle, compose } from "recompose";
+import { camelCase } from "lodash-es";
+import { nanoid } from "nanoid";
+import ResizableDraggableDialog from "../../ResizableDraggableDialog";
+
+/**
+ * usage:
+ * in container:
+ * compose(
+ *   withDialog({ title: "Select Aliquot(s) From", other bp dialog props here  })
+ * )
+ *
+ *
+ * in react component
+ * import MyDialogEnhancedComponent from "./MyDialogEnhancedComponent"
+ *
+ * render() {
+ *  return <div>
+ *    <MyDialogEnhancedComponent
+ *      dialogProps={} //bp dialog overrides can go here
+ *      target={<button>Open Dialog</button> } //target can also be passed as a child component
+ *      myRandomProp={'yuppp'} //pass any other props like normal to the component
+ *
+ *    />
+ *  </div>
+ * }
+ */
+
+//  or programatically:
+// const ProgramaticDialog = withDialog({
+//   dialogName: "programaticDialog", //giving it a unique dialogName means you can
+//   title: "Programatic Dialog Demo"
+// })(DialogInner);
+//
+// add the no target dialog somewhere on the page
+// <ProgramaticDialog></ProgramaticDialog> //this just renders without any target
+//
+// somewhere else on the page:
+// <Button>Click To Open Dialog</Button>
+
+export default function withDialog(topLevelDialogProps) {
+  function dialogHoc(WrappedComponent) {
+    return class DialogWrapper extends React.Component {
+      componentWillUnmount() {
+        const { dispatch, dialogName, uniqueName } = this.props;
+        if (dialogName) {
+          dispatch({
+            type: "TG_UNREGISTER_MODAL",
+            name: dialogName,
+            uniqueName
+          });
+        }
+      }
+      render() {
+        const {
+          target,
+          noTarget,
+          isDialogOpen,
+          showModal,
+          dialogName,
+          onClickRename,
+          hideModal,
+          fetchPolicy = "network-only",
+          children,
+          onCloseHook,
+          dialogProps,
+          title,
+          isDraggable,
+          alreadyRendering,
+          ...rest
+        } = this.props;
+        const extraDialogProps = {
+          ...topLevelDialogProps,
+          ...dialogProps
+        };
+        const _onCloseHook = onCloseHook || extraDialogProps.onCloseHook;
+        const { noButtonClickPropagate } = {
+          ...this.props,
+          ...extraDialogProps
+        };
+        const isOpen = isDialogOpen || extraDialogProps.isOpen;
+        const targetEl = target || children;
+        // if (!targetEl && !dialogName)
+        //   throw new Error(
+        //     "withDialog error: Please provide a target or child element to the withDialog() enhanced component. If you really don't want a target, please pass a 'noTarget=true' prop"
+        //   );
+        const DialogToUse =
+          isDraggable || extraDialogProps.isDraggable
+            ? ResizableDraggableDialog
+            : Dialog;
+        return (
+          <React.Fragment>
+            {isOpen && (
+              <DialogToUse
+                onClose={function () {
+                  hideModal();
+                  _onCloseHook && _onCloseHook();
+                }}
+                className={dialogName || camelCase()}
+                title={title}
+                isOpen={isOpen}
+                canEscapeKeyClose={false}
+                canOutsideClickClose={false}
+                {...extraDialogProps}
+              >
+                <WrappedComponent
+                  {...{
+                    ...rest,
+                    fetchPolicy,
+                    ssr: false,
+                    hideModal
+                  }}
+                />
+              </DialogToUse>
+            )}
+            {targetEl &&
+              React.cloneElement(targetEl, {
+                [onClickRename || "onClick"]: e => {
+                  showModal();
+                  if (noButtonClickPropagate) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }
+                }
+              })}
+          </React.Fragment>
+        );
+      }
+    };
+  }
+
+  return compose(
+    connect(({ tg_modalState }) => {
+      return { ...topLevelDialogProps, tg_modalState };
+    }),
+    lifecycle({
+      componentWillMount: function () {
+        const { dispatch, dialogName } = this.props;
+        const uniqueName = nanoid();
+        const nameToUse = dialogName || uniqueName;
+        this.setState({
+          nameToUse,
+          uniqueName
+        });
+        if (dialogName) {
+          dispatch({
+            type: "TG_REGISTER_MODAL",
+            name: dialogName,
+            uniqueName
+          });
+        }
+      }
+    }),
+    connect(
+      function ({ tg_modalState }, { nameToUse, uniqueName }) {
+        const dialogState = tg_modalState[nameToUse] || {};
+        const { open, __registeredAs, ...rest } = dialogState;
+        const newProps = {
+          ...rest,
+          isDialogOpen:
+            open &&
+            (__registeredAs
+              ? Object.keys(__registeredAs)[
+                  Object.keys(__registeredAs).length - 1
+                ] === uniqueName
+              : true)
+        };
+        return newProps;
+      },
+      function (dispatch, { nameToUse, hideModal, showModal }) {
+        return {
+          showModal:
+            showModal ||
+            function () {
+              dispatch({
+                type: "TG_SHOW_MODAL",
+                name: nameToUse
+              });
+            },
+          hideModal:
+            hideModal ||
+            function () {
+              dispatch({
+                type: "TG_HIDE_MODAL",
+                name: nameToUse
+              });
+            }
+        };
+      }
+    ),
+    dialogHoc
+  );
+}

package/isBeingCalledExcessively.js

@@ -0,0 +1,31 @@
+const keyCount = {};
+// if this function is hit more than 20 times in a row in 2 seconds with the same uniqName then throw an error
+export const isBeingCalledExcessively = ({ uniqName }) => {
+  if (process.env.NODE_ENV !== "development") {
+    return;
+  }
+  if (!uniqName) {
+    throw new Error("uniqName is required");
+  }
+  // Initialize the count if it doesn't exist
+  keyCount[uniqName] = keyCount[uniqName] || 0;
+  keyCount[uniqName]++;
+
+  // Only set the timeout if it doesn't exist already to ensure it runs exactly once every 2 seconds
+  if (!keyCount[uniqName + "_timeout"]) {
+    keyCount[uniqName + "_timeout"] = setTimeout(() => {
+      keyCount[uniqName] = 0;
+      keyCount[uniqName + "_timeout"] = null;
+    }, 2000);
+  }
+
+  if (keyCount[uniqName] > 20) {
+    keyCount[uniqName] = 0;
+    // Also clear the timeout when throwing an error
+    if (keyCount[uniqName + "_timeout"]) {
+      clearTimeout(keyCount[uniqName + "_timeout"]);
+      keyCount[uniqName + "_timeout"] = null;
+    }
+    throw new Error(`isBeingCalledExcessively: ${uniqName}`);
+  }
+};

package/isBottomRightCornerOfRectangle.js

@@ -0,0 +1,20 @@
+export const isBottomRightCornerOfRectangle = ({
+  cellId,
+  selectionGrid,
+  lastRowIndex,
+  lastCellIndex,
+  entityMap,
+  pathToIndex
+}) => {
+  selectionGrid.forEach(row => {
+    // remove undefineds from start of row
+    while (row[0] === undefined && row.length) row.shift();
+  });
+  const [rowId, cellPath] = cellId.split(":");
+  const ent = entityMap[rowId];
+  if (!ent) return;
+  const { i } = ent;
+  const cellIndex = pathToIndex[cellPath];
+  const isBottomRight = i === lastRowIndex && cellIndex === lastCellIndex;
+  return isBottomRight;
+};

package/isEntityClean.js

@@ -0,0 +1,15 @@
+export function isEntityClean(e) {
+  if (typeof e !== "object" || e === null) {
+    return true; // or return false depending on what you want for non-object inputs
+  }
+  let isClean = true;
+  for (const [key, val] of Object.entries(e)) {
+    if (key === "id") continue;
+    if (key === "_isClean") continue;
+    if (val) {
+      isClean = false;
+      break;
+    }
+  }
+  return isClean;
+}

package/isTruthy.js

@@ -0,0 +1,12 @@
+export function isTruthy(v) {
+  if (!v) return false;
+  if (typeof v === "string") {
+    if (v.toLowerCase() === "false") {
+      return false;
+    }
+    if (v.toLowerCase() === "no") {
+      return false;
+    }
+  }
+  return true;
+}

package/isValueEmpty.js

@@ -0,0 +1,3 @@
+export function isValueEmpty(val) {
+  return val === undefined || val === null || val === "";
+}

package/itemUpload.js

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  ProgressBar,
+  Intent,
+  Button,
+  Tooltip,
+  Position,
+  Icon
+} from "@blueprintjs/core";
+
+const itemUpload = props => {
+  const item = props.item;
+  const name = nameShortener(item.name);
+
+  return (
+    <div className="item-upload-container" key={item.id}>
+      <div className="item-upload">
+        <div>
+          {!props.saved ? (
+            <Tooltip
+              content={
+                <span>
+                  {`Click to
+              ${props.active ? "abort this uploading" : "remove this file"}`}
+                </span>
+              }
+              position={Position.LEFT}
+              usePortal={true}
+            >
+              <Button
+                intent={Intent.DANGER}
+                minimal
+                icon="delete"
+                onClick={props.onCancel}
+              />
+            </Tooltip>
+          ) : null}
+        </div>
+        <div>
+          <span>{name}</span>
+        </div>
+        <div>
+          {props.active ? `${props.value}%` : null}
+          {props.error ? (
+            <Tooltip content={props.error} usePortal={true}>
+              <Icon icon="error" intent={Intent.DANGER} />
+            </Tooltip>
+          ) : null}
+          {props.saved ? (
+            <Tooltip content={"File Saved"} usePortal={true}>
+              <Icon icon="saved" intent={Intent.SUCCESS} />
+            </Tooltip>
+          ) : null}
+        </div>
+      </div>
+      {props.active ? (
+        <ProgressBar intent={Intent.PRIMARY} value={props.value / 100} />
+      ) : null}
+    </div>
+  );
+};
+
+/**
+ * Short file names length to display
+ * @param {*} itemName
+ */
+const nameShortener = itemName => {
+  if (itemName.length > 40) {
+    let name = "";
+    const arr = itemName.split(".");
+    name += `${arr[0].substring(0, 20)}...`;
+    if (arr.length >= 2) {
+      name += `${arr[arr.length - 2].substring(
+        arr[arr.length - 2].length - 5,
+        arr[arr.length - 2].length
+      )}`;
+      name += `.${arr[arr.length - 1]}`;
+    }
+    return name;
+  }
+  return itemName;
+};
+
+export default itemUpload;