<commit_before>import * as React from "react";
import * as classNames from "classnames";
import { map } from "underscore";

import listensToClickOutside = require("react-onclickoutside");
import { connect } from "../connect";

import DropdownItem, { IDropdownItem } from "./dropdown-item";

import styled, * as styles from "../styles";

const DropdownContainer = styled.div`
  position: relative;

  &.disabled {
    opacity: 0;
    pointer-events: none;
  }
`;

const DropdownInnerContainer = styled.div`
  &.flipped .flipper {
    transform: rotateZ(180deg);
  }
`;

const DropdownDiv = styled.div`
  background-color: ${props => props.theme.accent};
  border: 1px solid ${props => props.theme.lightAccent};
  box-shadow: 0 0 2px ${props => props.theme.accent};
  position: absolute;
  top: 0;
  left: 8px;
  right: 0px;
  visibility: hidden;

  &.updown {
    top: initial;
    bottom: 100%;
  }

  &.active {
    visibility: visible;
    animation: ${styles.animations.fadeIn} ease-in 0.2s;
  }
`;

export class Dropdown extends React.PureComponent<
  IProps & IDerivedProps,
  IState
> {
  constructor() {
    super();
    this.state = { open: false };
  }

  render() {
    const {
      items,
      inner,
      className,
      updown = false,
      ...restProps,
    } = this.props;

    const { open } = this.state;
    const containerClasses = classNames(className, {
      disabled: items.length === 0,
    });
    const dropdownClasses = classNames({ active: open, updown });

    let children = [];
    if (open) {
      children = map(items, (item, i) => (
        <DropdownItem key={i} item={item} onClick={this.close} />
      ));
    }

    let innerClasses = "";
    if (updown !== open) {
      // boolean xor
      innerClasses += "flipped";
    }

    const innerC = (
      <DropdownInnerContainer
        key="inner"
        className={innerClasses}
        onClick={this.toggle}
      >
        {inner}
      </DropdownInnerContainer>
    );

    const childrenC = (
      <DropdownDiv key="children" className={dropdownClasses}>
        {children}
      </DropdownDiv>
    );

    return (
      <DropdownContainer
        style={{ position: "relative" }}
        className={containerClasses}
        {...restProps}
      >
        {updown ? [childrenC, innerC] : [innerC, childrenC]}
      </DropdownContainer>
    );
  }
<commit_msg>use fragment in dropdown, cf. #1657<commit_after>import * as React from "react";
import * as classNames from "classnames";
import { map } from "underscore";

import listensToClickOutside = require("react-onclickoutside");
import { connect } from "../connect";

import DropdownItem, { IDropdownItem } from "./dropdown-item";

import styled, * as styles from "../styles";

const DropdownContainer = styled.div`
  position: relative;

  &.disabled {
    opacity: 0;
    pointer-events: none;
  }
`;

const DropdownInnerContainer = styled.div`
  &.flipped .flipper {
    transform: rotateZ(180deg);
  }
`;

const DropdownDiv = styled.div`
  background-color: ${props => props.theme.accent};
  border: 1px solid ${props => props.theme.lightAccent};
  box-shadow: 0 0 2px ${props => props.theme.accent};
  position: absolute;
  top: 0;
  left: 8px;
  right: 0px;
  visibility: hidden;

  &.updown {
    top: initial;
    bottom: 100%;
  }

  &.active {
    visibility: visible;
    animation: ${styles.animations.fadeIn} ease-in 0.2s;
  }
`;

export class Dropdown extends React.PureComponent<
  IProps & IDerivedProps,
  IState
> {
  constructor() {
    super();
    this.state = { open: false };
  }

  render() {
    const {
      items,
      inner,
      className,
      updown = false,
      ...restProps
    } = this.props;

    const { open } = this.state;
    const containerClasses = classNames(className, {
      disabled: items.length === 0,
    });
    const dropdownClasses = classNames({ active: open, updown });

    let children = [];
    if (open) {
      children = map(items, (item, i) => (
        <DropdownItem key={i} item={item} onClick={this.close} />
      ));
    }

    let innerClasses = "";
    if (updown !== open) {
      // boolean xor
      innerClasses += "flipped";
    }

    const innerC = (
      <DropdownInnerContainer className={innerClasses} onClick={this.toggle}>
        {inner}
      </DropdownInnerContainer>
    );

    const childrenC = (
      <DropdownDiv className={dropdownClasses}>{children}</DropdownDiv>
    );

    return (
      <DropdownContainer
        style={{ position: "relative" }}
        className={containerClasses}
        {...restProps}
      >
        {updown ? (
          <>
            {childrenC} {innerC}
          </>
        ) : (
          <>
            {innerC} {childrenC}
          </>
        )}
      </DropdownContainer>
    );
  }

{'fraction_non_alphanumeric': 0.14157068062827224, 'fraction_numerical': 0.007958115183246073, 'mean_word_length': 2.4810495626822155, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 31, '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': '7539759', 'n_tokens_mistral': 1549, 'n_tokens_neox': 1489, 'n_words': 349}