Snabbdom input test

snabbdom-input-test.js

// ####### Declarations ##########
import h from '/vendors/snabbdom/h.js'
import { defaultsDeep, merge } from '/vendors/lodash/lodash.js'

// ####### Defaults ##########
const defaultParams = {
  name: '',
  value: '',
  label: '',
  placeholder: '',
  disabled: false,
  required: false,
  type: 'text',
  onChange: [],
  onEnter: [],
  onFocus: [],
  onBlur: [],
  onClick: [],
  data: {},
  inputFieldData: {}
}

// ######## Actions ###########

const actions = (viewObject) => {
  const onChange = (e) => {
    viewObject.nodes.input.state.value = e.target.value
  }

  const onFocus = (e) => {}

  const onBlur = (e) => {}

  return {
    onChange,
    onFocus,
    onBlur,
  })
}

// ########### Composing view ###########

const view = (params = {}) => {
  defaultsDeep(params, defaultParams)

  const viewObject = {
    params: params,
    nodes: {
      input: h('div'),
      textInput: h('input'),
      label: h('label', [params.label.trim() + (params.required ? '*' : '')]),
    }
  }

  const shared = {
    label: params.label,
    type: params.type,
    params: params
  }

  const state = {
    value: params.value,
    required: params.required,
    name: params.name
  }

  const action = actions(viewObject)

  viewObject.nodes.input.shared = shared
  viewObject.nodes.input.state = state
  viewObject.nodes.input.actions = action

  viewObject.nodes.input.data, { ...params.data })
  viewObject.nodes.input.children = []
  viewObject.nodes.input.children.push(viewObject.nodes.fileImage)

  if (params.label && params.type != 'hidden') {
    merge(viewObject.nodes.label.data, {
      style: {
        fontFamily: style.theme.fontFamily,
        position: (params.type === 'textarea' || params.type === 'text') ? 'relative' : 'absolute',
        left: '0',
        fontSize: isInputValue || params.type == 'date' ? '14px' : '16px',
        color: params.disabled ? '#bbb' : '#a1a0a0',
        transition: 'all 100ms ease 100ms',
        top: isInputValue || params.type == 'date' ? '0' : '20px',
        pointerEvents: 'none',
        zIndex: '1',
        marginLeft: (isInputValue && params.type == 'file') ? (params.fileGroup == 'image' ? '47px' : '') : '0'
      }
    })
    viewObject.nodes.input.children.push(viewObject.nodes.label)
  }

  merge(viewObject.nodes.textInput.data, merge({
    props: {
      name: params.name,
      type: params.type,
      disabled: params.disabled,
      value: params.value,
      required: params.required,
      placeholder: params.placeholder,
      innerHTML: params.value,
      maxlength: params.maxlength,
      minlength: params.minlength,
      autofocus: params.autofocus
    },
    attrs: {
      tabindex: params.autofocus
      readonly: params.readonly,
      autocomplete: params.autocomplete ? params.autocomplete : 'off'
    },
    on: {
      focus: action.onFocus,
      blur: action.onBlur,
      input: action.onChange,
      click: params.onClick,
      keyup: (e) => {
    }
  }, params.inputFieldData))

  viewObject.nodes.input.children.push(viewObject.nodes.inputMessage)

  return viewObject.nodes.input
}

// ######### export ###########

export default view


//// HOW TO USE:

const input = Input({ ... })