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 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 | 129x 39x 18x 108x 108x 108x 108x 21x 129x 1494x 147x 147x 882x 882x 882x 882x 1347x 1347x 1347x 129x 21x 9x 54x 54x 54x 54x 9x 12x 129x 117x 75x 450x 450x 339x 111x 111x 450x 75x 42x 129x 1494x 8964x 8964x 735x 8229x 561x 561x 7668x 8964x 1494x 129x 2229x 2229x 594x 198x 396x 396x 1635x 129x 2229x 558x 231x 327x 1671x | import {DIMENSIONS} from '../defaultConfig';
import {PERCENTAGE} from './constants';
import {getConfig, media} from './lib';
/**
* Caclulates the Align css.
*
* @param {String|Object} align The alignment for this column.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The align css string.
*/
export const calcAlign = (align, theme) => {
if (typeof align === 'object') {
return DIMENSIONS.map(screenSize => {
let alignCss = null;
Eif (align[String(screenSize)]) {
alignCss = `align-items: ${align[String(screenSize)]}`;
}
return media(theme, screenSize)`
${alignCss}
`;
});
}
return `align-items: ${align};`;
};
/**
* Calculates the flex-direction value.
*
* @param {String|Object} direction The column direction.
* @param {Boolean|Array} reverse Reverse array or boolean.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The flex-direction css string.
*/
export const calcDirection = (direction, reverse, theme) => {
if (Array.isArray(reverse) || typeof direction === 'object') {
let lastDirectionScreen = null;
return DIMENSIONS.map(screenSize => {
const {direction: usedDirection, lastScreen} = getDirection(direction, screenSize, lastDirectionScreen);
const reverseFlag = getReverse(reverse, screenSize);
lastDirectionScreen = lastScreen;
return media(theme, screenSize)`
flex-direction: ${usedDirection}${reverseFlag};
flex-wrap: ${usedDirection === 'row' ? `wrap${reverseFlag}` : 'nowrap'};
`;
});
}
const {direction: usedDirection} = getDirection(direction, null, null);
const reverseFlag = getReverse(reverse, null);
return `
flex-direction: ${usedDirection}${reverseFlag};
flex-wrap: ${usedDirection === 'row' ? `wrap${reverseFlag}` : 'nowrap'};
`;
};
/**
* Caclulates the Justify css.
*
* @param {String|Object} justify The justification for this column.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The align css string.
*/
export const calcJustify = (justify, theme) => {
if (typeof justify === 'object') {
const mediaQuery = DIMENSIONS.map(screenSize => {
let justifyCss = null;
Eif (justify[String(screenSize)]) {
justifyCss = `justify-content: ${justify[String(screenSize)]}`;
}
return media(theme, screenSize)`
${justifyCss}
`;
});
return mediaQuery;
}
return `justify-content: ${justify};`;
};
/**
* Caclulates the Offset css.
*
* @param {String|Object} offset The offset for this column.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The align css string.
*/
export const calcOffset = (offset, theme) => {
if (typeof offset === 'object') {
let lastScreen;
const mediaQuery = DIMENSIONS.map(screenSize => {
let offsetCss = null;
if (typeof offset[String(screenSize)] === 'undefined' && lastScreen) {
offsetCss = `margin-left: ${offset[String(lastScreen)] > 0 ? (offset[String(lastScreen)] / getConfig(theme).columns[String(screenSize)]) * PERCENTAGE : 0}%;`;
} else {
lastScreen = screenSize;
offsetCss = `margin-left: ${offset[String(screenSize)] > 0 ? (offset[String(screenSize)] / getConfig(theme).columns[String(screenSize)]) * PERCENTAGE : 0}%;`;
}
return media(theme, screenSize)`
${offsetCss}
`;
});
return mediaQuery;
}
return `margin-left: ${(offset / getConfig(theme).columns.xs) * PERCENTAGE}%;`;
};
/**
* Caclulates the Offset css.
*
* @param {Object} sizes The sizes for this column.
* @param {Object} theme The styled-components theme.
*
* @returns {String} The align css string.
*/
export const calcSizes = (sizes, theme) => {
let lastScreen;
const mediaQuery = DIMENSIONS.map(screenSize => {
let sizesCss = null;
if (sizes[String(screenSize)] === null && lastScreen) {
sizesCss = `
flex: 1 1 ${(sizes[String(lastScreen)] / getConfig(theme).columns[String(screenSize)]) * PERCENTAGE}%;
max-width: ${(sizes[String(lastScreen)] / getConfig(theme).columns[String(screenSize)]) * PERCENTAGE}%;
`;
// eslint-disable-next-line no-negated-condition
} else if (sizes[String(screenSize)] !== null) {
lastScreen = screenSize;
sizesCss = `
flex: 1 1 ${(sizes[String(screenSize)] / getConfig(theme).columns[String(screenSize)]) * PERCENTAGE}%;
max-width: ${(sizes[String(screenSize)] / getConfig(theme).columns[String(screenSize)]) * PERCENTAGE}%;
`;
} else {
sizesCss = null;
}
return media(theme, screenSize)`
${sizesCss}
`;
});
return mediaQuery;
};
/**
* Gets the direction for this screenSize.
*
* @param {String|Object} direction The direction config.
* @param {String} screenSize The screen size class.
* @param {String} [lastScreen=null] The last screen size that had an direction defined.
*
* @returns {String} The direction to use.
*/
const getDirection = (direction, screenSize, lastScreen = null) => {
const defaultDirection = 'column';
if (typeof direction === 'object') {
if (direction[String(screenSize)]) {
return {
direction: direction[String(screenSize)],
lastScreen: screenSize
};
} else Eif (!direction[String(screenSize)] && lastScreen) {
return {
direction: direction[String(lastScreen)],
lastScreen
};
}
return {
direction: defaultDirection,
lastScreen
};
}
return {
direction: direction ?? defaultDirection,
lastScreen
};
};
/**
* Gets the reverse flag if needed.
*
* @param {Boolean|Array} reverse The reverse flags or flag.
* @param {String} screenSize The screen size class.
*
* @returns {String} The reverse flag string.
*/
const getReverse = (reverse, screenSize) => {
if (Array.isArray(reverse)) {
if (reverse.includes(screenSize)) {
return '-reverse';
}
return '';
}
return reverse ? '-reverse' : '';
}; |