inspirited by dat.GUI
based on React
work in progress... (really not ready)
will be renamed to QuickInterface
Generates rich user interface fully automatically for any JavaScript object and let it customise quickly and efficiently.
<QuickInterface
value: {object}
settings: {[optional, custom, settings]}
onChange: {handleOnUserChangeAnyValue}/>In the settings property you can give an array of settings node like this:
var settings = [{
//select all the value with the key 'foo'
// and set a slider input for them
selector: {key: 'foo'},
input: {
type: 'slider',
min: 0,
max: 100
}
},{
//select the values with matching path
// and set a string input for the with hints
selector: {glob: '**/bar/*.string'},
input: {
type: 'string',
hits: ['foo', 'bar', 'qux']
}
}, {
//qux will be a dropdown
selector: {key: 'qux'},
input: {
options: ['baz', 'bar']
},
}]To make the setting dynamic you can replace any parameter with a function.
The function called with one argument (connect) which lets you easily access to current value. Example:
connect.value, connect.key, connect.fullPath, connect.delete()
{
//hide when qux = 'baz'
selector: {inscaneOf: SomeClass},
hidden: connect => connect.parent.qux === 'baz',
label: connect => capitalise(connect.key)
}
There is a lot of more settings option like:
{
selector: {key, value, function, instanceOf, glob, path, regex}
children: [],
highlighted: true,
label: 'Prop',
labelStyle: {color: style.palette.red}
draggable: true,
canDrop: (targetUtils, itemUtils, idx) => {},
acceptDrop: (targetUtils, itemUtils, idx) => {},
getDragPreview: connect => connect.value.getClonedDOMNode(),
whitelist: ['foo', 'bar'],
blacklist: ['qux', 'baz'],
order: ['tux', 'baz'],
onClick: connect => {}
hidden: true,
Component: ReactComponent //use custom component
input: {
type: 'number',
dragSpeed: 0.1,
...input settings
},
extraInputs: [
{
type: 'string'
value: 8,
dragSpeed: 0.1,
options: ['first', 'secound', 'third'],
types: [
{--//--}
],
chooseType: connect => return 0;
//... input settings
}
],
buttons: [
{
kind: 'colored'
label: 'Push'
icon: 'github'
onClick: connect => {},
hideWhenLeaved: true,
}
]
}