refactor: move all props builder to external file

src/components/react_canvas/area_geometries.tsx

@@ -3,14 +3,13 @@ import React from 'react';
 import { Circle, Group, Path } from 'react-konva';
 import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
 import { LegendItem } from '../../lib/series/legend';
-import {
-  AreaGeometry,
-  GeometryStyle,
-  getGeometryStyle,
-  PointGeometry,
-} from '../../lib/series/rendering';
+import { AreaGeometry, getGeometryStyle, PointGeometry } from '../../lib/series/rendering';
 import { AreaSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
-import { GlobalKonvaElementProps } from './globals';
+import {
+  buildAreaLineProps,
+  buildAreaPointProps,
+  buildAreaProps,
+} from './utils/rendering_props_utils';
 
 interface AreaGeometriesDataProps {
   animated?: boolean;
@@ -176,83 +175,3 @@ export class AreaGeometries extends React.PureComponent<
     });
   }
 }
-
-export function buildAreaPointProps({
-  areaIndex,
-  pointIndex,
-  x,
-  y,
-  radius,
-  strokeWidth,
-  color,
-  opacity,
-}: {
-  areaIndex: number;
-  pointIndex: number;
-  x: number;
-  y: number;
-  radius: number;
-  strokeWidth: number;
-  color: string;
-  opacity: number;
-}) {
-  return {
-    key: `area-point-${areaIndex}-${pointIndex}`,
-    x,
-    y,
-    radius,
-    strokeWidth,
-    strokeEnabled: strokeWidth !== 0,
-    stroke: color,
-    fill: 'white',
-    opacity,
-    ...GlobalKonvaElementProps,
-  };
-}
-
-export function buildAreaProps({
-  index,
-  areaPath,
-  color,
-  opacity,
-}: {
-  index: number;
-  areaPath: string;
-  color: string;
-  opacity: number;
-}) {
-  return {
-    key: `area-${index}`,
-    data: areaPath,
-    fill: color,
-    lineCap: 'round',
-    lineJoin: 'round',
-    opacity,
-    ...GlobalKonvaElementProps,
-  };
-}
-
-export function buildAreaLineProps({
-  index,
-  linePath,
-  color,
-  strokeWidth,
-  geometryStyle,
-}: {
-  index: number;
-  linePath: string;
-  color: string;
-  strokeWidth: number;
-  geometryStyle: GeometryStyle;
-}) {
-  return {
-    key: `area-line-${index}`,
-    data: linePath,
-    stroke: color,
-    strokeWidth,
-    lineCap: 'round',
-    lineJoin: 'round',
-    ...geometryStyle,
-    ...GlobalKonvaElementProps,
-  };
-}

src/components/react_canvas/bar_geometries.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { Group, Rect } from 'react-konva';
 import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
 import { LegendItem } from '../../lib/series/legend';
-import { BarGeometry, GeometryStyle, getGeometryStyle } from '../../lib/series/rendering';
+import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering';
 import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
-import { GlobalKonvaElementProps } from './globals';
+import { buildBarProps } from './utils/rendering_props_utils';
 
 interface BarGeometriesDataProps {
   animated?: boolean;
@@ -108,41 +108,3 @@ export class BarGeometries extends React.PureComponent<
     });
   }
 }
-
-export function buildBarProps({
-  index,
-  x,
-  y,
-  width,
-  height,
-  fill,
-  stroke,
-  strokeWidth,
-  borderEnabled,
-  geometryStyle,
-}: {
-  index: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  fill: string;
-  stroke: string;
-  strokeWidth: number;
-  borderEnabled: boolean;
-  geometryStyle: GeometryStyle;
-}) {
-  return {
-    key: `bar-${index}`,
-    x,
-    y,
-    width,
-    height,
-    fill,
-    strokeWidth,
-    stroke,
-    strokeEnabled: borderEnabled,
-    ...GlobalKonvaElementProps,
-    ...geometryStyle,
-  };
-}