How to use @cycle/dom - 10 common examples

DOM: undoableCount$.map(count =>                         // CHANGED
      h('div', [
        h('button.undo', 'Undo'),                            // NEW
        h('button.redo', 'Redo'),                            // NEW

        h('button.subtract', 'Subtract'),
        h('button.add', 'Add'),

        h('p', 'Counter: ' + count)
      ])
    )

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)
      ])
      );

const home = ({ feed, feedStart, feedActive, unitf, obalance, cbalance, channels, funds, conf: { expert } }) => !feed ? '' : div([

  // Main buttons
  div('.row.mb-2', [
    div('.col-sm-6.mb-2', a('.btn.btn-lg.btn-primary.btn-block', { attrs: { href: preferCam ? '#/scan' : '#/payreq' } }, 'Pay'))
  , div('.col-sm-6.mb-2', a('.btn.btn-lg.btn-secondary.btn-block', { attrs: { href: '#/recv' } }, 'Request'))
  , expert ? div('.col-sm-6', a('.btn.btn-lg.btn-info.btn-block.mb-2', { attrs: { href: '#/logs' } }, 'Logs')) : ''
  , expert ? div('.col-sm-6', a('.btn.btn-lg.btn-warning.btn-block.mb-2', { attrs: { href: '#/rpc' } }, 'Console')) : ''
  ])

 // Balance overview
, channels && funds ? balanceOverview({ obalance, cbalance, channels, funds, unitf }) : ''


  // Payments feed
, ...(!feed.length ? [ p('.text-center.text-muted.mt-4', 'You have no incoming or outgoing payments.') ] : [
    ul('.list-group.feed', feed.slice(feedStart, feedStart+perPage).map(itemRenderer({ feedActive, unitf, expert })))
  , paging(feed.length, feedStart)
  ])])

, ul('.list-group.payments', moves.slice(0, numItems).map(([ type, ts, msat, obj ]) =>
    li('.list-group-item', [
      div('.clearfix', [
        type === 'in' ? span('.badge.badge-success.badge-pill', `+${ unitf(msat) }`)
                      : span('.badge.badge-danger.badge-pill', `-${ unitf(msat) }`)
      , span('.badge.badge-secondary.badge-pill.float-right', ago(ts))
      ])
    , expert ? yaml(obj) : ''
    ])).concat(moves.length > numItems ? [ li('.list-group-item.disabled', `(${moves.length-numItems} more older items)`) ] : []))
    // @TODO paging

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)
      ])
      );

