2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-07-28 18:06:14 +00:00
|
|
|
import { isMobile } from "react-device-detect";
|
2019-08-20 13:08:07 +00:00
|
|
|
|
2021-02-15 06:46:40 +00:00
|
|
|
import {
|
|
|
|
TabletSideInfo,
|
|
|
|
SideContainerWrapper,
|
|
|
|
MainContainer,
|
|
|
|
MainIcons,
|
|
|
|
MainContainerWrapper,
|
|
|
|
StyledRowContent,
|
|
|
|
} from "./styled-row-content";
|
2019-08-20 13:08:07 +00:00
|
|
|
|
2020-12-23 10:31:17 +00:00
|
|
|
const getSideInfo = (content, convert) => {
|
2021-10-01 14:11:14 +00:00
|
|
|
let info = [];
|
2020-12-23 10:31:17 +00:00
|
|
|
let child = null;
|
2019-08-20 13:08:07 +00:00
|
|
|
const lastIndex = content.length - 1;
|
2019-12-03 12:59:18 +00:00
|
|
|
|
2019-08-20 13:08:07 +00:00
|
|
|
content.map((element, index) => {
|
2019-12-03 12:59:18 +00:00
|
|
|
if (index > 1) {
|
2020-12-23 10:31:17 +00:00
|
|
|
if (!convert && index === lastIndex) {
|
|
|
|
child = element;
|
|
|
|
} else {
|
2021-10-01 14:11:14 +00:00
|
|
|
element.props &&
|
|
|
|
element.props.children &&
|
|
|
|
info.push(element.props.children);
|
2020-12-23 10:31:17 +00:00
|
|
|
}
|
2019-08-20 13:08:07 +00:00
|
|
|
}
|
|
|
|
});
|
2021-10-01 14:11:14 +00:00
|
|
|
|
2020-12-23 10:31:17 +00:00
|
|
|
return (
|
|
|
|
<>
|
2021-10-01 14:11:14 +00:00
|
|
|
{info.join(" | ")}
|
2020-12-23 10:31:17 +00:00
|
|
|
{child}
|
|
|
|
</>
|
|
|
|
);
|
2019-08-20 13:08:07 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const RowContent = (props) => {
|
|
|
|
const {
|
|
|
|
children,
|
|
|
|
disableSideInfo,
|
|
|
|
id,
|
|
|
|
className,
|
|
|
|
style,
|
|
|
|
sideColor,
|
|
|
|
onClick,
|
2020-10-30 11:20:55 +00:00
|
|
|
sectionWidth,
|
2020-12-23 10:31:17 +00:00
|
|
|
convertSideInfo,
|
2020-10-16 13:16:01 +00:00
|
|
|
} = props;
|
2019-08-20 13:08:07 +00:00
|
|
|
|
2020-12-23 10:31:17 +00:00
|
|
|
const sideInfo = getSideInfo(children, convertSideInfo);
|
2020-10-16 13:16:01 +00:00
|
|
|
const mainContainerWidth =
|
|
|
|
children[0].props && children[0].props.containerWidth;
|
2019-08-20 13:08:07 +00:00
|
|
|
|
|
|
|
return (
|
2019-12-03 12:59:18 +00:00
|
|
|
<StyledRowContent
|
2020-09-01 12:20:55 +00:00
|
|
|
className={className}
|
2019-12-03 12:59:18 +00:00
|
|
|
disableSideInfo={disableSideInfo}
|
|
|
|
id={id}
|
2020-09-01 12:20:55 +00:00
|
|
|
onClick={onClick}
|
2020-03-20 09:00:56 +00:00
|
|
|
style={style}
|
2020-10-30 11:20:55 +00:00
|
|
|
widthProp={sectionWidth}
|
2020-09-14 05:51:54 +00:00
|
|
|
isMobile={isMobile}
|
2020-09-01 12:20:55 +00:00
|
|
|
>
|
2020-03-16 09:18:35 +00:00
|
|
|
<MainContainerWrapper
|
|
|
|
disableSideInfo={disableSideInfo}
|
2020-09-01 12:20:55 +00:00
|
|
|
mainContainerWidth={mainContainerWidth}
|
2020-10-30 11:20:55 +00:00
|
|
|
widthProp={sectionWidth}
|
2020-09-14 05:51:54 +00:00
|
|
|
isMobile={isMobile}
|
2021-09-30 07:57:35 +00:00
|
|
|
className="row-main-container-wrapper"
|
2020-09-01 12:20:55 +00:00
|
|
|
>
|
|
|
|
<MainContainer
|
|
|
|
className="rowMainContainer"
|
2020-10-30 11:20:55 +00:00
|
|
|
widthProp={sectionWidth}
|
2020-09-14 05:51:54 +00:00
|
|
|
isMobile={isMobile}
|
2020-09-01 12:20:55 +00:00
|
|
|
>
|
2019-08-20 13:08:07 +00:00
|
|
|
{children[0]}
|
|
|
|
</MainContainer>
|
2020-10-16 13:16:01 +00:00
|
|
|
<MainIcons className="mainIcons">{children[1]}</MainIcons>
|
2019-08-20 13:08:07 +00:00
|
|
|
</MainContainerWrapper>
|
|
|
|
{children.map((element, index) => {
|
|
|
|
if (index > 1) {
|
|
|
|
return (
|
2020-03-16 09:18:35 +00:00
|
|
|
<SideContainerWrapper
|
|
|
|
disableSideInfo={disableSideInfo}
|
2020-10-16 13:16:01 +00:00
|
|
|
key={"side-" + index}
|
2020-03-16 09:18:35 +00:00
|
|
|
containerWidth={element.props && element.props.containerWidth}
|
2020-10-16 13:16:01 +00:00
|
|
|
containerMinWidth={
|
|
|
|
element.props && element.props.containerMinWidth
|
|
|
|
}
|
2020-10-30 11:20:55 +00:00
|
|
|
widthProp={sectionWidth}
|
2020-09-14 05:51:54 +00:00
|
|
|
isMobile={isMobile}
|
2020-09-01 12:20:55 +00:00
|
|
|
>
|
2019-08-20 13:08:07 +00:00
|
|
|
{element}
|
|
|
|
</SideContainerWrapper>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
})}
|
2020-10-16 13:16:01 +00:00
|
|
|
{!disableSideInfo && (
|
2020-09-01 12:20:55 +00:00
|
|
|
<TabletSideInfo
|
2020-12-23 10:31:17 +00:00
|
|
|
className="row-content_tablet-side-info"
|
2020-09-01 12:20:55 +00:00
|
|
|
color={sideColor}
|
2020-10-30 11:20:55 +00:00
|
|
|
widthProp={sectionWidth}
|
2020-09-14 05:51:54 +00:00
|
|
|
isMobile={isMobile}
|
2020-12-23 10:31:17 +00:00
|
|
|
convertSideInfo={convertSideInfo}
|
2020-09-01 12:20:55 +00:00
|
|
|
>
|
2019-12-03 12:59:18 +00:00
|
|
|
{sideInfo}
|
|
|
|
</TabletSideInfo>
|
2020-10-16 13:16:01 +00:00
|
|
|
)}
|
2019-12-03 12:59:18 +00:00
|
|
|
</StyledRowContent>
|
2020-10-16 13:16:01 +00:00
|
|
|
);
|
2019-08-20 13:08:07 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
RowContent.propTypes = {
|
2021-03-10 11:15:22 +00:00
|
|
|
/** Components displayed inside RowContent */
|
2019-10-23 13:31:40 +00:00
|
|
|
children: PropTypes.node.isRequired,
|
2021-03-10 11:15:22 +00:00
|
|
|
/** Accepts class */
|
2019-12-03 12:59:18 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-10 11:15:22 +00:00
|
|
|
/** If you do not need SideElements */
|
2020-03-20 09:00:56 +00:00
|
|
|
disableSideInfo: PropTypes.bool,
|
2021-03-10 11:15:22 +00:00
|
|
|
/** Accepts id */
|
2019-12-03 12:59:18 +00:00
|
|
|
id: PropTypes.string,
|
2020-03-20 09:00:56 +00:00
|
|
|
onClick: PropTypes.func,
|
2021-03-10 11:15:22 +00:00
|
|
|
/** Need for change side information color */
|
2020-03-20 09:00:56 +00:00
|
|
|
sideColor: PropTypes.string,
|
2021-03-10 11:15:22 +00:00
|
|
|
/** Accepts css style */
|
2020-09-01 12:20:55 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2020-10-30 11:20:55 +00:00
|
|
|
sectionWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
2020-10-16 13:16:01 +00:00
|
|
|
isMobile: PropTypes.bool,
|
2020-12-23 10:31:17 +00:00
|
|
|
convertSideInfo: PropTypes.bool,
|
2019-10-23 13:31:40 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
RowContent.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
disableSideInfo: false,
|
2020-12-23 10:31:17 +00:00
|
|
|
convertSideInfo: true,
|
2019-08-20 13:08:07 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
export default RowContent;
|