Update StepsDialog steps switching (#2692)

Signed-off-by: Sergei Ogorelkov <sergei.ogorelkov@xored.com>

packages/ui/src/components/Component.svelte

@@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { SvelteComponent } from 'svelte'
   import { getResource } from '@hcengineering/platform'
   import type { AnyComponent } from '../types'
   // import Icon from './Icon.svelte'
@@ -20,6 +21,8 @@
   import ErrorBoundary from './internal/ErrorBoundary'
   import Loading from './Loading.svelte'
 
+  // Reference to rendered component instance
+  export let innerRef: SvelteComponent | undefined = undefined
   export let is: AnyComponent
   export let props = {}
   export let shrink: boolean = false
@@ -36,11 +39,11 @@
   {:then Ctor}
     <ErrorBoundary>
       {#if $$slots.default !== undefined}
-        <Ctor {...props} on:change on:close on:open on:click on:delete on:action>
+        <Ctor bind:this={innerRef} {...props} on:change on:close on:open on:click on:delete on:action>
           <slot />
         </Ctor>
       {:else}
-        <Ctor {...props} on:change on:close on:open on:click on:delete on:action />
+        <Ctor bind:this={innerRef} {...props} on:change on:close on:open on:click on:delete on:action />
       {/if}
     </ErrorBoundary>
   {:catch err}

packages/ui/src/components/StepsDialog.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
-  import { createEventDispatcher } from 'svelte'
+  import { createEventDispatcher, SvelteComponent } from 'svelte'
   import ui from '../plugin'
   import {
     AnySvelteComponent,
@@ -43,7 +43,8 @@
 
   const dispatch = createEventDispatcher()
 
-  let currentStep: DialogStep | undefined
+  let step: SvelteComponent | undefined
+  let currentStepModel: DialogStep | undefined
   let currentStepIndex = 0
   let isStepValid = false
   let isSaving = false
@@ -70,26 +71,26 @@
   }
 
   async function completeCurrentStep () {
-    if (!currentStep?.onDone) {
+    if (!step?.done) {
       return
     }
 
     isSaving = true
     try {
-      await currentStep.onDone()
+      await step.done()
     } finally {
       isSaving = false
     }
   }
 
-  $: currentStep = steps[currentStepIndex]
+  $: currentStepModel = steps[currentStepIndex]
   $: stepIndex = currentStepIndex
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <Panel bind:panelWidth bind:innerWidth bind:useMaxWidth {floatAside} {allowClose} isAside isHeader on:close>
   <svelte:fragment slot="title">
-    {@const additionalStepInfo = currentStep?.additionalInfo}
+    {@const additionalStepInfo = currentStepModel?.additionalInfo}
 
     <div class="popupPanel-title__content-container antiTitle">
       <div class="icon-wrapper">
@@ -122,8 +123,8 @@
   </svelte:fragment>
 
   <svelte:fragment slot="header">
-    {@const stepName = currentStep?.name}
-    {@const stepDescription = currentStep?.description}
+    {@const stepName = currentStepModel?.name}
+    {@const stepDescription = currentStepModel?.description}
 
     <div class="header header-row between">
       {#if stepName}<h4 class="no-margin"><Label label={stepName} /></h4>{/if}
@@ -164,8 +165,8 @@
     </Scroller>
   </svelte:fragment>
 
-  {#if currentStep?.component}
-    {@const { component, props } = currentStep}
+  {#if currentStepModel?.component}
+    {@const { component, props } = currentStepModel}
     {@const isMobile = $deviceInfo.isMobile}
 
     <div
@@ -176,9 +177,9 @@
       class:max={!isMobile && useMaxWidth}
     >
       {#if typeof component === 'string'}
-        <Component is={component} {props} on:change={handleComponentChange} />
+        <Component bind:innerRef={step} is={component} {props} on:change={handleComponentChange} />
       {:else}
-        <svelte:component this={component} {...props} on:change={handleComponentChange} />
+        <svelte:component this={component} bind:this={step} {...props} on:change={handleComponentChange} />
       {/if}
     </div>
   {/if}

packages/ui/src/types.ts

@@ -299,5 +299,4 @@ export interface DialogStep {
   readonly additionalInfo?: string
   readonly component: AnyComponent | AnySvelteComponent
   props?: Record<string, any>
-  readonly onDone?: () => Promise<void> | void
 }