react-layer-stack
Advanced tools
react-layer-stack - npm Package Compare versions
Comparing version 2.2.0 to 3.0.0
@@ -54,3 +54,3 @@ import React, { Component } from 'react'; | ||
| #### LAYER STATE TOGGLE | ||
| <LayerToggle id="layer_state_infobox">{({ show, hide, isActive }) => ( | ||
| <LayerToggle for="layer_state_infobox">{({ show, hide, isActive }) => ( | ||
| <button onClick={ () => isActive ? hide() : show() }>{ isActive ? 'HIDE LAYER STATE' : 'SHOW LAYER STATE' }</button> )} | ||
@@ -61,3 +61,3 @@ </LayerToggle> | ||
| #### LIGHTBOX target-oriented | ||
| <LayerToggle id="lightbox">{({ show, hide }) => ( | ||
| <LayerToggle for="lightbox">{({ show, hide }) => ( | ||
| <button onMouseLeave={ hide } onMouseEnter={ ({ nativeEvent: { relatedTarget } }) => { | ||
@@ -80,3 +80,3 @@ const { left, top, width } = relatedTarget.getClientRects()[0]; | ||
| #### LIGHTBOX pointer-oriented v2 | ||
| <LayerToggle id="lightbox">{({ show, hide }) => ( | ||
| <LayerToggle for="lightbox">{({ show, hide }) => ( | ||
| <button onMouseLeave={ hide } onMouseMove={ ({ clientX, clientY }) => { | ||
@@ -95,3 +95,3 @@ show( | ||
| #### MOVABLE WINDOWS | ||
| <LayerToggle id="movable_window">{({ show }) => ( | ||
| <LayerToggle for="movable_window">{({ show }) => ( | ||
| <button onClick={ () => show() }>OPEN MOVABLE WINDOW</button> )} | ||
@@ -101,3 +101,3 @@ </LayerToggle> | ||
| #### SIMPLE MODALS | ||
| <LayerToggle id="simple_modal">{({ show }) => ( | ||
| <LayerToggle for="simple_modal">{({ show }) => ( | ||
| <button onClick={ () => show() }>OPEN SIMPLE MODAL</button> )} | ||
@@ -189,3 +189,3 @@ </LayerToggle> | ||
| <LayerToggle id="lightbox">{({ show, hide }) => ( | ||
| <LayerToggle for="lightbox">{({ show, hide }) => ( | ||
| <button onMouseLeave={ hide } onMouseMove={ ({ clientX, clientY }) => { | ||
@@ -192,0 +192,0 @@ show(<div style={{ |
@@ -5,3 +5,3 @@ 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.LayerToggle = exports.Layer = exports.LayerStackMountPoint = undefined;var _react = require('react');var _react2 = _interopRequireDefault(_react); | ||
| var _reducer = require('./reducer');function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}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);}} | ||
| var _reducer = require('./reducer');function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: 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;}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);}} | ||
@@ -102,11 +102,11 @@ var LayerStackMountPoint = exports.LayerStackMountPoint = function LayerStackMountPoint() {var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'layer_stack';return (0, _reactRedux.connect)( | ||
| {var children = _ref2.children;var id = _ref2.id;var displaying = _ref2.displaying;var _show2 = _ref2.show;var _hide2 = _ref2.hide;var hideAll = _ref2.hideAll;var views = _ref2.views; | ||
| {var children = _ref2.children;var displaying = _ref2.displaying;var _show2 = _ref2.show;var _hide2 = _ref2.hide;var hideAll = _ref2.hideAll;var views = _ref2.views;var props = _objectWithoutProperties(_ref2, ['children', 'displaying', 'show', 'hide', 'hideAll', 'views']); | ||
| return children.apply(undefined, [{ | ||
| hideAll: hideAll, displaying: displaying, views: views, | ||
| isActive: displaying.indexOf(id) !== -1, | ||
| show: function show() {for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {args[_key3] = arguments[_key3];}return id ? _show2.apply(undefined, [id].concat(args)) : _show2.apply(undefined, args);}, | ||
| showOnlyMe: function showOnlyMe() {for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {args[_key4] = arguments[_key4];}return hideAll() || _show2.apply(undefined, [id].concat(args));}, | ||
| hide: function hide() {for (var _len5 = arguments.length, args = Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {args[_key5] = arguments[_key5];}return id ? _hide2.apply(undefined, [id].concat(args)) : _hide2.apply(undefined, args);} }].concat(_toConsumableArray( | ||
| views[id].args))); | ||
| isActive: displaying.indexOf(props.for) !== -1, | ||
| show: function show() {for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {args[_key3] = arguments[_key3];}return props.for ? _show2.apply(undefined, [props.for].concat(args)) : _show2.apply(undefined, args);}, | ||
| showOnlyMe: function showOnlyMe() {for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {args[_key4] = arguments[_key4];}return hideAll() || _show2.apply(undefined, [props.for].concat(args));}, | ||
| hide: function hide() {for (var _len5 = arguments.length, args = Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {args[_key5] = arguments[_key5];}return props.for ? _hide2.apply(undefined, [props.for].concat(args)) : _hide2.apply(undefined, args);} }].concat(_toConsumableArray( | ||
| views[props.for].args))); | ||
| });}; | ||
| //# sourceMappingURL=components.js.map |
| { | ||
| "name": "react-layer-stack", | ||
| "version": "2.2.0", | ||
| "version": "3.0.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": { |
@@ -29,3 +29,3 @@ [Live demo](https://fckt.github.io/react-layer-stack/) | ||
| <LayerToggle id="lightbox2">{({ show, hide }) => ( | ||
| <LayerToggle for="lightbox2">{({ show, hide }) => ( | ||
| <button onMouseLeave={ hide } onMouseMove={ ({ pageX, pageY }) => { | ||
@@ -68,7 +68,7 @@ show( | ||
| This is mount point for `Layers`. | ||
| This is a mount point for `Layer`s. | ||
| `id: string` - you can have multiple `LayerStackMountPoint` which could have different ID's. | ||
| `id: string` (optional) - you can have multiple `LayerStackMountPoint` which could have different ID's | ||
| `children: callback({ views, displaying, show: callback(id, args), hide, hideAll, mountPointId, mountPointArgs }): ReactElement` - you can choose different strategies how to render `Layers` in `LayerStackMountPoint` instead of the default one. | ||
| `children: callback({ views, displaying, show: callback(id, args), hide, hideAll, mountPointId, mountPointArgs }): ReactElement` - you can choose different strategies how to render `Layers` in `LayerStackMountPoint` instead of the default one | ||
@@ -81,2 +81,4 @@ #### `<Layer />` | ||
| `mountPointId` (optional) - the mount point to mount to | ||
| `use: array` - array with context (closure) variables. Useful if you want to re-render the Layer if parent variables (closure) are changed | ||
@@ -88,4 +90,6 @@ | ||
| `id: string` - a Layer identificator which LayerToggle corresponds to | ||
| `LayerToggle` is a helper to have access for show/hide callbacks and the current state of the layer. There could be multiple `LayerToggle`s for the same `Layer`. | ||
| `for: string` - a Layer identificator which LayerToggle corresponds to | ||
| `children: callback({ isActive, show: callback(args), showOnlyMe, hide, hideAll }): ReactElement` - will be mounted (rendered) directly to its parent | ||
@@ -144,3 +148,3 @@ | ||
| // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree | ||
| <LayerToggle id={ modalId }> {({show}) => // show is alias for `show(modalId)` | ||
| <LayerToggle for={ modalId }> {({show}) => // show is alias for `show(modalId)` | ||
| <div style={styles.iconOverlay} onClick={ (e) => show(e) }> // additional arguments can be passed (like event) | ||
@@ -147,0 +151,0 @@ <Icon type="trash" /> |
@@ -99,12 +99,12 @@ import React, { PropTypes } from 'react' | ||
| )(({ | ||
| children, id, // from props | ||
| displaying, show, hide, hideAll, views // from store | ||
| children, // from props | ||
| displaying, show, hide, hideAll, views, ...props, // from store | ||
| }) => { | ||
| return children({ | ||
| hideAll, displaying, views, | ||
| isActive: displaying.indexOf(id) !== -1, | ||
| show: (...args) => id ? show(id, ...args) : show(...args), | ||
| showOnlyMe: (...args) => hideAll() || show(id, ...args), | ||
| hide: (...args) => id ? hide(id, ...args) : hide(...args), | ||
| }, ...views[id].args); | ||
| isActive: displaying.indexOf(props.for) !== -1, | ||
| show: (...args) => props.for ? show(props.for, ...args) : show(...args), | ||
| showOnlyMe: (...args) => hideAll() || show(props.for, ...args), | ||
| hide: (...args) => props.for ? hide(props.for, ...args) : hide(...args), | ||
| }, ...views[props.for].args); | ||
| }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
- increased by0.03%
5749597
- Lines of code
- increased by0.05%
3800
- Number of lines in readme file
- increased by2.23%
183