{"size": 1528, "ext": "js", "max_stars_repo_path": "packages/bappo-components/src/components/Dropdown/Dropdown.native.js", "max_stars_repo_name": "bappogroup/bappo-components-conversion", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/bappo-components/src/components/Dropdown/Dropdown.native.js", "max_issues_repo_name": "bappogroup/bappo-components-conversion", "max_issues_repo_issues_event_min_datetime": "2020-09-07T10:36:42.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-18T11:36:44.000Z", "max_forks_repo_path": "packages/bappo-components/src/components/Dropdown/Dropdown.native.js", "max_forks_repo_name": "bappogroup/bappo-components-conversion", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 16, "max_forks_count": null, "avg_line_length": 21.5211267606, "max_line_length": 81, "alphanum_fraction": 0.582460733}
// @flow

import * as React from 'react';
// Note that this is not the Modal we export. It has a slide animation on native.
import Modal from './Modal';
import Icon from '../Icon';
import {
  ActionRow,
  LinkContainer,
  LinkInner,
  ModalContainer,
  Label,
  BackLink,
} from './StyledComponents.native.js';

type RequiredProps = {
  actions: any,
  icon: string,
};
type OptionalProps = {
  children: any,
};
type Props = RequiredProps & OptionalProps;

type State = {
  active: boolean,
};

class Dropdown extends React.Component<Props, State> {
  state = {
    active: false,
  };

  render() {
    const { actions, icon = 'more-vert', children } = this.props;

    return (
      <LinkContainer>
        <LinkInner onPress={() => this.setState({ active: true })}>
          {children || <Icon name={icon} />}
        </LinkInner>
        <Modal onRequestClose={this._close} visible={this.state.active}>
          <ModalContainer>
            <BackLink onPress={this._close}>
              <Icon name="arrow-back-ios" />
            </BackLink>
            {actions.map(this.renderAction)}
          </ModalContainer>
        </Modal>
      </LinkContainer>
    );
  }

  renderAction = (action: any) => (
    <ActionRow
      key={action.label}
      onPress={() => {
        this._close();
        action.onPress();
      }}
    >
      {action.icon && <Icon name={action.icon} />}
      <Label>{action.label}</Label>
    </ActionRow>
  );

  _close = () => this.setState({ active: false });
}

export default Dropdown;
