1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.getFormatMessage = exports.default = void 0;
|
11 |
|
12 | require("antd/es/drawer/style");
|
13 |
|
14 | var _drawer = _interopRequireDefault(require("antd/es/drawer"));
|
15 |
|
16 | require("antd/es/button/style");
|
17 |
|
18 | var _button = _interopRequireDefault(require("antd/es/button"));
|
19 |
|
20 | require("antd/es/message/style");
|
21 |
|
22 | var _message2 = _interopRequireDefault(require("antd/es/message"));
|
23 |
|
24 | require("antd/es/alert/style");
|
25 |
|
26 | var _alert = _interopRequireDefault(require("antd/es/alert"));
|
27 |
|
28 | require("antd/es/list/style");
|
29 |
|
30 | var _list = _interopRequireDefault(require("antd/es/list"));
|
31 |
|
32 | require("antd/es/switch/style");
|
33 |
|
34 | var _switch = _interopRequireDefault(require("antd/es/switch"));
|
35 |
|
36 | require("antd/es/divider/style");
|
37 |
|
38 | var _divider = _interopRequireDefault(require("antd/es/divider"));
|
39 |
|
40 | var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
41 |
|
42 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
43 |
|
44 | var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
45 |
|
46 | require("antd/es/config-provider/style");
|
47 |
|
48 | var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
|
49 |
|
50 | var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
51 |
|
52 | require("./index.less");
|
53 |
|
54 | var _icons = require("@ant-design/icons");
|
55 |
|
56 | var _proUtils = require("@ant-design/pro-utils");
|
57 |
|
58 | var _useParams = require("@umijs/use-params");
|
59 |
|
60 | var _react = _interopRequireWildcard(require("react"));
|
61 |
|
62 | var _ssrDarkreader = require("@umijs/ssr-darkreader");
|
63 |
|
64 | var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
|
65 |
|
66 | var _omit = _interopRequireDefault(require("omit.js"));
|
67 |
|
68 | var _defaultSettings = _interopRequireDefault(require("../../defaultSettings"));
|
69 |
|
70 | var _BlockCheckbox = _interopRequireDefault(require("./BlockCheckbox"));
|
71 |
|
72 | var _ThemeColor = _interopRequireDefault(require("./ThemeColor"));
|
73 |
|
74 | var _locales = require("../../locales");
|
75 |
|
76 | var _LayoutChange = _interopRequireWildcard(require("./LayoutChange"));
|
77 |
|
78 | var _RegionalChange = _interopRequireDefault(require("./RegionalChange"));
|
79 |
|
80 | var _utils = require("../../utils/utils");
|
81 |
|
82 | var Body = function Body(_ref) {
|
83 | var children = _ref.children,
|
84 | prefixCls = _ref.prefixCls,
|
85 | title = _ref.title;
|
86 | return _react.default.createElement("div", {
|
87 | style: {
|
88 | marginBottom: 24
|
89 | }
|
90 | }, _react.default.createElement("h3", {
|
91 | className: "".concat(prefixCls, "-drawer-title")
|
92 | }, title), children);
|
93 | };
|
94 |
|
95 | var getDifferentSetting = function getDifferentSetting(state) {
|
96 | var stateObj = {};
|
97 | Object.keys(state).forEach(function (key) {
|
98 | if (state[key] !== _defaultSettings.default[key] && key !== 'collapse') {
|
99 | stateObj[key] = state[key];
|
100 | } else {
|
101 | stateObj[key] = undefined;
|
102 | }
|
103 |
|
104 | if (key.includes('Render')) stateObj[key] = state[key] === false ? false : undefined;
|
105 | });
|
106 | stateObj.menu = undefined;
|
107 | return stateObj;
|
108 | };
|
109 |
|
110 | var getFormatMessage = function getFormatMessage() {
|
111 | var formatMessage = function formatMessage(_ref2) {
|
112 | var id = _ref2.id;
|
113 | var locales = (0, _locales.gLocaleObject)();
|
114 | return locales[id];
|
115 | };
|
116 |
|
117 | return formatMessage;
|
118 | };
|
119 |
|
120 | exports.getFormatMessage = getFormatMessage;
|
121 |
|
122 | var updateTheme = function () {
|
123 | var _ref3 = (0, _asyncToGenerator2.default)( _regenerator.default.mark(function _callee(dark, color) {
|
124 | var defaultTheme, defaultFixes;
|
125 | return _regenerator.default.wrap(function _callee$(_context) {
|
126 | while (1) {
|
127 | switch (_context.prev = _context.next) {
|
128 | case 0:
|
129 | if (!(typeof window === 'undefined')) {
|
130 | _context.next = 2;
|
131 | break;
|
132 | }
|
133 |
|
134 | return _context.abrupt("return");
|
135 |
|
136 | case 2:
|
137 | if (!(typeof window.MutationObserver === 'undefined')) {
|
138 | _context.next = 4;
|
139 | break;
|
140 | }
|
141 |
|
142 | return _context.abrupt("return");
|
143 |
|
144 | case 4:
|
145 | if (_configProvider.default.config) {
|
146 | _context.next = 6;
|
147 | break;
|
148 | }
|
149 |
|
150 | return _context.abrupt("return");
|
151 |
|
152 | case 6:
|
153 | _configProvider.default.config({
|
154 | theme: {
|
155 | primaryColor: (0, _utils.genStringToTheme)(color) || '#1890ff'
|
156 | }
|
157 | });
|
158 |
|
159 | if (dark) {
|
160 | defaultTheme = {
|
161 | brightness: 100,
|
162 | contrast: 90,
|
163 | sepia: 10
|
164 | };
|
165 | defaultFixes = {
|
166 | invert: [],
|
167 | css: '',
|
168 | ignoreInlineStyle: ['.react-switch-handle'],
|
169 | ignoreImageAnalysis: [],
|
170 | disableStyleSheetsProxy: true
|
171 | };
|
172 |
|
173 | if (window.MutationObserver && window.fetch) {
|
174 | (0, _ssrDarkreader.setFetchMethod)(window.fetch);
|
175 | (0, _ssrDarkreader.enable)(defaultTheme, defaultFixes);
|
176 | }
|
177 | } else {
|
178 | if (window.MutationObserver) (0, _ssrDarkreader.disable)();
|
179 | }
|
180 |
|
181 | case 8:
|
182 | case "end":
|
183 | return _context.stop();
|
184 | }
|
185 | }
|
186 | }, _callee);
|
187 | }));
|
188 |
|
189 | return function updateTheme(_x, _x2) {
|
190 | return _ref3.apply(this, arguments);
|
191 | };
|
192 | }();
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 | var initState = function initState(urlParams, settings, onSettingChange) {
|
201 | if (!(0, _proUtils.isBrowser)()) return;
|
202 | var replaceSetting = {};
|
203 | Object.keys(urlParams).forEach(function (key) {
|
204 | if (_defaultSettings.default[key] || _defaultSettings.default[key] === undefined) {
|
205 | if (key === 'primaryColor') {
|
206 | replaceSetting[key] = (0, _utils.genStringToTheme)(urlParams[key]);
|
207 | return;
|
208 | }
|
209 |
|
210 | replaceSetting[key] = urlParams[key];
|
211 | }
|
212 | });
|
213 | var newSettings = (0, _proUtils.merge)({}, settings, replaceSetting);
|
214 | delete newSettings.menu;
|
215 | delete newSettings.title;
|
216 | delete newSettings.iconfontUrl;
|
217 |
|
218 | onSettingChange === null || onSettingChange === void 0 ? void 0 : onSettingChange(newSettings);
|
219 |
|
220 | if (_defaultSettings.default.navTheme !== urlParams.navTheme && urlParams.navTheme) {
|
221 | updateTheme(settings.navTheme === 'realDark', urlParams.primaryColor);
|
222 | }
|
223 | };
|
224 |
|
225 | var getParamsFromUrl = function getParamsFromUrl(urlParams, settings) {
|
226 | if (!(0, _proUtils.isBrowser)()) return _defaultSettings.default;
|
227 | return (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, _defaultSettings.default), settings || {}), urlParams);
|
228 | };
|
229 |
|
230 | var genCopySettingJson = function genCopySettingJson(settingState) {
|
231 | return JSON.stringify((0, _omit.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settingState), {}, {
|
232 | primaryColor: settingState.primaryColor
|
233 | }), ['colorWeak']), null, 2);
|
234 | };
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 | var SettingDrawer = function SettingDrawer(props) {
|
243 | var _props$defaultSetting = props.defaultSettings,
|
244 | propsDefaultSettings = _props$defaultSetting === void 0 ? undefined : _props$defaultSetting,
|
245 | _props$settings = props.settings,
|
246 | propsSettings = _props$settings === void 0 ? undefined : _props$settings,
|
247 | hideHintAlert = props.hideHintAlert,
|
248 | hideCopyButton = props.hideCopyButton,
|
249 | _props$colorList = props.colorList,
|
250 | colorList = _props$colorList === void 0 ? [{
|
251 | key: 'daybreak',
|
252 | color: '#1890ff'
|
253 | }, {
|
254 | key: 'dust',
|
255 | color: '#F5222D'
|
256 | }, {
|
257 | key: 'volcano',
|
258 | color: '#FA541C'
|
259 | }, {
|
260 | key: 'sunset',
|
261 | color: '#FAAD14'
|
262 | }, {
|
263 | key: 'cyan',
|
264 | color: '#13C2C2'
|
265 | }, {
|
266 | key: 'green',
|
267 | color: '#52C41A'
|
268 | }, {
|
269 | key: 'geekblue',
|
270 | color: '#2F54EB'
|
271 | }, {
|
272 | key: 'purple',
|
273 | color: '#722ED1'
|
274 | }] : _props$colorList,
|
275 | getContainer = props.getContainer,
|
276 | onSettingChange = props.onSettingChange,
|
277 | enableDarkTheme = props.enableDarkTheme,
|
278 | _props$prefixCls = props.prefixCls,
|
279 | prefixCls = _props$prefixCls === void 0 ? 'ant-pro' : _props$prefixCls,
|
280 | _props$pathname = props.pathname,
|
281 | pathname = _props$pathname === void 0 ? window.location.pathname : _props$pathname,
|
282 | _props$disableUrlPara = props.disableUrlParams,
|
283 | disableUrlParams = _props$disableUrlPara === void 0 ? true : _props$disableUrlPara,
|
284 | themeOnly = props.themeOnly;
|
285 | var firstRender = (0, _react.useRef)(true);
|
286 |
|
287 | var _useMergedState = (0, _useMergedState5.default)(false, {
|
288 | value: props.collapse,
|
289 | onChange: props.onCollapseChange
|
290 | }),
|
291 | _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
|
292 | show = _useMergedState2[0],
|
293 | setShow = _useMergedState2[1];
|
294 |
|
295 | var _useState = (0, _react.useState)((0, _locales.getLanguage)()),
|
296 | _useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
297 | language = _useState2[0],
|
298 | setLanguage = _useState2[1];
|
299 |
|
300 | var _useUrlSearchParams = (0, _useParams.useUrlSearchParams)({}, {
|
301 | disabled: disableUrlParams
|
302 | }),
|
303 | _useUrlSearchParams2 = (0, _slicedToArray2.default)(_useUrlSearchParams, 2),
|
304 | urlParams = _useUrlSearchParams2[0],
|
305 | setUrlParams = _useUrlSearchParams2[1];
|
306 |
|
307 | var _useMergedState3 = (0, _useMergedState5.default)(function () {
|
308 | return getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings);
|
309 | }, {
|
310 | value: propsSettings,
|
311 | onChange: onSettingChange
|
312 | }),
|
313 | _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
|
314 | settingState = _useMergedState4[0],
|
315 | setSettingState = _useMergedState4[1];
|
316 |
|
317 | var _ref4 = settingState || {},
|
318 | navTheme = _ref4.navTheme,
|
319 | primaryColor = _ref4.primaryColor,
|
320 | layout = _ref4.layout,
|
321 | colorWeak = _ref4.colorWeak;
|
322 |
|
323 | (0, _react.useEffect)(function () {
|
324 |
|
325 | var onLanguageChange = function onLanguageChange() {
|
326 | if (language !== (0, _locales.getLanguage)()) {
|
327 | setLanguage((0, _locales.getLanguage)());
|
328 | }
|
329 | };
|
330 |
|
331 |
|
332 |
|
333 | if (!(0, _proUtils.isBrowser)()) return function () {
|
334 | return null;
|
335 | };
|
336 | initState(getParamsFromUrl(urlParams, propsSettings), settingState, setSettingState);
|
337 | window.document.addEventListener('languagechange', onLanguageChange, {
|
338 | passive: true
|
339 | });
|
340 | return function () {
|
341 | return window.document.removeEventListener('languagechange', onLanguageChange);
|
342 | };
|
343 | }, []);
|
344 | (0, _react.useEffect)(function () {
|
345 | updateTheme(settingState.navTheme === 'realDark', settingState.primaryColor);
|
346 | }, [settingState.primaryColor, settingState.navTheme]);
|
347 | |
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 | var changeSetting = function changeSetting(key, value) {
|
355 | var nextState = {};
|
356 | nextState[key] = value;
|
357 |
|
358 | if (key === 'layout') {
|
359 | nextState.contentWidth = value === 'top' ? 'Fixed' : 'Fluid';
|
360 | }
|
361 |
|
362 | if (key === 'layout' && value !== 'mix') {
|
363 | nextState.splitMenus = false;
|
364 | }
|
365 |
|
366 | if (key === 'layout' && value === 'mix') {
|
367 | nextState.navTheme = 'light';
|
368 | }
|
369 |
|
370 | if (key === 'colorWeak' && value === true) {
|
371 | var dom = document.querySelector('body');
|
372 |
|
373 | if (dom) {
|
374 | dom.dataset.prosettingdrawer = dom.style.filter;
|
375 | dom.style.filter = 'invert(80%)';
|
376 | }
|
377 | }
|
378 |
|
379 | if (key === 'colorWeak' && value === false) {
|
380 | var _dom = document.querySelector('body');
|
381 |
|
382 | if (_dom) {
|
383 | _dom.style.filter = _dom.dataset.prosettingdrawer || 'none';
|
384 | delete _dom.dataset.prosettingdrawer;
|
385 | }
|
386 | }
|
387 |
|
388 | delete nextState.menu;
|
389 | delete nextState.title;
|
390 | delete nextState.iconfontUrl;
|
391 | delete nextState.logo;
|
392 | delete nextState.pwa;
|
393 | setSettingState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, settingState), nextState));
|
394 | };
|
395 |
|
396 | var formatMessage = getFormatMessage();
|
397 | (0, _react.useEffect)(function () {
|
398 |
|
399 | if (!(0, _proUtils.isBrowser)()) return;
|
400 | if (disableUrlParams) return;
|
401 |
|
402 | if (firstRender.current) {
|
403 | firstRender.current = false;
|
404 | return;
|
405 | }
|
406 |
|
407 |
|
408 |
|
409 | var urlSearchParams = new URLSearchParams(window.location.search);
|
410 | var params = Object.fromEntries(urlSearchParams.entries());
|
411 | var diffParams = getDifferentSetting((0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), settingState));
|
412 | delete diffParams.logo;
|
413 | delete diffParams.menu;
|
414 | delete diffParams.title;
|
415 | delete diffParams.iconfontUrl;
|
416 | delete diffParams.pwa;
|
417 | setUrlParams(diffParams);
|
418 | }, [setUrlParams, settingState, urlParams, pathname, disableUrlParams]);
|
419 | var baseClassName = "".concat(prefixCls, "-setting");
|
420 | return _react.default.createElement(_drawer.default, {
|
421 | visible: show,
|
422 | width: 300,
|
423 | closable: false,
|
424 | onClose: function onClose() {
|
425 | return setShow(false);
|
426 | },
|
427 | placement: "right",
|
428 | getContainer: getContainer,
|
429 | handler: _react.default.createElement("div", {
|
430 | className: "".concat(baseClassName, "-drawer-handle"),
|
431 | onClick: function onClick() {
|
432 | return setShow(!show);
|
433 | }
|
434 | }, show ? _react.default.createElement(_icons.CloseOutlined, {
|
435 | style: {
|
436 | color: '#fff',
|
437 | fontSize: 20
|
438 | }
|
439 | }) : _react.default.createElement(_icons.SettingOutlined, {
|
440 | style: {
|
441 | color: '#fff',
|
442 | fontSize: 20
|
443 | }
|
444 | })),
|
445 | style: {
|
446 | zIndex: 999
|
447 | }
|
448 | }, _react.default.createElement("div", {
|
449 | className: "".concat(baseClassName, "-drawer-content")
|
450 | }, _react.default.createElement(Body, {
|
451 | title: formatMessage({
|
452 | id: 'app.setting.pagestyle',
|
453 | defaultMessage: 'Page style setting'
|
454 | }),
|
455 | prefixCls: baseClassName
|
456 | }, _react.default.createElement(_BlockCheckbox.default, {
|
457 | prefixCls: baseClassName,
|
458 | list: [{
|
459 | key: 'light',
|
460 | title: formatMessage({
|
461 | id: 'app.setting.pagestyle.light',
|
462 | defaultMessage: '亮色菜单风格'
|
463 | })
|
464 | }, {
|
465 | key: 'dark',
|
466 | title: formatMessage({
|
467 | id: 'app.setting.pagestyle.dark',
|
468 | defaultMessage: '暗色菜单风格'
|
469 | })
|
470 | }, {
|
471 | key: 'realDark',
|
472 | title: formatMessage({
|
473 | id: 'app.setting.pagestyle.realdark',
|
474 | defaultMessage: '暗色菜单风格'
|
475 | })
|
476 | }].filter(function (item) {
|
477 | if (item.key === 'dark' && settingState.layout === 'mix') return false;
|
478 | if (item.key === 'realDark' && !enableDarkTheme) return false;
|
479 | return true;
|
480 | }),
|
481 | value: navTheme,
|
482 | configType: "theme",
|
483 | key: "navTheme",
|
484 | onChange: function onChange(value) {
|
485 | return changeSetting('navTheme', value);
|
486 | }
|
487 | })), colorList !== false && _react.default.createElement(Body, {
|
488 | title: formatMessage({
|
489 | id: 'app.setting.themecolor',
|
490 | defaultMessage: 'Theme color'
|
491 | }),
|
492 | prefixCls: baseClassName
|
493 | }, _react.default.createElement(_ThemeColor.default, {
|
494 | colorList: colorList,
|
495 | value: (0, _utils.genStringToTheme)(primaryColor),
|
496 | formatMessage: formatMessage,
|
497 | onChange: function onChange(color) {
|
498 | return changeSetting('primaryColor', color);
|
499 | }
|
500 | })), !themeOnly && _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_divider.default, null), _react.default.createElement(Body, {
|
501 | prefixCls: baseClassName,
|
502 | title: formatMessage({
|
503 | id: 'app.setting.navigationmode'
|
504 | })
|
505 | }, _react.default.createElement(_BlockCheckbox.default, {
|
506 | prefixCls: baseClassName,
|
507 | value: layout,
|
508 | key: "layout",
|
509 | configType: "layout",
|
510 | list: [{
|
511 | key: 'side',
|
512 | title: formatMessage({
|
513 | id: 'app.setting.sidemenu'
|
514 | })
|
515 | }, {
|
516 | key: 'top',
|
517 | title: formatMessage({
|
518 | id: 'app.setting.topmenu'
|
519 | })
|
520 | }, {
|
521 | key: 'mix',
|
522 | title: formatMessage({
|
523 | id: 'app.setting.mixmenu'
|
524 | })
|
525 | }],
|
526 | onChange: function onChange(value) {
|
527 | return changeSetting('layout', value);
|
528 | }
|
529 | })), _react.default.createElement(_LayoutChange.default, {
|
530 | settings: settingState,
|
531 | changeSetting: changeSetting
|
532 | }), _react.default.createElement(_divider.default, null), _react.default.createElement(Body, {
|
533 | prefixCls: baseClassName,
|
534 | title: formatMessage({
|
535 | id: 'app.setting.regionalsettings'
|
536 | })
|
537 | }, _react.default.createElement(_RegionalChange.default, {
|
538 | settings: settingState,
|
539 | changeSetting: changeSetting
|
540 | })), _react.default.createElement(_divider.default, null), _react.default.createElement(Body, {
|
541 | prefixCls: baseClassName,
|
542 | title: formatMessage({
|
543 | id: 'app.setting.othersettings'
|
544 | })
|
545 | }, _react.default.createElement(_list.default, {
|
546 | split: false,
|
547 | renderItem: _LayoutChange.renderLayoutSettingItem,
|
548 | dataSource: [{
|
549 | title: formatMessage({
|
550 | id: 'app.setting.weakmode'
|
551 | }),
|
552 | action: _react.default.createElement(_switch.default, {
|
553 | size: "small",
|
554 | className: "color-weak",
|
555 | checked: !!colorWeak,
|
556 | onChange: function onChange(checked) {
|
557 | changeSetting('colorWeak', checked);
|
558 | }
|
559 | })
|
560 | }]
|
561 | })), hideHintAlert && hideCopyButton ? null : _react.default.createElement(_divider.default, null), hideHintAlert ? null : _react.default.createElement(_alert.default, {
|
562 | type: "warning",
|
563 | message: formatMessage({
|
564 | id: 'app.setting.production.hint'
|
565 | }),
|
566 | icon: _react.default.createElement(_icons.NotificationOutlined, null),
|
567 | showIcon: true,
|
568 | style: {
|
569 | marginBottom: 16
|
570 | }
|
571 | }), hideCopyButton ? null : _react.default.createElement(_button.default, {
|
572 | block: true,
|
573 | icon: _react.default.createElement(_icons.CopyOutlined, null),
|
574 | style: {
|
575 | marginBottom: 24
|
576 | },
|
577 | onClick: (0, _asyncToGenerator2.default)( _regenerator.default.mark(function _callee2() {
|
578 | return _regenerator.default.wrap(function _callee2$(_context2) {
|
579 | while (1) {
|
580 | switch (_context2.prev = _context2.next) {
|
581 | case 0:
|
582 | _context2.prev = 0;
|
583 | _context2.next = 3;
|
584 | return navigator.clipboard.writeText(genCopySettingJson(settingState));
|
585 |
|
586 | case 3:
|
587 | _message2.default.success(formatMessage({
|
588 | id: 'app.setting.copyinfo'
|
589 | }));
|
590 |
|
591 | _context2.next = 8;
|
592 | break;
|
593 |
|
594 | case 6:
|
595 | _context2.prev = 6;
|
596 | _context2.t0 = _context2["catch"](0);
|
597 |
|
598 | case 8:
|
599 | case "end":
|
600 | return _context2.stop();
|
601 | }
|
602 | }
|
603 | }, _callee2, null, [[0, 6]]);
|
604 | }))
|
605 | }, formatMessage({
|
606 | id: 'app.setting.copy'
|
607 | })))));
|
608 | };
|
609 |
|
610 | var _default = SettingDrawer;
|
611 | exports.default = _default; |
\ | No newline at end of file |