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.
####Basic Useage
<QuickInterface
value: {object}
settings: {[optional, custom, settings]}
onChange: {handleOnUserChangeAnyValue}/>
Preview of the customisation
In the settings property you can give an array of settings node like this:
var settings = [{
selector: {key: 'foo'},
input: {
type: 'slider',
min: 0,
max: 100
}
},{
selector: {glob: '**/bar/*.string'},
input: {
type: 'string',
hits: ['foo', 'bar', 'qux']
}
}, {
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,
}
]
}