@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
100 lines (99 loc) • 3.89 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const lodash_1 = require("lodash");
const styles_1 = require("app/styles");
const monaco_editor_1 = require("monaco-editor");
const logger_1 = require("app/utilities/logger");
const outerStyle = {
position: 'relative',
flexGrow: 1,
overflow: 'hidden',
};
const editorStyle = {
_extends: 'fill',
position: 'absolute',
};
class FileDifferences extends react_1.default.Component {
constructor(props) {
super(props);
this.monacoEditorElRef = react_1.default.createRef();
this.scrollTop = 0;
this.renderMonacoEditor = this.renderMonacoEditor.bind(this);
this.handleScroll = this.handleScroll.bind(this);
this.debouncedHandleScroll = lodash_1.debounce(this.handleScroll, 400);
}
componentDidMount() {
this.scrollTop = 0;
this.renderMonacoEditor();
window && window.addEventListener('resize', this.renderMonacoEditor);
}
componentDidUpdate(prevProps) {
lodash_1.defer(() => this.renderMonacoEditor());
if (prevProps.selectedPath !== this.props.selectedPath) {
this.scrollTop = 0;
}
}
render() {
return (react_1.default.createElement("div", { style: styles_1.style(outerStyle) },
react_1.default.createElement("div", { style: styles_1.style(editorStyle), ref: this.monacoEditorElRef })));
}
renderMonacoEditor() {
const el = this.monacoEditorElRef.current;
if (!el) {
return null;
}
el.innerHTML = '';
const leftFileContents = (this.props.leftFileContents && atob(this.props.leftFileContents)) || '';
const rightFileContents = (this.props.rightFileContents && atob(this.props.rightFileContents)) ||
'';
logger_1.debug(`renderMonacoEditor: el ${el.offsetHeight} ${el.clientHeight} ${el.offsetWidth} ${el.clientWidth}`);
const originalModel = monaco_editor_1.editor.createModel(leftFileContents);
const modifiedModel = monaco_editor_1.editor.createModel(rightFileContents);
monaco_editor_1.editor.defineTheme('myTheme', this.getTheme());
monaco_editor_1.editor.setTheme('myTheme');
const diffEditor = monaco_editor_1.editor.createDiffEditor(el, {
readOnly: true,
});
diffEditor.setModel({
original: originalModel,
modified: modifiedModel,
});
const innerEditor = diffEditor.getOriginalEditor();
innerEditor.setScrollTop(this.scrollTop);
innerEditor.onDidScrollChange(this.handleScroll);
}
handleScroll(evt) {
this.scrollTop = evt.scrollTop;
}
getTheme() {
const background = this.getColorValue('background');
const foreground = this.getColorValue('text');
const theme = {
base: 'vs',
inherit: true,
rules: [{ background, foreground }],
colors: {
'editor.foreground': foreground,
'editor.background': background,
'editorCursor.foreground': background,
},
};
logger_1.debug('FileDifferences.getTheme() returning ', theme);
return theme;
}
getColorValue(ourName) {
const valueIn = styles_1.getStyleVar('colors', ourName);
const matches = valueIn.match(/var\(([^\)]*)/);
if (matches) {
const varName = matches[1];
const value = getComputedStyle(document.documentElement).getPropertyValue(varName);
return value;
}
return valueIn;
}
}
exports.FileDifferences = FileDifferences;