VSinerva/freesewing
1
0
Fork 0
Code Activity

🐛 Fixed conflicting key values in React components

Browse source
This commit is contained in:
Joost De Cock 2019-09-29 14:01:21 +02:00
parent 23a1c8263e
commit 449eb707d1
2 changed files with 46 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

81
packages/components/src/Draft/Defs/Snippets/index.js
View file

@ -1,9 +1,9 @@
import React from "react"; import React from 'react'
import logoPathString from "./logo-path"; import logoPathString from './logo-path'
const Snippets = props => { const Snippets = props => {
const fill = { fill: "currentColor", stroke: "none" }; const fill = { fill: 'currentColor', stroke: 'none' }
const stroke = { fill: "none", stroke: "currentColor" }; const stroke = { fill: 'none', stroke: 'currentColor' }
return [ return [
<g id="notch" className="snippet notch" key="notch"> <g id="notch" className="snippet notch" key="notch">
<circle cy="0" cx="0" r="1.4" {...fill} /> <circle cy="0" cx="0" r="1.4" {...fill} />
@ -22,73 +22,32 @@ const Snippets = props => {
</g>, </g>,
<g id="buttonhole" className="snippet buttonhole" key="buttonhole"> <g id="buttonhole" className="snippet buttonhole" key="buttonhole">
<path d="M -1,-5 L 1,-5 L 1,5 L -1,5 z" {...stroke} /> <path d="M -1,-5 L 1,-5 L 1,5 L -1,5 z" {...stroke} />
<path <path d="M -1,-5 L 1,-5 L 1,-4 L -1,-4 z M -1,5 L 1,5 L 1,4 L -1,4 z" {...fill} />
d="M -1,-5 L 1,-5 L 1,-4 L -1,-4 z M -1,5 L 1,5 L 1,4 L -1,4 z"
{...fill}
/>
</g>, </g>,
<radialGradient <radialGradient key="grad" id="snap-male-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
id="snap-male-grad" <stop offset="30%" style={{ stopColor: 'rgb(235,235,235)', stopOpacity: 1 }} />
cx="50%" <stop offset="80%" style={{ stopColor: 'rgb(100,100,100)', stopOpacity: 1 }} />
cy="50%"
r="50%"
fx="50%"
fy="50%"
>
<stop
offset="30%"
style={{ stopColor: "rgb(235,235,235)", stopOpacity: 1 }}
/>
<stop
offset="80%"
style={{ stopColor: "rgb(100,100,100)", stopOpacity: 1 }}
/>
</radialGradient>, </radialGradient>,
<g id="snap-male"> <g id="snap-male" key="snapmale">
<circle <circle cx="0" cy="0" r="3.4" style={{ stroke: '#666', fill: '#dddddd', strokeWidth: 0.3 }} />
cx="0" <circle cx="0" cy="0" r="1.8" style={{ stroke: 'none', fill: 'url(#snap-male-grad)' }} />
cy="0"
r="3.4"
style={{ stroke: "#666", fill: "#dddddd", strokeWidth: 0.3 }}
/>
<circle
cx="0"
cy="0"
r="1.8"
style={{ stroke: "none", fill: "url(#snap-male-grad)" }}
/>
<path <path
style={{ fill: "none", stroke: "#666", strokeWidth: 0.2 }} style={{ fill: 'none', stroke: '#666', strokeWidth: 0.2 }}
d="M -2,0 L -3,0 M 2,0 L 3,0 M 0,2 L 0,3 M 0,-2 L 0,-3 M 1.5,1.5 L 2.1,2.1 M -1.5,1.5 L -2.1,2.1 M -1.5,-1.5 L -2.1,-2.1 M 1.5,-1.5 L 2.1,-2.1" d="M -2,0 L -3,0 M 2,0 L 3,0 M 0,2 L 0,3 M 0,-2 L 0,-3 M 1.5,1.5 L 2.1,2.1 M -1.5,1.5 L -2.1,2.1 M -1.5,-1.5 L -2.1,-2.1 M 1.5,-1.5 L 2.1,-2.1"
/> />
</g>, </g>,
<g id="snap-female"> <g id="snap-female" key="snapfemale">
<circle <circle cx="0" cy="0" r="3.4" style={{ stroke: '#666', fill: '#bbbbbb', strokeWidth: 0.3 }} />
cx="0" <circle cx="0" cy="0" r="2" style={{ stroke: '#666', fill: '#dddddd', strokeWidth: 0.4 }} />
cy="0"
r="3.4"
style={{ stroke: "#666", fill: "#bbbbbb", strokeWidth: 0.3 }}
/>
<circle
cx="0"
cy="0"
r="2"
style={{ stroke: "#666", fill: "#dddddd", strokeWidth: 0.4 }}
/>
<path <path
style={{ fill: "none", stroke: "#666", strokeWidth: 0.5 }} style={{ fill: 'none', stroke: '#666', strokeWidth: 0.5 }}
d="M -1.7,-1 L -1.7,1 M 1.7,-1 L 1.7,1" d="M -1.7,-1 L -1.7,1 M 1.7,-1 L 1.7,1"
/> />
</g>, </g>,
<g <g id="logo" className="snippet logo" transform="translate(-23 -36)" key="logo">
id="logo"
className="snippet logo"
transform="translate(-23 -36)"
key="logo"
>
<path d={logoPathString} {...fill} /> <path d={logoPathString} {...fill} />
</g> </g>
]; ]
}; }
export default Snippets; export default Snippets

50
packages/components/src/Draft/DesignPath/index.js
View file

@ -1,55 +1,57 @@
import React from "react"; import React from 'react'
const DesignPath = props => { const DesignPath = props => {
let output = []; console.log('design path props', props)
let i = 0; let output = []
let from = null; let i = 0
let from = null
for (let op of props.path.ops) { for (let op of props.path.ops) {
if (op.type === "curve") { let key = props.part + props.name + i
if (op.type === 'curve') {
output.push( output.push(
<path <path
key={i} key={key + 'cp1'}
d={`M ${from.x},${from.y} L ${op.cp1.x},${op.cp1.y}`} d={`M ${from.x},${from.y} L ${op.cp1.x},${op.cp1.y}`}
className="design path cp" className="design path cp"
/> />
); )
i++; i++
output.push( output.push(
<path <path
key={i} key={key + 'cp2'}
d={`M ${op.to.x},${op.to.y} L ${op.cp2.x},${op.cp2.y}`} d={`M ${op.to.x},${op.to.y} L ${op.cp2.x},${op.cp2.y}`}
className="design path cp" className="design path cp"
/> />
); )
i++; i++
output.push( output.push(
<circle <circle
key={i} key={key + 'cpcirc1'}
cx={op.cp1.x} cx={op.cp1.x}
cy={op.cp1.y} cy={op.cp1.y}
r={3.5} r={3.5}
className="design path cp" className="design path cp"
/> />
); )
i++; i++
output.push( output.push(
<circle <circle
key={i} key={key + 'cpcirc2'}
cx={op.cp2.x} cx={op.cp2.x}
cy={op.cp2.y} cy={op.cp2.y}
r={3.5} r={3.5}
className="design path cp" className="design path cp"
/> />
); )
from = op.to; from = op.to
} else if (op.type !== "close") from = op.to; } else if (op.type !== 'close') from = op.to
} }
output.push( output.push(
<path <path
key={"dpath-" + props.name} key={props.part + props.name + 'dpath'}
d={props.path.asPathstring()} d={props.path.asPathstring()}
onClick={() => onClick={() =>
props.raiseEvent("path", { props.raiseEvent('path', {
path: props.path, path: props.path,
name: props.name, name: props.name,
part: props.part part: props.part
@ -57,8 +59,8 @@ const DesignPath = props => {
} }
className="design hovertrap" className="design hovertrap"
/> />
); )
return output; return output
}; }
export default DesignPath; export default DesignPath