Example: Many Elements

example

app.js

import { compose } from 'paintor'
import { ManyElements } from './components/ManyElements.js'

compose(
  ManyElements({ elementCounts: [0, 10, 100, 1000, 10000] })
).paint('#many-elements')

components/ManyElements.js

import { state, template } from 'paintor'

const elements = state([])

function buildData(count, array) {
  array.length = count

  for (let i = count; i > 0; i--) {
    array[count - i] = i
  }
}

function Header(elementsCounts) {
  return template((x) => {
    x.div(
      {
        onClick: (event) => {
          if (!(event.target instanceof HTMLInputElement)) {
            return
          }

          buildData(Number(event.target.value), elements)
        }
      },

      x.h3('How many elements to draw?'),

      x.$each(elementsCounts, (count) => {
        const idName = `elements-${count}`

        x.div(
          x.input({
            type: 'radio',
            name: 'elements',
            id: idName,
            value: count,
            checked: (count === 0)
          }),
          x.label({for: idName}, count)
        )
      })
    )
  })
}

function ElementsContainer() {
  return template((x) => {
    x.div({id: 'elements-container'},
      x.$each(
        elements,
        (value) => {
          x.span({
            textContent: value,
            style: {width: '46px', height: '46px'},
          })
        },
        () => {
          x.div('No elements')
        }
      )
    )
  })
}

export function ManyElements({ elementCounts }) {
  return template(() => [
      Header(elementCounts),
      ElementsContainer(),
    ]
  )
}

CSS

#many-elements {
  & label {
    margin-right: 0.5rem;
  }

  & input, label {
    cursor: pointer;
    user-select: none;
  }

  #elements-container {
    margin: 1.0rem;

    & span {
      margin: 0.1rem;
      padding: 0.3rem;
      border: 0.1rem solid deepskyblue;
      background: aliceblue;
      color: #444;
    }
  }
}

HTML

<div id="many-elements"></div>