@expo/match-media
Version:
Universal polyfill for match media API using Expo APIs on mobile
90 lines • 3.46 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const css_mediaquery_1 = __importDefault(require("css-mediaquery"));
const ScreenOrientation = __importStar(require("expo-screen-orientation"));
const react_native_1 = require("react-native");
/**
* A pseudo implementation of MediaQueryList
* https://www.w3.org/TR/css3-mediaqueries/
*/
class MediaQueryList /* extends MediaQueryList */ {
query;
listeners = [];
orientation = ScreenOrientation.Orientation.PORTRAIT_UP;
unsubscribe;
constructor(query) {
this.query = query;
(async () => {
try {
const orientation = await ScreenOrientation.getOrientationAsync();
this.updateListeners({ orientation });
}
catch { }
})();
this.unsubscribe = ScreenOrientation.addOrientationChangeListener(({ orientationInfo: { orientation } }) => {
this.updateListeners({ orientation });
});
react_native_1.Dimensions.addEventListener("change", this.resize);
}
resize = () => {
this.updateListeners({ orientation: this.orientation });
};
// TODO: find an automatic interface for unmounting
_unmount() {
if (this.unsubscribe) {
this.unsubscribe.remove();
}
react_native_1.Dimensions.removeEventListener("change", this.resize);
}
addListener(listener) {
this.listeners.push(listener);
}
removeListener(listener) {
const index = this.listeners.indexOf(listener);
if (index !== -1)
this.listeners.splice(index, 1);
}
get matches() {
const windowDimensions = react_native_1.Dimensions.get("window");
return css_mediaquery_1.default.match(this.query, {
type: "screen",
orientation: this.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
this.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
? "landscape"
: "portrait",
...windowDimensions,
"device-width": windowDimensions.width,
"device-height": windowDimensions.height,
});
}
updateListeners({ orientation }) {
this.orientation = orientation;
this.listeners.forEach((listener) => {
listener(this);
});
}
}
exports.default = MediaQueryList;
//# sourceMappingURL=MediaQueryList.js.map