tidev / titanium-sdk

🚀 Native iOS and Android Apps with JavaScript
https://titaniumsdk.com/
Other
2.76k stars 1.21k forks source link

feat: add swipe actions support for Ti.UI.TableView #14065

Closed hansemannn closed 5 months ago

hansemannn commented 5 months ago

This PR adds support for swipe actions inside the Ti.UI.TableView component. It also refactors the old list view API for edit actions to use the new swipe actions API as well, which brings support for supporting both leading and trailing edit actions.

https://github.com/tidev/titanium-sdk/assets/10667698/b271c11e-5195-4172-bf6f-5a3cede0a0b7

Test Case:

const win = Ti.UI.createWindow({ backgroundColor: 'white' });
const editActions = [ {
    identifier: 'approve',
    title: 'Approve',
    color: 'green',
    state: 'leading'
}, {
    identifier: 'edit',
    title: 'Edit',
    color: 'blue',
    state: 'trailing'
}, {
    identifier: 'insert',
    title: 'Insert',
    color: 'orange' // defaults to "trailing"
}, {
    identifier: 'delete',
    title: 'Delete',
    style: Ti.UI.iOS.ROW_ACTION_STYLE_DESTRUCTIVE,
    state: 'trailing'
} ];

const tableData = [
    {
        title: 'Apples'
    },
    {
        title: 'Bananas'
    },
    {
        editable: true, // used by table views
        canEdit: true, // used by list views
        title: 'Potatoes (swipe!)',
        editActions
    }
];

let selectedIndex = 0;
const [ table, list, tabs ] = [ createTable(), createList(), createTabs() ];

win.add([ table, list, tabs ]);
win.open();

function createTable() {
    const table = Ti.UI.createTableView({ top: 80, data: tableData });
    table.addEventListener('editaction', onEditActionSelected);

    return table;
}

function createList() {
    const listView = Ti.UI.createListView({
        visible: false,
        top: 80,
        sections: [ Ti.UI.createListSection({
            items: tableData.map(cell => ({ properties: cell }))
        }) ]
    });

    listView.addEventListener('editaction', onEditActionSelected);

    return listView;
}

function createTabs() {
    const tabs = Ti.UI.createTabbedBar({ labels: [ 'Table View', 'List View' ], index: selectedIndex, top: 55 });

    tabs.addEventListener('click', ({ index }) => {
        selectedIndex = index;

        if (index === 0) {
            list.visible = false;
            table.visible = true;
        } else {
            list.visible = true;
            table.visible = false;
        }
    });

    return tabs;
}

function onEditActionSelected(event) {
    console.warn(event);

    if (event.identifier === 'delete') {
        if (selectedIndex === 0) {
            table.deleteRow(event.row);
        } else {
            list.sections[0].deleteItemsAt(event.itemIndex, 1);
        }
    }
}
m1ga commented 5 months ago

Tested the demo code and it runs fine. Items show up and the events are fired. But didn't do any other tests or checks.

dlewis23 commented 5 months ago

Tested this myself today on my app and everything works great. I added it to two tables with no issues.

designbymind commented 5 months ago

Working great on my end as well. Awesome work! 🪄