@herca/rn-kit 0.1.27 → 0.1.29
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/Button/type.js +5 -5
- 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 +33 -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/Button/type.tsx +5 -5
- package/src/TextEditor/TextEditor.tsx +12 -7
- package/src/Toast/README.md +32 -16
- package/src/Toast/Toast.tsx +28 -16
- package/src/Toast/ToastContext.tsx +2 -0
|
@@ -172,9 +172,9 @@ export const COLOR_MAP = {
|
|
|
172
172
|
pressBackgroundColor: Color.info[700],
|
|
173
173
|
pressBorderColor: Color.info[700],
|
|
174
174
|
pressTextColor: Color.gray[200],
|
|
175
|
-
disabledBackgroundColor: Color.info[
|
|
175
|
+
disabledBackgroundColor: Color.info[300],
|
|
176
176
|
disabledTextColor: Color.base.white100,
|
|
177
|
-
disabledBorderColor: Color.info[
|
|
177
|
+
disabledBorderColor: Color.info[300],
|
|
178
178
|
outlineBackgroundColor: Color.base.white100,
|
|
179
179
|
outlineTextColor: Color.info[500],
|
|
180
180
|
outlineBorderColor: Color.info[500],
|
|
@@ -182,8 +182,8 @@ export const COLOR_MAP = {
|
|
|
182
182
|
outlineFocusBorderColor: Color.info[200],
|
|
183
183
|
outlinePressTextColor: Color.info[700],
|
|
184
184
|
outlinePressBorderColor: Color.info[700],
|
|
185
|
-
outlineDisabledTextColor: Color.info[
|
|
186
|
-
outlineDisabledBorderColor: Color.info[
|
|
185
|
+
outlineDisabledTextColor: Color.info[300],
|
|
186
|
+
outlineDisabledBorderColor: Color.info[300],
|
|
187
187
|
tertiaryBackgroundColor: 'transparent',
|
|
188
188
|
tertiaryTextColor: Color.info[500],
|
|
189
189
|
tertiaryBorderColor: 'transparent',
|
|
@@ -191,7 +191,7 @@ export const COLOR_MAP = {
|
|
|
191
191
|
tertiaryFocusBorderColor: Color.info[200],
|
|
192
192
|
tertiaryPressTextColor: Color.info[700],
|
|
193
193
|
tertiaryPressBorderColor: 'transparent',
|
|
194
|
-
tertiaryDisabledTextColor: Color.info[
|
|
194
|
+
tertiaryDisabledTextColor: Color.info[300],
|
|
195
195
|
tertiaryDisabledBorderColor: Color.base.white100
|
|
196
196
|
},
|
|
197
197
|
orange: {
|
|
@@ -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,26 @@ const styles = StyleSheet.create({
|
|
|
131
131
|
},
|
|
132
132
|
container: {
|
|
133
133
|
flexDirection: 'row',
|
|
134
|
-
justifyContent: 'space-between'
|
|
134
|
+
justifyContent: 'space-between',
|
|
135
|
+
alignItems: 'center',
|
|
136
|
+
gap: 10
|
|
135
137
|
},
|
|
136
138
|
content: {
|
|
137
139
|
alignItems: 'center',
|
|
138
140
|
flexDirection: 'row',
|
|
141
|
+
flexShrink: 1,
|
|
139
142
|
gap: 8
|
|
143
|
+
},
|
|
144
|
+
wrapper: {
|
|
145
|
+
paddingHorizontal: 12,
|
|
146
|
+
paddingVertical: 8,
|
|
147
|
+
minHeight: 48,
|
|
148
|
+
justifyContent: 'center'
|
|
149
|
+
},
|
|
150
|
+
actionWrapper: {
|
|
151
|
+
flexDirection: 'row',
|
|
152
|
+
alignItems: 'center',
|
|
153
|
+
gap: 10
|
|
140
154
|
}
|
|
141
155
|
});
|
|
142
156
|
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","flexShrink","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,2CA8KhB"}
|
|
@@ -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;AAsCF,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
package/src/Button/type.tsx
CHANGED
|
@@ -234,9 +234,9 @@ export const COLOR_MAP: Record<
|
|
|
234
234
|
pressBackgroundColor: Color.info[700],
|
|
235
235
|
pressBorderColor: Color.info[700],
|
|
236
236
|
pressTextColor: Color.gray[200],
|
|
237
|
-
disabledBackgroundColor: Color.info[
|
|
237
|
+
disabledBackgroundColor: Color.info[300],
|
|
238
238
|
disabledTextColor: Color.base.white100,
|
|
239
|
-
disabledBorderColor: Color.info[
|
|
239
|
+
disabledBorderColor: Color.info[300],
|
|
240
240
|
|
|
241
241
|
outlineBackgroundColor: Color.base.white100,
|
|
242
242
|
outlineTextColor: Color.info[500],
|
|
@@ -245,8 +245,8 @@ export const COLOR_MAP: Record<
|
|
|
245
245
|
outlineFocusBorderColor: Color.info[200],
|
|
246
246
|
outlinePressTextColor: Color.info[700],
|
|
247
247
|
outlinePressBorderColor: Color.info[700],
|
|
248
|
-
outlineDisabledTextColor: Color.info[
|
|
249
|
-
outlineDisabledBorderColor: Color.info[
|
|
248
|
+
outlineDisabledTextColor: Color.info[300],
|
|
249
|
+
outlineDisabledBorderColor: Color.info[300],
|
|
250
250
|
|
|
251
251
|
tertiaryBackgroundColor: 'transparent',
|
|
252
252
|
tertiaryTextColor: Color.info[500],
|
|
@@ -255,7 +255,7 @@ export const COLOR_MAP: Record<
|
|
|
255
255
|
tertiaryFocusBorderColor: Color.info[200],
|
|
256
256
|
tertiaryPressTextColor: Color.info[700],
|
|
257
257
|
tertiaryPressBorderColor: 'transparent',
|
|
258
|
-
tertiaryDisabledTextColor: Color.info[
|
|
258
|
+
tertiaryDisabledTextColor: Color.info[300],
|
|
259
259
|
tertiaryDisabledBorderColor: Color.base.white100,
|
|
260
260
|
},
|
|
261
261
|
orange: {
|
|
@@ -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,13 @@ export default function TextEditor({
|
|
|
166
168
|
{hint}
|
|
167
169
|
</Typography>
|
|
168
170
|
) : null}
|
|
169
|
-
|
|
170
171
|
{showToolbar ? (
|
|
171
|
-
<
|
|
172
|
+
<SafeAreaView
|
|
173
|
+
style={[
|
|
174
|
+
styles.toolbar,
|
|
175
|
+
{ top: Dimensions.get('screen').height - keyboardHeight - 200 },
|
|
176
|
+
]}
|
|
177
|
+
>
|
|
172
178
|
<TouchableOpacity
|
|
173
179
|
onPress={() => formatText('bold')}
|
|
174
180
|
style={styles.toolButton}
|
|
@@ -187,7 +193,7 @@ export default function TextEditor({
|
|
|
187
193
|
>
|
|
188
194
|
<Icon name="UnderLine" />
|
|
189
195
|
</TouchableOpacity>
|
|
190
|
-
</
|
|
196
|
+
</SafeAreaView>
|
|
191
197
|
) : null}
|
|
192
198
|
</View>
|
|
193
199
|
);
|
|
@@ -207,7 +213,6 @@ const styles = StyleSheet.create({
|
|
|
207
213
|
paddingVertical: 8,
|
|
208
214
|
paddingHorizontal: 10,
|
|
209
215
|
position: 'absolute',
|
|
210
|
-
bottom: 0,
|
|
211
216
|
left: 0,
|
|
212
217
|
width: '100%',
|
|
213
218
|
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,26 @@ const styles = StyleSheet.create({
|
|
|
168
166
|
container: {
|
|
169
167
|
flexDirection: 'row',
|
|
170
168
|
justifyContent: 'space-between',
|
|
169
|
+
alignItems: 'center',
|
|
170
|
+
gap: 10,
|
|
171
171
|
},
|
|
172
172
|
content: {
|
|
173
173
|
alignItems: 'center',
|
|
174
174
|
flexDirection: 'row',
|
|
175
|
+
flexShrink: 1,
|
|
175
176
|
gap: 8,
|
|
176
177
|
},
|
|
178
|
+
wrapper: {
|
|
179
|
+
paddingHorizontal: 12,
|
|
180
|
+
paddingVertical: 8,
|
|
181
|
+
minHeight: 48,
|
|
182
|
+
justifyContent: 'center',
|
|
183
|
+
},
|
|
184
|
+
actionWrapper: {
|
|
185
|
+
flexDirection: 'row',
|
|
186
|
+
alignItems: 'center',
|
|
187
|
+
gap: 10,
|
|
188
|
+
},
|
|
177
189
|
});
|
|
178
190
|
|
|
179
191
|
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
|
);
|