How to use the @talend/react-cmf.component function in @talend/react-cmf

import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(
		'SEARCH_CATEGORIES_BY_PROVIDER',

import { browserHistory } from 'react-router';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(

import createSagaMiddleware from 'redux-saga';
import { all, call, fork } from 'redux-saga/effects';
import actions from './next/actions';
import components from './next/components';
import App from './next/components/App.container';
import { ALERT } from './next/constants/actions';
import { default as constants } from './next/constants';
import sagas from './next/sagas/watchers';
import locales from './next/locales';
import { registerLocales } from './i18n';
import settingsService from './next/services/settings.service';
import preparationService from './next/services/preparation.service';

const registerActionCreator = api.actionCreator.register;
const registerComponent = api.component.register;
const registerComponents = api.component.registerMany;
const registerExpressions = api.expression.registerMany;
const registerRouteFunction = api.route.registerFunction;

/**
 * Initialize CMF configuration
 * - Register your components in the CMF dictionary
 * - Register action creators in CMF actions dictionary
 */
export default function initialize(additionalConfiguration = {}) {
	// FIXME remove before release
	// for debug purpose
	window.registry = api.registry.getRegistry();

	// register all saga api
	api.registry.addToRegistry(
		'SEARCH_CATEGORIES_BY_PROVIDER',

function registerCustomizedComponents() {
	api.component.register('CustomCellRenderer', props => (
		<span>{get(props, 'value.value.bytes', '') || get(props, 'value.value', '')}</span>
	));
	api.component.register('CustomHeaderRenderer', props =&gt; <span>{props.displayName}</span>);
	api.component.register('CustomPinHeaderRenderer', () =&gt; <span>);
	api.component.register('CustomStringCellRenderer', props =&gt; (
		<span>
			I'm a string(
			{props.data.value})
		</span>
	));
	api.component.register('CustomIntCellRenderer', props =&gt; (
		<span>
			I'm an int(
			{props.data.value})
		</span>
	));</span>

export function registerAllContainers() {
	cmf.component.registerMany(containersCMFModule.components);
}

function registerCustomizedComponents() {
	api.component.register('CustomCellRenderer', props => (
		<span>{get(props, 'value.value.bytes', '') || get(props, 'value.value', '')}</span>
	));
	api.component.register('CustomHeaderRenderer', props =&gt; <span>{props.displayName}</span>);
	api.component.register('CustomPinHeaderRenderer', () =&gt; <span>);
	api.component.register('CustomStringCellRenderer', props =&gt; (
		<span>
			I'm a string(
			{props.data.value})
		</span>
	));
	api.component.register('CustomIntCellRenderer', props =&gt; (
		<span>
			I'm an int(
			{props.data.value})
		</span>
	));
	api.component.register('CustomBooleanCellRenderer', props =&gt; (
		<span>
			I'm a boolean(
			{props.data.value})
		</span></span>

import { List } from '../src';
import i18n from './config/i18n';

/**
 * Cell renderer that displays hello + text
 */
function CellWithHello({ cellData }) {
	return <div>hello {cellData} !</div>;
}

CellWithHello.displayName = 'VirtualizedList(CellWithHello)';
CellWithHello.propTypes = {
	cellData: PropTypes.string,
};

api.component.register('helloComp', CellWithHello);

/**
 * Cell renderer that displays hello + text
 */
function CustomHeader({ label }) {
	return <div>hello {label} !</div>;
}

CustomHeader.displayName = 'VirtualizedList(CustomHeader)';
CustomHeader.propTypes = {
	label: PropTypes.string,
};

api.component.register('helloHeader', CustomHeader);

const list = {

api.actionCreator.register(
	'subheaderbar:display-bubbles',
	actionsCreatorsSubHeader.bubblesSubHeader,
);
api.actionCreator.register('subheaderbar:submit', actionsCreatorsSubHeader.submitSubheader);
api.actionCreator.register('subheaderbar:edit', actionsCreatorsSubHeader.editSubHeaderBar);
api.actionCreator.register('subheaderbar:cancel', actionsCreatorsSubHeader.cancelSubHeaderBar);
api.actionCreator.register('subheaderbar:change', actionsCreatorsSubHeader.changeSubHeaderBar);
api.actionCreator.register('subheaderbar:goback', actionsCreatorsSubHeader.goBackSubHeaderBar);
api.actionCreator.register('tabbar:select', selectTab);
api.actionCreator.register('editabletext:submit', actionsCreatorsEditableText.submitEditableText);
api.actionCreator.register('editabletext:edit', actionsCreatorsEditableText.editEditableText);
api.actionCreator.register('editabletext:cancel', actionsCreatorsEditableText.cancelEditableText);
api.actionCreator.register('editabletext:change', actionsCreatorsEditableText.changeEditableText);

const registerComponent = api.component.register;
registerComponent('ComponentOverlay', ComponentOverlay);

const isTrueExpressionAction = action('isTrueExpression');
api.expression.register('isTrueExpression', (context, first) => {
	isTrueExpressionAction(context, first);
	return !!first;
});

const isFlagExpressionAction = action('isFlagExpression');
api.expression.register('isFlagExpression', (config, flagId) => {
	const flagStatus = config.context.store.getState().app.flags[flagId];
	isFlagExpressionAction(config, flagId, flagStatus);
	return flagStatus;
});

api.expression.register('getItems', () => [

api.component.register('helloComp', CellWithHello);

/**
 * Cell renderer that displays hello + text
 */
function CustomHeader({ label }) {
	return <div>hello {label} !</div>;
}

CustomHeader.displayName = 'VirtualizedList(CustomHeader)';
CustomHeader.propTypes = {
	label: PropTypes.string,
};

api.component.register('helloHeader', CustomHeader);

const list = {
	columns: [
		{ key: 'id', label: 'Id' },
		{ key: 'label', label: 'Name' },
		{ key: 'count', label: 'Count' },
		{ key: 'author', label: 'Author' },
		{ key: 'created', label: 'Created' },
		{ key: 'modified', label: 'Modified' },
	],
	titleProps: {
		key: 'label',
	},
};

const listWithTimestamp = {

export default function registerAllComponents() {
	api.component.registerMany(cmfModule.components);
}