dumi-theme-antd-web3/dist/common/ThemeSwitch/index.js

Ant Design 5.0 官网风格类似的 dumi2 主题插件

import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import { FloatButton } from 'antd';
import { CompactTheme, DarkTheme } from 'antd-token-previewer/lib/icons';
import { FormattedMessage } from 'dumi';
import React from 'react';
import ThemeIcon from "./ThemeIcon";
import useThemeAnimation from "../../hooks/useThemeAnimation";
import { jsx as ___EmotionJSX } from "@emotion/react";
var ThemeSwitch = function ThemeSwitch(props) {
  var _props$value = props.value,
    value = _props$value === void 0 ? ['light'] : _props$value,
    onChange = props.onChange;
  var toggleAnimationTheme = useThemeAnimation();
  var isDark = value.includes('dark');
  return ___EmotionJSX(FloatButton.Group, {
    trigger: "click",
    icon: ___EmotionJSX(ThemeIcon, null)
  }, ___EmotionJSX(FloatButton, {
    icon: ___EmotionJSX(DarkTheme, null),
    type: isDark ? 'primary' : 'default',
    onClick: /*#__PURE__*/function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
        return _regeneratorRuntime().wrap(function _callee$(_context) {
          while (1) switch (_context.prev = _context.next) {
            case 0:
              // Toggle animation when switch theme
              toggleAnimationTheme(e, isDark);
              _context.next = 3;
              return new Promise(function (resolve) {
                setTimeout(resolve, 1000 / 60);
              });
            case 3:
              if (isDark) {
                onChange(value.filter(function (theme) {
                  return theme !== 'dark';
                }));
              } else {
                onChange([].concat(_toConsumableArray(value), ['dark']));
              }
            case 4:
            case "end":
              return _context.stop();
          }
        }, _callee);
      }));
      return function (_x) {
        return _ref.apply(this, arguments);
      };
    }(),
    tooltip: ___EmotionJSX(FormattedMessage, {
      id: "app.theme.switch.dark"
    })
  }), ___EmotionJSX(FloatButton, {
    icon: ___EmotionJSX(CompactTheme, null),
    type: value.includes('compact') ? 'primary' : 'default',
    onClick: function onClick() {
      if (value.includes('compact')) {
        onChange(value.filter(function (item) {
          return item !== 'compact';
        }));
      } else {
        onChange([].concat(_toConsumableArray(value), ['compact']));
      }
    },
    tooltip: ___EmotionJSX(FormattedMessage, {
      id: "app.theme.switch.compact"
    })
  }));
};
export default ThemeSwitch;