How to use teselagen-react-components - 10 common examples

import { tryToRefocusEditor } from "../utils/editorUtils";

// Single validation function - from & to have the same range
const validate = (val, vals, props) => {
  const { min, max } = get(props, "extraProps.from", {});
  const circular = get(props, "extraProps.circular");
  if ((min && val < min) || (max && val > max)) {
    return "Invalid position";
  }
  if (!circular && vals.from > vals.to) {
    return "Wrong from/to order";
  }
};

export default compose(
  withDialog({
    isDraggable: true,
    width: 400,
    title: "Select Range",
    height: 270,
    onCloseHook: tryToRefocusEditor
  }),
  reduxForm({
    form: "selectDialog"
  }),
  formValues("from", "to")
)(
  class SelectDialog extends React.Component {
    updateTempHighlight = ({ isStart, isEnd } = {}) => val => {
      const { selectionLayerUpdate, from, to, invalid } = this.props;
      if (invalid) return;
      selectionLayerUpdate(

-webkit-print-color-adjust: exact; page-break-after: always; 
              } }`}
            ignoreLinks //needed because some css is linked to but is not loading..
            onAfterPrint={() => {
              this.setState({ fullscreen: false });
              hideModal();
            }}
          />
        
      
    );
  }
}

export default compose(
  withDialog({
    // isOpen: true,
    title: "Print"
  }),
  withEditorProps,
  reduxForm({
    form: "PrintDialog"
  })
)(PrintDialog);

class ReactToPrint extends React.Component {
  static propTypes = {
    /** Preview the print without actually triggering the print dialog */
    printPreview: PropTypes.bool,
    /** Copy styles over into print window. default: true */
    copyStyles: PropTypes.bool,
    /** Ignore link styles. Necessary because sometime links don't load.., default: false */

export default ({ formName, getProps, dialogProps }) => {
  return compose(
    withDialog({
      isDraggable: true,
      width: 350,
      ...dialogProps
    }),
    withEditorProps,
    withProps(getProps),
    reduxForm({
      form: formName, // "AddOrEditAnnotationDialog",
      validate: (values, { sequenceLength, sequenceData }) => {
        let errors = {};
        const { circular } = sequenceData || {};
        if (!circular && values.start > values.end) {
          errors.start = "Start must be less than End for a linear sequence";
          errors.end = "Start must be less than End for a linear sequence";
        }
        if (

return function(dispatch /* getState */) {
    let items = [
      {
        text: "Remove Edit",
        onClick: function() {
          dispatch({
            type: "REPLACEMENT_LAYER_DELETE",
            meta,
            payload: { ...annotation }
          });
        }
      }
    ];

    showContextMenu(items, undefined, event);
  };
}

selectionLayer,
            shiftHeld,
            type,
            caretPositionUpdate,
            selectionLayerUpdate
          });
          event.stopPropagation();
        });
      });

      this.combokeys.bind(["backspace", "del"], event => {
        // Handle shortcut
        this.handleDnaDelete(event);
      });

      this.commandEnhancer = commandMenuEnhancer(getCommands(this), {
        useTicks: true,
        omitIcons: true
      });
    }
    updateSelectionOrCaret = (shiftHeld, newRangeOrCaret) => {

that.resetDefaultState = () => {
    that.setState({
      ...Object.keys(that.state).reduce((acc, key) => {
        acc[key] = false;
        return acc;
      }, {}),
      ...defaultState
    });
    setCurrentParamsOnUrl({}, that.props.history.replace);
    // localStorage.editorDemoState = JSON.stringify(defaultState);
  };
}

constructor(props) {
    super(props);
    const commands = getCommands(this);
    // Don't bind clipboard shortcuts (use native ones directly)
    ["cut", "copy", "paste"].forEach(cmdId => delete commands[cmdId]);
    this.hotkeyDefs = getCommandHotkeys(commands);
    this.handlers = getCommandHotkeyHandlers(commands);

    this.Handler = withHotkeys(this.hotkeyDefs, this.handlers)();
  }

constructor(props) {
    super(props);
    const commands = getCommands(this);
    // Don't bind clipboard shortcuts (use native ones directly)
    ["cut", "copy", "paste"].forEach(cmdId => delete commands[cmdId]);
    this.hotkeyDefs = getCommandHotkeys(commands);
    this.handlers = getCommandHotkeyHandlers(commands);

    this.Handler = withHotkeys(this.hotkeyDefs, this.handlers)();
  }

export function setupOptions({ that, defaultState, props }) {
  const editorDemoState = getCurrentParamsFromUrl(props.history.location);
  // localStorage.editorDemoState = props.history.location.search;
  const massagedEditorDemoState = Object.keys(editorDemoState).reduce(
    (acc, key) => {
      if (editorDemoState[key] === "false") {
        acc[key] = false;
      } else if (editorDemoState[key] === "true") {
        acc[key] = true;
      } else {
        acc[key] = editorDemoState[key];
      }
      return acc;
    },
    {}
  );
  try {
    that.state = {

constructor(props) {
    super(props);
    const commands = getCommands(this);
    // Don't bind clipboard shortcuts (use native ones directly)
    ["cut", "copy", "paste"].forEach(cmdId => delete commands[cmdId]);
    this.hotkeyDefs = getCommandHotkeys(commands);
    this.handlers = getCommandHotkeyHandlers(commands);

    this.Handler = withHotkeys(this.hotkeyDefs, this.handlers)();
  }