From 39d3ce230fd4b033ecdae802447a00bb5e1ffc07 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 25 Oct 2017 09:44:37 -0500 Subject: [PATCH] fix(item-sliding): expose item sliding methods --- packages/core/src/components.d.ts | 4 +++ .../components/item-sliding/item-options.tsx | 12 ++------ .../components/item-sliding/item-sliding.tsx | 16 +++++------ packages/core/src/components/list/list.tsx | 28 +++++++++++-------- 4 files changed, 31 insertions(+), 29 deletions(-) diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index afc01db94e..4378d4e565 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -1243,6 +1243,8 @@ declare global { mode?: string, color?: string, + isRightSide?: any, + width?: any, side?: string } } @@ -1425,6 +1427,8 @@ declare global { mode?: string, color?: string, + getOpenedItem?: any, + setOpenedItem?: any, closeSlidingItems?: any } } diff --git a/packages/core/src/components/item-sliding/item-options.tsx b/packages/core/src/components/item-sliding/item-options.tsx index dbb5108f4c..ffcd65cc66 100644 --- a/packages/core/src/components/item-sliding/item-options.tsx +++ b/packages/core/src/components/item-sliding/item-options.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core'; import { Side, isRightSide } from '../../utils/helpers'; @@ -40,18 +40,12 @@ export class ItemOptions { */ @Event() ionSwipe: EventEmitter; - /** - * @hidden - */ - isRightSide(): boolean { + @Method() isRightSide() { const isRTL = document.dir === 'rtl'; return isRightSide(this.side, isRTL, true); } - /** - * @hidden - */ - width(): number { + @Method() width(): number { return this.el.offsetWidth; } diff --git a/packages/core/src/components/item-sliding/item-sliding.tsx b/packages/core/src/components/item-sliding/item-sliding.tsx index 83c63fe1da..10fe41c4df 100644 --- a/packages/core/src/components/item-sliding/item-sliding.tsx +++ b/packages/core/src/components/item-sliding/item-sliding.tsx @@ -2,8 +2,8 @@ import { Component, Element, Event, EventEmitter, Method, State } from '@stencil import { GestureDetail, HTMLIonItemElement, HTMLIonListElement } from '../../index'; import { swipeShouldReset } from '../../utils/helpers'; +import { ItemOptions } from './item-options'; -// import { ItemOptions } from './item-options'; const SWIPE_MARGIN = 30; const ELASTIC_FACTOR = 0.55; @@ -147,11 +147,8 @@ export class ItemSliding { private sides: number; private tmr: any = null; - // TODO file with item sliding interfaces & item options implement - // leftOptions: ItemOptions; - // rightOptions: ItemOptions; - private leftOptions: any; - private rightOptions: any; + private leftOptions: ItemOptions; + private rightOptions: ItemOptions; private optsDirty: boolean = true; @@ -222,7 +219,7 @@ export class ItemSliding { let container = this; // Close open container if it is not the selected one. - if (this.list && container !== this.list.openContainer) { + if (this.list && container !== this.list.getOpenedItem()) { this.closeOpened(); } @@ -234,7 +231,8 @@ export class ItemSliding { } onDragStart(gesture: GestureDetail) { - this.selectedContainer = this.list.openContainer = this.preSelectedContainer; + this.selectedContainer = this.preSelectedContainer; + this.list.setOpenedItem(this.selectedContainer); this.selectedContainer.startSliding(gesture.currentX); } @@ -254,7 +252,7 @@ export class ItemSliding { closeOpened(): boolean { this.selectedContainer = null; - if (this.list.openContainer) { + if (this.list.getOpenedItem()) { this.list.closeSlidingItems(); return true; } diff --git a/packages/core/src/components/list/list.tsx b/packages/core/src/components/list/list.tsx index fe2dd4cddb..fe0050c4f5 100644 --- a/packages/core/src/components/list/list.tsx +++ b/packages/core/src/components/list/list.tsx @@ -1,4 +1,4 @@ -import { Component, Method, Prop, State } from '@stencil/core'; +import { Component, Method } from '@stencil/core'; import { ItemSliding } from '../item-sliding/item-sliding'; @@ -15,19 +15,25 @@ import { ItemSliding } from '../item-sliding/item-sliding'; } }) export class List { + private openedItem: ItemSliding; - @State() openContainer: ItemSliding; + @Method() + getOpenedItem() { + return this.openedItem; + } + + @Method() + setOpenedItem(itemSliding: ItemSliding) { + this.openedItem = itemSliding; + } + + @Method() + closeSlidingItems() { + this.openedItem && this.openedItem.close(); + this.openedItem = null; + } protected render() { return ; } - - /** - * Close any sliding items that are open. - */ - @Method() - closeSlidingItems() { - this.openContainer.close(); - this.openContainer = null; - } }