Files
outline/app/components/InputRich.js
2018-11-18 13:12:46 -08:00

39 lines
861 B
JavaScript

// @flow
import * as React from 'react';
import styled from 'styled-components';
import RichMarkdownEditor from 'rich-markdown-editor';
import { LabelText, Outline } from 'components/Input';
type Props = {
label: string,
minHeight?: number,
maxHeight?: number,
};
export default function InputRich({
label,
minHeight,
maxHeight,
...rest
}: Props) {
return (
<React.Fragment>
<LabelText>{label}</LabelText>
<StyledOutline maxHeight={maxHeight} minHeight={minHeight}>
<RichMarkdownEditor {...rest} />
</StyledOutline>
</React.Fragment>
);
}
const StyledOutline = styled(Outline)`
padding: 8px 12px;
min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : '0')};
max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'auto')};
overflow: scroll;
> * {
display: block;
}
`;