@razorpay/blade
Version:
The Design System that powers Razorpay
93 lines (88 loc) • 3.6 kB
JavaScript
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import 'react';
import { useFluidGradient } from './useFluidGradient.js';
import { useId } from '../../../utils/useId.js';
import { jsxs, jsx } from 'react/jsx-runtime';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var CANVAS_SCALE = 1.4;
/**
* FluidGradient renders an animated WebGL gradient clipped to whatever
* SVG shape you pass as children.
*
* Children are placed inside an SVG <mask>, so they should be valid SVG
* elements. Use `fill="white"` for the visible area.
* Animate with framer-motion's SVG variants: motion.path, motion.g, motion.svg.
*/
function FluidGradient(_ref) {
var children = _ref.children,
_ref$size = _ref.size,
size = _ref$size === void 0 ? 200 : _ref$size,
_ref$viewBox = _ref.viewBox,
viewBox = _ref$viewBox === void 0 ? '0 0 24 24' : _ref$viewBox,
_ref$origin = _ref.origin,
origin = _ref$origin === void 0 ? [0.5, 0.0] : _ref$origin,
className = _ref.className,
style = _ref.style;
var uid = useId('rzp-sense-gradient');
var maskId = "fg-mask-".concat(uid);
// Canvas is larger than the visible area; offset centers it behind the mask
var canvasSize = Math.round(size * CANVAS_SCALE);
var offset = (canvasSize - size) / 2;
var containerRef = useFluidGradient({
size: canvasSize,
origin: origin
});
var vbW = parseViewBoxSize(viewBox, 'w');
var vbH = parseViewBoxSize(viewBox, 'h');
return /*#__PURE__*/jsxs("div", {
className: className,
style: _objectSpread({
position: 'relative',
width: size,
height: size,
display: 'inline-block',
overflow: 'hidden'
}, style),
children: [/*#__PURE__*/jsx("svg", {
"aria-hidden": true,
style: {
position: 'absolute',
width: 0,
height: 0,
overflow: 'hidden'
},
children: /*#__PURE__*/jsx("defs", {
children: /*#__PURE__*/jsx("mask", {
id: maskId,
maskUnits: "userSpaceOnUse",
x: "0",
y: "0",
width: canvasSize,
height: canvasSize,
children: /*#__PURE__*/jsx("g", {
transform: "translate(".concat(offset, ", ").concat(offset, ") scale(").concat(size / vbW, ", ").concat(size / vbH, ")"),
children: children
})
})
})
}), /*#__PURE__*/jsx("div", {
ref: containerRef,
style: {
position: 'absolute',
top: -offset,
left: -offset,
mask: "url(#".concat(maskId, ")"),
WebkitMask: "url(#".concat(maskId, ")")
}
})]
});
}
/** Extract width or height from a viewBox string like "0 0 24 24" */
function parseViewBoxSize(viewBox, dim) {
var parts = viewBox.trim().split(/[\s,]+/);
var val = dim === 'w' ? parseFloat(parts[2]) : parseFloat(parts[3]);
return val > 0 ? val : 24;
}
export { FluidGradient };
//# sourceMappingURL=FluidGradient.js.map