1. Advisor
  2. @cycle/dom
  3. functions
  4. @cycle/dom.strong
View all @cycle/dom analysis

How to use the @cycle/dom.strong 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.

github shesek / spark-wallet / client / src / views / home.js View on Github external
const itemRenderer = ({ feedActive, unitf, expert }) => ([ type, ts, msat, obj ]) => {
  const fid     = `${type}-${obj.id || obj.pay_index}`
      , visible = fid == feedActive
      , tsStr   = new Date(ts*1000).toLocaleString()

  return li('.list-group-item', { class: { active: visible, 'list-group-item-action': !visible }, dataset: { feedToggle: fid } }, [
    div('.clearfix', [
      type === 'in' ? span('.amt.badge.badge-success.badge-pill', `+${ unitf(msat) }`)
                    : span('.amt.badge.badge-danger.badge-pill', `-${ unitf(msat) }`)
    , span('.ts.badge.badge-secondary.float-right', { attrs: { title: tsStr } }, ago(ts))
    ])
  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong(type == 'in' ? 'Received:' : 'Sent:'), ' ', tsStr ])
    , type == 'in' && obj.msatoshi_received > obj.msatoshi ? li([ strong('Overpayment:'), ' ', unitf(obj.msatoshi_received-obj.msatoshi) ]) : ''
    , type == 'out' && obj.msatoshi ? li([ strong('Fee:'), ' ', feesText(obj, unitf) ]) : ''
    , type == 'out' && obj.route ? li([ strong('Route:'), ' ', obj.route.length > 1 ? `${obj.route.length} hops` : 'direct payment'
                                                        , ' ', small(`(${ordinal(obj.sendpay_tries)} attempt)`) ]) : ''
    , showDesc(obj) ? li([ strong('Description:'), ' ', span('.break-word', obj.description) ]) : ''
    , type == 'out' ? li([ strong('Destination:'), ' ', small('.break-all', obj.destination) ]) : ''
    , li([ strong('Payment hash:'), ' ', small('.break-all', obj.payment_hash) ])
    , expert ? li(yaml(obj)) : ''
    ])
  ])
}
github shesek / spark-wallet / client / src / views / home.js View on Github external
const itemRenderer = ({ feedActive, unitf, expert }) => ([ type, ts, msat, obj ]) => {
  const fid     = `${type}-${obj.id || obj.pay_index}`
      , visible = fid == feedActive
      , tsStr   = new Date(ts*1000).toLocaleString()

  return li('.list-group-item', { class: { active: visible, 'list-group-item-action': !visible }, dataset: { feedToggle: fid } }, [
    div('.clearfix', [
      type === 'in' ? span('.amt.badge.badge-success.badge-pill', `+${ unitf(msat) }`)
                    : span('.amt.badge.badge-danger.badge-pill', `-${ unitf(msat) }`)
    , span('.ts.badge.badge-secondary.float-right', { attrs: { title: tsStr } }, ago(ts))
    ])
  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong(type == 'in' ? 'Received:' : 'Sent:'), ' ', tsStr ])
    , type == 'in' && obj.msatoshi_received > obj.msatoshi ? li([ strong('Overpayment:'), ' ', unitf(obj.msatoshi_received-obj.msatoshi) ]) : ''
    , type == 'out' && obj.msatoshi ? li([ strong('Fee:'), ' ', feesText(obj, unitf) ]) : ''
    , type == 'out' && obj.route ? li([ strong('Route:'), ' ', obj.route.length > 1 ? `${obj.route.length} hops` : 'direct payment'
                                                        , ' ', small(`(${ordinal(obj.sendpay_tries)} attempt)`) ]) : ''
    , showDesc(obj) ? li([ strong('Description:'), ' ', span('.break-word', obj.description) ]) : ''
    , type == 'out' ? li([ strong('Destination:'), ' ', small('.break-all', obj.destination) ]) : ''
    , li([ strong('Payment hash:'), ' ', small('.break-all', obj.payment_hash) ])
    , expert ? li(yaml(obj)) : ''
    ])
  ])
}
github laszlokorte / tams-tools / app / components / pla / view / cost-panel.js View on Github external
export default (pla) => {
  const costs = calcCosts(pla);

  const gate = costs.gates === 1 ? 'gate' : 'gates';
  const inputs = costs.inputs === 1 ? 'input' : 'inputs';

  return div('.stage-bar', [
    strong('Costs:'),
    ` ${costs.gates} ${gate} with ${costs.inputs} ${inputs}`,
  ]);
};
github shesek / spark-wallet / client / src / views / channels.js View on Github external
, theirs > 0 ? bar('Theirs', 'info', theirs) : ''
    ])

  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong('Channel ID:'), ' ', chan.short_channel_id || small('.break-all', chan.channel_id) ])
    , (expert && chan.short_channel_id) ? li([ strong('Full Channel ID:'), ' ', small('.break-all', chan.channel_id) ]) : ''
    , li([ strong('Status:'), ' ', chan.state.replace(/_/g, ' ') ])

    , !isClosed ? li([ strong('Spendable:'), ' ', unitf(spendable) ]) : ''
    , !isClosed ? li([ strong('Receivable:'), ' ', unitf(receivable) ]) : ''

    , isClosed || expert ? li([ strong('Ours:'), ' ', unitf(ours) ]) : ''
    , isClosed || expert ? li([ strong('Theirs:'), ' ', unitf(theirs) ]) : ''

    , channelAge ? li([ strong('Age:'), ' ', `${channelAge} blocks (${channelAgeFuz})` ]) : ''
    , li([ strong('Peer:'), ' ', small('.break-all', peer.id), ' ', em(`(${peer.connected ? 'connected' : 'disconnected'})`) ])
    , expert ? li([ strong('Funding TXID:'), ' ', small('.break-all', chan.funding_txid) ]) : ''
    , expert ? li('.status-text', chan.status.join('\n')) : ''

    , !isClosed ? li('.text-center'
      , button('.btn.btn-link.btn-sm', { dataset: { closeChannel: chan.channel_id, closeChannelPeer: peer.id } }, 'Close channel')) : ''

    , expert ? li(yaml({ peer: omitKey('channels', peer), ...omitKey('status', chan) })) : ''
    ])
  ])
}
github shesek / spark-wallet / client / src / views / channels.js View on Github external
, receivable > 0 ? bar('Receivable', 'info', receivable) : ''
    , thrReserve ? bar('Their reserve', 'warning', thrReserve) : ''
    ] : [
      ours   > 0 ? bar('Ours', 'success', ours) : ''
    , theirs > 0 ? bar('Theirs', 'info', theirs) : ''
    ])

  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong('Channel ID:'), ' ', chan.short_channel_id || small('.break-all', chan.channel_id) ])
    , (expert && chan.short_channel_id) ? li([ strong('Full Channel ID:'), ' ', small('.break-all', chan.channel_id) ]) : ''
    , li([ strong('Status:'), ' ', chan.state.replace(/_/g, ' ') ])

    , !isClosed ? li([ strong('Spendable:'), ' ', unitf(spendable) ]) : ''
    , !isClosed ? li([ strong('Receivable:'), ' ', unitf(receivable) ]) : ''

    , isClosed || expert ? li([ strong('Ours:'), ' ', unitf(ours) ]) : ''
    , isClosed || expert ? li([ strong('Theirs:'), ' ', unitf(theirs) ]) : ''

    , channelAge ? li([ strong('Age:'), ' ', `${channelAge} blocks (${channelAgeFuz})` ]) : ''
    , li([ strong('Peer:'), ' ', small('.break-all', peer.id), ' ', em(`(${peer.connected ? 'connected' : 'disconnected'})`) ])
    , expert ? li([ strong('Funding TXID:'), ' ', small('.break-all', chan.funding_txid) ]) : ''
    , expert ? li('.status-text', chan.status.join('\n')) : ''

    , !isClosed ? li('.text-center'
      , button('.btn.btn-link.btn-sm', { dataset: { closeChannel: chan.channel_id, closeChannelPeer: peer.id } }, 'Close channel')) : ''

    , expert ? li(yaml({ peer: omitKey('channels', peer), ...omitKey('status', chan) })) : ''
    ])
  ])
}
github shesek / spark-wallet / client / src / views / pay.js View on Github external
const confirmPay = payreq => ({ unitf, amtData, conf: { expert } }) =>
  form('.conf-pay', { attrs: { do: 'confirm-pay' }, dataset: payreq }, [
    ...(payreq.msatoshi ? [
      h2('Confirm payment')
    , p([ 'Confirm paying ', strong('.toggle-unit', unitf(payreq.msatoshi)), '?'])
    ] : [
      h2('Send payment')
    , formGroup('Amount to pay', amountField(amtData, 'custom_msat', true))
    ])

  , showDesc(payreq) ? p([ 'Description: ', span('.text-muted.break-word', payreq.description) ]) : ''

  , div('.form-buttons', [
      button('.btn.btn-lg.btn-primary', { attrs: { type: 'submit' } }, payreq.msatoshi ? `Pay ${unitf(payreq.msatoshi)}` : 'Send Payment')
    , ' '
    , a('.btn.btn-lg.btn-secondary', { attrs: { href: '#/' } }, 'Cancel')
    ])

  , expert ? yaml(payreq) : ''
  ])
