#285 Use RmgAppClip from rmg-components

package.json

@@ -10,7 +10,7 @@
         "@chakra-ui/react": "^2.6.0",
         "@emotion/react": "^11.10.8",
         "@emotion/styled": "^11.10.8",
-        "@railmapgen/rmg-components": "^7.1.2",
+        "@railmapgen/rmg-components": "^7.1.4",
         "@railmapgen/rmg-runtime": "^5.0.1",
         "@railmapgen/rmg-templates-resources": "file:package/dist",
         "@railmapgen/rmg-translate": "^2.0.2",

src/components/app-clip/rmg-param-app-clip.tsx

@@ -1,10 +1,20 @@
-import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/react';
+import { SystemStyleObject } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import rmgRuntime from '@railmapgen/rmg-runtime';
-import { useRootDispatch } from '../../redux';
+import { RmgAppClip } from '@railmapgen/rmg-components';
 
 const CHANNEL_PREFIX = 'rmg-bridge--';
 
+const styles: SystemStyleObject = {
+    h: 500,
+    maxH: '70%',
+
+    '& iframe': {
+        h: '100%',
+        w: '100%',
+    },
+};
+
 interface RmgAppClipProps {
     templateId?: string;
     onClose: () => void;
@@ -14,8 +24,6 @@ interface RmgAppClipProps {
 export default function RmgParamAppClip(props: RmgAppClipProps) {
     const { templateId, onClose, onImport } = props;
 
-    const dispatch = useRootDispatch();
-
     const [appClipId] = useState(crypto.randomUUID());
     const frameUrl =
         '/rmg/import?' +
@@ -42,11 +50,8 @@ export default function RmgParamAppClip(props: RmgAppClipProps) {
     }, [templateId]);
 
     return (
-        <Modal isOpen={!!templateId} onClose={onClose}>
-            <ModalOverlay />
-            <ModalContent h={500} maxH="70%">
-                <iframe src={frameUrl} loading="lazy" width="100%" height="100%" />
-            </ModalContent>
-        </Modal>
+        <RmgAppClip isOpen={!!templateId} onClose={onClose} sx={styles}>
+            <iframe src={frameUrl} loading="lazy" />
+        </RmgAppClip>
     );
 }

src/i18n/translations/zh-Hans.json

@@ -20,6 +20,7 @@
     "Please provide suitable source and justification.": "请您提供适当的来源和理由。",
     "Railway company": "铁路公司",
     "Remove": "删除",
+    "Remove this line": "删除此线路",
     "Size": "大小",
     "Style": "风格",
     "Submit templates": "提交模板",

src/i18n/translations/zh-Hant.json

@@ -20,6 +20,7 @@
     "Please provide suitable source and justification.": "請你提供適當的來源及理由。",
     "Railway company": "鐵路公司",
     "Remove": "移除",
+    "Remove this line": "移除此路線",
     "Size": "大小",
     "Style": "風格",
     "Submit templates": "提交範本",