diff --git a/packages/bezier-curve/README.md b/packages/bezier-curve/README.md index 009b6f4c..c5e418c7 100644 --- a/packages/bezier-curve/README.md +++ b/packages/bezier-curve/README.md @@ -46,7 +46,7 @@ const Example = () => {
` / `Array>` | - | ### 事件 diff --git a/packages/bezier-curve/src/index.tsx b/packages/bezier-curve/src/index.tsx index ecd27691..2943df45 100644 --- a/packages/bezier-curve/src/index.tsx +++ b/packages/bezier-curve/src/index.tsx @@ -5,8 +5,10 @@ import { useBezierCurve } from './useBezierCurve'; export * from './useBezierCurve'; export interface BezierCurveProps extends OverlayProps, AMap.BezierCurveEvents, AMap.BezierCurveOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; } export const BezierCurve = React.forwardRef((props, ref) => { const { bezierCurve } = useBezierCurve(props); diff --git a/packages/bezier-curve/src/useBezierCurve.tsx b/packages/bezier-curve/src/useBezierCurve.tsx index 77fc47ce..fbef2329 100644 --- a/packages/bezier-curve/src/useBezierCurve.tsx +++ b/packages/bezier-curve/src/useBezierCurve.tsx @@ -5,7 +5,7 @@ import { BezierCurveProps } from '.'; export interface UseBezierCurve extends BezierCurveProps {} export const useBezierCurve = (props = {} as UseBezierCurve) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); const [bezierCurve, setBezierCurve] = useState(); useEffect(() => { @@ -27,7 +27,7 @@ export const useBezierCurve = (props = {} as UseBezierCurve) => { } }, [map]); - useVisiable(bezierCurve!, visiable); + useVisiable(bezierCurve!, visible ?? visiable); useSettingProperties(bezierCurve!, props, [ 'Options', 'Path', diff --git a/packages/circle-marker/README.md b/packages/circle-marker/README.md index 9587d6ce..3ee84809 100644 --- a/packages/circle-marker/README.md +++ b/packages/circle-marker/README.md @@ -33,7 +33,7 @@ const Example = () => { { /> { /> { /> { /> ((props, ref) => { const { circleMarker } = useCircleMarker(props); diff --git a/packages/circle-marker/src/useCircleMarker.tsx b/packages/circle-marker/src/useCircleMarker.tsx index 8031dcc1..7385be28 100644 --- a/packages/circle-marker/src/useCircleMarker.tsx +++ b/packages/circle-marker/src/useCircleMarker.tsx @@ -5,7 +5,7 @@ import { CircleMarkerProps } from '.'; export interface UseCircleMarker extends CircleMarkerProps {} export const useCircleMarker = (props = {} as UseCircleMarker) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); const [circleMarker, setCircleMarker] = useState(); useEffect(() => { @@ -28,7 +28,7 @@ export const useCircleMarker = (props = {} as UseCircleMarker) => { } }, [map]); - useVisiable(circleMarker!, visiable); + useVisiable(circleMarker!, visible ?? visiable); useSettingProperties(circleMarker!, props, [ 'Center', 'Raius', diff --git a/packages/circle/README.md b/packages/circle/README.md index 9d30a9b2..22272ac1 100644 --- a/packages/circle/README.md +++ b/packages/circle/README.md @@ -30,7 +30,7 @@ const Example = () => {
((props, ref) => { const { circle } = useCircle(props); diff --git a/packages/circle/src/useCircle.tsx b/packages/circle/src/useCircle.tsx index 4a15dc26..36b0ac30 100644 --- a/packages/circle/src/useCircle.tsx +++ b/packages/circle/src/useCircle.tsx @@ -5,7 +5,7 @@ import { CircleProps } from '.'; export interface UseCircle extends CircleProps {} export const useCircle = (props = {} as UseCircle) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); const [circle, setCircle] = useState(); useLayoutEffect(() => { @@ -20,7 +20,7 @@ export const useCircle = (props = {} as UseCircle) => { } }, [map]); - useVisiable(circle!, visiable); + useVisiable(circle!, visible ?? visiable); useSettingProperties(circle!, props, ['Center', 'Raius', 'Options', 'ExtData']); useEventProperties(circle!, props, [ 'onHide', diff --git a/packages/control-bar-control/README.md b/packages/control-bar-control/README.md index c03efed3..0a48b39d 100644 --- a/packages/control-bar-control/README.md +++ b/packages/control-bar-control/README.md @@ -30,13 +30,13 @@ const Demo = () => {
{show && ( @@ -60,6 +60,6 @@ export default Mount; | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | position | 控件停靠位置 `{ top: 5; left: 5; right: 5; bottom: 5 }` 或者 'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角。 | `string| object` | - | | offset | 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为 `AMap.Pixel(10,10)` | `[number, number]` | - | diff --git a/packages/control-bar-control/src/index.tsx b/packages/control-bar-control/src/index.tsx index ea0d0445..375d9c55 100644 --- a/packages/control-bar-control/src/index.tsx +++ b/packages/control-bar-control/src/index.tsx @@ -5,8 +5,10 @@ import { useControlBarControl } from './useControlBarControl'; export * from './useControlBarControl'; export interface ControlBarControlProps extends OverlayProps, AMap.ControlBarOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; } export const ControlBarControl = React.forwardRef((props, ref) => { diff --git a/packages/control-bar-control/src/useControlBarControl.tsx b/packages/control-bar-control/src/useControlBarControl.tsx index 53baa41d..80a30d89 100644 --- a/packages/control-bar-control/src/useControlBarControl.tsx +++ b/packages/control-bar-control/src/useControlBarControl.tsx @@ -6,7 +6,7 @@ import { ControlBarControlProps } from '.'; export interface UseControlBarControl extends ControlBarControlProps {} export function useControlBarControl(props = {} as UseControlBarControl) { - const { position, visiable, offset } = props; + const { position, visiable, visible, offset } = props; const [controlBarControl, setControlBarControl] = useState(); const { map } = useMapContext(); useEffect(() => { @@ -28,7 +28,7 @@ export function useControlBarControl(props = {} as UseControlBarControl) { } }, [map]); - useVisiable(controlBarControl!, visiable); + useVisiable(controlBarControl!, visible ?? visiable); return { controlBarControl, setControlBarControl, diff --git a/packages/ellipse/README.md b/packages/ellipse/README.md index 107cd540..00b2e23f 100644 --- a/packages/ellipse/README.md +++ b/packages/ellipse/README.md @@ -29,7 +29,7 @@ const Example = () => { ((props, ref) => { const { ellipse } = useEllipse(props); diff --git a/packages/ellipse/src/useEllipse.tsx b/packages/ellipse/src/useEllipse.tsx index c02062cf..b35ece0b 100644 --- a/packages/ellipse/src/useEllipse.tsx +++ b/packages/ellipse/src/useEllipse.tsx @@ -5,7 +5,7 @@ import { EllipseProps } from './'; export interface UseEllipse extends EllipseProps {} export const useEllipse = (props = {} as UseEllipse) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); const [ellipse, setEllipse] = useState(); useLayoutEffect(() => { @@ -28,7 +28,7 @@ export const useEllipse = (props = {} as UseEllipse) => { } }, [map]); - useVisiable(ellipse!, visiable); + useVisiable(ellipse!, visible ?? visiable); useSettingProperties(ellipse!, props, ['Center', 'Radius', 'Options', 'ExtData']); useEventProperties(ellipse!, props, [ 'onHide', diff --git a/packages/hawk-eye-control/README.md b/packages/hawk-eye-control/README.md index de3ece60..4491f43d 100644 --- a/packages/hawk-eye-control/README.md +++ b/packages/hawk-eye-control/README.md @@ -37,7 +37,7 @@ const Demo = () => { } }}> @@ -61,7 +61,7 @@ export default Mount; | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | offset | 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为 `AMap.Pixel(10,10)` | `[number, number]` | - | | autoMove | 是否随主图视口变化移动 | boolean | - | | showRectangle | 是否显示视口矩形 | boolean | - | diff --git a/packages/hawk-eye-control/src/index.tsx b/packages/hawk-eye-control/src/index.tsx index 9fcabab8..da651007 100644 --- a/packages/hawk-eye-control/src/index.tsx +++ b/packages/hawk-eye-control/src/index.tsx @@ -5,8 +5,10 @@ import { useHawkEyeControl } from './useHawkEyeControl'; export * from './useHawkEyeControl'; export interface HawkEyeControlProps extends OverlayProps, AMap.HawkEyeOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; } export const HawkEyeControl = React.forwardRef((props, ref) => { diff --git a/packages/hawk-eye-control/src/useHawkEyeControl.tsx b/packages/hawk-eye-control/src/useHawkEyeControl.tsx index 117435b1..fc2e9e59 100644 --- a/packages/hawk-eye-control/src/useHawkEyeControl.tsx +++ b/packages/hawk-eye-control/src/useHawkEyeControl.tsx @@ -7,7 +7,7 @@ export interface UseHawkEyeControl extends HawkEyeControlProps {} export function useHawkEyeControl(props = {} as UseHawkEyeControl) { const [hawkEyeControl, setHawkEyeControl] = useState(); - const { offset, visiable, ...other } = props; + const { offset, visiable, visible, ...other } = props; const { map } = useMapContext(); useEffect(() => { if (map && !hawkEyeControl) { @@ -26,7 +26,7 @@ export function useHawkEyeControl(props = {} as UseHawkEyeControl) { }; }, [map, hawkEyeControl]); - useVisiable(hawkEyeControl! as any, visiable); + useVisiable(hawkEyeControl! as any, visible ?? visiable); return { hawkEyeControl, setHawkEyeControl, diff --git a/packages/info-window/README.md b/packages/info-window/README.md index f0cdcb30..0bc677f5 100644 --- a/packages/info-window/README.md +++ b/packages/info-window/README.md @@ -36,7 +36,7 @@ const Example = () => {
{ @@ -78,7 +78,7 @@ const Example = () => {
{ console.log('evn', evn); }} @@ -129,7 +129,7 @@ const Example = () => {
{ console.log('evn', evn); @@ -192,7 +192,7 @@ const Example = () => { /> {winPosition && ( ((props, ref) => { diff --git a/packages/info-window/src/useInfoWindow.tsx b/packages/info-window/src/useInfoWindow.tsx index ec517d11..ead99485 100644 --- a/packages/info-window/src/useInfoWindow.tsx +++ b/packages/info-window/src/useInfoWindow.tsx @@ -5,7 +5,7 @@ import { InfoWindowProps } from '.'; export interface UseInfoWindow extends InfoWindowProps {} export const useInfoWindow = (props = {} as UseInfoWindow) => { - const { visiable, position, ...other } = props; + const { visiable, visible, position, ...other } = props; const { map } = useMapContext(); const [isOpen, setIsOpen] = useState(visiable); const [infoWindow, setInfoWindow] = useState(); @@ -38,20 +38,22 @@ export const useInfoWindow = (props = {} as UseInfoWindow) => { } }, [props.children, container, other.content, infoWindow]); + let visibleView = visible ?? visiable; + useMemo(() => { - if (isOpen !== visiable && infoWindow && map) { - setIsOpen(visiable); - if (visiable) { + if (isOpen !== visibleView && infoWindow && map) { + setIsOpen(visibleView); + if (visibleView) { const positionCenter = map.getCenter(); infoWindow.open(map, position || positionCenter); } else { infoWindow.close(); } } - }, [visiable, infoWindow]); + }, [visibleView, infoWindow]); useEffect(() => { - if (!map || !infoWindow || !visiable) return; + if (!map || !infoWindow || !visibleView) return; const positionCenter = map.getCenter(); infoWindow.open(map, position || positionCenter); }, [position]); diff --git a/packages/label-marker/README.md b/packages/label-marker/README.md index a97ba192..28168196 100644 --- a/packages/label-marker/README.md +++ b/packages/label-marker/README.md @@ -32,7 +32,7 @@ const Example = () => {
{ }} position={[116.466994, 39.984904]} /> - {
{ - const { visiable, children, text, icon = initIcon, ...other } = props; + const { visiable, visible, children, text, icon = initIcon, ...other } = props; const { map, AMap } = useMapContext(); const [labelMarker, setLabelMarker] = useState(); @@ -85,7 +85,7 @@ export const useLabelMarker = (props: UseLabelMarker = {}) => { }; } }, [map]); - useVisiable(labelMarker!, visiable); + useVisiable(labelMarker!, visible ?? visiable); useSettingProperties(labelMarker, props, [ 'Name', 'Position', diff --git a/packages/map-type-control/README.md b/packages/map-type-control/README.md index d50647cb..ad0f2331 100644 --- a/packages/map-type-control/README.md +++ b/packages/map-type-control/README.md @@ -30,13 +30,13 @@ const Demo = () => {
{show && ( @@ -60,7 +60,7 @@ export default Mount; | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | showRoad | 覆盖物是否可见。 | `boolean` | `false` | | showTraffic | 叠加实时交通图层 默认值：false | `boolean` | `false` | | defaultType | 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0 | `number` | `0` | diff --git a/packages/map-type-control/src/index.tsx b/packages/map-type-control/src/index.tsx index 83923bdd..75bdb813 100644 --- a/packages/map-type-control/src/index.tsx +++ b/packages/map-type-control/src/index.tsx @@ -5,8 +5,10 @@ import { useMapTypeControl } from './useMapTypeControl'; export * from './useMapTypeControl'; export interface MapTypeControlProps extends OverlayProps, AMap.MapTypeOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; } export const MapTypeControl = React.forwardRef((props, ref) => { diff --git a/packages/map-type-control/src/useMapTypeControl.tsx b/packages/map-type-control/src/useMapTypeControl.tsx index a183a425..6a28fcac 100644 --- a/packages/map-type-control/src/useMapTypeControl.tsx +++ b/packages/map-type-control/src/useMapTypeControl.tsx @@ -7,7 +7,7 @@ export interface UseMapTypeControl extends MapTypeControlProps {} export function useMapTypeControl(props = {} as UseMapTypeControl) { const [mapTypeControl, setMapTypeControl] = useState(); - const { visiable, defaultType = 0, ...other } = props; + const { visiable, visible, defaultType = 0, ...other } = props; const { map } = useMapContext(); useEffect(() => { if (map && !mapTypeControl) { @@ -25,7 +25,7 @@ export function useMapTypeControl(props = {} as UseMapTypeControl) { } }, [map]); - useVisiable(mapTypeControl!, visiable); + useVisiable(mapTypeControl!, visible ?? visiable); return { mapTypeControl, setMapTypeControl, diff --git a/packages/marker/README.md b/packages/marker/README.md index aa58f0df..689d60ce 100644 --- a/packages/marker/README.md +++ b/packages/marker/README.md @@ -29,40 +29,40 @@ const Example = () => {
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -96,7 +96,7 @@ const Example = () => {
{ position={new AMap.LngLat(117.283042,31.86119)} /> { }} > { position={new AMap.LngLat(116.205467, 39.907761)} /> { position={[116.368904, 39.913423]} /> { }} > @@ -291,7 +291,7 @@ export default Mount; | 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | map | 要显示该marker的地图对象 | `Map` | - | | position | 点标记在地图上显示的位置，默认为地图中心点 | `LngLat` | - | | offset | 点标记显示位置偏移量，默认值为 `Pixel(-10,-34)`。 | `Pixel` | - | diff --git a/packages/marker/src/index.tsx b/packages/marker/src/index.tsx index 49d53133..ce00f365 100644 --- a/packages/marker/src/index.tsx +++ b/packages/marker/src/index.tsx @@ -7,8 +7,10 @@ import { useMarker } from './useMarker'; export * from './useMarker'; export interface MarkerProps extends OverlayProps, AMap.MarkerEvents, AMap.MarkerOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; className?: string; children?: JSX.Element; } diff --git a/packages/marker/src/useMarker.tsx b/packages/marker/src/useMarker.tsx index 936635f1..f031d11c 100644 --- a/packages/marker/src/useMarker.tsx +++ b/packages/marker/src/useMarker.tsx @@ -5,7 +5,7 @@ import { MarkerProps } from './'; export interface UseMarker extends MarkerProps {} export const useMarker = (props: UseMarker = {}) => { - const { visiable, children, ...other } = props; + const { visiable, visible, children, ...other } = props; const { map } = useMapContext(); const [marker, setMarker] = useState(); const { container, Portal } = usePortal(); @@ -29,7 +29,7 @@ export const useMarker = (props: UseMarker = {}) => { } }, [map]); - useVisiable(marker!, visiable); + useVisiable(marker!, visible ?? visiable); useSettingProperties(marker!, props, [ 'Path', 'Anchor', diff --git a/packages/mass-marks/README.md b/packages/mass-marks/README.md index dbac7427..7e4e5e0f 100644 --- a/packages/mass-marks/README.md +++ b/packages/mass-marks/README.md @@ -44,7 +44,7 @@ const Example = (props) => {
{ if (!map.current) { diff --git a/packages/mass-marks/src/index.tsx b/packages/mass-marks/src/index.tsx index 03af6469..ed011d4d 100644 --- a/packages/mass-marks/src/index.tsx +++ b/packages/mass-marks/src/index.tsx @@ -6,8 +6,10 @@ import { useMassMarks } from './useMassMarks'; export * from './useMassMarks'; export interface MassMarksProps extends OverlayProps, AMap.MassMarksEvents, AMap.MassMarkersOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; data?: AMap.MassMarkersDataOptions; } diff --git a/packages/mass-marks/src/useMassMarks.tsx b/packages/mass-marks/src/useMassMarks.tsx index 2fa081e5..13779955 100644 --- a/packages/mass-marks/src/useMassMarks.tsx +++ b/packages/mass-marks/src/useMassMarks.tsx @@ -5,7 +5,7 @@ import { MassMarksProps } from './'; export interface UseMassMarks extends MassMarksProps {} export const useMassMarks = (props = {} as UseMassMarks) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); const { opacity = 1, zIndex = 1111, style, data } = other || {}; const [massMarks, setMassMarks] = useState(); @@ -52,7 +52,7 @@ export const useMassMarks = (props = {} as UseMassMarks) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [map]); - useVisiable(massMarks!, visiable); + useVisiable(massMarks!, visible ?? visiable); useSettingProperties(massMarks!, props, [ 'Map', 'Data', diff --git a/packages/poly-editor/README.md b/packages/poly-editor/README.md index 83b6dca6..f7a95ccb 100644 --- a/packages/poly-editor/README.md +++ b/packages/poly-editor/README.md @@ -56,7 +56,7 @@ const Example = () => {
{
{
{
{ onDragEnd={(e)=>{console.log(e)}} /> { { ` / `Array>` | - | | options | 多边形属性（样式风格，包括组成多边形轮廓线的节点、轮廓线样式等）。 | `PolygonOptions` | - | diff --git a/packages/polygon/src/index.tsx b/packages/polygon/src/index.tsx index 7a0c541a..81a1c794 100644 --- a/packages/polygon/src/index.tsx +++ b/packages/polygon/src/index.tsx @@ -8,8 +8,10 @@ export * from './usePolygon'; export const PolygonContext = createContext(undefined); export interface PolygonProps extends OverlayProps, AMap.PolygonEvents, AMap.PolygonOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; children?: JSX.Element; } export const Polygon = forwardRef((props, ref) => { diff --git a/packages/polygon/src/usePolygon.tsx b/packages/polygon/src/usePolygon.tsx index 39888aa3..045f9188 100644 --- a/packages/polygon/src/usePolygon.tsx +++ b/packages/polygon/src/usePolygon.tsx @@ -5,7 +5,7 @@ import { PolygonProps } from '.'; export interface UsePolygon extends PolygonProps {} export const usePolygon = (props = {} as UsePolygon) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); const [polygon, setPolygon] = useState(); useLayoutEffect(() => { @@ -37,7 +37,7 @@ export const usePolygon = (props = {} as UsePolygon) => { } }, [polygon, other]); - useVisiable(polygon!, visiable); + useVisiable(polygon!, visible ?? visiable); useSettingProperties(polygon!, props, ['Path', 'Options', 'Map', 'ExtData', 'Draggable']); useEventProperties(polygon!, props, [ 'onClick', diff --git a/packages/polyline-editor/README.md b/packages/polyline-editor/README.md index e0252127..a72b1d6b 100644 --- a/packages/polyline-editor/README.md +++ b/packages/polyline-editor/README.md @@ -51,7 +51,7 @@ const Example = () => {
{
{ console.log('obj:', obj); }} @@ -67,7 +67,7 @@ const Example = () => { ]} /> { { ` / `Array>` | - | | options | 折线属性（包括路径的节点、线样式、是否绘制大地线等）。 | `PolylineOptions` | - | diff --git a/packages/polyline/src/index.tsx b/packages/polyline/src/index.tsx index 4e17084e..095d39ec 100644 --- a/packages/polyline/src/index.tsx +++ b/packages/polyline/src/index.tsx @@ -8,8 +8,10 @@ export * from './usePolyline'; export const PolylineContext = createContext(undefined); export interface PolylineProps extends OverlayProps, AMap.PolylineEvents, AMap.PolylineOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; children?: JSX.Element; } export const Polyline = React.forwardRef((props, ref) => { diff --git a/packages/polyline/src/usePolyline.tsx b/packages/polyline/src/usePolyline.tsx index f92ac004..a873f8d2 100644 --- a/packages/polyline/src/usePolyline.tsx +++ b/packages/polyline/src/usePolyline.tsx @@ -7,7 +7,7 @@ export interface UsePolyline extends PolylineProps {} export function usePolyline(props = {} as UsePolyline) { const [polyline, setPolyline] = useState(); - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); useLayoutEffect(() => { if (map && !polyline) { @@ -37,7 +37,7 @@ export function usePolyline(props = {} as UsePolyline) { } }, [polyline, other]); - useVisiable(polyline!, visiable); + useVisiable(polyline!, visible ?? visiable); useSettingProperties(polyline!, props, [ 'Path', 'Options', diff --git a/packages/rectangle/README.md b/packages/rectangle/README.md index 90e7b578..a7af8da4 100644 --- a/packages/rectangle/README.md +++ b/packages/rectangle/README.md @@ -33,7 +33,7 @@ const Example = () => {
((props, ref) => { const { rectangle } = useRectangle(props); diff --git a/packages/rectangle/src/useRectangle.tsx b/packages/rectangle/src/useRectangle.tsx index 208ce242..0ae346ad 100644 --- a/packages/rectangle/src/useRectangle.tsx +++ b/packages/rectangle/src/useRectangle.tsx @@ -5,7 +5,7 @@ import { RectangleProps } from '.'; export interface UseRectangle extends RectangleProps {} export const useRectangle = (props = {} as UseRectangle) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const { map } = useMapContext(); const [rectangle, setRectangle] = useState(); useLayoutEffect(() => { @@ -28,7 +28,7 @@ export const useRectangle = (props = {} as UseRectangle) => { } }, [map]); - useVisiable(rectangle!, visiable); + useVisiable(rectangle!, visible ?? visiable); useSettingProperties(rectangle!, props, ['Bounds', 'Options', 'Map', 'ExtData']); useEventProperties(rectangle!, props, [ 'onHide', diff --git a/packages/scale-control/README.md b/packages/scale-control/README.md index 78b09676..1a3abdb7 100644 --- a/packages/scale-control/README.md +++ b/packages/scale-control/README.md @@ -30,13 +30,13 @@ const Demo = () => {
{show && ( @@ -61,6 +61,6 @@ export default Mount; | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | position | 控件停靠位置 `{ top: 5; left: 5; right: 5; bottom: 5 }` 或者 'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角。 | `string/object` | - | | offset | 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为 `AMap.Pixel(10,10)` | `[number, number]` | - | diff --git a/packages/scale-control/src/index.tsx b/packages/scale-control/src/index.tsx index ac15a93c..ea22256d 100644 --- a/packages/scale-control/src/index.tsx +++ b/packages/scale-control/src/index.tsx @@ -6,8 +6,10 @@ import { useScaleControl } from './useScaleControl'; export * from './useScaleControl'; export interface ScaleControlProps extends OverlayProps, AMap.ScaleOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; } export const ScaleControl = React.forwardRef((props, ref) => { diff --git a/packages/scale-control/src/useScaleControl.tsx b/packages/scale-control/src/useScaleControl.tsx index aa1f514a..a29329a4 100644 --- a/packages/scale-control/src/useScaleControl.tsx +++ b/packages/scale-control/src/useScaleControl.tsx @@ -7,7 +7,7 @@ export interface UseScaleControl extends ScaleControlProps {} export function useScaleControl(props = {} as UseScaleControl) { const [scaleControl, setScaleControl] = useState(); - const { position, visiable, offset } = props; + const { position, visiable, visible, offset } = props; const { map } = useMapContext(); useEffect(() => { if (map && !scaleControl) { @@ -28,7 +28,7 @@ export function useScaleControl(props = {} as UseScaleControl) { } }, [map]); - useVisiable(scaleControl!, visiable); + useVisiable(scaleControl!, visible ?? visiable); return { scaleControl, setScaleControl, diff --git a/packages/text/README.md b/packages/text/README.md index 487a5c74..3c60878f 100644 --- a/packages/text/README.md +++ b/packages/text/README.md @@ -35,7 +35,7 @@ const Example = () => { draggable={true} cursor="pointer" angle={10} - visiable={show} + visible={show} style={{ 'padding': '.75rem 1.25rem', 'margin-bottom': '1rem', @@ -91,7 +91,7 @@ const Example = () => { cursor="pointer" className="test-text" angle={10} - visiable={show} + visible={show} style={{ 'padding': '.75rem 1.25rem', 'margin-bottom': '1rem', @@ -165,7 +165,7 @@ function Demo() { | 参数 | 说明 | 类型 | 默认值 | |--------- |-------- |--------- |-------- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | text | 标记显示的文本内容。 | `string` | - | | children | 标记显示的文本内容，`text` 参数将失效。 | `string` | - | diff --git a/packages/text/src/index.tsx b/packages/text/src/index.tsx index bca765e3..925e8586 100644 --- a/packages/text/src/index.tsx +++ b/packages/text/src/index.tsx @@ -6,8 +6,10 @@ import { useText } from './useText'; export * from './useText'; export interface TextProps extends OverlayProps, AMap.TextEvents, AMap.TextOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; children?: React.ReactNode; } export const Text = forwardRef & { text?: AMap.Text }, TextProps>((props, ref) => { diff --git a/packages/text/src/useText.tsx b/packages/text/src/useText.tsx index 9ca337c8..bb59321e 100644 --- a/packages/text/src/useText.tsx +++ b/packages/text/src/useText.tsx @@ -5,7 +5,7 @@ import { TextProps } from './'; export interface UseText extends TextProps {} export const useText = (props = {} as UseText) => { - const { visiable, ...other } = props; + const { visiable, visible, ...other } = props; const [text, setText] = useState(); const { map } = useMapContext(); const { container, Portal } = usePortal(); @@ -33,7 +33,7 @@ export const useText = (props = {} as UseText) => { } }, [props.children, props.text, container, text]); - useVisiable(text!, visiable); + useVisiable(text!, visible ?? visiable); useSettingProperties(text!, props, [ 'Style', 'Title', diff --git a/packages/tile-layer/README.md b/packages/tile-layer/README.md index b6ce2d7d..67cfd8ee 100644 --- a/packages/tile-layer/README.md +++ b/packages/tile-layer/README.md @@ -272,7 +272,7 @@ const Demo = () => { { @@ -284,7 +284,7 @@ const Demo = () => { /> { @@ -314,7 +314,7 @@ export default Mount; | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | type | 切片图层类型 | TileLayerType | - | | options | 切片图层的配置 | TileLayerOptions | - | | onAdded | 图层添加后的回调，可以用来处理不同坐标系图层切换时覆盖物的坐标转换 | (): void; | diff --git a/packages/tile-layer/src/index.tsx b/packages/tile-layer/src/index.tsx index c8ec68ba..bd636566 100644 --- a/packages/tile-layer/src/index.tsx +++ b/packages/tile-layer/src/index.tsx @@ -12,8 +12,10 @@ export enum TileLayerType { } export interface TileLayerProps extends OverlayProps, AMap.TileLayerOptions { - /** 图层是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; type?: TileLayerType; options?: AMap.TileLayerOptions; /** 图层添加到地图上后的回调 */ diff --git a/packages/tile-layer/src/useTileLayer.tsx b/packages/tile-layer/src/useTileLayer.tsx index 60ed3c9a..1c4e81a1 100644 --- a/packages/tile-layer/src/useTileLayer.tsx +++ b/packages/tile-layer/src/useTileLayer.tsx @@ -7,7 +7,7 @@ export interface UseTileLayer extends TileLayerProps {} export function useTileLayer(props = {} as UseTileLayer) { const [tileLayer, setTileLayer] = useState(); - const { visiable, type, options } = props; + const { visiable, visible, type, options } = props; const { map } = useMapContext(); useEffect(() => { if (map) { @@ -50,7 +50,7 @@ export function useTileLayer(props = {} as UseTileLayer) { } }, [map, type, options]); - useVisiable(tileLayer!, visiable); + useVisiable(tileLayer!, visible ?? visiable); return { tileLayer, setTileLayer, diff --git a/packages/tool-bar-control/README.md b/packages/tool-bar-control/README.md index b8178a9f..f80238ae 100644 --- a/packages/tool-bar-control/README.md +++ b/packages/tool-bar-control/README.md @@ -29,10 +29,10 @@ const Demo = () => {
- + {show && ( @@ -58,6 +58,6 @@ export default Mount; | 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | -| visiable | 覆盖物是否可见。 | `boolean` | - | +| visible | 覆盖物是否可见。 | `boolean` | - | | position | 控件停靠位置 `{ top: 5; left: 5; right: 5; bottom: 5 }` 或者 'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角。 | `string| object` | - | | offset | 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为 `AMap.Pixel(10,10)` | `[number, number]` | - | diff --git a/packages/tool-bar-control/src/index.tsx b/packages/tool-bar-control/src/index.tsx index 2f44eeb0..479d67b7 100644 --- a/packages/tool-bar-control/src/index.tsx +++ b/packages/tool-bar-control/src/index.tsx @@ -6,8 +6,10 @@ import { useToolBarControl } from './useToolBarControl'; export * from './useToolBarControl'; export interface ToolBarControlProps extends OverlayProps, AMap.ToolBarOptions { - /** 覆盖物是否可见 */ + /** @deprecated use `visible` */ visiable?: boolean; + /** 覆盖物是否可见 */ + visible?: boolean; } export const ToolBarControl = React.forwardRef((props, ref) => { diff --git a/packages/tool-bar-control/src/useToolBarControl.tsx b/packages/tool-bar-control/src/useToolBarControl.tsx index 0669be14..1f6a203c 100644 --- a/packages/tool-bar-control/src/useToolBarControl.tsx +++ b/packages/tool-bar-control/src/useToolBarControl.tsx @@ -7,7 +7,7 @@ export interface UseToolBarControl extends ToolBarControlProps {} export function useToolBarControl(props = {} as UseToolBarControl) { const [toolBarControl, setToolBarControl] = useState(); - const { position, visiable, offset } = props; + const { position, visiable, visible, offset } = props; const { map } = useMapContext(); useEffect(() => { if (map && !toolBarControl) { @@ -28,7 +28,7 @@ export function useToolBarControl(props = {} as UseToolBarControl) { } }, [map]); - useVisiable(toolBarControl!, visiable); + useVisiable(toolBarControl!, visible ?? visiable); return { toolBarControl, setToolBarControl, diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx index 5a9be91a..b7a90631 100644 --- a/packages/utils/src/index.tsx +++ b/packages/utils/src/index.tsx @@ -43,21 +43,21 @@ export function useSetStatus any; setStatus: (opt: * 针对 Overlay 类型的组件，有公共的是否显示 对象处理 * 通过参数 `visiable` 来控制执行 `show()` or `hide()` */ -export function useVisiable void; hide: () => void }>(instance: T, visiable?: boolean) { - const [state, setState] = useState(visiable); +export function useVisiable void; hide: () => void }>(instance: T, visible?: boolean) { + const [state, setState] = useState(visible); useEffect(() => { - if (instance && visiable !== undefined) { - if (visiable) { + if (instance && visible !== undefined) { + if (visible) { instance.show && instance.show(); } else { instance.hide && instance.hide(); } - if (visiable !== state) { - setState(visiable); + if (visible !== state) { + setState(visible); } } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [instance, visiable]); + }, [instance, visible]); } /**