react-pdf-builder
Version:
Build beautiful PDF documents in React.
53 lines (52 loc) • 4.22 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EllipseShape = void 0;
const renderer_1 = require("@react-pdf/renderer");
const react_1 = __importDefault(require("react"));
const ThemeBuilder_1 = require("../../themes/ThemeBuilder");
const util_1 = require("../../util/util");
const PDFThemeProvider_1 = require("../theme/PDFThemeProvider");
const Gradients_1 = require("./Gradients");
/**
* Read the [full documentation for EllipseShape](https://justinmahar.github.io/react-pdf-builder/?path=/docs/documentation-components-shapes-ellipseshape--docs)
*/
const EllipseShape = (_a) => {
var _b, _c, _d;
var { width = 100, height = 100, fill, ellipseProps, linearGradientProps, radialGradientProps, gradient, gradientType = Gradients_1.GradientType.topToBottom, linearGradientCoords: linearGradientCoordsProps, radialGradientCoords: radialGradientCoordsProps, className } = _a, svgProps = __rest(_a, ["width", "height", "fill", "ellipseProps", "linearGradientProps", "radialGradientProps", "gradient", "gradientType", "linearGradientCoords", "radialGradientCoords", "className"]);
const theme = (0, PDFThemeProvider_1.usePDFThemeContext)();
const uuidRef = react_1.default.useRef((0, util_1.randomUuid)());
const linearId = `linear-${uuidRef.current}`;
const radialId = `radial-${uuidRef.current}`;
const gradientStops = Gradients_1.Gradients.normalizeGradientStops(gradient);
const linearGradientCoords = linearGradientCoordsProps
? Gradients_1.Gradients.safeLinearCoords(linearGradientCoordsProps)
: Gradients_1.Gradients.toGradientCoords(gradientType);
const radialGradientCoords = radialGradientCoordsProps
? Gradients_1.Gradients.safeRadialCoords(radialGradientCoordsProps)
: undefined;
const widthNum = parseFloat(`${width}`);
const heightNum = parseFloat(`${height}`);
const strokeWidthNum = parseFloat(`${(_b = ellipseProps === null || ellipseProps === void 0 ? void 0 : ellipseProps.strokeWidth) !== null && _b !== void 0 ? _b : 0}`);
const ellipseFill = (_d = (_c = ellipseProps === null || ellipseProps === void 0 ? void 0 : ellipseProps.fill) !== null && _c !== void 0 ? _c : fill) !== null && _d !== void 0 ? _d : (!gradient ? 'black' : gradientType === Gradients_1.GradientType.radial ? `url('#${radialId}')` : `url('#${linearId}')`);
const classNameStyles = ThemeBuilder_1.ThemeBuilder.getStylesForClassName(className, theme.classNames);
return (react_1.default.createElement(renderer_1.Svg, Object.assign({ viewBox: `0 0 ${widthNum} ${heightNum}` }, svgProps, { style: Object.assign(Object.assign({ width: widthNum, height: heightNum }, classNameStyles), svgProps.style) }),
react_1.default.createElement(renderer_1.Defs, null,
react_1.default.createElement(renderer_1.LinearGradient, Object.assign({ id: linearId }, linearGradientCoords, linearGradientProps), gradientStops.map((s, i) => (react_1.default.createElement(renderer_1.Stop, Object.assign({ key: `linear-stop-` + i }, s))))),
react_1.default.createElement(renderer_1.RadialGradient, Object.assign({ id: radialId }, radialGradientCoords, radialGradientProps), gradientStops.map((s, i) => (react_1.default.createElement(renderer_1.Stop, Object.assign({ key: `radial-stop-` + i }, s)))))),
react_1.default.createElement(renderer_1.Ellipse, Object.assign({ cx: widthNum / 2, cy: heightNum / 2, rx: (widthNum - strokeWidthNum) / 2, ry: (heightNum - strokeWidthNum) / 2 }, ellipseProps, { fill: ellipseFill }))));
};
exports.EllipseShape = EllipseShape;
;