How to use @talend/react-components - 10 common examples

import React from 'react';
import PropTypes from 'prop-types';
import ActionIconToggle from '@talend/react-components/lib/Actions/ActionIconToggle';
import Skeleton from '@talend/react-components/lib/Skeleton';
import { getTheme } from '@talend/react-components/lib/theme';
import { useTranslation } from 'react-i18next';

import facetedSearchIconTheme from './FacetedSearchIcon.scss';
import { I18N_DOMAIN_FACETED_SEARCH } from '../../constants';

const theme = getTheme(facetedSearchIconTheme);

// eslint-disable-next-line import/prefer-default-export
export function FacetedSearchIcon({ active, loading, onClick }) {
	const { t } = useTranslation(I18N_DOMAIN_FACETED_SEARCH);
	if (loading) {
		return ;
	}
	return (

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import keycode from 'keycode';
import Action from '@talend/react-components/lib/Actions/Action';
import Icon from '@talend/react-components/lib/Icon';
import CircularProgress from '@talend/react-components/lib/CircularProgress';
import FormControl from 'react-bootstrap/lib/FormControl';
import { getTheme } from '@talend/react-components/lib/theme';

import { useFacetedSearchContext } from '../context/facetedSearch.context';

import theme from './AdvancedSearch.scss';

const css = getTheme(theme);

const AdvancedSearchError = ({ id, label }) => (
	<p role="status" id="{`${id}-error`}" aria-live="assertive">
		{label}
	</p>
);

const DATA_FEATURE = 'faceted-advanced-search';

AdvancedSearchError.propTypes = {
	label: PropTypes.string.isRequired,
	id: PropTypes.string.isRequired,
};

// eslint-disable-next-line import/prefer-default-export
export function AdvancedSearch({

)}
			
		
	);
};

BadgeOperatorOverlay.propTypes = {
	id: PropTypes.string.isRequired,
	onClick: PropTypes.func,
	onChangeOverlay: PropTypes.func,
	onHideOverlay: PropTypes.func,
	opened: PropTypes.bool,
	operatorIconName: PropTypes.string,
	operatorLabel: PropTypes.string,
	operators: operatorsPropTypes.isRequired,
	size: PropTypes.oneOf(Object.values(Badge.SIZES)),
};

// eslint-disable-next-line import/prefer-default-export
export { BadgeOperatorOverlay };

/>
		
	);
};

BadgeFaceted.propTypes = {
	badgeId: PropTypes.string.isRequired,
	labelCategory: PropTypes.string.isRequired,
	children: PropTypes.func.isRequired,
	id: PropTypes.string.isRequired,
	initialOperatorOpened: PropTypes.bool,
	initialValueOpened: PropTypes.bool,
	labelValue: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
	operator: operatorPropTypes.isRequired,
	operators: operatorsPropTypes.isRequired,
	size: PropTypes.oneOf(Object.values(Badge.SIZES)),
	value: PropTypes.any,
	t: PropTypes.func.isRequired,
};

// eslint-disable-next-line import/prefer-default-export
export { BadgeFaceted };

addDnd(column) {
		if (!this.draggableCell) {
			this.draggableCell = draggable(column.cellRenderer || Table.Cell, 'element');
		}
		column.cellRenderer = this.draggableCell;
		// add dnd callback methods
		column.cellExtraProps = {};
		column.cellExtraProps.beginDrag = this.dndListener.beginDrag;
		column.cellExtraProps.canDrop = this.dndListener.canDrop;
		column.cellExtraProps.drop = this.dndListener.drop;
		column.cellExtraProps.endDrag = this.dndListener.endDrag;
	}

addDnd(column) {
		if (!this.draggableCell) {
			this.draggableCell = draggable(column.cellRenderer || Table.Cell, 'element');
		}
		column.cellRenderer = this.draggableCell;
		// add dnd callback methods
		column.cellExtraProps = {};
		column.cellExtraProps.beginDrag = this.dndListener.beginDrag;
		column.cellExtraProps.canDrop = this.dndListener.canDrop;
		column.cellExtraProps.drop = this.dndListener.drop;
		column.cellExtraProps.endDrag = this.dndListener.endDrag;
	}

/* eslint-disable no-console */
const fs = require('fs');

