@akinon/ui-image 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/index.d.ts +3 -3
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/types.d.ts +172 -1
  4. package/dist/esm/index.d.ts +3 -3
  5. package/dist/esm/index.d.ts.map +1 -1
  6. package/dist/esm/types.d.ts +172 -1
  7. package/package.json +7 -7
package/dist/cjs/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { Image as AntImage } from 'antd';
1
2
  import * as React from 'react';
2
3
  import type { IImageProps } from './types';
3
4
  export type * from './types';
@@ -8,9 +9,8 @@ export type * from './types';
8
9
  * It supports previewing the image in a modal.
9
10
  *
10
11
  */
11
- export declare const Image: {
12
- ({ ...restImageProps }: IImageProps): React.JSX.Element;
13
- PreviewGroup: React.FC<import("rc-image/lib/PreviewGroup").GroupConsumerProps>;
12
+ export declare const Image: React.FC<IImageProps> & {
13
+ PreviewGroup: typeof AntImage.PreviewGroup;
14
14
  };
15
15
  export type * from './types';
16
16
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,mBAAmB,SAAS,CAAC;AAE7B;;;;;;GAMG;AAEH,eAAO,MAAM,KAAK;4BAA2B,WAAW;;CAEvD,CAAC;AAIF,mBAAmB,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,MAAM,CAAC;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,mBAAmB,SAAS,CAAC;AAE7B;;;;;;GAMG;AAEH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC1C,YAAY,EAAE,OAAO,QAAQ,CAAC,YAAY,CAAC;CAG5C,CAAC;AAIF,mBAAmB,SAAS,CAAC"}
package/dist/cjs/types.d.ts CHANGED
@@ -1,3 +1,174 @@
1
+ type GetContainer = string | HTMLElement | (() => HTMLElement);
2
+
3
+ type TransformType = {
4
+ x: number;
5
+ y: number;
6
+ rotate: number;
7
+ scale: number;
8
+ flipX: boolean;
9
+ flipY: boolean;
10
+ };
11
+
12
+ interface ImgInfo {
13
+ url: string;
14
+ alt: string;
15
+ width: string | number;
16
+ height: string | number;
17
+ }
18
+
19
+ type TransformAction =
20
+ | 'flipY'
21
+ | 'flipX'
22
+ | 'rotateLeft'
23
+ | 'rotateRight'
24
+ | 'zoomIn'
25
+ | 'zoomOut'
26
+ | 'close'
27
+ | 'prev'
28
+ | 'next'
29
+ | 'wheel'
30
+ | 'doubleClick'
31
+ | 'move'
32
+ | 'dragRebound'
33
+ | 'touchZoom'
34
+ | 'reset';
35
+
36
+ type ToolbarRenderInfoType = {
37
+ icons: {
38
+ prevIcon?: React.ReactNode;
39
+ nextIcon?: React.ReactNode;
40
+ flipYIcon: React.ReactNode;
41
+ flipXIcon: React.ReactNode;
42
+ rotateLeftIcon: React.ReactNode;
43
+ rotateRightIcon: React.ReactNode;
44
+ zoomOutIcon: React.ReactNode;
45
+ zoomInIcon: React.ReactNode;
46
+ };
47
+ actions: {
48
+ onActive?: (offset: number) => void;
49
+ onFlipY: () => void;
50
+ onFlipX: () => void;
51
+ onRotateLeft: () => void;
52
+ onRotateRight: () => void;
53
+ onZoomOut: () => void;
54
+ onZoomIn: () => void;
55
+ onClose: () => void;
56
+ onReset: () => void;
57
+ };
58
+ transform: TransformType;
59
+ current: number;
60
+ total: number;
61
+ image: ImgInfo;
62
+ };
63
+
64
+ export type ImagePreviewType = {
65
+ /**
66
+ * The src attribute of the image, Image path
67
+ */
68
+ src?: string;
69
+
70
+ /**
71
+ * Whether to show the preview
72
+ */
73
+ visible?: boolean;
74
+
75
+ /**
76
+ * The minimum scale of the image */
77
+ minScale?: number;
78
+
79
+ /**
80
+ * The maximum scale of the image
81
+ */
82
+ maxScale?: number;
83
+
84
+ /**
85
+ * The callback function when the preview is visible
86
+ */
87
+ onVisibleChange?: (value: boolean, prevValue: boolean) => void;
88
+
89
+ /**
90
+ * The container of the preview
91
+ */
92
+ getContainer?: GetContainer | false;
93
+
94
+ /**
95
+ * The mask of the preview
96
+ */
97
+ mask?: React.ReactNode;
98
+
99
+ /**
100
+ * The class name of the mask
101
+ */
102
+ maskClassName?: string;
103
+
104
+ /**
105
+ * The icons of the preview
106
+ */
107
+ icons?: {
108
+ rotateLeft?: React.ReactNode;
109
+ rotateRight?: React.ReactNode;
110
+ zoomIn?: React.ReactNode;
111
+ zoomOut?: React.ReactNode;
112
+ close?: React.ReactNode;
113
+ left?: React.ReactNode;
114
+ right?: React.ReactNode;
115
+ flipX?: React.ReactNode;
116
+ flipY?: React.ReactNode;
117
+ };
118
+
119
+ /**
120
+ * The scale step of the preview
121
+ */
122
+ scaleStep?: number;
123
+
124
+ /**
125
+ * Whether to move the preview
126
+ */
127
+ movable?: boolean;
128
+
129
+ /**
130
+ * The close icon of the preview
131
+ */
132
+ closeIcon?: React.ReactNode;
133
+
134
+ /**
135
+ * Whether to force render the preview
136
+ */
137
+ forceRender?: boolean;
138
+
139
+ /**
140
+ * Whether to destroy the preview on hidden
141
+ */
142
+ destroyOnHidden?: boolean;
143
+
144
+ /**
145
+ * The image render of the preview
146
+ */
147
+ imageRender?: (
148
+ originalNode: React.ReactElement,
149
+ info: {
150
+ transform: TransformType;
151
+ image: ImgInfo;
152
+ }
153
+ ) => React.ReactNode;
154
+
155
+ /**
156
+ * The transform of the preview
157
+ */
158
+ onTransform?: (info: {
159
+ transform: TransformType;
160
+ action: TransformAction;
161
+ }) => void;
162
+
163
+ /**
164
+ * The toolbar render of the preview
165
+ */
166
+ toolbarRender?: (
167
+ originalNode: React.ReactElement,
168
+ info: Omit<ToolbarRenderInfoType, 'current' | 'total'>
169
+ ) => React.ReactNode;
170
+ };
171
+
1
172
  export interface IImageProps {
2
173
  /**
3
174
  * The alt attribute of the image
@@ -24,7 +195,7 @@ export interface IImageProps {
24
195
  * preview config, disabled when false
25
196
  * @default true
26
197
  */
27
- preview?: boolean;
198
+ preview?: boolean | ImagePreviewType;
28
199
 
29
200
  /**
30
201
  * The src attribute of the image, Image path
package/dist/esm/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { Image as AntImage } from 'antd';
1
2
  import * as React from 'react';
2
3
  import type { IImageProps } from './types';
3
4
  export type * from './types';
@@ -8,9 +9,8 @@ export type * from './types';
8
9
  * It supports previewing the image in a modal.
9
10
  *
10
11
  */
11
- export declare const Image: {
12
- ({ ...restImageProps }: IImageProps): React.JSX.Element;
13
- PreviewGroup: React.FC<import("rc-image/lib/PreviewGroup").GroupConsumerProps>;
12
+ export declare const Image: React.FC<IImageProps> & {
13
+ PreviewGroup: typeof AntImage.PreviewGroup;
14
14
  };
15
15
  export type * from './types';
16
16
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,mBAAmB,SAAS,CAAC;AAE7B;;;;;;GAMG;AAEH,eAAO,MAAM,KAAK;4BAA2B,WAAW;;CAEvD,CAAC;AAIF,mBAAmB,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAoC,MAAM,MAAM,CAAC;AAC3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAC3C,mBAAmB,SAAS,CAAC;AAE7B;;;;;;GAMG;AAEH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC1C,YAAY,EAAE,OAAO,QAAQ,CAAC,YAAY,CAAC;CAG5C,CAAC;AAIF,mBAAmB,SAAS,CAAC"}
package/dist/esm/types.d.ts CHANGED
@@ -1,3 +1,174 @@
1
+ type GetContainer = string | HTMLElement | (() => HTMLElement);
2
+
3
+ type TransformType = {
4
+ x: number;
5
+ y: number;
6
+ rotate: number;
7
+ scale: number;
8
+ flipX: boolean;
9
+ flipY: boolean;
10
+ };
11
+
12
+ interface ImgInfo {
13
+ url: string;
14
+ alt: string;
15
+ width: string | number;
16
+ height: string | number;
17
+ }
18
+
19
+ type TransformAction =
20
+ | 'flipY'
21
+ | 'flipX'
22
+ | 'rotateLeft'
23
+ | 'rotateRight'
24
+ | 'zoomIn'
25
+ | 'zoomOut'
26
+ | 'close'
27
+ | 'prev'
28
+ | 'next'
29
+ | 'wheel'
30
+ | 'doubleClick'
31
+ | 'move'
32
+ | 'dragRebound'
33
+ | 'touchZoom'
34
+ | 'reset';
35
+
36
+ type ToolbarRenderInfoType = {
37
+ icons: {
38
+ prevIcon?: React.ReactNode;
39
+ nextIcon?: React.ReactNode;
40
+ flipYIcon: React.ReactNode;
41
+ flipXIcon: React.ReactNode;
42
+ rotateLeftIcon: React.ReactNode;
43
+ rotateRightIcon: React.ReactNode;
44
+ zoomOutIcon: React.ReactNode;
45
+ zoomInIcon: React.ReactNode;
46
+ };
47
+ actions: {
48
+ onActive?: (offset: number) => void;
49
+ onFlipY: () => void;
50
+ onFlipX: () => void;
51
+ onRotateLeft: () => void;
52
+ onRotateRight: () => void;
53
+ onZoomOut: () => void;
54
+ onZoomIn: () => void;
55
+ onClose: () => void;
56
+ onReset: () => void;
57
+ };
58
+ transform: TransformType;
59
+ current: number;
60
+ total: number;
61
+ image: ImgInfo;
62
+ };
63
+
64
+ export type ImagePreviewType = {
65
+ /**
66
+ * The src attribute of the image, Image path
67
+ */
68
+ src?: string;
69
+
70
+ /**
71
+ * Whether to show the preview
72
+ */
73
+ visible?: boolean;
74
+
75
+ /**
76
+ * The minimum scale of the image */
77
+ minScale?: number;
78
+
79
+ /**
80
+ * The maximum scale of the image
81
+ */
82
+ maxScale?: number;
83
+
84
+ /**
85
+ * The callback function when the preview is visible
86
+ */
87
+ onVisibleChange?: (value: boolean, prevValue: boolean) => void;
88
+
89
+ /**
90
+ * The container of the preview
91
+ */
92
+ getContainer?: GetContainer | false;
93
+
94
+ /**
95
+ * The mask of the preview
96
+ */
97
+ mask?: React.ReactNode;
98
+
99
+ /**
100
+ * The class name of the mask
101
+ */
102
+ maskClassName?: string;
103
+
104
+ /**
105
+ * The icons of the preview
106
+ */
107
+ icons?: {
108
+ rotateLeft?: React.ReactNode;
109
+ rotateRight?: React.ReactNode;
110
+ zoomIn?: React.ReactNode;
111
+ zoomOut?: React.ReactNode;
112
+ close?: React.ReactNode;
113
+ left?: React.ReactNode;
114
+ right?: React.ReactNode;
115
+ flipX?: React.ReactNode;
116
+ flipY?: React.ReactNode;
117
+ };
118
+
119
+ /**
120
+ * The scale step of the preview
121
+ */
122
+ scaleStep?: number;
123
+
124
+ /**
125
+ * Whether to move the preview
126
+ */
127
+ movable?: boolean;
128
+
129
+ /**
130
+ * The close icon of the preview
131
+ */
132
+ closeIcon?: React.ReactNode;
133
+
134
+ /**
135
+ * Whether to force render the preview
136
+ */
137
+ forceRender?: boolean;
138
+
139
+ /**
140
+ * Whether to destroy the preview on hidden
141
+ */
142
+ destroyOnHidden?: boolean;
143
+
144
+ /**
145
+ * The image render of the preview
146
+ */
147
+ imageRender?: (
148
+ originalNode: React.ReactElement,
149
+ info: {
150
+ transform: TransformType;
151
+ image: ImgInfo;
152
+ }
153
+ ) => React.ReactNode;
154
+
155
+ /**
156
+ * The transform of the preview
157
+ */
158
+ onTransform?: (info: {
159
+ transform: TransformType;
160
+ action: TransformAction;
161
+ }) => void;
162
+
163
+ /**
164
+ * The toolbar render of the preview
165
+ */
166
+ toolbarRender?: (
167
+ originalNode: React.ReactElement,
168
+ info: Omit<ToolbarRenderInfoType, 'current' | 'total'>
169
+ ) => React.ReactNode;
170
+ };
171
+
1
172
  export interface IImageProps {
2
173
  /**
3
174
  * The alt attribute of the image
@@ -24,7 +195,7 @@ export interface IImageProps {
24
195
  * preview config, disabled when false
25
196
  * @default true
26
197
  */
27
- preview?: boolean;
198
+ preview?: boolean | ImagePreviewType;
28
199
 
29
200
  /**
30
201
  * The src attribute of the image, Image path
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-image",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -9,18 +9,18 @@
9
9
  "dist"
10
10
  ],
11
11
  "dependencies": {
12
- "antd": "5.22.6"
12
+ "antd": "^5.27.0"
13
13
  },
14
14
  "devDependencies": {
15
15
  "clean-package": "2.2.0",
16
16
  "copyfiles": "^2.4.1",
17
17
  "rimraf": "^5.0.5",
18
18
  "typescript": "*",
19
- "@akinon/typescript-config": "1.0.0"
19
+ "@akinon/typescript-config": "1.1.0"
20
20
  },
21
21
  "peerDependencies": {
22
- "react": ">=18",
23
- "react-dom": ">=18"
22
+ "react": "^18 || ^19",
23
+ "react-dom": "^18 || ^19"
24
24
  },
25
25
  "clean-package": "../../../clean-package.config.json",
26
26
  "types": "dist/esm/index.d.ts",
@@ -34,10 +34,10 @@
34
34
  },
35
35
  "scripts": {
36
36
  "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
37
- "build:esm": "tsc --outDir dist/esm",
38
37
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
39
- "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
38
+ "build:esm": "tsc --outDir dist/esm",
40
39
  "clean": "rimraf dist/",
40
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
41
41
  "typecheck": "tsc --noEmit"
42
42
  }
43
43
  }