mathisonian / hyperterm-window

Window component for hyperterm

hyperterm-window

Window component for hyperterm

Example usage:

const HyperWindow = require('hyperterm-window');

exports.decorateTerm = (Term, { React, notify }) => {

  return class extends React.Component {
    render () {
      const children = [React.createElement(Term, Object.assign({}, this.props, { key: 'term' }))];

      // Add a custom component to be displayed in the window
      const myComponent = ...;
        
      const windowProps = Object.assign({}, this.props, {key: 'window', onClose: this.props.clearChart});
      const hyperwindow = React.createElement(HyperWindow, windowProps, myComponent);
      children.push(hyperwindow);
      return React.createElement('div', {style: {width: '100%', height: '100%', position: 'relative'}}, children);
    }
  }
};

See the example for how to integrate the window with the hyperterm redux store.

props

• width - the width of the window in pixels. optional.
• height - the height of the window in pixels. optional.
• onClose - function to call when the user clicks the close button
• foregroundColor, backgroundColor - these should be the colors specified in the user's .hyperterm.js, used to make the window integrate well into the terminal. If you just pass all of this.props from a terminal decorator these will get set automatically (see example above).

TODO

• add position prop - e.g. 'UPPER_LEFT', 'BOTTOM_RIGHT', etc
• add ability to drag
• add ability to resize

Pull requests welcome!

hyperterm-window's Issues

add resizing?

finish docs

image

Could you share the `test.sh` script used in the demo?

Hi there,

I would like to build some things based on hyperterm-window, and I was wondering whether you could share, either in some docs somewhere/a gist/the repo, whether you could share the test.sh script that you call, so that I could get an idea of how that demo works please?

Fantastic project! Really great ✨ 💖 ✨

add drag and drop?