123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<script>
|
|
import { GlIcon } from '@gitlab/ui';
|
|
import fuzzaldrinPlus from 'fuzzaldrin-plus';
|
|
import ChangedFileIcon from '../changed_file_icon.vue';
|
|
import FileIcon from '../file_icon.vue';
|
|
|
|
const MAX_PATH_LENGTH = 60;
|
|
|
|
export default {
|
|
components: {
|
|
GlIcon,
|
|
ChangedFileIcon,
|
|
FileIcon,
|
|
},
|
|
props: {
|
|
file: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
focused: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
searchText: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
index: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
showDiffStats: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
},
|
|
computed: {
|
|
pathWithEllipsis() {
|
|
const { path } = this.file;
|
|
|
|
return path.length < MAX_PATH_LENGTH
|
|
? path
|
|
: `...${path.substr(path.length - MAX_PATH_LENGTH)}`;
|
|
},
|
|
nameSearchTextOccurences() {
|
|
return fuzzaldrinPlus.match(this.file.name, this.searchText);
|
|
},
|
|
pathSearchTextOccurences() {
|
|
return fuzzaldrinPlus.match(this.pathWithEllipsis, this.searchText);
|
|
},
|
|
},
|
|
methods: {
|
|
clickRow() {
|
|
this.$emit('click', this.file);
|
|
},
|
|
mouseOverRow() {
|
|
this.$emit('mouseover', this.index);
|
|
},
|
|
mouseMove() {
|
|
this.$emit('mousemove', this.index);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
:class="{
|
|
'is-focused': focused,
|
|
}"
|
|
type="button"
|
|
class="diff-changed-file"
|
|
@click.prevent="clickRow"
|
|
@mouseover="mouseOverRow"
|
|
@mousemove="mouseMove"
|
|
>
|
|
<file-icon :file-name="file.name" :size="16" css-classes="diff-file-changed-icon gl-mr-3" />
|
|
<span class="diff-changed-file-content gl-mr-3">
|
|
<strong class="diff-changed-file-name">
|
|
<span
|
|
v-for="(char, charIndex) in file.name.split('')"
|
|
:key="charIndex + char"
|
|
:class="{
|
|
highlighted: nameSearchTextOccurences.indexOf(charIndex) >= 0,
|
|
}"
|
|
v-text="char"
|
|
>
|
|
</span>
|
|
</strong>
|
|
<span class="diff-changed-file-path gl-mt-2">
|
|
<span
|
|
v-for="(char, charIndex) in pathWithEllipsis.split('')"
|
|
:key="charIndex + char"
|
|
:class="{
|
|
highlighted: pathSearchTextOccurences.indexOf(charIndex) >= 0,
|
|
}"
|
|
v-text="char"
|
|
>
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<span v-if="file.changed || file.tempFile" v-once class="diff-changed-stats">
|
|
<span v-if="showDiffStats">
|
|
<span class="cgreen bold">
|
|
<gl-icon name="file-addition" class="align-text-top" /> {{ file.addedLines }}
|
|
</span>
|
|
<span class="cred bold ml-1">
|
|
<gl-icon name="file-deletion" class="align-text-top" /> {{ file.removedLines }}
|
|
</span>
|
|
</span>
|
|
<changed-file-icon v-else :file="file" />
|
|
</span>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.highlighted {
|
|
color: #1f78d1;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|