Commit 61b5b4c5 authored by Julien Bouquillon's avatar Julien Bouquillon 🐫

feat: collapsible diff

parent 56c00960
......@@ -14,6 +14,7 @@
"promise-serial-exec": "^1.0.0",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-collapsible": "^2.7.0",
"react-dom": "^16.13.0",
"react-feather": "^2.0.3",
"reactstrap": "^8.4.1",
......
......@@ -20,6 +20,8 @@ import {
Col
} from "reactstrap";
import classnames from "classnames";
import Collapsible from "react-collapsible";
import { Search } from "react-feather";
import Diff from "../../../../src/Diff";
......@@ -101,11 +103,31 @@ const FileChangeDetail = ({
</div>
)}
{previous && previous.data[textField] !== data[textField] && (
<Diff
inputA={data[textField]}
inputB={previous.data[textField]}
type={"words"}
/>
<Collapsible
trigger={
<div>
<Search
size={16}
style={{ marginRight: 5, verticalAlign: "middle" }}
/>
Voir le diff
</div>
}
transitionTime={200}
triggerStyle={{ cursor: "pointer" }}
>
<Diff
inputA={data[textField]}
inputB={previous.data[textField]}
type={"words"}
style={{
padding: 5,
border: "1px solid silver",
background: "#fff",
borderRadius: 3
}}
/>
</Collapsible>
)}
</td>
</tr>
......
......@@ -34,7 +34,11 @@ export default class Diff extends Component {
}
return <span key={index}>{part.value}</span>;
});
return <div className={this.props.className}>{result}</div>;
return (
<div style={this.props.style} className={this.props.className}>
{result}
</div>
);
}
}
......
......@@ -5775,6 +5775,11 @@ raw-body@2.4.0:
iconv-lite "0.4.24"
unpipe "1.0.0"
react-collapsible@^2.7.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/react-collapsible/-/react-collapsible-2.7.0.tgz#d95111bfbea3c01adc7898c5895b191360f71e94"
integrity sha512-uS6cFyJ2WR0F0xfCjmJ3TGwH+no/JOs8cDKNTPMWKWSJdosmHPCk8io4ZrDyz5dKJmSI5X2T5eJqnasawe6wew==
react-dom@^16.13.0:
version "16.13.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.0.tgz#cdde54b48eb9e8a0ca1b3dc9943d9bb409b81866"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment