Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | 42x 348x 348x 27x 162x 162x 81x 81x 81x 81x 162x 321x 42x 141x 33x 198x 198x 99x 198x 108x 42x 348x 348x 42x 42x 42x 42x 45x 45x 42x 126x 27x 162x 162x 81x 162x 99x | import {DIMENSIONS} from '../defaultConfig';
import {getConfig, media} from './lib';
/**
* Calculates the flex prop defined through the direction of the parent.
*
* @param {String} direction The direction the spacer should expand in.
* @param {Object} theme The styled-components theme.
* @param {Number|Object} x The y value for the height.
* @param {Number|Object} y The y value for the height.
*
* @returns {String} The flex css.
*/
export const calcFlex = (direction, theme, x, y) => {
const flexVal = direction === 'X' ? x : y;
if (typeof flexVal === 'object' && flexVal !== null) {
return DIMENSIONS.map(screenSize => {
let lastScreen;
let flexCss = null;
if (typeof flexVal[String(screenSize)] !== 'undefined') {
lastScreen = screenSize;
flexCss = `flex: 1 1 ${flexVal[String(screenSize)] * getConfig(theme).baseSpacing}px;`;
} else Iif (lastScreen) {
flexCss = `flex: 1 1 ${flexVal[String(lastScreen)] * getConfig(theme).baseSpacing}px;`;
} else {
flexCss = 'flex: 1 1 0px;';
}
return media(theme, screenSize)`
${flexCss}
`;
});
}
return `flex: 1 1 ${flexVal === null ? 0 : flexVal * getConfig(theme).baseSpacing}px;`;
};
/**
* Calculates the Height of the spacer.
*
* @param {Object} theme The styled-components theme.
* @param {Number|Object} y The y value for the height.
*
* @returns {String} The height css.
*/
export const calcHeight = (theme, y) => {
if (typeof y === 'object') {
return DIMENSIONS.map(screenSize => {
let heightCss = null;
if (typeof y[String(screenSize)] !== 'undefined') {
heightCss = `
height: ${y[String(screenSize)] * getConfig(theme).baseSpacing}px;
min-height: ${y[String(screenSize)] * getConfig(theme).baseSpacing}px;
`;
}
return media(theme, screenSize)`
${heightCss}
`;
});
}
return `
height: ${y * getConfig(theme).baseSpacing}px;
min-height: ${y * getConfig(theme).baseSpacing}px;
`;
};
/**
* Calculates the inline styles.
*
* @param {Boolean|Array} inline An config info if the spacer is inline or not.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The display css string.
*/
export const calcInline = (inline, theme) => {
Iif (Array.isArray(inline)) {
return DIMENSIONS.map(screenSize => {
let inlineCss;
if (inline.includes(screenSize)) {
inlineCss = 'display: inline-block;';
} else {
inlineCss = 'display: block;';
}
return media(theme, screenSize)`
${inlineCss}
`;
});
}
return inline ? 'display: inline-block;' : 'display: block;';
};
/**
* Calculates the max Height of the spacer.
*
* @param {Number|Object} maxY The y value for the height.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The max height css.
*/
export const calcMaxHeight = (maxY, theme) => {
Iif (typeof maxY === 'object') {
return DIMENSIONS.map(screenSize => {
let heightCss = null;
if (typeof maxY[String(screenSize)] !== 'undefined') {
heightCss = `max-height: ${maxY[String(screenSize)] * getConfig(theme).baseSpacing}px;`;
}
return media(theme, screenSize)`
${heightCss}
`;
});
}
return `max-height: ${maxY * getConfig(theme).baseSpacing}px;`;
};
/**
* Calculates the max Width of the spacer.
*
* @param {Number|Object} maxX The x value for the width.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The max widt css.
*/
export const calcMaxWidth = (maxX, theme) => {
Iif (typeof maxX === 'object') {
return DIMENSIONS.map(screenSize => {
let widthCss = null;
if (typeof maxX[String(screenSize)] !== 'undefined') {
widthCss = `max-width: ${maxX[String(screenSize)] * getConfig(theme).baseSpacing}px;`;
}
return media(theme, screenSize)`
${widthCss}
`;
});
}
return `max-width: ${maxX * getConfig(theme).baseSpacing}px;`;
};
/**
* Calculates the width of the spacer.
*
* @param {Object} theme The styled-components theme.
* @param {Number|Object} x The y value for the height.
*
* @returns {String} The width css.
*/
export const calcWidth = (theme, x) => {
if (typeof x === 'object') {
return DIMENSIONS.map(screenSize => {
let widthCss = null;
if (typeof x[String(screenSize)] !== 'undefined') {
widthCss = `
min-width: ${x[String(screenSize)] * getConfig(theme).baseSpacing}px;
width: ${x[String(screenSize)] * getConfig(theme).baseSpacing}px;
`;
}
return media(theme, screenSize)`
${widthCss}
`;
});
}
return `
min-width: ${x * getConfig(theme).baseSpacing}px;
width: ${x * getConfig(theme).baseSpacing}px;
`;
}; |