@ant-design/happy-work-theme/lib/DotEffect/style.js

Ant Design happy work theme

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.TARGET_ATTR = void 0;
var _cssinjs = require("@ant-design/cssinjs");
const DEFAULT_THEME = (0, _cssinjs.createTheme)(token => token);
const TARGET_ATTR = exports.TARGET_ATTR = 'data-happy-wave-target';
const antWaveTargetEffect = new _cssinjs.Keyframes('antWaveTargetEffect', {
  '0%': {
    transform: 'scale(1)'
  },
  '10%': {
    transform: 'scale(1.1)'
  },
  '35%': {
    transform: 'scale(0.94)'
  },
  '60%': {
    transform: 'scale(1.05)'
  },
  '85%': {
    transform: 'scale(0.97)'
  },
  '100%': {
    transform: 'scale(1)'
  }
});
const antWaveDotEffect = new _cssinjs.Keyframes('antWaveDotEffect', {
  '0%': {
    opacity: 0,
    left: `var(--start-x)`,
    top: `var(--start-y)`,
    width: `var(--start-size)`,
    height: `var(--start-size)`,
    background: `var(--background)`,
    border: `var(--border)`
  },
  '25%': {
    opacity: 1
  },
  '50%': {
    opacity: 0.8
  },
  '100%': {
    opacity: 0,
    left: `var(--end-x)`,
    top: `var(--end-y)`,
    width: `var(--end-size)`,
    height: `var(--end-size)`,
    background: `var(--background)`,
    border: `var(--border)`
  }
});
const useStyle = (prefixCls, hashId, token) => {
  const sharedConfig = {
    theme: DEFAULT_THEME,
    token
  };
  (0, _cssinjs.useStyleRegister)({
    ...sharedConfig,
    path: ['HappyWorkTheme', 'target']
  }, () => ({
    // ======================== Target ========================
    [`[${TARGET_ATTR}-${hashId}], & [${TARGET_ATTR}-${hashId}]`]: {
      animationName: antWaveTargetEffect,
      animationDuration: `0.45s`,
      animationTimingFunction: 'ease-in-out',
      animationFillMode: 'backwards'
    }
  }));
  (0, _cssinjs.useStyleRegister)({
    ...sharedConfig,
    hashId,
    path: ['HappyWorkTheme', 'effect']
  }, () => {
    const dotPrefixCls = `.${prefixCls}`;
    return [{
      // ========================= Dots =========================
      [dotPrefixCls]: {
        position: 'fixed',
        pointerEvents: 'none',
        zIndex: 999999,
        [`${dotPrefixCls}-dot`]: {
          boxSizing: 'border-box',
          position: 'absolute',
          borderRadius: '100%',
          opacity: 0,
          transform: 'translate3d(-50%, -50%, 0)',
          // Start Position
          zIndex: 999999,
          // =================== Basic Motion ===================
          '&.happy-in-out': {
            animationName: antWaveDotEffect,
            animationDuration: token.motionDurationSlow,
            // animationDuration: '10s',
            animationTimingFunction: 'linear',
            animationFillMode: 'backwards'
          }
        }
      }
    }];
  });
};
var _default = exports.default = useStyle;