/
suhushinas
/
renderless-components-examples
Обзор
Документация
Войти
/
suhushinas
/
renderless-components-examples
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/modules/example-socket/components/ExampleSocketMap.jsx
60 строк
2 KB
SuhushinAS
fix
25 апр 2019, 16:55
25 апр 2019, 16:55
6ad1be3
Код
Авторство
О чём код?
import Centrifuge from 'modules/centrifuge/components/Centrifuge.jsx'; import Subscribe from 'modules/centrifuge/components/Subscribe.jsx'; import Map from 'modules/map/components/Map.jsx'; import Marker from 'modules/map/components/Marker.jsx'; import TileLayer from 'modules/map/components/TileLayer.jsx'; import View from 'modules/map/components/View.jsx'; import React from 'react'; class ExampleSocketMap extends React.Component { state = { isFollow: false, }; eventData = { message: (message) => { switch (message.data.type) { case 'setPoint': this.setState({point: message.data.point}); break; case 'setView': this.setState((state) => ({ ...state, isFollow: !state.isFollow, })); break; default: break; } }, }; get geoJSON() { const {point} = this.state; if (point) { return { coordinates: point, type: 'Point', }; } return undefined; } render() { const {connect, geoJSON, tile} = this.props; const {isFollow, point} = this.state; const view = isFollow ? this.geoJSON : geoJSON.Path; return ( <Centrifuge {...connect}> <Map> <TileLayer params={tile.params} url={tile.url} /> <View view={view} /> <Marker point={point} /> </Map> <Subscribe channel="Userstory+DevPRO" eventData={this.eventData} /> </Centrifuge> ); } } export default ExampleSocketMap;