Fix preloading text inputs

appsocially · Mar 22, 2021 · db8f716 · db8f716 · vercel · Mar 22, 2021
1 parent 35be8b4
commit db8f716
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 0 deletions.
diff --git a/src/components/FormMode/text-input-mixin.js b/src/components/FormMode/text-input-mixin.js
@@ -42,6 +42,16 @@ export default {
       return inputValue === this.upil.symbols.UNRESOLVED ? '' : inputValue
     },
   },
+  watch: {
+    stateInputValue: {
+      immediate: true,
+      handler(stateInputValue) {
+        if (!this.inputValue) {
+          this.inputValue = stateInputValue
+        }
+      },
+    },
+  },
   methods: {
     compositionEnded() {
       this.waitingOnIme = false

diff --git a/stories/Formmode.stories.js b/stories/Formmode.stories.js
@@ -1,17 +1,22 @@
 import FormMode from '@/components/FormMode'
 import { UPILCore } from '@appsocially/userpil-core'
+import { setupListeners } from '@/utils'
 
 export default {
   title: 'Modes/Formmode',
   args: {
     templateText: '',
+    listeners: {},
   },
   argTypes: {
     templateText: {
       control: {
         type: 'text',
       },
     },
+    listeners: {
+      type: 'object',
+    },
   },
 }
 
@@ -30,6 +35,7 @@ const formmodeTemplate = (args) => {
     methods: {
       startUpil() {
         this.upil = new UPILCore()
+        setupListeners({ upil: this.upil, listeners: this.listeners })
 
         this.upil.startRaw(this.templateText, {
           mode: 'form',
@@ -65,6 +71,30 @@ BasicTemplate.args = {
   `,
 }
 
+export const PreloadedTemplate = formmodeTemplate.bind({})
+PreloadedTemplate.args = {
+  templateText: `
+    DIALOG getName
+      TEMPLATE 
+        {
+          formText: "First Name"
+        }
+        "What's your name?"
+        >>name
+      /TEMPLATE
+      TEMPLATE "Welcome \${name}"
+    /DIALOG
+    RUN getName
+  `,
+  listeners: {
+    'preload-input': async () => {
+      return {
+        name: 'John Doe',
+      }
+    },
+  },
+}
+
 export const BasicSelect = formmodeTemplate.bind({})
 BasicSelect.args = {
   templateText: `
@@ -85,6 +115,33 @@ BasicSelect.args = {
   `,
 }
 
+export const PreloadedSelect = formmodeTemplate.bind({})
+PreloadedSelect.args = {
+  templateText: `
+      DIALOG favColor
+        SELECT
+          {
+            formText: "Favorite color"
+          }
+          "Please choose your favorite color"
+          -("Red", "red")
+          -("Blue", "blue")
+          -("Green", "green")
+          >>color
+        /SELECT
+        TEMPLATE "\${color} is a great color!"
+      /DIALOG
+      RUN favColor
+  `,
+  listeners: {
+    'preload-input': async () => {
+      return {
+        color: 'green',
+      }
+    },
+  },
+}
+
 export const BasicMultiSelect = formmodeTemplate.bind({})
 BasicMultiSelect.args = {
   templateText: `
@@ -105,6 +162,33 @@ BasicMultiSelect.args = {
   `,
 }
 
+export const PreloadedMultiSelect = formmodeTemplate.bind({})
+PreloadedMultiSelect.args = {
+  templateText: `
+      DIALOG favColor
+        MULTI_SELECT
+          {
+            formText: "Favorite colors"
+          }
+          "Please choose all of your favorite colors"
+          -("Color red", "red")
+          -("Color blue", "blue")
+          -("Color green", "green")
+          >>colors
+        /MULTI_SELECT
+        TEMPLATE "Those are all great colors!"
+      /DIALOG
+      RUN favColor
+  `,
+  listeners: {
+    'preload-input': async () => {
+      return {
+        colors: ['green', 'blue'],
+      }
+    },
+  },
+}
+
 export const VariableInFormText = formmodeTemplate.bind({})
 VariableInFormText.args = {
   templateText: `