refactor(inputs): refactor InteractablesInputGroup (#3154)

Satellite-im · May 17, 2022 · 77688d9 · 77688d9
1 parent 4adcd09
commit 77688d9
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 62 deletions.
diff --git a/components/interactables/InputGroup/InputGroup.html b/components/interactables/InputGroup/InputGroup.html
@@ -8,37 +8,24 @@
     <div class="control" data-cy="add-input">
       <input
         v-model="internalText"
-        :class="`input is-${size} is-${type}`"
+        class="input"
+        :class="[`is-${size} is-${type}`, {'disabled' : disabled || loading}]"
         :readonly="readonly"
         :type="inputKind"
         data-cy="input-group"
         :placeholder="placeholder"
-        :maxLength="textLimit? limitCount : $Config.chat.maxChars"
-        :disabled="disabled"
+        :maxLength="maxLength"
+        :disabled="disabled || loading"
         v-on:keyup.enter="action"
         @input="update"
         ref="input"
       />
     </div>
     <div class="control" data-cy="submit-input">
       <a
-        :disabled="disabled"
-        :class="`button is-${type} is-${size} has-${icon ? 'icon' : 'no-icon'}`"
-        v-on:click="() => !disabled ? action() : null"
-        v-if="!copyContent.length"
-      >
-        <UiLoadersSpinner v-if="loading" spinning />
-        <span v-else>
-          <slot></slot>
-          {{ buttonText }}
-        </span>
-      </a>
-      <a
-        :disabled="disabled"
-        :class="`button is-${type} is-${size} has-${icon ? 'icon' : 'no-icon'}`"
-        v-on:click="action"
-        v-clipboard:copy="copyContent"
-        v-else
+        class="button"
+        :class="[`is-${type} is-${size} has-${icon ? 'icon' : 'no-icon'}`, {'disabled' : disabled || loading}]"
+        @click="() => disabled || loading ? null : action()"
       >
         <UiLoadersSpinner v-if="loading" spinning />
         <span v-else>
@@ -48,5 +35,5 @@
       </a>
     </div>
   </div>
-  <span v-if="textLimit" class="char-limit"> {{ textLength }} </span>
+  <span v-if="showLimit" class="char-limit"> {{ textLength }} </span>
 </div>
diff --git a/components/interactables/InputGroup/InputGroup.less b/components/interactables/InputGroup/InputGroup.less
@@ -7,9 +7,16 @@
 .control:nth-child(1) {
   &:extend(.full-width);
 }
-.button,
-.button span {
+.button {
   &:extend(.inline-flex-content-centered);
+
+  span {
+    &:extend(.inline-flex-content-centered);
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
 }
 .has-addons {
   &:extend(.bordered);

diff --git a/components/interactables/InputGroup/InputGroup.vue b/components/interactables/InputGroup/InputGroup.vue
@@ -5,12 +5,6 @@ import { toArray } from 'lodash'
 import { InputTypes, InputStyle, InputSize } from './types.d'
 import { Icon } from '~/types/ui/icons'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    internalText: string
-  }
-}
-
 export default Vue.extend({
   model: {
     prop: 'text',
@@ -109,23 +103,13 @@ export default Vue.extend({
       required: false,
       default: '',
     },
-    /**
-     * Content to be copied when the input group button is clicked
-     */
-    copyContent: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    textLimit: {
+    showLimit: {
       type: Boolean,
-      required: false,
       default: false,
     },
-    limitCount: {
+    maxLength: {
       type: Number,
-      required: false,
-      default: 0,
+      default: 256,
     },
   },
   data() {
@@ -134,9 +118,9 @@ export default Vue.extend({
     }
   },
   computed: {
-    textLength() {
+    textLength(): string {
       /* toArray(): https://lodash.com/docs/4.17.15#toArray */
-      return `${toArray(this.internalText).length}/${this.limitCount}`
+      return `${toArray(this.internalText).length}/${this.maxLength}`
     },
   },
   watch: {

diff --git a/components/interactables/QuickProfile/QuickProfile.html b/components/interactables/QuickProfile/QuickProfile.html
@@ -27,10 +27,10 @@
     <InteractablesInputGroup
       type="primary"
       v-model="text"
-      :limitCount="maxChars"
       :placeholder="`${$t('friends.message')} ${user.name}...`"
       :action="sendMessage"
-      textLimit
+      :maxLength="$Config.chat.maxChars"
+      showLimit
     >
       <arrow-right-icon size="1x" />
     </InteractablesInputGroup>

diff --git a/components/interactables/QuickProfile/QuickProfile.vue b/components/interactables/QuickProfile/QuickProfile.vue
@@ -5,15 +5,6 @@ import { mapState } from 'vuex'
 import { ArrowRightIcon } from 'satellite-lucide-icons'
 import { User } from '~/types/ui/user'
 
-declare module 'vue/types/vue' {
-  interface Vue {
-    text: string
-    maxChars: number
-    close: () => void
-    handleOverflow: () => void
-  }
-}
-
 export default Vue.extend({
   components: {
     ArrowRightIcon,
@@ -28,7 +19,6 @@ export default Vue.extend({
     return {
       isEmptyMessage: false,
       text: '',
-      maxChars: this.$Config.chat.maxChars,
     }
   },
   computed: {

diff --git a/components/views/files/controls/Controls.html b/components/views/files/controls/Controls.html
@@ -35,7 +35,6 @@
       :action="addFolder"
       :placeholder="$t('pages.files.controls.name_folder')"
       :loading="isFilesIndexLoading"
-      :disabled="isFilesIndexLoading"
     >
       <folder-plus-icon size="1.3x" />
     </InteractablesInputGroup>

diff --git a/components/views/files/rename/Rename.html b/components/views/files/rename/Rename.html
@@ -6,7 +6,6 @@
     v-model="text"
     :action="rename"
     :loading="isFilesIndexLoading"
-    :disabled="isFilesIndexLoading"
     ref="inputGroup"
     data-cy="files-rename-input"
   >

diff --git a/components/views/friends/friend/Friend.vue b/components/views/friends/friend/Friend.vue
@@ -20,7 +20,6 @@ import { Config } from '~/config'
 declare module 'vue/types/vue' {
   interface Vue {
     removeFriend: () => void
-    loading: AddFriendEnum
   }
 }
 

diff --git a/components/views/settings/pages/accounts/Accounts.html b/components/views/settings/pages/accounts/Accounts.html
@@ -13,10 +13,9 @@
     <div class="column">
       <TypographyLabel :text="$t('pages.settings.accounts.active')" />
       <InteractablesInputGroup
-        :copy-content="accounts.active"
         readonly
         type="primary"
-        :action="() => $toast.show($t('ui.copied'))"
+        :action="copyPhrase"
         :text="accounts.active"
       >
         <clipboard-icon size="1x" />

diff --git a/components/views/settings/pages/accounts/index.vue b/components/views/settings/pages/accounts/index.vue
@@ -1,4 +1,4 @@
-<template src="./Accounts.html" />
+<template src="./Accounts.html"></template>
 
 <script lang="ts">
 import Vue from 'vue'
@@ -41,6 +41,10 @@ export default Vue.extend({
     togglePhrase() {
       this.$data.showPhrase = !this.$data.showPhrase
     },
+    copyPhrase() {
+      this.$envinfo.navigator.clipboard.writeText(this.accounts.active)
+      this.$toast.show(this.$t('ui.copied') as string)
+    },
   },
 })
 </script>