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

Ant Design happy work theme

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TARGET_ATTR = void 0;
exports.default = useStyle;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _cssinjs = require("@ant-design/cssinjs");
var DEFAULT_THEME = (0, _cssinjs.createTheme)(function (token) {
  return token;
});
var TARGET_ATTR = exports.TARGET_ATTR = 'data-happy-wave-target';
var 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)'
  }
});
var 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)"
  }
});
function useStyle(prefixCls, hashId, token) {
  var sharedConfig = {
    theme: DEFAULT_THEME,
    token: token
    // nonce: () => csp?.nonce!,
  };
  (0, _cssinjs.useStyleRegister)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedConfig), {}, {
    path: ['HappyWorkTheme', 'target']
  }), function () {
    return (0, _defineProperty2.default)({}, "[".concat(TARGET_ATTR, "-").concat(hashId, "], & [").concat(TARGET_ATTR, "-").concat(hashId, "]"), {
      animationName: antWaveTargetEffect,
      animationDuration: "0.45s",
      animationTimingFunction: 'ease-in-out',
      animationFillMode: 'backwards'
    });
  });
  (0, _cssinjs.useStyleRegister)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, sharedConfig), {}, {
    hashId: hashId,
    path: ['HappyWorkTheme', 'effect']
  }), function () {
    var dotPrefixCls = ".".concat(prefixCls);
    return [(0, _defineProperty2.default)({}, dotPrefixCls, (0, _defineProperty2.default)({
      position: 'fixed',
      pointerEvents: 'none',
      zIndex: 999
    }, "".concat(dotPrefixCls, "-dot"), {
      boxSizing: 'border-box',
      position: 'absolute',
      borderRadius: '100%',
      opacity: 0,
      transform: 'translate(-50%, -50%)',
      // Start Position
      zIndex: 999,
      // =================== Basic Motion ===================
      '&.happy-in-out': {
        animationName: antWaveDotEffect,
        animationDuration: token.motionDurationSlow,
        // animationDuration: '10s',
        animationTimingFunction: 'linear',
        animationFillMode: 'backwards'
      }
    }))];
  });
}