blessed
blessed copied to clipboard
How do you update the style of an existing element?
I'd like to update the style of an existing element after it has been created. I tried the following code but it does not work. (Relevant bit is at the bottom.) I can't seem to find a setStyle
or updateStyle
function anywhere. Am I missing something, or should I make this issue a feature request?
const blessed = require('blessed')
const screen = blessed.screen({
smartCSR: true,
fullUnicode: true,
})
const table = blessed.listtable({
top: 0,
left: 'center',
width: '100%',
height: '50%',
align: 'left',
tags: true,
keys: true,
border: 'line',
scrollbar: {
ch: ' ',
track: {
bg: 'blue',
},
style: {
inverse: true,
},
},
style: {
// This example is trying to toggle the cell style on focus/blur
cell: {
selected: {
bg: 'blue',
},
},
focus: {
border: {
fg: 'blue',
},
},
},
data: [
['Column A', 'Column B'],
['1-A', '1-B'],
['2-A', '2-B'],
['3-A', '3-B'],
['4-A', '4-B'],
['5-A', '5-B'],
['6-A', '6-B'],
['7-A', '7-B'],
['8-A', '8-B'],
['9-A', '9-B'],
],
})
screen.append(table)
const logger = blessed.log({
bottom: 0,
left: 'center',
width: '100%',
height: '50%',
tags: true,
keys: true,
scrollback: 100,
scrollbar: {
ch: ' ',
track: {
bg: 'blue',
},
style: {
inverse: true,
},
},
border: 'line',
style: {
focus: {
border: {
fg: 'blue',
},
},
},
})
screen.append(logger)
screen.render()
screen.key(['C-c'], () => {
screen.destroy()
return process.exit(0)
})
screen.key(['\u001b[Z', '[Z', '\t', 'tab'], () => {
if (screen.focused === table) {
logger.focus()
screen.render()
} else if (screen.focused === logger) {
table.focus()
logger.setScrollPerc(100)
screen.render()
}
})
table.on('focus', () => {
// Trying to set selected cell style
// DOES NOT WORK
table.style.cell = {
selected: {
bg: 'blue',
},
}
screen.render()
logger.log(
'selected cell bg should be set to blue, press {green-fg}TAB{/} to toggle focused element'
)
})
table.on('blur', () => {
// Trying to unset selected cell style
// DOES NOT WORK
delete table.style.cell
screen.render()
logger.log(
'selected cell bg should be unset, press {green-fg}TAB{/} to toggle focused element'
)
})
table.focus()