From ffd2d3ad72a8c8fc7bb9569ea119d4789f8971d6 Mon Sep 17 00:00:00 2001 From: metinozkan Date: Tue, 4 Jan 2022 20:52:35 +0300 Subject: [PATCH] add stickyHeader component, update readme --- README.md | 43 ++++++++++++++++++++++--------------------- src/Panel.tsx | 5 ++++- src/typings.d.ts | 5 +++++ 3 files changed, 31 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 778eca9..a9193a8 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ To install the package; ``` -$ yarn add rn-swipeable-panel +yarn add rn-swipeable-panel ``` ✅ It is done! @@ -71,26 +71,27 @@ export default App = () => {
-| Properties | Type | Description | Default | -| ----------------------- | ---------- | ----------------------------------------------------------- | ------- | -| **isActive** | `bool` | Show/Hide the panel | `false` | -| **onClose** | `Function` | Fired when the panel is closed | | -| **showCloseButton** | `bool` | Set true if you want to show close button | | -| **fullWidth** | `bool` | Set true if you want to make full with panel | `false` | -| **openLarge** | `bool` | Set true if you want to open panel large by default | `false` | -| **onlyLarge** | `bool` | Set true if you want to let panel open just large mode | `false` | -| **onlySmall** | `bool` | Set true if you want to let panel open just small mode | `false` | -| **noBackgroundOpacity** | `bool` | Set true if you want to disable black background opacity | `false` | -| **style** | `Object` | Use this prop to override panel style | `{}` | -| **closeRootStyle** | `Object` | Use this prop to override close button background style | `{}` | -| **closeIconStyle** | `Object` | Use this prop to override close button icon style | `{}` | -| **barStyle** | `Object` | Use this prop to override bar style | `{}` | -| **smallPanelHeight** | `Object` | Use this prop to override the small panel default height | | -| **barContainerStyle** | `Object` | Use this prop to override bar container style | `{}` | -| **closeOnTouchOutside** | `bool` | Set true if you want to close panel by touching outside | `false` | -| **allowTouchOutside** | `bool` | Set true if you want to make toucable outside of panel | `false` | -| **noBar** | `bool` | Set true if you want to remove gray bar | `false` | -| **scrollViewProps** | `Object` | Use this prop to override scroll view that inside the panel | `{}` | +| Properties | Type | Description | Default | +| ----------------------- | ------------ | ----------------------------------------------------------- | ------- | +| **isActive** | `bool` | Show/Hide the panel | `false` | +| **onClose** | `Function` | Fired when the panel is closed | | +| **showCloseButton** | `bool` | Set true if you want to show close button | | +| **fullWidth** | `bool` | Set true if you want to make full with panel | `false` | +| **openLarge** | `bool` | Set true if you want to open panel large by default | `false` | +| **onlyLarge** | `bool` | Set true if you want to let panel open just large mode | `false` | +| **onlySmall** | `bool` | Set true if you want to let panel open just small mode | `false` | +| **noBackgroundOpacity** | `bool` | Set true if you want to disable black background opacity | `false` | +| **style** | `Object` | Use this prop to override panel style | `{}` | +| **closeRootStyle** | `Object` | Use this prop to override close button background style | `{}` | +| **closeIconStyle** | `Object` | Use this prop to override close button icon style | `{}` | +| **barStyle** | `Object` | Use this prop to override bar style | `{}` | +| **smallPanelHeight** | `Object` | Use this prop to override the small panel default height | | +| **barContainerStyle** | `Object` | Use this prop to override bar container style | `{}` | +| **closeOnTouchOutside** | `bool` | Set true if you want to close panel by touching outside | `false` | +| **allowTouchOutside** | `bool` | Set true if you want to make toucable outside of panel | `false` | +| **noBar** | `bool` | Set true if you want to remove gray bar | `false` | +| **scrollViewProps** | `Object` | Use this prop to override scroll view that inside the panel | `{}` | +| **stickyHeader** | `JSXElement` | Use this prop to override scroll view that inside the panel | | #### ⭐️ Show Your Support diff --git a/src/Panel.tsx b/src/Panel.tsx index 6eb28e4..1a9b9e9 100644 --- a/src/Panel.tsx +++ b/src/Panel.tsx @@ -40,9 +40,10 @@ type SwipeablePanelProps = { smallPanelHeight?: number; noBar?: boolean; barStyle?: object; - barContainerStyle?: object, + barContainerStyle?: object; allowTouchOutside?: boolean; scrollViewProps?: ScrollViewProps; + stickyHeader?: () => React.ReactNode; }; type MaybeAnimated = T | Animated.Value; @@ -255,6 +256,8 @@ class SwipeablePanel extends Component {this.props.showCloseButton && ( )} + {this.props.stickyHeader && this.props.stickyHeader()} + { return false; diff --git a/src/typings.d.ts b/src/typings.d.ts index 117d98b..598d16c 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -97,6 +97,11 @@ declare interface SwipeablePanelProps extends React.Props { * You can pass your scroll view props */ scrollViewProps?: ScrollViewProps; + + /** + * You can pass your sticky header component + */ + stickyHeader?: () => React.ReactNode; } declare var LARGE_PANEL_CONTENT_HEIGHT: number;