@teselagen/ui 0.0.9 → 0.0.12

package/src/enhancers/withDialog/tg_modalState.js

@@ -0,0 +1,46 @@
+import { omit } from "lodash";
+export default function tg_modalState(
+  state = {},
+  { type, name, uniqueName, props = {} }
+) {
+  const existingModalState = state[name] || {};
+  const { __registeredAs = {} } = existingModalState;
+  if (type === "TG_REGISTER_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        __registeredAs: { ...__registeredAs, [uniqueName]: true }
+      }
+    };
+  }
+  if (type === "TG_UNREGISTER_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        __registeredAs: omit(__registeredAs, uniqueName)
+      }
+    };
+  }
+  if (type === "TG_SHOW_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        ...props,
+        open: true
+      }
+    };
+  }
+  if (type === "TG_HIDE_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        __registeredAs: existingModalState.__registeredAs,
+        open: false
+      }
+    };
+  }
+  return state;
+}

package/src/enhancers/withField.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Field } from "redux-form";
+import { fieldRequired } from "../FormComponents/utils";
+
+//simple enhancer that wraps a component in a redux <Field/> component
+//all options are passed as props to <Field/>
+export default function WithField(fieldProps) {
+  return function AddFieldHOC(Component) {
+    return function AddField({ isRequired, ...rest }) {
+      return (
+        <Field
+          {...(isRequired && { validate: fieldRequired })}
+          {...fieldProps}
+          {...rest}
+          component={Component}
+        />
+      );
+    };
+  };
+}

package/src/enhancers/withFields.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Fields } from "redux-form";
+//simple enhancer that wraps a component in a redux <Fields/> component
+//all options are passed as props to <Fields/>
+export default function WithFields(fieldsProps) {
+  return function AddFieldsHOC(Component) {
+    return function AddFields(props) {
+      return <Fields {...fieldsProps} {...props} component={Component} />;
+    };
+  };
+}

package/src/enhancers/withLocalStorage.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Field } from "redux-form";
+//simple enhancer that wraps a component in a redux <Field/> component
+//all options are passed as props to <Field/>
+export default function WithField(fieldProps) {
+  return function AddFieldHOC(Component) {
+    return function AddField(props) {
+      return <Field {...fieldProps} {...props} component={Component} />;
+    };
+  };
+}

package/src/index.js

