How to use the @cycle/dom.span 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.
jlesquembre / autopilot / electron_ui / src / components / selector.js View on Github 
return state$.map(({showOptions, selectedOption, options, labelName}) =>
div({className: styles.input_field}, [
div({className: styles.select_wrapper}, [
span({className: styles.caret}, '▼'),
input({id: 'input' ,className: styles.input /*select_dropdown*/, readOnly: true, type: 'text', value: `${selectedOption}`}),
span({className: styles.bar}),
(!showOptions ? null : // nulls are just ignored by hyperscript
ul({className: styles.dropdownContent, },
options.map(option => li({className: (option == selectedOption? styles.dropLiActive:styles.dropLi)},
[span({className: styles.dropLiSpan}, option) ] ))
))
]),
label({className: styles.labelActive}, labelName)
])
);div(
'.dtc.v-mid.tc',
{ style: { width: '3rem' } },
simple == false
? img('.br-100.w2', {
attrs: {
src: data.image
? data.image
: 'images/avatar.svg',
},
})
: h('small.light-silver', hour(data.timestamp))
),
div('.dtc.v-top.pl3', [
simple == false
? span('.fw6.lh-title.black.db.mb1', [
data.username,
role.length > 0
? span(
'.blue.ml1',
role.map(() =>
span('.icon-star-filled')
)
)
: span(),
span('.ml1.fw5.silver', hour(data.timestamp)),
])
: span(),
p(
'.fw4.mt0.mb0.mid-gray',
virtualize(
`<span>${md.renderInline(data.content)}</span>`div('.flex.items-center', [
div(
'.flex-auto',
category != false
? a(
'.category',
{
attrs: {
href: `/c/${category.slug}`,
},
},
category.name
)
: a('.category', span('.loading'))
),
post.pinned ? span('.icon-pin.pinned-post') : null,
]),
div('.flex.items-center', [
div('.flex-auto', [
h1(
a(
'.link',
{
attrs: { href },
dataset: {
postId: post.id,
},
},
post.title
)
),
div(span('.ago', 'Publicado hace ' + ago(post.created_at))),options.map(option => li({className: (option == selectedOption? styles.dropLiActive:styles.dropLi)},
[span({className: styles.dropLiSpan}, option) ] ))
))export default ({attributes, label, readonly, value, min, max}) =>
div('.spinner' + (
(readonly ? '.state-readonly' : '')
), {
attributes: attributes,
}, [
span('.spinner-label', label),
button('.spinner-button', {
attributes: {'data-spinner-action': 'decrement'},
disabled: min >= value,
}, minusIcon(24)),
span('.spinner-value', value.toString()),
button('.spinner-button', {
attributes: {'data-spinner-action': 'increment'},
disabled: max <= value,
}, plusIcon(24)),
])
;return state$.map(({list, filterName, amountCompleted, amountActive}) => {
return footer(".footer",
{ style: {"display": list.length ? "" : "none"} },
[
span(".todo-count", [
strong(String(amountActive)),
" item" + (amountActive !== 1 ? "s" : "") + " left"
]),
ul(".filters", [
li([
a({
attributes: {"href": "#/"},
className: (!filterName) ? "selected" : ""
}, "All")
]),
li([
a({
attributes: {"href": "#/active"},
className: (filterName === "active") ? "selected" : ""
}, "Active")
]),h2("User"),
p(["Id: ", formatString(user.id)]),
p(["Name: ", formatString(user.username)]),
p(["Email: ", formatString(user.email)]),
p(["Points: ", formatInteger(user.points)]),
p(["Bonus: ", user.bonus ? formatInteger(user.bonus) : "–"]),
p([
...(
navi.isActiveRoute("/users/:id") ?
[] :
[span(a({href: window.unroute("/users/:id", {id: user.id})}, "Detail")), span(" ")]
),
...(
navi.isActiveRoute("/users/:id/edit") ?
[] :
[span(a({href: window.unroute("/users/:id/edit", {id: user.id})}, "Edit")), span(" ")]
),
])
])
)
}const File = ({ path, file, sel }) => {
const { name, updatedAt } = file
const id = `${path}${PATH_SEP}${name}`
let elapsed = ''
if (updatedAt) {
let ago = Math.round((Date.now() - updatedAt) / 1000)
if (ago <= 180) {
elapsed = `${ago}s`
}
}
return li(`.file${ sel === id ? '.selected' : '' }`, [
span('.filename', { data: { id } }, name),
span('.elapsed', { data: { id } }, elapsed)
])
}simple == false
? img('.br-100.w2', {
attrs: {
src: data.image
? data.image
: 'images/avatar.svg',
},
})
: h('small.light-silver', hour(data.timestamp))
),
div('.dtc.v-top.pl3', [
simple == false
? span('.fw6.lh-title.black.db.mb1', [
data.username,
role.length > 0
? span(
'.blue.ml1',
role.map(() =>
span('.icon-star-filled')
)
)
: span(),
span('.ml1.fw5.silver', hour(data.timestamp)),
])
: span(),
p(
'.fw4.mt0.mb0.mid-gray',
virtualize(
`<span>${md.renderInline(data.content)}</span>`
)
),
]),span('.status', status),
': ',
input('.change-text', {
props: {value: text, hidden: !editing},
hook: {
update ({elm}) {
if (editing) {
elm.focus();
elm.selectionStart = text.length;
}
}
}
}),
editing
? ''
: span('.text', text),
button('.delete', 'Delete')
])
);
}@cycle/dom
The standard DOM Driver for Cycle.js, based on Snabbdom
