{"size": 1023, "ext": "js", "max_stars_repo_path": "packages/base/Tabs/TabDropdown/index.js", "max_stars_repo_name": "spraoi/common-ui", "max_stars_repo_stars_event_min_datetime": "2019-08-09T03:20:28.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-24T04:14:56.000Z", "max_issues_repo_path": "packages/base/Tabs/TabDropdown/index.js", "max_issues_repo_name": "spraoi/common-ui", "max_issues_repo_issues_event_min_datetime": "2019-07-26T12:21:49.000Z", "max_issues_repo_issues_event_max_datetime": "2020-12-23T09:38:56.000Z", "max_forks_repo_path": "packages/base/Tabs/TabDropdown/index.js", "max_forks_repo_name": "spraoi/common-ui", "max_forks_repo_forks_event_min_datetime": "2020-10-13T04:57:29.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-13T04:57:29.000Z"}
{"max_stars_count": 2, "max_issues_count": 11, "max_forks_count": 1, "avg_line_length": 26.9210526316, "max_line_length": 78, "alphanum_fraction": 0.6363636364}
import PropTypes from 'prop-types';
import React from 'react';
import noop from 'lodash/noop';
import { Field, Form } from 'react-final-form';
import { navigate } from '@reach/router';
import Dropdown from '../../Dropdown';

const TabDropdown = ({ currentTab, generateLink, label, name, sx, tabs }) => (
  <Form initialValues={{ [name]: currentTab }} onSubmit={noop}>
    {() => (
      <Field
        component={Dropdown}
        label={label}
        name={name}
        onChange={(tab) => navigate(generateLink(tab), { replace: true })}
        options={tabs}
        wrapperSx={{ maxWidth: ['100%', null, null, '300px'], mb: 6, ...sx }}
      />
    )}
  </Form>
);

TabDropdown.propTypes = {
  currentTab: PropTypes.string.isRequired,
  generateLink: PropTypes.func.isRequired,
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
  sx: PropTypes.shape({}),
  tabs: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
};

TabDropdown.defaultProps = {
  label: null,
  sx: {},
};

export default TabDropdown;
