diff --git a/src/elements/G.tsx b/src/elements/G.tsx index 602cde257..c8e19236e 100644 --- a/src/elements/G.tsx +++ b/src/elements/G.tsx @@ -1,5 +1,6 @@ import type { ReactNode } from 'react'; import * as React from 'react'; +import { Children } from 'react'; import extractProps, { propsAndStyles } from '../lib/extract/extractProps'; import { extractFont } from '../lib/extract/extractText'; import extractTransform from '../lib/extract/extractTransform'; @@ -41,11 +42,18 @@ export default class G

extends Shape { if (hasProps(font)) { extractedProps.font = font; } + + const childArray = props.children + ? Children.map(props.children, (child) => + React.cloneElement(child, { ...extractedProps }) + ) + : []; + return ( this.refMethod(ref as (G

& NativeMethods) | null)} {...extractedProps}> - {props.children} + {childArray} ); } diff --git a/src/lib/extract/extractBrush.ts b/src/lib/extract/extractBrush.ts index a3b062815..a63649dbe 100644 --- a/src/lib/extract/extractBrush.ts +++ b/src/lib/extract/extractBrush.ts @@ -8,7 +8,25 @@ const currentColorBrush = { type: 2 }; const contextFillBrush = { type: 3 }; const contextStrokeBrush = { type: 4 }; +function isBrush(color: any): boolean { + const isObject = !!color && typeof color === 'object'; + const hasType = () => 'type' in color && typeof color.type === 'number'; + const hasBrushRef = () => 'brushRef' in color && typeof color.brushRef === 'string'; + const hasPayload = () => 'payload' in color && typeof color.payload === 'number'; + + return ( + isObject && + hasType() && + (hasBrushRef() || hasPayload()) + ); +} + export default function extractBrush(color: ColorValue) { + if (isBrush(color)) { + // If the color comes from the AST it's already a brush + return color; + } + if (color === 'none') { return null; } diff --git a/src/lib/extract/extractFill.ts b/src/lib/extract/extractFill.ts index bdc00addd..731b8449c 100644 --- a/src/lib/extract/extractFill.ts +++ b/src/lib/extract/extractFill.ts @@ -21,6 +21,7 @@ export default function extractFill( o.fill = !fill && typeof fill !== 'number' ? defaultFill : extractBrush(fill); } else { + inherited.push('fill'); // we want the default value of fill to be black to match the spec o.fill = defaultFill; }