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 | 201x 75x 18x 108x 108x 108x 108x 57x 201x 2496x 213x 213x 1278x 1278x 1278x 1278x 1278x 2283x 2283x 2283x 2283x 201x 21x 9x 54x 54x 54x 54x 9x 12x 201x 3561x 3561x 828x 315x 513x 333x 180x 2733x 201x 3561x 216x 108x 108x 3345x 201x 3561x 972x 324x 648x 2589x | import {DIMENSIONS} from '../defaultConfig';
import {media} from './lib';
/**
* Caclulates the Align css.
*
* @param {String|Object} align The alignment for this row.
* @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} noWrap Defines if the row is wrapping or not.
* @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, noWrap, 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);
const wrap = getNoWrap(noWrap, screenSize);
lastDirectionScreen = lastScreen;
return media(theme, screenSize)`
flex-direction: ${usedDirection}${reverseFlag};
flex-wrap: ${(usedDirection === 'row' && !wrap) ? `wrap${reverseFlag}` : 'nowrap'};
`;
});
}
const {direction: usedDirection} = getDirection(direction, null, null);
const reverseFlag = getReverse(reverse, null);
const wrap = getNoWrap(noWrap, null);
return `
flex-direction: ${usedDirection}${reverseFlag};
flex-wrap: ${(usedDirection === 'row' && !wrap) ? `wrap${reverseFlag}` : 'nowrap'};
`;
};
/**
* Caclulates the Justify css.
*
* @param {String|Object} justify The justification for this row.
* @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};`;
};
/**
* 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 = 'row';
if (typeof direction === 'object') {
if (direction[String(screenSize)]) {
return {
direction: direction[String(screenSize)],
lastScreen: screenSize
};
} else if (!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} noWrap The reverse flags or flag.
* @param {String} screenSize The screen size class.
*
* @returns {String} The reverse flag string.
*/
const getNoWrap = (noWrap, screenSize) => {
if (Array.isArray(noWrap)) {
if (noWrap.includes(screenSize)) {
return '-reverse';
}
return '';
}
return noWrap ? '-reverse' : '';
};
/**
* 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' : '';
}; |