#901 Update single and dual color to attrsComponent

Author: thekingofcity

src/components/svgs/lines/styles/dual-color.tsx

@@ -1,9 +1,10 @@
 import { IconButton } from '@chakra-ui/react';
+import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdOutlineSwapVert } from 'react-icons/md';
-import { CityCode, Theme } from '../../../../constants/constants';
+import { AttrsProps, CityCode, Theme } from '../../../../constants/constants';
 import {
     LinePathAttributes,
     LinePathType,
@@ -15,10 +16,6 @@ import { useRootDispatch, useRootSelector } from '../../../../redux';
 import { saveGraph } from '../../../../redux/param/param-slice';
 import { refreshEdgesThunk } from '../../../../redux/runtime/runtime-slice';
 import { makeShortPathParallel } from '../../../../util/bezier-parallel';
-import {
-    RmgFieldsFieldDetail,
-    RmgFieldsFieldSpecificAttributes,
-} from '../../../panels/details/rmg-field-specific-attrs';
 import { ColorField } from '../../../panels/details/color-field';
 
 const DualColor = (props: LineStyleComponentProps<DualColorAttributes>) => {
@@ -90,47 +87,44 @@ const DualColorSwitch = () => {
     );
 };
 
-const dualColorFields = [
-    {
-        type: 'custom',
-        label: 'panel.details.lines.dualColor.swap',
-        component: <DualColorSwitch />,
-    },
-    {
-        type: 'custom',
-        label: 'panel.details.lines.dualColor.colorA',
-        component: (
-            <ColorField
-                type={LineStyleType.DualColor}
-                colorKey="colorA"
-                defaultTheme={defaultDualColorAttributes.colorA}
-            />
-        ),
-    },
-    {
-        type: 'custom',
-        label: 'panel.details.lines.dualColor.colorB',
-        component: (
-            <ColorField
-                type={LineStyleType.DualColor}
-                colorKey="colorB"
-                defaultTheme={defaultDualColorAttributes.colorB}
-            />
-        ),
-    },
-];
+const dualColorAttrsComponent = (props: AttrsProps<DualColorAttributes>) => {
+    const fields: RmgFieldsField[] = [
+        {
+            type: 'custom',
+            label: 'panel.details.lines.dualColor.swap',
+            component: <DualColorSwitch />,
+        },
+        {
+            type: 'custom',
+            label: 'panel.details.lines.dualColor.colorA',
+            component: (
+                <ColorField
+                    type={LineStyleType.DualColor}
+                    colorKey="colorA"
+                    defaultTheme={defaultDualColorAttributes.colorA}
+                />
+            ),
+        },
+        {
+            type: 'custom',
+            label: 'panel.details.lines.dualColor.colorB',
+            component: (
+                <ColorField
+                    type={LineStyleType.DualColor}
+                    colorKey="colorB"
+                    defaultTheme={defaultDualColorAttributes.colorB}
+                />
+            ),
+        },
+    ];
 
-const attrsComponent = () => (
-    <RmgFieldsFieldSpecificAttributes
-        fields={dualColorFields as RmgFieldsFieldDetail<DualColorAttributes>}
-        type="style"
-    />
-);
+    return <RmgFields fields={fields} />;
+};
 
 const dualColor: LineStyle<DualColorAttributes> = {
     component: DualColor,
     defaultAttrs: defaultDualColorAttributes,
-    attrsComponent,
+    attrsComponent: dualColorAttrsComponent,
     metadata: {
         displayName: 'panel.details.lines.dualColor.displayName',
         supportLinePathType: [LinePathType.Diagonal, LinePathType.Perpendicular, LinePathType.RotatePerpendicular],

src/components/svgs/lines/styles/single-color.tsx

@@ -1,5 +1,7 @@
+import { RmgFields, RmgFieldsField } from '@railmapgen/rmg-components';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import React from 'react';
+import { AttrsProps, CityCode } from '../../../../constants/constants';
 import {
     LinePathAttributes,
     LinePathType,
@@ -8,11 +10,6 @@ import {
     LineStyleType,
 } from '../../../../constants/lines';
 import { AttributesWithColor, ColorField } from '../../../panels/details/color-field';
-import {
-    RmgFieldsFieldDetail,
-    RmgFieldsFieldSpecificAttributes,
-} from '../../../panels/details/rmg-field-specific-attrs';
-import { CityCode } from '../../../../constants/constants';
 
 const SingleColor = (props: LineStyleComponentProps<SingleColorAttributes>) => {
     const { id, path, styleAttrs, newLine, handlePointerDown } = props;
@@ -47,25 +44,24 @@ const defaultSingleColorAttributes: SingleColorAttributes = {
     color: [CityCode.Shanghai, 'sh1', '#E4002B', MonoColour.white],
 };
 
-const singleColorFields = [
-    {
-        type: 'custom',
-        label: 'color',
-        component: <ColorField type={LineStyleType.SingleColor} defaultTheme={defaultSingleColorAttributes.color} />,
-    },
-];
+const singleColorAttrsComponent = (props: AttrsProps<SingleColorAttributes>) => {
+    const fields: RmgFieldsField[] = [
+        {
+            type: 'custom',
+            label: 'color',
+            component: (
+                <ColorField type={LineStyleType.SingleColor} defaultTheme={defaultSingleColorAttributes.color} />
+            ),
+        },
+    ];
 
-const attrsComponent = () => (
-    <RmgFieldsFieldSpecificAttributes
-        fields={singleColorFields as RmgFieldsFieldDetail<SingleColorAttributes>}
-        type="style"
-    />
-);
+    return <RmgFields fields={fields} />;
+};
 
 const singleColor: LineStyle<SingleColorAttributes> = {
     component: SingleColor,
     defaultAttrs: defaultSingleColorAttributes,
-    attrsComponent,
+    attrsComponent: singleColorAttrsComponent,
     metadata: {
         displayName: 'panel.details.lines.singleColor.displayName',
         supportLinePathType: [LinePathType.Diagonal, LinePathType.Perpendicular, LinePathType.RotatePerpendicular],