Add option to use a function for default collapse state

scm-ui/ui-components/src/repos/DefaultCollapsed.ts

@@ -0,0 +1,3 @@
+export type DefaultCollapsedFunction = (oldPath: string, newPath: string) => boolean;
+
+export type DefaultCollapsed = boolean | DefaultCollapsedFunction;

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -70,4 +70,7 @@ storiesOf("Diff", module)
       return file;
     });
     return <Diff diff={filesWithLanguage} />;
-  });
+  })
+  .add("CollapsingWithFunction", () => (
+    <Diff diff={diffFiles} defaultCollapse={(oldPath, newPath) => oldPath.endsWith(".java")} />
+  ));

scm-ui/ui-components/src/repos/Diff.tsx

@@ -3,11 +3,12 @@ import DiffFile from "./DiffFile";
 import { DiffObjectProps, File } from "./DiffTypes";
 import Notification from "../Notification";
 import { WithTranslation, withTranslation } from "react-i18next";
+import { DefaultCollapsed } from "./DefaultCollapsed";
 
 type Props = WithTranslation &
   DiffObjectProps & {
     diff: File[];
-    defaultCollapse?: boolean;
+    defaultCollapse?: DefaultCollapsed;
   };
 
 class Diff extends React.Component<Props> {

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -3,19 +3,20 @@ import { withTranslation, WithTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
-import { getChangeKey, Hunk, Decoration } from "react-diff-view";
+import { Decoration, getChangeKey, Hunk } from "react-diff-view";
 import { Button, ButtonGroup } from "../buttons";
 import Tag from "../Tag";
 import Icon from "../Icon";
-import { ChangeEvent, Change, File, Hunk as HunkType, DiffObjectProps } from "./DiffTypes";
+import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
+import { DefaultCollapsed } from "./DefaultCollapsed";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
 type Props = DiffObjectProps &
   WithTranslation & {
     file: File;
-    defaultCollapse?: boolean;
+    defaultCollapse?: DefaultCollapsed;
   };
 
 type Collapsible = {
@@ -67,20 +68,21 @@ class DiffFile extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: !!this.props.defaultCollapse,
+      collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide
     };
   }
 
-  // collapse diff by clicking collapseDiffs button
+  defaultCollapse: () => boolean = () => {
-  componentDidUpdate(prevProps: Props) {
+    const { defaultCollapse, file } = this.props;
-    const { defaultCollapse } = this.props;
+    if (typeof defaultCollapse === "boolean") {
-    if (prevProps.defaultCollapse !== defaultCollapse) {
+      return defaultCollapse;
-      this.setState({
+    } else if (typeof defaultCollapse === "function") {
-        collapsed: defaultCollapse
+      return defaultCollapse(file.oldPath, file.newPath);
-      });
+    } else {
-    }
+      return false;
     }
+  };
 
   toggleCollapse = () => {
     const { file } = this.props;

scm-ui/ui-components/src/repos/LoadingDiff.tsx

@@ -10,11 +10,12 @@ import { DiffObjectProps, File } from "./DiffTypes";
 import { NotFoundError } from "../errors";
 import { Notification } from "../index";
 import { withTranslation, WithTranslation } from "react-i18next";
+import { DefaultCollapsed } from "./DefaultCollapsed";
 
 type Props = WithTranslation &
   DiffObjectProps & {
     url: string;
-    defaultCollapse?: boolean;
+    defaultCollapse?: DefaultCollapsed;
   };
 
 type State = {

scm-ui/ui-components/src/repos/index.ts

@@ -20,6 +20,7 @@ export * from "./changesets";
 export { default as Diff } from "./Diff";
 export { default as DiffFile } from "./DiffFile";
 export { default as LoadingDiff } from "./LoadingDiff";
+export { DefaultCollapsed, DefaultCollapsedFunction } from "./DefaultCollapsed";
 
 export {
   File,