Bläddra i källkod

[frontend] Add a Vue text match highlighting component

Johan Ahlen 5 år sedan
förälder
incheckning
952a75ff13

+ 66 - 0
desktop/core/src/desktop/js/apps/notebook2/components/aceEditor/autocomplete/MatchedText.vue

@@ -0,0 +1,66 @@
+<!--
+  Licensed to Cloudera, Inc. under one
+  or more contributor license agreements.  See the NOTICE file
+  distributed with this work for additional information
+  regarding copyright ownership.  Cloudera, Inc. licenses this file
+  to you under the Apache License, Version 2.0 (the
+  "License"); you may not use this file except in compliance
+  with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <span v-html="content" />
+</template>
+<!-- eslint-enable -->
+
+<script lang="ts">
+  import { Suggestion } from './AutocompleteResults';
+  import Vue from 'vue';
+  import Component from 'vue-class-component';
+  import { Prop } from 'vue-property-decorator';
+
+  @Component
+  export default class Spinner extends Vue {
+    @Prop({ required: true })
+    suggestion!: Suggestion;
+    @Prop({ required: true })
+    filter!: string;
+    @Prop({ required: false, default: false })
+    isComment?: boolean;
+
+    get content(): string {
+      const value =
+        (this.isComment
+          ? (<{ comment?: string }>this.suggestion.details).comment
+          : this.suggestion.value) || '';
+      if (
+        this.filter &&
+        typeof this.suggestion.matchIndex !== 'undefined' &&
+        this.suggestion.matchIndex > -1 &&
+        typeof this.suggestion.matchLength !== 'undefined' &&
+        ((!this.isComment && !this.suggestion.matchComment) ||
+          (this.isComment && this.suggestion.matchComment))
+      ) {
+        const before = value.substring(0, this.suggestion.matchIndex);
+        const match = value.substring(
+          this.suggestion.matchIndex,
+          this.suggestion.matchIndex + this.suggestion.matchLength
+        );
+        const after = value.substring(this.suggestion.matchIndex + this.suggestion.matchLength);
+        return `${before}<b>${match}</b>${after}`;
+      }
+      return value || '';
+    }
+  }
+</script>
+
+<style lang="scss" scoped></style>