@mui/x-charts/BarChart/BarClipPath.js

The community edition of MUI X Charts components.

"use strict";
'use client';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BarClipPath = BarClipPath;
exports.useAnimateBarClipRect = useAnimateBarClipRect;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _d3Interpolate = require("@mui/x-charts-vendor/d3-interpolate");
var _animation = require("../hooks/animation");
var _getRadius = require("./getRadius");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["maskId", "x", "y", "width", "height", "skipAnimation"];
function buildClipPath(size, borderRadius, ownerState) {
  const radiusData = (0, _extends2.default)({}, ownerState, {
    borderRadius
  });
  const topLeft = Math.min(size, (0, _getRadius.getRadius)('top-left', radiusData));
  const topRight = Math.min(size, (0, _getRadius.getRadius)('top-right', radiusData));
  const bottomRight = Math.min(size, (0, _getRadius.getRadius)('bottom-right', radiusData));
  const bottomLeft = Math.min(size, (0, _getRadius.getRadius)('bottom-left', radiusData));
  return `inset(0px round ${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px)`;
}
function barClipRectPropsInterpolator(from, to) {
  const interpolateX = (0, _d3Interpolate.interpolateNumber)(from.x, to.x);
  const interpolateY = (0, _d3Interpolate.interpolateNumber)(from.y, to.y);
  const interpolateWidth = (0, _d3Interpolate.interpolateNumber)(from.width, to.width);
  const interpolateHeight = (0, _d3Interpolate.interpolateNumber)(from.height, to.height);
  const interpolateBorderRadius = (0, _d3Interpolate.interpolateNumber)(from.borderRadius, to.borderRadius);
  return t => {
    return {
      x: interpolateX(t),
      y: interpolateY(t),
      width: interpolateWidth(t),
      height: interpolateHeight(t),
      borderRadius: interpolateBorderRadius(t)
    };
  };
}
function useAnimateBarClipRect(props) {
  const initialProps = {
    x: props.x,
    y: props.y + (props.ownerState.layout === 'vertical' ? props.height : 0),
    width: props.ownerState.layout === 'vertical' ? props.width : 0,
    height: props.ownerState.layout === 'vertical' ? 0 : props.height,
    borderRadius: props.borderRadius
  };
  return (0, _animation.useAnimate)({
    x: props.x,
    y: props.y,
    width: props.width,
    height: props.height,
    borderRadius: props.borderRadius
  }, {
    createInterpolator: barClipRectPropsInterpolator,
    transformProps: p => ({
      x: p.x,
      y: p.y,
      width: p.width,
      height: p.height,
      style: {
        clipPath: buildClipPath(props.ownerState.layout === 'vertical' ? p.height : p.width, p.borderRadius, props.ownerState)
      }
    }),
    applyProps(element, animatedProps) {
      element.setAttribute('x', animatedProps.x.toString());
      element.setAttribute('y', animatedProps.y.toString());
      element.setAttribute('width', animatedProps.width.toString());
      element.setAttribute('height', animatedProps.height.toString());
      element.style.clipPath = animatedProps.style.clipPath;
    },
    initialProps,
    skip: props.skipAnimation,
    ref: props.ref
  });
}
function BarClipRect(props) {
  const animatedProps = useAnimateBarClipRect((0, _extends2.default)({}, props, {
    borderRadius: props.ownerState.borderRadius ?? 0
  }));
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, animatedProps));
}
/**
 * @ignore - internal component.
 */
function BarClipPath(props) {
  const {
      maskId,
      x,
      y,
      width,
      height,
      skipAnimation
    } = props,
    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
  if (!props.borderRadius || props.borderRadius <= 0) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
    id: maskId,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BarClipRect, {
      ownerState: rest,
      x: x,
      y: y,
      width: width,
      height: height,
      skipAnimation: skipAnimation
    })
  });
}