From 6dec71ccd43c233a4c7e09bb2e4ad6614d95e974 Mon Sep 17 00:00:00 2001 From: SteffeyDev Date: Fri, 22 Dec 2017 17:34:25 -0500 Subject: [PATCH] Updating details for publishing on NPM --- Popover.js | 34 ++++++++------------ README.md | 88 ++++++++++++++++++++++++++++++++-------------------- package.json | 9 +++--- 3 files changed, 73 insertions(+), 58 deletions(-) diff --git a/Popover.js b/Popover.js index ccac64d..f4ab484 100644 --- a/Popover.js +++ b/Popover.js @@ -19,12 +19,12 @@ const PLACEMENT_OPTIONS = { AUTO: 'auto' }; -export function Point(x, y) { +function Point(x, y) { this.x = x; this.y = y; } -export function Size(width, height) { +function Size(width, height) { this.width = width; this.height = height; } @@ -144,18 +144,6 @@ export default class Popover extends React.Component { fromRect = fromRect || this.props.fromRect; displayArea = displayArea || this.props.displayArea; - //check to see if the mode is select - //and pass in a dummy arrowSize object - var arrowSize; - if (this.props.mode === 'select') { - arrowSize = { - height: 0, - width: 0 - }; - } else { - arrowSize = this.getArrowSize(placement); - } - if (displayArea.x === undefined || displayArea.y === undefined) { displayArea = new Rect(10, isIOS() ? 20 : 10, displayArea.width - 20, displayArea.height - 30); } @@ -601,14 +589,16 @@ export default class Popover extends React.Component { let contentView = ( - - - + {this.props.showBackground && + + + + } this.measureContent(evt)} style={popoverViewStyle}> {this.props.children} - {this.props.mode === 'popover' && this.props.fromRect !== undefined && + {this.props.showArrow && this.props.fromRect !== undefined && this.props.fromRect !== null && @@ -684,9 +674,10 @@ Popover.defaultProps = { placement: PLACEMENT_OPTIONS.AUTO, onClose: noop, doneClosingCallback: noop, - mode: 'popover', showInModal: true, - layoutRtl: false + layoutRtl: false, + showArrow: true, + showBackground: true } Popover.propTypes = { @@ -696,8 +687,9 @@ Popover.propTypes = { placement: PropTypes.oneOf([PLACEMENT_OPTIONS.LEFT, PLACEMENT_OPTIONS.RIGHT, PLACEMENT_OPTIONS.TOP, PLACEMENT_OPTIONS.BOTTOM, PLACEMENT_OPTIONS.AUTO]), onClose: PropTypes.func, doneClosingCallback: PropTypes.func, - mode: PropTypes.string, showInModal: PropTypes.bool, fromRect: PropTypes.objectOf(PropTypes.number), layoutRtl: PropTypes.bool, + showArrow: PropTypes.bool, + showBackground: PropTypes.bool } diff --git a/README.md b/README.md index e98dc97..1ee8261 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,79 @@ -## react-native-popover +## react-native-popover-view -[![npm version](http://img.shields.io/npm/v/react-native-popover.svg?style=flat-square)](https://npmjs.org/package/react-native-popover "View this project on npm") -[![npm version](http://img.shields.io/npm/dm/react-native-popover.svg?style=flat-square)](https://npmjs.org/package/react-native-popover "View this project on npm") -[![npm licence](http://img.shields.io/npm/l/react-native-popover.svg?style=flat-square)](https://npmjs.org/package/react-native-popover "View this project on npm") +[![npm version](http://img.shields.io/npm/v/react-native-popover-view.svg?style=flat-square)](https://npmjs.org/package/react-native-popover-view "View this project on npm") +[![npm version](http://img.shields.io/npm/dm/react-native-popover-view.svg?style=flat-square)](https://npmjs.org/package/react-native-popover-view "View this project on npm") +[![npm licence](http://img.shields.io/npm/l/react-native-popover-view.svg?style=flat-square)](https://npmjs.org/package/react-native-popover-view "View this project on npm") -A `` 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 `` 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. ![Demo](https://raw.githubusercontent.com/jeanregisser/react-native-popover/master/Screenshots/animated.gif) ## 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 ( + + + +) +``` + +## 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 (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). --- diff --git a/package.json b/package.json index 4e91289..cc00d3d 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,14 @@ { - "name": "react-native-popover", - "version": "0.4.9", + "name": "react-native-popover-view", + "version": "0.5.0", "description": "A component for react-native", "main": "Popover.js", - "author": "Jean Regisser (https://github.com/jeanregisser)", + "author": "Peter Steffey (https://github.com/steffeydev)", "keywords": [ "react-component", "react-native", "ios", + "android", "ui", "popover", "modal" @@ -27,7 +28,7 @@ }, "repository": { "type": "git", - "url": "git@github.com:jeanregisser/react-native-popover.git" + "url": "git@github.com:steffeydev/react-native-popover-view.git" }, "devDependencies": { "babel-jest": "^22.0.0",