-
Notifications
You must be signed in to change notification settings - Fork 176
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updating details for publishing on NPM
- Loading branch information
1 parent
51b03d5
commit 6dec71c
Showing
3 changed files
with
73 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,79 @@ | ||
| ## react-native-popover | ||
| ## react-native-popover-view | ||
|
|
||
| [](https://npmjs.org/package/react-native-popover "View this project on npm") | ||
| [](https://npmjs.org/package/react-native-popover "View this project on npm") | ||
| [](https://npmjs.org/package/react-native-popover "View this project on npm") | ||
| [](https://npmjs.org/package/react-native-popover-view "View this project on npm") | ||
| [](https://npmjs.org/package/react-native-popover-view "View this project on npm") | ||
| [](https://npmjs.org/package/react-native-popover-view "View this project on npm") | ||
|
|
||
| A `<Popover>` component for react-native. Great for use in Tablets; you can put entire views that you would normally show in a modal (on a smaller device) into a popover, optionally give it an anchor point, and have it float on top of all of the other views. | ||
| A well-tested, lightweight `<Popover>` component for react-native. Great for use in Tablets; you can put entire views that you would normally show in a modal (on a smaller device) into a popover, optionally give it an anchor point, and have it float on top of all of the other views. | ||
|
|
||
| It is written entirely in JavaScript, but uses [React Native's native driver](https://facebook.github.io/react-native/blog/2017/02/14/using-native-driver-for-animated.html) for responsive animations, even when the JS thread is busy. | ||
|
|
||
| ### A Note on Origins | ||
|
|
||
| This is a fork of [react-native-popover](https://github.com/jeanregisser/react-native-popover), originally created by Jean Regisser but since abandoned. | ||
|
|
||
| Similar forks exist on Github (such as [react-native-modal-popover](https://github.com/doomsower/react-native-modal-popover)), but this is the first to be published on NPM as far as I know. | ||
|
|
||
|  | ||
|
|
||
| ## Install | ||
|
|
||
| ```shell | ||
| npm i --save https://github.com/SteffeyDev/react-native-popover.git | ||
| npm i --save react-native-popover-view@latest | ||
| ``` | ||
| or | ||
| ```shell | ||
| yarn add https://github.com/SteffeyDev/react-native-popover.git --save | ||
| yarn add react-native-popover-view@latest | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx | ||
| 'use strict'; | ||
| import Popover from 'react-native-popover-view' | ||
|
|
||
| ... | ||
| render ( | ||
| <Popover | ||
| isVisible={this.state.isVisible} /> | ||
| <CustomElement /> | ||
| </Popover> | ||
| ) | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| Prop | Type | Optional | Default | Description | ||
| ----------------- | -------- | -------- | ----------- | ----------- | ||
| isVisible | bool | Yes | false | Show/Hide the popover | ||
| fromRect | rect | Yes | null | Rectangle at which to anchor the popover. If not provided, the popover will appear in the center of the screen. | ||
| displayArea | rect | Yes | screen rect | Area where the popover is allowed to be displayed | ||
| placement | string | Yes | 'auto' | How to position the popover - top | bottom | left | right | auto. When 'auto' is specified, it will determine the ideal placement so that the popover is fully visible within `displayArea`. | ||
| onClose | function | Yes | | Callback to be fired when the user taps the popover | ||
| doneClosingCallback | function | Yes | | Callback to be fired when the popover is finished closing (after animation) | ||
| showInModal | bool | Yes | true | Whether the Popover should be encapsulated in the [Modal view from RN](https://facebook.github.io/react-native/docs/modal.html), which allows it to show above all other content, or just be present in the view hierarchy like a normal view. | ||
| showArrow | bool | Yes | true | Whether the arrow that points to the rect (passing in as `fromRect`) is shown. If `fromRect` is null, the arrow will never be shown. | ||
| showBackground | bool | Yes | true | Whether the background behind the popover darkens when the popover is shown. | ||
|
|
||
| rect is an object with the following properties: `{x: number, y: number, width: number, height: number}`. You can create the object yourself, or `import Popover, { Rect } from 'react-native-popover-view` and create a rect by calling `new Rect(x, y, width, height)`. | ||
|
|
||
| var React = require('react'); | ||
| var Popover = require('react-native-popover'); | ||
| var { | ||
| ## Full Example | ||
|
|
||
| ```jsx | ||
| import React, { Component } from 'react'; | ||
| import Popover from 'react-native-popover-view; | ||
| import { | ||
| AppRegistry, | ||
| StyleSheet, | ||
| Text, | ||
| TouchableHighlight, | ||
| View, | ||
| } = require('react-native'); | ||
|
|
||
| var PopoverExample = React.createClass({ | ||
| getInitialState() { | ||
| return { | ||
| isVisible: false, | ||
| buttonRect: {}, | ||
| }; | ||
| }, | ||
| } from 'react-native'; | ||
| class PopoverExample extends Component { | ||
| this.state = { | ||
| isVisible: false, | ||
| buttonRect: {}, | ||
| } | ||
| showPopover() { | ||
| this.refs.button.measure((ox, oy, width, height, px, py) => { | ||
|
|
@@ -95,22 +129,10 @@ var styles = StyleSheet.create({ | |
| AppRegistry.registerComponent('PopoverExample', () => PopoverExample); | ||
| ``` | ||
|
|
||
| ## Props | ||
| Prop | Type | Optional | Default | Description | ||
| ----------------- | -------- | -------- | ----------- | ----------- | ||
| isVisible | bool | Yes | false | Show/Hide the popover | ||
| fromRect | rect | Yes | {} | Rectangle at which to anchor the popover. If not provided, the popover will appear in the center of the screen. | ||
| displayArea | rect | Yes | screen rect | Area where the popover is allowed to be displayed | ||
| placement | string | Yes | 'auto' | How to position the popover - top | bottom | left | right | auto. When 'auto' is specified, it will determine the ideal placement so that the popover is fully visible within `displayArea`. | ||
| onClose | function | Yes | | Callback to be fired when the user taps the popover | ||
| customShowHandler | function | Yes | | Custom show animation handler - uses a [react-tween-state wrapper](https://github.com/jeanregisser/react-native-popover/blob/master/Transition.js) API in order to show the modal. See [default show handler](https://github.com/jeanregisser/react-native-popover/blob/754a87b0befccfe534774f3166765732a99bfddf/Popover.js#L185-L192). | ||
| customHideHandler | function | Yes | | Custom hide animation handler - uses a [react-tween-state wrapper](https://github.com/jeanregisser/react-native-popover/blob/master/Transition.js) API in order to hide the modal. See [default hide handler](https://github.com/jeanregisser/react-native-popover/blob/754a87b0befccfe534774f3166765732a99bfddf/Popover.js#L193-L200). | ||
| rect is an object with the following properties: `{x: number, y: number, width: number, height: number}` | ||
|
|
||
| ## Credits | ||
|
|
||
| Original codebase created by Jean Regisser <[email protected]> (https://github.com/jeanregisser) as [react-native-popover](https://github.com/jeanregisser/react-native-popover), which is now gone stale | ||
| The code supporting animations was inspired and adapted from [@brentvatne](https://github.com/brentvatne)'s [Transition.js mixin](https://github.com/brentvatne/react-native-modal/blob/8020a920e7f08a0f1acd6ce897fe888fa39a51bf/Transitions.js). | ||
|
|
||
| --- | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,14 @@ | ||
| { | ||
| "name": "react-native-popover", | ||
| "version": "0.4.9", | ||
| "name": "react-native-popover-view", | ||
| "version": "0.5.0", | ||
| "description": "A <Popover /> component for react-native", | ||
| "main": "Popover.js", | ||
| "author": "Jean Regisser <jean.regisser@gmail.com> (https://github.com/jeanregisser)", | ||
| "author": "Peter Steffey <steffeydev@icloud.com> (https://github.com/steffeydev)", | ||
| "keywords": [ | ||
| "react-component", | ||
| "react-native", | ||
| "ios", | ||
| "android", | ||
| "ui", | ||
| "popover", | ||
| "modal" | ||
|
|
@@ -27,7 +28,7 @@ | |
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "[email protected]:jeanregisser/react-native-popover.git" | ||
| "url": "[email protected]:steffeydev/react-native-popover-view.git" | ||
| }, | ||
| "devDependencies": { | ||
| "babel-jest": "^22.0.0", | ||
|
|
||