github shesek / spark-wallet / client / src / views / channels.js View on Github external
, div('.progress.channel-bar', !isClosed ? [
      ourReserve ? bar('Our reserve', 'warning', ourReserve) : ''
    , spendable  > 0 ? bar('Spendable', 'success', spendable) : ''
    , receivable > 0 ? bar('Receivable', 'info', receivable) : ''
    , thrReserve ? bar('Their reserve', 'warning', thrReserve) : ''
    ] : [
      ours   > 0 ? bar('Ours', 'success', ours) : ''
    , theirs > 0 ? bar('Theirs', 'info', theirs) : ''
    ])

  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong('Channel ID:'), ' ', chan.short_channel_id || small('.break-all', chan.channel_id) ])
    , (expert && chan.short_channel_id) ? li([ strong('Full Channel ID:'), ' ', small('.break-all', chan.channel_id) ]) : ''
    , li([ strong('Status:'), ' ', chan.state.replace(/_/g, ' ') ])

    , !isClosed ? li([ strong('Spendable:'), ' ', unitf(spendable) ]) : ''
    , !isClosed ? li([ strong('Receivable:'), ' ', unitf(receivable) ]) : ''

    , isClosed || expert ? li([ strong('Ours:'), ' ', unitf(ours) ]) : ''
    , isClosed || expert ? li([ strong('Theirs:'), ' ', unitf(theirs) ]) : ''

    , channelAge ? li([ strong('Age:'), ' ', `${channelAge} blocks (${channelAgeFuz})` ]) : ''
    , li([ strong('Peer:'), ' ', small('.break-all', peer.id), ' ', em(`(${peer.connected ? 'connected' : 'disconnected'})`) ])
    , expert ? li([ strong('Funding TXID:'), ' ', small('.break-all', chan.funding_txid) ]) : ''
    , expert ? li('.status-text', chan.status.join('\n')) : ''

    , !isClosed ? li('.text-center'
      , button('.btn.btn-link.btn-sm', { dataset: { closeChannel: chan.channel_id, closeChannelPeer: peer.id } }, 'Close channel')) : ''

    , expert ? li(yaml({ peer: omitKey('channels', peer), ...omitKey('status', chan) })) : ''
    ])
  ])
