@ibm-adw/skill-toolkit/test-kit/client/src/components/catalog/component-list/ComponentList.js

Developing your own skills with IBM Automation Digital Worker Skill Toolkit

/*
 Licensed Materials - Property of IBM
 5737-I23
 Copyright IBM Corp. 2019. All Rights Reserved.
 U.S. Government Users Restricted Rights:
 Use, duplication or disclosure restricted by GSA ADP Schedule
 Contract with IBM Corp.
 */
import React, { useContext } from 'react';

import { Accordion, AccordionItem, Loading } from 'carbon-components-react';

import { Component } from './component/Component';
import {
    stringComponents,
    booleanComponents,
    arrayComponents,
    numberComponents,
    objectComponents
} from './resources/components';

import './ComponentList.scss';

import intl from 'react-intl-universal';
import { LocaleContext, useLocale } from '../../../common/locale';


function ComponentList() {
    const localeContext = useContext(LocaleContext);
    const nlsLoaded = useLocale(() => [
        import(/* webpackChunkName: "nls" */ `./nls/${localeContext.currentLocale}.json`),
        import(/* webpackChunkName: "nls" */ `./nls/${localeContext.fallbackLocale}.json`)
    ]);

    if (nlsLoaded) {
        const multipleTypeComponents = [
            {
                title: intl.get('componentList.STRING_TITLE'),
                data: stringComponents(intl)
            }, {
                title: intl.get('componentList.BOOLEAN_TITLE'),
                data: booleanComponents(intl)
            }, {
                title: intl.get('componentList.ARRAY_TITLE'),
                data: arrayComponents(intl)
            }, {
                title: intl.get('componentList.NUMBER_TITLE'),
                data: numberComponents(intl)
            }, {
                title: intl.get('componentList.OBJECT_TITLE'),
                data: objectComponents(intl)
            }
        ];

        return (
            <div className='adw--test-component-list'>
                {multipleTypeComponents.map((components, index1) => (
                    <div
                        key={'key_' + index1.toString()}
                        className='adw--test-component-list-element'
                    >
                        <div className='adw--test-component-list-element-title'>{components.title}</div>
                        <Accordion className='adw--test-component-list-element-accordion'>
                            {components.data.map((component, index2) => (
                                <AccordionItem
                                    key={'key_' + index1.toString() + '_' + index2.toString()}
                                    className='adw--test-component-list-element-accordion-item'
                                    title={component.title}
                                >
                                    <Component
                                        id={index1.toString() + '_' + index2.toString()}
                                        schema={component.schema}
                                        uiSchema={component.uiSchema}
                                        formData={component.formData}
                                        errorSupport={component.errorSupport}
                                    />
                                </AccordionItem>
                            ))}
                        </Accordion>
                    </div>
                ))}
            </div>
        );
    } else {
        return <div><Loading withOverlay={false} /></div>;
    }
}

export { ComponentList };