fix(svelte): fix swipe-to-step behavior in Sheet component

framework7io · Oct 19, 2021 · 6e0fa74 · 6e0fa74
1 parent b95add1
commit 6e0fa74
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/kitchen-sink/svelte/src/pages/sheet-modal.svelte b/kitchen-sink/svelte/src/pages/sheet-modal.svelte
@@ -245,8 +245,9 @@
     swipeToClose
     swipeToStep
     push
-    backdrop>
-    <div class="swipe-handler" onClick={() => toggleSwipeStep()} />
+    backdrop
+  >
+    <div class="swipe-handler" on:click={() => toggleSwipeStep()} />
     <div class="sheet-modal-swipe-step">
       <div class="display-flex padding justify-content-space-between align-items-center">
         <div style="font-size: 18px"><b>Total:</b></div>

diff --git a/src/core/components/sheet/sheet-class.js b/src/core/components/sheet/sheet-class.js
@@ -318,6 +318,7 @@ class Sheet extends Modal {
           $el.removeClass('modal-in-swipe-step');
           $el.trigger('sheet:stepprogress', 1);
           sheet.emit('local::stepProgress sheetStepProgress', sheet, 1);
+          sheet.emit('local::_swipeStep', false);
           $el.trigger('sheet:stepopen');
           sheet.emit('local::stepOpen sheetStepOpen', sheet);
           if (sheet.push && pushOffset) {
@@ -334,6 +335,7 @@ class Sheet extends Modal {
             $el.addClass('modal-in-swipe-step');
             $el.trigger('sheet:stepprogress', 0);
             sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+            sheet.emit('local::_swipeStep', true);
             $el.trigger('sheet:stepclose');
             sheet.emit('local::stepClose sheetStepClose', sheet);
             if (sheet.push && pushOffset) {
@@ -347,6 +349,7 @@ class Sheet extends Modal {
           $el.addClass('modal-in-swipe-step');
           $el.trigger('sheet:stepprogress', 0);
           sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+          sheet.emit('local::_swipeStep', true);
           $el.trigger('sheet:stepclose');
           sheet.emit('local::stepClose sheetStepClose', sheet);
           if (sheet.push && pushOffset) {
@@ -364,6 +367,7 @@ class Sheet extends Modal {
             $el.removeClass('modal-in-swipe-step');
             $el.trigger('sheet:stepprogress', 1);
             sheet.emit('local::stepProgress sheetStepProgress', sheet, 1);
+            sheet.emit('local::_swipeStep', false);
             $el.trigger('sheet:stepopen');
             sheet.emit('local::stepOpen sheetStepOpen', sheet);
             if (sheet.push && pushOffset) {
@@ -392,6 +396,7 @@ class Sheet extends Modal {
             $el.addClass('modal-in-swipe-step');
             $el.trigger('sheet:stepprogress', 0);
             sheet.emit('local::stepProgress sheetStepProgress', sheet, 0);
+            sheet.emit('local::_swipeStep', true);
             $el.trigger('sheet:stepclose');
             sheet.emit('local::stepClose sheetStepClose', sheet);
             if (sheet.push && pushOffset) {
@@ -420,6 +425,7 @@ class Sheet extends Modal {
       $el[0].style.setProperty('--f7-sheet-swipe-step', `${swipeStepTranslate}px`);
       if (!byResize) {
         $el.addClass('modal-in-swipe-step');
+        sheet.emit('local::_swipeStep', true);
       }
     };
 
@@ -478,6 +484,7 @@ class Sheet extends Modal {
     sheet.on('close', () => {
       if (sheet.params.swipeToStep) {
         $el.removeClass('modal-in-swipe-step');
+        sheet.emit('local::_swipeStep', false);
         app.off('resize', onResize);
       }
       if (sheet.params.closeOnEscape) {
@@ -504,6 +511,7 @@ class Sheet extends Modal {
 
     sheet.stepOpen = function stepOpen() {
       $el.removeClass('modal-in-swipe-step');
+      sheet.emit('local::_swipeStep', false);
       if (sheet.push) {
         if (!pushOffset) {
           pushOffset = parseInt($el.css('--f7-sheet-push-offset'), 10);
@@ -516,12 +524,14 @@ class Sheet extends Modal {
     };
     sheet.stepClose = function stepClose() {
       $el.addClass('modal-in-swipe-step');
+      sheet.emit('local::_swipeStep', true);
       if (sheet.push) {
         sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
       }
     };
     sheet.stepToggle = function stepToggle() {
       $el.toggleClass('modal-in-swipe-step');
+      sheet.emit('local::_swipeStep', $el.hasClass('modal-in-swipe-step'));
     };
 
     $el[0].f7Modal = sheet;

diff --git a/src/svelte/components/sheet.svelte b/src/svelte/components/sheet.svelte
@@ -34,6 +34,7 @@
   const state = {
     isOpened: opened,
     isClosing: false,
+    swipeStep: false,
   };
 
   export function instance() {
@@ -53,7 +54,9 @@
     `sheet-modal-${positionComputed}`,
     {
       'sheet-modal-push': push,
+      'modal-in-swipe-step': state.swipeStep,
     },
+
     modalStateClasses(state),
     colorClasses($$props),
   );
@@ -117,6 +120,10 @@
         stepOpen: onStepOpen,
         stepClose: onStepClose,
         stepProgress: onStepProgress,
+        // eslint-disable-next-line
+        _swipeStep(isSwipeStep) {
+          state.swipeStep = isSwipeStep;
+        },
       },
     };
     if (typeof backdrop !== 'undefined') params.backdrop = backdrop;