/
Text.tsx
115 lines (94 loc) · 3.07 KB
/
Text.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { ComponentType, ReactElement, ReactNode } from 'react';
import { Platform } from 'react-primitives';
import { system, get } from '@styled-system/core';
import {
color, textStyle, space, style, typography, flexbox,
TypographyProps, ColorProps, TextStyleProps, SpaceProps, FlexboxProps,
LineHeightProps, LayoutProps, layout,
} from 'styled-system';
import styled, { css } from '../../styled';
import { parseAttributes } from '../../utils';
export type Props = TypographyProps & ColorProps & TextStyleProps & SpaceProps & FlexboxProps & LineHeightProps & LayoutProps;
const isNumber = (n: number | string) => typeof n === 'number' && !Number.isNaN(n);
const makePx = (n: number | string) => isNumber(Number(n)) ? `${String(n)}px` : n;
const getLineHeight = (n: number, scale: Object) => {
const val = get(scale, n, makePx(n));
return makePx(val);
};
const lineHeight = system({
lineHeight: {
property: 'lineHeight',
scale: 'lineHeights', // @ts-ignore
transform: getLineHeight,
},
});
const textTransform = style({
prop: 'textTransform',
cssProperty: 'textTransform',
});
export const mixin = css`
${typography}
${color}
${textStyle}
${space}
${layout}
${textTransform}
${lineHeight}
${flexbox}
`;
/* ${({ lineHeight }: { lineHeight: string }) => lineHeight ? `line-height: ${lineHeight};` : ''} */
type TextProps = Props & {
bold?: boolean,
as?: string,
center?: boolean,
name?: string,
children?: ReactNode,
};
const typographyProps = ['fontFamily', 'fontSize', 'lineHeight', 'bold'];
const colorProps = ['color'];
// TODO: Clean up or use styled-system internals
export const textStylePropNames = [...typographyProps, ...colorProps];
const Text: ComponentType<TextProps> = styled.Text.withConfig({
shouldForwardProp: (propName: keyof Props) => !textStylePropNames.includes(propName),
}).attrs(({ bold, center, fontSize, lineHeight }: TextProps) => ({
...(bold && { fontWeight: 'bold', as: Platform.OS === 'web' ? 'string' : undefined }),
...(center && { textAlign: 'center' }),
...(fontSize && !lineHeight && { lineHeight: fontSize })
}))`${mixin}`;
// const parseLineHeight = (lineHeight: string) => {
// if (Platform.OS === 'web') {
// return Number.isNaN(Number(lineHeight)) ? lineHeight : `${lineHeight}px`;
// }
// return lineHeight;
// };
// const TextContainer = ({
// bold, center, as: asElement, ...props
// }: TextProps) => {
// const att = parseAttributes(
// bold && {
// fontWeight: 'bold',
// as: Platform.OS === 'web' ? 'strong' : undefined,
// },
// center && {
// textAlign: 'center',
// },
// // eslint-disable-next-line react/destructuring-assignment
// props.fontSize && !props.lineHeight && {
// lineHeight: props.fontSize, // eslint-disable-line react/destructuring-assignment
// },
// // bt && { mt: bt - props.fontSize },
// );
// return (
// <Text
// {...att}
// {...props}
// />
// );
// };
Text.defaultProps = {
fontSize: 16,
fontFamily: 'primary',
bold: undefined,
center: undefined,
};
export default Text;