@teselagen/ui 0.7.32 → 0.7.33-beta.2

package/src/TgSelect/style.css

@@ -1,61 +0,0 @@
-.tg-select {
-  width: 100%;
-  min-width: 170px;
-}
-.tg-select.tg-select-as-tag {
-  /* background-color: red; */
-  border-radius: 4px;
-  width: fit-content;
-  color: white;
-  border: 2px solid white;
-}
-.tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
-  color: white !important;
-}
-.tg-select.do-not-fill-width {
-  width: auto;
-  min-width: 50px;
-}
-.tg-select.tg-small .bp3-input {
-  min-height: 25px;
-  height: 25px;
-}
-.tg-select.tg-small input {
-  line-height: 10.5px;
-}
-.tg-select.tg-small .bp3-tag-input .bp3-input-ghost {
-  line-height: 10.5px;
-}
-.tg-select.tg-small .bp3-tag-input .bp3-tag-input-values {
-  margin-top: 2px;
-}
-.tg-select input {
-  font-size: 14px;
-}
-.tg-select-option {
-  width: fit-content;
-  min-width: 100%;
-}
-/* Fix cutoff placeholder */
-.tg-select .bp3-input-ghost[placeholder] {
-  width: 80%;
-  text-overflow: ellipsis;
-}
-
-.tg-single-select input {
-  position: absolute;
-  top: 5px;
-}
-.tg-single-select .bp3-tag {
-  background-color: initial !important;
-  font-size: 14px;
-}
-.tg-single-select .bp3-popover-open .bp3-tag {
-  opacity: 0.6;
-}
-.bp3-multi-select-popover .bp3-menu,
-.bp3-select-popover .bp3-menu {
-  max-width: 400px;
-  max-height: 300px;
-  overflow: auto;
-}

package/src/TgSuggest/index.js

@@ -1,124 +0,0 @@
-import { Suggest } from "@blueprintjs/select";
-import { Keys } from "@blueprintjs/core";
-import React, { useCallback, useMemo, useRef } from "react";
-import classNames from "classnames";
-import { itemListPredicate } from "../TgSelect";
-
-const itemRenderer = (i = "", { index, handleClick, modifiers }) => (
-  <div //we specifically don't use a BP MenuItem component here because the menu item is too slow when 100s are loaded and will cause the component to lag
-    onClick={handleClick}
-    key={index}
-    className={classNames(
-      "tg-select-option bp3-menu-item bp3-fill bp3-text-overflow-ellipsis",
-      {
-        "bp3-active": modifiers.active
-      }
-    )}
-  >
-    {i}
-  </div>
-);
-
-const TgSuggest = ({
-  disabled,
-  inputProps: _inputProps,
-  intent,
-  isLoading,
-  isSimpleSearch,
-  multi,
-  noResultsText,
-  notCreateable,
-  onBlur,
-  onChange,
-  optionRenderer, //pull this one out here so it doesn't get passsed along
-  options,
-  placeholder,
-  popoverProps: _popoverProps,
-  value,
-  ...rest
-}) => {
-  const inputRef = useRef(null);
-
-  const handleItemSelect = useCallback(
-    item => {
-      inputRef.current && inputRef.current.blur();
-      return onChange?.(item);
-    },
-    [onChange]
-  );
-
-  const _itemListPredicate = useCallback(
-    (queryString, item) => {
-      return itemListPredicate(queryString, item, isSimpleSearch);
-    },
-    [isSimpleSearch]
-  );
-
-  const popoverProps = useMemo(
-    () => ({
-      minimal: true,
-      className: classNames("tg-select", {
-        "tg-single-select": !multi
-      }),
-      wrapperTagName: "div",
-      usePortal: false,
-      canEscapeKeyClose: true,
-      ..._popoverProps
-    }),
-    [multi, _popoverProps]
-  );
-
-  const onKeyDown = useCallback(e => {
-    const { which } = e;
-    if (which === Keys.ENTER) {
-      e.preventDefault();
-      e.stopPropagation(); //this prevents the dialog it is in from closing
-    }
-    if (which === Keys.ESCAPE || which === Keys.TAB) {
-      // By default the escape key will not trigger a blur on the
-      // input element. It must be done explicitly.
-      if (inputRef.current != null) {
-        inputRef.current.blur();
-      }
-      e.preventDefault();
-      e.stopPropagation(); //this prevents dialog's it is in from closing
-    }
-  }, []);
-
-  const inputProps = useMemo(
-    () => ({
-      inputRef: n => {
-        if (n) inputRef.current = n;
-      },
-      placeholder: placeholder || "Type here...",
-      disabled: disabled, // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
-      intent: intent,
-      ..._inputProps
-    }),
-    [disabled, _inputProps, intent, placeholder]
-  );
-
-  return (
-    <Suggest
-      closeOnSelect
-      items={options}
-      query={value}
-      popoverProps={popoverProps}
-      onKeyDown={onKeyDown}
-      onItemSelect={handleItemSelect}
-      noResults={null}
-      resetOnSelect={false}
-      onQueryChange={onChange}
-      itemRenderer={itemRenderer}
-      itemListPredicate={_itemListPredicate}
-      selectedItem={value}
-      inputValueRenderer={item => item}
-      inputProps={inputProps}
-      isSimpleSearch={isSimpleSearch}
-      onChange={onChange}
-      {...rest}
-    />
-  );
-};
-
-export default TgSuggest;

