@teamnhz/rn-ui-toolkit 1.2.0 → 1.2.2

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 (3) hide show
  1. package/dist/components/ImagePicker/index.d.ts +1 -2
  2. package/dist/components/ImagePicker/index.js +52 -27
  3. package/package.json +1 -1
package/dist/components/ImagePicker/index.d.ts CHANGED
@@ -1,9 +1,8 @@
1
1
  import React from "react";
2
2
  type Props = {
3
3
  mediaType: "photo" | "video";
4
- isMultiSelect?: boolean;
5
- onSuccess: (res: any) => void;
6
4
  visible: boolean;
5
+ onSuccess: (res: any) => void;
7
6
  onClose: () => void;
8
7
  enableCompression?: boolean;
9
8
  };
package/dist/components/ImagePicker/index.js CHANGED
@@ -7,21 +7,29 @@ import { Image as ImageCompressor, Video as VideoCompressor, } from "react-nativ
7
7
  import { cameraPermissions, galleryPermissions, checkMicroPhonePermission, } from "../../utils/permissions";
8
8
  import { Colors, Images, Scale, Typography } from "../../styles";
9
9
  //--------------------------------------
10
- // 🟦 FORMAT RESPONSE (single standard)
10
+ // 🟦 FORMAT PATH (always file:// format)
11
11
  //--------------------------------------
