<commit_before>import * as React from 'react';
import { autobind } from '../../utilities/autobind';
import { IBreadcrumbsProps, IBreadcrumbItem, ICurrentPathItem } from './Breadcrumbs.Props';
import { Dropdown } from '../Dropdown/Dropdown';
import { DropdownType, IDropdownOption } from '../Dropdown/Dropdown.Props';
import './Breadcrumbs.scss';

const objectAssign = require('object-assign');

export class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps, any> {
    private _dropdown: Dropdown[] = Array<Dropdown>(0);

    public static defaultProps = {
        iconNameCollapsed: 'icon-arrow_right',
        iconNameExpanded: 'icon-arrow_down_right'
    };

    constructor(props) {
        super(props);

        const currentPath = this.getDisplayItemsFromProps(props);
        this.state = { currentPath: currentPath };
    }

    public componentWillReceiveProps(nextProps: IBreadcrumbsProps, nextState: any) {
        const currentPath = this.getDisplayItemsFromProps(nextProps);
        this.setState({ currentPath: currentPath });
    }

    public componentWillUnmount() {
        this._dropdown = Array(0);
    }

    public render(): JSX.Element {
        const paths = this.state.currentPath.map((item, index) => {
                const iconName = item.selected ? this.props.iconNameExpanded : this.props.iconNameCollapsed;
                return (
                    <li className={'breadcrumbs-list-item'} key={index} >
                        <Dropdown
                            className={'breadcrumbs-dropdown'}
                            ref={this.setDropdownReference}
                            dropdownType={DropdownType.customDropdown} 
                            icon={iconName} 
                            onClosed={() => this.closeMenu(item)} 
                            onMenuToggle={(willOpen) => this.menuToggle(item, willOpen)}
                        >
                            {this.mapSiblingsToMenu(item.siblings)}
                        </Dropdown>
                        <a 
                            className={'breadcrumbs-item-link'} 
                            onClick={() => this.props.onPathClick(item.url)}
                        >{item.name}</a>
                    </li>
                );
            }
        );

        return (
            <div className={'breadcrumbs'}>
                <ul className={'breadcrumbs-list'}>{paths}</ul>
            </div>
        );
    }

    @autobind
    private setDropdownReference(dropdown) {
        if (dropdown === null) { return; }
        this._dropdown.push(dropdown);
    }

    private mapSiblingsToMenu(siblings: Array<ICurrentPathItem>) {
        return siblings.map((sibling, index) => {
            return <li key={index} onClick={() => this.handleMenuClick(sibling)}>{sibling.name}</li>;
        });
    }

    private handleMenuClick(item: ICurrentPathItem) {
        this.props.onPathClick(item.url);
        this.closeMenu(item);
        this._dropdown[item.index].closeDropdown();
    }

    private closeMenu(item: ICurrentPathItem) {
        const newPath = this.state.currentPath.map((path) => {
            if (path.index === item.index) { 
                return objectAssign({}, path, { selected: false }); <commit_msg>Add calloutClassName and title attribute to breadcrumbs dropdown component<commit_after>import * as React from 'react';
import { autobind } from '../../utilities/autobind';
import { IBreadcrumbsProps, IBreadcrumbItem, ICurrentPathItem } from './Breadcrumbs.Props';
import { Dropdown } from '../Dropdown/Dropdown';
import { DropdownType, IDropdownOption } from '../Dropdown/Dropdown.Props';
import './Breadcrumbs.scss';

const objectAssign = require('object-assign');

export class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps, any> {
    private _dropdown: Dropdown[] = Array<Dropdown>(0);

    public static defaultProps = {
        iconNameCollapsed: 'icon-arrow_right',
        iconNameExpanded: 'icon-arrow_down_right'
    };

    constructor(props) {
        super(props);

        const currentPath = this.getDisplayItemsFromProps(props);
        this.state = { currentPath: currentPath };
    }

    public componentWillReceiveProps(nextProps: IBreadcrumbsProps, nextState: any) {
        const currentPath = this.getDisplayItemsFromProps(nextProps);
        this.setState({ currentPath: currentPath });
    }

    public componentWillUnmount() {
        this._dropdown = Array(0);
    }

    public render(): JSX.Element {
        const paths = this.state.currentPath.map((item, index) => {
                const iconName = item.selected ? this.props.iconNameExpanded : this.props.iconNameCollapsed;
                return (
                    <li className={'breadcrumbs-list-item'} key={index} >
                        <Dropdown
                            className={'breadcrumbs-dropdown'}
                            calloutClassName={'breadcrumbs-dropdown-callout'}
                            ref={this.setDropdownReference}
                            dropdownType={DropdownType.customDropdown} 
                            icon={iconName} 
                            onClosed={() => this.closeMenu(item)} 
                            onMenuToggle={(willOpen) => this.menuToggle(item, willOpen)}
                        >
                            {this.mapSiblingsToMenu(item.siblings)}
                        </Dropdown>
                        <a 
                            className={'breadcrumbs-item-link'} 
                            onClick={() => this.props.onPathClick(item.url)}
                        >{item.name}</a>
                    </li>
                );
            }
        );

        return (
            <div className={'breadcrumbs'}>
                <ul className={'breadcrumbs-list'}>{paths}</ul>
            </div>
        );
    }

    @autobind
    private setDropdownReference(dropdown) {
        if (dropdown === null) { return; }
        this._dropdown.push(dropdown);
    }

    private mapSiblingsToMenu(siblings: Array<ICurrentPathItem>) {
        return siblings.map((sibling, index) => {
            return <li key={index} onClick={() => this.handleMenuClick(sibling)} title={sibling.name}>{sibling.name}</li>;
        });
    }

    private handleMenuClick(item: ICurrentPathItem) {
        this.props.onPathClick(item.url);
        this.closeMenu(item);
        this._dropdown[item.index].closeDropdown();
    }

    private closeMenu(item: ICurrentPathItem) {
        const newPath = this.state.currentPath.map((path) => {
            if (path.index === item.index) { 
                return objectAssign({}, path, { selected: false }); 
{'fraction_non_alphanumeric': 0.12054507337526206, 'fraction_numerical': 0.0005989817310572028, 'mean_word_length': 1.9737310774710597, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '358383', 'n_tokens_mistral': 1810, 'n_tokens_neox': 1784, 'n_words': 306}