<commit_before>import React from "react";
import ReactDom from "react-dom";
import { Component } from "../../CarbonFlux";
import cx from 'classnames';
import { default as bem, join_bem_mods, IHasMods } from '../../utils/commonUtils';
import FlyoutButton from '../FlyoutButton';
import ScrollContainer from '../ScrollContainer';
import { FormattedMessage } from "react-intl";
import { IArtboard, IPage } from "carbon-core";

function b(a, b, c) { return bem('drop', a, b, c) }

function stopPropagation(e) {
    if (e) {
        e.stopPropagation();
    }
}

export interface IGuiSelectProps<T> extends ISimpleReactElementProps, IHasMods<
    "small" |
    "medium"
> {
    selectedItem?: T;

    items: T[];
    renderItem?: (item: T) => JSX.Element;
    renderCustomItems?: () => JSX.Element[];

    caption?: string;
    onSelect: (item: T) => void;
}

export default class GuiSelect<T = any> extends Component<IGuiSelectProps<T>>{
    static defaultProps: Partial<IGuiSelectProps<any>> = {
        mods: "medium"
    }

    refs: {
        scrollContainer: ScrollContainer
    }

    constructor(props) {
        super(props);
    }

    private selectItem = (e: React.MouseEvent<HTMLDivElement>) => {
        let newIndex = parseInt(e.currentTarget.dataset.index);
        let newItem = this.props.items[newIndex];
        if (newItem !== this.props.selectedItem) {
            this.props.onSelect(newItem);
        }
    };

    private renderPill = () => {
        let selectedChild = null;

        if (this.props.selectedItem) {
            selectedChild = this.props.renderItem ? this.props.renderItem(this.props.selectedItem) : this.props.selectedItem;
        }
        else if (this.props.caption) {
            selectedChild = <FormattedMessage id={this.props.caption} tagName="i" />
        }
        else {
            selectedChild = <i>---</i>;
        }

        return <div className="drop__pill">
            {selectedChild}
            <i className="ico ico-triangle" />
        </div >
    };

    private renderFlyoutContent() {
        let options = this.props.items.map((item, i) => {
            let classes = bem('drop', 'item',
                { selectable: true }
            );

            var renderedItem = this.props.renderItem ? this.props.renderItem(item) : item;
            return <div className={classes} key={i} data-index={i} onClick={this.selectItem} onMouseDown={stopPropagation}>{renderedItem}</div>;
        });

        if (this.props.renderCustomItems) {
            options = options.concat(this.props.renderCustomItems().map((element, i) => {
                let classes = bem('drop', 'item', { selectable: true });
                return <div className={classes} key={this.props.items.length + i} onMouseDown={stopPropagation}>{element}</div>;
            }));
        }

        return <div className={bem('drop', 'content', this.props.mods, this.props.className)}>
            <ScrollContainer
                boxClassName="drop__list"
                insideFlyout={true}
                ref="scrollContainer"
            >{options}</ScrollContainer>
        </div>
    }

    render() {
        var dropClasses = bem('drop', null, this.props.mods, this.props.className);

        return <FlyoutButton
            className={dropClasses}
            renderContent={this.renderPill}
            position={{
                targetVertical: "bottom",
                syncWidth: true
            }}>
            {this.renderFlyoutContent()}
        </FlyoutButton>
    }
}

//common selects
export type ArtboardSelect = new (props) => GuiSelect<IArtboard>;
export const ArtboardSelect = GuiSelect as ArtboardSelect;

export type PageSelect = new (props) => GuiSelect<IPage>;
export const PageSelect = GuiSelect as PageSelect;<commit_msg>fixed dropdowns<commit_after>import React from "react";
import ReactDom from "react-dom";
import { Component } from "../../CarbonFlux";
import cx from 'classnames';
import { default as bem, join_bem_mods, IHasMods } from '../../utils/commonUtils';
import FlyoutButton from '../FlyoutButton';
import ScrollContainer from '../ScrollContainer';
import { FormattedMessage } from "react-intl";
import { IArtboard, IPage } from "carbon-core";

function b(a, b, c) { return bem('drop', a, b, c) }

function stopPropagation(e) {
    if (e) {
        e.stopPropagation();
    }
}

export interface IGuiSelectProps<T> extends ISimpleReactElementProps, IHasMods<
    "small" |
    "medium"
> {
    selectedItem?: T;

    items: T[];
    renderItem?: (item: T) => JSX.Element;
    renderCustomItems?: () => JSX.Element[];

    caption?: string;
    onSelect: (item: T) => void;
}

export default class GuiSelect<T = any> extends Component<IGuiSelectProps<T>>{
    static defaultProps: Partial<IGuiSelectProps<any>> = {
        mods: "medium"
    }

    refs: {
        scrollContainer: ScrollContainer
    }

    constructor(props) {
        super(props);
    }

    private selectItem = (e: React.MouseEvent<HTMLDivElement>) => {
        let newIndex = parseInt(e.currentTarget.dataset.index);
        let newItem = this.props.items[newIndex];
        if (newItem !== this.props.selectedItem) {
            this.props.onSelect(newItem);
        }
    };

    private renderPill = () => {
        let selectedChild = null;

        if (this.props.selectedItem) {
            selectedChild = this.props.renderItem ? this.props.renderItem(this.props.selectedItem) : this.props.selectedItem;
        }
        else if (this.props.caption) {
            selectedChild = <FormattedMessage id={this.props.caption} tagName="i" />
        }
        else {
            selectedChild = <i>---</i>;
        }

        return <div className="drop__pill">
            {selectedChild}
            <i className="ico ico-triangle" />
        </div >
    };

    private renderFlyoutContent() {
        let options = this.props.items.map((item, i) => {
            let classes = bem('drop', 'item',
                { selectable: true }
            );

            var renderedItem = this.props.renderItem ? this.props.renderItem(item) : item;
            return <div className={classes} key={i} data-index={i} onClick={this.selectItem} onMouseDown={stopPropagation}>{renderedItem}</div>;
        });

        if (this.props.renderCustomItems) {
            options = options.concat(this.props.renderCustomItems().map((element, i) => {
                let classes = bem('drop', 'item', { selectable: true });
                return <div className={classes} key={this.props.items.length + i} onMouseDown={stopPropagation}>{element}</div>;
            }));
        }

        let mods = Object.assign({open: true}, this.props.mods);
        return <div className={bem('drop', 'content', mods, this.props.className)}>
            <ScrollContainer
                boxClassName="drop__list"
                insideFlyout={true}
                ref="scrollContainer"
            >{options}</ScrollContainer>
        </div>
    }

    render() {
        var dropClasses = bem('drop', null, this.props.mods, this.props.className);

        return <FlyoutButton
            className={dropClasses}
            renderContent={this.renderPill}
            position={{
                targetVertical: "bottom",
                syncWidth: true
            }}>
            {this.renderFlyoutContent()}
        </FlyoutButton>
    }
}

//common selects
export type ArtboardSelect = new (props) => GuiSelect<IArtboard>;
export const ArtboardSelect = GuiSelect as ArtboardSelect;

export type PageSelect = new (props) => GuiSelect<IPage>;
export const PageSelect = GuiSelect as PageSelect;
{'fraction_non_alphanumeric': 0.13519538421190663, 'fraction_numerical': 0.0, 'mean_word_length': 2.440234551195309, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 73, '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': '3073500', 'n_tokens_mistral': 2227, 'n_tokens_neox': 2174, 'n_words': 477}