<commit_before>import React from "react";
import ShallowComponent from "robe-react-commons/lib/components/ShallowComponent";
import Renderer from "./Renderer";
import {Grid, Col, ListGroup, ListGroupItem, InputGroup} from "react-bootstrap";
import "react-notifications/lib/notifications.css";
import NotificationContainer from "react-notifications/lib/NotificationContainer";
import ComponentList from "./ComponentList";
import Progress from "progress/Progress";
import TextInput from "inputs/TextInput";
import FaIcon from "faicon/FaIcon";


export default class Showcase extends ShallowComponent {

    constructor(props:Object) {
        super(props);
        this.state = {
            componentSelection: window.location.hash.substring(1) === "Components" ? "Components/TextInput" : window.location.hash.substring(1),
            filter: ""
        };
    }

    render():Object {
        let componentDetail;
        let componentMenu = [];
        let components = ComponentList.getList(this.state, this.__handleChange);

        for (let i = 0; i < components.length; i++) {
            let item = components[i];
            let active = this.state.componentSelection === `Components/${item.header}`;
            if (item.header.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1) {
                componentMenu.push(
                    <ListGroupItem
                        href={`#Components/${item.header}`}
                        key={`#${item.header}`}
                        onClick={this.__onComponenListClick}
                        active={active}
                    >
                        {item.header}
                    </ListGroupItem>);
                if (active) {
                    componentDetail = (
                        <Renderer
                            header={item.header}
                            desc={item.desc}
                            alternatives={item.alternatives}
                            json={item.json}
                            sample={item.sample}
                            code={item.code}
                        />);
                }
            }
        }
        return (
            <Grid>
                <NotificationContainer />
                <h2>Components</h2>
                <h5>Here you can find the samples and usages of the components.</h5>
                <Col xs={12} sm={3} style={{ borderRight: "lightgray 1px solid",paddingLeft:0 }}>
                    <TextInput
                        inputGroupRight={<InputGroup.Addon> <FaIcon code="fa-search" size="fa-sm" /> </InputGroup.Addon>}
                        onChange={this.__onFilterChange}
                        value={this.state.filter}
                        placeholder="Search"
                    />
                    <ListGroup>{componentMenu}</ListGroup>
                </Col>
                <Col xs={12} sm={9} ref="componentView">
                    {componentDetail}
                </Col>
            </Grid>
        );
    }

    __onFilterChange = (e:Object) => {
        this.setState({
            filter: e.target.value
        });
    };

    __onComponenListClick = (e:Object) => {
        this.setState({
            componentSelection: `Components/${e.target.text}`
        });
        Progress.start();
    };
}
<commit_msg>was changed  class name Components<commit_after>import React from "react";
import ShallowComponent from "robe-react-commons/lib/components/ShallowComponent";
import Renderer from "./Renderer";
import {Grid, Col, ListGroup, ListGroupItem, InputGroup} from "react-bootstrap";
import "react-notifications/lib/notifications.css";
import NotificationContainer from "react-notifications/lib/NotificationContainer";
import ComponentList from "./ComponentList";
import Progress from "progress/Progress";
import TextInput from "inputs/TextInput";
import FaIcon from "faicon/FaIcon";


export default class Components extends ShallowComponent {

    constructor(props:Object) {
        super(props);
        this.state = {
            componentSelection: window.location.hash.substring(1) === "Components" ? "Components/TextInput" : window.location.hash.substring(1),
            filter: ""
        };
    }

    render():Object {
        let componentDetail;
        let componentMenu = [];
        let components = ComponentList.getList(this.state, this.__handleChange);

        for (let i = 0; i < components.length; i++) {
            let item = components[i];
            let active = this.state.componentSelection === `Components/${item.header}`;
            if (item.header.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1) {
                componentMenu.push(
                    <ListGroupItem
                        href={`#Components/${item.header}`}
                        key={`#${item.header}`}
                        onClick={this.__onComponenListClick}
                        active={active}
                    >
                        {item.header}
                    </ListGroupItem>);
                if (active) {
                    componentDetail = (
                        <Renderer
                            header={item.header}
                            desc={item.desc}
                            alternatives={item.alternatives}
                            json={item.json}
                            sample={item.sample}
                            code={item.code}
                        />);
                }
            }
        }
        return (
            <Grid>
                <NotificationContainer />
                <h2>Components</h2>
                <h5>Here you can find the samples and usages of the components.</h5>
                <Col xs={12} sm={3} style={{ borderRight: "lightgray 1px solid",paddingLeft:0 }}>
                    <TextInput
                        inputGroupRight={<InputGroup.Addon> <FaIcon code="fa-search" size="fa-sm" /> </InputGroup.Addon>}
                        onChange={this.__onFilterChange}
                        value={this.state.filter}
                        placeholder="Search"
                    />
                    <ListGroup>{componentMenu}</ListGroup>
                </Col>
                <Col xs={12} sm={9} ref="componentView">
                    {componentDetail}
                </Col>
            </Grid>
        );
    }

    __onFilterChange = (e:Object) => {
        this.setState({
            filter: e.target.value
        });
    };

    __onComponenListClick = (e:Object) => {
        this.setState({
            componentSelection: `Components/${e.target.text}`
        });
        Progress.start();
    };
}

{'fraction_non_alphanumeric': 0.11676422032117664, 'fraction_numerical': 0.0048026414527990394, 'mean_word_length': 1.528072837632777, 'pattern_counts': {'":': 0, '<': 45, '<?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': '4601666', 'n_tokens_mistral': 1661, 'n_tokens_neox': 1602, 'n_words': 310}