react-layer-stack - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

lib/components.js

@@ -10,7 +10,12 @@ 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.LayerToggle = exports.Layer = exports.LayerStackMountPoint = undefined;var _react = require('react');var _react2 = _interopRequireDefault(_react);
   function (dispatch) {return (0, _redux.bindActionCreators)(_reducer.ACTIONS, dispatch);})(
-  function (_ref) {var renderFn = _ref.renderFn;var views = _ref.views;var displaying = _ref.displaying;var show = _ref.show;var hide = _ref.hide;var hideAll = _ref.hideAll; // from redux
+  function (_ref) {var renderFn = _ref.renderFn;var views = _ref.views;var displaying = _ref.displaying;var show = _ref.show;var hide = _ref.hide;var hideAll = _ref.hideAll; // from store
     return (
       _react2.default.createElement('div', null, ' ', renderFn ? renderFn({ views: views, displaying: displaying, show: show, hide: hide, hideAll: hideAll }) :
         displaying.length ? displaying.map(
-        function (index) {var _views$index;return _react2.default.createElement('div', { key: index }, (_views$index = views[index]).renderFn.apply(_views$index, [{ index: index, show: show, hide: hide, hideAll: hideAll, displaying: displaying, views: views }].concat(_toConsumableArray(views[index].args))));}) :
+        function (id, index) {var _views$id;return _react2.default.createElement('div', { key: id }, (_views$id = views[id]).renderFn.apply(_views$id, [{
+              index: index, id: id, show: show, hide: hide, hideAll: hideAll, displaying: displaying, views: views,
+              showOnlyMe: function showOnlyMe() {for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}return hideAll() || show.apply(undefined, [id].concat(args));}, // TODO: improve
+              hideMe: function hideMe() {return hide(id);},
+              showMe: function showMe() {for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}return show.apply(undefined, [id].concat(args));} // sometimes you may want to change args of the current layer
+            }].concat(_toConsumableArray(views[id].args))));}) :
 
@@ -73,5 +78,10 @@ _react2.default.createElement('noscript', null)));
 
-  {var children = _ref2.children;var displaying = _ref2.displaying;var show = _ref2.show;var hide = _ref2.hide;var hideAll = _ref2.hideAll;
-    return children({ show: show, hide: hide, hideAll: hideAll, displaying: displaying });
+  {var children = _ref2.children;var id = _ref2.id;var displaying = _ref2.displaying;var show = _ref2.show;var hide = _ref2.hide;var hideAll = _ref2.hideAll;var views = _ref2.views;
+    return children({
+      show: show, hide: hide, hideAll: hideAll, displaying: displaying, views: views,
+      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));},
+      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));},
+      hideMe: function hideMe() {return hide(id);} });
+
   });};
 //# sourceMappingURL=components.js.map

lib/reducer.js

@@ -9,3 +9,4 @@ 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.ACTIONS = undefined;var _extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};var _reduxActions = require('redux-actions');function _toConsumableArray(arr) {if (Array.isArray(arr)) {for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {arr2[i] = arr[i];}return arr2;} else {return Array.from(arr);}}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _objectWithoutProperties(obj, keys) {var target = {};for (var i in obj) {if (keys.indexOf(i) >= 0) continue;if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;target[i] = obj[i];}return target;}
   show: (0, _reduxActions.createAction)('LAYER_STACK_VIEW_SHOW', function (id) {for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {args[_key - 1] = arguments[_key];}return { id: id, args: args };}),
-  hide: (0, _reduxActions.createAction)('LAYER_STACK_VIEW_HIDE') };exports.default =
+  hide: (0, _reduxActions.createAction)('LAYER_STACK_VIEW_HIDE'),
+  hideAll: (0, _reduxActions.createAction)('LAYER_STACK_VIEW_HIDE_ALL') };exports.default =
 
@@ -42,7 +43,9 @@
     return state;
+  },
+  'LAYER_STACK_VIEW_HIDE_ALL': function LAYER_STACK_VIEW_HIDE_ALL(_ref9) {var state = _objectWithoutProperties(_ref9, []);
+    return _extends({}, state, { displaying: [] });
   } },
 {
-
   displaying: [],
   views: {} });
 //# sourceMappingURL=reducer.js.map

