// @flow
import React from 'react';
import PropTypes from 'prop-types';
import type { ReactChildren } from 'react-flow-types';

import FlexCell from './FlexCell';
import Tag from './Tag';
import TextEllipsis from './TextEllipsis';

import wrapIfNotElement from './utils/wrapIfNotElement';

export type Props = {
    basic?: ReactChildren,
    tag?: ReactChildren,
    statusIcon?: ReactChildren,
    children?: ReactChildren, // eslint-disable-line react/require-default-props
};

function BasicRow({ basic, tag, statusIcon, children, ...otherProps }: Props) {
    const basicCell = (
        <FlexCell shrink>
            <TextEllipsis>{basic}</TextEllipsis>
        </FlexCell>
    );

    return (
        <div {...otherProps}>
            {basic && basicCell}
            {tag && wrapIfNotElement(tag, { with: Tag })}
            {statusIcon && wrapIfNotElement(statusIcon, { with: 'span' })}
            {children}
        </div>
    );
}

BasicRow.propTypes = {
    basic: PropTypes.node,
    tag: PropTypes.node,
    statusIcon: PropTypes.node,
};

BasicRow.defaultProps = {
    basic: undefined,
    tag: undefined,
    statusIcon: undefined,
};

export default BasicRow;

@@ -562,28 +562,97 @@
     
-const basicCell = (%0A
+if (!basic) %7B%0A        return null;%0A    %7D%0A%0A    return (%0A        %3Cdiv %7B...otherProps%7D%3E%0A    
     
@@ -673,16 +673,20 @@
 shrink%3E%0A
+    
         
@@ -734,16 +734,20 @@
         
+    
 %3C/FlexCe
@@ -754,91 +754,8 @@
 ll%3E%0A
-    );%0A%0A    return (%0A        %3Cdiv %7B...otherProps%7D%3E%0A            %7Bbasic && basicCell%7D
 %0A   

Fix <BasicRow> should render nothing if 'basic' isn't set