nominatim search (without working dialog)

src/components/dialogs/DialogLoader.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { Icon } from '~/components/panels/Icon';
+
+interface IProps {}
+
+const DialogLoader: FC<IProps> = ({}) => {
+  return (
+    <div className="dialog-maplist-loader">
+      <div className="dialog-maplist-icon spin">
+        <Icon icon="icon-sync-1" />
+      </div>
+    </div>
+  );
+};
+
+export { DialogLoader };

src/components/dialogs/MapListDialog.tsx

@@ -24,6 +24,7 @@ import { IRouteListItem } from '~/redux/user';
 import { ROLES } from '~/constants/auth';
 import { IState } from '~/redux/store';
 import { MapListDialogHead } from '~/components/search/MapListDialogHead';
+import { DialogLoader } from '~/components/dialogs/DialogLoader';
 
 const mapStateToProps = ({
   editor: { editing },
@@ -165,11 +166,7 @@ class MapListDialogUnconnected extends PureComponent<Props, State> {
     return (
       <div className="dialog-content full">
         {list.length === 0 && loading && (
-          <div className="dialog-maplist-loader">
-            <div className="dialog-maplist-icon spin">
-              <Icon icon="icon-sync-1" />
-            </div>
-          </div>
+          <DialogLoader />
         )}
 
         {ready && !loading && list.length === 0 && (

src/components/dialogs/NominatimDialog.tsx

@@ -0,0 +1,46 @@
+import React, { FC, Fragment, useCallback } from 'react';
+import { connect } from 'react-redux';
+import { IState } from '~/redux/store';
+import { selectEditorNominatim } from '~/redux/editor/selectors';
+import { DialogLoader } from './DialogLoader';
+import { NominatimListItem } from '~/components/nominatim/NominatimListItem';
+import { MainMap } from '~/constants/map';
+import { Scroll } from '../Scroll';
+
+const mapStateToProps = (state: IState) => ({
+  nominatim: selectEditorNominatim(state),
+});
+
+type Props = ReturnType<typeof mapStateToProps> & {};
+
+const NominatimDialogUnconnected: FC<Props> = ({ nominatim: { loading, list } }) => {
+  const onItemClick = useCallback(
+    (index: number) => {
+      if (!list[index]) return;
+
+      MainMap.setView(list[index].latlng, 17);
+    },
+    [MainMap, list]
+  );
+
+  return (
+    <Fragment>
+      <div style={{ flex: 1 }} />
+
+      <div className="dialog-flex-scroll">
+        <Scroll>
+          <div className="dialog-content nominatim-dialog-content">
+            {loading && <DialogLoader />}
+            {list.map((item, i) => (
+              <NominatimListItem item={item} key={item.id} />
+            ))}
+          </div>
+        </Scroll>
+      </div>
+    </Fragment>
+  );
+};
+
+const NominatimDialog = connect(mapStateToProps)(NominatimDialogUnconnected);
+
+export { NominatimDialog };

src/components/dialogs/NominatimSearchPanel.tsx

@@ -0,0 +1,37 @@
+import React, { FC, useCallback, useState } from 'react';
+import { Icon } from '../panels/Icon';
+
+interface IProps {
+  active: boolean;
+  onSearch: (search: string) => void;
+}
+
+const NominatimSearchPanel: FC<IProps> = ({ active, onSearch }) => {
+  const [search, setSearch] = useState('Колывань');
+
+  const setValue = useCallback(({ target: { value } }) => setSearch(value), [setSearch]);
+
+  const onSubmit = useCallback(event => {
+    event.preventDefault();
+    
+    if (search.length < 3) return;
+
+    onSearch(search);
+  }, [search, onSearch]);
+
+  return (
+    <form className="panel nominatim-panel active" onSubmit={onSubmit}>
+      <div className="control-bar">
+        <div className="nominatim-search-input">
+          <input type="text" placeholder="Поиск на карте" value={search} onChange={setValue} />
+        </div>
+
+        <button>
+          <Icon icon="icon-search" />
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export { NominatimSearchPanel };