Jelajahi Sumber

feat[pc-components]: DageMap新增一些属性

chenlei 1 bulan lalu
induk
melakukan
3b329ebe00

+ 52 - 0
packages/docs/docs/components/Map/index.md

@@ -98,6 +98,58 @@ const Demo = () => {
 export default Demo;
 ```
 
+### 隐藏下拉搜索
+
+不传入 `inputTipsApi` 则自动隐藏下拉搜索
+
+### 自定义扩展
+
+```tsx
+import React, { useCallback, useState, useEffect } from "react";
+import { DageMap, DageMapMarkerProps } from "@dage/pc-components";
+import { Marker } from "@amap/amap-react";
+
+const Demo = () => {
+  const [loaded, setLoaded] = useState(false);
+  const [position, setPosition] = useState([121.473581, 31.230536]);
+  const [markerProps, setMarkerProps] = useState<DageMapMarkerProps>({});
+
+  useEffect(() => {
+    if (!loaded) return;
+
+    setMarkerProps({
+      label: {
+        content: "可拖拽坐标",
+        direction: "center",
+        offset: new window.AMap.Pixel(0, -30),
+      },
+    });
+  }, [loaded]);
+
+  return (
+    <DageMap
+      longitude={position[0]}
+      latitude={position[1]}
+      markerProps={markerProps}
+      onMapComplete={() => setLoaded(true)}
+    >
+      {loaded && (
+        <Marker
+          position={[121.473, 31.23]}
+          label={{
+            content: "其它坐标",
+            direction: "center",
+            offset: new window.AMap.Pixel(0, -30),
+          }}
+        />
+      )}
+    </DageMap>
+  );
+};
+
+export default Demo;
+```
+
 ## API
 
 <API hideTitle exports='["DageMap"]' src='@dage/pc-components/index.d.ts'></API>

+ 6 - 0
packages/docs/docs/log/PC-COMPONENTS_CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/pc-components
 
+## 1.3.13
+
+### Patch Changes
+
+- `DageMap` 新增 `markerProps` 和 `children` 属性
+
 ## 1.3.12
 
 ### Patch Changes

+ 1 - 1
packages/hooks/tsconfig.build.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/usecreate.ts","./src/usepreloader.ts"],"version":"5.8.2"}
+{"root":["./src/index.ts","./src/usecreate.ts","./src/usepreloader.ts"],"version":"5.8.3"}

File diff ditekan karena terlalu besar
+ 1 - 1
packages/krpano/tsconfig.build.tsbuildinfo


+ 6 - 0
packages/pc-components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @dage/pc-components
 
+## 1.3.13
+
+### Patch Changes
+
+- `DageMap` 新增 `markerProps` 和 `children` 属性
+
 ## 1.3.12
 
 ### Patch Changes

+ 1 - 1
packages/pc-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dage/pc-components",
-  "version": "1.3.12",
+  "version": "1.3.13",
   "description": "PC 端组件库",
   "module": "dist/index.js",
   "main": "dist/index.js",

+ 26 - 17
packages/pc-components/src/components/DageMap/index.tsx

@@ -29,6 +29,8 @@ export const DageMap = forwardRef<DageMapMethods, DageMapProps>(
       onlyCityArea,
       inputTipsApi,
       outCityAreaMessage,
+      markerProps,
+      children,
       onAddressChange,
       onLngLatChange,
       onMapComplete,
@@ -66,6 +68,8 @@ export const DageMap = forwardRef<DageMapMethods, DageMapProps>(
 
     const handleSearch = useCallback(
       debounce(async (value: string) => {
+        if (!inputTipsApi) return;
+
         if (!value) {
           setOptions([]);
           return;
@@ -201,23 +205,25 @@ export const DageMap = forwardRef<DageMapMethods, DageMapProps>(
 
     return (
       <>
-        <div>
-          <AutoComplete
-            allowClear
-            disabled={disabled}
-            value={address}
-            style={{ width: 450 }}
-            options={options.map((i) => ({
-              ...i,
-              value: i.name,
-            }))}
-            onSearch={handleSearch}
-            onSelect={handleSelect}
-            onChange={handleAutoCompleteChange}
-          >
-            <Input allowClear placeholder="请输入详细描述" />
-          </AutoComplete>
-        </div>
+        {Boolean(inputTipsApi) && (
+          <div>
+            <AutoComplete
+              allowClear
+              disabled={disabled}
+              value={address}
+              style={{ width: 450 }}
+              options={options.map((i) => ({
+                ...i,
+                value: i.name,
+              }))}
+              onSearch={handleSearch}
+              onSelect={handleSelect}
+              onChange={handleAutoCompleteChange}
+            >
+              <Input allowClear placeholder="请输入详细描述" />
+            </AutoComplete>
+          </div>
+        )}
 
         <Space style={{ margin: "15px 0" }}>
           <Input
@@ -251,6 +257,7 @@ export const DageMap = forwardRef<DageMapMethods, DageMapProps>(
             {loaded && position ? (
               <>
                 <Marker
+                  {...markerProps}
                   position={position}
                   draggable={!disabled}
                   onDragging={handleMarker}
@@ -264,6 +271,8 @@ export const DageMap = forwardRef<DageMapMethods, DageMapProps>(
                     onError={handleOutCityAreaError}
                   />
                 )}
+
+                {children}
               </>
             ) : (
               <></>

+ 15 - 2
packages/pc-components/src/components/DageMap/types.ts

@@ -1,14 +1,26 @@
+import { MarkerProps } from "@amap/amap-react/lib/Marker";
+import { ReactNode } from "react";
+
 export interface DageMapMethods {
   mapRef: AMap.Map_2 | undefined;
 }
 
+export type DageMapMarkerProps = Omit<
+  MarkerProps,
+  "position" | "draggable" | "onDragging"
+>;
+
 export interface DageMapProps {
   /** 纬度 */
   latitude: number;
   /** 经度 */
   longitude: number;
+  /**
+   * 当前经纬度的marker属性
+   */
+  markerProps?: DageMapMarkerProps;
   /** 地址 */
-  address: string;
+  address?: string;
   /**
    * 是否禁用
    * @default false
@@ -29,7 +41,8 @@ export interface DageMapProps {
   /**
    * 输入提示调用的接口地址
    */
-  inputTipsApi: string;
+  inputTipsApi?: string;
+  children?: ReactNode;
   /**
    * 地址发生改变回调
    */

+ 1 - 1
packages/service/tsconfig.build.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/header.ts","./src/compose.ts","./src/error.ts","./src/index.ts","./src/replace.ts","./src/request.ts","./src/types.ts","./src/utils.ts"],"version":"5.8.2"}
+{"root":["./src/header.ts","./src/compose.ts","./src/error.ts","./src/index.ts","./src/replace.ts","./src/request.ts","./src/types.ts","./src/utils.ts"],"version":"5.8.3"}

+ 1 - 1
packages/utils/tsconfig.build.commonjs.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/base64.ts","./src/date.ts","./src/eventbus.ts","./src/image.ts","./src/index.ts","./src/noop.ts","./src/number.ts","./src/query-string.ts","./src/string.ts","./src/validform.ts","./src/exportexcel/index.ts","./src/exportexcel/types.ts","./src/exportexcel/utils.ts"],"version":"5.8.2"}
+{"root":["./src/base64.ts","./src/date.ts","./src/eventbus.ts","./src/image.ts","./src/index.ts","./src/noop.ts","./src/number.ts","./src/query-string.ts","./src/string.ts","./src/validform.ts","./src/exportexcel/index.ts","./src/exportexcel/types.ts","./src/exportexcel/utils.ts"],"version":"5.8.3"}

+ 1 - 1
packages/utils/tsconfig.build.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/base64.ts","./src/date.ts","./src/eventbus.ts","./src/image.ts","./src/index.ts","./src/noop.ts","./src/number.ts","./src/query-string.ts","./src/string.ts","./src/validform.ts","./src/exportexcel/index.ts","./src/exportexcel/types.ts","./src/exportexcel/utils.ts"],"version":"5.8.2"}
+{"root":["./src/base64.ts","./src/date.ts","./src/eventbus.ts","./src/image.ts","./src/index.ts","./src/noop.ts","./src/number.ts","./src/query-string.ts","./src/string.ts","./src/validform.ts","./src/exportexcel/index.ts","./src/exportexcel/types.ts","./src/exportexcel/utils.ts"],"version":"5.8.3"}