How to use the @cycle/dom.th function in @cycle/dom
To help you get started, we’ve selected a few @cycle/dom examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
laszlokorte / tams-tools / app / components / kv / view_old.js View on Github 
const renderTableFoot = (colCount, {left, right, bottom}) =>
bottom !== null && tr('.kv-table-row-title.kv-row-bottom', [
left !== null &&
th('.kv-table-corner') || null,
bottom !== null &&
th('.kv-table-cell-title.kv-cell-neg',
{colSpan: colCount / 2}, `~${bottom}`) || null,
bottom !== null &&
th('.kv-table-cell-title.kv-cell-pos',
{colSpan: colCount / 2}, bottom) || null,
right !== null &&
th('.kv-table-corner') || null,
]) || null
;const renderTableRowEnd = (rowIndex, {right}) =>
right !== null && (
(rowIndex === 0 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
`~${right}`)) ||
(rowIndex === 1 &&
th('.kv-table-cell-title.kv-cell-pos.kv-col-right', {
rowSpan: 2,
}, right)) ||
(rowIndex === 3 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
`${right}`))
) || null
;export default (colCount, {top, left, right, bottom}, inputsEditable) =>
top !== null && [
tr('.kv-table-row-edit.kv-row-top', {
key: 'head-row-edit',
},[
left !== null &&
th('.kv-table-corner-edit', {colSpan: 2}) || null,
top !== null &&
th('.kv-table-cell-edit.kv-cell-neg') || null,
top !== null &&
th('.kv-table-cell-edit.kv-cell-pos',
{colSpan: colCount / 2},
labelCell(top, inputsEditable)
) || null,
bottom !== null &&
th('.kv-table-cell-edit.kv-cell-neg') || null,
right !== null && th('.kv-table-corner-edit', {colSpan: 2}) || null,
]),
tr('.kv-table-row-title.kv-row-top', {export const renderTableRowStart = (
rowIndex, rowCount, {left}, inputsEditable
) =>
left !== null && [
rowIndex === 0 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-left', {
rowSpan: (rowCount / 2),
colSpan: 2,
}, [
span(`~${left.name}`),
]) || null,
rowIndex === rowCount / 2 &&
th('.kv-table-cell-title.kv-cell-pos.kv-col-left-edit', {
rowSpan: (rowCount / 2),
}, labelCell(left, inputsEditable)) || null,
rowIndex === rowCount / 2 &&
th('.kv-table-cell-title.kv-cell-pos.kv-col-left', {
rowSpan: (rowCount / 2),
}, span(`${left.name}`)) || null,const renderTableRowStart = (rowIndex, rowCount, {left}) =>
left !== null && [
rowIndex === 0 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-left', {
rowSpan: (rowCount / 2),
}, `~${left}`) || null,
rowIndex === rowCount / 2 &&
th('.kv-table-cell-title.kv-cell-pos.kv-col-left', {
rowSpan: (rowCount / 2),
}, left) || null,
] || null
;const renderTableRowEnd = (rowIndex, {right}) =>
right !== null && (
(rowIndex === 0 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
`~${right}`)) ||
(rowIndex === 1 &&
th('.kv-table-cell-title.kv-cell-pos.kv-col-right', {
rowSpan: 2,
}, right)) ||
(rowIndex === 3 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
`${right}`))
) || null
;const renderTableHead = (colCount, {top, left, right, bottom}) =>
top !== null &&
tr('.kv-table-row-title.kv-row-top', {
key: 'head-row',
}, [
left !== null &&
th('.kv-table-corner') || null,
top !== null &&
th('.kv-table-cell-title.kv-cell-neg', `~${top}`) || null,
top !== null &&
th('.kv-table-cell-title.kv-cell-pos',
{colSpan: colCount / 2}, top) || null,
bottom !== null &&
th('.kv-table-cell-title.kv-cell-neg',
`~${top}`) || null,
right !== null && th('.kv-table-corner') || null,
]) || null
;export const renderTableRowEnd = (rowIndex, {right}, inputsEditable) =>
right !== null && (
(rowIndex === 0 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
{colSpan: 2}, [
span(`~${right.name}`),
])) ||
(rowIndex === 1 && [
th('.kv-table-cell-title.kv-cell-pos.kv-col-right', {
rowSpan: 2,
}, span(`${right.name}`)),
th('.kv-table-cell-title.kv-cell-pos.kv-col-right-edit', {
rowSpan: 2,
}, labelCell(right, inputsEditable)),
]) ||
(rowIndex === 3 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
span(`${right.name}`))
)
) || nullconst renderTableRowStart = (rowIndex, rowCount, {left}) =>
left !== null && [
rowIndex === 0 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-left', {
rowSpan: (rowCount / 2),
}, `~${left}`) || null,
rowIndex === rowCount / 2 &&
th('.kv-table-cell-title.kv-cell-pos.kv-col-left', {
rowSpan: (rowCount / 2),
}, left) || null,
] || null
;right !== null && (
(rowIndex === 0 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
{colSpan: 2}, [
span(`~${right.name}`),
])) ||
(rowIndex === 1 && [
th('.kv-table-cell-title.kv-cell-pos.kv-col-right', {
rowSpan: 2,
}, span(`${right.name}`)),
th('.kv-table-cell-title.kv-cell-pos.kv-col-right-edit', {
rowSpan: 2,
}, labelCell(right, inputsEditable)),
]) ||
(rowIndex === 3 &&
th('.kv-table-cell-title.kv-cell-neg.kv-col-right',
span(`${right.name}`))
)
) || null
;@cycle/dom
The standard DOM Driver for Cycle.js, based on Snabbdom
