63 lines
3.3 KiB
JavaScript
63 lines
3.3 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var tslib_1 = require("tslib");
|
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
var react_1 = require("react");
|
|
var themeState_1 = require("../../../types/themeState");
|
|
var useFeatures_1 = tslib_1.__importDefault(require("../../../hooks/useFeatures"));
|
|
var RadioColor_1 = tslib_1.__importDefault(require("./RadioColor"));
|
|
var RadioRect_1 = tslib_1.__importDefault(require("./RadioRect"));
|
|
var assets_setting_light_svg_1 = require("./assets/svg/assets-setting-light.svg");
|
|
var assets_setting_dark_svg_1 = require("./assets/svg/assets-setting-dark.svg");
|
|
var assets_setting_auto_svg_1 = require("./assets/svg/assets-setting-auto.svg");
|
|
var index_module_less_1 = tslib_1.__importDefault(require("./index.module.less"));
|
|
var ESettingTheme;
|
|
(function (ESettingTheme) {
|
|
ESettingTheme[ESettingTheme["system"] = 0] = "system";
|
|
})(ESettingTheme || (ESettingTheme = {}));
|
|
var themeList = [
|
|
{
|
|
value: themeState_1.ETheme.light,
|
|
image: (0, jsx_runtime_1.jsx)(assets_setting_light_svg_1.ReactComponent, {}),
|
|
name: '明亮',
|
|
},
|
|
{
|
|
value: themeState_1.ETheme.dark,
|
|
image: (0, jsx_runtime_1.jsx)(assets_setting_dark_svg_1.ReactComponent, {}),
|
|
name: '黑暗',
|
|
},
|
|
{
|
|
value: ESettingTheme.system,
|
|
image: (0, jsx_runtime_1.jsx)(assets_setting_auto_svg_1.ReactComponent, {}),
|
|
name: '跟随系统',
|
|
},
|
|
];
|
|
function Render() {
|
|
var features = (0, useFeatures_1.default)();
|
|
var themeState = features.theme.get();
|
|
var _a = tslib_1.__read((0, react_1.useState)(themeState === null || themeState === void 0 ? void 0 : themeState.systemTheme), 2), systemTheme = _a[0], setSystemTheme = _a[1];
|
|
var _b = tslib_1.__read((0, react_1.useState)(themeState === null || themeState === void 0 ? void 0 : themeState.theme), 2), theme = _b[0], setTheme = _b[1];
|
|
var _c = tslib_1.__read((0, react_1.useState)(themeState === null || themeState === void 0 ? void 0 : themeState.color), 2), color = _c[0], setColor = _c[1];
|
|
var handleThemeSwitch = function (value) {
|
|
if (value === ESettingTheme.system) {
|
|
features.theme.openSystemTheme();
|
|
}
|
|
else {
|
|
features.theme.switchTheme(value);
|
|
}
|
|
};
|
|
(0, react_1.useEffect)(function () {
|
|
var themeUnsub = features.theme.subscribe(function () {
|
|
var themeState = features.theme.get();
|
|
setSystemTheme(themeState.systemTheme);
|
|
setTheme(themeState.theme);
|
|
setColor(themeState.color);
|
|
});
|
|
return function () {
|
|
themeUnsub();
|
|
};
|
|
}, []);
|
|
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: index_module_less_1.default.settingTitle }, { children: "\u4E3B\u9898\u6A21\u5F0F" })), (0, jsx_runtime_1.jsx)(RadioRect_1.default, { defaultValue: systemTheme ? ESettingTheme.system : theme, onChange: handleThemeSwitch, options: themeList }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: index_module_less_1.default.settingTitle }, { children: "\u4E3B\u9898\u8272" })), (0, jsx_runtime_1.jsx)(RadioColor_1.default, { defaultValue: color, onChange: function (value) { return features.theme.switchColor(value); } })] }));
|
|
}
|
|
exports.default = Render;
|