react-layer-stack - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

demo/src/components/FixedLayer.js

@@ -14,2 +14,8 @@ import React, { Component } from 'react';
 
+const escapeStack = [];
+
+window.addEventListener('keydown',
+  (e) => escapeStack.length && 27 === e.keyCode && escapeStack[escapeStack.length-1].call(null, e),
+  true);
+
 export default class FixedLayer extends Component {
@@ -22,5 +28,18 @@
 
+  componentWillMount() {
+    if (this.props.onEsc) {
+      escapeStack.push(this.props.onEsc)
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.onEsc) {
+      escapeStack.pop()
+    }
+  }
+
   render () {
     const divProps = { ...this.props };
     delete divProps.zIndex;
+    delete divProps.onEsc;
     return (
@@ -27,0 +46,0 @@ <div { ...divProps }

demo/src/Demo.js

@@ -46,3 +46,3 @@ import React, { Component } from 'react';
         { this.renderMovableWindow() }
-        { this.renderSimpleWindow() }
+        { this.renderSimpleModal() }
         { this.renderLightbox() }
@@ -98,3 +98,3 @@ <Markdown>
           #### SIMPLE MODALS
-          <LayerContext id="simple_window">{({ show }) => (
+          <LayerContext id="simple_modal">{({ show }) => (
             <button onClick={ () => show() }>OPEN SIMPLE MODAL</button> )}
@@ -118,8 +118,9 @@ </LayerContext>
 
-  renderSimpleWindow() {
+  renderSimpleModal() {
     return (
       <Layer
-        id="simple_window">{({index, hide, show}) => (
+        id="simple_modal">{({index, hide, show}) => (
         <FixedLayer
           style={ { background: 'rgba(0,0,0,0.3)' } }
+          onEsc={ hide }
           onClick={ hide }
@@ -126,0 +127,0 @@ zIndex={ index * 100 }>

lib/components.js

@@ -44,2 +44,6 @@ 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.LayerContext = exports.Layer = exports.LayerStackMountPoint = undefined;var _react = require('react');var _react2 = _interopRequireDefault(_react);
   _react2.default.createClass({
+    propTypes: {
+      use: _react.PropTypes.array },
+
+
     componentWillMount: function componentWillMount() {
@@ -54,4 +58,3 @@ this.props.register(this.props.id, this.props.children, this.props.mountPointId);
     shouldComponentUpdate: function shouldComponentUpdate(newProps) {var _props3 =
-      this.props;var children = _props3.children;var register = _props3.register;var id = _props3.id;var mountPointId = _props3.mountPointId;
-      var use = Array.isArray(this.props.use) ? this.props.use : [this.props.use];
+      this.props;var children = _props3.children;var register = _props3.register;var id = _props3.id;var mountPointId = _props3.mountPointId;var use = _props3.use;
       var needUpdate = false;
@@ -58,0 +61,0 @@ if (id !== newProps.id || mountPointId !== newProps.mountPointId) {

package.json

 {
   "name": "react-layer-stack",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Simple but ubiquitously powerful and agnostic layering system for React. Useful for any kind of windowing/popover/modals/tooltip application",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -159,3 +159,3 @@ [Live demo](https://fckt.github.io/react-layer-stack/)
 ### The future
-Obviously there is a lot of applications for the Layer API (https://github.com/fckt/react-layer-stack/blob/master/README.md#layer-). The cautious question is: could be it become a foundation or standard API to declare some kind of "universal" React "modules"? If so, could be the entire application become a "module"?
+Obviously there is a lot of applications for the Layer API (https://github.com/fckt/react-layer-stack/blob/master/README.md#layer-). So, you can declare the entire React app as a Layer and manage it from the outer app!
 
@@ -162,0 +162,0 @@ ### Images to understand the whole thing

src/components.js

@@ -44,2 +44,6 @@ import React, { PropTypes } from 'react'
 )((React.createClass({
+  propTypes: {
+    use: PropTypes.array
+  },
+
   componentWillMount() {
@@ -54,4 +58,3 @@ this.props.register(this.props.id, this.props.children, this.props.mountPointId);
   shouldComponentUpdate(newProps) {
-    const { children, register, id, mountPointId } = this.props;
-    const use = Array.isArray(this.props.use) ? this.props.use : [this.props.use];
+    const { children, register, id, mountPointId, use } = this.props;
     let needUpdate = false;
@@ -58,0 +61,0 @@ if (id !== newProps.id || mountPointId !== newProps.mountPointId) {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5747009

0.04%

Lines of code

3798

0.5%

No dependency changes