Skip to content

Commit d58d6d0

Browse files
DDuncebrillhart
DDunc
authored and
ebrillhart
committed
Move font-size and warn utils out of base, refactor conditionals, add bgImageStyle (#542)
1 parent 0b2181d commit d58d6d0

File tree

5 files changed

+317
-189
lines changed

5 files changed

+317
-189
lines changed

‎.eslintrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"func-style": "off",
4343
"arrow-parens": "off",
4444
"no-use-before-define": "off",
45+
"no-undef": ["error", { "typeof": true }],
4546
"react/jsx-filename-extension": "off",
4647
"react/require-extension": "off",
4748
"react/no-multi-comp": "off",

‎src/utils/base.js‎

Lines changed: 142 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,175 +1,169 @@
1-
/*eslint max-statements:0,complexity:0,no-invalid-this:0*/
2-
3-
const parseFontSize = function(fontSize) {
4-
const sizeComponents = fontSize.match(/\d*\.*\d+|\D+/g);
5-
const size = parseFloat(sizeComponents[0]);
6-
const unit = sizeComponents[1];
7-
return { size, unit };
8-
};
9-
10-
const getFontSizeFromElement = function(element) {
11-
const fontSize = window.getComputedStyle
12-
? window.getComputedStyle(element).getPropertyValue('font-size')
13-
: element.currentStyle.fontSize;
14-
return fontSize ? parseFontSize(fontSize) : null;
1+
/*eslint max-statements:0,complexity:0,no-invalid-this:0,consistent-return:0*/
2+
import checkWarnings from './warn';
3+
// eslint-disable-next-line max-params
4+
export const buildStyles = (transforms, props, context, styles = {}) => {
5+
return transforms.reduce((av, cv) => {
6+
return { ...av, ...cv(props, context, av) };
7+
}, styles);
158
};
169

17-
const convertFontSizeToPx = function(fontSize) {
18-
let convertedFontSize;
19-
20-
if (typeof fontSize === 'number') {
21-
convertedFontSize = fontSize;
22-
} else if (typeof fontSize === 'string') {
23-
const parsedFont = parseFontSize(fontSize);
24-
const bodyFont = getFontSizeFromElement(document.body);
25-
const htmlFont = getFontSizeFromElement(document.documentElement);
26-
27-
switch (parsedFont.unit) {
28-
case 'px':
29-
convertedFontSize = parsedFont.size;
30-
break;
31-
case 'pt':
32-
convertedFontSize = (parsedFont.size * 96) / 72;
33-
break;
34-
case '%':
35-
if (bodyFont) {
36-
convertedFontSize = (bodyFont.size * parsedFont.size) / 100;
37-
}
38-
break;
39-
case 'em':
40-
if (bodyFont) {
41-
convertedFontSize = bodyFont.size * parsedFont.size;
42-
}
43-
break;
44-
case 'rem':
45-
if (htmlFont) {
46-
convertedFontSize = htmlFont.size * parsedFont.size;
47-
}
48-
break;
49-
default:
50-
convertedFontSize = parsedFont.size;
51-
}
52-
}
53-
return convertedFontSize;
54-
};
55-
56-
export const getStyles = function getStyles() {
57-
if (
58-
process.env.NODE_ENV !== 'production' &&
59-
typeof this.warnedAboutFontSize === 'undefined'
60-
) {
61-
this.warnedAboutFontSize = false;
62-
}
63-
64-
const {
65-
italic,
66-
bold,
67-
caps,
68-
margin,
69-
padding,
70-
textColor,
71-
textFont,
72-
textSize,
73-
textAlign,
74-
bgColor,
75-
bgGradient,
76-
bgImage,
77-
bgDarken,
78-
bgSize,
79-
bgPosition,
80-
bgRepeat,
81-
overflow,
82-
height
83-
} = this.props;
84-
85-
const styles = {};
86-
const recommendedMinFontSizePx = 24;
87-
88-
if (typeof italic === 'boolean') {
89-
styles.fontStyle = italic ? 'italic' : 'normal';
90-
}
91-
if (typeof bold === 'boolean') {
92-
styles.fontWeight = bold ? 'bold' : 'normal';
93-
}
94-
if (typeof caps === 'boolean') {
95-
styles.textTransform = caps ? 'uppercase' : 'none';
96-
}
97-
if (margin) {
98-
styles.margin = margin;
99-
}
100-
if (padding) {
101-
styles.padding = padding;
102-
}
10+
const applyMargin = ({ margin }) => (margin ? { margin } : undefined);
11+
const applyPadding = ({ padding }) => (padding ? { padding } : undefined);
12+
const applyOverflow = ({ overflow }) => (overflow ? { overflow } : undefined);
13+
const applyHeight = ({ height }) => (height ? { height } : undefined);
10314

15+
export const transformTextColor = ({ textColor }, context) => {
10416
if (textColor) {
10517
let color = '';
106-
if (!this.context.styles.colors.hasOwnProperty(textColor)) {
18+
if (!context.styles.colors.hasOwnProperty(textColor)) {
10719
color = textColor;
10820
} else {
109-
color = this.context.styles.colors[textColor];
21+
color = context.styles.colors[textColor];
11022
}
111-
styles.color = color;
23+
return { color };
11224
}
25+
};
26+
27+
export const transformTextFont = ({ textFont }, context) => {
11328
if (textFont) {
114-
let font = '';
115-
if (!this.context.styles.fonts.hasOwnProperty(textFont)) {
116-
font = textFont;
29+
let fontFamily = '';
30+
if (!context.styles.fonts.hasOwnProperty(textFont)) {
31+
fontFamily = textFont;
11732
} else {
118-
font = this.context.styles.fonts[textFont];
33+
fontFamily = context.styles.fonts[textFont];
11934
}
120-
styles.fontFamily = font;
35+
return { fontFamily };
36+
}
37+
};
38+
39+
export const transformTextAlign = ({ textAlign }) => {
40+
if (textAlign) {
41+
return { textAlign };
12142
}
43+
};
44+
export function transformTextSize({ textSize }) {
12245
if (textSize) {
123-
styles.fontSize = textSize;
124-
if (
125-
process.env.NODE_ENV !== 'production' &&
126-
!this.warnedAboutFontSize &&
127-
this.context.store.getState().style.globalStyleSet
128-
) {
129-
const fontSize =
130-
convertFontSizeToPx(textSize) || recommendedMinFontSizePx;
131-
if (fontSize < recommendedMinFontSizePx) {
132-
// eslint-disable-next-line
133-
console.warn(
134-
`prop \`textSize="${textSize}"\` is below the recommended minimum of ${recommendedMinFontSizePx}px`
135-
);
136-
this.warnedAboutFontSize = true;
137-
}
138-
}
46+
return { fontSize: textSize };
13947
}
140-
if (textAlign) {
141-
styles.textAlign = textAlign;
48+
}
49+
export const transformItalic = ({ italic }) => {
50+
if (typeof italic === 'boolean') {
51+
return { fontStyle: italic ? 'italic' : 'normal' };
52+
}
53+
};
54+
55+
export const transformBold = ({ bold }) => {
56+
if (typeof bold === 'boolean') {
57+
return { fontWeight: bold ? 'bold' : 'normal' };
58+
}
59+
};
60+
export const transformCaps = ({ caps }) => {
61+
if (typeof caps === 'boolean') {
62+
return { textTransform: caps ? 'uppercase' : 'none' };
14263
}
64+
};
65+
export const transformBgColor = ({ bgColor }, context) => {
14366
if (bgColor) {
144-
let color = '';
145-
if (!this.context.styles.colors.hasOwnProperty(bgColor)) {
146-
color = bgColor;
67+
let backgroundColor = '';
68+
if (!context.styles.colors.hasOwnProperty(bgColor)) {
69+
backgroundColor = bgColor;
14770
} else {
148-
color = this.context.styles.colors[bgColor];
71+
backgroundColor = context.styles.colors[bgColor];
14972
}
150-
styles.backgroundColor = color;
73+
return { backgroundColor };
15174
}
152-
if (bgGradient) {
153-
styles.backgroundImage = bgGradient;
75+
};
76+
77+
export const transformBgSize = ({ bgImage, bgSize }) => {
78+
if (bgImage) {
79+
return { backgroundSize: bgSize || 'cover' };
15480
}
81+
};
15582

83+
export const transformBgImageByGradient = ({ bgGradient }) => {
84+
return { backgroundImage: bgGradient };
85+
};
86+
87+
export const transformBgPosition = ({ bgImage, bgPosition }) => {
15688
if (bgImage) {
157-
if (bgDarken) {
158-
styles.backgroundImage = `linear-gradient( rgba(0, 0, 0, ${bgDarken}), rgba(0, 0, 0, ${bgDarken}) ), url(${bgImage})`;
159-
} else {
160-
styles.backgroundImage = `url(${bgImage})`;
161-
}
162-
styles.backgroundSize = bgSize || 'cover';
163-
styles.backgroundPosition = bgPosition || 'center center';
164-
if (bgRepeat) {
165-
styles.backgroundRepeat = bgRepeat;
166-
}
89+
return { backgroundPosition: bgPosition || 'center center' };
16790
}
168-
if (overflow) {
169-
styles.overflow = overflow;
91+
};
92+
export const transformBgRepeat = ({ bgImage, bgRepeat }) => {
93+
if (bgImage) {
94+
return { backgroundRepeat: bgRepeat };
17095
}
171-
if (height) {
172-
styles.height = height;
96+
};
97+
export const transformBgImageByBgStyle = ({ bgImageStyle }) => {
98+
return { backgroundImage: bgImageStyle };
99+
};
100+
export const transformBgImage = ({
101+
bgImage,
102+
bgDarken,
103+
bgLighten,
104+
bgImageStyle,
105+
bgGradient
106+
}) => {
107+
if (!bgImage) {
108+
return;
173109
}
174-
return styles;
110+
111+
if (bgImageStyle) {
112+
return transformBgImageByBgStyle({ bgImageStyle });
113+
}
114+
115+
if (bgGradient) {
116+
return transformBgImageByGradient({ bgGradient });
117+
}
118+
119+
if (bgDarken) {
120+
return {
121+
backgroundImage: `linear-gradient( rgba(0, 0, 0, ${bgDarken}), rgba(0, 0, 0, ${bgDarken}) ), url(${bgImage})`
122+
};
123+
} else if (bgLighten) {
124+
return {
125+
backgroundImage: `linear-gradient( rgba(255, 255, 255, ${bgLighten}), rgba(255, 255, 255, ${bgLighten}) ), url(${bgImage})`
126+
};
127+
} else {
128+
return { backgroundImage: `url(${bgImage})` };
129+
}
130+
};
131+
132+
const textTransforms = [
133+
transformItalic,
134+
transformBold,
135+
transformCaps,
136+
transformTextColor,
137+
transformTextFont,
138+
transformTextAlign,
139+
transformTextSize
140+
];
141+
142+
export const generalTransforms = [
143+
applyMargin,
144+
applyPadding,
145+
applyOverflow,
146+
applyHeight
147+
];
148+
149+
export const bgTransforms = [
150+
transformBgColor,
151+
transformBgImage,
152+
transformBgRepeat,
153+
transformBgSize,
154+
transformBgPosition
155+
];
156+
157+
const styleTransforms = [
158+
...textTransforms,
159+
...generalTransforms,
160+
...bgTransforms
161+
];
162+
163+
export const getStyles = function getStyles() {
164+
if (process.env.NODE_ENV !== 'production') {
165+
checkWarnings(this);
166+
}
167+
168+
return buildStyles(styleTransforms, this.props, this.context);
175169
};

0 commit comments

Comments
 (0)