Finalized confirmation on deletion.

Author: mattmezza

README.md

@@ -180,6 +180,7 @@ For more detailed examples see the demo folder.
 | showFile | Boolean | A bool indicating whether or not to show the file chooser button
 | showDeletion | Boolean | A bool indicating whether or not to show the edit button for a message
 | showConfirmationDeletion | Boolean | A bool indicating whether or not to show the confirmation text when we remove a message
+| confirmationDeletionMessage | String | The message you want to show when confirming the deletion
 | showEdition | Boolean | A bool indicating whether or not to show the delete button for a message
 | showTypingIndicator | String | A string that can be set to a user's participant.id to show `typing` indicator for them
 | showHeader | Boolean | A bool indicating whether or not to show the header of chatwindow

demo/src/App.vue

@@ -23,6 +23,7 @@
       :showEdition="true"
       :showDeletion="true"
       :showConfirmationDeletion="true"
+      :confirmationDeletionMessage="'Are you sure? (you can customize this message)'"
       :titleImageUrl="titleImageUrl"
       @onType="handleOnType"
       @edit="editMessage"

demo/src/main.js

@@ -3,7 +3,7 @@ import App from './App.vue'
 import Chat from '../../dist/vue-beautiful-chat.umd.min.js'
 import vmodal from 'vue-js-modal'
 
-Vue.use(vmodal , { dialog: true })
+Vue.use(vmodal, {dialog: true})
 Vue.use(Chat)
 
 // eslint-disable-next-line

demo/vue.config.js

@@ -1,5 +1,7 @@
+ifProd = () => process.env.NODE_ENV === 'production'
+
 module.exports = {
   lintOnSave: false,
-  productionSourceMap: false,
-  publicPath: process.env.NODE_ENV === 'production' ? '/vue-beautiful-chat/' : '/',
+  productionSourceMap: ifProd(),
+  publicPath: ifProd() ? '/vue-beautiful-chat/' : '/',
 }

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "build": "vue-cli-service build --target lib --name vue-beautiful-chat --formats umd-min src/index.js",
     "lint": "vue-cli-service lint",
-    "watch": "npm run build -- --watch",
+    "watch": "npm run build -- --mode development --watch",
     "prepublishOnly": "npm run build"
   },
   "files": [

src/ChatWindow.vue

@@ -25,6 +25,7 @@
       :show-edition="showEdition"
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
+      :confirmation-deletion-message="confirmationDeletionMessage"
       :message-styling="messageStyling"
       @scrollToTop="$emit('scrollToTop')"
       @remove="$emit('remove', $event)"
@@ -124,7 +125,7 @@ export default {
     },
     placeholder: {
       type: String,
-      default: 'Write a message...'
+      required: true
     },
     showTypingIndicator: {
       type: String,
@@ -157,6 +158,10 @@ export default {
     showConfirmationDeletion: {
       type: Boolean,
       required: true
+    },
+    confirmationDeletionMessage: {
+      type: String,
+      required: true
     }
   },
   data() {

src/Launcher.vue

@@ -28,6 +28,7 @@
       :show-edition="showEdition"
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
+      :confirmation-deletion-message="confirmationDeletionMessage"
       :show-header="showHeader"
       :placeholder="placeholder"
       :show-typing-indicator="showTypingIndicator"
@@ -109,6 +110,10 @@ export default {
       type: Boolean,
       default: false
     },
+    confirmationDeletionMessage: {
+      type: String,
+      default: 'Do you really want to delete the message?'
+    },
     isOpen: {
       type: Boolean,
       required: true

src/Message.vue

@@ -28,6 +28,7 @@
         :show-edition="showEdition"
         :show-deletion="showDeletion"
         :show-confirmation-deletion="showConfirmationDeletion"
+        :confirmation-deletion-message="confirmationDeletionMessage"
         @remove="$emit('remove')"
       >
         <template v-slot:default="scopedProps">
@@ -108,6 +109,10 @@ export default {
     showConfirmationDeletion: {
       type: Boolean,
       required: true
+    },
+    confirmationDeletionMessage: {
+      type: String,
+      required: true
     }
   },
   computed: {

src/MessageList.vue

@@ -15,6 +15,7 @@
       :show-edition="showEdition"
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
+      :confirmation-deletion-message="confirmationDeletionMessage"
       @remove="$emit('remove', message)"
     >
       <template v-slot:user-avatar="scopedProps">
@@ -47,6 +48,7 @@
       :show-edition="showEdition"
       :show-deletion="showDeletion"
       :show-confirmation-deletion="showConfirmationDeletion"
+      :confirmation-deletion-message="confirmationDeletionMessage"
     />
   </div>
 </template>
@@ -95,6 +97,10 @@ export default {
     showConfirmationDeletion: {
       type: Boolean,
       required: true
+    },
+    confirmationDeletionMessage: {
+      type: String,
+      required: true,
     }
   },
   computed: {

src/messages/TextMessage.vue

@@ -8,7 +8,7 @@
           </IconBase>
         </button>
         <div v-if="showDeletion">
-          <button v-if="me && message.id != null && message.id != undefined" @click="ifelse(showConfirmationDeletion, withConfirm('Do you really want to delete the message?', () => $emit('remove')), () => $emit('remove'))()">
+          <button v-if="me && message.id != null && message.id != undefined" @click="ifelse(showConfirmationDeletion, withConfirm(confirmationDeletionMessage, () => $emit('remove')), () => $emit('remove'))()">
             <IconBase :color="messageColors.color" width="10" icon-name="remove">
               <IconCross />
             </IconBase>
@@ -72,6 +72,10 @@ export default {
       type: Boolean,
       required: true
     },
+    confirmationDeletionMessage: {
+      type: String,
+      required: true
+    }
   },
   computed: {
     messageText() {
@@ -101,10 +105,7 @@ export default {
     },
     withConfirm(msg, func) {
       return () => {
-        if (confirm(msg)) {
-          console.log(func)
-          func()
-        }
+        if (confirm(msg)) func()
       }
     },
   },