-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.js
85 lines (72 loc) · 2.08 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var yo = require('yo-yo')
var sf = require('sheetify')
var xtend = require('xtend')
var emitter = require('namespace-emitter')
var styling = sf('./index.css')
function TextareaData (options) {
var defaultProps = {
placeholder: '',
value: '',
name: '',
disabled: false,
required: false,
inputmode: '',
autocomplete: 'off'
}
this.state = xtend(defaultProps, options)
this.emitter = emitter()
}
TextareaData.prototype.update = function (event) {
switch (event.type) {
case 'focus':
this.setState({focused: true})
this.emitter.emit('update')
break
case 'blur':
this.setState({focused: false})
this.emitter.emit('update')
break
case 'input':
this.setState({value: event.target.value})
this.emitter.emit('update')
break
default:
break
}
}
TextareaData.prototype.setState = function (newState) {
this.state = xtend(this.state, newState)
}
function textarea (data) {
var disabled = data.state.disabled ? 'disabled' : ''
var required = data.state.required ? 'required' : ''
var disabledClass = data.state.disabled ? 'is-disabled' : ''
var focusClass = data.state.focused ? 'is-focused' : ''
return yo`
<div class="${styling}">
<div class="AutogrowTextarea ${focusClass} ${disabledClass}">
<div class="AutogrowTextarea-mirror">${data.state.value + ' '}</div>
<div class="AutogrowTextarea-container">
<textarea rows="1"
name="${data.state.name}"
${required}
${disabled}
inputmode="${data.state.inputmode}"
placeholder="${data.state.placeholder}"
autocomplete="${data.state.autocomplete}"
onfocus=${data.update.bind(data)}
onblur=${data.update.bind(data)}
oninput=${data.update.bind(data)}>${data.state.value}</textarea>
</div>
</div>
</div>
`
}
module.exports = function (options) {
var t = new TextareaData(options)
var el = textarea(t)
t.emitter.on('update', function () {
yo.update(el, textarea(t))
})
return el
}