2018-12-10 09:06:44 -08:00
|
|
|
// @flow
|
2019-02-04 20:41:45 -08:00
|
|
|
|
2019-01-24 11:24:10 -08:00
|
|
|
/* eslint-disable max-len */
|
2018-12-10 09:06:44 -08:00
|
|
|
import React from 'react';
|
|
|
|
import styled from 'styled-components';
|
2019-01-24 11:24:10 -08:00
|
|
|
import type { ElementProps } from 'react';
|
2018-12-10 09:06:44 -08:00
|
|
|
|
2019-02-10 09:52:34 -08:00
|
|
|
import { appTheme } from '../theme';
|
2018-12-10 09:06:44 -08:00
|
|
|
|
2019-01-28 16:34:07 -08:00
|
|
|
export type Props = {
|
2019-01-24 11:24:10 -08:00
|
|
|
...ElementProps<'p'>,
|
2018-12-10 09:06:44 -08:00
|
|
|
value: string,
|
|
|
|
isBold?: boolean,
|
|
|
|
color?: string,
|
|
|
|
className?: string,
|
2018-12-12 11:03:35 -08:00
|
|
|
size?: string | number,
|
2018-12-12 13:14:41 -08:00
|
|
|
align?: string,
|
2019-02-18 15:40:15 -08:00
|
|
|
onClick?: Function,
|
|
|
|
onDoubleClick?: Function,
|
2018-12-10 09:06:44 -08:00
|
|
|
};
|
|
|
|
|
2019-02-06 19:06:48 -08:00
|
|
|
const Text = styled.p`
|
|
|
|
font-family: ${(props: PropsWithTheme<Props>) => props.theme.fontFamily};
|
|
|
|
font-size: ${(props: PropsWithTheme<Props>) => String(props.size)};
|
|
|
|
color: ${(props: PropsWithTheme<Props>) => props.color || props.theme.colors.text};
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
font-weight: ${(props: PropsWithTheme<Props>) => String(props.isBold ? props.theme.fontWeight.bold : props.theme.fontWeight.default)};
|
|
|
|
text-align: ${(props: PropsWithTheme<Props>) => props.align || 'left'};
|
|
|
|
`;
|
|
|
|
|
2018-12-10 09:06:44 -08:00
|
|
|
export const TextComponent = ({
|
2019-02-18 15:40:15 -08:00
|
|
|
value, isBold, color, className, size,
|
|
|
|
align, id, onClick, onDoubleClick,
|
2018-12-10 09:06:44 -08:00
|
|
|
}: Props) => (
|
2018-12-15 07:10:39 -08:00
|
|
|
<Text
|
2019-01-23 11:37:35 -08:00
|
|
|
id={id}
|
2018-12-15 07:10:39 -08:00
|
|
|
className={className}
|
|
|
|
isBold={isBold}
|
|
|
|
color={color}
|
|
|
|
size={`${String(size)}em`}
|
|
|
|
align={align}
|
2019-02-18 15:40:15 -08:00
|
|
|
onClick={onClick}
|
|
|
|
onDoubleClick={onDoubleClick}
|
2018-12-15 07:10:39 -08:00
|
|
|
>
|
2018-12-10 09:06:44 -08:00
|
|
|
{value}
|
|
|
|
</Text>
|
|
|
|
);
|
|
|
|
|
|
|
|
TextComponent.defaultProps = {
|
|
|
|
className: '',
|
|
|
|
isBold: false,
|
2019-02-10 09:52:34 -08:00
|
|
|
color: appTheme.colors.text,
|
|
|
|
size: appTheme.fontSize.regular,
|
2018-12-12 13:14:41 -08:00
|
|
|
align: 'left',
|
2019-02-18 15:40:15 -08:00
|
|
|
onClick: () => {},
|
|
|
|
onDoubleClick: () => {},
|
2018-12-10 09:06:44 -08:00
|
|
|
};
|