Created
February 4, 2019 21:40
-
-
Save szympajka/9becb2559cfda44bbcc100bd139169c3 to your computer and use it in GitHub Desktop.
Snabbdom input test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ####### 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({ ... }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment