alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(nodes): wrap with memo, update transform without creatin new array #282

Browse Source
This commit is contained in:
moklick
2020-06-05 12:55:11 +02:00
parent d5997ecbea
commit 6b8e7bfbc3
5 changed files with 22 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/src/CustomNode/ColorSelectorNode.js
+10 -18
View File
@@ -1,30 +1,22 @@
import React from 'react';
import React, { memo } from 'react';
import { Handle } from 'react-flow-renderer';
export default ({ data }) => {
export default memo(({ data }) => {
return (
<>
<Handle
type="target"
position="left"
style={{ background: '#fff' }}
onConnect={params => console.log('handle onConnect', params)}
/>
<div>Custom Color Picker Node: <strong>{data.color}</strong></div>
<input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color}/>
<Handle
type="source"
position="right"
id="a"
style={{ top: 10, background: '#fff' }}
/>
<Handle
type="source"
position="right"
id="b"
style={{ bottom: 10, top: 'auto', background: '#fff' }}
onConnect={(params) => console.log('handle onConnect', params)}
/>
<div>
Custom Color Picker Node: <strong>{data.color}</strong>
</div>
<input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
<Handle type="source" position="right" id="a" style={{ top: 10, background: '#fff' }} />
<Handle type="source" position="right" id="b" style={{ bottom: 10, top: 'auto', background: '#fff' }} />
</>
);
};
});