const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const TalendHTML = require('@talend/html-webpack-plugin');
const AppLoader = require('@talend/react-components/lib/AppLoader/constant').default;
const DEFAULT_APP_LOADER_ICON =
	'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQoJPHBhdGggZD0iTTkuNjk0IDE0LjY1MmExLjA3NiAxLjA3NiAwIDAgMS0uNzE1LjQyMSAxLjA4NiAxLjA4NiAwIDEgMS0uMTQ4LTIuMTU4Yy4yMzUgMCAuNDYyLjA3NS42NTIuMjIuMjMuMTczLjM4LjQyNy40Mi43MTRhMS4wNyAxLjA3IDAgMCAxLS4yMDkuODAzTTIuMTUgMi42MjdBMS4wODQgMS4wODQgMCAxIDEgLjQxOCAxLjMyMiAxLjA4NCAxLjA4NCAwIDAgMSAyLjE1IDIuNjI3bTExLjM4MyAyLjQ5MWEyLjQ2IDIuNDYgMCAwIDAtMS40ODIuNDk0TDguOTQgMS43OThhLjU5LjU5IDAgMSAwLS4xNTYuMTI1bDMuMTExIDMuODE2YTIuNDg2IDIuNDg2IDAgMCAwLS41NTcuNzE4bC04Ljg0LTQuMDYyYy4wNjUtLjE5LjA4Ni0uMzk0LjA1Ny0uNTk5QTEuMjc0IDEuMjc0IDAgMCAwIDIuMDU4Ljk1YTEuMjc4IDEuMjc4IDAgMCAwLS45NTItLjI0NyAxLjI4NiAxLjI4NiAwIDAgMCAuMzU2IDIuNTQ0IDEuMjc5IDEuMjc5IDAgMCAwIC45NTYtLjY2OGw4LjgzOCA0LjA2Yy0uMTEuMjY0LS4xNzYuNTUtLjE4Ny44NUgzLjU2M2EuNzg4Ljc4OCAwIDAgMC0uMzEtLjUzMy43OTkuNzk5IDAgMCAwLTEuMTEzLjE1NS43ODYuNzg2IDAgMCAwIC4xNTYgMS4xMDUuNzk5Ljc5OSAwIDAgMCAxLjI2Ny0uNTI3aDcuNTA2Yy4wMTQuMzIzLjA4OC42My4yMTUuOTFsLTEuOTAzLjk0MWEuNTkyLjU5MiAwIDEgMCAuMDg5LjE3OWwxLjkwNC0uOTRjLjE2Mi4yOTIuMzgyLjU0OC42NDUuNzUzbC0yLjQ3MyAzLjQwNGExLjI4IDEuMjggMCAwIDAtMS43NDIuMjkxIDEuMjg4IDEuMjg4IDAgMCAwIC4yNTMgMS44IDEuMjggMS4yOCAwIDAgMCAuOTUyLjI0NmMuMzQtLjA0OC42NC0uMjI1Ljg0Ny0uNDk5LjIwNy0uMjc0LjI5NC0uNjEyLjI0Ni0uOTUyYTEuMjc2IDEuMjc2IDAgMCAwLS4zOTktLjc2M2wyLjQ3OS0zLjQxYTIuNDY4IDIuNDY4IDAgMSAwIDEuMzUyLTQuNTMiLz4NCjwvc3ZnPg0K)';

const LICENSE_BANNER = require('./licence');

const userBabelrc = `${process.cwd()}/.babelrc`;
const babelrcPath = '@talend/scripts/webapp/preset/config/.babelrc.json';
let babelrc;

// require support json only if filename ends with json
if (fs.existsSync(userBabelrc)) {
	babelrc = JSON.parse(fs.readFileSync(userBabelrc, 'utf8'));
	if (babelrc.extends !== babelrcPath) {
		throw new Error(`you have your own babelrc. Please extends our babelrc:
		 { "extends": "${babelrcPath}"`);
	}

};

if (!isTestMode) {
	config.plugins = config.plugins.concat([
		CopyWebpackPlugin([
			{ from: 'src/assets/images', to: 'assets/images' },
			{ from: 'src/assets/config/config.json', to: 'assets/config' },
		]),
		new HtmlWebpackPlugin({
			filename: './index.html',
			template: INDEX_TEMPLATE_PATH,
			title: APP_CONF.title,
			rootElement: APP_CONF.rootElement,
			rootModule: APP_CONF.rootModule,
			inject: 'body',
			loader: AppLoader.APP_LOADER,
			// ensure loding order vendor/style/app
			chunksSortMode: (a, b) => {
				const aOrder = CHUNKS_ORDER.indexOf(a.names[0]);
				const bOrder = CHUNKS_ORDER.indexOf(b.names[0]);
				if (aOrder > bOrder) {
					return 1;
				}
				if (aOrder < bOrder) {
					return -1;
				}
				return 0;
			},
		}),
		new TalendHTML({
			loadCSSAsync: true,
			appLoaderIcon: APP_CONF.icon,

function createNameFilter() {
	return {
		id: nameFilterId,
		active: false,
		params: {
			value: null,
			docked: true,
		},
		match: matchName,
		renderer: Table.StringFilterComponent,
		rendererProps: {
			// FIXME need to be i18n ready
			placeHolder: 'Filter...',
			dockable: true,
			navbar: true,
		},
	};
}

function createMandatoryFieldFilter() {
	return {
		id: mandatoryFieldFilterId,
		active: false,
		match: matchMandatory,
		renderer: Table.ToggleFilterComponent,
		rendererProps: {
			// FIXME need to be i18n ready
			label: 'Show Mandatory Fields (*) Only',
		},
	};
}