{"size": 1456, "ext": "js", "max_stars_repo_path": "app/components/Flex/index.js", "max_stars_repo_name": "l-easwar-akiyama/react-starter-k", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "app/components/Flex/index.js", "max_issues_repo_name": "l-easwar-akiyama/react-starter-k", "max_issues_repo_issues_event_min_datetime": "2021-05-07T09:38:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-15T19:09:17.000Z", "max_forks_repo_path": "app/components/Flex/index.js", "max_forks_repo_name": "l-easwar-akiyama/react-starter-kit", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": null, "avg_line_length": 35.512195122, "max_line_length": 84, "alphanum_fraction": 0.7328296703}
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { pick, kebabCase } from 'lodash-es';
import flexTypes from './types';

const Flex = styled.div.attrs(props => ({
  style: {
    ...pick(props, flexTypes.dynamicProps),
    ...props.style,
  },
}))`
  display: flex;
  ${props => {
    return Object.entries(pick(props, flexTypes.staticProps)).map(
      ([key, value]) => `${kebabCase(key)}: ${value};`
    );
  }}
`;

Flex.propTypes = {
  flexDirection: PropTypes.oneOf(flexTypes.flexDirection),
  flexWrap: PropTypes.oneOf([...flexTypes.flexWrap, ...flexTypes.globalPropValues]),
  flex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  flexBasis: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  flexGrow: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  flexShrink: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  order: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  justifyContent: PropTypes.oneOf(flexTypes.justifyContent),
  justifyItems: PropTypes.oneOf(flexTypes.justifyItems),
  justifySelf: PropTypes.oneOf(flexTypes.justifySelf),
  alignContent: PropTypes.oneOf(flexTypes.alignContent),
  alignItems: PropTypes.oneOf(flexTypes.alignItems),
  alignSelf: PropTypes.oneOf(flexTypes.alignSelf),
  style: PropTypes.object,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

Flex.defaultProps = { style: {} };

export default Flex;
