0.2.5 • Published 10 years ago
vdom-form v0.2.5
vdom form
State machine for form components using a virtual dom.
install
$ npm install vdom-form
example
var vdom = require('virtual-dom');
var h = vdom.h;
var Form = require('../Form.js');
var UploadField = require('../lib/FileUpload.js');
var Field = require('../lib/FormField.js');
var ImageUpload = require('../lib/ImageUpload.js');
function curry(component, args) {
var c = component.bind(null, args);
Object.keys(component).forEach(function(fn) {
c[fn] = component[fn];
});
c.render = c.render.bind(null, h);
return c;
}
var state = Form({
fields: [
curry(Field, {
field: 'example',
value: 'default value',
isValid: function(value) {
return value.length > 5;
}
}),
curry(UploadField, {
field: 'upload a file',
isValid: function(files) {
var v = files.length > 0;
return v;
},
onChange: function(files) {
console.log('file changed', files);
}
}),
curry(ImageUpload, {
field: 'upload an image'
})
],
});
var loop = require('main-loop')( state(), render, vdom );
state(loop.update);
document.getElementById('content').appendChild(loop.target);
function render(state) {
return h('form.my-form', {
onsubmit: onSubmit.bind(null, state)
}, [
Form.render(h, state),
h('button', {
type: 'submit',
disabled: !Form.isValid(state)
}, ['Save'])
]);
}
function onSubmit(data, ev) {
ev.preventDefault();
console.log('submit event');
console.log( Form.values(data) );
}
0.2.5
10 years ago
0.2.4
10 years ago
0.2.3
10 years ago
0.2.2
10 years ago
0.2.1
10 years ago
0.2.0
10 years ago
0.1.6
10 years ago
0.1.5
10 years ago
0.1.4
10 years ago
0.1.3
10 years ago
0.1.2
10 years ago
0.1.1
10 years ago
0.1.0
10 years ago
0.0.10
10 years ago
0.0.9
10 years ago
0.0.8
10 years ago
0.0.7
10 years ago
0.0.6
10 years ago
0.0.5
10 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.0
10 years ago