refactor: Image Semantic Structure (#381)

* chore: rm Dialog

* chore: refactor

* chore: tmp of it

* chore: tmp of it

* chore: keys

* feat: motion auto

* chore: fix ts

* chore: fix ts

* docs: update

* chore: types

* chore: add footer cls

* refactor: all names

* chore: preview

* chore: fix ts

* test: add test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: update snapshot

* chore: fix ts

* fix: icon logic

* chore: refactor

* test: fix test case

Author: zombieJ

README.md

@@ -77,7 +77,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| visible | boolean | - | Whether the preview is open or not |
+| open | boolean | - | Whether the preview is open or not |
 | closeIcon | React.ReactNode | - | Custom close icon |
 | src | string | - | Customize preview src |
 | movable | boolean | true | Enable drag |
@@ -87,8 +87,8 @@ export default () => (
 | forceRender | boolean | - | Force render preview |
 | getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
 | imageRender | (originalNode: React.ReactElement, info: { transform: [TransformType](#TransformType) }) => React.ReactNode | - | Customize image |
-| toolbarRender | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | Customize toolbar |
-| onVisibleChange | (visible: boolean, prevVisible: boolean) => void | - | Callback when visible is changed |
+| actionsRender | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#ToolbarRenderInfoType), 'current' \| 'total'>) => React.ReactNode | - | Customize toolbar |
+| onOpenChange | (open: boolean, prevVisible: boolean) => void | - | Callback when open is changed |
 | onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |
 
 ## Image.PreviewGroup
@@ -120,7 +120,7 @@ export default () => (
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| visible | boolean | - | Whether the preview is open or not |
+| open | boolean | - | Whether the preview is open or not |
 | movable | boolean | true | Enable drag |
 | current | number | - | Current index |
 | closeIcon | React.ReactNode | - | Custom close icon |
@@ -131,8 +131,8 @@ export default () => (
 | getContainer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | Return the mount node for preview |
 | countRender | (current: number, total: number) => ReactNode | - | Customize count |
 | imageRender | (originalNode: React.ReactElement, info: { transform: [TransformType](#TransformType), current: number }) => React.ReactNode | - | Customize image |
-| toolbarRender | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | Customize toolbar |
-| onVisibleChange | (visible: boolean, prevVisible: boolean, current: number) => void | - | Callback when visible is changed |
+| actionsRender | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#ToolbarRenderInfoType)) => React.ReactNode | - | Customize toolbar |
+| onOpenChange | (open: boolean, prevVisible: boolean, current: number) => void | - | Callback when open is changed |
 | onTransform | { transform: [TransformType](#TransformType), action: [TransformAction](#TransformAction) } | - | Callback when transform is changed |
 
 ### TransformType