12
- const normalizePath = (p) => p ? p.replace("file://", "") : "";
13
- const buildResponse = (raw, compressed) => {
14
- return {
15
- path: normalizePath(compressed || raw?.path || raw?.uri),
16
- originalPath: normalizePath(raw?.path || raw?.uri),
17
- fileName: raw?.fileName || "",
18
- type: raw?.type || "",
19
- duration: raw?.duration || undefined,
20
- };
12
+ const normalizePath = (p) => {
13
+ if (!p)
14
+ return "";
15
+ return p.startsWith("file://") ? p : `file://${p}`;
21
16
  };
22
- const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression = true, }) => {
17
+ //--------------------------------------
18
+ // 🟦 FINAL RESPONSE FORMAT
19
+ //--------------------------------------
20
+ const buildResponse = (raw, compressed) => ({
21
+ path: normalizePath(compressed || raw?.path || raw?.uri),
22
+ originalPath: normalizePath(raw?.path || raw?.uri),
23
+ fileName: raw?.fileName || "",
24
+ type: raw?.type || "",
25
+ duration: raw?.duration || undefined,
26
+ });
27
+ //--------------------------------------
28
+ // 🟦 MAIN COMPONENT
29
+ //--------------------------------------
30
+ const ImagePicker = ({ mediaType, visible, onSuccess, onClose, enableCompression = true, }) => {
23
31
  //--------------------------------------
24
- // 🟦 SEND RAW (loading true)
32
+ // SEND RAW (loader ON)
25
33
  //--------------------------------------
26
34
  const sendRaw = (raw) => {
27
35
  onSuccess({
@@ -30,16 +38,16 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
30
38
  });
31
39
  };
32
40
  //--------------------------------------
33
- // 🟦 SEND FINAL COMPRESSED
41
+ // SEND FINAL (loader OFF)
34
42
  //--------------------------------------
35
- const sendFinal = (raw, compressedPath) => {
43
+ const sendFinal = (raw, compressed) => {
36
44
  onSuccess({
37
45
  loading: false,
38
- data: buildResponse(raw, compressedPath),
46
+ data: buildResponse(raw, compressed),
39
47
  });
40
48
  };
41
49
  //--------------------------------------
42
- // 🟦 COMPRESS IMAGE
50
+ // COMPRESS IMAGE
43
51
  //--------------------------------------
44
52
  const compressImage = async (path) => {
45
53
  try {
@@ -53,7 +61,7 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
53
61
  }
54
62
  };
55
63
  //--------------------------------------
56
- // 🟦 COMPRESS VIDEO
64
+ // COMPRESS VIDEO
57
65
  //--------------------------------------
58
66
  const compressVideo = async (uri) => {
59
67
  try {
@@ -66,13 +74,14 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
66
74
  }
67
75
  };
68
76
  //--------------------------------------
69
- // 🟦 TAKE PHOTO / VIDEO FROM CAMERA
77
+ // CAMERA HANDLER
70
78
  //--------------------------------------
71
79
  const handleCamera = async () => {
80
+ onClose(); // 🔥 CLOSE FIRST (best UX)
72
81
  await cameraPermissions(async (granted) => {
73
82
  if (!granted)
74
83
  return;
75
- // PHOTO FROM CAMERA
84
+ // PHOTO
76
85
  if (mediaType === "photo") {
77
86
  try {
78
87
  const img = await ImageCropPicker.openCamera({
@@ -86,10 +95,10 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
86
95
  sendFinal(img, compressed);
87
96
  }
88
97
  catch (e) {
89
- console.log("Camera Photo Error", e);
98
+ console.log("Camera Photo Error:", e);
90
99
  }
91
100
  }
92
- // VIDEO FROM CAMERA
101
+ // VIDEO
93
102
  else {
94
103
  const mic = await checkMicroPhonePermission();
95
104
  if (!mic)
@@ -108,13 +117,14 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
108
117
  });
109
118
  };
110
119
  //--------------------------------------
111
- // 🟦 PICK FROM GALLERY
120
+ // GALLERY HANDLER
112
121
  //--------------------------------------
113
122
  const handleGallery = async () => {
123
+ onClose(); // 🔥 CLOSE IMMEDIATELY
114
124
  await galleryPermissions(async (granted) => {
115
125
  if (!granted)
116
126
  return;
117
- // PHOTO FROM GALLERY (CROP PICKER)
127
+ // PHOTO (Crop Picker)
118
128
  if (mediaType === "photo") {
119
129
  try {
120
130
  const img = await ImageCropPicker.openPicker({
@@ -128,10 +138,10 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
128
138
  sendFinal(img, compressed);
129
139
  }
130
140
  catch (e) {
131
- console.log("Gallery Photo Error", e);
141
+ console.log("Gallery Photo Error:", e);
132
142
  }
133
143
  }
134
- // VIDEO FROM GALLERY
144
+ // VIDEO
135
145
  else {
136
146
  launchImageLibrary({ mediaType: "video" }, async (res) => {
137
147
  const raw = res?.assets?.[0];
@@ -147,6 +157,8 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
147
157
  });
148
158
  };
149
159
  //--------------------------------------
160
+ // RETURN UI
161
+ //--------------------------------------
150
162
  return (React.createElement(BottomSheet, { visible: visible, onClose: onClose, height: 230 },
151
163
  React.createElement(View, { style: styles.container },
152
164
  React.createElement(TouchableOpacity, { style: styles.row, onPress: handleCamera },
@@ -162,10 +174,23 @@ const ImagePicker = ({ mediaType, onSuccess, visible, onClose, enableCompression
162
174
  React.createElement(Text, { style: styles.text }, "Cancel")))));
163
175
  };
164
176
  export default ImagePicker;
177
+ //--------------------------------------
178
+ // STYLES
179
+ //--------------------------------------
165
180
  const styles = StyleSheet.create({
166
181
  container: { flex: 1, padding: 16 },
167
- row: { flexDirection: "row", alignItems: "center" },
168
- text: { ...Typography.style.standardU(), color: Colors.white },
182
+ row: {
183
+ flexDirection: "row",
184
+ alignItems: "center",
185
+ justifyContent: "center", // 🔥 TEXT CENTERED
186
+ paddingVertical: 14,
187
+ },
188
+ text: {
189
+ ...Typography.style.standardU(),
190
+ color: Colors.white,
191
+ marginLeft: 10,
192
+ textAlign: "center",
193
+ },
169
194
  icon: {
170
195
  width: Scale.moderateScale(20),
171
196
  height: Scale.moderateScale(20),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teamnhz/rn-ui-toolkit",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [