|
| 1 | +exports.middleware = (store) => (next) => (action) => { |
| 2 | + if ('SESSION_ADD_DATA' === action.type) { |
| 3 | + const { data } = action; |
| 4 | + if (detectPushCommand(data)) { |
| 5 | + store.dispatch({ |
| 6 | + type: 'PUSH_MODE_TOGGLE' |
| 7 | + }); |
| 8 | + } |
| 9 | + next(action); |
| 10 | + } else { |
| 11 | + next(action); |
| 12 | + } |
| 13 | +}; |
| 14 | + |
| 15 | +// This function performs regex matching on expected shell output for git push result being input |
| 16 | +// at the command line. Currently it supports output from bash, zsh, fish, cmd and powershell. |
| 17 | +function detectPushCommand(data) { |
| 18 | + const patterns = [ |
| 19 | + 'To *.git', |
| 20 | + 'zsh: command not found: wow', |
| 21 | + ]; |
| 22 | + return new RegExp('(' + patterns.join(')|(') + ')').test(data) |
| 23 | +} |
| 24 | + |
| 25 | +exports.reduceUI = (state, action) => { |
| 26 | + switch (action.type) { |
| 27 | + case 'PUSH_MODE_TOGGLE': |
| 28 | + return state.set('rocketState', (state.rocketState + 1) || 1); |
| 29 | + } |
| 30 | + return state; |
| 31 | +}; |
| 32 | + |
| 33 | +const passProps = (uid, parentProps, props) => { |
| 34 | + return Object.assign(props, { |
| 35 | + rocketState: parentProps.rocketState |
| 36 | + }); |
| 37 | +} |
| 38 | + |
| 39 | +exports.mapTermsState = (state, map) => { |
| 40 | + return Object.assign(map, { |
| 41 | + rocketState: state.ui.rocketState |
| 42 | + }); |
| 43 | +}; |
| 44 | + |
| 45 | +exports.getTermGroupProps = passProps; |
| 46 | +exports.getTermProps = passProps; |
| 47 | + |
| 48 | +exports.decorateTerm = (Term, { React, notify }) => { |
| 49 | + |
| 50 | + class Rocket extends React.Component { |
| 51 | + constructor() { |
| 52 | + super(); |
| 53 | + |
| 54 | + this.rocketStyle = { |
| 55 | + position: 'absolute', |
| 56 | + width: '20px', |
| 57 | + height: '20px', |
| 58 | + right: '5%', |
| 59 | + bottom: '5%', |
| 60 | + borderRadius: '50%', |
| 61 | + backgroundColor: 'red', |
| 62 | + display: 'none', |
| 63 | + }; |
| 64 | + |
| 65 | + this.animationStyle = { |
| 66 | + animationName: 'launch', |
| 67 | + animationTimingFunction: 'linear', |
| 68 | + animationDuration: '2s', |
| 69 | + animationDelay: '0.0s', |
| 70 | + animationIterationCount: 1, |
| 71 | + animationDirection: 'normal', |
| 72 | + animationFillMode: 'forwards', |
| 73 | + display: 'block', |
| 74 | + }; |
| 75 | + |
| 76 | + this.state = { |
| 77 | + animation: {}, |
| 78 | + }; |
| 79 | + } |
| 80 | + |
| 81 | + whichAnimationEvent(element){ |
| 82 | + let t; |
| 83 | + |
| 84 | + var animations = { |
| 85 | + "animation" : "animationend", |
| 86 | + "OAnimation" : "oAnimationEnd", |
| 87 | + "MozAnimation" : "animationend", |
| 88 | + "WebkitAnimation": "webkitAnimationEnd" |
| 89 | + } |
| 90 | + |
| 91 | + for (t in animations) { |
| 92 | + if (element.style[t] !== undefined){ |
| 93 | + return animations[t]; |
| 94 | + } |
| 95 | + } |
| 96 | + } |
| 97 | + |
| 98 | + componentWillReceiveProps(nextProps) { |
| 99 | + if ((nextProps.rocketState > this.props.rocketState) || (nextProps.rocketState != undefined && this.props.rocketState == undefined)) { |
| 100 | + this.setState({ |
| 101 | + animation: this.animationStyle |
| 102 | + }); |
| 103 | + } |
| 104 | + return nextProps; |
| 105 | + } |
| 106 | + |
| 107 | + render() { |
| 108 | + let styleSheet = document.styleSheets[0]; |
| 109 | + const keyframes = ` |
| 110 | + @-webkit-keyframes launch { |
| 111 | + 0% { top: 110%; display: block; } |
| 112 | + 100% { top: -10%; display: block; } |
| 113 | + } |
| 114 | + `; |
| 115 | + styleSheet.insertRule(keyframes, styleSheet.cssRules.length); |
| 116 | + |
| 117 | + const mergedStyles = Object.assign({}, this.rocketStyle, this.state.animation); |
| 118 | + |
| 119 | + return( |
| 120 | + React.createElement('div', {style: mergedStyles, id: "rocket"}) |
| 121 | + ); |
| 122 | + } |
| 123 | + |
| 124 | + componentDidMount() { |
| 125 | + let rocket = document.getElementById("rocket"); |
| 126 | + let animationEvent = this.whichAnimationEvent(rocket); |
| 127 | + rocket.addEventListener(animationEvent, function() { |
| 128 | + console.log("DONE"); |
| 129 | + this.setState({ |
| 130 | + animation: {} |
| 131 | + }); |
| 132 | + }.bind(this)); |
| 133 | + } |
| 134 | + } |
| 135 | + |
| 136 | + // Define and return our higher order component. |
| 137 | + return class extends React.Component { |
| 138 | + constructor (props, context) { |
| 139 | + super(props, context); |
| 140 | + |
| 141 | + this._onTerminal = this._onTerminal.bind(this); |
| 142 | + this._div = null; |
| 143 | + this._observer = null; |
| 144 | + } |
| 145 | + |
| 146 | + _onTerminal (term) { |
| 147 | + if (this.props.onTerminal) this.props.onTerminal(term); |
| 148 | + this._div = term.div_; |
| 149 | + this._window = term.document_.defaultView; |
| 150 | + } |
| 151 | + |
| 152 | + render () { |
| 153 | + const children = []; |
| 154 | + |
| 155 | + children.push(React.createElement(Term, Object.assign({}, this.props, { |
| 156 | + onTerminal: this._onTerminal |
| 157 | + }))); |
| 158 | + |
| 159 | + children.push( |
| 160 | + React.createElement(Rocket, {rocketState: this.props.rocketState}) |
| 161 | + ); |
| 162 | + |
| 163 | + return React.createElement('div', {style: {width: '100%', height: '100%', position: 'relative'}}, children); |
| 164 | + } |
| 165 | + |
| 166 | + } |
| 167 | +}; |
0 commit comments