@@ -0,0 +1,76 @@
+import "@blueprintjs/core/lib/css/blueprint.css";
+import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
+import "@blueprintjs/icons/lib/css/blueprint-icons.css";
+import "./style.css";
+import "./autoTooltip";
+export * from "./AssignDefaultsModeContext";
+export { default as Uploader } from "./FormComponents/Uploader";
+export { mergeSchemas } from "./DataTable/utils/convertSchema";
+export {
+  getCurrentParamsFromUrl,
+  setCurrentParamsOnUrl
+} from "./DataTable/utils/queryParams";
+
+export {
+  default as withSelectedEntities,
+  getSelectedEntities
+} from "./DataTable/utils/withSelectedEntities";
+export {
+  default as DataTable,
+  ConnectedPagingTool as PagingTool
+} from "./DataTable";
+
+export { default as getIdOrCodeOrIndex } from "./DataTable/utils/getIdOrCodeOrIndex";
+export { default as Loading } from "./Loading";
+export { default as AdvancedOptions } from "./AdvancedOptions";
+export { default as TgSelect } from "./TgSelect";
+export { default as wrapDialog } from "./wrapDialog";
+export { default as PromptUnsavedChanges } from "./PromptUnsavedChanges";
+export { default as BlueprintError } from "./BlueprintError";
+export { default as DropdownButton } from "./DropdownButton";
+export { default as DialogFooter } from "./DialogFooter";
+export { default as adHoc } from "./utils/adHoc";
+export { default as IntentText } from "./IntentText";
+export { default as popoverOverflowModifiers } from "./utils/popoverOverflowModifiers";
+export { default as tgFormValues } from "./utils/tgFormValues";
+export { default as withStore } from "./utils/withStore";
+export { default as withTableParams } from "./DataTable/utils/withTableParams";
+export { default as InfoHelper } from "./InfoHelper";
+export { default as showConfirmationDialog } from "./showConfirmationDialog";
+export { default as showAppSpinner } from "./showAppSpinner";
+export { default as CollapsibleCard } from "./CollapsibleCard";
+export { default as ResizableDraggableDialog } from "./ResizableDraggableDialog";
+export { default as MenuBar } from "./MenuBar";
+export { default as rerenderOnWindowResize } from "./rerenderOnWindowResize";
+export { default as HotkeysDialog } from "./HotkeysDialog";
+export { default as FillWindow } from "./FillWindow";
+export { default as withFields } from "./enhancers/withFields";
+export { default as withField } from "./enhancers/withField";
+export { default as withDialog } from "./enhancers/withDialog";
+export { default as tg_modalState } from "./enhancers/withDialog/tg_modalState";
+export { default as Timeline, TimelineEvent } from "./Timeline";
+export * from "./FormComponents";
+export * from "./useDialog";
+
+export * from "./toastr";
+export * from "./utils/handlerHelpers";
+export * from "./customIcons";
+export { default as basicHandleActionsWithFullState } from "./utils/basicHandleActionsWithFullState";
+export { default as combineReducersWithFullState } from "./utils/combineReducersWithFullState";
+export { default as withSelectTableRecords } from "./utils/withSelectTableRecords";
+export { default as pureNoFunc } from "./utils/pureNoFunc";
+export * from "./utils/tagUtils";
+export * from "./utils/hotkeyUtils";
+export * from "./utils/menuUtils";
+export * from "./utils/commandUtils";
+export * from "./utils/commandControls";
+
+export { default as AsyncValidateFieldSpinner } from "./AsyncValidateFieldSpinner";
+export { default as showProgressToast } from "./utils/showProgressToast";
+export { default as getTextFromEl } from "./utils/getTextFromEl";
+export { default as ScrollToTop } from "./ScrollToTop";
+const noop = () => undefined;
+export { noop };
+export { default as showDialogOnDocBody } from "./showDialogOnDocBody";
+
+export { default as TableFormTrackerContext } from "./DataTable/TableFormTrackerContext";

package/src/rerenderOnWindowResize.js

@@ -0,0 +1,27 @@
+import {throttle} from 'lodash'
+// use like this within a react component: 
+
+// constructor(props){
+//   super(props)
+//   rerenderOnWindowResize(this)
+// }
+
+
+export default function rerenderOnWindowResize(that) {
+  that.updateDimensions = throttle(() => {
+    if (that.props.disabled) return
+    that.forceUpdate()
+  }, 250);
+  const componentDidMount = that.componentDidMount
+  const componentWillUnmount = that.componentWillUnmount
+  
+  that.componentDidMount = (...args)=> {
+    componentDidMount && componentDidMount.bind(that)(...args)
+    window.addEventListener("resize", that.updateDimensions);
+  }
+
+  that.componentWillUnmount = (...args)=> {
+    componentWillUnmount && componentWillUnmount.bind(that)(...args)
+    window.removeEventListener("resize", that.updateDimensions);
+  }
+} 

package/src/showAppSpinner.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Overlay } from "@blueprintjs/core";
+import { renderOnDocSimple } from "./utils/renderOnDoc";
+import Loading from "./Loading";
+
+export default function showAppSpinner() {
+  return renderOnDocSimple(
+    <Overlay isOpen={true}>
+      <Loading centeredInPage loading></Loading>
+    </Overlay>
+  );
+}

package/src/showConfirmationDialog/index.js

