argo-cd

1
import * as React from 'react';
2
import {useState} from 'react';
3
import {Diff, Hunk} 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
    return (
19
        <div className={`${whiteBox} application-component-diff__diff`}>
20
            {showPath && (
21
                <p className='application-resources-diff__diff__title'>
22
                    {file.newPath}
23
                    <i className={`fa fa-caret-${collapsed ? 'down' : 'up'} diff__collapse`} onClick={() => setCollapsed(!collapsed)} />
24
                </p>
25
            )}
26
            {!collapsed && (
27
                <Diff viewType={viewType} diffType={file.type} hunks={file.hunks}>
28
                    {(hunks: any) => hunks.map((hunk: any) => <Hunk className={'custom-diff-hunk'} key={hunk.content} hunk={hunk} />)}
29
                </Diff>
30
            )}
31
        </div>
32
    );
33
};
34