How to use the @cycle/dom.i 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.
tryanzu / frontend / src / components / post / views / commentView.js View on Github 
return div({ class: { pb3: noPadding == false }, key: comment.id }, [
div('.flex', [
div('.flex-auto', authorView(comment, 'Comentó')),
div([
a(
'.v-mid.pointer.reply-to',
{
class: {
dn: isCurrentUsersComment,
dib: !isCurrentUsersComment,
},
dataset: {
id: noPadding ? comment.reply_to : comment.id,
},
},
[i('.icon-reply-outline'), span('.pl2', 'Responder')]
),
div('.dib.v-mid', [
a(
{
attrs: {
class: classNames(
'dib',
'v-mid',
'mh2',
'btn-icon',
'vote',
{ active: voted === -1 }
),
},
dataset: {
id: comment.id,'v-mid',
'mh2',
'btn-icon',
'vote',
{ active: voted === -1 }
),
},
dataset: {
id: comment.id,
type: 'comment',
intent: 'down',
},
},
[
span(String(comment.votes.down)),
voteIcon('down', i('.icon-thumbs-down')),
]
),
a(
{
attrs: {
class: classNames(
'dib',
'v-mid',
'btn-icon',
'vote',
{ active: voted === 1 }
),
},
dataset: {
id: comment.id,
type: 'comment',const vdom$ = fractal.state$.debug().map((state) => {
return div('.modal-container.config', { style: { width: '640px' } }, [
div('.flex', [
nav([
a(img('.w3', { attrs: { src: '/images/anzu.svg', alt: 'Anzu' } })),
a('.active', [i('.icon-cog.mr1'), 'General']),
a([i('.icon-th-list-outline.mr1'), 'Categorias']),
a([i('.icon-lock-open.mr1'), 'Permisos']),
a([i('.icon-picture-outline.mr1'), 'Diseño'])
]),
div('.flex-auto', [
h2('General'),
form({ attrs: { id: 'update-post' } }, [
div('.form-group', [
label('.b.form-label', 'Nombre del sitio'),
input('#title.form-input', { attrs: { type: 'text', placeholder: 'Ej. Comunidad de Anzu', value: state.site.name, required: true } }),
p('.form-input-hint', 'Mostrado alrededor del sitio, el nombre de tu comunidad.')
]),
div('.form-group', [
label('.b.form-label', 'Descripción del sitio'),
textarea('#content.form-input', {
attrs: {
placeholder: '...',
rows: 3
}}
if (post.user_id === user.id || adminTools({ user })) {
return div('.dropdown.dropdown-right', [
a(
'.dib.btn-icon.gray.ml2.dropdown-toggle',
{ attrs: { tabindex: 0 } },
i('.icon-cog')
),
ul('.menu', { style: { width: '200px' } }, [
li(
'.menu-item',
a(
'.pointer.post-action',
{ dataset: { action: 'update', id: post.id } },
[i('.icon-edit'), t`Editar publicación`]
)
),
li(
'.menu-item',
a(
'.pointer.post-action',
{ dataset: { action: 'delete', id: post.id } },
[i('.icon-trash'), t`Borrar publicación`]
)
),
]),
]);
}
return div([
a('.dib.btn-icon.gray', [return main('.profile.flex-auto', [
section('.fade-in.tc', [
figure(
'.avatar.avatar-xl',
{ style: { borderRadius: '100%' } },
img({
attrs: {
src: user.image,
alt: `Perfil de ${user.username}`,
},
})
),
h1('.ma0.mv2', `${user.username}`),
p(user.description),
div('.mw5.mb3.center', [
i('.icon-crown.gold.f5'),
span('.db.mb2.f5', [
span('.b', number(user.gaming.swords)),
' / reputación',
]),
div('.flex.items-center.mb2', [
span('.ph2', String(level)),
div(
'.bar.bar-sm',
div('.bar-item', {
attrs: { role: 'progressbar' },
style: {
width: `${gapPercent}%`,
},
})
),
span('.ph2', String(level + 1)),state.site.nav.map((link) => {
return div('.input-group.mb2', [
span('.input-group-addon', i('.icon-up-outline')),
span('.input-group-addon', i('.icon-down-outline')),
input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.name, required: true } }),
input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.href, required: true } })
])
})
),}),
i('.form-icon'),
'Mi publicación es una pregunta',
])
),
div(
'.form-group',
label('.form-switch.normal', [
input({
attrs: {
type: 'checkbox',
name: 'disabledComments',
checked: disabledComments,
},
}),
i('.form-icon'),
'No permitir comentarios en esta publicación',
])
),
div(
'.form-group',
label('.form-switch.normal', [
input({
attrs: {
type: 'checkbox',
name: 'pinned',
checked: pinned,
},
}),
i('.form-icon'),
'Publicar como importante',
])state.site.nav.map((link) => {
return div('.input-group.mb2', [
span('.input-group-addon', i('.icon-up-outline')),
span('.input-group-addon', i('.icon-down-outline')),
input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.name, required: true } }),
input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.href, required: true } })
])
})
),@cycle/dom
The standard DOM Driver for Cycle.js, based on Snabbdom
