@platformbuilders/react-native-ui/dist/components/Accordion/index.js

Platform Builders Shared Components Library

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import Accordion from 'react-native-collapsible/Accordion';
import Markdown from 'react-native-markdown-display';
import { head } from 'lodash';
import If from '../If';
import { Icon } from './styles';
const AccordionContainer = ({ StyledTitle = Text, StyledBody = Text, StyledHeader = View, StyledContent = View, data, hasIcon = false, iconUpName = 'chevron-up', iconDownName = 'chevron-down', activeIconColor, inactiveIconColor, isMarkdown = false, onChange, }) => {
    const [activeSections, setActiveSections] = useState([]);
    const isActive = (section) => {
        const element = (item) => item.title === section.title;
        const index = data.findIndex(element);
        return index.toString() === activeSections.join('');
    };
    const getIconName = (section) => isActive(section) ? iconUpName : iconDownName;
    const renderHeader = (section) => {
        return (React.createElement(StyledHeader, { isActive: isActive(section) },
            React.createElement(StyledTitle, { isActive: isActive(section) }, section.title),
            React.createElement(If, { condition: hasIcon },
                React.createElement(Icon, { name: getIconName(section), color: isActive(section) ? activeIconColor : inactiveIconColor, id: iconUpName, accessibility: isActive(section) ? 'Fechar' : 'Abrir' }))));
    };
    const renderContent = (section) => {
        return (React.createElement(StyledContent, null,
            React.createElement(If, { condition: isMarkdown },
                React.createElement(Markdown, null, section.content)),
            React.createElement(If, { condition: !isMarkdown },
                React.createElement(StyledBody, null, section.content))));
    };
    const handleChange = (activeSectionsArray) => {
        const index = head(activeSectionsArray) || 0;
        if (onChange)
            onChange(data[index].title);
        setActiveSections(activeSectionsArray);
    };
    return (React.createElement(Accordion, { sections: data, activeSections: activeSections, renderHeader: renderHeader, renderContent: renderContent, onChange: handleChange }));
};
export default AccordionContainer;
//# sourceMappingURL=index.js.map