basic UI for row editing

src/components/maps/RouteRow.jsx

@@ -1,41 +1,67 @@
 // @flow
 import React from 'react';
 import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
+import { RouteRowEditor } from '$components/maps/RouteRowEditor';
 
 type Props = {
-  title: String,
-  distance: Number,
-  created_at: String,
-  _id: String,
-  editing: Boolean,
+  _id: string,
+  title: string,
+  distance: number,
+  tab: string,
+  is_editing: boolean,
+  is_public: boolean,
 
-  openRoute: Function,
+
+  openRoute: (_id: string) => {},
+  startEditing: (_id: string) => {},
+  stopEditing: () => {},
 };
 
 export const RouteRow = ({
-  title, distance, _id, openRoute, tab,
+  title, distance, _id, openRoute, tab, is_editing, startEditing, stopEditing, is_public
 }: Props) => (
-  <div className="route-row-wrapper">
-    <div
-      className="route-row"
-      onClick={() => openRoute(_id)}
-    >
-      <div className="route-row-edit">
+  <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-title">
-        {title || _id}
-      </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>
+    }
+    {
+      !is_editing
+      ?
+        <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>
+          <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>
+        </div>
+      : <RouteRowEditor title={title} is_public={is_public} distance={distance} _id={_id} />
+    }
+
   </div>
 );

src/components/maps/RouteRowEditor.jsx

@@ -0,0 +1,81 @@
+// @flow
+import React from 'react';
+import { Icon } from '$components/panels/Icon';
+import { Switch } from '$components/Switch';
+
+type Props = {
+  title: string,
+  is_public: boolean,
+  distance: number,
+  _id: string,
+};
+
+type State = {
+  title: string,
+  is_public: boolean,
+};
+
+export class RouteRowEditor extends React.PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      title: props.title,
+      is_public: props.is_public,
+    };
+  }
+
+  stopEditing = () => console.log();
+  setPublic = () => this.setState({ is_public: !this.state.is_public });
+  setTitle = ({ target: { value } }: { target: { value: string } }) => this.setState({ title: value });
+
+  render() {
+    const {
+      state: { title, is_public },
+      props: { distance, _id }
+    } = this;
+
+    return (
+      <div
+        className="route-row"
+      >
+        <div className="route-title">
+          <input
+            type="text"
+            value={title}
+            onChange={this.setTitle}
+            placeholder="Введите название"
+            autoFocus
+          />
+        </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="route-row-editor">
+          <div className="route-row-buttons">
+            <div className="flex_1" onClick={this.setPublic}>
+              <Switch
+                active={is_public}
+              />
+              {
+                is_public
+                  ? ' В каталоге карт'
+                  : ' Только по ссылке'
+              }
+            </div>
+            <div className="button primary" onClick={this.stopEditing}>
+              OK
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}