rn-custom-style-sheet
Version:
React Native component to select a specific value from a range of values.
60 lines • 2.04 kB
JavaScript
import { MediaQueryProps } from '../../MediaQuery';
import { hasValidBreakpointFormat } from '../Utils';
export const breakpointValue = {
'base': 0,
'sm': 480,
'md': 768,
'lg': 992,
'xl': 1280,
'2xl': 1536
};
export function up(key, guideLineBreakpoint) {
const {
unit
} = guideLineBreakpoint;
const value = hasValidBreakpointFormat(key, guideLineBreakpoint);
return `${MediaQueryProps.PREFIX} (min-width:${value}${unit})`;
}
export function down(key, guideLineBreakpoint) {
const {
unit,
step
} = guideLineBreakpoint;
const value = hasValidBreakpointFormat(key, guideLineBreakpoint);
return `${MediaQueryProps.PREFIX} (max-width:${value - step / 100}${unit})`;
}
export function between(start, end, guideLineBreakpoint) {
const {
unit,
step,
keys
} = guideLineBreakpoint;
const endIndex = keys.indexOf(String(end));
const startValue = hasValidBreakpointFormat(start, guideLineBreakpoint);
const endValue = endIndex !== -1 ? hasValidBreakpointFormat(keys[endIndex], guideLineBreakpoint) : Number(end);
return `${MediaQueryProps.PREFIX} (min-width:${startValue}${unit}) and ` + `(max-width:${endValue - step / 100}${unit})`;
}
export function only(key, guideLineBreakpoint) {
const {
keys
} = guideLineBreakpoint;
if (keys.indexOf(String(key)) + 1 < keys.length) {
return between(key, keys[keys.indexOf(String(key)) + 1], guideLineBreakpoint);
}
return up(key, guideLineBreakpoint);
}
export function not(key, guideLineBreakpoint) {
const {
keys
} = guideLineBreakpoint;
// handle first and last key separately, for better readability
const keyIndex = keys.indexOf(String(key));
if (keyIndex === 0) {
return up(keys[1], guideLineBreakpoint);
}
if (keyIndex === keys.length - 1) {
return down(keys[keyIndex], guideLineBreakpoint);
}
return between(key, keys[keys.indexOf(String(key)) + 1], guideLineBreakpoint).replace(`${MediaQueryProps.PREFIX}`, `${MediaQueryProps.PREFIX} not all and`);
}
//# sourceMappingURL=Breakpoint.js.map