Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(android): TableViewRow/ListItem added after theme switch should use current theme #12622

Merged
merged 4 commits into from Mar 24, 2021

Conversation

jquick-axway
Copy link
Contributor

@jquick-axway jquick-axway commented Mar 19, 2021

JIRA:
https://jira.appcelerator.org/browse/TIMOB-28301

Summary:
The ListView and TableView correctly updates their rows when switching themes, but rows added afterwards still use the previous theme (ie: activity context). This PR correct this.


ListView Test:

  1. Build and run the below on Android 10 or higher.
  2. Tap on the "Home" button.
  3. Go to system's "Settings\Display" and toggle the Dark/Light theme.
  4. Resume the app.
  5. Verify row text is white for the dark theme or gray for light theme.
  6. Tap on the "Reload" button to clear and re-add rows.
  7. Verify row text is the same color as before. (Used to use previous theme's text color.)
function createListViewSectionItems() {
	const items = [];
	const maxIndex = Math.floor(Math.random() * 100) + 1;
	for (let index = 1; index <= maxIndex; index++) {
		items.push({ properties: { title: "Row " + index } });
	}
	return items;
}

const window = Ti.UI.createWindow();
const listView = Ti.UI.createListView({
	sections: [Ti.UI.createListSection({
		headerTitle: "ListView",
		items: createListViewSectionItems(),
	})],
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
});
listView.addEventListener("itemclick", (e) => {
	Ti.API.info(`@@@ ListView item click: ${e.itemIndex + 1}`);
});
window.add(listView);
const reloadButton = Ti.UI.createButton({
	title: "Reload",
	bottom: "10dp",
	right: "10dp",
});
reloadButton.addEventListener("click", () => {
	Ti.API.info("@@@ Reloading ListView items.");
	listView.sections[0].setItems(createListViewSectionItems());
});
window.add(reloadButton);
window.open();

TableView Test:

  1. Build and run the below on Android 10 or higher.
  2. Tap on the "Home" button.
  3. Go to system's "Settings\Display" and toggle the Dark/Light theme.
  4. Resume the app.
  5. Verify row text is white for the dark theme or gray for light theme.
  6. Tap on the "Reload" button to clear and re-add rows.
  7. Verify row text is the same color as before. (Used to use previous theme's text color.)
function createTableData() {
	const tableData = [];
	const maxIndex = Math.floor(Math.random() * 100) + 1;
	for (let index = 1; index <= maxIndex; index++) {
		const row = Ti.UI.createTableViewRow();
		row.add(Ti.UI.createLabel({
			text: `Row  ${index}`,
			top: "8dp",
			bottom: "8dp",
			height: Ti.UI.SIZE,
		}));
		tableData.push(row);
	}
	return tableData;
}

const window = Ti.UI.createWindow();
const tableView = Ti.UI.createTableView({
	data: createTableData(),
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
});
tableView.addEventListener("click", (e) => {
	Ti.API.info(`Clicked Row: ${e.index + 1}`);
	e.row.backgroundColor = "orange";
});
window.add(tableView);
const reloadButton = Ti.UI.createButton({
	title: "Reload",
	bottom: "10dp",
	right: "10dp",
});
reloadButton.addEventListener("click", () => {
	Ti.API.info("@@@ Reloading table data.");
	tableView.data = createTableData();
});
window.add(reloadButton);
window.open();

@jquick-axway jquick-axway added android improvement no tests backport 10_2_X when applied, PRs with this label will get an auto-generated backport to 10_2_X branch on merge labels Mar 19, 2021
@jquick-axway jquick-axway added this to the 10.1.0 milestone Mar 19, 2021
@build build requested a review from a team March 19, 2021 05:12
@build
Copy link
Contributor

build commented Mar 19, 2021

Fails
🚫

Test suite crashed on iOS simulator. Please see the crash log for more details.

Messages
📖 ✊ The commits in this PR match our conventions! Feel free to Rebase and Merge this PR when ready.
📖

✅ All tests are passing
Nice one! All 11032 tests are passing.
(There are 735 skipped tests not included in that total)

Generated by 🚫 dangerJS against 435bb5f

Copy link
Contributor

@garymathews garymathews left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CR: PASS

@lokeshchdhry
Copy link
Contributor

FR Passed.
The rows now are added afterwards use the new theme. The text color changes as expected when the theme is switched from light/dark & vice versa.

@sgtcoolguy sgtcoolguy merged commit 5c5efc0 into tidev:master Mar 24, 2021
@build build removed the backport 10_2_X when applied, PRs with this label will get an auto-generated backport to 10_2_X branch on merge label Mar 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants