github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx (about)

     1  import * as React from 'react';
     2  import {useState} from 'react';
     3  import {Diff, Hunk, tokenize, markEdits} from 'react-diff-view';
     4  import 'react-diff-view/style/index.css';
     5  
     6  import './application-resources-diff.scss';
     7  
     8  export interface IndividualDiffSectionProps {
     9      file: any;
    10      showPath: boolean;
    11      whiteBox: string;
    12      viewType: string;
    13  }
    14  
    15  export const IndividualDiffSection = (props: IndividualDiffSectionProps) => {
    16      const {file, showPath, whiteBox, viewType} = props;
    17      const [collapsed, setCollapsed] = useState(false);
    18      const options = {
    19          highlight: false,
    20          enhancers: [markEdits(file.hunks, {type: 'block'})]
    21      };
    22      const token = tokenize(file.hunks, options);
    23  
    24      return (
    25          <div className={`${whiteBox} application-component-diff__diff`}>
    26              {showPath && (
    27                  <p className='application-resources-diff__diff__title'>
    28                      {file.newPath}
    29                      <i className={`fa fa-caret-${collapsed ? 'down' : 'up'} diff__collapse`} onClick={() => setCollapsed(!collapsed)} />
    30                  </p>
    31              )}
    32              {!collapsed && (
    33                  <Diff viewType={viewType} diffType={file.type} hunks={file.hunks} tokens={token}>
    34                      {(hunks: any) => hunks.map((hunk: any) => <Hunk className={'custom-diff-hunk'} key={hunk.content} hunk={hunk} />)}
    35                  </Diff>
    36              )}
    37          </div>
    38      );
    39  };