replacing gpx tracks

src/components/gpx/GpxConfirm.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+
+interface IProps {}
+
+const GpxConfirm: FC<IProps> = ({}) => {
+  return (
+    <div className="gpx-confirm">
+      <div className="gpx-confirm__text">Маршрут уже нанесен. Что делаем?</div>
+
+      <div className="gpx-confirm__buttons">
+        <div className="button success">Соединить</div>
+
+        <div className="button danger">Переписать</div>
+
+        <div className="button primary">Отмена</div>
+      </div>
+    </div>
+  );
+};
+
+export { GpxConfirm };

src/components/gpx/GpxDialogRow.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { IGpxRoute } from '~/redux/editor';
 import { Switch } from '../Switch';
 import { Icon } from '../panels/Icon';
@@ -13,44 +13,48 @@ interface IProps {
   onRouteDrop: (i: number) => void;
   onRouteToggle: (i: number) => void;
   onRouteColor: (i: number) => void;
+  onRouteReplace: (i: number) => void;
 }
 
-const GpxDialogRow: FC<IProps> = ({
-  item,
-  index,
-  enabled,
-  onRouteToggle,
-  onFocusRoute,
-  onRouteDrop,
-  onRouteColor,
-}) => {
-  return (
-    <div className={classnames('gpx-row', { 'gpx-row_disabled': !enabled || !item.enabled })}>
-      <div
-        className="gpx-row__color"
-        style={{ backgroundColor: item.color }}
-        onClick={() => onRouteColor(index)}
-      />
+const GpxDialogRow: FC<IProps> = memo(
+  ({
+    item,
+    index,
+    enabled,
+    onRouteToggle,
+    onFocusRoute,
+    onRouteDrop,
+    onRouteColor,
+    onRouteReplace,
+  }) => {
+    return (
+      <div className={classnames('gpx-row', { 'gpx-row_disabled': !enabled || !item.enabled })}>
+        <div
+          className="gpx-row__color"
+          style={{ backgroundColor: item.color }}
+          onClick={() => onRouteColor(index)}
+        />
 
-      <div className="gpx-row__title" onClick={() => onFocusRoute(index)}>
-        {item.name}
-      </div>
+        <div className="gpx-row__title" onClick={() => onFocusRoute(index)}>
+          {item.name}
+        </div>
 
-      <div className="gpx-row__buttons">
-        {false && (
-          <div onClick={() => onRouteDrop(index)}>
+        <div className="gpx-row__buttons">
+          <div onClick={() => onRouteReplace(index)}>
             <Icon icon="icon-to-poly" size={24} />
           </div>
-        )}
-        <div onClick={() => onRouteDrop(index)}>
-          <Icon icon="icon-trash-6" size={24} />
-        </div>
-        <div>
-          <Switch active={item.enabled} onPress={() => onRouteToggle(index)} />
+
+          <div onClick={() => onRouteDrop(index)}>
+            <Icon icon="icon-trash-6" size={24} />
+          </div>
+
+          <div>
+            <Switch active={item.enabled} onPress={() => onRouteToggle(index)} />
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 export { GpxDialogRow };