dialob-fill-ui
v2.0.1-47
Published
dialob-fill-ui React component
Downloads
7
Readme
Dialob Fill Client Component
import {Dialob, createDialobReducer, createDialobMiddleware } from 'dialob-fill-ui';
const DIALOB_CONFIG = {
transport: {
mode: 'rest', // REST is currently supported
endpoint: 'http://localhost:8080/session/dialob', // Filling REST service endpoint location
credentials: 'same-origin' // Optional request credentials mode, see https://fetch.spec.whatwg.org/#concept-request-credentials-mode
}
}
// Add Dialob reducer and middleware to you application's store
const reducers = {
dialob: createDialobReducer()
};
const reducer = combineReducers(reducers);
const store = createStore(reducer, applyMiddleware(createDialobMiddleware(DIALOB_CONFIG)));
// ....
<Dialob sessionId='7ad5de43d18bf491eb555bd80e00c654'
onComplete={() => console.log('complete callback!')}
onError={(message) => console.log('error:', message)}
/>
props
sessionId
Filling session IDonComplete
Optional: Callback handler for completiononError
Optional: Callback for hard errors, like connection problems etc.itemConfig
Optional: Customized items (see below)overrideMessages
Optional: Override static text translations
Custom items configuration
import {Dialob, createDialobReducer, createDialobMiddleware, DEFAULT_ITEM_CONFIG } from 'dialob-fill-ui';
import {CustomText} from './CustomText';
// Create custom item config
const customItemConfig = {
items: [
{
// Match item attributes
matcher: item => item.get('type') === 'text' && item.get('className') && item.get('className').includes('custom'),
// Use this component, if matcher returns true
component: CustomText
},
// Add additional matchers here for other components
].concat(DEFAULT_ITEM_CONFIG.items) // Concat default item configuration, if partial customization is needed
}
Item configuration matchers are applied from top to bottom, first match is returned. If custom items need to override built-ins, add matchers before DEFAULT_ITEM_CONFIG.items
as above. If custom items need to have lower priority, add them after.
Custom item example code:
This creates a customized text entry item. For items that take user's typing input, extend from DebouncedItem
, for single-action items (selects, etc.) extend from Item
.
In case of extending from DebouncedItem
input element should have id attribute set to item's id
element value to ensure correct detection of currently active item. If id is not initialized then user input may be lost.
import React from 'react';
import {DebouncedItem} from 'dialob-fill-ui';
import {Form, Input} from 'semantic-ui-react';
class CustomText extends DebouncedItem {
onChangeText(event) {
this.handleChange(!event.target.value ? null : event.target.value);
}
render() {
const {item, entryType} = this.props;
return (
<Form.Field required={item.get('required')} className={this.getStyles()} error={!!this.getErrors()}>
<label>{item.get('label')} {this.renderDescription()}</label>
<Input icon='tags' iconPosition='left' label={{tag: true, content: 'A tag'}} labelPosition='right' size='massive' id={item.get('id')} name={item.get('id')} type={entryType || 'text'} value={this.getDisplayValue()} onChange={this.onChangeText.bind(this)}/>
{this.renderErrors()}
</Form.Field>
);
}
}
export {
CustomText as default
};
Use custom items
Use itemConfig
prop to set your custom item configuration.
<Dialob sessionId='7ad5de43d18bf491eb555bd80e00c654'
onComplete={() => console.log('complete callback!')}
onError={(message) => console.log('error:', message)}
itemConfig={customItemConfig}
/>