How to use the @talend/react-components/lib/theme.getTheme function in @talend/react-components

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({

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import Icon from '@talend/react-components/lib/Icon';
import CircularProgress from '@talend/react-components/lib/CircularProgress';
import { withTranslation } from 'react-i18next';
import { getTheme } from '@talend/react-components/lib/theme';

import I18N_NAMESPACE from './constant';
import theme from './Stepper.component.scss';
import { LOADING_STEP_STATUSES } from '../Stepper.constants';
import { DEFAULT_TRANSITION_DURATION, StepperTransition } from './StepperTransition.component';
import { isErrorInSteps, isStepsLoading, isAllSuccessful } from '../service/Stepper.utils';
import getDefaultT from '../translate';

const getClass = getTheme(theme);

const SHOW_COMPLETED_TRANSITION_TIMER = 1000;
export const TRANSITION_STATE = {
	STEPS: 'STEPS',
	TRANSITION: 'TRANSITION',
	CHILD: 'CHILD',
};

/**
 * This function returns a label for some status
 * @param {string} status the current step status
 */
function getStatusText(t, status) {
	switch (status) {
		case LOADING_STEP_STATUSES.ABORTED:
			return t('ABORTED', { defaultValue: ' (Aborted)' });

import React from 'react';
import PropTypes from 'prop-types';
import Badge from '@talend/react-components/lib/Badge';
import { getTheme } from '@talend/react-components/lib/theme';

import { BadgeOverlay } from '../BadgeOverlay';
import { BadgeOperatorPopover } from './BadgeOperatorPopover.component';

import { operatorsPropTypes } from '../../facetedSearch.propTypes';

import cssModule from './BadgeOperator.scss';

const theme = getTheme(cssModule);

const BadgeOperatorOverlay = ({
	id,
	onClick,
	onChangeOverlay,
	onHideOverlay,
	opened,
	operatorIconName,
	operatorLabel,
	operators,
	size,
}) => {
	/**
	 * Trigger the callback passed in props
	 * @param {function} setOverlayOpened callback used to open / close the overlay
	 */

import { AddFacetPopover } from '../AddFacetPopover';
import { BadgeOverlay } from '../Badges';
import { BadgesGenerator } from '../BadgesGenerator';
import { generateBadge } from '../types/badgeDefinition.type';
import { useFacetedSearchContext } from '../context/facetedSearch.context';
import { BadgeFacetedProvider } from '../context/badgeFaceted.context';

import { createBadgesDict, getBadgesFromDict } from '../../dictionary/badge.dictionary';
import { createOperatorsDict, getOperatorsFromDict } from '../../dictionary/operator.dictionary';
import { useFacetedBadges, BADGES_ACTIONS } from '../../hooks/facetedBadges.hook';
import { badgesFacetedPropTypes, operatorsPropTypes } from '../facetedSearch.propTypes';

import theme from './BasicSearch.scss';

const css = getTheme(theme);

const isInCreation = badge => get(badge, 'metadata.isInCreation', true);

const BasicSearch = ({
	badgesDefinitions,
	badgesFaceted,
	customBadgesDictionary,
	customOperatorsDictionary,
	initialFilterValue,
	onSubmit,
	setBadgesFaceted,
}) => {
	const { id, t } = useFacetedSearchContext();
	const operatorsDictionary = useMemo(() => createOperatorsDict(t, customOperatorsDictionary));
	const badgesDictionary = useMemo(() => createBadgesDict(customBadgesDictionary));
	const [state, dispatch] = useFacetedBadges(badgesFaceted, setBadgesFaceted);

import React from 'react';
import PropTypes from 'prop-types';
import RichLayout from '@talend/react-components/lib/RichTooltip/RichLayout';
import Action from '@talend/react-components/lib/Actions/Action';
import { getTheme } from '@talend/react-components/lib/theme';

import { operatorsPropTypes } from '../../facetedSearch.propTypes';

import cssModule from './BadgeOperator.scss';

const theme = getTheme(cssModule);

const BadgeOperatorRow = ({ onClick, id, name, label, iconName }) => {
	const onClickOperatorRow = event => {
		onClick(event, name);
	};
	if (iconName) {
		return (

import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
import { getTheme } from '@talend/react-components/lib/theme';
import RichLayout from '@talend/react-components/lib/RichTooltip/RichLayout';
import Action from '@talend/react-components/lib/Actions/Action';
import FilterBar from '@talend/react-components/lib/FilterBar';

import cssModule from './AddFacetPopover.scss';
import { badgesFacetedPropTypes, badgeFacetedPropTypes } from '../facetedSearch.propTypes';

const theme = getTheme(cssModule);

const AddFacetRow = ({ badgeDefinition, id, label, onClick }) => {
	const onClickRow = event => {
		onClick(event, badgeDefinition);
	};
	return (
		
	);
};

import Badge from '@talend/react-components/lib/Badge';
import BadgeComposition from '@talend/react-components/lib/Badge/BadgeComposition';
import { getTheme } from '@talend/react-components/lib/theme';

import { BadgeOperatorOverlay } from '../BadgeOperator';
import { BadgeOverlay } from '../BadgeOverlay';
import { useBadgeFacetedContext } from '../../context/badgeFaceted.context';

import cssModule from './BadgeFaceted.scss';

import { useBadgeOverlayFlow, OVERLAY_FLOW_ACTIONS } from '../../../hooks/badgeOverlayFlow.hook';
import { BADGES_ACTIONS } from '../../../hooks/facetedBadges.hook';

import { operatorPropTypes, operatorsPropTypes } from '../../facetedSearch.propTypes';

const theme = getTheme(cssModule);

const findOperatorByName = name => operator => name === operator.name;

const BadgeFaceted = ({
	badgeId,
	children,
	id,
	labelCategory,
	labelValue,
	initialOperatorOpened,
	initialValueOpened,
	operator,
	operators,
	value,
	size = Badge.SIZES.large,
	t,

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

import { FACETED_MODE } from '../../constants';
import cssModule from './FacetedToolbar.scss';

const theme = getTheme(cssModule);

const SwitchFacetedMode = ({ facetedMode, id, onChange, t }) => (
	<div>
		 {
				onChange(FACETED_MODE.BASIC);
			}}
			label={t('FACETED_SEARCH_BASIC', { defaultValue: 'Basic' })}
			id={`${id}-basic-action`}
			className={theme('tc-faceted-toolbar-buttons-basic', {
				'tc-button-selected': facetedMode === FACETED_MODE.BASIC,
			})}
		/&gt;
		 {
				onChange(FACETED_MODE.ADVANCED);</div>