github shesek / spark-wallet / client / src / views / home.js View on Github external
const itemRenderer = ({ feedActive, unitf, expert }) => ([ type, ts, msat, obj ]) => {
  const fid     = `${type}-${obj.id || obj.pay_index}`
      , visible = fid == feedActive
      , tsStr   = new Date(ts*1000).toLocaleString()

  return li('.list-group-item', { class: { active: visible, 'list-group-item-action': !visible }, dataset: { feedToggle: fid } }, [
    div('.clearfix', [
      type === 'in' ? span('.amt.badge.badge-success.badge-pill', `+${ unitf(msat) }`)
                    : span('.amt.badge.badge-danger.badge-pill', `-${ unitf(msat) }`)
    , span('.ts.badge.badge-secondary.float-right', { attrs: { title: tsStr } }, ago(ts))
    ])
  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong(type == 'in' ? 'Received:' : 'Sent:'), ' ', tsStr ])
    , type == 'in' && obj.msatoshi_received > obj.msatoshi ? li([ strong('Overpayment:'), ' ', unitf(obj.msatoshi_received-obj.msatoshi) ]) : ''
    , type == 'out' && obj.msatoshi ? li([ strong('Fee:'), ' ', feesText(obj, unitf) ]) : ''
    , type == 'out' && obj.route ? li([ strong('Route:'), ' ', obj.route.length > 1 ? `${obj.route.length} hops` : 'direct payment'
                                                        , ' ', small(`(${ordinal(obj.sendpay_tries)} attempt)`) ]) : ''
    , showDesc(obj) ? li([ strong('Description:'), ' ', span('.break-word', obj.description) ]) : ''
    , type == 'out' ? li([ strong('Destination:'), ' ', small('.break-all', obj.destination) ]) : ''
    , li([ strong('Payment hash:'), ' ', small('.break-all', obj.payment_hash) ])
    , expert ? li(yaml(obj)) : ''
    ])
  ])
}
github shesek / spark-wallet / client / src / views / channels.js View on Github external
ourReserve ? bar('Our reserve', 'warning', ourReserve) : ''
    , spendable  > 0 ? bar('Spendable', 'success', spendable) : ''
    , receivable > 0 ? bar('Receivable', 'info', receivable) : ''
    , thrReserve ? bar('Their reserve', 'warning', thrReserve) : ''
    ] : [
      ours   > 0 ? bar('Ours', 'success', ours) : ''
    , theirs > 0 ? bar('Theirs', 'info', theirs) : ''
    ])

  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong('Channel ID:'), ' ', chan.short_channel_id || small('.break-all', chan.channel_id) ])
    , (expert && chan.short_channel_id) ? li([ strong('Full Channel ID:'), ' ', small('.break-all', chan.channel_id) ]) : ''
    , li([ strong('Status:'), ' ', chan.state.replace(/_/g, ' ') ])

    , !isClosed ? li([ strong('Spendable:'), ' ', unitf(spendable) ]) : ''
    , !isClosed ? li([ strong('Receivable:'), ' ', unitf(receivable) ]) : ''

    , isClosed || expert ? li([ strong('Ours:'), ' ', unitf(ours) ]) : ''
    , isClosed || expert ? li([ strong('Theirs:'), ' ', unitf(theirs) ]) : ''

    , channelAge ? li([ strong('Age:'), ' ', `${channelAge} blocks (${channelAgeFuz})` ]) : ''
    , li([ strong('Peer:'), ' ', small('.break-all', peer.id), ' ', em(`(${peer.connected ? 'connected' : 'disconnected'})`) ])
    , expert ? li([ strong('Funding TXID:'), ' ', small('.break-all', chan.funding_txid) ]) : ''
    , expert ? li('.status-text', chan.status.join('\n')) : ''

    , !isClosed ? li('.text-center'
      , button('.btn.btn-link.btn-sm', { dataset: { closeChannel: chan.channel_id, closeChannelPeer: peer.id } }, 'Close channel')) : ''

    , expert ? li(yaml({ peer: omitKey('channels', peer), ...omitKey('status', chan) })) : ''
    ])
  ])
}
github shesek / spark-wallet / client / src / views / home.js View on Github external
return li('.list-group-item', { class: { active: visible, 'list-group-item-action': !visible }, dataset: { feedToggle: fid } }, [
    div('.clearfix', [
      type === 'in' ? span('.amt.badge.badge-success.badge-pill', `+${ unitf(msat) }`)
                    : span('.amt.badge.badge-danger.badge-pill', `-${ unitf(msat) }`)
    , span('.ts.badge.badge-secondary.float-right', { attrs: { title: tsStr } }, ago(ts))
    ])
  , !visible ? '' : ul('.list-unstyled.my-3', [
      li([ strong(type == 'in' ? 'Received:' : 'Sent:'), ' ', tsStr ])
    , type == 'in' && obj.msatoshi_received > obj.msatoshi ? li([ strong('Overpayment:'), ' ', unitf(obj.msatoshi_received-obj.msatoshi) ]) : ''
    , type == 'out' && obj.msatoshi ? li([ strong('Fee:'), ' ', feesText(obj, unitf) ]) : ''
    , type == 'out' && obj.route ? li([ strong('Route:'), ' ', obj.route.length > 1 ? `${obj.route.length} hops` : 'direct payment'
                                                        , ' ', small(`(${ordinal(obj.sendpay_tries)} attempt)`) ]) : ''
    , showDesc(obj) ? li([ strong('Description:'), ' ', span('.break-word', obj.description) ]) : ''
    , type == 'out' ? li([ strong('Destination:'), ' ', small('.break-all', obj.destination) ]) : ''
    , li([ strong('Payment hash:'), ' ', small('.break-all', obj.payment_hash) ])
    , expert ? li(yaml(obj)) : ''
    ])
  ])
}

@cycle/dom

The standard DOM Driver for Cycle.js, based on Snabbdom

GitHub
MIT
Latest version published 3 years ago

Package Health Score

65 / 100
Full package analysis

Popular @cycle/dom functions

Similar packages