@@ -0,0 +1,116 @@
+import React, { Component } from "react";
+import { Button, Dialog, Intent } from "@blueprintjs/core";
+import { renderOnDoc } from "../utils/renderOnDoc";
+import DialogFooter from "../DialogFooter";
+
+// usage
+// const doAction = await showConfirmationDialog({
+//   text:
+//     "Are you sure you want to re-run this tool? Downstream tools with linked outputs will need to be re-run as well!",
+//     intent: Intent.DANGER, //applied to the right most confirm button
+//     confirmButtonText: "Yep!",
+//     cancelButtonText: "Nope",
+//     canEscapeKeyCancel: true //this is false by default
+// });
+// console.info("doAction:", doAction);
+
+// const doAction = await showConfirmationDialog({
+//   thirdButtonText: 'Click me'
+//   thirdButtonIntent: 'primary'
+// });
+// console.info("doAction:", doAction); //logs thirdButtonClicked
+//returns a promise that resolves with true or false depending on if the user cancels or not!
+export default function showConfirmationDialog(opts) {
+  return new Promise(resolve => {
+    renderOnDoc(handleClose => {
+      return <AlertWrapper {...{ ...opts, handleClose, resolve }} />;
+    });
+  });
+}
+
+class AlertWrapper extends Component {
+  state = { isOpen: true };
+  render() {
+    const {
+      handleClose,
+      text,
+      resolve,
+      noCancelButton,
+      content,
+      className,
+      thirdButtonText,
+      thirdButtonIntent,
+      fourthButtonText,
+      fourthButtonIntent,
+      canEscapeKeyCancel,
+      confirmButtonText = "OK",
+      cancelButtonText = "Cancel",
+      intent = Intent.PRIMARY,
+      ...rest
+    } = this.props;
+    const doClose = confirm => {
+      handleClose();
+      this.setState({ isOpen: false });
+      resolve(confirm);
+    };
+    return (
+      <Dialog
+        className={`bp3-alert ${className || ""}`}
+        isOpen={this.state.isOpen}
+        intent={intent}
+        cancelButtonText={cancelButtonText}
+        onCancel={cancelButtonText ? () => doClose(false) : undefined}
+        onConfirm={() => doClose(true)}
+        {...rest}
+        {...(noCancelButton && {
+          onCancel: undefined,
+          cancelButtonText: undefined
+        })}
+      >
+        <div className="bp3-alert-contents" style={{ padding: 5 }}>
+          {content}
+          {text && <div style={{ marginBottom: 10 }}>{text}</div>}
+        </div>
+        <DialogFooter
+          {...{
+            onBackClick:
+              cancelButtonText && !noCancelButton
+                ? () => doClose(false)
+                : undefined,
+            onClick: () => doClose(true),
+            noCancel: true,
+            additionalButtons:
+              thirdButtonText || fourthButtonText ? (
+                <React.Fragment>
+                  {!!fourthButtonText && (
+                    <Button
+                      intent={fourthButtonIntent}
+                      text={fourthButtonText}
+                      onClick={() => {
+                        doClose("fourthButtonClicked");
+                      }}
+                    ></Button>
+                  )}
+                  {!!thirdButtonText && (
+                    <Button
+                      intent={thirdButtonIntent}
+                      text={thirdButtonText}
+                      onClick={() => {
+                        doClose("thirdButtonClicked");
+                      }}
+                    ></Button>
+                  )}
+                </React.Fragment>
+              ) : (
+                undefined
+              ),
+            containerClassname: "bp3-alert-footer",
+            backText: noCancelButton ? "" : cancelButtonText,
+            text: confirmButtonText,
+            intent
+          }}
+        ></DialogFooter>
+      </Dialog>
+    );
+  }
+}

package/src/showDialogOnDocBody.js

@@ -0,0 +1,37 @@
+import ReactDOM from "react-dom";
+import React from "react";
+// import withDialog from "./enhancers/withDialog";
+import { Dialog } from "@blueprintjs/core";
+import { nanoid } from "nanoid";
+
+//this is only really useful for unconnected standalone simple dialogs
+//remember to pass usePortal={false} to the <Dialog/> component so it will close properly
+export default function showDialogOnDocBody(DialogComp, options = {}) {
+  const dialogHolder = document.createElement("div");
+  const className = "myDialog" + nanoid();
+  dialogHolder.className = className;
+  document.body.appendChild(dialogHolder);
+  const onClose = () => {
+    document.querySelector("." + className).remove();
+  };
+  let DialogCompToUse;
+  if (options.addDialogContainer) {
+    DialogCompToUse = props => {
+      return (
+        <Dialog usePortal={false} title="pass a {title} prop" isOpen {...props}>
+          <DialogComp
+            {...props}
+            hideModal={onClose}
+            onClose={onClose}
+          ></DialogComp>
+        </Dialog>
+      );
+    };
+  } else {
+    DialogCompToUse = DialogComp;
+  }
+  ReactDOM.render(
+    <DialogCompToUse hideModal={onClose} onClose={onClose} {...options} />,
+    dialogHolder
+  );
+}

