@herca/rn-kit 0.1.27 → 0.1.28
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.
- package/lib/module/TextEditor/TextEditor.js +6 -6
- package/lib/module/TextEditor/TextEditor.js.map +1 -1
- package/lib/module/Toast/README.md +32 -16
- package/lib/module/Toast/Toast.js +31 -19
- package/lib/module/Toast/Toast.js.map +1 -1
- package/lib/module/Toast/ToastContext.js +2 -1
- package/lib/module/Toast/ToastContext.js.map +1 -1
- package/lib/typescript/src/TextEditor/TextEditor.d.ts.map +1 -1
- package/lib/typescript/src/Toast/Toast.d.ts +2 -1
- package/lib/typescript/src/Toast/Toast.d.ts.map +1 -1
- package/lib/typescript/src/Toast/ToastContext.d.ts +1 -0
- package/lib/typescript/src/Toast/ToastContext.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/TextEditor/TextEditor.tsx +7 -7
- package/src/Toast/README.md +32 -16
- package/src/Toast/Toast.tsx +26 -16
- package/src/Toast/ToastContext.tsx +2 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import { useRef, useState, useEffect } from 'react';
|
|
4
|
-
import { View, StyleSheet, Platform, KeyboardAvoidingView, TouchableOpacity, Keyboard } from 'react-native';
|
|
4
|
+
import { View, StyleSheet, Platform, KeyboardAvoidingView, TouchableOpacity, Keyboard, Dimensions, SafeAreaView } from 'react-native';
|
|
5
5
|
import { WebView } from 'react-native-webview';
|
|
6
6
|
import Color from "../Color/Color.js";
|
|
7
7
|
import LabelForm from "../LabelForm/LabelForm.js";
|
|
@@ -106,11 +106,12 @@ export default function TextEditor({
|
|
|
106
106
|
};
|
|
107
107
|
useEffect(() => {
|
|
108
108
|
const showSub = Keyboard.addListener('keyboardDidShow', e => {
|
|
109
|
-
|
|
109
|
+
setKeyboardHeight(e.endCoordinates.height - 35);
|
|
110
|
+
console.log(e.endCoordinates.height);
|
|
110
111
|
setShowToolbar(true);
|
|
111
112
|
});
|
|
112
113
|
const hideSub = Keyboard.addListener('keyboardDidHide', () => {
|
|
113
|
-
|
|
114
|
+
setKeyboardHeight(0);
|
|
114
115
|
setShowToolbar(false);
|
|
115
116
|
});
|
|
116
117
|
return () => {
|
|
@@ -148,9 +149,9 @@ export default function TextEditor({
|
|
|
148
149
|
variant: "t3",
|
|
149
150
|
weight: "medium",
|
|
150
151
|
children: hint
|
|
151
|
-
}) : null, showToolbar ? /*#__PURE__*/_jsxs(
|
|
152
|
+
}) : null, showToolbar ? /*#__PURE__*/_jsxs(SafeAreaView, {
|
|
152
153
|
style: [styles.toolbar, {
|
|
153
|
-
|
|
154
|
+
top: Dimensions.get("screen").height - keyboardHeight - 200
|
|
154
155
|
}],
|
|
155
156
|
children: [/*#__PURE__*/_jsx(TouchableOpacity, {
|
|
156
157
|
onPress: () => formatText('bold'),
|
|
@@ -190,7 +191,6 @@ const styles = StyleSheet.create({
|
|
|
190
191
|
paddingVertical: 8,
|
|
191
192
|
paddingHorizontal: 10,
|
|
192
193
|
position: 'absolute',
|
|
193
|
-
bottom: 0,
|
|
194
194
|
left: 0,
|
|
195
195
|
width: '100%',
|
|
196
196
|
alignItems: 'center'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useRef","useState","useEffect","View","StyleSheet","Platform","KeyboardAvoidingView","TouchableOpacity","Keyboard","WebView","Color","LabelForm","Typography","Icon","jsx","_jsx","jsxs","_jsxs","TextEditor","label","hasError","hint","onChange","height","keyboardHeight","setKeyboardHeight","showToolbar","setShowToolbar","webviewRef","handleOnChange","data","htmlEditor","gray","formatText","command","current","OS","injectJavaScript","postMessage","showSub","addListener","e","endCoordinates","hideSub","remove","style","styles","container","children","title","editorWrapper","minHeight","behavior","undefined","ref","originWhitelist","source","html","onMessage","event","nativeEvent","webview","javaScriptEnabled","domStorageEnabled","mixedContentMode","allowUniversalAccessFromFileURLs","allowFileAccess","color","danger","variant","weight","toolbar","
|
|
1
|
+
{"version":3,"names":["useRef","useState","useEffect","View","StyleSheet","Platform","KeyboardAvoidingView","TouchableOpacity","Keyboard","Dimensions","SafeAreaView","WebView","Color","LabelForm","Typography","Icon","jsx","_jsx","jsxs","_jsxs","TextEditor","label","hasError","hint","onChange","height","keyboardHeight","setKeyboardHeight","showToolbar","setShowToolbar","webviewRef","handleOnChange","data","htmlEditor","gray","formatText","command","current","OS","injectJavaScript","postMessage","showSub","addListener","e","endCoordinates","console","log","hideSub","remove","style","styles","container","children","title","editorWrapper","minHeight","behavior","undefined","ref","originWhitelist","source","html","onMessage","event","nativeEvent","webview","javaScriptEnabled","domStorageEnabled","mixedContentMode","allowUniversalAccessFromFileURLs","allowFileAccess","color","danger","variant","weight","toolbar","top","get","onPress","toolButton","name","create","backgroundColor","gap","position","flex","flexDirection","borderTopWidth","borderColor","paddingVertical","paddingHorizontal","left","width","alignItems","padding","marginHorizontal","borderRadius","toolText","fontWeight"],"sourceRoot":"../../../src","sources":["TextEditor/TextEditor.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
# 🌐 ToastProvider & useToast()
|
|
2
|
+
|
|
2
3
|
ToastProvider adalah context global untuk menampilkan notifikasi Toast dari bagian manapun dalam aplikasi Anda. Digunakan bersama dengan hook useToast() untuk memanggil toast secara imperatif.
|
|
3
4
|
|
|
4
5
|
## ⚙️ Setup
|
|
6
|
+
|
|
5
7
|
1. Bungkus aplikasi Anda dengan ToastProvider
|
|
6
8
|
|
|
7
9
|
```tsx
|
|
@@ -9,18 +11,12 @@ import React from 'react';
|
|
|
9
11
|
import { ToastProvider } from '@herca/rn-kit';
|
|
10
12
|
|
|
11
13
|
export default function App() {
|
|
12
|
-
return
|
|
13
|
-
<ToastProvider>
|
|
14
|
-
{/* Seluruh aplikasi Anda */}
|
|
15
|
-
</ToastProvider>
|
|
16
|
-
);
|
|
14
|
+
return <ToastProvider>{/* Seluruh aplikasi Anda */}</ToastProvider>;
|
|
17
15
|
}
|
|
18
|
-
|
|
19
16
|
```
|
|
20
17
|
|
|
21
18
|
2. Gunakan useToast() di dalam komponen
|
|
22
19
|
|
|
23
|
-
|
|
24
20
|
```tsx
|
|
25
21
|
import React from 'react';
|
|
26
22
|
import { Button } from '@herca/rn-kit';
|
|
@@ -39,33 +35,53 @@ export default function Dashboard() {
|
|
|
39
35
|
|
|
40
36
|
return <Button title="Simpan" onPress={handleSuccess} />;
|
|
41
37
|
}
|
|
42
|
-
|
|
43
38
|
```
|
|
44
39
|
|
|
45
40
|
## 🧩 API Reference
|
|
41
|
+
|
|
46
42
|
### ✅ ToastProvider
|
|
43
|
+
|
|
47
44
|
Menyediakan context global toast. Harus membungkus komponen root Anda.
|
|
48
45
|
|
|
49
46
|
| Prop | Type | Required | Description |
|
|
50
47
|
| ---------- | ----------- | -------- | --------------------------------- |
|
|
51
|
-
| `children` | `ReactNode` | ✅
|
|
52
|
-
|
|
48
|
+
| `children` | `ReactNode` | ✅ | Semua komponen di dalam aplikasi. |
|
|
53
49
|
|
|
54
50
|
### useToast() Hook
|
|
51
|
+
|
|
55
52
|
| Function | Type |
|
|
56
53
|
| ------------------------- | --------------------------------------------------- |
|
|
57
54
|
| `show(message, options?)` | `(message: string, options?: ToastOptions) => void` |
|
|
58
55
|
|
|
59
56
|
### ToastOptions
|
|
60
|
-
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
57
|
+
|
|
58
|
+
| Option | Type | Default | Description |
|
|
59
|
+
| ---------- | ------------------ | ------------------- | ----------------------------------------------------------------------- |
|
|
60
|
+
| `color` | `ColorVariantType` | `'default'` | Warna latar belakang dan teks. |
|
|
61
|
+
| `icon` | `IconNameProps` | `'ExclamationMark'` | Ikon di samping pesan. |
|
|
62
|
+
| `duration` | `number` (ms) | `3000` | Waktu tampil Toast sebelum hilang. |
|
|
63
|
+
| `children` | `React.ReactNode` | `-` | Konten opsional yang bisa diisi dengan Semua komponen di dalam aplikasi |
|
|
64
|
+
|
|
65
|
+
### 🎨 ToastColor (Available Values)
|
|
66
|
+
|
|
67
|
+
| Value | Keterangan |
|
|
68
|
+
| --------- | ----------------- |
|
|
69
|
+
| `default` | Abu gelap |
|
|
70
|
+
| `primary` | Biru utama |
|
|
71
|
+
| `success` | Hijau sukses |
|
|
72
|
+
| `danger` | Merah galat |
|
|
73
|
+
| `warning` | Kuning peringatan |
|
|
74
|
+
| `info` | Biru informasi |
|
|
75
|
+
| `orange` | Oranye |
|
|
76
|
+
| `purple` | Ungu |
|
|
77
|
+
|
|
78
|
+
---
|
|
65
79
|
|
|
66
80
|
## ❗ Error Handling
|
|
81
|
+
|
|
67
82
|
Error: useToast must be used within a ToastProvider
|
|
83
|
+
|
|
68
84
|
```tsx
|
|
69
85
|
Error: useToast must be used within a ToastProvider
|
|
70
86
|
|
|
71
|
-
```
|
|
87
|
+
```
|
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import { Animated, StyleSheet, View } from 'react-native';
|
|
3
|
+
import { useEffect, useRef } from 'react';
|
|
4
|
+
import { Animated, Pressable, StyleSheet, View } from 'react-native';
|
|
5
5
|
import Color from "../Color/Color.js";
|
|
6
6
|
import Typography from "../Typography/Typography.js";
|
|
7
7
|
import Icon from "../Icon/index.js";
|
|
8
|
-
import Button from "../Button/Button.js";
|
|
9
|
-
import Container from "../Ui/Container.js";
|
|
10
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
9
|
const COLOR_MAP = {
|
|
12
10
|
primary: {
|
|
13
|
-
bg: Color.
|
|
11
|
+
bg: Color.primary[1000],
|
|
14
12
|
border: Color.gray[50],
|
|
15
|
-
text: Color.
|
|
13
|
+
text: Color.base.white100
|
|
16
14
|
},
|
|
17
15
|
default: {
|
|
18
16
|
bg: Color.gray[700],
|
|
@@ -57,7 +55,8 @@ const Toast = ({
|
|
|
57
55
|
onHide,
|
|
58
56
|
color = 'default',
|
|
59
57
|
icon = 'ExclamationMark',
|
|
60
|
-
onClear
|
|
58
|
+
onClear,
|
|
59
|
+
children
|
|
61
60
|
}) => {
|
|
62
61
|
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
63
62
|
const validColors = ['default', 'success', 'danger', 'primary', 'warning', 'info', 'purple', 'orange'];
|
|
@@ -89,7 +88,8 @@ const Toast = ({
|
|
|
89
88
|
style: [styles.toast, baseContainerStyle, {
|
|
90
89
|
opacity: fadeAnim
|
|
91
90
|
}],
|
|
92
|
-
children: /*#__PURE__*/_jsx(
|
|
91
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
92
|
+
style: styles.wrapper,
|
|
93
93
|
children: /*#__PURE__*/_jsxs(View, {
|
|
94
94
|
style: styles.container,
|
|
95
95
|
children: [/*#__PURE__*/_jsxs(View, {
|
|
@@ -103,16 +103,16 @@ const Toast = ({
|
|
|
103
103
|
color: COLOR_MAP[safeColor].text,
|
|
104
104
|
children: message
|
|
105
105
|
})]
|
|
106
|
-
}), /*#__PURE__*/
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
})
|
|
106
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
107
|
+
style: styles.actionWrapper,
|
|
108
|
+
children: [children, /*#__PURE__*/_jsx(Pressable, {
|
|
109
|
+
onPress: handlePressClearButton,
|
|
110
|
+
children: /*#__PURE__*/_jsx(Icon, {
|
|
111
|
+
name: "Times",
|
|
112
|
+
size: 10,
|
|
113
|
+
color: COLOR_MAP[safeColor].text
|
|
114
|
+
})
|
|
115
|
+
})]
|
|
116
116
|
})]
|
|
117
117
|
})
|
|
118
118
|
})
|
|
@@ -131,12 +131,24 @@ const styles = StyleSheet.create({
|
|
|
131
131
|
},
|
|
132
132
|
container: {
|
|
133
133
|
flexDirection: 'row',
|
|
134
|
-
justifyContent: 'space-between'
|
|
134
|
+
justifyContent: 'space-between',
|
|
135
|
+
alignItems: 'center'
|
|
135
136
|
},
|
|
136
137
|
content: {
|
|
137
138
|
alignItems: 'center',
|
|
138
139
|
flexDirection: 'row',
|
|
139
140
|
gap: 8
|
|
141
|
+
},
|
|
142
|
+
wrapper: {
|
|
143
|
+
paddingHorizontal: 12,
|
|
144
|
+
paddingVertical: 8,
|
|
145
|
+
minHeight: 48,
|
|
146
|
+
justifyContent: 'center'
|
|
147
|
+
},
|
|
148
|
+
actionWrapper: {
|
|
149
|
+
flexDirection: 'row',
|
|
150
|
+
alignItems: 'center',
|
|
151
|
+
gap: 10
|
|
140
152
|
}
|
|
141
153
|
});
|
|
142
154
|
export default Toast;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","Animated","Pressable","StyleSheet","View","Color","Typography","Icon","jsx","_jsx","jsxs","_jsxs","COLOR_MAP","primary","bg","border","gray","text","base","white100","default","success","danger","warning","info","orange","purple","Toast","visible","message","duration","onHide","color","icon","onClear","children","fadeAnim","Value","current","validColors","safeColor","includes","baseContainerStyle","flatten","backgroundColor","borderColor","handlePressClearButton","sequence","timing","toValue","useNativeDriver","delay","start","style","styles","toast","opacity","wrapper","container","content","name","size","variant","actionWrapper","onPress","create","position","bottom","left","right","borderWidth","borderRadius","zIndex","flexDirection","justifyContent","alignItems","gap","paddingHorizontal","paddingVertical","minHeight"],"sourceRoot":"../../../src","sources":["Toast/Toast.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -28,7 +28,8 @@ export const ToastProvider = ({
|
|
|
28
28
|
onClear: () => setVisible(false),
|
|
29
29
|
color: options.color,
|
|
30
30
|
icon: options.icon,
|
|
31
|
-
duration: options.duration
|
|
31
|
+
duration: options.duration,
|
|
32
|
+
children: options.children ? options.children : undefined
|
|
32
33
|
})]
|
|
33
34
|
});
|
|
34
35
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","useState","Toast","jsx","_jsx","jsxs","_jsxs","ToastContext","undefined","ToastProvider","children","visible","setVisible","message","setMessage","options","setOptions","icon","show","msg","opts","Provider","value","onHide","onClear","color","duration","useToast","context","Error"],"sourceRoot":"../../../src","sources":["Toast/ToastContext.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAwB,OAAO;AAC3E,OAAOC,KAAK,MAAM,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;
|
|
1
|
+
{"version":3,"names":["createContext","useContext","useState","Toast","jsx","_jsx","jsxs","_jsxs","ToastContext","undefined","ToastProvider","children","visible","setVisible","message","setMessage","options","setOptions","icon","show","msg","opts","Provider","value","onHide","onClear","color","duration","useToast","context","Error"],"sourceRoot":"../../../src","sources":["Toast/ToastContext.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,EAAEC,QAAQ,QAAwB,OAAO;AAC3E,OAAOC,KAAK,MAAM,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAe5B,MAAMC,YAAY,gBAAGR,aAAa,CAA+BS,SAAS,CAAC;AAE3E,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAK;EACtE,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACY,OAAO,EAAEC,UAAU,CAAC,GAAGb,QAAQ,CAAS,EAAE,CAAC;EAClD,MAAM,CAACc,OAAO,EAAEC,UAAU,CAAC,GAAGf,QAAQ,CAAe;IACnDgB,IAAI,EAAE;EACR,CAAC,CAAC;EAEF,MAAMC,IAAI,GAAGA,CAACC,GAAW,EAAEC,IAAmB,KAAK;IACjDN,UAAU,CAACK,GAAG,CAAC;IACfH,UAAU,CAACI,IAAI,IAAI,CAAC,CAAC,CAAC;IACtBR,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,oBACEN,KAAA,CAACC,YAAY,CAACc,QAAQ;IAACC,KAAK,EAAE;MAAEJ;IAAK,CAAE;IAAAR,QAAA,GACpCA,QAAQ,eACTN,IAAA,CAACF,KAAK;MACJS,OAAO,EAAEA,OAAQ;MACjBE,OAAO,EAAEA,OAAQ;MACjBU,MAAM,EAAEA,CAAA,KAAMX,UAAU,CAAC,KAAK,CAAE;MAChCY,OAAO,EAAEA,CAAA,KAAMZ,UAAU,CAAC,KAAK,CAAE;MACjCa,KAAK,EAAEV,OAAO,CAACU,KAAM;MACrBR,IAAI,EAAEF,OAAO,CAACE,IAAK;MACnBS,QAAQ,EAAEX,OAAO,CAACW,QAAS;MAC3BhB,QAAQ,EAAEK,OAAO,CAACL,QAAQ,GAAGK,OAAO,CAACL,QAAQ,GAAGF;IAAU,CAC3D,CAAC;EAAA,CACmB,CAAC;AAE5B,CAAC;AAED,OAAO,MAAMmB,QAAQ,GAAGA,CAAA,KAAwB;EAC9C,MAAMC,OAAO,GAAG5B,UAAU,CAACO,YAAY,CAAC;EACxC,IAAI,CAACqB,OAAO,EAAE,MAAM,IAAIC,KAAK,CAAC,8CAA8C,CAAC;EAC7E,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/TextEditor.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/TextEditor/TextEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAK9C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,MAAY,GACb,EAAE,cAAc,2CAyKhB"}
|
|
@@ -8,7 +8,8 @@ interface ToastProps {
|
|
|
8
8
|
icon?: IconNameProps;
|
|
9
9
|
onClear?: (val: boolean) => void;
|
|
10
10
|
onHide?: (val: boolean) => void;
|
|
11
|
+
children?: React.ReactNode;
|
|
11
12
|
}
|
|
12
|
-
declare const Toast: ({ visible, message, duration, onHide, color, icon, onClear, }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
13
|
+
declare const Toast: ({ visible, message, duration, onHide, color, icon, onClear, children, }: ToastProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
13
14
|
export default Toast;
|
|
14
15
|
//# sourceMappingURL=Toast.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAIA,OAAa,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAIA,OAAa,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAEnD,KAAK,UAAU,GACX,SAAS,GACT,SAAS,GACT,QAAQ,GACR,SAAS,GACT,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,CAAC;AAoDb,UAAU,UAAU;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AACD,QAAA,MAAM,KAAK,GAAI,yEASZ,UAAU,mDAmEZ,CAAC;AAoCF,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/Toast/ToastContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"ToastContext.d.ts","sourceRoot":"","sources":["../../../../src/Toast/ToastContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACzD;AAID,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,4CA4BlE,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,gBAI3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -7,6 +7,8 @@ import {
|
|
|
7
7
|
TouchableOpacity,
|
|
8
8
|
Keyboard,
|
|
9
9
|
type KeyboardEvent,
|
|
10
|
+
Dimensions,
|
|
11
|
+
SafeAreaView,
|
|
10
12
|
} from 'react-native';
|
|
11
13
|
import { WebView } from 'react-native-webview';
|
|
12
14
|
import Color from '../Color/Color';
|
|
@@ -118,13 +120,13 @@ export default function TextEditor({
|
|
|
118
120
|
const showSub = Keyboard.addListener(
|
|
119
121
|
'keyboardDidShow',
|
|
120
122
|
(e: KeyboardEvent) => {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
+
setKeyboardHeight(e.endCoordinates.height - 35);
|
|
124
|
+
console.log(e.endCoordinates.height)
|
|
123
125
|
setShowToolbar(true);
|
|
124
126
|
}
|
|
125
127
|
);
|
|
126
128
|
const hideSub = Keyboard.addListener('keyboardDidHide', () => {
|
|
127
|
-
|
|
129
|
+
setKeyboardHeight(0);
|
|
128
130
|
setShowToolbar(false);
|
|
129
131
|
});
|
|
130
132
|
|
|
@@ -166,9 +168,8 @@ export default function TextEditor({
|
|
|
166
168
|
{hint}
|
|
167
169
|
</Typography>
|
|
168
170
|
) : null}
|
|
169
|
-
|
|
170
171
|
{showToolbar ? (
|
|
171
|
-
<
|
|
172
|
+
<SafeAreaView style={[styles.toolbar, { top: Dimensions.get("screen").height - keyboardHeight - 200}]}>
|
|
172
173
|
<TouchableOpacity
|
|
173
174
|
onPress={() => formatText('bold')}
|
|
174
175
|
style={styles.toolButton}
|
|
@@ -187,7 +188,7 @@ export default function TextEditor({
|
|
|
187
188
|
>
|
|
188
189
|
<Icon name="UnderLine" />
|
|
189
190
|
</TouchableOpacity>
|
|
190
|
-
</
|
|
191
|
+
</SafeAreaView>
|
|
191
192
|
) : null}
|
|
192
193
|
</View>
|
|
193
194
|
);
|
|
@@ -207,7 +208,6 @@ const styles = StyleSheet.create({
|
|
|
207
208
|
paddingVertical: 8,
|
|
208
209
|
paddingHorizontal: 10,
|
|
209
210
|
position: 'absolute',
|
|
210
|
-
bottom: 0,
|
|
211
211
|
left: 0,
|
|
212
212
|
width: '100%',
|
|
213
213
|
alignItems: 'center',
|
package/src/Toast/README.md
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
# 🌐 ToastProvider & useToast()
|
|
2
|
+
|
|
2
3
|
ToastProvider adalah context global untuk menampilkan notifikasi Toast dari bagian manapun dalam aplikasi Anda. Digunakan bersama dengan hook useToast() untuk memanggil toast secara imperatif.
|
|
3
4
|
|
|
4
5
|
## ⚙️ Setup
|
|
6
|
+
|
|
5
7
|
1. Bungkus aplikasi Anda dengan ToastProvider
|
|
6
8
|
|
|
7
9
|
```tsx
|
|
@@ -9,18 +11,12 @@ import React from 'react';
|
|
|
9
11
|
import { ToastProvider } from '@herca/rn-kit';
|
|
10
12
|
|
|
11
13
|
export default function App() {
|
|
12
|
-
return
|
|
13
|
-
<ToastProvider>
|
|
14
|
-
{/* Seluruh aplikasi Anda */}
|
|
15
|
-
</ToastProvider>
|
|
16
|
-
);
|
|
14
|
+
return <ToastProvider>{/* Seluruh aplikasi Anda */}</ToastProvider>;
|
|
17
15
|
}
|
|
18
|
-
|
|
19
16
|
```
|
|
20
17
|
|
|
21
18
|
2. Gunakan useToast() di dalam komponen
|
|
22
19
|
|
|
23
|
-
|
|
24
20
|
```tsx
|
|
25
21
|
import React from 'react';
|
|
26
22
|
import { Button } from '@herca/rn-kit';
|
|
@@ -39,33 +35,53 @@ export default function Dashboard() {
|
|
|
39
35
|
|
|
40
36
|
return <Button title="Simpan" onPress={handleSuccess} />;
|
|
41
37
|
}
|
|
42
|
-
|
|
43
38
|
```
|
|
44
39
|
|
|
45
40
|
## 🧩 API Reference
|
|
41
|
+
|
|
46
42
|
### ✅ ToastProvider
|
|
43
|
+
|
|
47
44
|
Menyediakan context global toast. Harus membungkus komponen root Anda.
|
|
48
45
|
|
|
49
46
|
| Prop | Type | Required | Description |
|
|
50
47
|
| ---------- | ----------- | -------- | --------------------------------- |
|
|
51
|
-
| `children` | `ReactNode` | ✅
|
|
52
|
-
|
|
48
|
+
| `children` | `ReactNode` | ✅ | Semua komponen di dalam aplikasi. |
|
|
53
49
|
|
|
54
50
|
### useToast() Hook
|
|
51
|
+
|
|
55
52
|
| Function | Type |
|
|
56
53
|
| ------------------------- | --------------------------------------------------- |
|
|
57
54
|
| `show(message, options?)` | `(message: string, options?: ToastOptions) => void` |
|
|
58
55
|
|
|
59
56
|
### ToastOptions
|
|
60
|
-
|
|
61
|
-
|
|
|
62
|
-
|
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
57
|
+
|
|
58
|
+
| Option | Type | Default | Description |
|
|
59
|
+
| ---------- | ------------------ | ------------------- | ----------------------------------------------------------------------- |
|
|
60
|
+
| `color` | `ColorVariantType` | `'default'` | Warna latar belakang dan teks. |
|
|
61
|
+
| `icon` | `IconNameProps` | `'ExclamationMark'` | Ikon di samping pesan. |
|
|
62
|
+
| `duration` | `number` (ms) | `3000` | Waktu tampil Toast sebelum hilang. |
|
|
63
|
+
| `children` | `React.ReactNode` | `-` | Konten opsional yang bisa diisi dengan Semua komponen di dalam aplikasi |
|
|
64
|
+
|
|
65
|
+
### 🎨 ToastColor (Available Values)
|
|
66
|
+
|
|
67
|
+
| Value | Keterangan |
|
|
68
|
+
| --------- | ----------------- |
|
|
69
|
+
| `default` | Abu gelap |
|
|
70
|
+
| `primary` | Biru utama |
|
|
71
|
+
| `success` | Hijau sukses |
|
|
72
|
+
| `danger` | Merah galat |
|
|
73
|
+
| `warning` | Kuning peringatan |
|
|
74
|
+
| `info` | Biru informasi |
|
|
75
|
+
| `orange` | Oranye |
|
|
76
|
+
| `purple` | Ungu |
|
|
77
|
+
|
|
78
|
+
---
|
|
65
79
|
|
|
66
80
|
## ❗ Error Handling
|
|
81
|
+
|
|
67
82
|
Error: useToast must be used within a ToastProvider
|
|
83
|
+
|
|
68
84
|
```tsx
|
|
69
85
|
Error: useToast must be used within a ToastProvider
|
|
70
86
|
|
|
71
|
-
```
|
|
87
|
+
```
|
package/src/Toast/Toast.tsx
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Animated, StyleSheet, View } from 'react-native';
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { Animated, Pressable, StyleSheet, View } from 'react-native';
|
|
3
3
|
import Color from '../Color/Color';
|
|
4
4
|
import Typography from '../Typography/Typography';
|
|
5
5
|
import Icon, { type IconNameProps } from '../Icon';
|
|
6
|
-
import Button from '../Button/Button';
|
|
7
|
-
import Container from '../Ui/Container';
|
|
8
6
|
|
|
9
7
|
type ToastColor =
|
|
10
8
|
| 'default'
|
|
@@ -25,9 +23,9 @@ const COLOR_MAP: Record<
|
|
|
25
23
|
}
|
|
26
24
|
> = {
|
|
27
25
|
primary: {
|
|
28
|
-
bg: Color.
|
|
26
|
+
bg: Color.primary[1000],
|
|
29
27
|
border: Color.gray[50],
|
|
30
|
-
text: Color.
|
|
28
|
+
text: Color.base.white100,
|
|
31
29
|
},
|
|
32
30
|
default: {
|
|
33
31
|
bg: Color.gray[700],
|
|
@@ -74,6 +72,7 @@ interface ToastProps {
|
|
|
74
72
|
icon?: IconNameProps;
|
|
75
73
|
onClear?: (val: boolean) => void;
|
|
76
74
|
onHide?: (val: boolean) => void;
|
|
75
|
+
children?: React.ReactNode;
|
|
77
76
|
}
|
|
78
77
|
const Toast = ({
|
|
79
78
|
visible,
|
|
@@ -83,6 +82,7 @@ const Toast = ({
|
|
|
83
82
|
color = 'default',
|
|
84
83
|
icon = 'ExclamationMark',
|
|
85
84
|
onClear,
|
|
85
|
+
children,
|
|
86
86
|
}: ToastProps) => {
|
|
87
87
|
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
88
88
|
const validColors: ToastColor[] = [
|
|
@@ -132,7 +132,7 @@ const Toast = ({
|
|
|
132
132
|
<Animated.View
|
|
133
133
|
style={[styles.toast, baseContainerStyle, { opacity: fadeAnim }]}
|
|
134
134
|
>
|
|
135
|
-
<
|
|
135
|
+
<View style={styles.wrapper}>
|
|
136
136
|
<View style={styles.container}>
|
|
137
137
|
<View style={styles.content}>
|
|
138
138
|
<Icon name={icon} size={20} color={COLOR_MAP[safeColor].text} />
|
|
@@ -140,16 +140,14 @@ const Toast = ({
|
|
|
140
140
|
{message}
|
|
141
141
|
</Typography>
|
|
142
142
|
</View>
|
|
143
|
-
<
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
>
|
|
149
|
-
<Icon name="Times" size={10} color={COLOR_MAP[safeColor].text} />
|
|
150
|
-
</Button>
|
|
143
|
+
<View style={styles.actionWrapper}>
|
|
144
|
+
{children}
|
|
145
|
+
<Pressable onPress={handlePressClearButton}>
|
|
146
|
+
<Icon name="Times" size={10} color={COLOR_MAP[safeColor].text} />
|
|
147
|
+
</Pressable>
|
|
148
|
+
</View>
|
|
151
149
|
</View>
|
|
152
|
-
</
|
|
150
|
+
</View>
|
|
153
151
|
</Animated.View>
|
|
154
152
|
);
|
|
155
153
|
};
|
|
@@ -168,12 +166,24 @@ const styles = StyleSheet.create({
|
|
|
168
166
|
container: {
|
|
169
167
|
flexDirection: 'row',
|
|
170
168
|
justifyContent: 'space-between',
|
|
169
|
+
alignItems: 'center',
|
|
171
170
|
},
|
|
172
171
|
content: {
|
|
173
172
|
alignItems: 'center',
|
|
174
173
|
flexDirection: 'row',
|
|
175
174
|
gap: 8,
|
|
176
175
|
},
|
|
176
|
+
wrapper: {
|
|
177
|
+
paddingHorizontal: 12,
|
|
178
|
+
paddingVertical: 8,
|
|
179
|
+
minHeight: 48,
|
|
180
|
+
justifyContent: 'center',
|
|
181
|
+
},
|
|
182
|
+
actionWrapper: {
|
|
183
|
+
flexDirection: 'row',
|
|
184
|
+
alignItems: 'center',
|
|
185
|
+
gap: 10,
|
|
186
|
+
},
|
|
177
187
|
});
|
|
178
188
|
|
|
179
189
|
export default Toast;
|
|
@@ -7,6 +7,7 @@ interface ToastOptions {
|
|
|
7
7
|
color?: ColorVariantType;
|
|
8
8
|
icon?: IconNameProps;
|
|
9
9
|
duration?: number;
|
|
10
|
+
children?: React.ReactNode;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
interface ToastContextType {
|
|
@@ -39,6 +40,7 @@ export const ToastProvider = ({ children }: { children: ReactNode }) => {
|
|
|
39
40
|
color={options.color}
|
|
40
41
|
icon={options.icon}
|
|
41
42
|
duration={options.duration}
|
|
43
|
+
children={options.children ? options.children : undefined}
|
|
42
44
|
/>
|
|
43
45
|
</ToastContext.Provider>
|
|
44
46
|
);
|