providers: complete?

src/components/dialogs/ProviderDialog.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { PROVIDERS, replaceProviderUrl } from '$constants/providers';
+import { Icon } from '$components/panels/Icon';
+import classnames from 'classnames';
+import { MODES } from '$constants/modes';
+
+type Props = {
+  setProvider: Function,
+  setMode: Function,
+  provider: String,
+};
+
+export class ProviderDialog extends React.Component<Props, void> {
+  closeDialog = () => this.props.setMode(MODES.NONE);
+
+  render() {
+    const { provider, setProvider } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className="helper provider-helper">
+          {
+            Object.keys(PROVIDERS).map(item => (
+              <div
+                className={classnames('provider-helper-thumb', { active: provider === item })}
+                style={{
+                  backgroundImage: `url(${replaceProviderUrl(item, { x: 5980, y: 2589, zoom: 13 })})`,
+                }}
+                onClick={() => setProvider(item)}
+                key={PROVIDERS[item].name}
+              >
+                {
+                  provider === item &&
+                    <div className="provider-helper-check">
+                      <Icon icon="icon-check-1" />
+                    </div>
+                }
+              </div>
+            ))
+          }
+        </div>
+        <div className="helper">
+          <div className="helper__text">
+            <Icon icon="icon-map-1" />
+            <div className="big upper">ВЫБЕРИТЕ СТИЛЬ КАРТЫ</div>
+          </div>
+          <div className="helper__buttons button-group" onClick={this.closeDialog}>
+            <Icon icon="icon-cancel-1" />
+          </div>
+        </div>
+      </React.Fragment>
+    );
+  }
+}

src/components/panels/EditorDialog.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { MODES } from '$constants/modes';
 
-import { RouterDialog } from '$components/router/RouterDialog';
-import { StickersDialog } from '$components/stickers/StickersDialog';
-import { TrashDialog } from '$components/trash/TrashDialog';
-import { LogoDialog } from '$components/logo/LogoDialog';
-import { SaveDialog } from '$components/save/SaveDialog';
-import { CancelDialog } from '$components/save/CancelDialog';
+import { RouterDialog } from '$components/dialogs/RouterDialog';
+import { StickersDialog } from '$components/dialogs/StickersDialog';
+import { TrashDialog } from '$components/dialogs/TrashDialog';
+import { LogoDialog } from '$components/dialogs/LogoDialog';
+import { SaveDialog } from '$components/dialogs/SaveDialog';
+import { CancelDialog } from '$components/dialogs/CancelDialog';
 
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
@@ -24,7 +24,9 @@ import {
   stopEditing,
   setEditing,
   sendSaveRequest,
+  setProvider,
 } from '$redux/user/actions';
+import { ProviderDialog } from '$components/dialogs/ProviderDialog';
 
 type Props = {
   mode: String,
@@ -44,6 +46,7 @@ export const Component = (props: Props) => {
     || mode === MODES.LOGO
     || mode === MODES.SAVE
     || mode === MODES.CONFIRM_CANCEL
+    || mode === MODES.PROVIDER
   );
 
   const dialogIsSmall = (
@@ -65,6 +68,7 @@ export const Component = (props: Props) => {
         { mode === MODES.LOGO && <LogoDialog {...props} /> }
         { mode === MODES.SAVE && <SaveDialog {...props} /> }
         { mode === MODES.CONFIRM_CANCEL && <CancelDialog {...props} /> }
+        { mode === MODES.PROVIDER && <ProviderDialog {...props} /> }
       </div>
   );
 };
@@ -84,6 +88,7 @@ const mapDispatchToProps = dispatch => bindActionCreators({
   setEditing,
   setMode,
   sendSaveRequest,
+  setProvider,
 }, dispatch);
 
 export const EditorDialog = connect(

src/components/panels/EditorPanel.jsx

@@ -45,7 +45,7 @@ class Component extends React.PureComponent<Props, void> {
   startPolyMode = () => this.props.setMode(MODES.POLY);
   startStickerMode = () => this.props.setMode(MODES.STICKERS);
   startRouterMode = () => this.props.setMode(MODES.ROUTER);
-  startShotterMode = () => this.props.setMode(MODES.SHOTTER);
+  startProviderMode = () => this.props.setMode(MODES.PROVIDER);
   startTrashMode = () => this.props.setMode(MODES.TRASH);
   startLogoMode = () => this.props.setMode(MODES.LOGO);
   startSaveMode = () => this.props.setMode(MODES.SAVE);
@@ -111,7 +111,8 @@ class Component extends React.PureComponent<Props, void> {
             </button>
 
             <button
-              className={classnames('disabled', { active: mode === MODES.LOGO })}
+              className={classnames({ active: mode === MODES.PROVIDER })}
+              onClick={this.startProviderMode}
             >
               <Icon icon="icon-map-1" />
             </button>