Lens app source code (#119)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

dashboard/client/components/ace-editor/ace-editor.scss

@@ -0,0 +1,61 @@
+.AceEditor {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  z-index: 10;
+
+  &.hidden {
+    visibility: hidden;
+  }
+
+  &.light {
+    .ace_scrollbar {
+      @include custom-scrollbar($theme: dark);
+    }
+  }
+
+  > .editor {
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    font-size: 90%;
+    border-radius: $radius;
+  }
+
+  // --Theme customization
+
+  .ace_gutter {
+    color: $textColorSecondary;
+    background-color: $mainBackground;
+  }
+
+  .ace_active-line,
+  .ace_gutter-active-line {
+    background: $mainBackground !important;
+  }
+
+  .ace_meta.ace_tag {
+    color: $textColorPrimary;
+  }
+
+  .ace_constant {
+    color: $kontenaBlue !important;
+  }
+
+  .ace_keyword {
+    color: $textColorAccent;
+  }
+
+  .ace_string {
+    color: $colorOk;
+  }
+
+  .ace_comment {
+    color: #808080;
+  }
+
+  .ace_scrollbar {
+    @include custom-scrollbar;
+  }
+}

dashboard/client/components/ace-editor/ace-editor.tsx

@@ -0,0 +1,190 @@
+// Ace code editor - https://ace.c9.io
+// Playground - https://ace.c9.io/build/kitchen-sink.html
+import "./ace-editor.scss"
+
+import * as React from "react"
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { Ace } from "ace-builds"
+import { autobind, cssNames } from "../../utils";
+import { Spinner } from "../spinner";
+import { themeStore } from "../../theme.store";
+
+interface Props extends Partial<Ace.EditorOptions> {
+  className?: string;
+  autoFocus?: boolean;
+  hidden?: boolean;
+  cursorPos?: Ace.Point;
+  onChange?(value: string, delta: Ace.Delta): void;
+  onCursorPosChange?(point: Ace.Point): void;
+}
+
+interface State {
+  ready?: boolean;
+}
+
+const defaultProps: Partial<Props> = {
+  value: "",
+  mode: "yaml",
+  tabSize: 2,
+  showGutter: true, // line-numbers
+  foldStyle: "manual",
+  printMargin: false,
+  useWorker: false,
+};
+
+@observer
+export class AceEditor extends React.Component<Props, State> {
+  static defaultProps = defaultProps as object;
+
+  private editor: Ace.Editor;
+  private elem: HTMLElement;
+
+  @observable ready = false;
+
+  async loadEditor() {
+    return await import(
+      /* webpackChunkName: "ace" */
+      "ace-builds"
+    );
+  }
+
+  loadTheme(theme: string) {
+    return import(
+      /* webpackChunkName: "ace/[request]" */
+      `ace-builds/src-min-noconflict/theme-${theme}`
+    );
+  }
+
+  loadExtension(ext: string) {
+    return import(
+      /* webpackChunkName: "ace/[request]" */
+      `ace-builds/src-min-noconflict/ext-${ext}`
+    );
+  }
+
+  loadMode(mode: string) {
+    return import(
+      /* webpackChunkName: "ace/[request]" */
+      `ace-builds/src-min-noconflict/mode-${mode}`
+    )
+  }
+
+  get theme() {
+    return themeStore.activeTheme.type == "light"
+      ? "dreamweaver" : "terminal";
+  }
+
+  async componentDidMount() {
+    const {
+      mode, autoFocus, className, hidden, cursorPos,
+      onChange, onCursorPosChange, children,
+      ...options
+    } = this.props;
+
+    // load ace-editor, theme and mode
+    const ace = await this.loadEditor();
+    await Promise.all([
+      this.loadTheme(this.theme),
+      this.loadMode(mode)
+    ]);
+
+    // setup editor
+    this.editor = ace.edit(this.elem, options);
+    this.setTheme(this.theme);
+    this.setMode(mode);
+    this.setCursorPos(cursorPos);
+
+    // bind events
+    this.editor.on("change", this.onChange);
+    this.editor.selection.on("changeCursor", this.onCursorPosChange);
+
+    // load extensions
+    this.loadExtension("searchbox");
+
+    if (autoFocus) this.focus();
+    this.ready = true;
+  }
+
+  componentDidUpdate() {
+    if (!this.editor) return;
+    const { value, cursorPos } = this.props;
+    if (value !== this.getValue()) {
+      this.editor.setValue(value);
+      this.editor.clearSelection();
+      this.setCursorPos(cursorPos || this.editor.getCursorPosition());
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.editor) {
+      this.editor.destroy();
+    }
+  }
+
+  resize() {
+    if (this.editor) {
+      this.editor.resize();
+    }
+  }
+
+  focus() {
+    if (this.editor) {
+      this.editor.focus();
+    }
+  }
+
+  getValue() {
+    return this.editor.getValue()
+  }
+
+  setValue(value: string, cursorPos?: number) {
+    return this.editor.setValue(value, cursorPos);
+  }
+
+  async setMode(mode: string) {
+    await this.loadMode(mode);
+    this.editor.session.setMode(`ace/mode/${mode}`);
+  }
+
+  async setTheme(theme: string) {
+    await this.loadTheme(theme);
+    this.editor.setTheme(`ace/theme/${theme}`);
+  }
+
+  setCursorPos(pos: Ace.Point) {
+    if (!pos) return;
+    const { row, column } = pos;
+    this.editor.moveCursorToPosition(pos);
+    requestAnimationFrame(() => {
+      this.editor.gotoLine(row + 1, column, false);
+    });
+  }
+
+  @autobind()
+  onCursorPosChange() {
+    const { onCursorPosChange } = this.props;
+    if (onCursorPosChange) {
+      onCursorPosChange(this.editor.getCursorPosition());
+    }
+  }
+
+  @autobind()
+  onChange(delta: Ace.Delta) {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(this.getValue(), delta);
+    }
+  }
+
+  render() {
+    const { className, hidden } = this.props;
+    const themeType = themeStore.activeTheme.type;
+    return (
+      <div className={cssNames("AceEditor", className, { hidden }, themeType)}>
+        <div className="editor" ref={e => this.elem = e}/>
+        {!this.ready && <Spinner center/>}
+      </div>
+    )
+  }
+}

dashboard/client/components/ace-editor/index.ts

@@ -0,0 +1 @@
+export * from "./ace-editor"