bagasbanuna
1a5ca78041
OS_Wrapper System: - Simplify API: Remove PageWrapper, merge keyboard props into OS_Wrapper - Add auto-scroll when keyboard appears (Android only) - Add tap-to-dismiss keyboard for both Static and List modes - Fix contentPaddingBottom default to 250px (prevent keyboard overlap) - Change default contentPadding to 0 (per-screen control) - Remove Platform.OS checks from IOSWrapper and AndroidWrapper Constants: - Add PADDING_INLINE constant (16px) for consistent inline padding - Add OS_PADDING_TOP constants for tab layouts Job Screens Migration (9 files): - Apply PADDING_INLINE to all Job screens: - ScreenBeranda, ScreenBeranda2 - ScreenArchive, ScreenArchive2 - MainViewStatus, MainViewStatus2 - ScreenJobCreate, ScreenJobEdit - Job detail screen Keyboard Handling: - Simplified useKeyboardForm hook - Auto-scroll by keyboard height when keyboard appears - Track scroll position for accurate scroll targets - TouchableWithoutFeedback wraps all content for tap-to-dismiss Documentation: - Update TASK-005 with Phase 1 completion status - Update Quick Reference with unified API examples Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com> Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
159 lines
3.7 KiB
Markdown
159 lines
3.7 KiB
Markdown
# OS_Wrapper Quick Reference
|
|
|
|
## 📦 Import
|
|
```tsx
|
|
import { OS_Wrapper, IOSWrapper, AndroidWrapper } from "@/components";
|
|
```
|
|
|
|
## 🎯 Usage Examples
|
|
|
|
### 1. OS_Wrapper - List Mode (Most Common)
|
|
```tsx
|
|
<OS_Wrapper
|
|
listData={data}
|
|
renderItem={({ item }) => <Card item={item} />}
|
|
ListEmptyComponent={<EmptyState />}
|
|
ListFooterComponent={<LoadingFooter />}
|
|
onEndReached={loadMore}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={refreshing}
|
|
onRefresh={onRefresh}
|
|
/>
|
|
}
|
|
/>
|
|
```
|
|
|
|
### 2. OS_Wrapper - Static Mode
|
|
```tsx
|
|
<OS_Wrapper
|
|
headerComponent={<HeaderSection />}
|
|
footerComponent={<FooterSection />}
|
|
withBackground={true}
|
|
>
|
|
<YourContent />
|
|
</OS_Wrapper>
|
|
```
|
|
|
|
### 3. OS_Wrapper - Form dengan Keyboard Handling
|
|
```tsx
|
|
<OS_Wrapper
|
|
enableKeyboardHandling
|
|
keyboardScrollOffset={150}
|
|
contentPaddingBottom={100}
|
|
footerComponent={
|
|
<BoxButtonOnFooter>
|
|
<ButtonCustom isLoading={loading} onPress={handleSubmit}>
|
|
Submit
|
|
</ButtonCustom>
|
|
</BoxButtonOnFooter>
|
|
}
|
|
>
|
|
<ScrollView>
|
|
<TextInputCustom />
|
|
<TextInputCustom />
|
|
</ScrollView>
|
|
</OS_Wrapper>
|
|
```
|
|
|
|
### 4. Platform-Specific (Rare Cases)
|
|
```tsx
|
|
// iOS only
|
|
<IOSWrapper>
|
|
<Content />
|
|
</IOSWrapper>
|
|
|
|
// Android only
|
|
<AndroidWrapper enableKeyboardHandling>
|
|
<Content />
|
|
</AndroidWrapper>
|
|
```
|
|
|
|
## 📋 Props Reference
|
|
|
|
### Common Props (iOS + Android)
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `withBackground` | boolean | false | Show background image |
|
|
| `headerComponent` | ReactNode | - | Sticky header component |
|
|
| `footerComponent` | ReactNode | - | Fixed footer component |
|
|
| `floatingButton` | ReactNode | - | Floating button |
|
|
| `hideFooter` | boolean | false | Hide footer section |
|
|
| `edgesFooter` | Edge[] | [] | Safe area edges |
|
|
| `style` | ViewStyle | - | Custom container style |
|
|
| `refreshControl` | RefreshControl | - | Pull to refresh control |
|
|
|
|
### Android-Only Props (Ignored on iOS)
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `enableKeyboardHandling` | boolean | false | Auto-scroll on input focus |
|
|
| `keyboardScrollOffset` | number | 100 | Scroll offset when keyboard appears |
|
|
| `contentPaddingBottom` | number | 80 | Extra bottom padding |
|
|
| `contentPadding` | number | 16 | Content padding (all sides) |
|
|
|
|
## 🔄 Migration Pattern
|
|
|
|
```diff
|
|
- import NewWrapper from "@/components/_ShareComponent/NewWrapper";
|
|
+ import { OS_Wrapper } from "@/components";
|
|
|
|
- <NewWrapper
|
|
+ <OS_Wrapper
|
|
listData={data}
|
|
renderItem={renderItem}
|
|
{...otherProps}
|
|
/>
|
|
```
|
|
|
|
```diff
|
|
- import { NewWrapper_V2 } from "@/components/_ShareComponent/NewWrapper_V2";
|
|
+ import { OS_Wrapper } from "@/components";
|
|
|
|
- <NewWrapper_V2 enableKeyboardHandling>
|
|
+ <OS_Wrapper enableKeyboardHandling>
|
|
<FormContent />
|
|
</NewWrapper_V2>
|
|
```
|
|
|
|
## 💡 Tips
|
|
|
|
1. **Pakai OS_Wrapper** untuk semua screen (list, detail, form)
|
|
2. **Tambahkan `enableKeyboardHandling`** untuk form dengan input fields
|
|
3. **Jangan mix** wrapper lama dan baru di screen yang sama
|
|
4. **Test di kedua platform** sebelum commit
|
|
5. **Keyboard handling** hanya bekerja di Android (iOS mengabaikan props ini)
|
|
|
|
## ⚠️ Common Mistakes
|
|
|
|
### ❌ Wrong
|
|
```tsx
|
|
// Jangan import langsung dari file
|
|
import OS_Wrapper from "@/components/_ShareComponent/OS_Wrapper";
|
|
|
|
// Jangan mix wrapper
|
|
<OS_Wrapper>
|
|
<NewWrapper>{content}</NewWrapper>
|
|
</OS_Wrapper>
|
|
|
|
// Jangan pakai PageWrapper (sudah tidak ada)
|
|
import { PageWrapper } from "@/components";
|
|
```
|
|
|
|
### ✅ Correct
|
|
```tsx
|
|
// Import dari @/components
|
|
import { OS_Wrapper } from "@/components";
|
|
|
|
// Simple content
|
|
<OS_Wrapper>{content}</OS_Wrapper>
|
|
|
|
// Form with keyboard handling
|
|
<OS_Wrapper enableKeyboardHandling keyboardScrollOffset={150}>
|
|
<FormContent />
|
|
</OS_Wrapper>
|
|
```
|
|
|
|
---
|
|
|
|
Last updated: 2026-04-06
|