package.json

 {
   "name": "react-layer-stack",
-  "version": "1.0.1",
+  "version": "1.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": "https://github.com/AlexeyFrolov/react-layer-stack.git",

README.md

@@ -40,8 +40,11 @@ ### TODO:
 import { Layer, LayerToggle } from 'react-layer-stack'
-// ...
-const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].path
+// ... for each `object` in array of `objects`
+const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id
 return (
     <Cell {...props}>
-        <Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({hide, zIndex}, e) => // access to the arguments (click event data)
-          <Modal onClick={ hide.bind(null, modalId) } zIndex={(zIndex + 1) * 1000}>
+        <Layer use={[objects[rowIndex], rowIndex]} id={modalId}> {({
+            hideMe, // alias for `hide(modalId)`
+            index } // useful to know to set zIndex, for example
+            , e) => // access to the arguments (click event data in this example)
+          <Modal onClick={ hideMe } zIndex={(index + 1) * 1000}>
             <ConfirmationDialog
@@ -51,9 +54,9 @@ title={ 'Delete' }
               confirmButton={ <Button type="primary">DELETE</Button> }
-              onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, () => hide(modalId)) }
-              hideModal={ () => hide(modalId) } />
+              onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hideMe) } // hide after confirmation
+              close={ hideMe } />
           </Modal> }
         </Layer>
         
-        <LayerToggle> {({show}) =>
-          <div style={styles.iconOverlay} onClick={ (e) => show(modalId, e) }> // additional arguments can be passed
+        <LayerToggle id={ modalId }> {({showMe}) => // showMe is alias for `show(modalId)`
+          <div style={styles.iconOverlay} onClick={ (e) => showMe(e) }> // additional arguments can be passed (like event)
             <Icon type="trash" />
@@ -60,0 +63,0 @@ </div> }

src/components.js

@@ -10,7 +10,12 @@ import React, { PropTypes } from 'react'
   dispatch => bindActionCreators(ACTIONS, dispatch)
-)(({ renderFn, views, displaying, show, hide, hideAll}) => { // from redux
+)(({ renderFn, views, displaying, show, hide, hideAll}) => { // from store
   return (
     <div> { renderFn ? renderFn({views, displaying, show, hide, hideAll})
       : (displaying.length ? displaying.map (
-      (index) => <div key={index}>{ views[index].renderFn({index, show, hide, hideAll, displaying, views}, ...views[index].args) }</div>
+      (id, index) => <div key={id}>{ views[id].renderFn({
+        index, id, show, hide, hideAll, displaying, views,
+        showOnlyMe: (...args) => hideAll() || show(id, ...args), // TODO: improve
+        hideMe: () => hide(id),
+        showMe: (...args) => show(id, ...args) // sometimes you may want to change args of the current layer
+      }, ...views[id].args) }</div>
     )
@@ -71,6 +76,11 @@ : <noscript />) }
   dispatch => bindActionCreators(ACTIONS, dispatch)
-)(({ children, // from props
-  displaying, show, hide, hideAll // from redux
+)(({ children, id, // from props
+  displaying, show, hide, hideAll, views // from store
 }) => {
-  return children({ show, hide, hideAll, displaying });
+  return children({
+    show, hide, hideAll, displaying, views,
+    showMe: (...args) => show(id, ...args),
+    showOnlyMe: (...args) => hideAll() || show(id, ...args),
+    hideMe: () => hide(id),
+  });
 });

src/reducer.js

@@ -10,2 +10,3 @@ import { handleActions } from 'redux-actions'
   hide: createAction('LAYER_STACK_VIEW_HIDE'),
+  hideAll: createAction('LAYER_STACK_VIEW_HIDE_ALL'),
 };
@@ -43,6 +44,8 @@
   },
+  'LAYER_STACK_VIEW_HIDE_ALL': ({...state}) => {
+    return {...state, displaying: [] };
+  },
 }, {
-
     displaying: [],
     views: {},
 });

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

29417

increased by12.99%

Lines of code

255

increased by11.35%

Number of lines in readme file

65

increased by4.84%

No dependency changes