@arcblock/terminal 2.1.61

package/lib/player.css

@@ -0,0 +1,378 @@
+.terminal-player,
+.terminal {
+  display: inline-block;
+}
+
+.terminal .xterm .xterm-viewport {
+  overflow-y: hidden !important;
+}
+
+.terminal-frame {
+  position: relative;
+}
+
+/*//// [ Reset ] ////*/
+
+.terminal div {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+/*//// [ Window ] ////*/
+
+.terminal-frame.terminal-window {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  border: 1px solid #b3b3b3;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar {
+  -moz-border-top-left-radius: 6px;
+  -moz-border-top-right-radius: 6px;
+  -webkit-border-top-left-radius: 6px;
+  -webkit-border-top-right-radius: 6px;
+  background: #e8e8e8;
+  border-bottom: 1px solid #b1aeb1;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-top: 1px solid #f3f1f3;
+  color: #3b4247;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  height: 22px;
+  line-height: 22px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .buttons {
+  left: 8px;
+  line-height: 0px;
+  position: absolute;
+  top: 3.5px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .close-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ff5c5c;
+  border-radius: 50%;
+  border: 1px solid #e33e41;
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .minimize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ffbd4c;
+  border-radius: 50%;
+  border: 1px solid #e09e3e;
+  display: inline-block;
+  height: 12px;
+  margin-left: 4px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-titlebar .maximize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #00ca56;
+  border-radius: 50%;
+  border: 1px solid #14ae46;
+  display: inline-block;
+  height: 12px;
+  margin-left: 4px;
+  width: 12px;
+}
+
+.terminal-frame.terminal-window .terminal-body {
+  background-color: #1d1d1d;
+  padding: 10px;
+}
+
+/*//// [ Floating ] ////*/
+
+.terminal-frame.terminal-floating {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  background-color: #1d1d1d;
+  border-radius: 6px;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar {
+  color: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  height: 34px;
+  line-height: 34px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .buttons {
+  left: 13px;
+  line-height: 0px;
+  position: absolute;
+  top: 9px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .close-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ff5c5c;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .minimize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #ffbd4c;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  line-height: 10px;
+  margin-left: 4px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-titlebar .maximize-button {
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  background: #00ca56;
+  border-radius: 50%;
+  display: inline-block;
+  height: 15px;
+  line-height: 10px;
+  margin-left: 4px;
+  width: 15px;
+}
+
+.terminal-frame.terminal-floating .terminal-body {
+  padding: 20px;
+}
+
+/*//// [ Solid ] ////*/
+
+.terminal-frame.terminal-solid {
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  background-color: #1d1d1d;
+  border-radius: 6px;
+  box-shadow: 0px 0px 18px #b3b3b3;
+  margin: 18px;
+  overflow: hidden;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar {
+  color: white;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .title {
+  margin: 15px 15px 15px;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .title:empty {
+  display: none;
+}
+
+.terminal-frame.terminal-solid .terminal-titlebar .buttons {
+  display: none;
+}
+
+.terminal-frame.terminal-solid .terminal-body {
+  padding: 20px;
+}
+
+/*//// [ Player ] ////*/
+
+.terminal-player {
+  position: relative;
+  font-size: 0;
+}
+
+.terminal-player .controller {
+  background: #45484d;
+  bottom: 0px;
+  display: none;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  height: 40px;
+  position: absolute;
+  width: 100%;
+  z-index: 20;
+  background: #222222;
+  transition: height ease 200ms;
+  -webkit-transition: height ease 200ms;
+  -moz-transition: height ease 200ms;
+  -o-transition: height ease 200ms;
+}
+
+.terminal-player.controls .controller {
+  display: block;
+}
+
+.terminal-player.playing .controller {
+  height: 0px;
+  overflow: hidden;
+}
+
+.terminal-player.playing:hover .controller {
+  height: 40px;
+  overflow: hidden;
+}
+
+.terminal-player .play,
+.terminal-player .pause {
+  fill: #cacaca;
+  float: left;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  width: 40px;
+}
+
+.terminal-player .play .icon,
+.terminal-player .pause .icon {
+  border-color: transparent transparent transparent #cacaca;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  height: 15px;
+}
+
+.terminal-player .pause .icon {
+  border-style: double;
+  border-width: 0px 0px 0px 12px;
+  margin-top: 11px;
+}
+
+.terminal-player .play .icon {
+  border-style: solid;
+  border-width: 8px 0px 8px 13px;
+  margin-top: 10px;
+}
+
+.terminal-player .pause {
+  display: none;
+}
+
+.terminal-player.playing .play {
+  display: none;
+}
+
+.terminal-player.playing .pause {
+  display: inline-block;
+}
+
+.terminal-player .timer {
+  color: #cacaca;
+  float: right;
+  line-height: 40px;
+  padding: 0 10px;
+}
+
+.terminal-player .progressbar-wrapper {
+  height: 40px;
+  line-height: 38px;
+  overflow: hidden;
+}
+
+.terminal-player .progressbar {
+  background-color: #424242;
+  display: inline-block;
+  height: 7px;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 10px;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+}
+
+.terminal-player.started .progressbar {
+  cursor: pointer;
+}
+
+.terminal-player .progress {
+  background-color: #cacaca;
+  height: 7px;
+  position: relative;
+  width: 0%;
+}
+
+.terminal-player .cover {
+  cursor: pointer;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 10;
+}
+
+.terminal-player .start svg {
+  cursor: pointer;
+  fill: #eaeaea;
+  height: 130px;
+  left: 50%;
+  margin-left: -65px;
+  margin-top: -65px;
+  position: absolute;
+  top: 50%;
+  width: 130px;
+  z-index: 20;
+  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4));
+  -webkit-filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.4));
+}
+
+.terminal-player.small .start svg {
+  height: 60px;
+  margin-left: -30px;
+  margin-top: -30px;
+  width: 60px;
+}
+
+.terminal-player.framed .start svg {
+  transform: translate(0px, 8px);
+  -webkit-transform: translate(0px, 8px);
+  -moz-transform: translate(0px, 8px);
+  -o-transform: translate(0px, 8px);
+  -ms-transform: translate(0px, 8px);
+}
+
+.terminal-player .cover:hover + .start svg,
+.terminal-player .start:hover svg {
+  fill: white;
+}
+
+.terminal-player.started .cover,
+.terminal-player.started .start {
+  display: none;
+}
+
+.terminal-player .terminal-watermark {
+  z-index: 99999;
+}

package/lib/terminal.js

@@ -0,0 +1,180 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _xterm = require("xterm");
+
+var _xtermAddonWebLinks = require("xterm-addon-web-links");
+
+var _xtermAddonFit = require("xterm-addon-fit");
+
+var _lodash = require("lodash");
+
+require("./xterm.css");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class Terminal extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+
+    _defineProperty(this, "xterm", null);
+
+    _defineProperty(this, "container", null);
+
+    _defineProperty(this, "onData", data => {
+      if (this.props.onData) {
+        this.props.onData(data);
+      }
+    });
+
+    _defineProperty(this, "onRender", data => {
+      if (this.props.onRender) {
+        this.props.onRender(data);
+      }
+    });
+  }
+
+  componentDidMount() {
+    const {
+      value,
+      options
+    } = this.props;
+    this.fitAddon = new _xtermAddonFit.FitAddon();
+    this.xterm = new _xterm.Terminal(options);
+    this.xterm.loadAddon(new _xtermAddonWebLinks.WebLinksAddon());
+    this.xterm.loadAddon(this.fitAddon);
+    this.xterm.open(this.container);
+    this.xterm.onData(this.onData.bind(this));
+    this.xterm.onRender(this.onRender.bind(this));
+
+    if (value) {
+      this.xterm.write(value);
+    }
+
+    setTimeout(() => {
+      if (this.xterm) {
+        this.fitAddon.fit();
+      }
+    }, 0);
+    this.debounceFit = (0, _lodash.debounce)(() => {
+      this.fitAddon.fit();
+    }, 600);
+    window.addEventListener('resize', this.debounceFit);
+  }
+
+  componentWillUnmount() {
+    if (this.xterm) {
+      this.xterm.dispose();
+      this.xterm = null;
+    }
+
+    window.removeEventListener('resize', this.debounceFit);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (nextProps.hasOwnProperty('value') && nextProps.value !== this.props.value) {
+      if (this.xterm) {
+        this.xterm.clear();
+        setTimeout(() => {
+          this.xterm.write(nextProps.value);
+        }, 0);
+      }
+    }
+
+    return false;
+  }
+
+  getXTerm() {
+    return this.xterm;
+  }
+
+  write(data, cb) {
+    if (this.xterm) {
+      this.xterm.write(data, cb);
+    }
+  }
+
+  focus() {
+    if (this.xterm) {
+      this.xterm.focus();
+    }
+  }
+
+  reset() {
+    if (this.xterm) {
+      this.xterm.reset();
+    }
+  }
+
+  resize(cols, rows) {
+    if (this.xterm) {
+      this.xterm.resize(Math.round(cols), Math.round(rows));
+    }
+  }
+
+  setOption(key, value) {
+    if (this.xterm) {
+      this.xterm.setOption(key, value);
+    }
+  }
+
+  getOption(key) {
+    if (this.xterm) {
+      this.xterm.setOption(key);
+    }
+  }
+
+  refresh() {
+    if (this.xterm) {
+      this.xterm.refresh(0, this.xterm.rows - 1);
+    }
+  }
+
+  render() {
+    const className = ['react-xterm', this.props.className].filter(Boolean).join(' ');
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line no-return-assign
+      (0, _jsxRuntime.jsx)("div", {
+        ref: _ref => this.container = _ref,
+        className: className,
+        style: this.props.style
+      })
+    );
+  }
+
+}
+
+exports.default = Terminal;
+Terminal.propTypes = {
+  onData: _propTypes.default.func,
+  onRender: _propTypes.default.func,
+  options: _propTypes.default.object,
+  value: _propTypes.default.string,
+  className: _propTypes.default.string,
+  style: _propTypes.default.object
+};
+
+const noop = () => {};
+
+Terminal.defaultProps = {
+  onData: noop,
+  onRender: noop,
+  options: {},
+  value: '',
+  className: '',
+  style: {}
+};