@herca/rn-kit 0.1.63 → 0.1.65
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/README.md +8 -0
- package/lib/module/DatePicker/DatePicker.js +2 -2
- package/lib/module/DatePicker/DatePicker.js.map +1 -1
- package/lib/module/Input/InputDate.js +170 -0
- package/lib/module/Input/InputDate.js.map +1 -0
- package/lib/module/Input/README_INPUT_DATE.md +265 -0
- package/lib/module/Modal/Modal.js +24 -22
- package/lib/module/Modal/Modal.js.map +1 -1
- package/lib/module/Ui/README_VIEWINSETS.md +126 -0
- package/lib/module/Ui/ViewInsets.js +33 -0
- package/lib/module/Ui/ViewInsets.js.map +1 -0
- package/lib/module/function/README_DATE_FORMATTER.md +397 -0
- package/lib/module/function/dateFormatter.js +38 -0
- package/lib/module/function/dateFormatter.js.map +1 -0
- package/lib/module/index.js +3 -0
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/Calendar/CalendarPropsType.d.ts +5 -0
- package/lib/typescript/src/Calendar/CalendarPropsType.d.ts.map +1 -1
- package/lib/typescript/src/Input/InputDate.d.ts +27 -0
- package/lib/typescript/src/Input/InputDate.d.ts.map +1 -0
- package/lib/typescript/src/Modal/Modal.d.ts.map +1 -1
- package/lib/typescript/src/Ui/ViewInsets.d.ts +13 -0
- package/lib/typescript/src/Ui/ViewInsets.d.ts.map +1 -0
- package/lib/typescript/src/function/dateFormatter.d.ts +14 -0
- package/lib/typescript/src/function/dateFormatter.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +4 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/Calendar/CalendarPropsType.tsx +6 -0
- package/src/DatePicker/DatePicker.tsx +2 -2
- package/src/Input/InputDate.tsx +216 -0
- package/src/Input/README_INPUT_DATE.md +265 -0
- package/src/Modal/Modal.tsx +31 -46
- package/src/Ui/README_VIEWINSETS.md +126 -0
- package/src/Ui/ViewInsets.tsx +46 -0
- package/src/function/README_DATE_FORMATTER.md +397 -0
- package/src/function/dateFormatter.ts +54 -0
- package/src/index.tsx +8 -1
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
# ViewInsets Component
|
|
2
|
+
|
|
3
|
+
Komponen React Native yang menyediakan padding otomatis berdasarkan safe area insets untuk menghindari area sistem seperti notch, status bar, dan navigation bar.
|
|
4
|
+
|
|
5
|
+
## Instalasi
|
|
6
|
+
|
|
7
|
+
Komponen ini membutuhkan dependency berikut:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install react-native-safe-area-context
|
|
11
|
+
# atau
|
|
12
|
+
yarn add react-native-safe-area-context
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Pastikan untuk membungkus aplikasi Anda dengan `SafeAreaProvider`:
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
19
|
+
|
|
20
|
+
function App() {
|
|
21
|
+
return <SafeAreaProvider>{/* Konten aplikasi Anda */}</SafeAreaProvider>;
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Penggunaan Dasar
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
import ViewInsets from './ViewInsets';
|
|
29
|
+
|
|
30
|
+
function MyScreen() {
|
|
31
|
+
return (
|
|
32
|
+
<ViewInsets useTop useBottom>
|
|
33
|
+
{/* Konten Anda */}
|
|
34
|
+
</ViewInsets>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Props
|
|
40
|
+
|
|
41
|
+
| Prop | Type | Default | Deskripsi |
|
|
42
|
+
| ----------- | ---------------------- | ------------ | ------------------------------------------------------- |
|
|
43
|
+
| `children` | `React.ReactNode` | **Required** | Konten yang akan ditampilkan di dalam container |
|
|
44
|
+
| `useTop` | `boolean` | `false` | Menambahkan padding top sesuai safe area inset atas |
|
|
45
|
+
| `useBottom` | `boolean` | `false` | Menambahkan padding bottom sesuai safe area inset bawah |
|
|
46
|
+
| `useLeft` | `boolean` | `false` | Menambahkan padding left sesuai safe area inset kiri |
|
|
47
|
+
| `useRight` | `boolean` | `false` | Menambahkan padding right sesuai safe area inset kanan |
|
|
48
|
+
| `style` | `StyleProp<ViewStyle>` | `undefined` | Style tambahan untuk container |
|
|
49
|
+
| `...rest` | `ViewProps` | - | Props lainnya akan diteruskan ke komponen View |
|
|
50
|
+
|
|
51
|
+
## Contoh Penggunaan
|
|
52
|
+
|
|
53
|
+
### Layar dengan Safe Area Atas dan Bawah
|
|
54
|
+
|
|
55
|
+
```jsx
|
|
56
|
+
<ViewInsets useTop useBottom>
|
|
57
|
+
<Text>Konten aman dari notch dan navigation bar</Text>
|
|
58
|
+
</ViewInsets>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Layar dengan Safe Area Atas Saja
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
<ViewInsets useTop>
|
|
65
|
+
<Text>Konten aman dari status bar/notch</Text>
|
|
66
|
+
</ViewInsets>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Layar dengan Safe Area di Semua Sisi
|
|
70
|
+
|
|
71
|
+
```jsx
|
|
72
|
+
<ViewInsets useTop useBottom useLeft useRight>
|
|
73
|
+
<Text>Konten aman dari semua area sistem</Text>
|
|
74
|
+
</ViewInsets>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### Dengan Custom Style
|
|
78
|
+
|
|
79
|
+
```jsx
|
|
80
|
+
<ViewInsets
|
|
81
|
+
useTop
|
|
82
|
+
useBottom
|
|
83
|
+
style={{ backgroundColor: '#fff', paddingHorizontal: 16 }}
|
|
84
|
+
>
|
|
85
|
+
<Text>Konten dengan style tambahan</Text>
|
|
86
|
+
</ViewInsets>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Dengan Props View Lainnya
|
|
90
|
+
|
|
91
|
+
```jsx
|
|
92
|
+
<ViewInsets useTop useBottom testID="main-container" accessible={true}>
|
|
93
|
+
<Text>Konten dengan props accessibility</Text>
|
|
94
|
+
</ViewInsets>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Fitur
|
|
98
|
+
|
|
99
|
+
- ✅ Otomatis menangani safe area insets
|
|
100
|
+
- ✅ Kontrol granular untuk setiap sisi (atas, bawah, kiri, kanan)
|
|
101
|
+
- ✅ Performa optimal dengan `useMemo` untuk menghindari re-render tidak perlu
|
|
102
|
+
- ✅ Mendukung semua props dari komponen View React Native
|
|
103
|
+
- ✅ TypeScript support dengan type definitions lengkap
|
|
104
|
+
- ✅ Default `flex: 1` untuk kemudahan layout
|
|
105
|
+
|
|
106
|
+
## Catatan
|
|
107
|
+
|
|
108
|
+
- Komponen ini secara default menggunakan `flex: 1` pada container
|
|
109
|
+
- Safe area insets akan disesuaikan secara otomatis berdasarkan perangkat
|
|
110
|
+
- Berguna untuk menghindari area yang tertutup oleh notch, status bar, home indicator, dll
|
|
111
|
+
- Dapat dikombinasikan dengan style custom untuk kebutuhan layout yang lebih kompleks
|
|
112
|
+
|
|
113
|
+
## TypeScript
|
|
114
|
+
|
|
115
|
+
Komponen ini sudah dilengkapi dengan TypeScript definitions. Interface `ViewInsetsProps` extends dari `ViewProps` sehingga mendukung semua props dari View React Native.
|
|
116
|
+
|
|
117
|
+
```typescript
|
|
118
|
+
interface ViewInsetsProps extends ViewProps {
|
|
119
|
+
children: React.ReactNode;
|
|
120
|
+
useTop?: boolean;
|
|
121
|
+
useBottom?: boolean;
|
|
122
|
+
useLeft?: boolean;
|
|
123
|
+
useRight?: boolean;
|
|
124
|
+
bottomType?: 'inset' | 'tabbar'; // Prop ini didefinisikan tapi belum diimplementasikan
|
|
125
|
+
}
|
|
126
|
+
```
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { StyleSheet, View } from 'react-native';
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const ViewInsets = ({
|
|
8
|
+
children,
|
|
9
|
+
style,
|
|
10
|
+
useTop = false,
|
|
11
|
+
useBottom = false,
|
|
12
|
+
useLeft = false,
|
|
13
|
+
useRight = false,
|
|
14
|
+
...rest
|
|
15
|
+
}) => {
|
|
16
|
+
const insets = useSafeAreaInsets();
|
|
17
|
+
const defaultStyle = useMemo(() => StyleSheet.create({
|
|
18
|
+
container: {
|
|
19
|
+
paddingTop: useTop ? insets.top : 0,
|
|
20
|
+
paddingBottom: useBottom ? insets.bottom : 0,
|
|
21
|
+
paddingLeft: useLeft ? insets.left : 0,
|
|
22
|
+
paddingRight: useRight ? insets.right : 0,
|
|
23
|
+
flex: 1
|
|
24
|
+
}
|
|
25
|
+
}), [insets, useTop, useBottom, useLeft, useRight]);
|
|
26
|
+
return /*#__PURE__*/_jsx(View, {
|
|
27
|
+
style: [defaultStyle.container, style],
|
|
28
|
+
...rest,
|
|
29
|
+
children: children
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
export default ViewInsets;
|
|
33
|
+
//# sourceMappingURL=ViewInsets.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["StyleSheet","View","React","useMemo","useSafeAreaInsets","jsx","_jsx","ViewInsets","children","style","useTop","useBottom","useLeft","useRight","rest","insets","defaultStyle","create","container","paddingTop","top","paddingBottom","bottom","paddingLeft","left","paddingRight","right","flex"],"sourceRoot":"../../../src","sources":["Ui/ViewInsets.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAC/D,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,iBAAiB,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWnE,MAAMC,UAAqC,GAAGA,CAAC;EAC7CC,QAAQ;EACRC,KAAK;EACLC,MAAM,GAAG,KAAK;EACdC,SAAS,GAAG,KAAK;EACjBC,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAG,KAAK;EAChB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGX,iBAAiB,CAAC,CAAC;EAElC,MAAMY,YAAY,GAAGb,OAAO,CAC1B,MACEH,UAAU,CAACiB,MAAM,CAAC;IAChBC,SAAS,EAAE;MACTC,UAAU,EAAET,MAAM,GAAGK,MAAM,CAACK,GAAG,GAAG,CAAC;MACnCC,aAAa,EAAEV,SAAS,GAAGI,MAAM,CAACO,MAAM,GAAG,CAAC;MAC5CC,WAAW,EAAEX,OAAO,GAAGG,MAAM,CAACS,IAAI,GAAG,CAAC;MACtCC,YAAY,EAAEZ,QAAQ,GAAGE,MAAM,CAACW,KAAK,GAAG,CAAC;MACzCC,IAAI,EAAE;IACR;EACF,CAAC,CAAC,EACJ,CAACZ,MAAM,EAAEL,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,CAC/C,CAAC;EAED,oBACEP,IAAA,CAACL,IAAI;IAACQ,KAAK,EAAE,CAACO,YAAY,CAACE,SAAS,EAAET,KAAK,CAAE;IAAA,GAAKK,IAAI;IAAAN,QAAA,EACnDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,eAAeD,UAAU","ignoreList":[]}
|
|
@@ -0,0 +1,397 @@
|
|
|
1
|
+
# dateFormatter Function
|
|
2
|
+
|
|
3
|
+
Utility function untuk memformat objek Date ke berbagai format string dengan dukungan multi-bahasa dan kustomisasi tampilan.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```typescript
|
|
8
|
+
import { dateFormatter } from './function/dateFormatter';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Signature
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
dateFormatter({ date, options }: DateFormatterProps): string
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Parameters
|
|
18
|
+
|
|
19
|
+
### DateFormatterProps
|
|
20
|
+
|
|
21
|
+
| Parameter | Type | Required | Deskripsi |
|
|
22
|
+
| --------- | ------------------- | -------- | -------------------------------------------- |
|
|
23
|
+
| `date` | `Date \| DateProps` | ✅ Yes | Objek Date atau DateProps yang akan diformat |
|
|
24
|
+
| `options` | `Object` | ❌ No | Opsi konfigurasi untuk formatting |
|
|
25
|
+
|
|
26
|
+
### Options Object
|
|
27
|
+
|
|
28
|
+
| Property | Type | Default | Deskripsi |
|
|
29
|
+
| ------------- | --------------------------------------------------------- | ----------- | -------------------------------------------------------------- |
|
|
30
|
+
| `useTime` | `boolean` | `false` | Menambahkan waktu (jam:menit:detik) ke output |
|
|
31
|
+
| `useWeekDay` | `boolean` | `false` | Menambahkan nama hari ke output (hanya untuk format localized) |
|
|
32
|
+
| `monthFormat` | `'numeric' \| '2-digit' \| 'long' \| 'short' \| 'narrow'` | `'long'` | Format tampilan bulan (hanya untuk format localized) |
|
|
33
|
+
| `language` | `'en' \| 'id'` | `'en'` | Bahasa untuk format localized |
|
|
34
|
+
| `format` | `'default' \| 'iso' \| 'localized'` | `'default'` | Tipe format output |
|
|
35
|
+
|
|
36
|
+
## Format Types
|
|
37
|
+
|
|
38
|
+
### 1. Default Format
|
|
39
|
+
|
|
40
|
+
Format: `YYYY-MM-DD`
|
|
41
|
+
|
|
42
|
+
```typescript
|
|
43
|
+
dateFormatter({
|
|
44
|
+
date: new Date('2024-03-15'),
|
|
45
|
+
});
|
|
46
|
+
// Output: "2024-03-15"
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### 2. ISO Format
|
|
50
|
+
|
|
51
|
+
Format: `YYYY-MM-DD` atau `YYYY-MM-DD HH:mm:ss` (jika useTime: true)
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
dateFormatter({
|
|
55
|
+
date: new Date('2024-03-15T14:30:45'),
|
|
56
|
+
options: { format: 'iso' },
|
|
57
|
+
});
|
|
58
|
+
// Output: "2024-03-15"
|
|
59
|
+
|
|
60
|
+
dateFormatter({
|
|
61
|
+
date: new Date('2024-03-15T14:30:45'),
|
|
62
|
+
options: { format: 'iso', useTime: true },
|
|
63
|
+
});
|
|
64
|
+
// Output: "2024-03-15 14:30:45"
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### 3. Localized Format
|
|
68
|
+
|
|
69
|
+
Format berdasarkan locale dengan dukungan bahasa.
|
|
70
|
+
|
|
71
|
+
**Bahasa Indonesia:**
|
|
72
|
+
|
|
73
|
+
```typescript
|
|
74
|
+
dateFormatter({
|
|
75
|
+
date: new Date('2024-03-15'),
|
|
76
|
+
options: { format: 'localized', language: 'id' },
|
|
77
|
+
});
|
|
78
|
+
// Output: "15 Maret 2024"
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
**Bahasa Inggris:**
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
dateFormatter({
|
|
85
|
+
date: new Date('2024-03-15'),
|
|
86
|
+
options: { format: 'localized', language: 'en' },
|
|
87
|
+
});
|
|
88
|
+
// Output: "15 March 2024"
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Contoh Penggunaan
|
|
92
|
+
|
|
93
|
+
### Basic Usage
|
|
94
|
+
|
|
95
|
+
```typescript
|
|
96
|
+
// Format default
|
|
97
|
+
const formatted = dateFormatter({
|
|
98
|
+
date: new Date('2024-12-25'),
|
|
99
|
+
});
|
|
100
|
+
console.log(formatted); // "2024-12-25"
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Dengan Waktu
|
|
104
|
+
|
|
105
|
+
```typescript
|
|
106
|
+
// ISO format dengan waktu
|
|
107
|
+
const withTime = dateFormatter({
|
|
108
|
+
date: new Date('2024-12-25T15:30:00'),
|
|
109
|
+
options: {
|
|
110
|
+
format: 'iso',
|
|
111
|
+
useTime: true,
|
|
112
|
+
},
|
|
113
|
+
});
|
|
114
|
+
console.log(withTime); // "2024-12-25 15:30:00"
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
### Format Localized Indonesia
|
|
118
|
+
|
|
119
|
+
```typescript
|
|
120
|
+
// Tanggal lengkap bahasa Indonesia
|
|
121
|
+
const indonesian = dateFormatter({
|
|
122
|
+
date: new Date('2024-12-25'),
|
|
123
|
+
options: {
|
|
124
|
+
format: 'localized',
|
|
125
|
+
language: 'id',
|
|
126
|
+
},
|
|
127
|
+
});
|
|
128
|
+
console.log(indonesian); // "25 Desember 2024"
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Dengan Nama Hari
|
|
132
|
+
|
|
133
|
+
```typescript
|
|
134
|
+
// Dengan nama hari (bahasa Indonesia)
|
|
135
|
+
const withWeekday = dateFormatter({
|
|
136
|
+
date: new Date('2024-12-25'),
|
|
137
|
+
options: {
|
|
138
|
+
format: 'localized',
|
|
139
|
+
language: 'id',
|
|
140
|
+
useWeekDay: true,
|
|
141
|
+
},
|
|
142
|
+
});
|
|
143
|
+
console.log(withWeekday); // "Rabu, 25 Desember 2024"
|
|
144
|
+
|
|
145
|
+
// Dengan nama hari (bahasa Inggris)
|
|
146
|
+
const withWeekdayEn = dateFormatter({
|
|
147
|
+
date: new Date('2024-12-25'),
|
|
148
|
+
options: {
|
|
149
|
+
format: 'localized',
|
|
150
|
+
language: 'en',
|
|
151
|
+
useWeekDay: true,
|
|
152
|
+
},
|
|
153
|
+
});
|
|
154
|
+
console.log(withWeekdayEn); // "Wednesday, 25 December 2024"
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### Custom Month Format
|
|
158
|
+
|
|
159
|
+
```typescript
|
|
160
|
+
// Bulan dalam format singkat
|
|
161
|
+
const shortMonth = dateFormatter({
|
|
162
|
+
date: new Date('2024-12-25'),
|
|
163
|
+
options: {
|
|
164
|
+
format: 'localized',
|
|
165
|
+
language: 'id',
|
|
166
|
+
monthFormat: 'short',
|
|
167
|
+
},
|
|
168
|
+
});
|
|
169
|
+
console.log(shortMonth); // "25 Des 2024"
|
|
170
|
+
|
|
171
|
+
// Bulan dalam format numerik
|
|
172
|
+
const numericMonth = dateFormatter({
|
|
173
|
+
date: new Date('2024-12-25'),
|
|
174
|
+
options: {
|
|
175
|
+
format: 'localized',
|
|
176
|
+
language: 'id',
|
|
177
|
+
monthFormat: 'numeric',
|
|
178
|
+
},
|
|
179
|
+
});
|
|
180
|
+
console.log(numericMonth); // "25/12/2024"
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Tanggal dan Waktu Lengkap
|
|
184
|
+
|
|
185
|
+
```typescript
|
|
186
|
+
// Format lengkap dengan hari dan waktu
|
|
187
|
+
const fullDateTime = dateFormatter({
|
|
188
|
+
date: new Date('2024-12-25T15:30:00'),
|
|
189
|
+
options: {
|
|
190
|
+
format: 'localized',
|
|
191
|
+
language: 'id',
|
|
192
|
+
useWeekDay: true,
|
|
193
|
+
useTime: true,
|
|
194
|
+
},
|
|
195
|
+
});
|
|
196
|
+
console.log(fullDateTime); // "Rabu, 25 Desember 2024 - 15:30"
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Handling Invalid Dates
|
|
200
|
+
|
|
201
|
+
```typescript
|
|
202
|
+
// Date tidak valid
|
|
203
|
+
const invalid1 = dateFormatter({ date: null });
|
|
204
|
+
console.log(invalid1); // ""
|
|
205
|
+
|
|
206
|
+
const invalid2 = dateFormatter({ date: new Date('invalid') });
|
|
207
|
+
console.log(invalid2); // ""
|
|
208
|
+
|
|
209
|
+
const invalid3 = dateFormatter({ date: undefined });
|
|
210
|
+
console.log(invalid3); // ""
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
## Use Cases
|
|
214
|
+
|
|
215
|
+
### 1. Display Tanggal di UI
|
|
216
|
+
|
|
217
|
+
```typescript
|
|
218
|
+
function DateDisplay({ date }: { date: Date }) {
|
|
219
|
+
const formattedDate = dateFormatter({
|
|
220
|
+
date,
|
|
221
|
+
options: {
|
|
222
|
+
format: 'localized',
|
|
223
|
+
language: 'id'
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
return <Text>{formattedDate}</Text>;
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
### 2. Format untuk API Request
|
|
232
|
+
|
|
233
|
+
```typescript
|
|
234
|
+
function submitBooking(date: Date) {
|
|
235
|
+
const isoDate = dateFormatter({
|
|
236
|
+
date,
|
|
237
|
+
options: { format: 'iso' },
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
api.post('/bookings', { date: isoDate });
|
|
241
|
+
}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
### 3. Log dengan Timestamp
|
|
245
|
+
|
|
246
|
+
```typescript
|
|
247
|
+
function logEvent(message: string) {
|
|
248
|
+
const timestamp = dateFormatter({
|
|
249
|
+
date: new Date(),
|
|
250
|
+
options: {
|
|
251
|
+
format: 'iso',
|
|
252
|
+
useTime: true,
|
|
253
|
+
},
|
|
254
|
+
});
|
|
255
|
+
|
|
256
|
+
console.log(`[${timestamp}] ${message}`);
|
|
257
|
+
}
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
### 4. Multi-language Support
|
|
261
|
+
|
|
262
|
+
```typescript
|
|
263
|
+
function DatePicker({ language }: { language: 'en' | 'id' }) {
|
|
264
|
+
const [selectedDate, setSelectedDate] = useState(new Date());
|
|
265
|
+
|
|
266
|
+
const displayDate = dateFormatter({
|
|
267
|
+
date: selectedDate,
|
|
268
|
+
options: {
|
|
269
|
+
format: 'localized',
|
|
270
|
+
language,
|
|
271
|
+
useWeekDay: true
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
return <Text>{displayDate}</Text>;
|
|
276
|
+
}
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
## Output Examples
|
|
280
|
+
|
|
281
|
+
### Default Format
|
|
282
|
+
|
|
283
|
+
```
|
|
284
|
+
2024-03-15
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
### ISO Format
|
|
288
|
+
|
|
289
|
+
```
|
|
290
|
+
2024-03-15
|
|
291
|
+
2024-03-15 14:30:45 (with time)
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
### Localized Format (Indonesian)
|
|
295
|
+
|
|
296
|
+
```
|
|
297
|
+
15 Maret 2024
|
|
298
|
+
Jumat, 15 Maret 2024 (with weekday)
|
|
299
|
+
15 Maret 2024 - 14:30 (with time)
|
|
300
|
+
Jumat, 15 Maret 2024 - 14:30 (full)
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### Localized Format (English)
|
|
304
|
+
|
|
305
|
+
```
|
|
306
|
+
15 March 2024
|
|
307
|
+
Friday, 15 March 2024 (with weekday)
|
|
308
|
+
15 March 2024 - 14:30 (with time)
|
|
309
|
+
Friday, 15 March 2024 - 14:30 (full)
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
## Return Values
|
|
313
|
+
|
|
314
|
+
| Kondisi | Return Value |
|
|
315
|
+
| ---------------------------- | ------------------------------- |
|
|
316
|
+
| Date valid | String terformat sesuai options |
|
|
317
|
+
| Date `null` atau `undefined` | Empty string `""` |
|
|
318
|
+
| Date invalid | Empty string `""` |
|
|
319
|
+
|
|
320
|
+
## Fitur
|
|
321
|
+
|
|
322
|
+
- ✅ Support multiple format types (default, ISO, localized)
|
|
323
|
+
- ✅ Multi-language support (English & Indonesian)
|
|
324
|
+
- ✅ Optional time inclusion
|
|
325
|
+
- ✅ Optional weekday display
|
|
326
|
+
- ✅ Customizable month format
|
|
327
|
+
- ✅ Graceful error handling untuk invalid dates
|
|
328
|
+
- ✅ TypeScript support dengan type definitions
|
|
329
|
+
- ✅ Zero-padded values untuk konsistensi
|
|
330
|
+
- ✅ 24-hour time format
|
|
331
|
+
|
|
332
|
+
## Technical Details
|
|
333
|
+
|
|
334
|
+
### Time Formatting
|
|
335
|
+
|
|
336
|
+
- Waktu menggunakan format 24-jam (HH:mm:ss untuk ISO, HH:mm untuk localized)
|
|
337
|
+
- Separator waktu: `:` untuk semua format
|
|
338
|
+
- Separator antara tanggal dan waktu (localized): `-`
|
|
339
|
+
|
|
340
|
+
### Locale Mapping
|
|
341
|
+
|
|
342
|
+
- `language: 'id'` → `id-ID` locale
|
|
343
|
+
- `language: 'en'` → `en-GB` locale (British English format)
|
|
344
|
+
|
|
345
|
+
### Month Format Options
|
|
346
|
+
|
|
347
|
+
Sesuai dengan `Intl.DateTimeFormatOptions['month']`:
|
|
348
|
+
|
|
349
|
+
- `'numeric'`: 3
|
|
350
|
+
- `'2-digit'`: 03
|
|
351
|
+
- `'long'`: March / Maret
|
|
352
|
+
- `'short'`: Mar / Mar
|
|
353
|
+
- `'narrow'`: M
|
|
354
|
+
|
|
355
|
+
## Best Practices
|
|
356
|
+
|
|
357
|
+
1. **Selalu handle empty/invalid dates** - Function mengembalikan empty string untuk input invalid
|
|
358
|
+
2. **Gunakan format yang sesuai konteks**:
|
|
359
|
+
- `default` atau `iso` untuk data processing/API
|
|
360
|
+
- `localized` untuk user-facing display
|
|
361
|
+
3. **Konsisten dengan language setting** aplikasi
|
|
362
|
+
4. **Cache formatted values** jika digunakan berulang kali
|
|
363
|
+
5. **Validate date objects** sebelum formatting jika memungkinkan
|
|
364
|
+
|
|
365
|
+
## TypeScript
|
|
366
|
+
|
|
367
|
+
Function ini fully typed dengan interface:
|
|
368
|
+
|
|
369
|
+
```typescript
|
|
370
|
+
interface DateFormatterProps {
|
|
371
|
+
date: Date | DateProps;
|
|
372
|
+
options?: {
|
|
373
|
+
useTime?: boolean;
|
|
374
|
+
useWeekDay?: boolean;
|
|
375
|
+
monthFormat?: Intl.DateTimeFormatOptions['month'];
|
|
376
|
+
language?: 'en' | 'id';
|
|
377
|
+
format?: 'default' | 'iso' | 'localized';
|
|
378
|
+
};
|
|
379
|
+
}
|
|
380
|
+
```
|
|
381
|
+
|
|
382
|
+
## Dependencies
|
|
383
|
+
|
|
384
|
+
- `Intl.DateTimeFormat` - Native JavaScript API untuk formatting tanggal
|
|
385
|
+
- Tidak memerlukan library eksternal
|
|
386
|
+
|
|
387
|
+
## Browser/Platform Support
|
|
388
|
+
|
|
389
|
+
Function ini menggunakan `Intl.DateTimeFormat` yang didukung oleh:
|
|
390
|
+
|
|
391
|
+
- ✅ Semua browser modern
|
|
392
|
+
- ✅ React Native (dengan polyfill jika diperlukan)
|
|
393
|
+
- ✅ Node.js
|
|
394
|
+
|
|
395
|
+
## License
|
|
396
|
+
|
|
397
|
+
MIT
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export const dateFormatter = ({
|
|
4
|
+
date,
|
|
5
|
+
options
|
|
6
|
+
}) => {
|
|
7
|
+
if (!date) return '';
|
|
8
|
+
const dateObj = new Date(date);
|
|
9
|
+
if (isNaN(dateObj.getTime())) return '';
|
|
10
|
+
const year = dateObj.getFullYear();
|
|
11
|
+
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
|
|
12
|
+
const day = String(dateObj.getDate()).padStart(2, '0');
|
|
13
|
+
const hours = String(dateObj.getHours()).padStart(2, '0');
|
|
14
|
+
const minutes = String(dateObj.getMinutes()).padStart(2, '0');
|
|
15
|
+
const seconds = String(dateObj.getSeconds()).padStart(2, '0');
|
|
16
|
+
if (options?.format === 'iso') {
|
|
17
|
+
return `${year}-${month}-${day}${options?.useTime ? ` ${hours}:${minutes}:${seconds}` : ''}`;
|
|
18
|
+
} else if (options?.format === 'localized') {
|
|
19
|
+
const datePart = new Intl.DateTimeFormat(options?.language !== 'en' ? 'id-ID' : 'en-GB', {
|
|
20
|
+
day: 'numeric',
|
|
21
|
+
month: options?.monthFormat ?? 'long',
|
|
22
|
+
year: 'numeric',
|
|
23
|
+
...(options?.useWeekDay ? {
|
|
24
|
+
weekday: 'long'
|
|
25
|
+
} : {})
|
|
26
|
+
}).format(dateObj);
|
|
27
|
+
if (!options?.useTime) return datePart;
|
|
28
|
+
const timePart = dateObj.toLocaleTimeString(options?.language !== 'en' ? 'id-ID' : 'en-GB', {
|
|
29
|
+
hour: '2-digit',
|
|
30
|
+
minute: '2-digit',
|
|
31
|
+
hour12: false
|
|
32
|
+
}).replace('.', ':');
|
|
33
|
+
return `${datePart} - ${timePart}`;
|
|
34
|
+
} else {
|
|
35
|
+
return `${year}-${month}-${day}`;
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=dateFormatter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["dateFormatter","date","options","dateObj","Date","isNaN","getTime","year","getFullYear","month","String","getMonth","padStart","day","getDate","hours","getHours","minutes","getMinutes","seconds","getSeconds","format","useTime","datePart","Intl","DateTimeFormat","language","monthFormat","useWeekDay","weekday","timePart","toLocaleTimeString","hour","minute","hour12","replace"],"sourceRoot":"../../../src","sources":["function/dateFormatter.ts"],"mappings":";;AAaA,OAAO,MAAMA,aAAa,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAA4B,CAAC,KAAK;EACtE,IAAI,CAACD,IAAI,EAAE,OAAO,EAAE;EAEpB,MAAME,OAAO,GAAG,IAAIC,IAAI,CAACH,IAAI,CAAC;EAC9B,IAAII,KAAK,CAACF,OAAO,CAACG,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE;EAEvC,MAAMC,IAAI,GAAGJ,OAAO,CAACK,WAAW,CAAC,CAAC;EAClC,MAAMC,KAAK,GAAGC,MAAM,CAACP,OAAO,CAACQ,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC7D,MAAMC,GAAG,GAAGH,MAAM,CAACP,OAAO,CAACW,OAAO,CAAC,CAAC,CAAC,CAACF,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EACtD,MAAMG,KAAK,GAAGL,MAAM,CAACP,OAAO,CAACa,QAAQ,CAAC,CAAC,CAAC,CAACJ,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EACzD,MAAMK,OAAO,GAAGP,MAAM,CAACP,OAAO,CAACe,UAAU,CAAC,CAAC,CAAC,CAACN,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC7D,MAAMO,OAAO,GAAGT,MAAM,CAACP,OAAO,CAACiB,UAAU,CAAC,CAAC,CAAC,CAACR,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAE7D,IAAIV,OAAO,EAAEmB,MAAM,KAAK,KAAK,EAAE;IAC7B,OAAO,GAAGd,IAAI,IAAIE,KAAK,IAAII,GAAG,GAAGX,OAAO,EAAEoB,OAAO,GAAG,IAAIP,KAAK,IAAIE,OAAO,IAAIE,OAAO,EAAE,GAAG,EAAE,EAAE;EAC9F,CAAC,MAAM,IAAIjB,OAAO,EAAEmB,MAAM,KAAK,WAAW,EAAE;IAC1C,MAAME,QAAQ,GAAG,IAAIC,IAAI,CAACC,cAAc,CACtCvB,OAAO,EAAEwB,QAAQ,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,EAC9C;MACEb,GAAG,EAAE,SAAS;MACdJ,KAAK,EAAEP,OAAO,EAAEyB,WAAW,IAAI,MAAM;MACrCpB,IAAI,EAAE,SAAS;MACf,IAAIL,OAAO,EAAE0B,UAAU,GAAG;QAAEC,OAAO,EAAE;MAAO,CAAC,GAAG,CAAC,CAAC;IACpD,CACF,CAAC,CAACR,MAAM,CAAClB,OAAO,CAAC;IAEjB,IAAI,CAACD,OAAO,EAAEoB,OAAO,EAAE,OAAOC,QAAQ;IAEtC,MAAMO,QAAQ,GAAG3B,OAAO,CACrB4B,kBAAkB,CAAC7B,OAAO,EAAEwB,QAAQ,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,EAAE;MAClEM,IAAI,EAAE,SAAS;MACfC,MAAM,EAAE,SAAS;MACjBC,MAAM,EAAE;IACV,CAAC,CAAC,CACDC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;IAEpB,OAAO,GAAGZ,QAAQ,MAAMO,QAAQ,EAAE;EACpC,CAAC,MAAM;IACL,OAAO,GAAGvB,IAAI,IAAIE,KAAK,IAAII,GAAG,EAAE;EAClC;AACF,CAAC","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -66,4 +66,7 @@ export { default as CounterButton } from "./CounterButton/CounterButton.js";
|
|
|
66
66
|
export { default as BadgeIcon } from "./BadgeIcon/BadgeIcon.js";
|
|
67
67
|
export { default as PdfView } from "./FileView/PdfView.js";
|
|
68
68
|
export { default as InputSelect } from "./Input/InputSelect.js";
|
|
69
|
+
export { default as InputDate } from "./Input/InputDate.js";
|
|
70
|
+
export { dateFormatter } from "./function/dateFormatter.js";
|
|
71
|
+
export { default as ViewInsets } from "./Ui/ViewInsets.js";
|
|
69
72
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","ChipItem","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","Icon","Modal","Label","List","ListItem","Loading","Avatar","AvatarGroup","Badge","Alert","Timeline","TimelineItem","Theme","Provider","useFooter","Drawing","Calendar","DatePicker","YearPicker","MonthPicker","TimePicker","Step","StepItem","Tab","TabItem","Toast","TextArea","TextEditor","ToastProvider","useToast","Skeleton","CounterButton","BadgeIcon","PdfView","InputSelect"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,kBAAe;AAEjC,OAAO,SAASC,QAAQA,CAACC,CAAS,EAAEC,CAAS,EAAU;EACrD,OAAOH,KAAK,CAACC,QAAQ,CAACC,CAAC,EAAEC,CAAC,CAAC;AAC7B;AAEA,SAASC,OAAO,IAAIC,SAAS,QAAQ,0BAAuB;AAC5D,SAASD,OAAO,IAAIE,aAAa,QAAQ,8BAA2B;AAEpE,SAASF,OAAO,IAAIG,MAAM,QAAQ,oBAAiB;AACnD,SAASH,OAAO,IAAII,KAAK,QAAQ,kBAAe;AAEhD,SAASJ,OAAO,IAAIK,UAAU,QAAQ,4BAAyB;AAO/D,SAASL,OAAO,IAAIM,WAAW,QAAQ,8BAA2B;AAClE,SAASN,OAAO,IAAIO,SAAS,QAAQ,mBAAgB;AACrD,SAASP,OAAO,IAAIQ,IAAI,QAAQ,cAAW;AAC3C,SAASR,OAAO,IAAIS,QAAQ,QAAQ,wBAAqB;AACzD,SAAST,OAAO,IAAIU,MAAM,QAAQ,gBAAa;AAC/C,SAASV,OAAO,IAAIW,GAAG,QAAQ,aAAU;AACzC,SAASX,OAAO,IAAIY,IAAI,QAAQ,cAAW;AAC3C,SAASZ,OAAO,IAAIa,GAAG,QAAQ,aAAU;AACzC,SAASb,OAAO,IAAIc,IAAI,QAAQ,gBAAa;AAC7C,SAASd,OAAO,IAAIe,QAAQ,QAAQ,oBAAiB;AAMrD,SAASf,OAAO,IAAIgB,MAAM,QAAQ,gBAAa;AAC/C,SAAShB,OAAO,IAAIiB,OAAO,QAAQ,iBAAc;AACjD,SAASjB,OAAO,IAAIkB,MAAM,QAAQ,oBAAiB;AAEnD,SAASlB,OAAO,IAAImB,SAAS,QAAQ,0BAAuB;AAC5D,SAASnB,OAAO,IAAIoB,KAAK,QAAQ,kBAAe;AAChD,SAASpB,OAAO,IAAIqB,aAAa,QAAQ,0BAAuB;AAChE,SAASrB,OAAO,IAAIsB,SAAS,QAAQ,sBAAmB;AACxD,SAAStB,OAAO,IAAIuB,QAAQ,QAAQ,qBAAkB;AACtD,SAASvB,OAAO,IAAIwB,MAAM,QAAQ,mBAAgB;AAClD,SAASxB,OAAO,IAAIyB,QAAQ,QAAQ,wBAAqB;AACzD,SAASzB,OAAO,IAAI0B,YAAY,QAAQ,4BAAyB;AACjE,SAAS1B,OAAO,IAAI2B,WAAW,QAAQ,8BAA2B;AAClE,SAAS3B,OAAO,IAAI4B,IAAI,QAAQ,gBAAa;AAE7C,SAAS5B,OAAO,IAAI6B,KAAK,QAAQ,kBAAe;AAChD,SAAS7B,OAAO,IAAI8B,KAAK,QAAQ,kBAAe;AAChD,SAAS9B,OAAO,IAAI+B,IAAI,QAAQ,gBAAa;AAC7C,SAAS/B,OAAO,IAAIgC,QAAQ,QAAQ,oBAAiB;AACrD,SAAShC,OAAO,IAAIiC,OAAO,QAAQ,sBAAmB;AACtD,SAASjC,OAAO,IAAIkC,MAAM,QAAQ,oBAAiB;AACnD,SAASlC,OAAO,IAAImC,WAAW,QAAQ,yBAAsB;AAC7D,SAASnC,OAAO,IAAIoC,KAAK,QAAQ,kBAAe;AAOhD,SAASpC,OAAO,IAAIqC,KAAK,QAAQ,kBAAe;AAChD,SAASrC,OAAO,IAAIsC,QAAQ,QAAQ,wBAAqB;AACzD,SAAStC,OAAO,IAAIuC,YAAY,QAAQ,4BAAyB;AACjE,SAASvC,OAAO,IAAIwC,KAAK,QAAQ,kBAAe;AAChD,SAASxC,OAAO,IAAIyC,QAAQ,QAAQ,wBAAqB;AACzD,SAASzC,OAAO,IAAI0C,SAAS,QAAQ,wBAAqB;AAC1D,SAAS1C,OAAO,IAAI2C,OAAO,QAAQ,sBAAmB;AACtD,SAAS3C,OAAO,IAAI4C,QAAQ,QAAQ,wBAAqB;
|
|
1
|
+
{"version":3,"names":["RnKit","multiply","a","b","default","Accordion","AccordionItem","Button","Color","Typography","BottomSheet","Container","Card","DropDown","Center","Gap","Grid","Col","Chip","ChipItem","Footer","Devider","Select","LabelForm","Input","InputPassword","InputFile","InputOtp","Switch","CheckBox","CheckBoxList","RadioButton","Icon","Modal","Label","List","ListItem","Loading","Avatar","AvatarGroup","Badge","Alert","Timeline","TimelineItem","Theme","Provider","useFooter","Drawing","Calendar","DatePicker","YearPicker","MonthPicker","TimePicker","Step","StepItem","Tab","TabItem","Toast","TextArea","TextEditor","ToastProvider","useToast","Skeleton","CounterButton","BadgeIcon","PdfView","InputSelect","InputDate","dateFormatter","ViewInsets"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,6 +11,11 @@ export type DateRangeProps = {
|
|
|
11
11
|
endDate?: DateProps;
|
|
12
12
|
date?: DateProps;
|
|
13
13
|
};
|
|
14
|
+
export type FormattedDateRangeProps = {
|
|
15
|
+
startDate?: string;
|
|
16
|
+
endDate?: string;
|
|
17
|
+
date?: string;
|
|
18
|
+
};
|
|
14
19
|
export type CalendarDisabledProp = {
|
|
15
20
|
backgroundColor?: string | undefined;
|
|
16
21
|
textColor?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarPropsType.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/CalendarPropsType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,MAAM,EAAE,EAAE,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;CACP,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG;IAClC,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;CAC5B,CAAC;AACF,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE;SACZ,GAAG,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,gBAAgB;KAC9C,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB"}
|
|
1
|
+
{"version":3,"file":"CalendarPropsType.d.ts","sourceRoot":"","sources":["../../../../src/Calendar/CalendarPropsType.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,MAAM,EAAE,EAAE,CAAC;AAExC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEhD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,oBAAoB,GAAG,OAAO,CAAC;IAC1C,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;CACP,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG;IAClC,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;CAC5B,CAAC;AACF,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE;SACZ,GAAG,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,GAAG,gBAAgB;KAC9C,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { DatePicker, type CalendarModeType, type DateRangeProps } from '@herca/rn-kit';
|
|
2
|
+
type DatePickerProps = React.ComponentProps<typeof DatePicker>;
|
|
3
|
+
type DatePickerPropsWithoutOnChange = Omit<DatePickerProps, 'onChange'>;
|
|
4
|
+
interface BaseProps {
|
|
5
|
+
label: string;
|
|
6
|
+
placeholder: string;
|
|
7
|
+
datePickerProps?: DatePickerPropsWithoutOnChange;
|
|
8
|
+
value?: string;
|
|
9
|
+
valueDateEnd?: string;
|
|
10
|
+
onSelectClick?: () => void;
|
|
11
|
+
onDatePickerClose?: () => void;
|
|
12
|
+
onDateChange?: (value: DateRangeProps) => void;
|
|
13
|
+
mode?: CalendarModeType;
|
|
14
|
+
language?: 'en' | 'id';
|
|
15
|
+
}
|
|
16
|
+
type SingleModeProps = BaseProps & {
|
|
17
|
+
mode?: 'single';
|
|
18
|
+
placeholderDateEnd?: never;
|
|
19
|
+
};
|
|
20
|
+
type RangeModeProps = BaseProps & {
|
|
21
|
+
mode: 'range';
|
|
22
|
+
placeholderDateEnd: string;
|
|
23
|
+
};
|
|
24
|
+
export type Props = SingleModeProps | RangeModeProps;
|
|
25
|
+
export default function InputDate({ label, placeholder, placeholderDateEnd, datePickerProps, value, valueDateEnd, onSelectClick, onDatePickerClose, onDateChange, mode, language, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export {};
|
|
27
|
+
//# sourceMappingURL=InputDate.d.ts.map
|