antd/es/_util/wave/style.js

An enterprise-class UI design language and React components implementation

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { Keyframes, useStyleRegister } from '@ant-design/cssinjs';
import { useContext } from 'react';
import { ConfigContext } from '../../config-provider';
import { useToken } from '../../theme';

var genWaveStyle = function genWaveStyle(token) {
  var _ref;

  var waveEffect = new Keyframes('waveEffect', {
    '100%': {
      boxShadow: "0 0 0 6px var(--antd-wave-shadow-color)"
    }
  });
  var fadeEffect = new Keyframes('fadeEffect', {
    '100%': {
      opacity: 0
    }
  });
  return [(_ref = {}, _defineProperty(_ref, "".concat(token.clickAnimatingWithoutExtraNodeTrue, ",\n      ").concat(token.clickAnimatingTrue), {
    '--antd-wave-shadow-color': token.colorPrimary,
    '--scroll-bar': 0,
    position: 'relative'
  }), _defineProperty(_ref, "".concat(token.clickAnimatingWithoutExtraNodeTrueAfter, ",\n      & ").concat(token.clickAnimatingNode), {
    position: 'absolute',
    top: 0,
    insetInlineStart: 0,
    insetInlineEnd: 0,
    bottom: 0,
    display: 'block',
    borderRadius: 'inherit',
    boxShadow: "0 0 0 0 var(--antd-wave-shadow-color)",
    opacity: 0.2,
    animation: {
      _skip_check_: true,
      value: "".concat(fadeEffect.getName(token.hashId), " 2s ").concat(token.motionEaseOutCirc, ", ").concat(waveEffect.getName(token.hashId), " 0.4s ").concat(token.motionEaseOutCirc)
    },
    animationFillMode: 'forwards',
    content: '""',
    pointerEvents: 'none'
  }), _ref), {}, waveEffect, fadeEffect];
};

export default (function () {
  var _useToken = useToken(),
      _useToken2 = _slicedToArray(_useToken, 3),
      theme = _useToken2[0],
      token = _useToken2[1],
      hashId = _useToken2[2];

  var _useContext = useContext(ConfigContext),
      getPrefixCls = _useContext.getPrefixCls;

  var rootPrefixCls = getPrefixCls();
  var clickAnimatingTrue = "[".concat(rootPrefixCls, "-click-animating='true']");
  var clickAnimatingWithoutExtraNodeTrue = "[".concat(rootPrefixCls, "-click-animating-without-extra-node='true']");
  var clickAnimatingNode = ".".concat(rootPrefixCls, "-click-animating-node");

  var waveToken = _extends(_extends({}, token), {
    hashId: hashId,
    clickAnimatingNode: clickAnimatingNode,
    clickAnimatingTrue: clickAnimatingTrue,
    clickAnimatingWithoutExtraNodeTrue: clickAnimatingWithoutExtraNodeTrue,
    clickAnimatingWithoutExtraNodeTrueAfter: "".concat(clickAnimatingWithoutExtraNodeTrue, "::after")
  });

  return [useStyleRegister({
    theme: theme,
    token: token,
    hashId: hashId,
    path: ['wave']
  }, function () {
    return [genWaveStyle(waveToken)];
  }), hashId];
});