Skip to content

Commit e4c05e5

Browse files
hkleungaihkleungai
authored
🤖 Merge PR DefinitelyTyped#72734 fix(react-html5-camera-photo): fix props, resolve attw by @hkleungai 
1 parent 270f942 commit e4c05e5

File tree

4 files changed

+138
-136
lines changed

4 files changed

+138
-136
lines changed

‎attw.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,6 @@
254254
"react-highlight",
255255
"react-holder",
256256
"react-howler",
257-
"react-html5-camera-photo",
258257
"react-icon-base",
259258
"react-image-gallery",
260259
"react-imgpro",

‎types/react-html5-camera-photo/index.d.ts‎

Lines changed: 96 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,108 @@
1-
import { FC } from "react";
1+
import { ReactNode } from "react";
22

3-
interface FacingMode {
4-
USER: "user";
5-
ENVIRONMENT: "environment";
6-
}
3+
declare namespace ReactHtml5CameraPhoto {
4+
// Facing modes for camera
5+
interface FacingMode {
6+
USER: "user";
7+
ENVIRONMENT: "environment";
8+
}
79

8-
export const FACING_MODES: FacingMode;
10+
const FACING_MODES: FacingMode;
911

10-
interface ImageTypes {
11-
PNG: "png";
12-
JPG: "jpg";
13-
}
12+
// Image types for photo output
13+
interface ImageTypes {
14+
PNG: "png";
15+
JPG: "jpg";
16+
}
1417

15-
export const IMAGE_TYPES: ImageTypes;
18+
const IMAGE_TYPES: ImageTypes;
1619

17-
export interface CameraProps {
18-
/**
19-
* Callback called when the camera is started.
20-
*/
21-
onCameraStart?: (() => void) | undefined;
22-
/**
23-
* Callback called when the camera is stopped.
24-
*/
25-
onCameraStop?: (() => void) | undefined;
26-
/**
27-
* Callback called with the error object as parameter when error occur while opening the camera. Often the permission.
28-
* @param error The error information.
29-
*/
30-
onCameraError?: ((error: Error) => void) | undefined;
31-
/**
32-
* The function called when a photo is taken. the dataUri is passed as a parameter.
33-
* @param dataUri The Data URI of the captured photo.
34-
*/
35-
onTakePhoto?: ((dataUri: string) => void) | undefined;
36-
/**
37-
* The function called when a photo is taken and the animation is done. the dataUri is passed as a parameter.
38-
* @param dataUri The Data URI of the captured photo.
39-
*/
40-
onTakePhotoAnimationDone?: ((dataUri: string) => void) | undefined;
41-
/**
42-
* The ideal facing mode of the camera, environment or user.
43-
* @example <caption>To request a camera facing the environment.</caption>
44-
* // FACING_MODES.ENVIRONMENT
45-
* @example <caption>To request a camera facing the user.</caption>
46-
* // FACING_MODES.USER
47-
*/
48-
idealFacingMode?: "environment" | "user" | undefined;
49-
/**
50-
* Object of the ideal resolution of the camera.
51-
*/
52-
idealResolution?: { width: number; height: number } | undefined;
53-
/**
54-
* If is true, the camera will start with his own maximum resolution.
55-
*/
56-
isMaxResolution?: boolean | undefined;
57-
/**
58-
* If is true, the camera image will be mirror.
59-
*/
60-
isImageMirror?: boolean | undefined;
61-
/**
62-
* If is true, the camera do not play click sound when the photo was taken.
63-
*/
64-
isSilentMode?: boolean | undefined;
65-
/**
66-
* If is true, the camera image will be set fullscreen to force the maximum width and height of the viewport.
67-
*/
68-
isFullscreen?: boolean | undefined;
69-
/**
70-
* If is true, if the camera start with error, it will show the error between h1 tag on the top of the component.
71-
* Useful to notify the user about permission error.
72-
*/
73-
isDisplayStartCameraError?: boolean | undefined;
74-
/**
75-
* Number of the factor resolution.
76-
* The sizeFactor can be between range of ]0, 1].
77-
* @example <caption>A sizeFactor of 1 get the same resolution of the camera</caption>
78-
* // 1
79-
* @example <caption>A sizeFactor of 0.5 get the half resolution of the camera.</caption>
80-
* // 0.5
81-
*/
82-
sizeFactor?: number | undefined;
83-
/**
84-
* String used to get the desired image type between jpg or png.
85-
* @example <caption>To specify jpg format</caption>
86-
* // IMAGE_TYPES.JPG
87-
* @example <caption>To specify png format</caption>
88-
* // IMAGE_TYPES.PNG
89-
*/
90-
imageType?: "png" | "jpg" | undefined;
91-
/**
92-
* Number used to get the desired compression when jpg is selected.
93-
* Choose a compression between [0, 1], 1 is maximum, 0 is minimum.
94-
*/
95-
imageCompression?: number | undefined;
20+
interface CameraProps {
21+
/**
22+
* Callback called when the camera is started.
23+
*/
24+
onCameraStart?: ((mediaStream: MediaStream) => void) | undefined;
25+
/**
26+
* Callback called when the camera is stopped.
27+
*/
28+
onCameraStop?: (() => void) | undefined;
29+
/**
30+
* Callback called with the error object as parameter when error occur while opening the camera. Often the permission.
31+
* @param error The error information.
32+
*/
33+
onCameraError?: ((error: Error) => void) | undefined;
34+
/**
35+
* The function called when a photo is taken. the dataUri is passed as a parameter.
36+
* @param dataUri The Data URI of the captured photo.
37+
*/
38+
onTakePhoto?: ((dataUri: string) => void) | undefined;
39+
/**
40+
* The function called when a photo is taken and the animation is done. the dataUri is passed as a parameter.
41+
* @param dataUri The Data URI of the captured photo.
42+
*/
43+
onTakePhotoAnimationDone?: ((dataUri: string) => void) | undefined;
44+
/**
45+
* The ideal facing mode of the camera, environment or user.
46+
* @example <caption>To request a camera facing the environment.</caption>
47+
* // FACING_MODES.ENVIRONMENT
48+
* @example <caption>To request a camera facing the user.</caption>
49+
* // FACING_MODES.USER
50+
*/
51+
idealFacingMode?: FacingMode[keyof FacingMode] | undefined;
52+
/**
53+
* Object of the ideal resolution of the camera.
54+
*/
55+
idealResolution?: { width: number; height: number } | undefined;
56+
/**
57+
* If is true, the camera will start with his own maximum resolution.
58+
*/
59+
isMaxResolution?: boolean | undefined;
60+
/**
61+
* If is true, the camera image will be mirror.
62+
*/
63+
isImageMirror?: boolean | undefined;
64+
/**
65+
* If is true, the camera do not play click sound when the photo was taken.
66+
*/
67+
isSilentMode?: boolean | undefined;
68+
/**
69+
* If is true, the camera image will be set fullscreen to force the maximum width and height of the viewport.
70+
*/
71+
isFullscreen?: boolean | undefined;
72+
/**
73+
* If is true, if the camera start with error, it will show the error between h1 tag on the top of the component.
74+
* Useful to notify the user about permission error.
75+
*/
76+
isDisplayStartCameraError?: boolean | undefined;
77+
/**
78+
* Number of the factor resolution.
79+
* The sizeFactor can be between range of ]0, 1].
80+
* @example <caption>A sizeFactor of 1 get the same resolution of the camera</caption>
81+
* // 1
82+
* @example <caption>A sizeFactor of 0.5 get the half resolution of the camera.</caption>
83+
* // 0.5
84+
*/
85+
sizeFactor?: number | undefined;
86+
/**
87+
* String used to get the desired image type between jpg or png.
88+
* @example <caption>To specify jpg format</caption>
89+
* // IMAGE_TYPES.JPG
90+
* @example <caption>To specify png format</caption>
91+
* // IMAGE_TYPES.PNG
92+
*/
93+
imageType?: ImageTypes[keyof ImageTypes] | undefined;
94+
/**
95+
* Number used to get the desired compression when jpg is selected.
96+
* Choose a compression between [0, 1], 1 is maximum, 0 is minimum.
97+
*/
98+
imageCompression?: number | undefined;
99+
}
96100
}
97101

98102
/**
99103
* A camera component.
100104
* @param props Camera properties.
101105
*/
102-
export const Camera: FC<CameraProps>;
106+
declare function ReactHtml5CameraPhoto(props: ReactHtml5CameraPhoto.CameraProps): ReactNode;
103107

104-
export default Camera;
108+
export = ReactHtml5CameraPhoto;

‎types/react-html5-camera-photo/react-html5-camera-photo-tests.tsx‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,46 @@
11
import * as React from "react";
22
import Camera, { FACING_MODES, IMAGE_TYPES } from "react-html5-camera-photo";
33

4-
const CameraBasicApp: React.FC = () => {
5-
return <Camera />;
6-
};
4+
<Camera />;
75

8-
const OptionsCameraApp: React.FC = () => {
9-
return (
10-
<Camera
11-
onCameraStart={() => {}}
12-
onCameraStop={() => {}}
13-
onCameraError={(_error) => {}}
14-
onTakePhoto={(_dataUri) => {}}
15-
onTakePhotoAnimationDone={(_dataUri) => {}}
16-
idealFacingMode="user"
17-
idealResolution={{ width: 800, height: 600 }}
18-
isMaxResolution
19-
isImageMirror
20-
isSilentMode
21-
isFullscreen
22-
isDisplayStartCameraError
23-
sizeFactor={0.5}
24-
imageType={IMAGE_TYPES.PNG}
25-
imageCompression={0.8}
26-
/>
27-
);
28-
};
6+
<Camera
7+
onCameraStart={(mediaStream) => {
8+
// $ExpectType MediaStream
9+
mediaStream;
10+
}}
11+
onCameraStop={() => {}}
12+
onCameraError={(error) => {
13+
// $ExpectType Error
14+
error;
15+
}}
16+
onTakePhoto={(dataUri) => {
17+
// $ExpectType string
18+
dataUri;
19+
}}
20+
onTakePhotoAnimationDone={(dataUri) => {
21+
// $ExpectType string
22+
dataUri;
23+
}}
24+
idealFacingMode={FACING_MODES.USER}
25+
idealResolution={{ width: 800, height: 600 }}
26+
isMaxResolution
27+
isImageMirror
28+
isSilentMode
29+
isFullscreen
30+
isDisplayStartCameraError
31+
sizeFactor={0.5}
32+
imageType={IMAGE_TYPES.PNG}
33+
imageCompression={0.8}
34+
/>;
2935

30-
const OtherOptionsCameraApp: React.FC = () => {
31-
return (
32-
<Camera
33-
idealFacingMode={FACING_MODES.ENVIRONMENT}
34-
imageType={IMAGE_TYPES.JPG}
35-
/>
36-
);
37-
};
36+
<Camera
37+
idealFacingMode={FACING_MODES.ENVIRONMENT}
38+
imageType={IMAGE_TYPES.JPG}
39+
/>;
3840

39-
const BadApp: React.FC = () => {
40-
return (
41-
<Camera
42-
// @ts-expect-error
43-
idealFacingMode={"back"}
44-
// @ts-expect-error
45-
imageType={"tiff"}
46-
/>
47-
);
48-
};
41+
<Camera
42+
// @ts-expect-error
43+
idealFacingMode={"back"}
44+
// @ts-expect-error
45+
imageType={"tiff"}
46+
/>;

‎types/react-html5-camera-photo/tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"jsx": "react",
44
"module": "node16",
55
"lib": [
6-
"es6"
6+
"es6",
7+
"dom"
78
],
89
"noImplicitAny": true,
910
"noImplicitThis": true,

0 commit comments

Comments
 (0)