chore: visiable rename visible & mark visiable deprecated. #369

uiwjs · Jul 11, 2024 · c7510fa · c7510fa
1 parent 281d6e9
commit c7510fa
Show file tree

Hide file tree

Showing 58 changed files with 202 additions and 164 deletions.
diff --git a/packages/bezier-curve/README.md b/packages/bezier-curve/README.md
@@ -46,7 +46,7 @@ const Example = () => {
       <div style={{ width: '100%', height: '500px' }}>
         <Map zoom={14} center={[116.397637, 39.900001]}>
           <BezierCurve
-            visiable={show}
+            visible={show}
             path={path}
             isOutline={true}
             outlineColor="#ffeeff"
@@ -83,7 +83,7 @@ export default Mount;
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
-| visiable | 覆盖物是否可见。 | `boolean` | - |
+| visible | 覆盖物是否可见。 | `boolean` | - |
 | path | 贝瑟尔曲线的路径。 | `Array<LngLat>` / `Array<Array<LngLat>>` | - |
 
 ### 事件

diff --git 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<BezierCurveProps, BezierCurveProps>((props, ref) => {
   const { bezierCurve } = useBezierCurve(props);

diff --git 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<AMap.BezierCurve>();
   useEffect(() => {
@@ -27,7 +27,7 @@ export const useBezierCurve = (props = {} as UseBezierCurve) => {
     }
   }, [map]);
 
-  useVisiable(bezierCurve!, visiable);
+  useVisiable(bezierCurve!, visible ?? visiable);
   useSettingProperties<AMap.BezierCurve, UseBezierCurve>(bezierCurve!, props, [
     'Options',
     'Path',

diff --git a/packages/circle-marker/README.md b/packages/circle-marker/README.md
@@ -33,7 +33,7 @@ const Example = () => {
         <Map zoom={4} center={[116.400274, 39.905812]}>
           <CircleMarker
             center={new AMap.LngLat(116.407394, 39.904211)}
-            visiable={show}
+            visible={show}
             radius={10+Math.random()*10}
             strokeColor="#fff"
             strokeWeight={2}
@@ -47,7 +47,7 @@ const Example = () => {
           />
            <CircleMarker
             center={new AMap.LngLat(113.26641, 23.132324)}
-            visiable={show}
+            visible={show}
             radius={10+Math.random()*10}
             strokeColor="#fff"
             strokeWeight={2}
@@ -61,7 +61,7 @@ const Example = () => {
           />
            <CircleMarker
             center={new AMap.LngLat(112.562678, 37.873499)}
-            visiable={show}
+            visible={show}
             radius={10+Math.random()*10}
             strokeColor="#fff"
             strokeWeight={2}
@@ -75,7 +75,7 @@ const Example = () => {
           />
            <CircleMarker
             center={new AMap.LngLat(121.473662, 31.230372)}
-            visiable={show}
+            visible={show}
             radius={10+Math.random()*10}
             strokeColor="#fff"
             strokeWeight={2}
@@ -89,7 +89,7 @@ const Example = () => {
           />
            <CircleMarker
             center={new AMap.LngLat(117.329949, 31.733806)}
-            visiable={show}
+            visible={show}
             radius={10+Math.random()*10}
             strokeColor="#fff"
             strokeWeight={2}
@@ -122,7 +122,7 @@ export default Mount;
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
-| visiable | 覆盖物是否可见。 | `boolean` | - |
+| visible | 覆盖物是否可见。 | `boolean` | - |
 | center | 圆心位置 | `LngLat` | - |
 | radius | 圆半径，单位:px 最大值64 | `number` | - |
 | zIndex | 多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时，通过该属性使级别较高的多边形覆盖物在上层显示 | `number` | 10 |

diff --git a/packages/circle-marker/src/index.tsx b/packages/circle-marker/src/index.tsx
@@ -5,8 +5,10 @@ import { useCircleMarker } from './useCircleMarker';
 export * from './useCircleMarker';
 
 export interface CircleMarkerProps extends OverlayProps, AMap.CircleMarkerEvents, AMap.CircleMarkerOptions {
-  /** 覆盖物是否可见 */
+  /** @deprecated use `visible` */
   visiable?: boolean;
+  /** 覆盖物是否可见 */
+  visible?: boolean;
 }
 export const CircleMarker = React.forwardRef<CircleMarkerProps, CircleMarkerProps>((props, ref) => {
   const { circleMarker } = useCircleMarker(props);

diff --git 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<AMap.CircleMarker>();
   useEffect(() => {
@@ -28,7 +28,7 @@ export const useCircleMarker = (props = {} as UseCircleMarker) => {
     }
   }, [map]);
 
-  useVisiable(circleMarker!, visiable);
+  useVisiable(circleMarker!, visible ?? visiable);
   useSettingProperties<AMap.CircleMarker, UseCircleMarker>(circleMarker!, props, [
     'Center',
     'Raius',

diff --git a/packages/circle/README.md b/packages/circle/README.md
@@ -30,7 +30,7 @@ const Example = () => {
       <div style={{ width: '100%', height: '300px' }}>
         <Map zoom={14} center={[116.400274, 39.905812]}>
           <Circle
-            visiable={show}
+            visible={show}
             radius={1000}
             strokeColor="#fff"
             strokeWeight={2}
@@ -57,7 +57,7 @@ export default Mount;
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
-| visiable | 覆盖物是否可见。 | `boolean` | - |
+| visible | 覆盖物是否可见。 | `boolean` | - |
 | radius | 圆半径，单位:米 | `number` | - |
 
 ### 事件

diff --git a/packages/circle/src/index.tsx b/packages/circle/src/index.tsx
@@ -5,8 +5,10 @@ import { useCircle } from './useCircle';
 export * from './useCircle';
 
 export interface CircleProps extends OverlayProps, AMap.CircleEvents, AMap.CircleOptions {
-  /** 覆盖物是否可见 */
+  /** @deprecated use `visible` */
   visiable?: boolean;
+  /** 覆盖物是否可见 */
+  visible?: boolean;
 }
 export const Circle = React.forwardRef<CircleProps, CircleProps>((props, ref) => {
   const { circle } = useCircle(props);

diff --git 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<AMap.Circle>();
   useLayoutEffect(() => {
@@ -20,7 +20,7 @@ export const useCircle = (props = {} as UseCircle) => {
     }
   }, [map]);
 
-  useVisiable(circle!, visiable);
+  useVisiable(circle!, visible ?? visiable);
   useSettingProperties<AMap.Circle, UseCircle>(circle!, props, ['Center', 'Raius', 'Options', 'ExtData']);
   useEventProperties<AMap.Circle, UseCircle>(circle!, props, [
     'onHide',

diff --git a/packages/control-bar-control/README.md b/packages/control-bar-control/README.md
@@ -30,13 +30,13 @@ const Demo = () => {
       <div style={{ width: '100%', height: '300px' }}>
         <Map>
           <ControlBarControl
-            visiable={show}
+            visible={show}
             offset={[30, 10]}
             position="RT"
           />
           {show && (
             <ControlBarControl
-              visiable={show}
+              visible={show}
               offset={[10, 10]}
               position="RB"
             />
@@ -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
@@ -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<ControlBarControlProps, ControlBarControlProps>((props, ref) => {

diff --git 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<AMap.ControlBar>();
   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
@@ -29,7 +29,7 @@ const Example = () => {
       </button>
       <Map zoom={4} style={{ height: 300 }}>
         <Ellipse
-          visiable={show}
+          visible={show}
           radius={[1000000, 200000]}
           borderWeight={3}
           strokeColor="#FF33FF"
@@ -64,7 +64,7 @@ export default Mount;
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
-| visiable | 覆盖物是否可见。 | `boolean` | - |
+| visible | 覆盖物是否可见。 | `boolean` | - |
 | center | 	椭圆圆心 | `LngLatLike` | - |
 
 ### 事件

diff --git a/packages/ellipse/src/index.tsx b/packages/ellipse/src/index.tsx
@@ -5,8 +5,10 @@ import { useEllipse } from './useEllipse';
 export * from './useEllipse';
 
 export interface EllipseProps extends OverlayProps, AMap.EllipseEvents, AMap.EllipseOptions {
-  /** 覆盖物是否可见 */
+  /** @deprecated use `visible` */
   visiable?: boolean;
+  /** 覆盖物是否可见 */
+  visible?: boolean;
 }
 export const Ellipse = React.forwardRef<EllipseProps, EllipseProps>((props, ref) => {
   const { ellipse } = useEllipse(props);

diff --git 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<AMap.Ellipse>();
   useLayoutEffect(() => {
@@ -28,7 +28,7 @@ export const useEllipse = (props = {} as UseEllipse) => {
     }
   }, [map]);
 
-  useVisiable(ellipse!, visiable);
+  useVisiable(ellipse!, visible ?? visiable);
   useSettingProperties<AMap.Ellipse, UseEllipse>(ellipse!, props, ['Center', 'Radius', 'Options', 'ExtData']);
   useEventProperties<AMap.Ellipse, UseEllipse>(ellipse!, props, [
     'onHide',

diff --git a/packages/hawk-eye-control/README.md b/packages/hawk-eye-control/README.md
@@ -37,7 +37,7 @@ const Demo = () => {
           }
         }}>
           <HawkEyeControl
-            visiable={show}
+            visible={show}
             offset={[50, 10]}
           />
         </Map>
@@ -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
@@ -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<HawkEyeControlProps, HawkEyeControlProps>((props, ref) => {

diff --git 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<AMap.HawkEye>();
-  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
@@ -36,7 +36,7 @@ const Example = () => {
       <div style={{ width: '100%', height: '500px' }}>
         <Map zoom={14} center={[116.397637, 39.900001]}>
           <InfoWindow
-            visiable={show}
+            visible={show}
             content={info.join('')}
             // position={[116.397046, 39.915698]}
             onClose={(evn) => {
@@ -78,7 +78,7 @@ const Example = () => {
       <div style={{ width: '100%', height: '500px' }}>
         <Map zoom={14} center={[116.397637, 39.900001]}>
           <InfoWindow
-            visiable={show}
+            visible={show}
             onClose={(evn) => {
               console.log('evn', evn);
             }}
@@ -129,7 +129,7 @@ const Example = () => {
       <div style={{ width: '100%', height: '500px' }}>
         <Map zoom={14} pitch={70} viewMode="3D" center={[116.397637, 39.900001]}>
           <InfoWindow
-            visiable={show}
+            visible={show}
             content={content}
             onClose={(evn) => {
               console.log('evn', evn);
@@ -192,7 +192,7 @@ const Example = () => {
           />
           {winPosition && (
             <InfoWindow
-              visiable={show}
+              visible={show}
               position={winPosition}
               offset={{ x: 0, y: -10}}
               content={content}
@@ -271,7 +271,7 @@ export default Mount;
 
 | 参数 | 说明 | 类型 | 默认值 |
 |--------- |-------- |--------- |-------- |
-| visiable | 覆盖物是否可见。 | `boolean` | - |
+| visible | 覆盖物是否可见。 | `boolean` | - |
 | position | 信息窗体显示基点位置，默认地图的中间 | `LngLat` | - |
 | content | 信息窗体尺寸（isCustom为 `true` 时，该属性无效） | `string/HTMLElement` | - |
 | **children** | 替代 `content`，支持 `ReactNode` | `ReactNode` | - |

diff --git a/packages/info-window/src/index.tsx b/packages/info-window/src/index.tsx
@@ -5,8 +5,10 @@ import { useInfoWindow } from './useInfoWindow';
 
 export * from './useInfoWindow';
 export interface InfoWindowProps extends OverlayProps, AMap.InforWindowEvents, AMap.InforWindowOptions {
-  /** 覆盖物是否可见 */
+  /** @deprecated use `visible` */
   visiable?: boolean;
+  /** 覆盖物是否可见 */
+  visible?: boolean;
   children?: JSX.Element;
 }
 export const InfoWindow = React.forwardRef<InfoWindowProps, InfoWindowProps>((props, ref) => {