MR Diffs Refactor Part 13: DiffContent and DiffFile components._mr-refactor-part-13

2 files changed, 120 insertions, 0 deletions

diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
new file mode 100644
index 00000000000..6313ee874b0
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -0,0 +1,45 @@
+<script>
+import { mapState } from 'vuex';
+import inlineDiffView from './inline_diff_view.vue';
+import parallelDiffView from './parallel_diff_view.vue';
+import { INLINE_DIFF_VIEW_TYPE, PARALLEL_DIFF_VIEW_TYPE } from '../constants';
+
+export default {
+  components: {
+    inlineDiffView,
+    parallelDiffView,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState({
+      diffViewType: state => state.diffs.diffViewType,
+    }),
+  },
+  created() {
+    this.INLINE_DIFF_VIEW_TYPE = INLINE_DIFF_VIEW_TYPE;
+    this.PARALLEL_DIFF_VIEW_TYPE = PARALLEL_DIFF_VIEW_TYPE;
+  },
+};
+</script>
+
+<template>
+  <div class="diff-content">
+    <div class="diff-viewer">
+      <inline-diff-view
+        v-if="diffViewType === INLINE_DIFF_VIEW_TYPE"
+        :diff-file="diffFile"
+        :diff-lines="diffFile.highlightedDiffLines || []"
+      />
+      <parallel-diff-view
+        v-if="diffViewType === PARALLEL_DIFF_VIEW_TYPE"
+        :diff-file="diffFile"
+        :diff-lines="diffFile.parallelDiffLines || []"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
new file mode 100644
index 00000000000..a884594c202
--- /dev/null
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -0,0 +1,75 @@
+<script>
+import diffFileHeader from '../../notes/components/diff_file_header.vue';
+import diffContent from './diff_content.vue';
+
+export default {
+  components: {
+    diffFileHeader,
+    diffContent,
+  },
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isExpanded: true,
+    };
+  },
+  mounted() {
+    document.addEventListener('scroll', () => {
+      const { top, bottom } = this.$el.getBoundingClientRect();
+
+      const topOfFixedHeader = 100;
+      const bottomOfFixedHeader = 120;
+
+      if (top < topOfFixedHeader && bottom > bottomOfFixedHeader) {
+        this.$emit('setActive');
+      }
+
+      if (top > bottomOfFixedHeader || bottom < bottomOfFixedHeader) {
+        this.$emit('unsetActive');
+      }
+    });
+  },
+  methods: {
+    handleToggle() {
+      this.isExpanded = !this.isExpanded;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="diff-file file-holder"
+    :id="file.fileHash"
+  >
+    <diff-file-header
+      :diff-file="file"
+      :collapsible="true"
+      :add-merge-request-buttons="true"
+      @toggleFile="handleToggle"
+      class="js-file-title file-title"
+    />
+    <diff-content
+      v-if="isExpanded"
+      :diff-file="file"
+    />
+    <div
+      v-else
+      class="nothing-here-block diff-collapsed"
+    >
+      This diff is collapsed.
+      <a
+        @click.prevent="handleToggle"
+        class="click-to-expand"
+        href="#"
+      >
+        Click to expand it.
+      </a>
+    </div>
+  </div>
+</template>