return state$.map(state => {
    let i = 0;
    return div([
      h2('Data grid - DOM update performance demo'),
      p(`This table contains 2000 cells, of which one is updated ideally every
        5 ms. It is intended as a stress test of the virtual DOM mechanism,
        and a simple case in which to apply any optimizations to get performant
        results. In its current form, this series of updates results in
        substantial browser CPU usage.`),
      table(
        { class: { cells: true } },
        rows.map(row => tr({ key: i },
          cols.map(col => thunk('td', ++i, cell, [i, state.values[i]]))
          // without the thunk:
          // cols.map(col => cell(++i, state.values[i]))
        ))
      )
    ]);
  });
}

} = model;

  const projectDate = date;
  const projectName = name;
  // disabled true <=> hasJoinedAtLeastOneTeam
  const disabledSelector = none(teamKey => {
    return teams[teamKey].hasBeenJoined
  }, keys(teams)) ? '.disabled' : '';

  const divErrorMessage = errorMessage
    ? div('.c-application__error', `An error occurred : ${errorMessage}`)
    : div('.c-application__error', '');

  return {
    outputs: {
      DOM: div('#page', [
        renderHeader(projectName, projectDate),
        renderTitle(projectName),
        renderProgressIndicator(step),
        div(".ui.bottom.attached.segment", [
          h4(".ui.dividing.header", [`Select a team`]),
          div(`${USER_APPLICATION_TEAMLIST_SELECTOR}.ui.list`,
            mapIndexed((teamKey, index) => {
              const { description, name, question, hasBeenJoined, answer } = teams[teamKey];

              return void 0,
                div(".item", [
                  div(".right.floated.content", [
                    div(".ui.button", [hasBeenJoined ? `O` : 'X'])
                  ]),
                  img(".ui.avatar.image", {
                    "attrs": {

progress: { step, hasApplied, latestTeamIndex }
    },
    project: { name, date, location },
    validationMessages,
    errorMessage
  } = model;

  const projectDate = date;
  const projectName = name;
  // disabled true <=> hasJoinedAtLeastOneTeam
  const disabledSelector = none(teamKey => {
    return teams[teamKey].hasBeenJoined
  }, keys(teams)) ? '.disabled' : '';

  const divErrorMessage = errorMessage
    ? div('.c-application__error', `An error occurred : ${errorMessage}`)
    : div('.c-application__error', '');

  return {
    outputs: {
      DOM: div('#page', [
        renderHeader(projectName, projectDate),
        renderTitle(projectName),
        renderProgressIndicator(step),
        div(".ui.bottom.attached.segment", [
          h4(".ui.dividing.header", [`Select a team`]),
          div(`${USER_APPLICATION_TEAMLIST_SELECTOR}.ui.list`,
            mapIndexed((teamKey, index) => {
              const { description, name, question, hasBeenJoined, answer } = teams[teamKey];

              return void 0,
                div(".item", [

? div('.c-application__error', `An error occurred : ${errorMessage}`)
    : div('.c-application__error', '');

  return {
    outputs: {
      DOM: div('#page', [
        renderHeader(projectName, projectDate),
        renderTitle(projectName),
        renderProgressIndicator(step),
        div(".ui.bottom.attached.segment", [
          form(".ui.form", [
            h4(".ui.dividing.header", [`Organizer's question`]),
            div(".ui.icon.message", [
              i(".inbox.icon"), // TODO find more suitable icon
              div(".content", [
                div(".header", [oppQuestion]),
                p([`Organizer's name/role`]) // NOTE : left as is to avoid doing fixtures for organizers
              ])
            ]),
            div(".field", [
              textarea(`${USER_APPLICATION_FORM_INPUT_OPP_ANSWER_SELECTOR}`, {
                "key": 0,
                "attrs": {
                  "name": "userapp[organizer-question]",
                  "placeholder": "Please enter your answer here"
                },
                "props": makeInputProps(answer)
              }),
              _makeErrDiv('answer', USER_APPLICATION_QUESTION_SCREEN_ANSWER_ERROR_SELECTOR),
            ]),
          ])
        ]),

div(`${USER_APPLICATION_BACK_TO_TEAMS_SELECTOR}.ui.fluid.negative.button`, {
            "attrs": {
              "tabindex": "0",
            }
          }, [`Back to teams`]),
          div(".ui.divided.selection.list", [
            a(".item", [
              div(".ui.horizontal.label", [teamName]),
              teamDescription
            ])
          ]),
          form(".ui.form", [
            div(".ui.icon.message", [
              i(".inbox.icon"),
              div(".content", [
                div(".header", [teamQuestion]),
                p([`Team lead's name/role`]) // NOTE : left constant, not to complicate fixture
              ])
            ]),
            div(".field", [
              textarea(`${USER_APPLICATION_FORM_INPUT_TEAM_ANSWER_SELECTOR}`, {
                "key": latestTeamIndex,
                "attrs": {
                  "name": "userapp[organizer-question]",
                  "placeholder": "Please enter your answer here"
                },
                "props": makeInputProps(teamAnswer)
              }),
              _makeErrDiv('answer', USER_APPLICATION_TEAM_DETAIL_SCREEN_ANSWER_ERROR_SELECTOR)
            ])
          ])
        ]),