Has anyone been able to use the React Leaflet Popup element to show a popup on mouseover rather than on click?
I can't seem to find a way to achieve this.
I've recently solved this problem using React Refs and the Leaflet API.
A barebones example:
import React, { Component } from 'react';
import { Circle } from 'react-leaflet';
class Foo extends Component {
render() {
const { center, radius } = this.props;
return (
<Circle
ref={circle => { this.circle = circle; }}
center={center}
radius={radius}
onMouseOver={() => {
this.circle.leafletElement.bindPopup('foo').openPopup();
}}/>
);
}
}
export default Foo;
Related
Attempting to simulate a mouse click on one button, by clicking on another button. The goal is to reuse the behavior of a single custom button throughout the page. Why is the dispatchEvent not working?
How can a click on <c-custom-button> be simulated?
parentApp.html
<template>
<div>
<c-custom-button
label="New">
</c-custom-button>
</div>
<div>
<lightning-button
label="Call New"
onclick={simulateClick}>
</lightning-button>
</div>
</template>
parentApp.js
import { LightningElement, track, api } from 'lwc';
export default class App extends LightningElement {
cButtonElement;
simulateClick() {
this.cButtonElement = this.template.querySelector('c-custom-button');
let clickEvent = new CustomEvent('click');
this.cButtonElement.dispatchEvent(clickEvent);
}
}
customButton.html
<template>
<lightning-button
label={label}
icon-name="utility:new"
onclick={handleClick}>
</lightning-button>
</template>
customButton.js
import { LightningElement, track, api } from 'lwc';
export default class App extends LightningElement {
#api label;
handleClick() {
this.label = 'CLICKED!'
}
}
Thanks to Nathan Shulman for helping with this.
Add call to child method in parentApp.js
simulateClick() {
this.cButtonElement = this.template.querySelector('c-custom-button');
this.cButtonElement.handleClick();
}
Add #api decorator to method in customButton.js
#api handleClick() {
this.label = 'CLICKED!'
}
I have my StackNavigator set up like this:
const Navigation = StackNavigator({
Splash:{screen: Splash},
Registration:{screen:Registration},
HomeScreen:{screen: HomeScreen},
Login:{screen: Login},
Lobby:{screen: Lobby},
Wifi:{screen: Wifi},
Mobile:{screen:Mobile},
}, {
mode: 'modal',
headerMode: 'none'
});
I'd like to redirect the user from the Splash page(which only contains a logo) to the Registration page after 2 seconds. I want to avoid using buttons(hence the automatic redirect) so that the user gets a brief look at the logo.
My Splash page:
import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
export default class Splash extends Component{
render(){
const logo = config.images.logo;
const {navigate} = this.props.navigation;
return(
<View style={styles.mainContainer}>
<Image
source={logo}
style={styles.logo}
/>
</View>
);
}
}
I'm not sure I would put this.navigator.redirect('Registration') because the only way I've changed pages so far was using onPress={}
try with componentDidMount function.
import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, NavigationActions, DrawerNavigator } from 'react-navigation';
const EntityAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'screen:Registration' }),
]
});
export default class Splash extends Component{
componentDidMount {
setTimeout( () => {this.load()}, 2000);
}
load = () => {
this.props.navigation.dispatch(EntityAction);
}
render(){
const logo = config.images.logo;
const {navigate} = this.props.navigation;
return(
<View style={styles.mainContainer}>
<Image
source={logo}
style={styles.logo}
/>
</View>
);
}
}
I am using react-leaflet lib.
And after rendering marker, I get an error that there is no file.
I had tried to put manually file in root folder of component which creates Marker but then I get fatal error
TypeError: options.icon.createIcon is not a function
Below is whole component code.
import React, { Component } from 'react';
import { Marker, Tooltip, Polygon } from 'react-leaflet';
import L from 'leaflet';
import './style.css';
import icon from './marker.svg';
/**
* #class ./widgets/SeatMap/components/LeafletMap/components/CategoryControl/components/ShapeLayer
*/
class ShapeLayer extends Component
{
/**
* #type {object}
*/
shapes = {};
/**
* Constructor.
*
* #param {object} props
*/
constructor (props)
{
super(props);
this.shapes = props.shapes;
}
/**
* #returns {XML}
*/
render() {
return (
<div className={'ShapeLayer'}>
{
this.shapes['texts'].map(text => {
return (
<Marker key={text['id']} position={text['coordinates']} draggable={false} opacity={0.01} icon={icon}>
<Tooltip direction={"center"} permanent className={'shape-tooltip'}>
<span>{text['text']}</span>
</Tooltip>
</Marker>
);
})
}
{
this.shapes['polygons'].map(polygon => {
return (
<Polygon key={polygon['id']} positions={polygon['coordinates']} fillColor={"white"} color={'gray'} />
);
})
}
</div>
)
}
}
export default ShapeLayer;
How can I solve this issue?
Hi you can't directly using icon like that.
React Leaflet is an "abstraction" of Leaflet so it uses the same functions.
To create custom icons you have to create a divIcon.
For a live example go there:
https://react-leaflet.js.org
I have a problem with customizing the datepicker popup dialog(For example change color of header). I can't style it by attribute style like textField by textFieldStyle. It doesn't have any class or id.
How can I do it?
The only place you can currently override this is the theme:
import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MyAppRoot from './MyAppRoot';
const muiTheme = getMuiTheme({
datePicker: {
selectColor: cyan500,
},
});
class Main extends React.Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<MyAppRoot />
</MuiThemeProvider>
);
}
}
export default Main;
If you are using the latest version of Material-UI, things changed. MuiThemeProvider and getMuiTheme are replaced by createMuiTheme and ThemeProvider respectively.
You can use like this:
import { createMuiTheme, ThemeProvider } from '#material-ui/core/styles';
Now Material-UI is using tree-shaking mechanism to avoid unnecessary bundles, so destructing is well to go.
To change the header, use something like this:
const muiTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: { backgroundColor: 'var(--themeP)' }
},
...
I am new to CycleJS and I would like to subscribe 'click' events of a child component from its parent component; but, it's not working. I'm able to subscribe events inside the child component. Is it possible to subscribe events of a child component from its parent component? If it's possible, how can I do it? Here's the parent component:
import Rx from 'rx';
import Cycle from '#cycle/core';
import CycleDOM from '#cycle/dom';
import isolate from '#cycle/isolate';
import _ from 'underscore';
import Inboxmails from './../components/inboxmails';
const {div} = CycleDOM;
const Main = (sources) => {
const inboxmails=Inboxmails({DOM: sources.DOM});
sources.DOM.select('#inbox_1')
.events('click')
.do(event => event.preventDefault())
.subscribe(event => {
console.log(event);
});
const vtree$ = Rx.Observable.of(
div('.wrapper', [
inboxmails.DOM
]));
return {
DOM: vtree$
};
};
export default (sources) => isolate(Main)(sources);
And this is the child component
import Rx from 'rx';
import Cycle from '#cycle/core';
import CycleDOM from '#cycle/dom';
import isolate from '#cycle/isolate';
const { div} = CycleDOM;
const Inboxmails = function (sources) {
const inboxmails$ = Rx.Observable.of(div([
div("#inbox_1",[
"Click here"
])])
);
return {
DOM: inboxmails$
};
};
export default (sources) => isolate(Inboxmails)(sources);
Have the child return a sink of events that the parent needs.
const Inboxmails = function (sources) {
const inboxmails$ = Rx.Observable.of(div([
div("#inbox_1",[
"Click here"
])])
);
return {
DOM: inboxmails$,
clicks: sources.DOM.select('#inbox_1').events('click')
};
};
Then the parent can use inboxmails.clicks.
However, in Cycle.js there should never be any subscribe in your code (unless it's for debugging). Subscribe calls should only be in drivers.