UNPKG

react-pdf-builder

Version:
53 lines (52 loc) 4.22 kB
"use strict"; 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;