{"size": 618, "ext": "js", "max_stars_repo_path": "packages/af-react-grid/src/Container/index.js", "max_stars_repo_name": "nowaalex/af-react-grid", "max_stars_repo_stars_event_min_datetime": "2018-10-29T20:10:45.000Z", "max_stars_repo_stars_event_max_datetime": "2021-09-13T13:20:46.000Z", "max_issues_repo_path": "packages/af-react-grid/src/Container/index.js", "max_issues_repo_name": "nowaalex/react-resizable-grid", "max_issues_repo_issues_event_min_datetime": "2018-11-01T13:42:44.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-17T20:18:08.000Z", "max_forks_repo_path": "packages/af-react-grid/src/Container/index.js", "max_forks_repo_name": "nowaalex/react-resizable-grid", "max_forks_repo_forks_event_min_datetime": "2019-07-24T01:30:21.000Z", "max_forks_repo_forks_event_max_datetime": "2019-07-24T01:30:21.000Z"}
{"max_stars_count": 9, "max_issues_count": 6, "max_forks_count": 1, "avg_line_length": 28.0909090909, "max_line_length": 95, "alphanum_fraction": 0.6699029126}

import React, { forwardRef } from "react";
import { TypeContext } from "../contexts";
import { css, cx } from "emotion";

const containerBaseCss = css`
    display: flex;
    flex-wrap: nowrap;
`;

const colCss = cx(containerBaseCss, css`flex-direction: column;`);

const rowCss = cx(containerBaseCss, css`flex-direction: row;`);


const Container = forwardRef(({ type, Component = "div", className, ...props }, ref ) => (
    <TypeContext.Provider value={type}>
        <Component className={cx(type==="col"?colCss:rowCss,className)} {...props} ref={ref} />
    </TypeContext.Provider>
));

export default Container;