2019-08-27 12:43:30 +00:00
|
|
|
import React from 'react'
|
2019-09-04 09:17:55 +00:00
|
|
|
import styled, { css } from 'styled-components';
|
2019-08-27 12:43:30 +00:00
|
|
|
import device from '../device'
|
|
|
|
|
import Label from '../label'
|
|
|
|
|
|
2019-09-04 09:17:55 +00:00
|
|
|
const horizontalCss = css`
|
2019-08-27 12:43:30 +00:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
2019-09-04 09:17:55 +00:00
|
|
|
align-items: start;
|
2019-08-27 12:43:30 +00:00
|
|
|
margin: 0 0 16px 0;
|
|
|
|
|
|
|
|
|
|
.field-label {
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 110px;
|
|
|
|
|
}
|
2019-09-04 09:17:55 +00:00
|
|
|
`
|
|
|
|
|
const verticalCss = css`
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: start;
|
|
|
|
|
margin: 0 0 16px 0;
|
2019-08-27 12:43:30 +00:00
|
|
|
|
2019-09-04 09:17:55 +00:00
|
|
|
.field-label {
|
|
|
|
|
line-height: unset;
|
|
|
|
|
margin: 0 0 4px 0;
|
|
|
|
|
width: auto;
|
|
|
|
|
flex-grow: 1;
|
2019-08-27 12:43:30 +00:00
|
|
|
}
|
2019-09-04 09:17:55 +00:00
|
|
|
`
|
2019-08-27 12:43:30 +00:00
|
|
|
|
2019-09-04 09:17:55 +00:00
|
|
|
const Container = styled.div`
|
|
|
|
|
${props => props.vertical ? verticalCss : horizontalCss }
|
2019-08-27 12:43:30 +00:00
|
|
|
|
|
|
|
|
@media ${device.tablet} {
|
2019-09-04 09:17:55 +00:00
|
|
|
${verticalCss}
|
2019-08-27 12:43:30 +00:00
|
|
|
}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const Body = styled.div`
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const FieldContainer = React.memo((props) => {
|
2019-09-04 09:17:55 +00:00
|
|
|
const {isVertical, className, isRequired, hasError, labelText, children} = props;
|
2019-08-27 12:43:30 +00:00
|
|
|
return (
|
2019-09-04 09:17:55 +00:00
|
|
|
<Container vertical={isVertical} className={className}>
|
2019-08-27 12:43:30 +00:00
|
|
|
<Label isRequired={isRequired} error={hasError} text={labelText} className="field-label"/>
|
|
|
|
|
<Body>{children}</Body>
|
|
|
|
|
</Container>
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
export default FieldContainer
|
