react-native-flex-grid
Version:
🎨 A react-native flexbox grid similar to bootstap's web grid.
86 lines (82 loc) • 2.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.mediaQueryStyle = exports.mediaQuery = exports.getGridBreakpoint = exports.GRID_BREAKPOINTS_KEYS_LIST_DESC = void 0;
var _reactNative = require("react-native");
var _grid = require("./grid");
/** Grid Breakpoints keys list */
// @ts-ignore
const GRID_BREAKPOINTS_KEYS_LIST_DESC = Object.keys((0, _grid.getConfig)().breakpoints).reverse();
/** Get current Grid Breakpoint */
exports.GRID_BREAKPOINTS_KEYS_LIST_DESC = GRID_BREAKPOINTS_KEYS_LIST_DESC;
const getGridBreakpoint = SCREEN_WIDTH => {
const PARSED_SCREEN_WIDTH = SCREEN_WIDTH ?? _reactNative.Dimensions.get('window').width;
for (let i = 0; i < GRID_BREAKPOINTS_KEYS_LIST_DESC.length; i += 1) {
if (PARSED_SCREEN_WIDTH >= (0, _grid.getConfig)().breakpoints[GRID_BREAKPOINTS_KEYS_LIST_DESC[i]]) {
return GRID_BREAKPOINTS_KEYS_LIST_DESC[i];
}
}
return GRID_BREAKPOINTS_KEYS_LIST_DESC[0];
};
/** Media Query to check for the grid breakpoint matching current screen size. */
exports.getGridBreakpoint = getGridBreakpoint;
const mediaQuery = _ref => {
let {
up,
down,
exact
} = _ref;
/** current grid breakpoint */
const breakpoint = getGridBreakpoint();
if (exact) {
// handle exact case
if (breakpoint === exact) {
return true;
}
} else if (down) {
// handle down case
if (GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(breakpoint) >= GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(down)) {
return true;
}
} else if (up) {
// handle up case
if (GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(breakpoint) <= GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(down)) {
return true;
}
}
// no match found
return false;
};
/** Media Query to check for the grid breakpoint matching current screen size and return style */
exports.mediaQuery = mediaQuery;
const mediaQueryStyle = _ref2 => {
let {
up,
down,
exact,
style
} = _ref2;
/** current grid breakpoint */
const breakpoint = getGridBreakpoint();
if (exact) {
// handle exact case
if (breakpoint === exact) {
return style;
}
} else if (down) {
// handle down case
if (GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(breakpoint) >= GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(down)) {
return style;
}
} else if (up) {
// handle up case
if (GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(breakpoint) <= GRID_BREAKPOINTS_KEYS_LIST_DESC.indexOf(down)) {
return style;
}
}
// no match found
return null;
};
exports.mediaQueryStyle = mediaQueryStyle;
//# sourceMappingURL=responsive.js.map