react-layer-stack - npm Package Compare versions

Comparing version 1.1.7 to 1.1.8

demo/package.json

@@ -12,4 +12,6 @@ {
     "react-dom": "^15.3.2",
+    "react-highlight": "^0.9.0",
     "react-layer-stack": "^1.1.6",
     "react-redux": "^4.4.5",
+    "react-remarkable": "^1.1.1",
     "redux": "^3.6.0",
@@ -16,0 +18,0 @@ "redux-actions": "^0.12.0",

demo/src/App.js

@@ -15,5 +15,3 @@ import React, { Component } from 'react';
 const reducer = combineReducers({[DEFAULT_LAYERS_STORE_KEY]: layersReducer});
-const logger = createLogger();
-const create = applyMiddleware(logger)(createStore)
-const store = create(reducer);
+const store = createStore(reducer);
 window.__STORE = store;
@@ -20,0 +18,0 @@ class App extends Component {

demo/src/components/FixedLayer.js

@@ -14,9 +14,10 @@ import React, { Component, PropTypes } from 'react';
     zIndex: 2000,
-    onClick: () => {},
+    onClick: null,
   };
 
   render () {
-
+    console.log(styles(this.props.onClick))
     return (
-      <div { ...this.props } onClick={ (e) => (e.target === ReactDom.findDOMNode(this)) && this.props.onClick() } style={{...this.props.style, ...styles.layer, ...{zIndex: this.props.zIndex}}}>
+      <div { ...this.props } onClick={ (e) => this.props.onClick && (e.target === ReactDom.findDOMNode(this)) && this.props.onClick() }
+                             style={{...this.props.style, ...styles(this.props.onClick), ...{zIndex: this.props.zIndex}}}>
         {this.props.children}
@@ -28,11 +29,10 @@ </div>
 
-const styles = {
-  layer: {
-    position: 'fixed',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0,
-    height: '100%',
-    },
-};
+const styles = (onClick) => ({
+  position: 'fixed',
+  pointerEvents: onClick ? 'auto' : 'none',
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+  height: '100%',
+});

demo/src/components/Window.js

@@ -25,6 +25,4 @@ import React, { Component, PropTypes } from 'react';
     borderRadius: '5px',
-    borderWidth: '0.5px',
-    borderStyle: 'solid',
-    boxShadow: '0px 0px 100px 0px rgba(0,0,0,0.48)',
+    boxShadow: '0px 0px 110px 0px rgba(0,0,0,0.60)',
   },
 };

demo/src/Demo.js

 import React, { Component } from 'react';
-import { Layer, LayerToggle } from 'react-layer-stack'
+import Highlight from 'react-highlight';
+import Markdown from 'react-remarkable';
 
-// import Button from './components/Button'
-import FixedLayer from './components/FixedLayer'
-import Window from './components/Window'
+import { Layer, LayerToggle } from 'react-layer-stack';
 
+// import Button from './components/Button';
+import FixedLayer from './components/FixedLayer';
+import AbsoluteLayer from './components/AbsoluteLayer';
+import Window from './components/Window';
+
 class Demo extends Component {
@@ -18,5 +22,29 @@
       <div>
+        <Layer id="layer_state_infobox">{({views, displaying}) =>
+          <FixedLayer>
+            <div style={{ position:'absolute',
+                          bottom: '0', right: '0',
+                          width: '350px', height: '100%',
+                          padding: '20px',
+                          background: 'rgba(0,0,0,0.8)', color: '#fff'}}>
+              <Markdown>
+                #### Layers displaying:
+                <Highlight className="js">
+                { JSON.stringify(displaying, null, '  ') }
+                </Highlight>
+                #### Layers registered:
+                <Highlight className="js">
+                { JSON.stringify(views, null, '  ') }
+                </Highlight>
+              </Markdown>
+
+            </div>
+          </FixedLayer>}
+        </Layer>
         { this.renderMovableWindow() }
         { this.renderSimpleWindow() }
 
+        <LayerToggle id="layer_state_infobox">{({ showMe, hideMe, isActive }) => (
+          <button onClick={ () => console.log('TEST') || isActive ? hideMe() : showMe() }>{ isActive ? 'HIDE LAYER STATE' : 'SHOW LAYER STATE' }</button> )}
+        </LayerToggle>
         <LayerToggle id="simple_window">{({ showMe }) => (
@@ -56,3 +84,3 @@ <button onClick={ () => showMe() }>OPEN SIMPLE MODAL</button> )}
         use={[this.state.counter]}  // data from the context
-        id="movable_window">{({index, hideMe, showMe}, {...rest, pinned = false, mouseDown = false, mouseX = 0, mouseY = 0, windowLeft = 100, windowTop = 50} = {}) => (
+        id="movable_window">{({index, hideMe, showMe}, {...rest, pinned = false, mouseDown = false, mouseX = 0, mouseY = 0, windowLeft = 400, windowTop = 100} = {}) => (
         <FixedLayer
@@ -78,6 +106,16 @@ onMouseDown={() => showMe({...rest, mouseDown: true})}
               onMouseLeave={() => mouseDown || showMe({...rest, pinned: false})}>
-              PIN TO MOVE. Counter is { this.state.counter }
+              PIN TO MOVE
             </div>
             <div style={styles.body}>
-              { JSON.stringify(rest, null, '\t') }
+              <Markdown>
+
+                ##### Arguments:
+
+                  { JSON.stringify(rest, null, '\t') }
+
+                ##### Data from outer component (closure/context):
+
+                  { JSON.stringify(this.state, null, '\t') }
+
+              </Markdown>
             </div>
@@ -97,10 +135,10 @@ </Window>
     borderWidth: '1px',
-    borderBottom: '1px solid',
-    padding: '10px'
+    padding: '20px 20px 0 20px'
   },
   body: {
-    height: '300px',
+    height: 'auto',
+    minHeight: '450px',
     background: '#FFFFFF',
     borderRadius: '0 0 5px 5px',
-    padding: '10px'
+    padding: '20px'
   },
@@ -111,4 +149,3 @@ footer: {
     borderRadius: '0 0 5px 5px',
-    borderTop: '1px solid',
-    padding: '10px'
+    padding: '20px 0 20px 0'
   }
@@ -115,0 +152,0 @@ };

lib/components.js

@@ -85,3 +85,3 @@ 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.LayerToggle = exports.Layer = exports.LayerStackMountPoint = undefined;var _react = require('react');var _react2 = _interopRequireDefault(_react);
       show: show, hide: hide, hideAll: hideAll, displaying: displaying, views: views,
-      isActive: function isActive() {return displaying.indexOf(id) !== -1;},
+      isActive: displaying.indexOf(id) !== -1,
       showMe: function showMe() {for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {args[_key3] = arguments[_key3];}return show.apply(undefined, [id].concat(args));},
@@ -88,0 +88,0 @@ showOnlyMe: function showOnlyMe() {for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {args[_key4] = arguments[_key4];}return hideAll() || show.apply(undefined, [id].concat(args));},

package.json

 {
   "name": "react-layer-stack",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "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": {

src/components.js

@@ -85,3 +85,3 @@ import React, { PropTypes } from 'react'
     show, hide, hideAll, displaying, views,
-    isActive: () => displaying.indexOf(id) !== -1,
+    isActive: displaying.indexOf(id) !== -1,
     showMe: (...args) => show(id, ...args),
@@ -88,0 +88,0 @@ showOnlyMe: (...args) => hideAll() || show(id, ...args),

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

73095

increased by2.92%

Number of package files

32

increased by3.23%

Lines of code

558

increased by10.28%

No dependency changes