victory-core
Version:
186 lines (184 loc) • 6.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.VictoryClipContainer = void 0;
var _react = _interopRequireDefault(require("react"));
var _defaults = _interopRequireDefault(require("lodash/defaults"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var Helpers = _interopRequireWildcard(require("../victory-util/helpers"));
var UserProps = _interopRequireWildcard(require("../victory-util/user-props"));
var _clipPath = require("../victory-primitives/clip-path");
var _circle = require("../victory-primitives/circle");
var _rect = require("../victory-primitives/rect");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
class VictoryClipContainer extends _react.default.Component {
static displayName = "VictoryClipContainer";
static role = "container";
static defaultProps = {
circleComponent: /*#__PURE__*/_react.default.createElement(_circle.Circle, null),
rectComponent: /*#__PURE__*/_react.default.createElement(_rect.Rect, null),
clipPathComponent: /*#__PURE__*/_react.default.createElement(_clipPath.ClipPath, null),
groupComponent: /*#__PURE__*/_react.default.createElement("g", null)
};
constructor(props) {
super(props);
this.state = {
clipId: props?.clipId
};
}
// The clipId state is used to prevent hydration mismatches between the server and client (issue #2941).
// A better alternative would be to utilize React 18's useId hook instead of uniqueId, which would avoid needing state for this purpose.
// However, this component currently supports React 16 at the time of writing, so this workaround is necessary.
componentDidMount() {
if (!this.state.clipId) {
this.setState({
clipId: (0, _uniqueId.default)("victory-clip-")
});
}
}
calculateAttributes(props) {
const {
polar,
origin,
clipWidth = 0,
clipHeight = 0,
translateX = 0,
translateY = 0
} = props;
const clipPadding = Helpers.getPadding(props.clipPadding);
const radius = props.radius || Helpers.getRadius(props);
return {
x: (polar ? origin.x : translateX) - clipPadding.left,
y: (polar ? origin.y : translateY) - clipPadding.top,
width: Math.max((polar ? radius : clipWidth) + clipPadding.left + clipPadding.right, 0),
height: Math.max((polar ? radius : clipHeight) + clipPadding.top + clipPadding.bottom, 0)
};
}
renderClippedGroup(props, clipId) {
const userProps = UserProps.getSafeUserProps(props);
const {
style,
events,
transform,
children,
className,
groupComponent,
tabIndex
} = props;
const clipComponent = this.renderClipComponent(props, clipId);
const groupProps = Object.assign({
className,
style,
transform,
key: `clipped-group-${clipId}`,
clipPath: `url(#${clipId})`
}, events);
return /*#__PURE__*/_react.default.cloneElement(groupComponent, {
...groupProps,
tabIndex,
...userProps
}, [clipComponent, ..._react.default.Children.toArray(children)]);
}
renderGroup(props) {
const {
style,
events,
transform,
children,
className,
groupComponent,
tabIndex
} = props;
return /*#__PURE__*/_react.default.cloneElement(groupComponent, Object.assign({
className,
style,
transform,
"aria-label": props["aria-label"],
tabIndex
}, events), children);
}
renderClipComponent(props, clipId) {
const {
polar,
origin,
clipWidth = 0,
clipHeight = 0,
translateX = 0,
translateY = 0,
circleComponent,
rectComponent,
clipPathComponent
} = props;
const {
top,
bottom,
left,
right
} = Helpers.getPadding(props.clipPadding);
let child;
if (polar) {
const radius = props.radius || Helpers.getRadius(props);
const circleProps = {
r: Math.max(radius + left + right, radius + top + bottom, 0),
cx: origin.x - left,
cy: origin.y - top
};
child = /*#__PURE__*/_react.default.cloneElement(circleComponent, circleProps);
} else {
const rectProps = {
x: translateX - left,
y: translateY - top,
width: Math.max(clipWidth + left + right, 0),
height: Math.max(clipHeight + top + bottom, 0)
};
child = /*#__PURE__*/_react.default.cloneElement(rectComponent, rectProps);
}
return /*#__PURE__*/_react.default.cloneElement(clipPathComponent, Object.assign({
key: `clip-path-${clipId}`
}, props, {
clipId
}), child);
}
getClipValue(props, axis) {
const clipValues = {
x: props.clipWidth,
y: props.clipHeight
};
if (clipValues[axis] !== undefined) {
return clipValues[axis];
}
const range = Helpers.getRange(props, axis);
return range ? Math.abs(range[0] - range[1]) || undefined : undefined;
}
getTranslateValue(props, axis) {
const translateValues = {
x: props.translateX,
y: props.translateY
};
if (translateValues[axis] !== undefined) {
return translateValues[axis];
}
const range = Helpers.getRange(props, axis);
return range ? Math.min(...range) : undefined;
}
render() {
const clipHeight = this.getClipValue(this.props, "y");
const clipWidth = this.getClipValue(this.props, "x");
if (clipWidth === undefined || clipHeight === undefined) {
return this.renderGroup(this.props);
}
const translateX = this.getTranslateValue(this.props, "x");
const translateY = this.getTranslateValue(this.props, "y");
const clipProps = (0, _defaults.default)({}, this.props, {
clipHeight,
clipWidth,
translateX,
translateY
});
return this.renderClippedGroup(clipProps, this.state.clipId);
}
}
exports.VictoryClipContainer = VictoryClipContainer;