Swipe Container Dissapears

Thread is closed for posting
3 posts, 0 answers
  1. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 14 Jun 2017 Link to this post

    I have one single button setup for the swipe right now which when clicked, opens up a 'mailto://' view. When I close that view, the swipe container dissapears completely, I can't see it anymore at all. No swipe button, and even if I put 'backgroundColor="orange"' on the '.invite-view' element, nothing shows up still when swipping.

     

    <GridLayout *ngIf="allContacts.length" dock="bottom" rows="*">
          <RadListView scrollPosition="Top" backgroundColor="transparent" (itemLoading)="onItemLoading($event)" #allContactsView [items]="allContacts" class="contacts__list"
            selectionBehavior="None" swipeActions="true" (itemSwipeProgressChanged)="onCellSwiping($event)" (itemSwipeProgressStarted)="onSwipeCellStarted($event)">
            <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemHeight="100"></ListViewLinearLayout>
            <ng-template tkListItemTemplate let-item="item">
              <GridLayout class="contact-container" columns="*">
                <ink-list-user [user]="item" showLetter="true"></ink-list-user>
              </GridLayout>
            </ng-template>
     
            <GridLayout *tkListItemSwipeTemplate columns="auto">
              <StackLayout id="invite-view" class="invite-button">
                <StackLayout orientation="horizontal" horizontalAlignment="center">
                  <Label class="btn" text="Invite" verticalAlignment="center" (tap)="inviteContact($event)"></Label>
                </StackLayout>
              </StackLayout>
            </GridLayout>
          </RadListView>
        </GridLayout>

     

    inviteContact(args) {
      const OpenUrl = require('nativescript-openurl');
      const index = this.allContacts.indexOf(args.object.bindingContext);
      const contact = this.allContacts[index];
     
      OpenUrl(`mailto:${contact.email}?subject=Hey ${contact.firstName} check this out!&body=I think you would like this new app for managing your business cards.`);
    }
     
    onSwipeCellStarted(args: ListViewEventData) {
      const swipeLimits = args.data.swipeLimits;
      const mainView = args['mainView'];
     
      let left = mainView.getMeasuredWidth() * SWIPE_LIMIT_PERCENT;
      let right = 1;
       
      // Swiping direction is inverted in iOS compared to android
      if (isIOS) {
        right = left;
        left = 1;
      }
     
      if (args.object.bindingContext.isConnection) {
        right = 1;
        left = 1;
      }
     
      swipeLimits.left = left;
      swipeLimits.right = right;
      swipeLimits.threshold = mainView.getMeasuredWidth() * SWIPE_LIMIT_PERCENT / 2;
    }
     
    onCellSwiping(args: ListViewEventData) {
      const mainView = args['mainView'];
      const rightItem = args['swipeView'].getViewById('invite-view');
     
      if (args.data.x <= 0) {     
        const rightDimensions = View.measureChild(
          <View>mainView,
          rightItem,
          layout.makeMeasureSpec(Math.abs(args.data.x), layout.EXACTLY),
          layout.makeMeasureSpec(mainView.getMeasuredHeight() - CONTACT_PADDING, layout.EXACTLY));
     
        View.layoutChild(<View>mainView, rightItem,
          mainView.getMeasuredWidth() - rightDimensions.measuredWidth,
          0,
          mainView.getMeasuredWidth(),
          rightDimensions.measuredHeight
        );
      }
    }
  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 15 Jun 2017 Link to this post

    Hello Ericky,

    I can confirm that the described scenario is an issue with the current version of nativescript-telerik0ui plugin.
    The good news is that this bug is already addressed and included in our next release (which is expected roughly at the end of the month). Meanwhile, you can test the fix in your application by applying the next version in your project.
    E.g.
    rm -rf node_modules platforms hooks
    tns plugin remove nativescript-telerik-ui-pro
    tns plugin add nativescript-telerik-ui-pro@next
    tns run android
    If your terminal does not support rm, then delete the folders manually.

    Note: We have noticed that you are using the plugin nativescript-openurl which was deprecated some time ago. I would recommend using the built-in openURL method from the NativeScript modules instead of the deprecated plugin.
    E.g.
    import { openUrl } from "utils/utils";
     
    openUrl("your-link-here");
    The usage is the same as in the plugin you are using, but this module is up to date with all the latest changes. More about all that you can use from "utils/utils" module can be found here.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 15 Jun 2017 Link to this post

    Hello Nikolay,

     

    Thank you very much for the information.

Back to Top