dialog-editor: drop and edit items

src/components/maps/RouteRowView.tsx

@@ -0,0 +1,61 @@
+// @flow
+import * as React from 'react';
+import { Icon } from '$components/panels/Icon';
+import { MapListDialog } from "$components/dialogs/MapListDialog";
+import { Tooltip } from "$components/panels/Tooltip";
+import { ReactElement } from "react";
+
+interface Props {
+  _id: string,
+  tab: string,
+  title: string,
+  distance: number,
+  is_public: boolean,
+
+  openRoute: typeof MapListDialog.openRoute,
+  startEditing: typeof MapListDialog.startEditing,
+  stopEditing: typeof MapListDialog.stopEditing,
+  showMenu: typeof MapListDialog.showMenu,
+  showDropCard: typeof MapListDialog.showDropCard,
+}
+
+export const RouteRowView = ({
+  title, distance, _id, openRoute, tab, startEditing, showMenu, showDropCard
+}: Props): ReactElement<Props, null> => (
+  <div
+    className="route-row-view"
+  >
+    <div
+      className="route-row"
+      onClick={() => openRoute(_id)}
+    >
+      <div className="route-title">
+        <span>{(title || _id)}</span>
+      </div>
+
+      <div className="route-description">
+        <span>
+          <Icon icon="icon-link-1" />
+          {_id}
+        </span>
+        <span>
+          <Icon icon="icon-cycle-1" />
+          {(distance && `${distance} km`) || '0 km'}
+        </span>
+      </div>
+    </div>
+    <div className="route-row-edit-button pointer" onClick={() => showMenu(_id)}>
+      <Icon icon="icon-more-vert" />
+    </div>
+    <div className="route-row-edit-menu pointer">
+      <div onMouseDown={() => showDropCard(_id)}>
+        <Tooltip>Удалить</Tooltip>
+        <Icon icon="icon-trash-3" size={32} />
+      </div>
+      <div onMouseDown={() => startEditing(_id)}>
+        <Tooltip>Редактировать</Tooltip>
+        <Icon icon="icon-edit-1" size={32} />
+      </div>
+    </div>
+  </div>
+);