dialob-fill-ui

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 ID
• onComplete Optional: Callback handler for completion
• onError 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}
/>