Switching AceEditor theme reactively

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev committed 2020-08-21 15:07:21 +03:00
1 parent c7061a3ea4
commit ee71c5aae8
1 file changed
+7 -1
@@ -3,10 +3,11 @@
import "./ace-editor.scss" import "./ace-editor.scss"
import React from "react" import React from "react"
import { observer } from "mobx-react"; import { observer, disposeOnUnmount } from "mobx-react";
import AceBuild, { Ace } from "ace-builds" import AceBuild, { Ace } from "ace-builds"
import { autobind, cssNames } from "../../utils"; import { autobind, cssNames } from "../../utils";
import { themeStore } from "../../theme.store"; import { themeStore } from "../../theme.store";
import { reaction } from "mobx";
interface Props extends Partial<Ace.EditorOptions> { interface Props extends Partial<Ace.EditorOptions> {
className?: string; className?: string;
@@ -46,6 +47,11 @@ export class AceEditor extends React.Component<Props, State> {
require("ace-builds/src-noconflict/ext-searchbox") require("ace-builds/src-noconflict/ext-searchbox")
} }
@disposeOnUnmount
themeSwitcher = reaction(() => themeStore.activeTheme, () => {
this.setTheme(this.theme);
});
get theme() { get theme() {
switch (themeStore.activeTheme.type) { switch (themeStore.activeTheme.type) {
case "light": case "light":