github.com/replicatedhq/ship@v0.55.0/web/init/src/components/shared/DiffEditor.jsx (about)

     1  import React from "react";
     2  import { MonacoDiffEditor } from "react-monaco-editor";
     3  
     4  export default class DiffEditor extends React.Component {
     5    constructor(props) {
     6      super(props);
     7      this.state = {
     8        splitDiff: false
     9      };
    10    }
    11  
    12    toggleDiffType = () => {
    13      this.monacoDiffEditor.editor.updateOptions({
    14        renderSideBySide: !this.state.splitDiff
    15      });
    16      this.setState({ splitDiff: !this.state.splitDiff });
    17    }
    18  
    19    render() {
    20      const {
    21        original,
    22        updated,
    23        language,
    24        diffTitle,
    25        diffSubCopy,
    26        hideToggle,
    27      } = this.props;
    28  
    29      return (
    30        <div className="flex-column flex1">
    31          <div className="flex-auto flex">
    32            {diffTitle || diffSubCopy ?
    33              <div className="flex-auto u-marginBottom--normal">
    34                {diffTitle && <p className="u-fontSize--large u-color--tuna u-fontWeight--bold">{diffTitle}</p>}
    35                {diffSubCopy && <p className="u-marginTop--small u-fontSize--small u-lineHeight--more u-fontWeight--medium u-color--doveGray">{diffSubCopy}</p>}
    36              </div>
    37              : null}
    38            {hideToggle ? null :
    39              <div className="flex flex1 justifyContent--flexEnd">
    40                <div className="flex-column flex-auto flex-verticalCenter">
    41                  <div className="diff-type-toggle flex flex-auto">
    42                    <span className={`${!this.state.splitDiff ? "is-active" : "not-active"} flex-auto`} onClick={this.toggleDiffType}>Inline diff</span>
    43                    <span className={`${this.state.splitDiff ? "is-active" : "not-active"} flex-auto`} onClick={this.toggleDiffType}>Split diff</span>
    44                  </div>
    45                </div>
    46              </div>
    47            }
    48          </div>
    49          <div className="flex1">
    50            <MonacoDiffEditor
    51              ref={(editor) => { this.monacoDiffEditor = editor}}
    52              width="100%"
    53              height="100%"
    54              language={language || "yaml"}
    55              original={original}
    56              value={updated}
    57              options={{
    58                renderSideBySide: false,
    59                enableSplitViewResizing: true,
    60                scrollBeyondLastLine: false,
    61              }}
    62            />
    63          </div>
    64        </div>
    65      );
    66    }
    67  }