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

refactor(theming): split up styles

Browse Source
This commit is contained in:
moklick
2021-01-20 14:01:22 +01:00
parent 646c3491ed
commit 27a98d6a8f
18 changed files with 774 additions and 935 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Background/index.tsx
+11 -14
View File
@@ -5,8 +5,6 @@ import { useStoreState } from '../../store/hooks';
import { BackgroundVariant } from '../../types';
import { createGridLinesPath, createGridDotsPath } from './utils';
import './style.css';
export interface BackgroundProps extends HTMLAttributes<SVGElement> {
variant?: BackgroundVariant;
gap?: number;
@@ -34,26 +32,25 @@ const Background = ({
const xOffset = x % scaledGap;
const yOffset = y % scaledGap;
const isLines = variant === BackgroundVariant.Lines;
const bgColor = color ? color : defaultColors[variant];
const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
const isLines = variant === BackgroundVariant.Lines;
const bgColor = color ? color : defaultColors[variant];
const path = isLines ? createGridLinesPath(scaledGap, size, bgColor) : createGridDotsPath(size, bgColor);
return (
<svg
className={bgClasses}
style={{
...style,
width: "100%",
height: "100%"
...style,
width: '100%',
height: '100%',
}}
>
<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
{path}
</pattern>
<pattern id="pattern" x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse">
{path}
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
</svg>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"></rect>
</svg>
);
};
src/additional-components/Background/style.css
-7
View File
@@ -1,7 +0,0 @@
.react-flow__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}