feat(map): add className、containerStyle

.storybook/manager.ts

@@ -2,7 +2,7 @@ import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming/create';
 
 const theme = create({
-  base: 'light',
+  base: 'dark',
 
   // Brand assets
   brandTitle: 'ReactMaoboxGl',
@@ -11,6 +11,6 @@ const theme = create({
 
 addons.setConfig({
   theme,
-  showPanel: true, // show addons panel by default
-  panelPosition: 'right', // position addons panel on the right by default
+  showPanel: true,
+  panelPosition: 'right',
 });

src/map/constant.ts

@@ -1,6 +1,13 @@
+import React from 'react';
 import type { EventMapping } from './types';
 import type { KeysOfUnion } from '../types';
 
+export const defaultContainerStyle: React.CSSProperties = {
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+};
+
 export const MapEventMap: EventMapping = {
   onError: 'error',
 

src/map/map.css

@@ -1,4 +1,5 @@
 a.mapboxgl-ctrl-logo,
+.mapboxgl-ctrl.mapboxgl-ctrl-attrib,
 .mapboxgl-ctrl-attrib.mapboxgl-compact {
   display: none;
 }

src/map/map.tsx

@@ -3,7 +3,7 @@ import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 're
 import { MapContext } from './context';
 import { useReact } from '@/hooks/useReact';
 import { allProps, setterMap, converterMap } from './config';
-import { MapEventMap, MapEventList } from './constant';
+import { defaultContainerStyle, MapEventMap, MapEventList } from './constant';
 import { useEvents } from '@/hooks/useEvents';
 
 import 'mapbox-gl/dist/mapbox-gl.css';
@@ -16,7 +16,7 @@ Mapbox.accessToken =
   'pk.eyJ1IjoienQyMDIzMTEwOSIsImEiOiJjbG9xdGgxcDMwbDAyMmpwODVrNG5seXphIn0.1xKSk8Ll-80kkEwtzfLWhw';
 
 export const Map = forwardRef<Mapbox.Map, MapProps>((props, ref) => {
-  const { loading, children } = props;
+  const { className, loading, containerStyle, children } = props;
   const containerRef = useRef<HTMLDivElement>(null);
   const [mapInstance, setMapInstance] = useState<Mapbox.Map>();
 
@@ -72,7 +72,14 @@ export const Map = forwardRef<Mapbox.Map, MapProps>((props, ref) => {
   };
 
   return (
-    <div ref={containerRef} style={{ width: 500, height: 500 }}>
+    <div
+      ref={containerRef}
+      style={{
+        ...defaultContainerStyle,
+        ...containerStyle,
+      }}
+      className={className}
+    >
       {!mapInstance && loading}
       {mapInstance && <MapContext.Provider value={contextValue}>{children}</MapContext.Provider>}
     </div>

src/map/types.ts

@@ -72,6 +72,9 @@ export type MapboxOptionKeys = KeysOfUnion<MapboxOptions>;
 export interface MapProps extends Omit<MapOptions, 'container'>, Partial<MapEvents> {
   /** 地图加载前的加载效果 */
   loading?: React.ReactNode;
+  /** 额外的样式类 */
   className?: string;
+  /** 地图挂载节点样式 */
+  containerStyle?: React.CSSProperties;
   children?: React.ReactNode;
 }

stories/Map.stories.ts

@@ -6,10 +6,15 @@ const meta = {
   title: '组件/Map',
   component: Map,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
   },
   tags: ['autodocs'],
   argTypes: {},
+  args: {
+    containerStyle: {
+      height: 500,
+    },
+  },
 } satisfies Meta<typeof Map>;
 
 export default meta;