package/src/style.css

@@ -0,0 +1,214 @@
+:root {
+  --base1: #ffffff;
+  --base2: #cdcdcd;
+}
+
+body.bp3-dark {
+  --base1: #393a3a;
+  --base2: #293742;
+}
+
+.bp3-dark .tg-card {
+  background: #394b59 !important;
+}
+
+.preserve-newline {
+  white-space: pre-line;
+}
+
+.bp3-dialog {
+  max-width: 100vw;
+}
+
+/* adding back in blueprint v2 default styling to all <h/> elements */
+h1 {
+  line-height: 40px;
+  font-size: 36px;
+}
+
+h2 {
+  line-height: 32px;
+  font-size: 28px;
+}
+
+h3 {
+  line-height: 25px;
+  font-size: 22px;
+}
+
+h4 {
+  line-height: 21px;
+  font-size: 18px;
+}
+
+h5 {
+  line-height: 19px;
+  font-size: 16px;
+}
+
+h6 {
+  line-height: 16px;
+  font-size: 14px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+h1.bp3-heading,
+h2.bp3-heading,
+h3.bp3-heading,
+h4.bp3-heading,
+h5.bp3-heading,
+h6.bp3-heading {
+  color: #182026;
+  font-weight: 300;
+  margin: 0 0 10px;
+  padding: 0;
+  line-height: normal;
+}
+
+.bp3-dark h1,
+.bp3-dark h2,
+.bp3-dark h3,
+.bp3-dark h4,
+.bp3-dark h5,
+.bp3-dark h6 {
+  color: #f5f8fa;
+}
+.bp3-dark textarea {
+  background: #293742;
+  color: #f5f8fa;
+}
+
+/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
+.bp3-popover-wrapper {
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+}
+/* this line is necessary otherwise the line above setting "position: relative;" caused nested long bp3 submenus to not appear correctly when using the fix below */
+.bp3-submenu .bp3-popover-wrapper {
+  position: unset;
+}
+/* this fixes https://github.com/palantir/blueprint/issues/4791 but requires the "position: unset;" fix above */
+.bp3-submenu > * > .bp3-menu {
+  max-height: 96vh;
+  overflow: auto;
+}
+
+/* bp3 fix https://github.com/palantir/blueprint/issues/2807 */
+span.bp3-popover-target {
+  display: block;
+}
+
+.bp3-portal {
+  z-index: 100000;
+}
+.bp3-switch {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+}
+
+.Select {
+  min-width: 170px;
+}
+
+/* override the default blueprint input focus to instead rely on an inset box shadow. This resolves any issues with overflow:hidden cutting off input box shadows */
+.bp3-dark .bp3-input:focus,
+.bp3-input:focus {
+  box-shadow: inset 0 0 3px 1px #137cbd;
+}
+
+.notClickable {
+  cursor: default !important;
+}
+.bp3-toast-container {
+  z-index: 100001;
+}
+
+.link-button {
+  background: none !important;
+  border: none;
+  padding: 0 !important;
+  font-family: arial, sans-serif;
+  color: rgb(0, 151, 227);
+  /* text-decoration: underline; */
+  cursor: pointer;
+}
+.link-button:hover {
+  color: rgb(98, 198, 248);
+  text-decoration: underline;
+}
+
+.above-dialog {
+  z-index: 100001;
+}
+
+code {
+  display: block;
+  white-space: pre-wrap;
+}
+
+.bp3-toast.no-close-button [aria-label="Close"] {
+  display: none;
+}
+
+[data-tippy-root] {
+  z-index: 100000 !important;
+}
+
+[data-tippy-root] .tippy-box {
+  background-color: #394b59;
+  color: #f5f8fa;
+  padding: 4px 4px;
+  word-break: break-word;
+}
+[data-tippy-root] .tippy-arrow {
+  color: #394b59;
+}
+.bp3-dark [data-tippy-root] .tippy-box {
+  background-color: #e1e8ed;
+  color: #394b59;
+}
+.bp3-dark [data-tippy-root] .tippy-arrow {
+  /* background-color: #e1e8ed; */
+  color: #e1e8ed;
+}
+.isCellEditable .rt-td {
+  position: relative;
+}
+
+.ReactTable .tg-cell-edit-boolean-checkbox {
+  margin-bottom: 0;
+}
+
+.cellDragHandle {
+  height: 8px;
+  width: 8px;
+  cursor: crosshair;
+  border: 1px solid rgb(255, 255, 255);
+  background-color: rgb(76, 107, 171);
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+}
+
+/* make AnchorButton match Button */
+.bp3-button {
+  font-family: Arial;
+}
+
+button {
+  transition: all 0.2s ease-in-out;
+}
+
+button:not(:disabled):active {
+  transform: translateY(1px);
+}
+.bp3-tabs.bp3-vertical > .bp3-tab-panel {
+  min-width: 0px;
+}

package/src/toastr.js

@@ -0,0 +1,92 @@
+import { Position, Toaster, Intent } from "@blueprintjs/core";
+
+const TopToaster = Toaster.create({
+  className: "top-toaster",
+  position: Position.TOP
+});
+
+const BottomToaster = Toaster.create({
+  className: "bottom-toaster",
+  position: Position.BOTTOM
+});
+
+window.__tgClearAllToasts = () => {
+  TopToaster.clear();
+  BottomToaster.clear();
+};
+
+let counter = 5000;
+const generateToast = intent => (message, options) => {
+  options = options || {};
+  const toastToUse = options.bottom ? BottomToaster : TopToaster;
+  let updatedTimeout;
+  if (options.updateTimeout) {
+    //generate a slightly different than default timeout to make the update stay on the page for a full 5 seconds
+    if (counter > 5500) {
+      updatedTimeout = --counter;
+    } else {
+      updatedTimeout = ++counter;
+    }
+  }
+  if (window.Cypress && intent === Intent.DANGER) {
+    console.error("toastr error message: ", message);
+  }
+  const uniqKey = toastToUse.show(
+    {
+      intent,
+      message,
+      timeout: options.timeout || updatedTimeout,
+      action: options.action,
+      icon: options.icon,
+      className: options.className
+    },
+    options.key
+  );
+  function clear() {
+    toastToUse.dismiss(uniqKey);
+  }
+  clear.key = uniqKey;
+  return clear;
+};
+
+function preventDuplicates(func) {
+  const previousToasts = {};
+  return (message, options = {}) => {
+    const clearToast = func(message, options);
+    // no duplicate check for toasts with updates
+
+    if (!options.key) {
+      if (!options.key && previousToasts[message]) {
+        previousToasts[message](); //clear it!
+      }
+
+      setTimeout(() => {
+        delete previousToasts[message];
+      }, options.timeout || 5000);
+
+      previousToasts[message] = clearToast;
+    }
+    return clearToast;
+  };
+}
+
+if (!window.toastr) window.toastr = {};
+if (!window.toastr.success) {
+  window.toastr.success = preventDuplicates(generateToast(Intent.SUCCESS));
+}
+
+if (!window.toastr.error) {
+  window.toastr.error = preventDuplicates(generateToast(Intent.DANGER));
+}
+
+if (!window.toastr.warning) {
+  window.toastr.warning = preventDuplicates(generateToast(Intent.WARNING));
+}
+
+if (!window.toastr.info) {
+  window.toastr.info = preventDuplicates(generateToast(Intent.PRIMARY));
+}
+
+if (!window.toastr.default) {
+  window.toastr.default = preventDuplicates(generateToast(Intent.NONE));
+}

package/src/typeToCommonType.js

@@ -0,0 +1,6 @@
+export const typeToCommonType = {
+  string: "Text",
+  number: "Number",
+  boolean: "True/False",
+  dropdown: "Select One"
+};