How to use the teselagen-react-components.withDialog function in teselagen-react-components

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 (

intent={Intent.PRIMARY}
          >
            Save
          
        
      
    );
  }
}

function required(val) {
  if (!val) return "Required";
}

export default compose(
  withDialog({
    isDraggable: true,
    height: 570,
    width: 400
  }),
  withEditorProps,
  reduxForm({
    form: "AddOrEditFeatureDialog",
    validate: (values, { sequenceLength }) => {
      let errors = {};
      if (
        !isRangeWithinRange(
          convertRangeTo0Based(values, sequenceLength),
          { start: 0, end: sequenceLength - 1 },
          sequenceLength
        )
      ) {

)}
            intent={Intent.PRIMARY}
          >
            Create Merged Feature
          
        
      
    );
  }
}

function required(val) {
  if (!val) return "Required";
}
export default compose(
  withDialog({
    isDraggable: true,
    height: 480,
    width: 400
  }),
  withEditorProps,
  reduxForm({
    form: "MergeFeaturesDialog"
  }),
  formValues("id1", "id2")
)(MergeFeaturesDialog);

} ${startCase(type)}`
              );
              hideModal();
            }}
            disabled={!(duplicatesToRemoveSelectedEntities || []).length}
          >
            Remove {duplicatesToRemoveSelectedEntities.length} Duplicates
          
        
      
    );
  }
}

export default compose(
  withDialog(),
  withEditorProps,

  withSelectedEntities("duplicatesToRemove"),

  reduxForm({
    form: "RemoveDuplicatesDialog"
  }),
  formValues("ignoreName", "ignoreStrand", "ignoreStartAndEnd")
)(RemoveDuplicatesDialog);

intent={Intent.PRIMARY}
          >
            Save
          
        
      
    );
  }
}

function required(val) {
  if (!val) return "Required";
}

export default compose(
  withDialog({
    isDraggable: true,
    height: 430,
    width: 350
  }),
  withEditorProps,
  reduxForm({
    form: "AddOrEditPartDialog",
    validate: (values, { sequenceLength }) => {
      let errors = {};
      if (
        !isRangeWithinRange(
          convertRangeTo0Based(values, sequenceLength),
          { start: 0, end: sequenceLength - 1 },
          sequenceLength
        )
      ) {

}
}

const validate = values => {
  const errors = {};
  if (!values.guideLength) {
    errors.guideLength = "Required";
  }
  if (!values.pamSite) {
    errors.pamSite = "Required";
  }
  return errors;
};

export default compose(
  withDialog({
    isDraggable: true,
    height: 360,
    width: 400
  }),
  withEditorProps,
  reduxForm({
    form: "FindGuideDialog",
    validate
  })
)(FindGuideDialog);

export default function createSimpleDialog(props) {
  return compose(
    withDialog({
      isDraggable: true,
      width: 400,
      ...props.dialogProps
    }),
    reduxForm({
      form: props.formName
    }),
    withProps(props)
  )(SimpleGenericDialogForm);
}

})}
            intent={Intent.PRIMARY}
          >
            Save
          
        
      
    );
  }
}

function required(val) {
  if (!val) return "Required";
}
export default compose(
  withDialog({
    isDraggable: true,
    height: 430,
    width: 350
  }),
  withEditorProps,
  reduxForm({
    form: "AddOrEditPrimerDialog"
  })
)(AddOrEditPrimerDialog);