Problem with CollectionView Part 3

[ishigo1987]

Problem description

Last point, when the cellType method is a function, the updateCell method runs ad infinitum even if there is only one element in the createCell method. On the snippet try to display the content of console.log() you will see.

Expected behavior

UpdateCell run only on the number of cells displayed on the screen.

Environment

• Tabris.js version: 3.7, 3.7.1, 3.8(last Nightly)
• Device: <!-- Huawei P10 Lite, 3GB RAM, Octo-core 2.3 Ghz
• OS: Android 8

Code snippet

const{ CollectionView, Composite, contentView} = require("tabris");
const messagesArray = [{message_type: "audio", is_receive_or_sent: "sent"}]
                new CollectionView({
                    left:0,
                    right:0,
                    top: 0,
                    bottom: 0,
                    itemCount: messagesArray.length,
                    id: "collectionViewMessages",
                    cellHeight: (index, cellType)=>{
                          if(cellType.messageType === "audio"){
                               return 64;
                          }
                    },
                    cellType: (index)=>{
                        return {
                           messageType: messagesArray[index]?.message_type,
                           isReceiveOrSent: messagesArray[index]?.is_receive_or_sent
                        };
                    },
                    createCell: (cellType)=>{
                         const cell = new Composite({ left: 0, right: 0, background:"red" });
                         if(cellType?.messageType === "audio"){
                             if(cellType?.isReceiveOrSent === "sent"){
                                new Composite({right: 15, centerY:0, height: 60, padding: 10, cornerRadius: 5, background: "yellow"}).appendTo(cell);
                             }
                         }
                         return cell;
                    },
                    updateCell: (cell, index)=>{
                      console.log(cell)
                    }
                }).appendTo(contentView);

[mpost]

Thank you for opening the series of CollectionView issues. We will look into them.

[elshadsm]

@ishigo1987 thanks for reporting the issue.

When I looked at your snippet, I realized that you are returning an object in the cellType callback function. However, it must return a name for the cell type. In short, the return only needs to be string or null.

I have made small updates to your snippet and suggest using the collection view that way:

const { CollectionView, Composite, contentView } = require('tabris');

const messagesArray = [
  { type: 'audio', message: 'audio message here' },
  { type: 'sent', message: 'sent message here' }];

new CollectionView({
  id: 'collectionView',
  left: 0,
  top: 0,
  right: 0,
  bottom: 0,
  itemCount: messagesArray.length,
  cellHeight: (_index, cellType) => {
    if (cellType === 'audio') {
      return 64;
    }
    return 'auto';
  },
  cellType: (index) => messagesArray[index].type,
  createCell: (cellType) => {
    const cell = new Composite({ left: 0, right: 0, background: 'red' });
    if (cellType === 'audio') {
      new Composite({
        right: 16,
        centerY: 0,
        height: 60,
        padding: 12,
        cornerRadius: 4,
        background: 'yellow'
      }).appendTo(cell);
    } else if (cellType === 'sent') {
      new Composite({
        right: 16,
        centerY: 0,
        height: 50,
        padding: 12,
        cornerRadius: 4,
        background: 'green'
      }).appendTo(cell);
    }
    return cell;
  },
  updateCell: (cell, _index) => console.log(cell)
}).appendTo(contentView);

[ishigo1987]

Ok thank you @elshadsm i will check it ASAP