package/src/Timeline/index.js

@@ -1,15 +0,0 @@
-import React from "react";
-import "./style.css";
-
-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";
-
-export default Timeline;

package/src/enhancers/withDialog/index.js

@@ -1,196 +0,0 @@
-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/src/showConfirmationDialog/index.js

@@ -1,148 +0,0 @@
-import React, { Component } from "react";
-import { Button, Classes, 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 }} />;
-    });
-  });
-}
-
-export class AlertWrapper extends Component {
-  state = { isOpen: true };
-  render() {
-    const {
-      title,
-      handleClose,
-      text,
-      resolve,
-      noCancelButton,
-      content,
-      className,
-      thirdButtonNotMinimal,
-      thirdButtonClassName,
-      thirdButtonText,
-      thirdButtonIntent,
-      fourthButtonNotMinimal,
-      fourthButtonClassName,
-      fourthButtonText,
-      fourthButtonIntent,
-      handleSubmit,
-      canEscapeKeyCancel,
-      confirmButtonText = "OK",
-      cancelButtonText = "Cancel",
-      intent = Intent.PRIMARY,
-      ...rest
-    } = this.props;
-    const doClose = confirm => {
-      handleClose();
-      this.setState({ isOpen: false });
-      resolve(confirm);
-    };
-    return (
-      <Dialog
-        title={title}
-        className={(title ? "" : "bp3-alert") + ` ${className || ""}`}
-        isOpen={this.state.isOpen}
-        intent={intent}
-        cancelButtonText={cancelButtonText}
-        onCancel={cancelButtonText ? () => doClose(false) : undefined}
-        onConfirm={
-          handleSubmit ? handleSubmit(v => doClose(v)) : () => doClose(true)
-        }
-        {...rest}
-        {...(noCancelButton && {
-          onCancel: undefined,
-          cancelButtonText: undefined
-        })}
-      >
-        <div
-          className={title ? "bp3-dialog-body" : "bp3-alert-contents"}
-          style={{ padding: 5 }}
-        >
-          {content}
-          {text && <div style={{ marginBottom: 10 }}>{text}</div>}
-        </div>
-        <DialogFooter
-          {...{
-            onBackClick:
-              cancelButtonText && !noCancelButton
-                ? () => doClose(false)
-                : undefined,
-            onClick: handleSubmit
-              ? handleSubmit(v => doClose(v))
-              : () => doClose(true),
-            noCancel: true,
-            additionalButtons:
-              thirdButtonText || fourthButtonText ? (
-                <React.Fragment>
-                  {!!fourthButtonText && (
-                    <Button
-                      className={
-                        (!fourthButtonNotMinimal ? Classes.MINIMAL : "") +
-                        " " +
-                        fourthButtonClassName
-                      }
-                      intent={fourthButtonIntent}
-                      text={fourthButtonText}
-                      onClick={
-                        handleSubmit
-                          ? handleSubmit(v =>
-                              doClose({ ...v, fourthButtonClicked: true })
-                            )
-                          : () => doClose("fourthButtonClicked")
-                      }
-                    ></Button>
-                  )}
-                  {!!thirdButtonText && (
-                    <Button
-                      className={
-                        (!thirdButtonNotMinimal ? Classes.MINIMAL : "") +
-                        " " +
-                        thirdButtonClassName
-                      }
-                      intent={thirdButtonIntent}
-                      text={thirdButtonText}
-                      onClick={
-                        handleSubmit
-                          ? handleSubmit(v =>
-                              doClose({ ...v, thirdButtonClicked: true })
-                            )
-                          : () => {
-                              doClose("thirdButtonClicked");
-                            }
-                      }
-                    ></Button>
-                  )}
-                </React.Fragment>
-              ) : undefined,
-            containerClassname: title ? "" : "bp3-alert-footer",
-            backText: noCancelButton ? "" : cancelButtonText,
-            text: confirmButtonText,
-            intent
-          }}
-        ></DialogFooter>
-      </Dialog>
-    );
-  }
-}