1
0
Fork 0
freesewing/packages/react/components/Xray/index.mjs
Joost De Cock 51dc1d9732
[breaking]: FreeSewing v4 (#7297)
Refer to the CHANGELOG for all info.

---------

Co-authored-by: Wouter van Wageningen <wouter.vdub@yahoo.com>
Co-authored-by: Josh Munic <jpmunic@gmail.com>
Co-authored-by: Jonathan Haas <haasjona@gmail.com>
2025-04-01 16:15:20 +02:00

67 lines
1.7 KiB
JavaScript

import React, { forwardRef } from 'react'
import { defaultComponents as patternComponents } from '@freesewing/react/components/Pattern'
import { PointXray } from './point.mjs'
import { PathXray } from './path.mjs'
/*
* Allow people to override these components
*/
const defaultComponents = {
Point: PointXray,
Path: PathXray,
}
export const Xray = forwardRef((props, ref) => {
if (!props.renderProps) return null
// desctructure props
const {
renderProps = false,
t = (string) => string,
children = false,
className = 'freesewing pattern',
components = {},
drillProps = {},
} = props
// Merge pattern, default, and custom components
const mergedComponents = {
...patternComponents,
...defaultComponents,
...components,
}
const { Svg, Defs, Stack, Group } = mergedComponents
const optionalProps = {}
if (className) optionalProps.className = className
return (
<Svg
viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
embed={renderProps.settings.embed}
{...renderProps}
{...optionalProps}
ref={ref}
>
<Defs {...renderProps} />
<style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
renderProps.svg.style
}`}</style>
<Group>
{children
? children
: Object.keys(renderProps.stacks).map((stackName) => (
<Stack
key={stackName}
stackName={stackName}
stack={renderProps.stacks[stackName]}
settings={renderProps.settings}
components={mergedComponents}
t={t}
drillProps={drillProps}
/>
))}
</Group>
</Svg>
)
})