<commit_before>// @flow
import React, {Component} from 'react';

import Dropdown from './dropdown.jsx';
import SelectPanel from './select-panel.jsx';

import type {
    Option,
} from './select-item.jsx';

class MultiSelect extends Component {
    props: {
        options: Array<Option>,
        selected: Array<any>,
        onSelectedChanged: (selected: Array<any>) => void,
    }

    render() {
        const {options, selected, onSelectedChanged} = this.props;

        return <Dropdown
            contentComponent={SelectPanel}
            contentProps={{options, selected, onSelectedChanged}}
        >
            How many do you want?
        </Dropdown>;
    }
}

export default MultiSelect;<commit_msg>Changing header text in context<commit_after>// @flow
import React, {Component} from 'react';

import Dropdown from './dropdown.jsx';
import SelectPanel from './select-panel.jsx';

import type {
    Option,
} from './select-item.jsx';

class MultiSelect extends Component {
    props: {
        options: Array<Option>,
        selected: Array<any>,
        onSelectedChanged: (selected: Array<any>) => void,
        noneSelectedText?: string,
        allSelectedText?: string,
    }

    renderHeader() {
        const {
            options,
            selected,
            noneSelectedText,
            allSelectedText
        } = this.props;

        const noneSelected = selected.length === 0;
        const allSelected = selected.length === options.length;

        if (noneSelected) {
            return <span style={styles.noneSelected}>
                {noneSelectedText || "Select some items..."}
            </span>;
        }

        if (allSelected) {
            return <span>
                {allSelectedText || "ALL"}
            </span>;
        }

        return <span>
            Selected {selected.length} items
        </span>;
    }

    render() {
        const {options, selected, onSelectedChanged} = this.props;

        return <Dropdown
            contentComponent={SelectPanel}
            contentProps={{options, selected, onSelectedChanged}}
        >
            {this.renderHeader()}
        </Dropdown>;
    }
}

const styles = {
    noneSelected: {
        color: "#aaa",
    },
};

export default MultiSelect;
{'fraction_non_alphanumeric': 0.1184792219274978, 'fraction_numerical': 0.0004420866489832007, 'mean_word_length': 2.0539811066126856, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, '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': '3457707', 'n_tokens_mistral': 605, 'n_tokens_neox': 592, 'n_words': 154}