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

import React from 'react';
import { Map } from 'immutable';
import omit from 'lodash/omit';
import Component from '@talend/react-components/lib/ConfirmDialog';
import { cmfConnect } from '@talend/react-cmf';

import { getActionsProps } from '../actionAPI';

export const DEFAULT_STATE = new Map({
	show: false,
});

class ConfirmDialog extends React.Component {
	static displayName = 'CMFContainer(ConfirmDialog)';
	static propTypes = {
		...cmfConnect.propTypes,
	};
	static contextTypes = {
		store: PropTypes.object,
		registry: PropTypes.object,
	};

	render() {
		const state = (this.props.state || DEFAULT_STATE).toJS();
		if (!state.validateAction || !state.cancelAction) {
			return null;
		}
		// this should be enough
		/* const props = Object.assign(
		 {},
		 state,
		 omit(this.props, cmfConnect.INJECTED_PROPS),

class HeaderBar extends React.Component {
	static displayName = 'Container(HeaderBar)';

	static propTypes = {
		productsUrl: PropTypes.string,
		productsItems: PropTypes.arrayOf(
			PropTypes.shape({
				icon: PropTypes.string,
				id: PropTypes.string,
				name: PropTypes.string,
				url: PropTypes.string,
			}),
		),
		productsSort: PropTypes.func,
		prepareProducts: PropTypes.func,
		...cmfConnect.propTypes,
	};

	componentDidUpdate(prevProps) {
		// Trigger product fetch when there's an URL and
		// products URL has changed or products have not been loaded yet
		const hasProductsUrlChanged = this.props.productsUrl !== prevProps.productsUrl;
		const hasProductsNotBeenLoaded =
			this.props.state.get('productsFetchState') === Constants.PRODUCTS_NOT_LOADED;

		if (this.props.productsUrl && (hasProductsNotBeenLoaded || hasProductsUrlChanged)) {
			this.props.dispatch(fetchProducts(this.props.productsUrl));
		}
	}

	render() {
		const {

import React from 'react';
import { cmfConnect } from '@talend/react-cmf';
import { UIForm } from '@talend/react-forms/lib/UIForm';
import omit from 'lodash/omit';
import { Map } from 'immutable';
import { CircularProgress } from '@talend/react-components';
import createTriggers from '../form-trigger';

export const DEFAULT_STATE = new Map({
	dirty: false,
});

class ComponentForm extends React.Component {
	static displayName = 'ComponentForm';
	static propTypes = {
		...cmfConnect.propTypes,
	};
	static defaultProps = {
		customTriggers: () => {},
	};
	static getCollectionId = componentId => `tcomp-form${componentId}`;
	static TCOMP_FORM_ON_CHANGE = 'TCOMP_FORM_ON_CHANGE';
	static TCOMP_FORM_ON_TRIGGER = 'TCOMP_FORM_ON_TRIGGER';
	static DEFINITION_URL_CHANGED = 'TCOMP_DEFINITION_URL_CHANGED';

	constructor(props) {
		super(props);
		this.state = {};
		this.onTrigger = this.onTrigger.bind(this);
		this.onChange = this.onChange.bind(this);
		this.getUISpec = this.getUISpec.bind(this);
		this.setupTrigger = this.setupTrigger.bind(this);

const state = props.state || DEFAULT_STATE;
	const items = state.get('items', props.items);
	const newProps = {
		items: items.map(item => ({
			...item,
			onClick: (event, data) => props.dispatchActionCreator(item.actionCreator, event, data),
		})),
		maxItems: state.get('maxItems', props.maxItems),
	};

	return ;
}

ContainerBreadcrumbs.displayName = 'Breadcrumbs';
ContainerBreadcrumbs.propTypes = {
	...cmfConnect.propTypes,
};

export default cmfConnect({
	defaultState: new Map({ items: [], maxItems: 10 }),
	omitCMFProps: true,
	withComponentRegistry: true,
	withDispatch: true,
	withDispatchActionCreator: true,
	withComponentId: true,
})(ContainerBreadcrumbs);

import React from 'react';
import PropTypes from 'prop-types';
import keycode from 'keycode';
import keys from 'lodash/keys';
import { cmfConnect } from '@talend/react-cmf';

/**
 * ShortcutManager matches shortcuts to the current route to redirect to a new
 * one
 *
 * @extends {React}
 */
class ShortcutManager extends React.Component {
	static displayName = 'Container(ShortcutManager)';
	static propTypes = {
		...cmfConnect.propTypes,
	};

	static contextTypes = {
		store: PropTypes.object.isRequired,
	};

	constructor(props) {
		super(props);
		this.redirect = this.redirect.bind(this);
		this.handleKeyPress = this.handleKeyPress.bind(this);
		this.handleRegexMatching = this.handleRegexMatching.bind(this);
	}

	componentDidMount() {
		document.addEventListener('keydown', this.handleKeyPress);
	}

export const DEFAULT_STATE = new Immutable.Map({
	[VALUE_ATTR]: undefined,
});

export const DISPLAY_NAME = 'Container(Slider)';

class Slider extends React.Component {
	static displayName = DISPLAY_NAME;

	static contextTypes = {
		registry: PropTypes.object,
		store: PropTypes.object,
	};

	static propTypes = {
		...cmfConnect.propTypes,
		id: PropTypes.string,
		value: PropTypes.number,
	};

	static defaultProps = {
		value: 0,
	};

	constructor(props) {
		super(props);
		this.onChange = this.onChange.bind(this);
		this.onAfterChange = this.onAfterChange.bind(this);
	}

	onAfterChange(value) {
		if (this.props.onAfterChange) {

import PropTypes from 'prop-types';
import Component from '@talend/react-components/lib/EditableText';
import Immutable from 'immutable';
import omit from 'lodash/omit';
import { cmfConnect } from '@talend/react-cmf';

export const DISPLAY_NAME = 'Container(EditableText)';
export const DEFAULT_STATE = new Immutable.Map({
	editMode: false,
});

class EditableText extends React.Component {
	static displayName = DISPLAY_NAME;

	static propTypes = {
		...cmfConnect.propTypes,
		actionCreatorCancel: PropTypes.string,
		actionCreatorEdit: PropTypes.string,
		actionCreatorSubmit: PropTypes.string,
		actionCreatorChange: PropTypes.string,
		onCancel: PropTypes.func,
		onEdit: PropTypes.func,
		onSubmit: PropTypes.func,
		onChange: PropTypes.func,
		text: PropTypes.string,
	};

	static contextTypes = {
		registry: PropTypes.object,
		store: PropTypes.object,
	};

idKey: PropTypes.string,
		list: PropTypes.shape({
			columns: PropTypes.array,
			titleProps: PropTypes.object,
		}),
		toolbar: PropTypes.shape({
			sort: PropTypes.object,
			filter: PropTypes.object,
			pagination: PropTypes.shape({
				onChange: PropTypes.func,
			}),
		}),
		cellDictionary: PropTypes.object,
		displayMode: PropTypes.string,
		items: ImmutablePropTypes.list.isRequired,
		...cmfConnect.propTypes,
	};

	static defaultProps = {
		state: DEFAULT_STATE,
	};

	static contextTypes = {
		store: PropTypes.object,
		registry: PropTypes.object,
		router: PropTypes.object,
	};

	constructor(props) {
		super(props);
		this.onSelectDisplayMode = this.onSelectDisplayMode.bind(this);
		this.onChangePage = this.onChangePage.bind(this);

import omit from 'lodash/omit';
import { Map } from 'immutable';
import { cmfConnect } from '@talend/react-cmf';
import Component from '@talend/react-components/lib/AboutDialog';
import Constants from './AboutDialog.constant';

export const DEFAULT_STATE = new Map({
	expanded: false,
});

class AboutDialog extends React.Component {
	static displayName = 'Container(AboutDialog)';
	static propTypes = {
		icon: PropTypes.string,
		copyrights: PropTypes.string,
		...cmfConnect.propTypes,
	};

	constructor(props) {
		super(props);
		this.toggle = this.toggle.bind(this);
		this.hide = this.hide.bind(this);
	}

	toggle() {
		this.props.setState(({ state }) => ({ expanded: !state.get('expanded') }));
	}

	hide() {
		this.props.dispatch({ type: Constants.ABOUT_DIALOG_HIDE });
	}

selectedId,
						},
					}}
				/>
			
		);
	}
}

PreparationCopyMoveModal.displayName = 'PreparationCopyMoveModal';

PreparationCopyMoveModal.propTypes = {
	state: ImmutablePropTypes.contains({ show: PropTypes.bool }).isRequired,
	setState: PropTypes.func.isRequired,
	t: PropTypes.func,
	...cmfConnect.propTypes,
};

export default translate(I18N.TDP_APP_NAMESPACE)(PreparationCopyMoveModal);