dialog-editor: menu for items

src/components/dialogs/MapListDialog.tsx

@@ -18,7 +18,7 @@ import { Icon } from '$components/panels/Icon';
 import { pushPath } from '$utils/history';
 import { IRootState, IRouteListItem } from '$redux/user/reducer';
 
-interface Props extends IRootState {
+export interface IMapListDialogProps extends IRootState {
   marks: { [x: number]: string },
   routes_sorted: Array<IRouteListItem>,
 
@@ -29,17 +29,33 @@ interface Props extends IRootState {
   setDialogActive: typeof setDialogActive,
 }
 
-interface State {
-  editing_item: IRouteListItem['_id'],
+export interface IMapListDialogState {
+  selected_item: IRouteListItem['_id'],
+  selected_item_mode: 'menu' | 'edit' | 'drop' | null,
 }
 
-class Component extends React.Component<Props, State> {
+class Component extends React.Component<IMapListDialogProps, IMapListDialogState> {
   state = {
-    editing_item: null,
+    selected_item: null,
+    selected_item_mode: null,
   };
 
-  startEditing = editing_item => this.setState({ editing_item });
-  stopEditing = () => this.setState({ editing_item: null });
+  startEditing = (selected_item: IRouteListItem['_id']): void => this.setState({
+    selected_item: ((this.state.selected_item !== selected_item && selected_item) || null),
+    selected_item_mode: 'edit',
+  });
+
+  showMenu = (selected_item: IRouteListItem['_id']): void => this.setState({
+    selected_item: ((this.state.selected_item !== selected_item && selected_item) || null),
+    selected_item_mode: 'menu',
+  });
+
+  showDropCard = (selected_item: IRouteListItem['_id']): void => this.setState({
+    selected_item: ((this.state.selected_item !== selected_item && selected_item) || null),
+    selected_item_mode: 'drop',
+  });
+
+  stopEditing = (): void => this.setState({ selected_item: null });
 
   setTitle = ({ target: { value } }: { target: { value: string }}): void => {
     this.props.searchSetTitle(value);
@@ -79,9 +95,9 @@ class Component extends React.Component<Props, State> {
         }
       },
       marks,
-    }: Props = this.props;
+    }: IMapListDialogProps = this.props;
 
-    const { editing_item } = this.state;
+    const { selected_item, selected_item_mode } = this.state;
 
     return (
       <div className="dialog-content">
@@ -156,10 +172,13 @@ class Component extends React.Component<Props, State> {
                   _id={route._id}
                   is_public={route.is_public}
                   tab={tab}
-                  is_editing={(editing_item === route._id)}
+                  selected={(selected_item === route._id)}
+                  mode={selected_item_mode}
                   openRoute={this.openRoute}
                   startEditing={this.startEditing}
                   stopEditing={this.stopEditing}
+                  showMenu={this.showMenu}
+                  showDropCard={this.showDropCard}
                   key={route._id}
                 />
               ))

src/components/maps/RouteRow.tsx

@@ -2,60 +2,68 @@
 import * as React from 'react';
 import { Icon } from '$components/panels/Icon';
 import classnames from 'classnames';
+import { IMapListDialogState, MapListDialog } from "$components/dialogs/MapListDialog";
+import { Tooltip } from "$components/panels/Tooltip";
 
 interface Props {
   _id: string,
   tab: string,
-  is_editing: boolean,
+  selected: boolean,
   title: string,
   distance: number,
   is_public: boolean,
+  mode: IMapListDialogState['selected_item_mode'],
 
-  openRoute: (_id: string) => void,
-  startEditing: (_id: string) => void,
-  stopEditing: () => void,
+  openRoute: typeof MapListDialog.openRoute,
+  startEditing: typeof MapListDialog.startEditing,
+  stopEditing: typeof MapListDialog.stopEditing,
+  showMenu: typeof MapListDialog.showMenu,
+  showDropCard: typeof MapListDialog.showDropCard,
   key: string,
 }
 
 export const RouteRow = ({
-  title, distance, _id, openRoute, tab, is_editing, startEditing
+  title, distance, _id, openRoute, tab, selected, startEditing, showMenu, showDropCard, mode
 }: Props) => (
-  <div className={classnames('route-row-wrapper', { is_editing })}>
-    {
-      tab === 'mine' &&
-      <div className="route-row-edit" onClick={() => startEditing(_id)}>
-        <Icon icon="icon-edit-1" />
-      </div>
-    }
-      <div
-        className="route-row"
-      >
-        <div 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
+    className={classnames('route-row-wrapper', {
+      selected,
+      has_menu: selected && mode === 'menu',
+      has_drop: selected && mode === 'drop',
+      has_edit: selected && mode === 'edit',
+    })}
+  >
+    <div
+      className="route-row"
+    >
+      <div onClick={() => openRoute(_id)}>
+        <div className="route-title">
+          <span>{(title || _id)}</span>
         </div>
-        <div className="route-row-panel">
-          <div className="">
-            <Icon icon="icon-trash-4" size={24} />
-            Удалить
-          </div>
-          <div className="flex_1 justify-end" onClick={() => startEditing(_id)}>
-            <Icon icon="icon-edit-1" size={24} />
-            Правка
-          </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>
+    <div className="route-row-edit-button pointer" onClick={() => showMenu(_id)}>
+      <Icon icon="icon-more-vert" />
+      <div className="route-row-edit-menu">
+        <div onClick={() => showDropCard(_id)}>
+          <Tooltip>Удалить</Tooltip>
+          <Icon icon="icon-trash-3" size={32} />
+        </div>
+        <div onClick={() => startEditing(_id)}>
+          <Tooltip>Редактировать</Tooltip>
+          <Icon icon="icon-edit-1" size={32} />
+        </div>
+      </div>
+    </div>
   </div>
 );