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.

github jlesquembre / autopilot / electron_ui / src / components / selector.js View on Github external
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)
      ])
      );
github tryanzu / frontend / src / components / chat / view.js View on Github external
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>`
github tryanzu / frontend / src / components / user.js View on Github external
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))),
github jlesquembre / autopilot / electron_ui / src / components / selector.js View on Github external
options.map(option => li({className: (option == selectedOption? styles.dropLiActive:styles.dropLi)},
                                        [span({className: styles.dropLiSpan}, option) ] ))
            ))
github laszlokorte / tams-tools / app / components / kv / view / spinner / index.js View on Github external
export default ({attributes, label, readonly, value, min, max}) =&gt;
  div('.spinner' + (
    (readonly ? '.state-readonly' : '')
  ), {
    attributes: attributes,
  }, [
    span('.spinner-label', label),
    button('.spinner-button', {
      attributes: {'data-spinner-action': 'decrement'},
      disabled: min &gt;= value,
    }, minusIcon(24)),
    span('.spinner-value', value.toString()),
    button('.spinner-button', {
      attributes: {'data-spinner-action': 'increment'},
      disabled: max &lt;= value,
    }, plusIcon(24)),
  ])
;
github milankinen / stanga / examples / 08-todomvc / components / Footer.js View on Github external
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")
          ]),
github ivan-kleshnin / cyclejs-examples / 3.0-crud / src / chunks / user.card.js View on Github external
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(" ")]
        ),
      ])
    ])
  )
}
github byteclubfr / copycast / client / components.js View on Github external
const File = ({ path, file, sel }) =&gt; {
	const { name, updatedAt } = file
	const id = `${path}${PATH_SEP}${name}`
	let elapsed = ''
	if (updatedAt) {
		let ago = Math.round((Date.now() - updatedAt) / 1000)
		if (ago &lt;= 180) {
			elapsed = `${ago}s`
		}
	}
	return li(`.file${ sel === id ? '.selected' : '' }`, [
		span('.filename', { data: { id } }, name),
		span('.elapsed', { data: { id } }, elapsed)
	])
}
github tryanzu / frontend / src / components / chat / view.js View on Github external
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 &gt; 0
                                  ? span(
                                        '.blue.ml1',
                                        role.map(() =&gt;
                                            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>`
                        )
                    ),
                ]),
github cyclejs / collection / examples / taskrunner / app.js View on Github external
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')
    ])
  );
}