mirror of
https://github.com/google-map-react/google-map-react.git
synced 2025-12-08 18:26:32 +00:00
Add className to marker holder
Take the className from `$markerHolderClassName` and add it to the marker holder.
This commit is contained in:
parent
7346480e97
commit
63faae5435
@ -247,7 +247,11 @@ export default class GoogleMapMarkers extends Component {
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={childKey} style={{...style, ...stylePtPos}}>
|
||||
<div
|
||||
key={childKey}
|
||||
style={{...style, ...stylePtPos}}
|
||||
className={child.props.$markerHolderClassName}
|
||||
>
|
||||
{React.cloneElement(child, {
|
||||
$hover: childKey === this.state.hoverKey,
|
||||
$getDimensions: this._getDimensions,
|
||||
|
||||
@ -175,4 +175,86 @@ describe('Components', () => {
|
||||
key: API_KEY,
|
||||
});
|
||||
});
|
||||
|
||||
it('Should add a className to the marker from $markerHolderClassName', () => {
|
||||
const markerHolderClassName = 'marker-holder-class-name';
|
||||
|
||||
class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
|
||||
static propTypes = {
|
||||
center: PropTypes.array,
|
||||
zoom: PropTypes.number,
|
||||
greatPlaceCoords: PropTypes.any,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
center: [59.938043, 30.337157],
|
||||
zoom: 9,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<GoogleMap
|
||||
center={this.props.center}
|
||||
zoom={this.props.zoom}
|
||||
>
|
||||
<div lat={59.955413} lng={30.337844} $markerHolderClassName={markerHolderClassName} />
|
||||
</GoogleMap>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapHolder = TestUtils.renderIntoDocument(
|
||||
<MapHolder />
|
||||
);
|
||||
|
||||
const marker = TestUtils
|
||||
.findRenderedDOMComponentWithClass(mapHolder, 'marker-holder-class-name');
|
||||
expect(marker.className).toEqual('marker-holder-class-name');
|
||||
expect(marker.style.left).toEqual('0.250129066669615px');
|
||||
expect(marker.style.top).toEqual('-12.62811732746195px');
|
||||
});
|
||||
|
||||
it('Should not add a className to the marker if $markerHolderClassName is not present', () => {
|
||||
class MapHolder extends Component { // eslint-disable-line react/no-multi-comp
|
||||
static propTypes = {
|
||||
center: PropTypes.array,
|
||||
zoom: PropTypes.number,
|
||||
greatPlaceCoords: PropTypes.any,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
center: [59.938043, 30.337157],
|
||||
zoom: 9,
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<GoogleMap
|
||||
center={this.props.center}
|
||||
zoom={this.props.zoom}
|
||||
>
|
||||
<div className="marker-class-name" lat={59.955413} lng={30.337844}/>
|
||||
</GoogleMap>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapHolder = TestUtils.renderIntoDocument(
|
||||
<MapHolder />
|
||||
);
|
||||
|
||||
const marker = TestUtils
|
||||
.findRenderedDOMComponentWithClass(mapHolder, 'marker-class-name');
|
||||
expect(marker.parentNode.className).toNotExist();
|
||||
expect(marker.parentNode.style.left).toEqual('0.250129066669615px');
|
||||
expect(marker.parentNode.style.top).toEqual('-12.62811732746195px');
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user