<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import {connectToStores} from 'fluxible-addons-react';
import classNames from 'classnames/bind';
import ContributorsStore from '../../../../stores/ContributorsStore';
import ContributorsList from './ContributorsList';
import { FormattedMessage, defineMessages } from 'react-intl';

class ContributorsPanel extends React.Component {
    componentDidMount() {
        this.enableAccordion();
    }

    componentDidUpdate() {
        this.refreshAccordion();
    }

    enableAccordion(status) {
        let accordionDIV = this.refs.contributorsPanel;
        $(accordionDIV).find('.ui.accordion').accordion({
            exclusive: false
        });
    }

    refreshAccordion(status) {
        let accordionDIV = this.refs.contributorsPanel;
        $(accordionDIV).find('.ui.accordion').accordion('refresh');
    }

    render() {
        const form_messages = defineMessages({
            no_contributors: {
                id: 'ContributorsPanel.form.no_contributors',
                defaultMessage: 'There are no contributors for this',
            }
        });
        return (
            <div className="sw-contributors-panel" ref="contributorsPanel">
                <div className="ui">
                    <h4 className="ui header">
                        <FormattedMessage
                            id='ContributorsPanel.form.header'
                            defaultMessage='Creator' />
                    </h4>
                    <ContributorsList items={this.props.ContributorsStore.creator  }></ContributorsList>
                    <div className="ui accordion">
                        <div className="title" tabIndex="0">
                            <i className="dropdown icon"></i>
                            <FormattedMessage
                                id='ContributorsPanel.form.title'
                                defaultMessage='Contributors' />
                        </div>
                        <div className="content">
                            {this.props.ContributorsStore.contributors.length === 0 ?
                                <div>{this.context.intl.formatMessage(form_messages.no_contributors) + ' ' + this.props.ContributorsStore.selector.stype}.</div> :
                                <ContributorsList items={this.props.ContributorsStore.contributors}></ContributorsList>}
                        </div>
                    </div>
                </div><commit_msg>Made ContributorsPanel accessible #SWIK-2616<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import {connectToStores} from 'fluxible-addons-react';
import classNames from 'classnames/bind';
import ContributorsStore from '../../../../stores/ContributorsStore';
import ContributorsList from './ContributorsList';
import { FormattedMessage, defineMessages } from 'react-intl';
import {Accordion, AccordionItem, AccordionItemBody, AccordionItemTitle} from 'react-accessible-accordion';
import {Icon} from 'semantic-ui-react';

class ContributorsPanel extends React.Component {
    constructor(props) {
        super(props);
        this.state = {advanced_options_visible: false};
    };

    /**
     * Toggles the state of advanced_options_visible.
     * Triggered by clicks on <AccordionItemTitle> elements.
     *
     * @returns {void}
     */
    handleAccordionChange = () => {
        const { advanced_options_visible } = this.state;
        this.setState({ advanced_options_visible: !advanced_options_visible });
    };

    render() {
        const form_messages = defineMessages({
            no_contributors: {
                id: 'ContributorsPanel.form.no_contributors',
                defaultMessage: 'There are no contributors for this',
            }
        });

        const { advanced_options_visible } = this.state;

        return (
            <div className="sw-contributors-panel" ref="contributorsPanel">
                <div className="ui">
                    <h4 className="ui header">
                        <FormattedMessage
                            id='ContributorsPanel.form.header'
                            defaultMessage='Creator' />
                    </h4>
                    <ContributorsList items={this.props.ContributorsStore.creator}/>
                    <Accordion onChange={this.handleAccordionChange} accordion={false}>
                        <AccordionItem>
                            <AccordionItemTitle>
                                <Icon name={advanced_options_visible ? 'down caret' : 'right caret'}/>
                                <FormattedMessage
                                    id='ContributorsPanel.form.title'
                                    defaultMessage='Contributors' />
                            </AccordionItemTitle>
                            <AccordionItemBody hideBodyClassName='hidden'>
                                {this.props.ContributorsStore.contributors.length === 0 ?
                                    `${this.context.intl.formatMessage(form_messages.no_contributors) + ' ' + this.props.ContributorsStore.selector.stype}.` :
                                    <ContributorsList items={this.props.ContributorsStore.contributors}/>}
                            </AccordionItemBody>
                        </AccordionItem>
                    </Accordion>
                </div>
{'fraction_non_alphanumeric': 0.10428202288667406, 'fraction_numerical': 0.002030269472129937, 'mean_word_length': 1.7521584560690706, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 44, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4507755', 'n_tokens_mistral': 1395, 'n_tokens_neox': 1285, 'n_words': 233}