sticker panel with ability to choose

src/components/panels/EditorDialog.jsx

@@ -2,14 +2,19 @@ import React from 'react';
 import { MODES } from '$constants/modes';
 
 import { RouterHelper } from '$components/router/RouterHelper';
+import { StickersHelper } from '$components/stickers/StickersHelper';
 
-export const EditorDialog = ({ mode, routerPoints, editor }) => {
-  const showDialog = (mode === MODES.ROUTER);
+export const EditorDialog = ({ mode, routerPoints, editor, activeSticker }) => {
+  const showDialog = (
+    mode === MODES.ROUTER
+    || (mode === MODES.STICKERS && !activeSticker)
+  );
 
   return (
     showDialog &&
       <div id="control-dialog">
         { mode === MODES.ROUTER && <RouterHelper routerPoints={routerPoints} editor={editor} /> }
+        { mode === MODES.STICKERS && <StickersHelper editor={editor} /> }
       </div>
   );
 };

src/components/panels/EditorPanel.jsx

@@ -18,7 +18,7 @@ export class EditorPanel extends React.PureComponent {
 
   render() {
     const {
-      mode, routerPoints, editor, totalDistance, estimateTime
+      mode, routerPoints, editor, totalDistance, estimateTime, activeSticker
     } = this.props;
 
     return (
@@ -27,6 +27,7 @@ export class EditorPanel extends React.PureComponent {
         <EditorDialog
           mode={mode}
           routerPoints={routerPoints}
+          activeSticker={activeSticker}
           editor={editor}
         />
 
@@ -44,14 +45,14 @@ export class EditorPanel extends React.PureComponent {
           <div className="control-dist">
             {(totalDistance > 0)
               ?
-              <React.Fragment>
-                {totalDistance} км
-                <Icon icon="icon-cycle" size={32} />
-                {
-                  (estimateTime > 0) && (estimateTime > 0) && <span>{toHours(estimateTime)}</span>
-                }
-              </React.Fragment>
-              : <div onClick={() => editor.changeMode(MODES.ROUTER)}>Начнать рисовать</div>
+                <React.Fragment>
+                  {totalDistance} км
+                  <Icon icon="icon-cycle" size={32} />
+                  {
+                    (estimateTime > 0) && (estimateTime > 0) && <span>{toHours(estimateTime)}</span>
+                  }
+                </React.Fragment>
+              : <div onClick={() => editor.changeMode(MODES.ROUTER)}>Начать рисовать</div>
             }
           </div>
 

src/components/stickers/StickersHelper.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { stickers } from '$constants/stickers';
+import sprite from '$sprites/stickers.svg';
+
+export class StickersHelper extends React.Component {
+  render() {
+    return (
+      <div className="stickers-helper">
+        {
+          stickers.map(sticker => (
+            <div className="sticker-preview" key={sticker}>
+              <svg width={48} height={48} viewBox="0 0 64 64" onClick={() => this.props.editor.setSticker(sticker)}>
+                <use xlinkHref={`${sprite}#sticker-${sticker}`} x="0" y="0" width="64" height="64" />
+              </svg>
+            </div>
+          ))
+        }
+      </div>
+    );
+  }
+}