[google-maps-input] Show change indicators for map

sanity-io · Oct 6, 2020 · c6798ac · c6798ac
1 parent 16e7bb7
commit c6798ac
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 24 deletions.
diff --git a/packages/@sanity/google-maps-input/package.json b/packages/@sanity/google-maps-input/package.json
@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "@sanity/react-hooks": "1.150.8",
+    "classnames": "^2.2.5",
     "rxjs": "^6.5.3"
   },
   "devDependencies": {

diff --git a/packages/@sanity/google-maps-input/src/input/GeopointInput.css b/packages/@sanity/google-maps-input/src/input/GeopointInput.css
@@ -19,10 +19,24 @@
 }
 
 .map {
-  /*
-    This is a container for the map input, to avoid fieldset's CSS grid
-    to apply grid gap spacing to the map input's children.
-  */
+  position: relative;
+  border-radius: var(--input-border-radius);
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: inset 0 0 0 1px var(--hairline-color);
+    pointer-events: none;
+  }
+
+  @nest &.focused {
+    box-shadow: 0 0 0 1px var(--component-bg), 0 0 0 3px var(--brand-primary);
+  }
 }
 
 .functions {

diff --git a/packages/@sanity/google-maps-input/src/input/GeopointInput.tsx b/packages/@sanity/google-maps-input/src/input/GeopointInput.tsx
@@ -1,12 +1,15 @@
 import React from 'react'
+import classNames from 'classnames'
 import config from 'config:@sanity/google-maps-input'
 import Button from 'part:@sanity/components/buttons/default'
 import Dialog from 'part:@sanity/components/dialogs/default'
-import FormField from 'part:@sanity/components/formfields/default'
+import Fieldset from 'part:@sanity/components/fieldsets/default'
 import {PatchEvent, set, setIfMissing, unset} from 'part:@sanity/form-builder/patch-event'
 import ButtonGrid from 'part:@sanity/components/buttons/button-grid'
 import EditIcon from 'part:@sanity/base/edit-icon'
 import TrashIcon from 'part:@sanity/base/trash-icon'
+import {ChangeIndicatorCompareValueProvider} from '@sanity/base/lib/change-indicators/ChangeIndicator'
+import {ChangeIndicator} from '@sanity/base/lib/change-indicators'
 import {GoogleMapsLoadProxy} from '../loader/GoogleMapsLoadProxy'
 import {Geopoint, GeopointSchemaType} from '../types'
 import {GeopointSelect} from './GeopointSelect'
@@ -34,11 +37,13 @@ interface InputProps {
   markers: unknown[]
   level?: number
   value?: Geopoint
+  compareValue?: Geopoint
   type: GeopointSchemaType
   readOnly?: boolean
   onFocus: (path: unknown[]) => void
   onBlur: () => void
   onChange: (patchEvent: unknown) => void
+  presence: unknown[]
 }
 
 // @todo
@@ -49,6 +54,7 @@ type Focusable = any
 
 interface InputState {
   modalOpen: boolean
+  hasFocus: boolean
 }
 
 class GeopointInput extends React.PureComponent<InputProps, InputState> {
@@ -62,7 +68,8 @@ class GeopointInput extends React.PureComponent<InputProps, InputState> {
     super(props)
 
     this.state = {
-      modalOpen: false
+      modalOpen: false,
+      hasFocus: false
     }
   }
 
@@ -76,6 +83,16 @@ class GeopointInput extends React.PureComponent<InputProps, InputState> {
     }
   }
 
+  handleFocus = event => {
+    this.setState({hasFocus: true})
+    this.props.onFocus(event)
+  }
+
+  handleBlur = () => {
+    this.setState({hasFocus: false})
+    this.props.onBlur()
+  }
+
   handleToggleModal = () => {
     const {onFocus, onBlur} = this.props
     this.setState(
@@ -113,8 +130,8 @@ class GeopointInput extends React.PureComponent<InputProps, InputState> {
   }
 
   render() {
-    const {value, readOnly, type, markers, level, onFocus, onBlur} = this.props
-    const {modalOpen} = this.state
+    const {value, compareValue, readOnly, type, markers, level, presence} = this.props
+    const {modalOpen, hasFocus} = this.state
 
     if (!config || !config.apiKey) {
       return (
@@ -139,24 +156,34 @@ class GeopointInput extends React.PureComponent<InputProps, InputState> {
     }
 
     return (
-      <FormField
-        markers={markers}
+      <Fieldset
         level={level}
-        label={type.title}
+        legend={type.title}
         description={type.description}
-        className={styles.root}
-        onFocus={onFocus}
-        onBlur={onBlur}
+        markers={markers}
+        presence={presence}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        useChangeIndicator={false}
       >
-        <>
+        <div>
           {value && (
-            <div className={styles.map}>
-              <img
-                className={styles.previewImage}
-                src={getStaticImageUrl(value)}
-                alt="Map location"
-              />
-            </div>
+            <ChangeIndicatorCompareValueProvider value={value} compareValue={compareValue}>
+              <ChangeIndicator
+                className={classNames(
+                  styles.map,
+                  readOnly && styles.readOnly,
+                  hasFocus && styles.focused
+                )}
+                compareDeep
+              >
+                <img
+                  className={styles.previewImage}
+                  src={getStaticImageUrl(value)}
+                  alt="Map location"
+                />
+              </ChangeIndicator>
+            </ChangeIndicatorCompareValueProvider>
           )}
 
           <div className={styles.functions}>
@@ -202,8 +229,8 @@ class GeopointInput extends React.PureComponent<InputProps, InputState> {
               </div>
             </Dialog>
           )}
-        </>
-      </FormField>
+        </div>
+      </Fieldset>
     )
   }
 }