From 849fdd61f47c10c75c0a9988f74b62dfb15c352f Mon Sep 17 00:00:00 2001 From: Vicky Bansal Date: Wed, 20 May 2020 11:57:02 +0000 Subject: [PATCH] pick my location icon changed with state --- .../icons/control/pick-location-initial.svg | 3 + .../icons/control/pick-location-onclick.svg | 3 + .../icons/control/pick-location-selected.svg | 3 + .../designSystems/appsmith/MapComponent.tsx | 29 +------ .../designSystems/appsmith/PickMyLocation.tsx | 76 +++++++++++++++++++ app/client/src/icons/ControlIcons.tsx | 6 +- 6 files changed, 91 insertions(+), 29 deletions(-) create mode 100644 app/client/src/assets/icons/control/pick-location-initial.svg create mode 100644 app/client/src/assets/icons/control/pick-location-onclick.svg create mode 100644 app/client/src/assets/icons/control/pick-location-selected.svg create mode 100644 app/client/src/components/designSystems/appsmith/PickMyLocation.tsx diff --git a/app/client/src/assets/icons/control/pick-location-initial.svg b/app/client/src/assets/icons/control/pick-location-initial.svg new file mode 100644 index 0000000000..2572dd77b9 --- /dev/null +++ b/app/client/src/assets/icons/control/pick-location-initial.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/assets/icons/control/pick-location-onclick.svg b/app/client/src/assets/icons/control/pick-location-onclick.svg new file mode 100644 index 0000000000..f8fb48fbe5 --- /dev/null +++ b/app/client/src/assets/icons/control/pick-location-onclick.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/assets/icons/control/pick-location-selected.svg b/app/client/src/assets/icons/control/pick-location-selected.svg new file mode 100644 index 0000000000..29d9c89835 --- /dev/null +++ b/app/client/src/assets/icons/control/pick-location-selected.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/components/designSystems/appsmith/MapComponent.tsx b/app/client/src/components/designSystems/appsmith/MapComponent.tsx index 94259fbc81..b74f121887 100644 --- a/app/client/src/components/designSystems/appsmith/MapComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/MapComponent.tsx @@ -7,7 +7,7 @@ import { } from "react-google-maps"; import SearchBox from "react-google-maps/lib/components/places/SearchBox"; import { MarkerProps } from "widgets/MapWidget"; -import { ControlIcons } from "icons/ControlIcons"; +import PickMyLocation from "./PickMyLocation"; import styled, { AnyStyledComponent } from "styled-components"; interface MapComponentProps { @@ -67,17 +67,10 @@ type PickMyLocationProps = { const PickMyLocationWrapper = styled.div` position: absolute; bottom: ${props => (props.allowZoom ? 110 : 20)}px; - right: -95px; + right: -90px; width: 140px; `; -const StyledPickMyLocationIcon = styled( - ControlIcons.PICK_MY_LOCATION_CONTROL as AnyStyledComponent, -)` - position: relative; - cursor: pointer; -`; - const MyMapComponent = withScriptjs( withGoogleMap((props: any) => ( { - props.getUserLocation(); - e.stopPropagation(); - }} title="Pick My Location" allowZoom={props.allowZoom} > - + )} @@ -165,17 +154,6 @@ class MapComponent extends React.Component { } }; - getUserLocation = () => { - if ("geolocation" in navigator) { - return navigator.geolocation.getCurrentPosition(data => { - const { - coords: { latitude: lat, longitude: long }, - } = data; - this.props.updateCenter(lat, long); - }); - } - }; - render() { const zoom = Math.floor(this.props.zoomLevel / 5); return ( @@ -189,7 +167,6 @@ class MapComponent extends React.Component { zoom={zoom} onPlacesChanged={this.onPlacesChanged} onSearchBoxMounted={this.onSearchBoxMounted} - getUserLocation={this.getUserLocation} /> ); diff --git a/app/client/src/components/designSystems/appsmith/PickMyLocation.tsx b/app/client/src/components/designSystems/appsmith/PickMyLocation.tsx new file mode 100644 index 0000000000..6a89962b38 --- /dev/null +++ b/app/client/src/components/designSystems/appsmith/PickMyLocation.tsx @@ -0,0 +1,76 @@ +import React from "react"; +import { ControlIcons } from "icons/ControlIcons"; +import styled, { AnyStyledComponent } from "styled-components"; + +const StyledPickMyLocationSelectedIcon = styled( + ControlIcons.PICK_MY_LOCATION_SELECTED_CONTROL as AnyStyledComponent, +)` + position: relative; + cursor: pointer; + height: 28px; + width: 28px; +`; + +const PickMyLocationIconWrapper = styled.div` + background: white; + width: 40px; + height: 40px; + border-radius: 2px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; +`; + +interface PickMyLocationProps { + updateCenter: (lat: number, long: number) => void; +} + +interface PickMyLocationState { + clicked: boolean; + selected: boolean; +} +export default class PickMyLocation extends React.Component< + PickMyLocationProps, + PickMyLocationState +> { + constructor(props: PickMyLocationProps) { + super(props); + this.state = { + selected: false, + clicked: false, + }; + } + getUserLocation = () => { + if ("geolocation" in navigator) { + return navigator.geolocation.getCurrentPosition(data => { + const { + coords: { latitude: lat, longitude: long }, + } = data; + this.setState({ selected: true }); + this.props.updateCenter(lat, long); + }); + } + }; + render() { + return ( + + { + if (!(this.state.clicked && this.state.selected)) { + this.setState({ clicked: true }); + this.getUserLocation(); + } + }} + /> + + ); + } +} diff --git a/app/client/src/icons/ControlIcons.tsx b/app/client/src/icons/ControlIcons.tsx index 149c9d22d7..6acd0f9e95 100644 --- a/app/client/src/icons/ControlIcons.tsx +++ b/app/client/src/icons/ControlIcons.tsx @@ -12,7 +12,7 @@ import { ReactComponent as DecreaseIcon } from "assets/icons/control/decrease.sv import { ReactComponent as DraggableIcon } from "assets/icons/control/draggable.svg"; import { ReactComponent as CloseIcon } from "assets/icons/control/close.svg"; -import { ReactComponent as PickMyLocationIcon } from "assets/icons/control/pick-my-location.svg"; +import { ReactComponent as PickMyLocationSelectedIcon } from "assets/icons/control/pick-location-selected.svg"; /* eslint-disable react/display-name */ export const ControlIcons: { @@ -73,9 +73,9 @@ export const ControlIcons: { ), - PICK_MY_LOCATION_CONTROL: (props: IconProps) => ( + PICK_MY_LOCATION_SELECTED_CONTROL: (props: IconProps) => ( - + ), };