optional props

mappable-world · Apr 25, 2024 · fa54cee · fa54cee
1 parent b92d1c5
commit fa54cee
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/example/default-markers/react/index.tsx b/example/default-markers/react/index.tsx
@@ -27,7 +27,7 @@ async function main() {
             <MMap location={location} ref={(x) => (map = x)}>
                 <MMapDefaultSchemeLayer />
                 <MMapDefaultFeaturesLayer />
-                <MMapDefaultMarker name="building" color="bluebell" coordinates={MARKER_LOCATION} />
+                <MMapDefaultMarker iconName="building" color="bluebell" coordinates={MARKER_LOCATION} />
             </MMap>
         );
     }

diff --git a/example/default-markers/vanilla/index.ts b/example/default-markers/vanilla/index.ts
@@ -13,6 +13,10 @@ async function main() {
     map.addChild(new MMapDefaultSchemeLayer({}));
     map.addChild(new MMapDefaultFeaturesLayer({}));
 
-    const defaultMarker = new MMapDefaultMarker({name: 'building', color: 'bluebell', coordinates: MARKER_LOCATION});
+    const defaultMarker = new MMapDefaultMarker({
+        iconName: 'building',
+        color: 'bluebell',
+        coordinates: MARKER_LOCATION
+    });
     map.addChild(defaultMarker);
 }
diff --git a/example/default-markers/vue/index.ts b/example/default-markers/vue/index.ts
@@ -28,7 +28,7 @@ async function main() {
             <MMap :location="LOCATION" :ref="refMap">
                 <MMapDefaultSchemeLayer />
                 <MMapDefaultFeaturesLayer />
-                <MMapDefaultMarker name="building" color="bluebell" :coordinates="MARKER_LOCATION"/>
+                <MMapDefaultMarker iconName="building" color="bluebell" :coordinates="MARKER_LOCATION"/>
             </MMap>`
     });
     app.mount('#app');

diff --git a/src/MMapDefaultMarker/index.ts b/src/MMapDefaultMarker/index.ts
@@ -4,11 +4,16 @@ import './index.css';
 import pin from './pin.svg';
 
 export type MMapDefaultMarkerProps = MMapMarkerProps & {
-    name: IconName;
-    color: IconColor;
+    iconName?: IconName;
+    color?: IconColor;
 };
 
-export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMarkerProps> {
+const defaultProps = Object.freeze({color: 'darkgray'});
+type DefaultProps = typeof defaultProps;
+
+export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMarkerProps, DefaultProps> {
+    static defaultProps = defaultProps;
+
     private _marker: MMapMarker;
     private _markerElement: HTMLElement;
     private _pin: HTMLElement;
@@ -19,6 +24,10 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         super(props);
     }
 
+    protected __implGetDefaultProps(): DefaultProps {
+        return MMapDefaultMarker.defaultProps;
+    }
+
     protected _onAttach(): void {
         this._color = iconColors[this._props.color];
         this._markerElement = document.createElement('mappable');
@@ -31,7 +40,9 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         this._pin.innerHTML = pin;
 
         this._icon.classList.add('mappable--icon');
-        this._icon.innerHTML = icons[this._props.name].normal;
+        if (this._props.iconName !== undefined) {
+            this._icon.innerHTML = icons[this._props.iconName].normal;
+        }
 
         this._pin.appendChild(this._icon);
         this._markerElement.appendChild(this._pin);
@@ -46,9 +57,9 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
             this._color = iconColors[this._props.color];
             this._updateTheme();
         }
-        if (propsDiff.name !== undefined) {
-            this._icon.innerHTML = icons[propsDiff.name].normal;
-        }
+
+        this._icon.innerHTML = this._props.iconName !== undefined ? icons[this._props.iconName].normal : '';
+
         this._marker.update(this._props);
     }