@wener/console
Version:
Base console UI toolkit
101 lines (100 loc) • 5.79 kB
JavaScript
function _array_like_to_array(arr, len) {
if (len == null || len > arr.length)
len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++)
arr2[i] = arr[i];
return arr2;
}
function _array_with_holes(arr) {
if (Array.isArray(arr))
return arr;
}
function _iterable_to_array_limit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null)
return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i)
break;
}
}
catch (err) {
_d = true;
_e = err;
}
finally {
try {
if (!_n && _i["return"] != null)
_i["return"]();
}
finally {
if (_d)
throw _e;
}
}
return _arr;
}
function _non_iterable_rest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
if (!o)
return;
if (typeof o === "string")
return _array_like_to_array(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor)
n = o.constructor.name;
if (n === "Map" || n === "Set")
return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
return _array_like_to_array(o, minLen);
}
import React from "react";
import { useWindowEventListener } from "@wener/reaction";
import { useImmer } from "use-immer";
import { useUserAgentPreferences } from "../../utils/UserAgentPreference.js";
import { SystemAboutPageSection } from "./SystemAboutPageSection.js";
export var SystemAboutPageBrowserInfo = function () {
var getState = function () {
var _globalThis_navigator, _globalThis_screen, _globalThis_screen1, _Intl_DateTimeFormat_resolvedOptions, _Intl_DateTimeFormat_resolvedOptions1, _Intl_DateTimeFormat, _Intl, _Intl_DateTimeFormat_call;
return {
ua: (_globalThis_navigator = globalThis.navigator) === null || _globalThis_navigator === void 0 ? void 0 : _globalThis_navigator.userAgent,
width: globalThis.outerWidth,
height: globalThis.outerHeight,
screenWidth: (_globalThis_screen = globalThis.screen) === null || _globalThis_screen === void 0 ? void 0 : _globalThis_screen.width,
screenHeight: (_globalThis_screen1 = globalThis.screen) === null || _globalThis_screen1 === void 0 ? void 0 : _globalThis_screen1.height,
timezone: (_Intl_DateTimeFormat = (_Intl = Intl).DateTimeFormat) === null || _Intl_DateTimeFormat === void 0 ? void 0 : (_Intl_DateTimeFormat_resolvedOptions1 = (_Intl_DateTimeFormat_call = _Intl_DateTimeFormat.call(_Intl)).resolvedOptions) === null || _Intl_DateTimeFormat_resolvedOptions1 === void 0 ? void 0 : (_Intl_DateTimeFormat_resolvedOptions = _Intl_DateTimeFormat_resolvedOptions1.call(_Intl_DateTimeFormat_call)) === null || _Intl_DateTimeFormat_resolvedOptions === void 0 ? void 0 : _Intl_DateTimeFormat_resolvedOptions.timeZone
};
};
var _useImmer = _sliced_to_array(useImmer(getState), 2), state = _useImmer[0], update = _useImmer[1];
useWindowEventListener({
resize: function () {
update(getState());
}
});
var _useUserAgentPreferences = useUserAgentPreferences(), colorTheme = _useUserAgentPreferences.colorTheme, devicePixelRatio = _useUserAgentPreferences.devicePixelRatio, reducedTransparency = _useUserAgentPreferences.reducedTransparency, reducedData = _useUserAgentPreferences.reducedData, reducedMotion = _useUserAgentPreferences.reducedMotion, contrast = _useUserAgentPreferences.contrast;
return /*#__PURE__*/ React.createElement(SystemAboutPageSection, {
title: "\u5F53\u524D\u5BA2\u6237\u7AEF\u7CFB\u7EDF\u4FE1\u606F",
className: "text-sm"
}, /*#__PURE__*/ React.createElement("article", {
className: "prose"
}, /*#__PURE__*/ React.createElement("div", {
className: "flex flex-col"
}, /*#__PURE__*/ React.createElement("small", null, "\u7A97\u53E3: ", state.width, "\u00D7", state.height, " ", /*#__PURE__*/ React.createElement("br", null), "\u5C4F\u5E55: ", state.screenWidth, "\u00D7", state.screenHeight, " @", devicePixelRatio, "x ", /*#__PURE__*/ React.createElement("br", null)), /*#__PURE__*/ React.createElement("small", null, state.ua), /*#__PURE__*/ React.createElement("details", null, /*#__PURE__*/ React.createElement("summary", {
className: "btn-link text-sm"
}, "\u66F4\u591A\u4FE1\u606F"), /*#__PURE__*/ React.createElement("small", null, /*#__PURE__*/ React.createElement("div", null, "\u504F\u597D\u4E3B\u9898: ", colorTheme), /*#__PURE__*/ React.createElement("div", null, "\u8BED\u8A00: ", navigator.language), /*#__PURE__*/ React.createElement("div", null, "\u65F6\u533A: ", state.timezone), /*#__PURE__*/ React.createElement("div", null, "\u8BBE\u5907\u50CF\u7D20\u6BD4: ", devicePixelRatio), /*#__PURE__*/ React.createElement("div", null, "\u5BF9\u6BD4\u5EA6: ", contrast), /*#__PURE__*/ React.createElement("div", null, [
reducedData && "Reduced Data",
reducedMotion && "Reduced Motion",
reducedTransparency && "Reduced Transparency"
].filter(Boolean).join(" ")))))));
};