react-native-styled-px2dp
Version:
Write CSS px in react-native using styled-components and adapt multi resolution screens automatically.
104 lines • 4.82 kB
JavaScript
;
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var Dimensions = require('react-native').Dimensions;
var styled = require('styled-components/native').default;
// current deisgn width and height which are affected by orientation
// they will switch value with each other after orientation changed
var currentDesignWidth, currentDesignHeight;
// device orientation, 'protrait' by default
var orientation = 'portrait';
// always re-get current screen width(becuz of oritation changes)
var currentScreenWidth = function () { return Dimensions.get('screen').width; };
var relativeCaculator = function (px) {
return Number(((px / currentDesignWidth) * currentScreenWidth()).toFixed(2));
};
var stringToRelativePX = function (cssStr) {
// calling cssStr.replace on non-string will trigger error
if (typeof cssStr !== 'string')
return cssStr;
return cssStr.replace(/([\d|.]+)px/gm, function (matched, pxNumber) {
// you have to write px in styled components
// and css-to-react-native(a dependency of Styled Components) will translate it to RN unit, which is dp
return relativeCaculator(pxNumber) + "px";
});
};
var interpolationToRelativePX = function (interpolation) {
if (typeof interpolation === 'string') {
return stringToRelativePX(interpolation);
}
else { // deal with non-string interpolations like functions
if (typeof interpolation === 'function') {
// wrap the original function with stringToRelativePX and rewrite it
var originFunction_1 = interpolation;
var wrappedInterpolation = function () {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
return stringToRelativePX(originFunction_1.apply(void 0, args));
};
return wrappedInterpolation;
}
// just return if it is non-function interpolation
return interpolation;
}
};
//for extending styles like styled(SomeComponent)`blahblah`
var extendingStyled = function (tag) { return function (strings) {
var interpolations = [];
for (var _i = 1; _i < arguments.length; _i++) {
interpolations[_i - 1] = arguments[_i];
}
var transformedStrings = strings.map(stringToRelativePX);
var transformedInterpolations = interpolations.map(interpolationToRelativePX);
return styled(tag).apply(void 0, __spreadArrays([transformedStrings], transformedInterpolations));
}; };
//for using primitives directly like styled.View`blahblah`
var flexibleStyled = new Proxy(extendingStyled, {
get: function (target, prop) {
// return Tagged Template Literal to pretend styled component
return function (strings) {
var interpolations = [];
for (var _i = 1; _i < arguments.length; _i++) {
interpolations[_i - 1] = arguments[_i];
}
var transformedStrings = strings.map(stringToRelativePX);
var transformedInterpolations = interpolations.map(interpolationToRelativePX);
return styled[prop].apply(styled, __spreadArrays([transformedStrings], transformedInterpolations));
};
}
});
var updateOrientation = function (newOrientation) {
if (newOrientation !== orientation) {
var temp = currentDesignWidth;
currentDesignWidth = currentDesignHeight;
currentDesignHeight = temp;
orientation = newOrientation;
}
};
var getFlexibleStyled = function (props) {
currentDesignWidth = props.designWidth;
if (props.designHeight) {
currentDesignHeight = props.designHeight;
}
if (props.orientation) {
orientation = props.orientation;
// throws warns if it is not a typical 'portrait' or 'landscape'
if (orientation === 'portrait' && props.designWidth > props.designHeight) {
console.warn("You are setting orientation to 'portrait' while you passed a designWidth greater than designHeight");
}
else if (orientation === 'landscape' && props.designWidth < props.designHeight) {
console.warn("You are setting orientation to 'landscape' while you passed a designWidth less than designHeight");
}
}
return { styled: flexibleStyled, px2dp: relativeCaculator, updateOrientation: updateOrientation };
};
exports.default = getFlexibleStyled;
//# sourceMappingURL=index.js.map