<commit_before>import * as React from 'react';
import classNames from 'classnames';
interface IProps {
    name: string;
    align?: 'left' | 'right';
    side?: 'left' | 'right';
}
export const Dropdown = ({
    name,
    align,
    side,
}: IProps) => {
    const [open, setOpen] = React.useState(false);
    const classes = classNames('dropdown', {
        ['open']: open,
        ['dropdown--align-right']: align === 'right',
        [`dropdown--drop${side}`]: side,
    });

    function isOpen() {
        if (!open) {
            setOpen(true);
            document.addEventListener('click', closeMenu);
        } else {
            setOpen(false);
        }
    }

    function closeMenu() {
        setOpen(false);
        document.removeEventListener('click', closeMenu);
    }

    return (
        <div className={classes} dropdown-append-to-body='true'>
            <button className='dropdown__toggle dropdown-toggle' onClick={isOpen}>{name}
                <span className="dropdown__caret"></span></button>
            <ul className='dropdown__menu'>
                <li><button>one</button></li>
                <li><button>two</button></li>
                <li><button>three</button></li>
            </ul>
        </div>
    );
};<commit_msg>react(feat): component structure changed<commit_after>import * as React from 'react';
import classNames from 'classnames';
import { PropsList } from './PropsList';
interface IProps {
    name: string;
    align?: 'left' | 'right';
    side?: 'left' | 'right';
    children: React.ReactNode;
}

interface IPropsItem {
    text: string;
    icon?: string;
}

interface IPropsLabel {
    text: string;
}

export const Dropdown = ({
    name,
    align,
    side,
    children,
}: IProps) => {
    const [open, setOpen] = React.useState(false);
    const [height, setHeight] = React.useState(false);
    const ref = React.useRef(null);
    React.useEffect(() => {
        let number = getOffset(ref.current);
        let second = getBodyOffset();
        let heightEl = heightElement(ref.current);
        if (heightEl > second - number.bottom) {
            setHeight(true);
        } else {
            setHeight(false);
        }
    }, [open]);

    const classes = classNames('dropdown', {
        ['open']: open,
        ['dropdown--align-right']: align === 'right',
        [`dropdown--drop${side}`]: side,
        ['dropdown--dropup']: height,
    });

    function isOpen() {
        if (!open) {
            setOpen(true);
            document.addEventListener('click', closeMenu);
        } else {
            setOpen(false);
        }
    }

    function closeMenu() {
        setOpen(false);
        document.removeEventListener('click', closeMenu);
    }

    function getOffset(el: any) {
        const rect = el.getBoundingClientRect();
        return {
            left: rect.left + window.scrollX,
            bottom: rect.bottom + window.scrollY,
        };
    }

    function getBodyOffset() {
        return screen.height;
    }

    function heightElement(el: any) {
        return el.clientHeight;
    }

    return (
        <div className={classes} >
            <button className='dropdown__toggle dropdown-toggle' onClick={isOpen}>{name}
                <span className="dropdown__caret"></span></button>
            <ul className='dropdown__menu' ref={ref}>
                {children}
            </ul>
        </div>
    );
};

export const DropdownItem = ({
    text,
    icon,
}: IPropsItem) => {

    return (
        <li><button><i className={icon ? ('icon-' + icon) : ''}></i>{text}</button></li>
    );
};

export const DropdownDivider = ({ }) => {
    return (<li className="dropdown__menu-divider"></li>);
};

export const DropdownLabel = ({
    text,
}: IPropsLabel) => {
    return (
        <li>
            <div className="dropdown__menu-label">{text}</div>
        </li>
    );
};
{'fraction_non_alphanumeric': 0.15618556701030928, 'fraction_numerical': 0.0, 'mean_word_length': 2.1889893179950697, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 50, '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': '1442482', 'n_tokens_mistral': 1136, 'n_tokens_neox': 1119, 'n_words': 237}