effector-dom.components.ts

import {using, list, h, spec, handler} from 'effector-dom'

const noop = () => {}

function JustList($list, {title = noop, content = noop, item = noop}) {
  h('div', () => {
    h('h3', () => {
      title()
    })
    h('ul', () => {
      content()
      list($list, ({store}) => {
        h('li', () => {
          item(store)
          h('span', {text: store})
        })
      })
    })
  })
}

function EditableHeader($value, {valueChanged = noop}) {
  const $isEditing = createStore(false)
  const {open, tryClose} = createApi($isEditing, {
    open: () => true,
    tryClose: (is, event) => (event.keyCode === 13 ? false : is),
  })

  h('span', {
    text: $value,
    visible: $isEditing.map(is => !is),
    handler: {click: open},
  })
  h('input', {
    attr: {value: $value},
    visible: $isEditing,
    handler: {keydown: tryClose, change: valueChanged},
  })
}

function Button(text, {content = noop, start = noop, end = noop, variant = "default", size = "medium"}) {
  h('button', () => {
    spec({attr: {class: 'mu-button'}, data: {variant,size}})
    h('span', () => {
      spec({data: {element: 'start'}})
      start()
    })
    h('span', () => {
      spec({data: {element: 'content'}, text})
      content()
    })
    h('span', () => {
      spec({data: {element: 'end'}})
      end()
    })
  })
}

using(document.querySelector('#root'), () => {
  const $list = createStore(['foo', 'bar', 'baz'])

  const $title = createStore('My super title')
  const {titleChanged} = createApi($title, {
    titleChanged: (_, event) => event.target.value,
  })

  JustList($list, {
    title() {
      EditableHeader($title, {valueChanged: titleChanged})
    },
    content() {
      h('i', {text: 'Click on checkmark to change'})

      Button('Example', {
        variant: "primary",
        size: "large",
        start() { h('i', {text: '('}) },
        end() { h('i', {text: ')'}) },
      })
    },
    item($item) {
      spec({attr: {class: 'example'}})

      h('input', {attr: {type: 'checkbox'}})
    },
  })
})