├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── demo ├── .gitignore ├── README.md ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── Demo.js │ ├── components │ ├── FixedLayer.js │ └── Window.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── docs ├── favicon.ico ├── img │ └── .DS_Store ├── index.html ├── public │ ├── .DS_Store │ ├── favicon.ico │ ├── img │ │ └── .DS_Store │ └── index.html └── static │ ├── css │ ├── main.f54ba139.css │ └── main.f54ba139.css.map │ └── js │ ├── main.262270e3.js │ └── main.262270e3.js.map ├── index.js ├── lib ├── LayerStore.js ├── LayerStore.js.map ├── LayerStoreCore.js ├── LayerStoreCore.js.map ├── common.js ├── common.js.map ├── components.js ├── components.js.map ├── components │ ├── Layer.js │ ├── Layer.js.map │ ├── LayerMountPoint.js │ ├── LayerMountPoint.js.map │ ├── LayerStackMountPoint.js │ ├── LayerStackMountPoint.js.map │ ├── LayerStackProvider.js │ ├── LayerStackProvider.js.map │ ├── LayerToggle.js │ └── LayerToggle.js.map ├── helpers.js ├── helpers.js.map ├── index.js ├── index.js.map ├── reducer.js ├── reducer.js.map ├── types.js └── types.js.map ├── package-lock.json ├── package.json └── src ├── LayerStore.js ├── LayerStoreCore.js ├── common.js ├── components ├── Layer.js ├── LayerMountPoint.js ├── LayerStackMountPoint.js ├── LayerStackProvider.js └── LayerToggle.js ├── index.js └── types.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["syntax-flow", "transform-flow-strip-types", "transform-object-rest-spread"], 4 | "sourceMaps": true, 5 | "retainLines": true 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | 13 | # Directory for instrumented libs generated by jscoverage/JSCover 14 | lib-cov 15 | 16 | # Coverage directory used by tools like istanbul 17 | coverage 18 | 19 | # nyc test coverage 20 | .nyc_output 21 | 22 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 23 | .grunt 24 | 25 | # node-waf configuration 26 | .lock-wscript 27 | 28 | # Compiled binary addons (http://nodejs.org/api/addons.html) 29 | build/Release 30 | 31 | # Dependency directories 32 | node_modules 33 | jspm_packages 34 | 35 | # Optional npm cache directory 36 | .npm 37 | 38 | # Optional REPL history 39 | .node_repl_history 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-present Alexey Frolov 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DEPRICATED 2 | 3 | [Live demo](https://fckt.github.io/react-layer-stack/) 4 | 5 | [Chat](https://gitter.im/react-layer-stack/Lobby) 6 | 7 | ### Rationale 8 | `react`/`react-dom` comes with 2 basic assumptions/ideas: 9 | - every UI is hierarchical naturally. This why we have the idea of "`components` wrap each other" 10 | - `react-dom` mounts (physically) child component to its parent DOM node by default 11 | 12 | The problem is that sometimes the second property isn't what you want in your specific case. Sometimes you want to mount your component into the different physical DOM node and hold the logical parent-child connection at the same time. 13 | 14 | Canonical example is a Tooltip-like component: at some point, during development process, you could find that you need to add some description for your UI element: it'll be rendered in some fixed layer and it should know its coordinates (which are corresponding UI element coord or mouse coords) and at the same time it needs information whether it should be shown right now or not, its content and some context from parent components. 15 | 16 | ```javascript 17 | import React, { Component } from 'react'; 18 | import { Layer, LayerToggle } from 'react-layer-stack'; 19 | import FixedLayer from './demo/components/FixedLayer'; 20 | 21 | class Demo extends Component { 22 | render() { 23 | return ( 24 |
25 | { (_, content) => // Layer should have an unique ID 26 | 27 | { content } 28 | 29 | } 30 | 31 | {({ show, hide }) => ( // Layer is accessible from any part of the tree. 32 | // There could be several Toggles for one Layer. 33 | )} 43 | 44 |
45 | ) 46 | } 47 | } 48 | ``` 49 | 50 | Another option could be use one of dozens complete implementations with different properties: 51 | https://js.coach/?search=popover 52 | 53 | ### More examples 54 | https://github.com/fckt/react-layer-stack/blob/master/demo/src/Demo.js 55 | 56 | ### Live demo 57 | https://fckt.github.io/react-layer-stack/ 58 | 59 | ### Installation 60 | ``` 61 | npm install --save react-layer-stack 62 | ``` 63 | 64 | ### API 65 | 66 | 3 components with a few properties. 67 | 68 | #### `` 69 | 70 | `id: string` - a Layer identificator. There could be only one layer with the same `id` 71 | 72 | `to` (optional) - the mount point to mount to. If `to` is not defined the layer will be rendered right in place 73 | 74 | `use: Array` (optional) - array with context (closure) variables. Useful if you want to update the Layer if closure variables are changed 75 | 76 | `defaultArgs: Array` (optional) - initial arguments for a Layer 77 | 78 | `defaultShow: Boolean` (optional) 79 | 80 | `children: callback({ isActive, show: callback(args), showOnlyMe, hide, hideAll }, ...args): ReactElement` - will be rendered into 81 | 82 | #### `` 83 | 84 | `LayerToggle` is a helper to have an access for show/hide callbacks and the current state of the layer. There could be multiple `LayerToggle`s for the same `Layer`. 85 | 86 | `for: string` - a Layer identificator which LayerToggle corresponds to 87 | 88 | `children: callback({ isActive, show: callback(args), showOnlyMe, hide, hideAll }): ReactElement` - will be mounted (rendered) directly to its parent 89 | 90 | #### `` 91 | 92 | This is a mount point for `Layer`s. 93 | 94 | `id: string` (optional) - you can have multiple `LayerStackMountPoint` which could have different ID's 95 | 96 | `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 97 | 98 | 99 | ### Real-world usage example 100 | 101 | Public API consist 2 key components: `Layer`, `LayerStackMountPoint` and 1 additional: `LayerToggle` (sometimes toggle needs to know which popover is open now). 102 | Set the `LayerStackMountPoint` somewhere on the top of the tree: 103 | 104 | ```javascript 105 | import { LayerStackProvider, LayerStackMountPoint } from 'react-layer-stack' 106 | // ... 107 | // render() { 108 | return ( 109 | 110 | 111 | 112 | 113 | 114 | {children} 115 | 116 | 117 | 118 | ) 119 | // } 120 | ``` 121 | 122 | Define your `Layer`. This example shows how to propagate variables from lexical context (https://developer.mozilla.org/en/docs/Web/JavaScript/Closures) to the `Layer`, which will be displayed in the `LayerStackMountPoint`. Each layer should have an `id` and `use` properties. `use` property is needed to determine if we should update the lexical context of the anonymous function which renders `Modal` into `Layer` if `Cell` is updated. 123 | 124 | ```javascript 125 | import { Layer, LayerToggle } from 'react-layer-stack' 126 | // ... for each `object` in array of `objects` 127 | const modalId = 'DeleteObjectConfirmation' + objects[rowIndex].id 128 | return ( 129 | 130 | // the layer definition. The content will show up in the LayerStackMountPoint when `show(modalId)` be fired in LayerToggle 131 | {({ 132 | hide, // alias for `hide(modalId)` 133 | index } // useful to know to set zIndex, for example 134 | , e) => // access to the arguments (click event data in this example) 135 | 136 | DELETE } 140 | onConfirm={ this.handleDeleteObject.bind(this, objects[rowIndex].name, hide) } // hide after confirmation 141 | close={ hide } /> 142 | } 143 | 144 | 145 | // this is the toggle for Layer with `id === modalId` can be defined everywhere in the components tree 146 | {({show}) => // show is alias for `show(modalId)` 147 |
show(e) }> // additional arguments can be passed (like event) 148 | 149 |
} 150 | 151 | ) 152 | // ... 153 | ``` 154 | 155 | ### ReactDOM.unstable_createPortal 156 | Facebook team is working on the similar [feature](https://github.com/facebook/react/blob/d28ac9eea0cad6be949cc9d3f973cf548e89bf97/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js#L254) called "portals" (by analogy with https://github.com/tajo/react-portal). That approach uses `ReactDOM` (API) which is fatal if browser is not the only target. There are [other considerations](https://github.com/facebook/react/pull/8386#issuecomment-265628702) also. 157 | 158 | ### Alternatives 159 | The is a lot of alternative ways to archive the desirable **bottom-to-up** link b/w components. 160 | 161 | The most obvious (and naiive as well) way is to use redux (or another flux/data lib) as a transport to send data from one DOM branch to another. It's good and robust solution, but the problem is that it just feels like overkill. It seems not universal also, could consume some additional time to implement and grasp afterwards, not because of complications, but because you have to reinvent the same pattern again and again (slightly different in each case, see https://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions). 162 | 163 | Another solution is to use on of ready-to-use components. But sometimes are you need slightly different behavior/look and more productive to implement home-grown ad-hock solution. 164 | 165 | And the last option is to find library like https://github.com/tajo/react-portal or https://react-bootstrap.github.io/react-overlays/, designed to address the needs of **bottom-to-up** communication. These libs are often quite opinionated to their cases and doesn't solve the problem in its roots. The goal of **react-layer-stack** is to give an answer how to organize **bottom-to-up** communication in the most natural, reasonable and flexible way. 166 | 167 | ### The future 168 | 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! 169 | 170 | ### Images to understand the whole thing 171 | #### View layers stack 172 | ![Symlink](http://cfs6.tistory.com/upload_control/download.blog?fhandle=YmxvZzE1NzczMkBmczYudGlzdG9yeS5jb206L2F0dGFjaC8wLzEzMDAwMDAwMDAyMi5qcGc%3D) 173 | 174 | #### Layer id and "use" property (sym/soft link) 175 | ![Symlink](http://1.bp.blogspot.com/-gZMz1nF3GC0/UiyehOS_bWI/AAAAAAAABQI/BpYyEtadcEg/s640/profiles1.png) 176 | 177 | ### Related Stackoverflow q&a 178 | - http://stackoverflow.com/a/40461655/524034 179 | - http://stackoverflow.com/questions/40443160/bootstrap-modal-like-behavior-in-react 180 | - http://stackoverflow.com/questions/40444788/rendering-a-modal-in-react 181 | - http://stackoverflow.com/questions/39805544/showing-list-of-buttons-displaying-modals-in-reactjs 182 | - http://stackoverflow.com/questions/39913593/dynamically-displaying-data-from-a-clickable-table-row-into-a-modal 183 | 184 | The easiest way to support `react-layer-stack` is to upvote the answers below. 185 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | 6 | # testing 7 | coverage 8 | 9 | # production 10 | build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log 16 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | react-layer-stack DEMO -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "demo", 3 | "version": "2.1.2", 4 | "private": true, 5 | "devDependencies": { 6 | "react-scripts": "0.6.1" 7 | }, 8 | "dependencies": { 9 | "circular-json": "^0.3.1", 10 | "react": "^15.3.2", 11 | "react-addons-css-transition-group": "^15.3.2", 12 | "react-dom": "^15.3.2", 13 | "react-highlight": "^0.9.0", 14 | "react-layer-stack": "^4.1.0", 15 | "react-remarkable": "^1.1.1" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test --env=jsdom", 21 | "eject": "react-scripts eject" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /demo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lexfrl/react-layer-stack/90826e25093de2ea28be74f59b738ba55faf4e7f/demo/public/favicon.ico -------------------------------------------------------------------------------- /demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | React App 18 | 19 | 20 |
21 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /demo/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 80px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /demo/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './App.css'; 3 | import { LayerStackProvider, LayerStackMountPoint } from 'react-layer-stack' 4 | 5 | import Demo from './Demo' 6 | 7 | class App extends Component { 8 | render() { 9 | return ( 10 | 11 |
12 | 13 |
14 |
15 |

react-layer-stack DEMO

16 |
17 |
18 | 19 |
20 |
21 |
22 | 23 | ); 24 | } 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /demo/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /demo/src/Demo.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import CircularJSON from 'circular-json'; 3 | import Highlight from 'react-highlight'; 4 | import Markdown from 'react-remarkable'; 5 | 6 | import { Layer, LayerToggle } from 'react-layer-stack'; 7 | 8 | import FixedLayer from './components/FixedLayer'; 9 | import Window from './components/Window'; 10 | 11 | const styles = { 12 | header: { 13 | height: '36px', 14 | background: '#F6F6F6', 15 | borderRadius: '5px 5px 0 0', 16 | borderWidth: '1px', 17 | padding: '20px 20px 0 20px' 18 | }, 19 | body: { 20 | height: 'auto', 21 | minHeight: '450px', 22 | background: '#FFFFFF', 23 | borderRadius: '0 0 5px 5px', 24 | padding: '20px' 25 | }, 26 | footer: { 27 | height: '34px', 28 | background: '#F6F6F6', 29 | borderRadius: '0 0 5px 5px', 30 | padding: '20px 0 20px 0' 31 | } 32 | }; 33 | 34 | class Demo extends Component { 35 | 36 | componentWillMount() { 37 | this.setState({counter: 1}) 38 | setInterval(() => this.setState({counter: this.state.counter + 1}), 1000) 39 | } 40 | 41 | render() { 42 | return ( 43 |
44 | {/*{ this.renderDebugLayer() }*/} 45 | { this.renderMovableWindow() } 46 | { this.renderSimpleModal() } 47 | { this.renderLightbox() } 48 | 49 | 50 | #### DEMO top component data 51 | { JSON.stringify(this.state, null, '\t') } 52 | 53 | {/*#### LAYER STATE TOGGLE*/} 54 | {/*{({ show, hide, isActive }) => (*/} 55 | {/* )}*/} 56 | {/**/} 57 | 58 | 59 | #### LIGHTBOX target-oriented 60 | {({ show, hide }) => ( 61 | )} 73 | 74 | 75 | 76 | 77 | #### LIGHTBOX pointer-oriented 78 | {({ show, hide }) => ( 79 | )} 89 | 90 | 91 | #### MOVABLE WINDOWS 92 | {({ show }) => ( 93 | )} 94 | 95 | 96 | #### SIMPLE MODALS 97 | {({ show }) => ( 98 | )} 99 | 100 | 101 | 102 |
103 | ); 104 | } 105 | 106 | renderLightbox() { 107 | return ( 108 | { (_, content) => 109 | 110 | { content } 111 | 112 | } 113 | ) 114 | } 115 | 116 | renderSimpleModal() { 117 | return ( 118 | {({index, hide, show}) => ( 119 | 124 | 125 |
126 | SIPMLE MODAL 127 |
128 |
129 |
130 | 131 | )} 132 | 133 | ) 134 | } 135 | 136 | renderMovableWindow() { 137 | return ( 138 | {({index, hide, update}, { 140 | ...rest, 141 | pinned = false, 142 | mouseDown = false, 143 | mouseLastPositionX = 0, 144 | mouseLastPositionY = 0, 145 | windowLeft = 670, 146 | windowTop = 100} = {}) => ( 147 | update({...rest, mouseDown: true})} 149 | onMouseUp={() => update({...rest, mouseDown: false})} 150 | onMouseMove={({ screenX, screenY}) => { 151 | const newArgs = { 152 | mouseLastPositionX: screenX, mouseLastPositionY: screenY 153 | }; 154 | if (pinned && mouseDown) { 155 | newArgs.windowLeft = windowLeft + (screenX - mouseLastPositionX); 156 | newArgs.windowTop = windowTop + (screenY - mouseLastPositionY); 157 | } 158 | update({...rest, ...newArgs}) 159 | }} 160 | onClick={ hide } 161 | zIndex={ index * 100 }> 162 | 165 |
mouseDown || update({...rest, pinned: true})} 168 | onMouseLeave={() => mouseDown || update({...rest, pinned: false})}> 169 | PIN TO MOVE 170 |
179 |
180 |
181 | 182 | ##### Layer inside Layer (inside Layer inside Layer inside Layer inside Layer inside Layer inside Layer ... inside Layer) 183 | 184 | {({ show, hide }) => ( 185 | )} 195 | 196 | ##### Arguments: 197 | 198 | { JSON.stringify(rest, null, '\t') } 199 | 200 | ##### Data from outer component (closure/context): 201 | 202 | { JSON.stringify(this.state, null, '\t') } 203 | 204 | 205 |
206 | 207 | )} 208 | 209 | ) 210 | } 211 | 212 | renderDebugLayer() { 213 | return {({stack}) => 214 | 215 |
220 | 221 | #### Layers displaying: 222 | 223 | { CircularJSON.stringify(stack, null, ' ') } 224 | 225 | 226 |
227 | } 228 | 229 | } 230 | } 231 | 232 | export default Demo; 233 | -------------------------------------------------------------------------------- /demo/src/components/FixedLayer.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ReactDom from 'react-dom'; 3 | 4 | const styles = (onClick) => ({ 5 | position: 'fixed', 6 | pointerEvents: onClick ? 'auto' : 'none', 7 | top: 0, 8 | bottom: 0, 9 | right: 0, 10 | left: 0, 11 | height: '100%', 12 | }); 13 | 14 | const escapeStack = []; 15 | 16 | window.addEventListener('keydown', 17 | (e) => escapeStack.length && 27 === e.keyCode && escapeStack[escapeStack.length-1].call(null, e), 18 | true); 19 | 20 | export default class FixedLayer extends Component { 21 | 22 | static defaultProps = { 23 | zIndex: 2000, 24 | onClick: null, 25 | }; 26 | 27 | componentWillMount() { 28 | if (this.props.onEsc) { 29 | escapeStack.push(this.props.onEsc) 30 | } 31 | } 32 | 33 | componentWillUnmount() { 34 | if (this.props.onEsc) { 35 | escapeStack.pop() 36 | } 37 | } 38 | 39 | render () { 40 | const divProps = { ...this.props }; 41 | delete divProps.zIndex; 42 | delete divProps.onEsc; 43 | return ( 44 |
this.props.onClick && (e.target === ReactDom.findDOMNode(this)) && this.props.onClick() } 46 | style={{...this.props.style, ...styles(this.props.onClick), ...{zIndex: this.props.zIndex}}}> 47 | {this.props.children} 48 |
49 | ) 50 | } 51 | } -------------------------------------------------------------------------------- /demo/src/components/Window.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | const styles = { 4 | position: 'absolute', 5 | willChange: 'transform', 6 | transform: `translateX(0px) translateY(0px)`, 7 | // textAlign: 'center', 8 | width: '600px', 9 | height: 'auto', 10 | borderRadius: '5px', 11 | boxShadow: '0px 0px 110px 0px rgba(0,0,0,0.60)', 12 | }; 13 | 14 | export default class Window extends Component { 15 | 16 | render () { 17 | return ( 18 |
19 | {this.props.children} 20 |
21 | ) 22 | } 23 | } 24 | 25 | -------------------------------------------------------------------------------- /demo/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | font-family: sans-serif; 9 | min-height: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /demo/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lexfrl/react-layer-stack/90826e25093de2ea28be74f59b738ba55faf4e7f/docs/favicon.ico -------------------------------------------------------------------------------- /docs/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lexfrl/react-layer-stack/90826e25093de2ea28be74f59b738ba55faf4e7f/docs/img/.DS_Store -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | React App
2 | -------------------------------------------------------------------------------- /docs/public/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lexfrl/react-layer-stack/90826e25093de2ea28be74f59b738ba55faf4e7f/docs/public/.DS_Store -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lexfrl/react-layer-stack/90826e25093de2ea28be74f59b738ba55faf4e7f/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/public/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lexfrl/react-layer-stack/90826e25093de2ea28be74f59b738ba55faf4e7f/docs/public/img/.DS_Store -------------------------------------------------------------------------------- /docs/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 17 | React App 18 | 19 | 20 |
21 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/static/css/main.f54ba139.css: -------------------------------------------------------------------------------- 1 | .App{text-align:center}.App-logo{-webkit-animation:App-logo-spin infinite 20s linear;animation:App-logo-spin infinite 20s linear;height:80px}.App-header{background-color:#222;height:80px;padding:20px;color:#fff}.App-intro{font-size:large}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}html{height:100%}body{margin:0;padding:0;font-family:sans-serif;min-height:100%} 2 | /*# sourceMappingURL=main.f54ba139.css.map*/ -------------------------------------------------------------------------------- /docs/static/css/main.f54ba139.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"static/css/main.f54ba139.css","sourceRoot":""} -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./lib/index'); -------------------------------------------------------------------------------- /lib/LayerStore.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}(); 2 | 3 | var _LayerStoreCore = require('./LayerStoreCore');var _LayerStoreCore2 = _interopRequireDefault(_LayerStoreCore);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var 4 | 5 | LayerStore = function () { 6 | 7 | function LayerStore() {_classCallCheck(this, LayerStore); 8 | this._core = new _LayerStoreCore2.default(); 9 | this._layerSubscriptions = {}; 10 | this._mountPointsubscriptions = {}; 11 | 12 | this.show = this.show.bind(this); 13 | this.hide = this.hide.bind(this); 14 | this.update = this.update.bind(this); 15 | this.register = this.register.bind(this); 16 | this.updateFn = this.updateFn.bind(this); 17 | this.unregister = this.unregister.bind(this); 18 | this.getLayer = this._core.getLayer; 19 | this.getStack = this._core.getStack; 20 | this.getIndex = this._core.getIndex; 21 | this.isActive = this._core.isActive; 22 | this.getLayersForMountPoint = this._core.getLayersForMountPoint; 23 | }_createClass(LayerStore, [{ key: 'subscribeToLayer', value: function subscribeToLayer( 24 | 25 | id, fn) {var _this = this; 26 | if (typeof this._layerSubscriptions[id] === 'undefined') { 27 | this._layerSubscriptions[id] = new Set(); 28 | } 29 | this._layerSubscriptions[id].add(fn); 30 | return function () { 31 | return _this._layerSubscriptions[id].delete(fn); 32 | }; 33 | } }, { key: 'subscribeToMountPoint', value: function subscribeToMountPoint( 34 | 35 | id, fn) {var _this2 = this; 36 | if (typeof this._mountPointsubscriptions[id] === 'undefined') { 37 | this._mountPointsubscriptions[id] = new Set(); 38 | } 39 | this._mountPointsubscriptions[id].add(fn); 40 | return function () { 41 | return _this2._mountPointsubscriptions[id].delete(fn); 42 | }; 43 | } }, { key: 'notifyLayer', value: function notifyLayer( 44 | 45 | id) { 46 | if (this._layerSubscriptions[id]) { 47 | this._layerSubscriptions[id].forEach(function (fn) {return fn();}); 48 | } 49 | } }, { key: 'notifyMountPoint', value: function notifyMountPoint( 50 | 51 | id) { 52 | if (this._mountPointsubscriptions[id]) { 53 | this._mountPointsubscriptions[id].forEach(function (fn) {return fn();}); 54 | } 55 | } }, { key: 'register', value: function register( 56 | 57 | id, layerFn) 58 | 59 | {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var groups = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var use = arguments[4];var defaultArgs = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];var defaultShow = arguments[6]; 60 | this._core.register(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); 61 | if (mountPointId) { 62 | this.notifyMountPoint(mountPointId); 63 | } else { 64 | this.notifyLayer(id); 65 | } 66 | } }, { key: 'updateFn', value: function updateFn( 67 | 68 | id, layerFn) 69 | 70 | {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var groups = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var use = arguments[4];var defaultArgs = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];var defaultShow = arguments[6]; 71 | var lastMountPoint = this.getLayer(id).mountPointId; 72 | this._core.updateFn(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); 73 | if (lastMountPoint !== mountPointId) { 74 | this.notifyMountPoint(lastMountPoint); 75 | this.notifyMountPoint(mountPointId); 76 | } else { 77 | this.notifyLayer(id); 78 | } 79 | } }, { key: 'reset', value: function reset( 80 | 81 | id) { 82 | this._core.reset(id); 83 | this.notifyLayer(id); 84 | } }, { key: 'unregister', value: function unregister( 85 | 86 | id) { 87 | this._core.unregister(id); 88 | } }, { key: 'show', value: function show( 89 | 90 | id, args) { 91 | this._core.show(id, args); 92 | this.notifyLayer(id); 93 | } }, { key: 'update', value: function update( 94 | 95 | id, args) { 96 | this._core.update(id, args); 97 | this.notifyLayer(id); 98 | } }, { key: 'hide', value: function hide( 99 | 100 | id) { 101 | var stack = this.getStack(); 102 | this._core.hide(id); 103 | this.notifyLayer(id); 104 | } }]);return LayerStore;}();exports.default = LayerStore; 105 | //# sourceMappingURL=LayerStore.js.map -------------------------------------------------------------------------------- /lib/LayerStore.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/LayerStore.js"],"names":["LayerStore","_core","LayerStoreCore","_layerSubscriptions","_mountPointsubscriptions","show","bind","hide","update","register","updateFn","unregister","getLayer","getStack","getIndex","isActive","getLayersForMountPoint","id","fn","Set","add","delete","forEach","layerFn","mountPointId","groups","use","defaultArgs","defaultShow","notifyMountPoint","notifyLayer","lastMountPoint","reset","args","stack"],"mappings":";;AAEA,kD;;AAEqBA,U;;AAEnB,wBAAe;AACb,SAAKC,KAAL,GAAa,IAAIC,wBAAJ,EAAb;AACA,SAAKC,mBAAL,GAA2B,EAA3B;AACA,SAAKC,wBAAL,GAAgC,EAAhC;;AAEA,SAAKC,IAAL,GAAY,KAAKA,IAAL,CAAUC,IAAV,CAAe,IAAf,CAAZ;AACA,SAAKC,IAAL,GAAY,KAAKA,IAAL,CAAUD,IAAV,CAAe,IAAf,CAAZ;AACA,SAAKE,MAAL,GAAc,KAAKA,MAAL,CAAYF,IAAZ,CAAiB,IAAjB,CAAd;AACA,SAAKG,QAAL,GAAgB,KAAKA,QAAL,CAAcH,IAAd,CAAmB,IAAnB,CAAhB;AACA,SAAKI,QAAL,GAAgB,KAAKA,QAAL,CAAcJ,IAAd,CAAmB,IAAnB,CAAhB;AACA,SAAKK,UAAL,GAAkB,KAAKA,UAAL,CAAgBL,IAAhB,CAAqB,IAArB,CAAlB;AACA,SAAKM,QAAL,GAAgB,KAAKX,KAAL,CAAWW,QAA3B;AACA,SAAKC,QAAL,GAAgB,KAAKZ,KAAL,CAAWY,QAA3B;AACA,SAAKC,QAAL,GAAgB,KAAKb,KAAL,CAAWa,QAA3B;AACA,SAAKC,QAAL,GAAgB,KAAKd,KAAL,CAAWc,QAA3B;AACA,SAAKC,sBAAL,GAA8B,KAAKf,KAAL,CAAWe,sBAAzC;AACD,G;;AAEgBC,M,EAAQC,E,EAAc;AACrC,UAAI,OAAO,KAAKf,mBAAL,CAAyBc,EAAzB,CAAP,KAAwC,WAA5C,EAAyD;AACvD,aAAKd,mBAAL,CAAyBc,EAAzB,IAA+B,IAAIE,GAAJ,EAA/B;AACD;AACD,WAAKhB,mBAAL,CAAyBc,EAAzB,EAA6BG,GAA7B,CAAiCF,EAAjC;AACA,aAAO,YAAM;AACX,eAAO,MAAKf,mBAAL,CAAyBc,EAAzB,EAA6BI,MAA7B,CAAoCH,EAApC,CAAP;AACD,OAFD;AAGD,K;;AAEqBD,M,EAAQC,E,EAAc;AAC1C,UAAI,OAAO,KAAKd,wBAAL,CAA8Ba,EAA9B,CAAP,KAA6C,WAAjD,EAA8D;AAC5D,aAAKb,wBAAL,CAA8Ba,EAA9B,IAAoC,IAAIE,GAAJ,EAApC;AACD;AACD,WAAKf,wBAAL,CAA8Ba,EAA9B,EAAkCG,GAAlC,CAAsCF,EAAtC;AACA,aAAO,YAAM;AACX,eAAO,OAAKd,wBAAL,CAA8Ba,EAA9B,EAAkCI,MAAlC,CAAyCH,EAAzC,CAAP;AACD,OAFD;AAGD,K;;AAEWD,M,EAAQ;AAClB,UAAI,KAAKd,mBAAL,CAAyBc,EAAzB,CAAJ,EAAkC;AAChC,aAAKd,mBAAL,CAAyBc,EAAzB,EAA6BK,OAA7B,CAAqC,sBAAMJ,IAAN,EAArC;AACD;AACF,K;;AAEgBD,M,EAAQ;AACvB,UAAI,KAAKb,wBAAL,CAA8Ba,EAA9B,CAAJ,EAAuC;AACrC,aAAKb,wBAAL,CAA8Ba,EAA9B,EAAkCK,OAAlC,CAA0C,sBAAMJ,IAAN,EAA1C;AACD;AACF,K;;AAESD,M,EAAQM,O;;AAEc,SAFIC,YAEJ,uEAFuB,IAEvB,KADtBC,MACsB,uEADF,EACE,KADEC,GACF,oBADmBC,WACnB,uEAD6C,EAC7C,KAAtBC,WAAsB;AAC9B,WAAK3B,KAAL,CAAWQ,QAAX,CAAoBQ,EAApB,EAAwBM,OAAxB,EAAiCC,YAAjC,EAA+CC,MAA/C,EAAuDC,GAAvD,EAA4DC,WAA5D,EAAyEC,WAAzE;AACA,UAAIJ,YAAJ,EAAkB;AAChB,aAAKK,gBAAL,CAAsBL,YAAtB;AACD,OAFD,MAEO;AACL,aAAKM,WAAL,CAAiBb,EAAjB;AACD;AACF,K;;AAESA,M,EAAQM,O;;AAEc,SAFIC,YAEJ,uEAFuB,IAEvB,KADtBC,MACsB,uEADF,EACE,KADEC,GACF,oBADcC,WACd,uEADmC,EACnC,KAAtBC,WAAsB;AAC9B,UAAMG,iBAAiB,KAAKnB,QAAL,CAAcK,EAAd,EAAkBO,YAAzC;AACA,WAAKvB,KAAL,CAAWS,QAAX,CAAoBO,EAApB,EAAwBM,OAAxB,EAAiCC,YAAjC,EAA+CC,MAA/C,EAAuDC,GAAvD,EAA4DC,WAA5D,EAAyEC,WAAzE;AACA,UAAIG,mBAAmBP,YAAvB,EAAqC;AACnC,aAAKK,gBAAL,CAAsBE,cAAtB;AACA,aAAKF,gBAAL,CAAsBL,YAAtB;AACD,OAHD,MAGO;AACL,aAAKM,WAAL,CAAiBb,EAAjB;AACD;AACF,K;;AAEKA,M,EAAQ;AACZ,WAAKhB,KAAL,CAAW+B,KAAX,CAAiBf,EAAjB;AACA,WAAKa,WAAL,CAAiBb,EAAjB;AACD,K;;AAEUA,M,EAAQ;AACjB,WAAKhB,KAAL,CAAWU,UAAX,CAAsBM,EAAtB;AACD,K;;AAEKA,M,EAAQgB,I,EAAa;AACzB,WAAKhC,KAAL,CAAWI,IAAX,CAAgBY,EAAhB,EAAoBgB,IAApB;AACA,WAAKH,WAAL,CAAiBb,EAAjB;AACD,K;;AAEMA,M,EAAQgB,I,EAAa;AAC1B,WAAKhC,KAAL,CAAWO,MAAX,CAAkBS,EAAlB,EAAsBgB,IAAtB;AACA,WAAKH,WAAL,CAAiBb,EAAjB;AACD,K;;AAEKA,M,EAAQ;AACZ,UAAMiB,QAAQ,KAAKrB,QAAL,EAAd;AACA,WAAKZ,KAAL,CAAWM,IAAX,CAAgBU,EAAhB;AACA,WAAKa,WAAL,CAAiBb,EAAjB;AACD,K,6CAnGkBjB,U","file":"LayerStore.js","sourcesContent":["import type { ID, LayerFn } from './types'\r\n\r\nimport LayerStoreCore from './LayerStoreCore'\r\n\r\nexport default class LayerStore {\r\n\r\n constructor () {\r\n this._core = new LayerStoreCore;\r\n this._layerSubscriptions = {};\r\n this._mountPointsubscriptions = {};\r\n\r\n this.show = this.show.bind(this);\r\n this.hide = this.hide.bind(this);\r\n this.update = this.update.bind(this);\r\n this.register = this.register.bind(this);\r\n this.updateFn = this.updateFn.bind(this);\r\n this.unregister = this.unregister.bind(this);\r\n this.getLayer = this._core.getLayer;\r\n this.getStack = this._core.getStack;\r\n this.getIndex = this._core.getIndex;\r\n this.isActive = this._core.isActive;\r\n this.getLayersForMountPoint = this._core.getLayersForMountPoint;\r\n }\r\n\r\n subscribeToLayer(id: ID, fn: Function) {\r\n if (typeof this._layerSubscriptions[id] === 'undefined') {\r\n this._layerSubscriptions[id] = new Set();\r\n }\r\n this._layerSubscriptions[id].add(fn);\r\n return () => {\r\n return this._layerSubscriptions[id].delete(fn);\r\n }\r\n }\r\n\r\n subscribeToMountPoint(id: ID, fn: Function) {\r\n if (typeof this._mountPointsubscriptions[id] === 'undefined') {\r\n this._mountPointsubscriptions[id] = new Set();\r\n }\r\n this._mountPointsubscriptions[id].add(fn);\r\n return () => {\r\n return this._mountPointsubscriptions[id].delete(fn);\r\n }\r\n }\r\n\r\n notifyLayer(id: ID) {\r\n if (this._layerSubscriptions[id]) {\r\n this._layerSubscriptions[id].forEach(fn => fn())\r\n }\r\n }\r\n\r\n notifyMountPoint(id: ID) {\r\n if (this._mountPointsubscriptions[id]) {\r\n this._mountPointsubscriptions[id].forEach(fn => fn());\r\n }\r\n }\r\n\r\n register (id: ID, layerFn: LayerFn, mountPointId: ID = null,\r\n groups: Array = [], use: Array, defaultArgs: Array = [],\r\n defaultShow: Boolean) {\r\n this._core.register(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow);\r\n if (mountPointId) {\r\n this.notifyMountPoint(mountPointId);\r\n } else {\r\n this.notifyLayer(id);\r\n }\r\n }\r\n\r\n updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null,\r\n groups: Array = [], use: Array, defaultArgs: Array = [],\r\n defaultShow: Boolean) {\r\n const lastMountPoint = this.getLayer(id).mountPointId;\r\n this._core.updateFn(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow);\r\n if (lastMountPoint !== mountPointId) {\r\n this.notifyMountPoint(lastMountPoint);\r\n this.notifyMountPoint(mountPointId);\r\n } else {\r\n this.notifyLayer(id);\r\n }\r\n }\r\n\r\n reset(id: ID) {\r\n this._core.reset(id);\r\n this.notifyLayer(id)\r\n }\r\n\r\n unregister(id: ID) {\r\n this._core.unregister(id);\r\n }\r\n\r\n show (id: ID, args: Array) {\r\n this._core.show(id, args);\r\n this.notifyLayer(id);\r\n }\r\n\r\n update(id: ID, args: Array) {\r\n this._core.update(id, args);\r\n this.notifyLayer(id);\r\n }\r\n\r\n hide (id: ID) {\r\n const stack = this.getStack();\r\n this._core.hide(id);\r\n this.notifyLayer(id);\r\n }\r\n}\r\n"]} -------------------------------------------------------------------------------- /lib/LayerStoreCore.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();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 _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var 2 | 3 | LayerStoreCore = function () { 4 | 5 | 6 | 7 | function LayerStoreCore() {_classCallCheck(this, LayerStoreCore); 8 | this.store = { 9 | stack: [], 10 | layers: {} }; 11 | 12 | 13 | this.getLayer = this.getLayer.bind(this); 14 | this.getStack = this.getStack.bind(this); 15 | this.show = this.show.bind(this); 16 | this.hide = this.hide.bind(this); 17 | this.update = this.update.bind(this); 18 | this.register = this.register.bind(this); 19 | this.updateFn = this.updateFn.bind(this); 20 | this.unregister = this.unregister.bind(this); 21 | this.isActive = this.isActive.bind(this); 22 | this.getIndex = this.getIndex.bind(this); 23 | this.getLayersForMountPoint = this.getLayersForMountPoint.bind(this); 24 | }_createClass(LayerStoreCore, [{ key: 'getLayer', value: function getLayer( 25 | 26 | id) { 27 | return this.store.layers[id]; 28 | } }, { key: 'getLayersForMountPoint', value: function getLayersForMountPoint( 29 | 30 | mountPointId) {var 31 | layers = this.store.layers; 32 | return Object.keys(layers).filter(function (id) {return layers[id].mountPointId === mountPointId;}); 33 | } }, { key: 'getStack', value: function getStack() 34 | 35 | { 36 | return this.store.stack; 37 | } }, { key: 'register', value: function register( 38 | 39 | id, layerFn) 40 | 41 | {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var groups = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var use = arguments[4];var defaultArgs = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];var defaultShow = arguments[6]; 42 | this.store.layers[id] = { layerFn: layerFn, groups: groups, mountPointId: mountPointId, defaultArgs: defaultArgs, defaultShow: defaultShow, use: use }; 43 | this.reset(id); 44 | } }, { key: 'updateFn', value: function updateFn( 45 | 46 | id, layerFn) 47 | 48 | {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var groups = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var use = arguments[4];var defaultArgs = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];var defaultShow = arguments[6]; 49 | var layer = this.getLayer(id); 50 | layer.fn = layerFn; 51 | layer.use = use; 52 | layer.mountPointId = mountPointId; 53 | layer.groups = groups; 54 | layer.defaultArgs = defaultArgs; 55 | layer.defaultShow = defaultShow; 56 | } }, { key: 'reset', value: function reset( 57 | 58 | id) { 59 | var layer = this.store.layers[id]; 60 | layer.args = layer.defaultArgs; 61 | if (layer.defaultShow) { 62 | this.show(id); 63 | } 64 | } }, { key: 'unregister', value: function unregister( 65 | 66 | id) { 67 | delete this.store.layers[id]; 68 | } }, { key: 'update', value: function update( 69 | 70 | id) {var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; 71 | if (args.length) { 72 | this.store.layers[id].args = args; 73 | } else { 74 | this.store.layers[id].args = this.store.layers[id].defaultArgs; 75 | } 76 | } }, { key: 'show', value: function show( 77 | 78 | id, args) {var 79 | stack = this.store.stack; 80 | this.update(id, args); 81 | if (id !== stack[stack.length - 1]) { 82 | this.hide(id); 83 | this.store.stack = [].concat(_toConsumableArray(stack), [id]); 84 | } 85 | } }, { key: 'hide', value: function hide( 86 | 87 | id) { 88 | var stack = [].concat(_toConsumableArray(this.store.stack)); 89 | if (-1 !== stack.indexOf(id)) { 90 | stack.splice(stack.indexOf(id), 1); 91 | this.store.stack = stack; 92 | } 93 | } }, { key: 'getIndex', value: function getIndex( 94 | 95 | id) { 96 | return this.store.stack.indexOf(id); 97 | } }, { key: 'isActive', value: function isActive( 98 | 99 | id) { 100 | return this.store.stack.indexOf(id) !== -1; 101 | } }]);return LayerStoreCore;}();exports.default = LayerStoreCore; 102 | //# sourceMappingURL=LayerStoreCore.js.map -------------------------------------------------------------------------------- /lib/LayerStoreCore.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/LayerStoreCore.js"],"names":["LayerStoreCore","store","stack","layers","getLayer","bind","getStack","show","hide","update","register","updateFn","unregister","isActive","getIndex","getLayersForMountPoint","id","mountPointId","Object","keys","filter","layerFn","groups","use","defaultArgs","defaultShow","reset","layer","fn","args","length","indexOf","splice"],"mappings":"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","file":"LayerStoreCore.js","sourcesContent":["import type { ID, LayerFn, Layer, Store, LayerStack, ILayerStore } from './types'\r\n\r\nexport default class LayerStoreCore {\r\n\r\n store: Store;\r\n\r\n constructor () {\r\n this.store = {\r\n stack: [],\r\n layers: {},\r\n };\r\n\r\n this.getLayer = this.getLayer.bind(this);\r\n this.getStack = this.getStack.bind(this);\r\n this.show = this.show.bind(this);\r\n this.hide = this.hide.bind(this);\r\n this.update = this.update.bind(this);\r\n this.register = this.register.bind(this);\r\n this.updateFn = this.updateFn.bind(this);\r\n this.unregister = this.unregister.bind(this);\r\n this.isActive = this.isActive.bind(this);\r\n this.getIndex = this.getIndex.bind(this);\r\n this.getLayersForMountPoint = this.getLayersForMountPoint.bind(this);\r\n }\r\n\r\n getLayer(id: ID): Layer {\r\n return this.store.layers[id];\r\n }\r\n\r\n getLayersForMountPoint(mountPointId: ID) {\r\n const { layers } = this.store;\r\n return Object.keys(layers).filter(id => layers[id].mountPointId === mountPointId)\r\n }\r\n\r\n getStack(): LayerStack {\r\n return this.store.stack;\r\n }\r\n\r\n register (id: ID, layerFn: LayerFn, mountPointId: ID = null,\r\n groups: Array = [], use: Array, defaultArgs: Array = [],\r\n defaultShow: Boolean) {\r\n this.store.layers[id] = { layerFn, groups, mountPointId, defaultArgs, defaultShow, use };\r\n this.reset(id);\r\n }\r\n\r\n updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null,\r\n groups: Array = [], use: Array, defaultArgs: Array = [],\r\n defaultShow: Boolean) {\r\n const layer = this.getLayer(id);\r\n layer.fn = layerFn;\r\n layer.use = use;\r\n layer.mountPointId = mountPointId;\r\n layer.groups = groups;\r\n layer.defaultArgs = defaultArgs;\r\n layer.defaultShow = defaultShow;\r\n }\r\n\r\n reset(id: ID) {\r\n const layer = this.store.layers[id];\r\n layer.args = layer.defaultArgs;\r\n if (layer.defaultShow) {\r\n this.show(id);\r\n }\r\n }\r\n\r\n unregister(id: ID) {\r\n delete this.store.layers[id];\r\n }\r\n\r\n update(id: ID, args: Array = []) {\r\n if (args.length) {\r\n this.store.layers[id].args = args;\r\n } else {\r\n this.store.layers[id].args = this.store.layers[id].defaultArgs;\r\n }\r\n }\r\n\r\n show (id: ID, args: Array) {\r\n const { stack } = this.store;\r\n this.update(id, args);\r\n if ( id !== stack[stack.length - 1] ) {\r\n this.hide(id);\r\n this.store.stack = [...stack, id];\r\n }\r\n }\r\n\r\n hide (id: ID) {\r\n const stack = [...this.store.stack];\r\n if (-1 !== stack.indexOf(id)) {\r\n stack.splice(stack.indexOf(id), 1);\r\n this.store.stack = stack;\r\n }\r\n }\r\n\r\n getIndex(id: ID) {\r\n return this.store.stack.indexOf(id);\r\n }\r\n\r\n isActive(id: ID) {\r\n return this.store.stack.indexOf(id) !== -1;\r\n }\r\n}\r\n"]} -------------------------------------------------------------------------------- /lib/common.js: -------------------------------------------------------------------------------- 1 | "use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.isPrimitiveType = isPrimitiveType;function isPrimitiveType(value) { 2 | return Object(value) !== value; 3 | } 4 | //# sourceMappingURL=common.js.map -------------------------------------------------------------------------------- /lib/common.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/common.js"],"names":["isPrimitiveType","value","Object"],"mappings":"mFAAgBA,e,GAAAA,e,CAAT,SAASA,eAAT,CAAyBC,KAAzB,EAAgC;AACrC,SAAOC,OAAOD,KAAP,MAAkBA,KAAzB;AACD","file":"common.js","sourcesContent":["export function isPrimitiveType(value) {\r\n return Object(value) !== value;\r\n}"]} -------------------------------------------------------------------------------- /lib/components.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.LayerToggle = exports.LayerStackMountPoint = exports.Layer = undefined;var _react = require('react');var _react2 = _interopRequireDefault(_react); 2 | var _reactRedux = require('react-redux'); 3 | var _redux = require('redux'); 4 | 5 | var _reducer = require('./reducer'); 6 | var _helpers = require('./helpers');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);}} 7 | 8 | var Layer = exports.Layer = function Layer() {var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'layer_stack';return (0, _reactRedux.connect)( 9 | function (store) {return store[namespace];}, 10 | function (dispatch) {return (0, _redux.bindActionCreators)(_reducer.ACTIONS, dispatch);})( 11 | _react2.default.createClass({ 12 | propTypes: { 13 | use: _react.PropTypes.array }, 14 | 15 | 16 | componentWillMount: function componentWillMount() { 17 | this.props.register(this.props.id, this.props.children, this.props.mountPointId); 18 | if (this.props.showInitially) {var _props; 19 | (_props = this.props).show.apply(_props, [this.props.id].concat(_toConsumableArray(this.props.initialArgs || []))); 20 | } else {var _props2; 21 | (_props2 = this.props).setArgs.apply(_props2, [this.props.id].concat(_toConsumableArray(this.props.initialArgs || []))); 22 | } 23 | }, 24 | shouldComponentUpdate: function shouldComponentUpdate(newProps) {var _props3 = 25 | this.props;var children = _props3.children;var register = _props3.register;var id = _props3.id;var mountPointId = _props3.mountPointId;var use = _props3.use; 26 | var needUpdate = false; 27 | if (id !== newProps.id || mountPointId !== newProps.mountPointId) { 28 | needUpdate = true; 29 | } else 30 | if (children.toString() !== newProps.children.toString()) { 31 | needUpdate = true; 32 | } else 33 | if (use) { 34 | if (use.length !== newProps.use.length) { 35 | needUpdate = true; 36 | } else { 37 | var i = use.length; 38 | while (i--) { 39 | debugger; 40 | if ((0, _helpers.isPrimitiveType)(use[i]) && (0, _helpers.isPrimitiveType)(newProps.use[i])) { 41 | if (use[i] !== newProps.use[i]) { 42 | needUpdate = true; 43 | } 44 | } else 45 | if (typeof use[i].equals === 'function' && typeof newProps.use[i].equals === 'function') { 46 | if (!use[i].equals(newProps.use[i])) {// fast equality check for immutable-js && mori 47 | needUpdate = true; 48 | } 49 | } else 50 | if (JSON.stringify(use[i]) !== JSON.stringify(newProps.use[i])) { 51 | needUpdate = true; 52 | } 53 | } 54 | } 55 | } 56 | 57 | if (needUpdate) { 58 | register(newProps.id, newProps.children, newProps.mountPointId); 59 | return true; 60 | } 61 | return false; 62 | }, 63 | 64 | componentWillUnmount: function componentWillUnmount() { 65 | // TODO: garbage collection 66 | // this.props.unregister(this.props.id) 67 | }, 68 | 69 | render: function render() { 70 | return null; 71 | } }));}; 72 | 73 | 74 | var LayerStackMountPoint = exports.LayerStackMountPoint = function LayerStackMountPoint() {var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'layer_stack';return (0, _reactRedux.connect)( 75 | function (store) {return store[namespace];}, 76 | function (dispatch) {return (0, _redux.bindActionCreators)(_reducer.ACTIONS, dispatch);})( 77 | function (_ref) 78 | 79 | 80 | {var mountPointId = _ref.id;var mountPointArgs = _ref.args;var _ref$elementType = _ref.elementType;var elementType = _ref$elementType === undefined ? 'span' : _ref$elementType;var renderFn = _ref.renderFn;var views = _ref.views;var displaying = _ref.displaying;var _show = _ref.show;var _hide = _ref.hide;var hideAll = _ref.hideAll; 81 | return (0, _react.createElement)(elementType, {}, renderFn ? renderFn({ views: views, displaying: displaying, show: _show, hide: _hide, hideAll: hideAll, mountPointId: mountPointId, mountPointArgs: mountPointArgs }) // it's possible to provide alternative renderFn for the MountPoint 82 | : displaying.map(function (id, index) {return (// if no alternative renderFn provided we'll use the default one 83 | (0, _react.createElement)(elementType, { key: id }, function () { 84 | var view = views[id]; 85 | if (view && view.renderFn && view.mountPointId === mountPointId) { 86 | return view.renderFn.apply(view, [{ 87 | index: index, id: id, hideAll: hideAll, displaying: displaying, views: views, mountPointArgs: mountPointArgs, // seems like there is no valid use-case mountPointId in the Layer render function 88 | 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: think about improvement 89 | hide: function hide() {return _hide(id);}, // intention here is to hide ID's management from Layer and let app developer manage these IDs independently 90 | // which will give an ability to write general-purpose Layers and share them b/w projects 91 | show: function show() {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 92 | }].concat(_toConsumableArray(view.args))); 93 | } 94 | if (typeof view === 'undefined' || typeof view.renderFn === 'undefined') { 95 | throw new Error('\n It seems like you\'re using LayerToggle with id="' + 96 | id + '" but corresponding Layer isn\'t declared in the current Components tree.\n Make sure that Layer with id="' + 97 | id + '" is rendered into the current tree.\n '); 98 | 99 | 100 | } 101 | }()));})); 102 | });}; 103 | 104 | var LayerToggle = exports.LayerToggle = function LayerToggle() {var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'layer_stack';return (0, _reactRedux.connect)( 105 | function (store) {return store[namespace];}, 106 | function (dispatch) {return (0, _redux.bindActionCreators)(_reducer.ACTIONS, dispatch);})( 107 | function (_ref2) 108 | 109 | 110 | {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']); 111 | return children.apply(undefined, [{ 112 | hideAll: hideAll, displaying: displaying, views: views, 113 | isActive: displaying.indexOf(props.for) !== -1, 114 | 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);}, 115 | 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));}, 116 | 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( 117 | views[props.for].args))); 118 | });}; 119 | //# sourceMappingURL=components.js.map -------------------------------------------------------------------------------- /lib/components.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/components.js"],"names":["Layer","namespace","store","dispatch","createClass","propTypes","use","array","componentWillMount","props","register","id","children","mountPointId","showInitially","show","initialArgs","setArgs","shouldComponentUpdate","newProps","needUpdate","toString","length","i","equals","JSON","stringify","componentWillUnmount","render","LayerStackMountPoint","mountPointArgs","args","elementType","renderFn","views","displaying","hide","hideAll","map","index","key","view","showOnlyMe","Error","LayerToggle","isActive","indexOf","for"],"mappings":"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","file":"components.js","sourcesContent":["import React, { PropTypes, createElement} from 'react'\nimport { connect } from 'react-redux'\nimport { bindActionCreators } from 'redux'\n\nimport { ACTIONS } from './reducer'\nimport { isPrimitiveType } from './helpers'\n\nexport const Layer = (namespace = 'layer_stack') => connect(\n (store) => store[namespace],\n dispatch => bindActionCreators(ACTIONS, dispatch)\n)((React.createClass({\n propTypes: {\n use: PropTypes.array\n },\n\n componentWillMount() {\n this.props.register(this.props.id, this.props.children, this.props.mountPointId);\n if (this.props.showInitially) {\n this.props.show(this.props.id, ...(this.props.initialArgs || []))\n } else {\n this.props.setArgs(this.props.id, ...(this.props.initialArgs || []))\n }\n },\n shouldComponentUpdate(newProps) {\n const { children, register, id, mountPointId, use } = this.props;\n let needUpdate = false;\n if (id !== newProps.id || mountPointId !== newProps.mountPointId) {\n needUpdate = true;\n }\n else if (children.toString() !== newProps.children.toString()) {\n needUpdate = true;\n }\n else if (use) {\n if (use.length !== newProps.use.length) {\n needUpdate = true;\n } else {\n let i = use.length;\n while (i--) {\n debugger;\n if (isPrimitiveType(use[i]) && isPrimitiveType(newProps.use[i])) {\n if (use[i] !== newProps.use[i]) {\n needUpdate = true\n }\n }\n else if (typeof use[i].equals === 'function' && typeof newProps.use[i].equals === 'function') {\n if (!use[i].equals(newProps.use[i])) { // fast equality check for immutable-js && mori\n needUpdate = true;\n }\n }\n else if (JSON.stringify(use[i]) !== JSON.stringify(newProps.use[i])) {\n needUpdate = true;\n }\n }\n }\n }\n\n if (needUpdate) {\n register(newProps.id, newProps.children, newProps.mountPointId);\n return true;\n }\n return false;\n },\n\n componentWillUnmount() {\n // TODO: garbage collection\n // this.props.unregister(this.props.id)\n },\n\n render() {\n return null;\n }\n})));\n\nexport const LayerStackMountPoint = (namespace = 'layer_stack') => connect(\n (store) => store[namespace],\n dispatch => bindActionCreators(ACTIONS, dispatch)\n)(({\n id: mountPointId, args: mountPointArgs, elementType = 'span', // from props\n renderFn, views, displaying, show, hide, hideAll // from store\n}) => {\n return createElement(elementType, {}, renderFn ? renderFn({views, displaying, show, hide, hideAll, mountPointId, mountPointArgs}) // it's possible to provide alternative renderFn for the MountPoint\n : displaying.map ((id, index) => // if no alternative renderFn provided we'll use the default one\n createElement(elementType, { key: id }, (() => {\n const view = views[id];\n if (view && view.renderFn && view.mountPointId === mountPointId) {\n return view.renderFn({\n index, id, hideAll, displaying, views, mountPointArgs, // seems like there is no valid use-case mountPointId in the Layer render function\n showOnlyMe: (...args) => hideAll() || show(id, ...args), // TODO: think about improvement\n hide: () => hide(id), // intention here is to hide ID's management from Layer and let app developer manage these IDs independently\n // which will give an ability to write general-purpose Layers and share them b/w projects\n show: (...args) => show(id, ...args) // sometimes you may want to change args of the current layer\n }, ...view.args)\n }\n if (typeof view === 'undefined' || typeof view.renderFn === 'undefined') {\n throw new Error(`\n It seems like you're using LayerToggle with id=\"${ id }\" but corresponding Layer isn't declared in the current Components tree.\n Make sure that Layer with id=\"${ id }\" is rendered into the current tree.\n `\n )\n }\n })())))\n});\n\nexport const LayerToggle = (namespace = 'layer_stack') => connect(\n (store) => store[namespace],\n dispatch => bindActionCreators(ACTIONS, dispatch)\n)(({\n children, // from props\n displaying, show, hide, hideAll, views, ...props, // from store\n}) => {\n return children({\n hideAll, displaying, views,\n isActive: displaying.indexOf(props.for) !== -1,\n show: (...args) => props.for ? show(props.for, ...args) : show(...args),\n showOnlyMe: (...args) => hideAll() || show(props.for, ...args),\n hide: (...args) => props.for ? hide(props.for, ...args) : hide(...args),\n }, ...views[props.for].args);\n});"]} -------------------------------------------------------------------------------- /lib/components/Layer.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();var _react = require('react');var _react2 = _interopRequireDefault(_react); 2 | var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes); 3 | var _common = require('./../common'); 4 | var _LayerStore = require('./../LayerStore');var _LayerStore2 = _interopRequireDefault(_LayerStore); 5 | var _LayerMountPoint = require('./LayerMountPoint');var _LayerMountPoint2 = _interopRequireDefault(_LayerMountPoint);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var 6 | 7 | Layer = function (_Component) {_inherits(Layer, _Component); 8 | 9 | 10 | 11 | function Layer(props, context) {_classCallCheck(this, Layer);var _this = _possibleConstructorReturn(this, (Layer.__proto__ || Object.getPrototypeOf(Layer)).call(this, 12 | props, context)); 13 | _this.layerStore = context.layerStore;return _this; 14 | }_createClass(Layer, [{ key: 'componentWillMount', value: function componentWillMount() 15 | 16 | {var 17 | layerStore = this.context.layerStore;var _props = 18 | this.props,id = _props.id,children = _props.children,to = _props.to,use = _props.use,defaultArgs = _props.defaultArgs,defaultShow = _props.defaultShow; 19 | layerStore.register(id, children, to, null, use, defaultArgs, defaultShow); 20 | } }, { key: 'shouldComponentUpdate', value: function shouldComponentUpdate( 21 | 22 | newProps) {var _props2 = 23 | this.props,children = _props2.children,id = _props2.id,to = _props2.to,use = _props2.use;var 24 | layerStore = this.context.layerStore; 25 | var needUpdate = false; 26 | if (id !== newProps.id || to !== newProps.to) { 27 | needUpdate = true; 28 | } else 29 | if (children.toString() !== newProps.children.toString()) { 30 | needUpdate = true; 31 | } else 32 | if (use) { 33 | if (use.length !== newProps.use.length) { 34 | needUpdate = true; 35 | } else { 36 | var i = use.length; 37 | while (i--) { 38 | if ((0, _common.isPrimitiveType)(use[i]) && (0, _common.isPrimitiveType)(newProps.use[i])) { 39 | if (use[i] !== newProps.use[i]) { 40 | needUpdate = true; 41 | } 42 | } else 43 | if (typeof use[i].equals === 'function' && typeof newProps.use[i].equals === 'function') { 44 | if (!use[i].equals(newProps.use[i])) {// fast equality check for immutable-js && mori 45 | needUpdate = true; 46 | } 47 | } else 48 | if (JSON.stringify(use[i]) !== JSON.stringify(newProps.use[i])) { 49 | needUpdate = true; 50 | } 51 | } 52 | } 53 | } 54 | 55 | if (needUpdate) { 56 | layerStore.updateFn(newProps.id, newProps.children, newProps.to, null, newProps.use, newProps.defaultArgs, newProps.defaultShow); 57 | return true; 58 | } 59 | return false; 60 | } }, { key: 'componentWillUnmount', value: function componentWillUnmount() 61 | 62 | { 63 | this.layerStore = null; 64 | } }, { key: 'render', value: function render() 65 | 66 | {var _props3 = 67 | this.props,id = _props3.id,to = _props3.to,elementType = _props3.elementType; 68 | if (!to) { 69 | return (0, _react.createElement)(_LayerMountPoint2.default, { id: id }); 70 | } 71 | return null; 72 | } }]);return Layer;}(_react.Component);exports.default = Layer; 73 | 74 | 75 | Layer.propTypes = { 76 | use: _propTypes2.default.array }; 77 | 78 | 79 | Layer.defaultProps = { 80 | elementType: 'span' }; 81 | 82 | 83 | Layer.contextTypes = { 84 | layerStore: _propTypes2.default.object }; 85 | //# sourceMappingURL=Layer.js.map -------------------------------------------------------------------------------- /lib/components/Layer.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/components/Layer.js"],"names":["Layer","props","context","layerStore","id","children","to","use","defaultArgs","defaultShow","register","newProps","needUpdate","toString","length","i","equals","JSON","stringify","updateFn","elementType","LayerMountPoint","Component","propTypes","PropTypes","array","defaultProps","contextTypes","object"],"mappings":"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","file":"Layer.js","sourcesContent":["import React, { Component, createElement} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { isPrimitiveType } from './../common';\r\nimport LayerStore from './../LayerStore';\r\nimport LayerMountPoint from './LayerMountPoint';\r\n\r\nexport default class Layer extends Component {\r\n\r\n layerStore: LayerStore;\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.layerStore = context.layerStore;\r\n }\r\n\r\n componentWillMount() {\r\n const { layerStore } = this.context;\r\n const { id, children, to, use, defaultArgs, defaultShow } = this.props;\r\n layerStore.register(id, children, to, null, use, defaultArgs, defaultShow);\r\n }\r\n\r\n shouldComponentUpdate(newProps) {\r\n const { children, id, to, use } = this.props;\r\n const { layerStore } = this.context;\r\n let needUpdate = false;\r\n if (id !== newProps.id || to !== newProps.to) {\r\n needUpdate = true;\r\n }\r\n else if (children.toString() !== newProps.children.toString()) {\r\n needUpdate = true;\r\n }\r\n else if (use) {\r\n if (use.length !== newProps.use.length) {\r\n needUpdate = true;\r\n } else {\r\n let i = use.length;\r\n while (i--) {\r\n if (isPrimitiveType(use[i]) && isPrimitiveType(newProps.use[i])) {\r\n if (use[i] !== newProps.use[i]) {\r\n needUpdate = true\r\n }\r\n }\r\n else if (typeof use[i].equals === 'function' && typeof newProps.use[i].equals === 'function') {\r\n if (!use[i].equals(newProps.use[i])) { // fast equality check for immutable-js && mori\r\n needUpdate = true;\r\n }\r\n }\r\n else if (JSON.stringify(use[i]) !== JSON.stringify(newProps.use[i])) {\r\n needUpdate = true;\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (needUpdate) {\r\n layerStore.updateFn(newProps.id, newProps.children, newProps.to, null, newProps.use, newProps.defaultArgs, newProps.defaultShow);\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n componentWillUnmount() {\r\n this.layerStore = null;\r\n }\r\n\r\n render() {\r\n const { id, to, elementType } = this.props;\r\n if (!to) {\r\n return createElement(LayerMountPoint, { id });\r\n }\r\n return null;\r\n }\r\n}\r\n\r\nLayer.propTypes = {\r\n use: PropTypes.array\r\n};\r\n\r\nLayer.defaultProps = {\r\n elementType: 'span'\r\n};\r\n\r\nLayer.contextTypes = {\r\n layerStore: PropTypes.object\r\n};\r\n"]} -------------------------------------------------------------------------------- /lib/components/LayerMountPoint.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();var _react = require('react');var _react2 = _interopRequireDefault(_react); 2 | var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes); 3 | var _LayerStore = require('./../LayerStore');var _LayerStore2 = _interopRequireDefault(_LayerStore);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);}}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var 4 | 5 | 6 | LayerMountPoint = function (_Component) {_inherits(LayerMountPoint, _Component); 7 | 8 | 9 | 10 | 11 | function LayerMountPoint(props, context) {_classCallCheck(this, LayerMountPoint);var _this = _possibleConstructorReturn(this, (LayerMountPoint.__proto__ || Object.getPrototypeOf(LayerMountPoint)).call(this, 12 | props, context)); 13 | _this.unsubscribe = null; 14 | _this.layerStore = context.layerStore;return _this; 15 | }_createClass(LayerMountPoint, [{ key: 'shouldComponentUpdate', value: function shouldComponentUpdate( 16 | 17 | props, state) { 18 | return true; 19 | } }, { key: 'componentWillMount', value: function componentWillMount() 20 | 21 | {var _this2 = this; 22 | this.unsubscribe = this.layerStore.subscribeToLayer(this.props.id, function () { 23 | _this2.setState({}); 24 | }); 25 | } }, { key: 'componentWillUnmount', value: function componentWillUnmount() 26 | 27 | { 28 | this.unsubscribe(); 29 | this.unsubscribe = null; 30 | this.layerStore = null; 31 | } }, { key: 'render', value: function render() 32 | 33 | {var 34 | id = this.props.id;var _layerStore = 35 | this.layerStore,_show = _layerStore.show,_hide = _layerStore.hide,_update = _layerStore.update,isActive = _layerStore.isActive; 36 | var stack = this.layerStore.getStack(); 37 | var layer = this.layerStore.getLayer(id); 38 | var index = this.layerStore.getIndex(id); 39 | return isActive(id) ? layer.layerFn.apply(layer, [{ 40 | index: index, id: id, stack: stack, // seems like there is no valid use-case mountPointId in the Layer render function 41 | hide: function hide() {return _hide(id);}, // intention here is to hide ID's management from Layer and let app developer manage these IDs independently 42 | // which will give an ability to write general-purpose Layers and share them b/w projects 43 | show: function show() {for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}return _show(id, args);}, // sometimes you may want to change args of the current layer 44 | update: function update() {for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}return _update(id, args);} }].concat(_toConsumableArray( 45 | layer.args))) : null; 46 | } }]);return LayerMountPoint;}(_react.Component);exports.default = LayerMountPoint; 47 | 48 | 49 | LayerMountPoint.contextTypes = { 50 | layerStore: _propTypes2.default.object }; 51 | 52 | 53 | LayerMountPoint.defaultProps = { 54 | index: 0 }; 55 | //# sourceMappingURL=LayerMountPoint.js.map -------------------------------------------------------------------------------- /lib/components/LayerMountPoint.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/components/LayerMountPoint.js"],"names":["LayerMountPoint","props","context","unsubscribe","layerStore","state","subscribeToLayer","id","setState","show","hide","update","isActive","stack","getStack","layer","getLayer","index","getIndex","layerFn","args","Component","contextTypes","PropTypes","object","defaultProps"],"mappings":"gnBAAA,8B;AACA,uC;AACA,6C;;;AAGqBA,e;;;;;AAKnB,2BAAYC,KAAZ,EAAmBC,OAAnB,EAA4B;AACpBD,SADoB,EACbC,OADa;AAE1B,UAAKC,WAAL,GAAmB,IAAnB;AACA,UAAKC,UAAL,GAAkBF,QAAQE,UAA1B,CAH0B;AAI3B,G;;AAEqBH,S,EAAOI,K,EAAO;AAClC,aAAO,IAAP;AACD,K;;AAEoB;AACnB,WAAKF,WAAL,GAAmB,KAAKC,UAAL,CAAgBE,gBAAhB,CAAiC,KAAKL,KAAL,CAAWM,EAA5C,EAAgD,YAAM;AACvE,eAAKC,QAAL,CAAc,EAAd;AACD,OAFkB,CAAnB;AAGD,K;;AAEsB;AACrB,WAAKL,WAAL;AACA,WAAKA,WAAL,GAAmB,IAAnB;AACA,WAAKC,UAAL,GAAkB,IAAlB;AACD,K;;AAEQ;AACCG,QADD,GACQ,KAAKN,KADb,CACCM,EADD;AAEkC,WAAKH,UAFvC,CAECK,KAFD,eAECA,IAFD,CAEOC,KAFP,eAEOA,IAFP,CAEaC,OAFb,eAEaA,MAFb,CAEqBC,QAFrB,eAEqBA,QAFrB;AAGP,UAAMC,QAAQ,KAAKT,UAAL,CAAgBU,QAAhB,EAAd;AACA,UAAMC,QAAQ,KAAKX,UAAL,CAAgBY,QAAhB,CAAyBT,EAAzB,CAAd;AACA,UAAMU,QAAQ,KAAKb,UAAL,CAAgBc,QAAhB,CAAyBX,EAAzB,CAAd;AACA,aAAOK,SAASL,EAAT,IAAeQ,MAAMI,OAAN,eAAc;AAClCF,oBADkC,EAC3BV,MAD2B,EACvBM,YADuB,EAChB;AAClBH,cAAM,wBAAMA,MAAKH,EAAL,CAAN,EAF4B,EAEZ;AACtB;AACAE,cAAM,mDAAIW,IAAJ,gDAAIA,IAAJ,iCAAaX,MAAKF,EAAL,EAASa,IAAT,CAAb,EAJ4B,EAIC;AACnCT,gBAAQ,sDAAIS,IAAJ,qDAAIA,IAAJ,mCAAaT,QAAOJ,EAAP,EAAWa,IAAX,CAAb,EAL0B,EAAd;AAMhBL,YAAMK,IANU,GAAf,GAMa,IANpB;AAOD,K,8BAxC0CC,gB,oBAAxBrB,e;;;AA2CrBA,gBAAgBsB,YAAhB,GAA+B;AAC7BlB,cAAYmB,oBAAUC,MADO,EAA/B;;;AAIAxB,gBAAgByB,YAAhB,GAA+B;AAC7BR,SAAO,CADsB,EAA/B","file":"LayerMountPoint.js","sourcesContent":["import React, { Component, createElement } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport LayerStore from './../LayerStore';\r\nimport type { MountPointProps } from './../types';\r\n\r\nexport default class LayerMountPoint extends Component {\r\n\r\n props: MountPointProps;\r\n layerStore: LayerStore;\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.unsubscribe = null;\r\n this.layerStore = context.layerStore;\r\n }\r\n\r\n shouldComponentUpdate(props, state) {\r\n return true;\r\n }\r\n\r\n componentWillMount() {\r\n this.unsubscribe = this.layerStore.subscribeToLayer(this.props.id, () => {\r\n this.setState({})\r\n });\r\n }\r\n\r\n componentWillUnmount() {\r\n this.unsubscribe();\r\n this.unsubscribe = null;\r\n this.layerStore = null;\r\n }\r\n\r\n render() {\r\n const { id } = this.props;\r\n const { show, hide, update, isActive } = this.layerStore;\r\n const stack = this.layerStore.getStack();\r\n const layer = this.layerStore.getLayer(id);\r\n const index = this.layerStore.getIndex(id);\r\n return isActive(id) ? layer.layerFn({\r\n index, id, stack, // seems like there is no valid use-case mountPointId in the Layer render function\r\n hide: () => hide(id), // intention here is to hide ID's management from Layer and let app developer manage these IDs independently\r\n // which will give an ability to write general-purpose Layers and share them b/w projects\r\n show: (...args) => show(id, args), // sometimes you may want to change args of the current layer\r\n update: (...args) => update(id, args)\r\n }, ...layer.args) : null;\r\n }\r\n}\r\n\r\nLayerMountPoint.contextTypes = {\r\n layerStore: PropTypes.object\r\n};\r\n\r\nLayerMountPoint.defaultProps = {\r\n index: 0\r\n};\r\n"]} -------------------------------------------------------------------------------- /lib/components/LayerStackMountPoint.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();var _react = require('react');var _react2 = _interopRequireDefault(_react); 2 | var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes); 3 | var _LayerMountPoint = require('./LayerMountPoint');var _LayerMountPoint2 = _interopRequireDefault(_LayerMountPoint); 4 | var _LayerStore = require('./../LayerStore');var _LayerStore2 = _interopRequireDefault(_LayerStore);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var 5 | 6 | LayerStackMountPoint = function (_Component) {_inherits(LayerStackMountPoint, _Component); 7 | 8 | 9 | 10 | function LayerStackMountPoint(props, context) {_classCallCheck(this, LayerStackMountPoint);var _this = _possibleConstructorReturn(this, (LayerStackMountPoint.__proto__ || Object.getPrototypeOf(LayerStackMountPoint)).call(this, 11 | props, context)); 12 | _this.unsubscribe = context.layerStore.subscribeToMountPoint(props.id, function () { 13 | _this.setState({}); 14 | }); 15 | _this.layerStore = context.layerStore;return _this; 16 | }_createClass(LayerStackMountPoint, [{ key: 'componentWillUnmount', value: function componentWillUnmount() 17 | 18 | { 19 | this.unsubscribe(); 20 | this.unsubscribe = null; 21 | this.layerStore = null; 22 | } }, { key: 'render', value: function render() 23 | 24 | {var _props = 25 | this.props,mountPointId = _props.id,elementType = _props.elementType,layerStackWrapperClass = _props.layerStackWrapperClass,layerWrapperClass = _props.layerWrapperClass; 26 | return (0, _react.createElement)(elementType, { className: layerStackWrapperClass }, this.layerStore.getLayersForMountPoint(mountPointId). 27 | map(function (id) {return (0, _react.createElement)(elementType, { key: id, className: layerWrapperClass }, 28 | (0, _react.createElement)(_LayerMountPoint2.default, { id: id }));})); 29 | } }]);return LayerStackMountPoint;}(_react.Component);exports.default = LayerStackMountPoint; 30 | 31 | 32 | LayerStackMountPoint.contextTypes = { 33 | layerStore: _propTypes2.default.object }; 34 | 35 | 36 | LayerStackMountPoint.defaultProps = { 37 | elementType: 'span', 38 | layerStackWrapperClass: '', 39 | layerWrapperClass: '' }; 40 | //# sourceMappingURL=LayerStackMountPoint.js.map -------------------------------------------------------------------------------- /lib/components/LayerStackMountPoint.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/components/LayerStackMountPoint.js"],"names":["LayerStackMountPoint","props","context","unsubscribe","layerStore","subscribeToMountPoint","id","setState","mountPointId","elementType","layerStackWrapperClass","layerWrapperClass","className","getLayersForMountPoint","map","key","LayerMountPoint","Component","contextTypes","PropTypes","object","defaultProps"],"mappings":"gnBAAA,8B;AACA,uC;AACA,oD;AACA,6C;;AAEqBA,oB;;;;AAInB,gCAAYC,KAAZ,EAAmBC,OAAnB,EAA4B;AACpBD,SADoB,EACbC,OADa;AAE1B,UAAKC,WAAL,GAAmBD,QAAQE,UAAR,CAAmBC,qBAAnB,CAAyCJ,MAAMK,EAA/C,EAAmD,YAAM;AAC1E,YAAKC,QAAL,CAAc,EAAd;AACD,KAFkB,CAAnB;AAGA,UAAKH,UAAL,GAAkBF,QAAQE,UAA1B,CAL0B;AAM3B,G;;AAEsB;AACrB,WAAKD,WAAL;AACA,WAAKA,WAAL,GAAmB,IAAnB;AACA,WAAKC,UAAL,GAAkB,IAAlB;AACD,K;;AAEQ;AAC8E,WAAKH,KADnF,CACKO,YADL,UACCF,EADD,CACmBG,WADnB,UACmBA,WADnB,CACgCC,sBADhC,UACgCA,sBADhC,CACwDC,iBADxD,UACwDA,iBADxD;AAEP,aAAO,0BAAcF,WAAd,EAA2B,EAAEG,WAAWF,sBAAb,EAA3B,EAAkE,KAAKN,UAAL,CAAgBS,sBAAhB,CAAuCL,YAAvC;AACtEM,SADsE,CAClE,UAACR,EAAD,UAAQ,0BAAcG,WAAd,EAA2B,EAAEM,KAAKT,EAAP,EAAWM,WAAWD,iBAAtB,EAA3B;AACX,kCAAcK,yBAAd,EAA+B,EAAEV,MAAF,EAA/B,CADW,CAAR,EADkE,CAAlE,CAAP;AAGD,K,mCAvB+CW,gB,oBAA7BjB,oB;;;AA0BrBA,qBAAqBkB,YAArB,GAAoC;AAClCd,cAAYe,oBAAUC,MADY,EAApC;;;AAIApB,qBAAqBqB,YAArB,GAAoC;AAClCZ,eAAa,MADqB;AAElCC,0BAAwB,EAFU;AAGlCC,qBAAmB,EAHe,EAApC","file":"LayerStackMountPoint.js","sourcesContent":["import React, { Component, createElement} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport LayerMountPoint from './LayerMountPoint';\r\nimport LayerStore from './../LayerStore'\r\n\r\nexport default class LayerStackMountPoint extends Component {\r\n\r\n layerStore: LayerStore;\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.unsubscribe = context.layerStore.subscribeToMountPoint(props.id, () => {\r\n this.setState({})\r\n });\r\n this.layerStore = context.layerStore;\r\n }\r\n\r\n componentWillUnmount() {\r\n this.unsubscribe();\r\n this.unsubscribe = null;\r\n this.layerStore = null;\r\n }\r\n\r\n render() {\r\n const { id: mountPointId, elementType, layerStackWrapperClass, layerWrapperClass } = this.props;\r\n return createElement(elementType, { className: layerStackWrapperClass }, this.layerStore.getLayersForMountPoint(mountPointId)\r\n .map((id) => createElement(elementType, { key: id, className: layerWrapperClass },\r\n createElement(LayerMountPoint, { id }))))\r\n }\r\n}\r\n\r\nLayerStackMountPoint.contextTypes = {\r\n layerStore: PropTypes.object\r\n};\r\n\r\nLayerStackMountPoint.defaultProps = {\r\n elementType: 'span',\r\n layerStackWrapperClass: '',\r\n layerWrapperClass: ''\r\n};\r\n"]} -------------------------------------------------------------------------------- /lib/components/LayerStackProvider.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();var _react = require('react');var _react2 = _interopRequireDefault(_react); 2 | var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes); 3 | var _LayerStore = require('./../LayerStore');var _LayerStore2 = _interopRequireDefault(_LayerStore);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var 4 | 5 | LayerStackProvider = function (_Component) {_inherits(LayerStackProvider, _Component);function LayerStackProvider() {_classCallCheck(this, LayerStackProvider);return _possibleConstructorReturn(this, (LayerStackProvider.__proto__ || Object.getPrototypeOf(LayerStackProvider)).apply(this, arguments));}_createClass(LayerStackProvider, [{ key: 'getChildContext', value: function getChildContext() 6 | { 7 | return { 8 | layerStore: new _LayerStore2.default() }; 9 | 10 | } }, { key: 'render', value: function render() 11 | 12 | { 13 | return _react.Children.only(this.props.children); 14 | } }]);return LayerStackProvider;}(_react.Component);exports.default = LayerStackProvider; 15 | 16 | 17 | LayerStackProvider.childContextTypes = { 18 | layerStore: _propTypes2.default.object }; 19 | //# sourceMappingURL=LayerStackProvider.js.map -------------------------------------------------------------------------------- /lib/components/LayerStackProvider.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/components/LayerStackProvider.js"],"names":["LayerStackProvider","layerStore","LayerStore","Children","only","props","children","Component","childContextTypes","PropTypes","object"],"mappings":"gnBAAA,8B;AACA,uC;AACA,6C;;AAEqBA,kB;AACD;AAChB,aAAO;AACLC,oBAAY,IAAIC,oBAAJ,EADP,EAAP;;AAGD,K;;AAEQ;AACP,aAAOC,gBAASC,IAAT,CAAc,KAAKC,KAAL,CAAWC,QAAzB,CAAP;AACD,K,iCAT6CC,gB,oBAA3BP,kB;;;AAYrBA,mBAAmBQ,iBAAnB,GAAuC;AACrCP,cAAYQ,oBAAUC,MADe,EAAvC","file":"LayerStackProvider.js","sourcesContent":["import React, { Component, Children } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport LayerStore from './../LayerStore'\r\n\r\nexport default class LayerStackProvider extends Component {\r\n getChildContext() {\r\n return {\r\n layerStore: new LayerStore()\r\n }\r\n }\r\n\r\n render() {\r\n return Children.only(this.props.children)\r\n }\r\n}\r\n\r\nLayerStackProvider.childContextTypes = {\r\n layerStore: PropTypes.object\r\n};\r\n"]} -------------------------------------------------------------------------------- /lib/components/LayerToggle.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();var _react = require('react');var _react2 = _interopRequireDefault(_react); 2 | var _propTypes = require('prop-types');var _propTypes2 = _interopRequireDefault(_propTypes); 3 | var _LayerStore = require('./../LayerStore');var _LayerStore2 = _interopRequireDefault(_LayerStore);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);}}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 _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}function _possibleConstructorReturn(self, call) {if (!self) {throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return call && (typeof call === "object" || typeof call === "function") ? call : self;}function _inherits(subClass, superClass) {if (typeof superClass !== "function" && superClass !== null) {throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);}subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;}var 4 | 5 | LayerToggle = function (_Component) {_inherits(LayerToggle, _Component); 6 | 7 | 8 | 9 | function LayerToggle(props, context) {_classCallCheck(this, LayerToggle);var _this = _possibleConstructorReturn(this, (LayerToggle.__proto__ || Object.getPrototypeOf(LayerToggle)).call(this, 10 | props, context)); 11 | _this.unsubscribe = null; 12 | _this.layerStore = context.layerStore;return _this; 13 | }_createClass(LayerToggle, [{ key: 'componentWillMount', value: function componentWillMount() 14 | 15 | {var _this2 = this; 16 | this.unsubscribe = this.layerStore.subscribeToLayer(this.props.for, function () { 17 | setTimeout(function () {return _this2.setState({});}, 100); 18 | }); 19 | } }, { key: 'componentWillUnmount', value: function componentWillUnmount() 20 | 21 | { 22 | this.unsubscribe(); 23 | this.unsubscribe = null; 24 | this.layerStore = null; 25 | } }, { key: 'render', value: function render() 26 | 27 | {var _props = 28 | this.props,children = _props.children,props = _objectWithoutProperties(_props, ['children']);var _layerStore = 29 | this.layerStore,_show = _layerStore.show,_hide = _layerStore.hide; 30 | var stack = this.layerStore.getStack(); 31 | return children.apply(undefined, [{ 32 | stack: stack, 33 | isActive: stack.indexOf(props.for) !== -1, 34 | show: function show() {for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}return props.for ? _show(props.for, args) : _show(args);}, 35 | hide: function hide() {return props.for ? _hide(props.for) : _hide();} }].concat(_toConsumableArray( 36 | this.layerStore.getLayer(props.for).args))); 37 | } }]);return LayerToggle;}(_react.Component);exports.default = LayerToggle; 38 | 39 | 40 | LayerToggle.contextTypes = { 41 | layerStore: _propTypes2.default.object }; 42 | //# sourceMappingURL=LayerToggle.js.map -------------------------------------------------------------------------------- /lib/components/LayerToggle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../../src/components/LayerToggle.js"],"names":["LayerToggle","props","context","unsubscribe","layerStore","subscribeToLayer","for","setTimeout","setState","children","show","hide","stack","getStack","isActive","indexOf","args","getLayer","Component","contextTypes","PropTypes","object"],"mappings":"gnBAAA,8B;AACA,uC;AACA,6C;;AAEqBA,W;;;;AAInB,uBAAYC,KAAZ,EAAmBC,OAAnB,EAA4B;AACpBD,SADoB,EACbC,OADa;AAE1B,UAAKC,WAAL,GAAmB,IAAnB;AACA,UAAKC,UAAL,GAAkBF,QAAQE,UAA1B,CAH0B;AAI3B,G;;AAEoB;AACnB,WAAKD,WAAL,GAAmB,KAAKC,UAAL,CAAgBC,gBAAhB,CAAiC,KAAKJ,KAAL,CAAWK,GAA5C,EAAiD,YAAM;AACxEC,mBAAW,oBAAM,OAAKC,QAAL,CAAc,EAAd,CAAN,EAAX,EAAoC,GAApC;AACD,OAFkB,CAAnB;AAGD,K;;AAEsB;AACrB,WAAKL,WAAL;AACA,WAAKA,WAAL,GAAmB,IAAnB;AACA,WAAKC,UAAL,GAAkB,IAAlB;AACD,K;;AAES;AACuB,WAAKH,KAD5B,CACAQ,QADA,UACAA,QADA,CACaR,KADb;AAEe,WAAKG,UAFpB,CAEAM,KAFA,eAEAA,IAFA,CAEMC,KAFN,eAEMA,IAFN;AAGR,UAAMC,QAAQ,KAAKR,UAAL,CAAgBS,QAAhB,EAAd;AACA,aAAOJ,2BAAS;AACdG,oBADc;AAEdE,kBAAUF,MAAMG,OAAN,CAAcd,MAAMK,GAApB,MAA6B,CAAC,CAF1B;AAGdI,cAAM,mDAAIM,IAAJ,gDAAIA,IAAJ,iCAAaf,MAAMK,GAAN,GAAYI,MAAKT,MAAMK,GAAX,EAAgBU,IAAhB,CAAZ,GAAoCN,MAAKM,IAAL,CAAjD,EAHQ;AAIdL,cAAM,wBAAaV,MAAMK,GAAN,GAAYK,MAAKV,MAAMK,GAAX,CAAZ,GAA8BK,OAA3C,EAJQ,EAAT;AAKD,WAAKP,UAAL,CAAgBa,QAAhB,CAAyBhB,MAAMK,GAA/B,EAAoCU,IALnC,GAAP;AAMD,K,0BAhCsCE,gB,oBAApBlB,W;;;AAmCrBA,YAAYmB,YAAZ,GAA2B;AACzBf,cAAYgB,oBAAUC,MADG,EAA3B","file":"LayerToggle.js","sourcesContent":["import React, { Component, createElement} from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport LayerStore from './../LayerStore';\r\n\r\nexport default class LayerToggle extends Component {\r\n\r\n layerStore: LayerStore;\r\n\r\n constructor(props, context) {\r\n super(props, context);\r\n this.unsubscribe = null;\r\n this.layerStore = context.layerStore;\r\n }\r\n\r\n componentWillMount() {\r\n this.unsubscribe = this.layerStore.subscribeToLayer(this.props.for, () => {\r\n setTimeout(() => this.setState({}), 100 );\r\n });\r\n }\r\n\r\n componentWillUnmount() {\r\n this.unsubscribe();\r\n this.unsubscribe = null;\r\n this.layerStore = null;\r\n }\r\n\r\n render () {\r\n const { children, ...props } = this.props;\r\n const { show, hide } = this.layerStore;\r\n const stack = this.layerStore.getStack();\r\n return children({\r\n stack,\r\n isActive: stack.indexOf(props.for) !== -1,\r\n show: (...args) => props.for ? show(props.for, args) : show(args),\r\n hide: (...args) => props.for ? hide(props.for) : hide(),\r\n }, ...this.layerStore.getLayer(props.for).args);\r\n }\r\n}\r\n\r\nLayerToggle.contextTypes = {\r\n layerStore: PropTypes.object\r\n};\r\n"]} -------------------------------------------------------------------------------- /lib/helpers.js: -------------------------------------------------------------------------------- 1 | "use strict";Object.defineProperty(exports, "__esModule", { value: true });exports.isPrimitiveType = isPrimitiveType;function isPrimitiveType(value) { 2 | return Object(value) !== value; 3 | } 4 | //# sourceMappingURL=helpers.js.map -------------------------------------------------------------------------------- /lib/helpers.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/helpers.js"],"names":["isPrimitiveType","value","Object"],"mappings":"mFAAgBA,e,GAAAA,e,CAAT,SAASA,eAAT,CAAyBC,KAAzB,EAAgC;AACrC,SAAOC,OAAOD,KAAP,MAAkBA,KAAzB;AACD","file":"helpers.js","sourcesContent":["export function isPrimitiveType(value) {\n return Object(value) !== value;\n}"]} -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict';Object.defineProperty(exports, "__esModule", { value: true });exports.LayerStackProvider = exports.LayerStackMountPoint = exports.LayerToggle = exports.Layer = undefined;var _LayerStackProvider = require('./components/LayerStackProvider');var _LayerStackProvider2 = _interopRequireDefault(_LayerStackProvider); 2 | var _LayerStackMountPoint = require('./components/LayerStackMountPoint');var _LayerStackMountPoint2 = _interopRequireDefault(_LayerStackMountPoint); 3 | var _Layer = require('./components/Layer');var _Layer2 = _interopRequireDefault(_Layer); 4 | var _LayerToggle = require('./components/LayerToggle');var _LayerToggle2 = _interopRequireDefault(_LayerToggle);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}exports. 5 | 6 | Layer = _Layer2.default;exports.LayerToggle = _LayerToggle2.default;exports.LayerStackMountPoint = _LayerStackMountPoint2.default;exports.LayerStackProvider = _LayerStackProvider2.default; 7 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /lib/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/index.js"],"names":["Layer","LayerToggle","LayerStackMountPoint","LayerStackProvider"],"mappings":"uLAAA,qE;AACA,yE;AACA,2C;AACA,uD;;AAESA,K,GAAAA,e,SAAOC,W,GAAAA,qB,SAAaC,oB,GAAAA,8B,SAAsBC,kB,GAAAA,4B","file":"index.js","sourcesContent":["import LayerStackProvider from './components/LayerStackProvider'\r\nimport LayerStackMountPoint from './components/LayerStackMountPoint'\r\nimport Layer from './components/Layer'\r\nimport LayerToggle from './components/LayerToggle'\r\n\r\nexport { Layer, LayerToggle, LayerStackMountPoint, LayerStackProvider }"]} -------------------------------------------------------------------------------- /lib/reducer.js: -------------------------------------------------------------------------------- 1 | '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 _helpers = require('./helpers');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;} 2 | 3 | var ACTIONS = exports.ACTIONS = { 4 | register: (0, _helpers.createAction)('LAYER_STACK_VIEW_REGISTER', function (id, renderFn, mountPointId) {return { id: id, renderFn: renderFn, mountPointId: mountPointId };}), 5 | unregister: (0, _helpers.createAction)('LAYER_STACK_VIEW_UNREGISTER', function (id) {return { id: id };}), 6 | toggle: (0, _helpers.createAction)('LAYER_STACK_VIEW_TOGGLE'), 7 | show: (0, _helpers.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 };}), 8 | setArgs: (0, _helpers.createAction)('LAYER_STACK_VIEW_SET_ARGS', function (id) {for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {args[_key2 - 1] = arguments[_key2];}return { id: id, args: args };}), 9 | hide: (0, _helpers.createAction)('LAYER_STACK_VIEW_HIDE'), 10 | hideAll: (0, _helpers.createAction)('LAYER_STACK_VIEW_HIDE_ALL') };exports.default = 11 | 12 | 13 | (0, _helpers.handleActions)({ 14 | 'LAYER_STACK_VIEW_REGISTER': function LAYER_STACK_VIEW_REGISTER(_ref, _ref2) {var views = _ref.views;var state = _objectWithoutProperties(_ref, ['views']);var _ref2$payload = _ref2.payload;var id = _ref2$payload.id;var renderFn = _ref2$payload.renderFn;var mountPointId = _ref2$payload.mountPointId; 15 | if (views[id]) { 16 | delete views[id].renderFn; // mutable to just help javascript GC 17 | } 18 | views = _extends({}, views, _defineProperty({}, id, { renderFn: renderFn, args: views[id] ? views[id].args : [], mountPointId: mountPointId })); 19 | return _extends({}, state, { views: views }); 20 | }, 21 | 'LAYER_STACK_VIEW_UNREGISTER': function LAYER_STACK_VIEW_UNREGISTER(_ref3, _ref4) {var views = _ref3.views;var state = _objectWithoutProperties(_ref3, ['views']);var id = _ref4.payload.id; 22 | delete views[id]; // mutable to just help javascript GC 23 | return _extends({}, state, { views: views }); 24 | }, 25 | 'LAYER_STACK_VIEW_SHOW': function LAYER_STACK_VIEW_SHOW(_ref5, _ref6) {var displaying = _ref5.displaying;var views = _ref5.views;var state = _objectWithoutProperties(_ref5, ['displaying', 'views']);var _ref6$payload = _ref6.payload;var id = _ref6$payload.id;var args = _ref6$payload.args; 26 | var newView = _extends({}, views[id]); 27 | var newDisplaying = displaying; 28 | if (0 !== args.length) { 29 | newView.args = args; 30 | } 31 | if (!~displaying.indexOf(id)) { 32 | newDisplaying = [].concat(_toConsumableArray(displaying), [id]); 33 | } 34 | return _extends({}, state, { views: _extends({}, views, _defineProperty({}, id, newView)), displaying: newDisplaying }); 35 | }, 36 | 'LAYER_STACK_VIEW_SET_ARGS': function LAYER_STACK_VIEW_SET_ARGS(_ref7, _ref8) {var views = _ref7.views;var state = _objectWithoutProperties(_ref7, ['views']);var _ref8$payload = _ref8.payload;var id = _ref8$payload.id;var args = _ref8$payload.args; 37 | var newView = _extends({}, views[id]); 38 | if (0 !== args.length) { 39 | newView.args = args; 40 | } 41 | return _extends({}, state, { views: _extends({}, views, _defineProperty({}, id, newView)) }); 42 | }, 43 | 'LAYER_STACK_VIEW_HIDE': function LAYER_STACK_VIEW_HIDE(_ref9, _ref10) {var state = _objectWithoutProperties(_ref9, []);var displaying = _ref9.displaying;var id = _ref10.payload; 44 | if (typeof id !== 'string') { 45 | return _extends({}, state, { displaying: [] }); 46 | } 47 | var newDisplaying = [].concat(_toConsumableArray(displaying)); 48 | var index = newDisplaying.indexOf(id); 49 | if (index !== -1) { 50 | newDisplaying.splice(index, 1); 51 | return _extends({}, state, { displaying: newDisplaying }); 52 | } 53 | return state; 54 | }, 55 | 'LAYER_STACK_VIEW_HIDE_ALL': function LAYER_STACK_VIEW_HIDE_ALL(_ref11) {var state = _objectWithoutProperties(_ref11, []); 56 | return _extends({}, state, { displaying: [] }); 57 | } }, 58 | { 59 | displaying: [], 60 | views: {} }); 61 | //# sourceMappingURL=reducer.js.map -------------------------------------------------------------------------------- /lib/reducer.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/reducer.js"],"names":["ACTIONS","register","id","renderFn","mountPointId","unregister","toggle","show","args","setArgs","hide","hideAll","views","state","payload","displaying","newView","newDisplaying","length","indexOf","index","splice"],"mappings":"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","file":"reducer.js","sourcesContent":["import { createAction, handleActions } from './helpers'\n\nexport const ACTIONS = {\n register: createAction('LAYER_STACK_VIEW_REGISTER', (id, renderFn, mountPointId) => ({ id, renderFn, mountPointId })),\n unregister: createAction('LAYER_STACK_VIEW_UNREGISTER', (id) => ({ id })),\n toggle: createAction('LAYER_STACK_VIEW_TOGGLE'),\n show: createAction('LAYER_STACK_VIEW_SHOW', (id, ...args) => ({ id, args: args })),\n setArgs: createAction('LAYER_STACK_VIEW_SET_ARGS', (id, ...args) => ({ id, args: args })),\n hide: createAction('LAYER_STACK_VIEW_HIDE'),\n hideAll: createAction('LAYER_STACK_VIEW_HIDE_ALL'),\n};\n\nexport default handleActions({\n 'LAYER_STACK_VIEW_REGISTER': ({views, ...state}, { payload: { id, renderFn, mountPointId } }) => {\n if (views[id]) {\n delete views[id].renderFn; // mutable to just help javascript GC\n }\n views = {...views, [id]: { renderFn, args: views[id] ? views[id].args : [], mountPointId } };\n return {...state, views};\n },\n 'LAYER_STACK_VIEW_UNREGISTER': ({views, ...state}, { payload: { id } }) => {\n delete views[id]; // mutable to just help javascript GC\n return {...state, views: views};\n },\n 'LAYER_STACK_VIEW_SHOW': ({displaying, views, ...state}, { payload: { id, args }}) => {\n const newView = { ...views[id] };\n let newDisplaying = displaying;\n if (0 !== args.length) {\n newView.args = args;\n }\n if (!~displaying.indexOf(id)) {\n newDisplaying = [...displaying, id]\n }\n return {...state, views: { ...views, ...{ [id]: newView } } , displaying: newDisplaying };\n },\n 'LAYER_STACK_VIEW_SET_ARGS': ({views, ...state}, { payload: { id, args }}) => {\n const newView = { ...views[id] };\n if (0 !== args.length) {\n newView.args = args;\n }\n return {...state, views: { ...views, ...{ [id]: newView } } };\n },\n 'LAYER_STACK_VIEW_HIDE': ({...state, displaying}, { payload: id }) => {\n if (typeof id !== 'string') {\n return {...state, displaying: [] };\n }\n const newDisplaying = [...displaying];\n const index = newDisplaying.indexOf(id);\n if (index !== -1) {\n newDisplaying.splice(index, 1);\n return {...state, displaying: newDisplaying };\n }\n return state;\n },\n 'LAYER_STACK_VIEW_HIDE_ALL': ({...state}) => {\n return {...state, displaying: [] };\n },\n}, {\n displaying: [],\n views: {},\n});"]} -------------------------------------------------------------------------------- /lib/types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //# sourceMappingURL=types.js.map -------------------------------------------------------------------------------- /lib/types.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"types.js","sourcesContent":[]} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-layer-stack", 3 | "version": "4.2.12", 4 | "description": "Simple but ubiquitously powerful and agnostic layering system for React. Useful for any kind of windowing/popover/modals/tooltip application", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/fckt/react-layer-stack" 8 | }, 9 | "main": "lib/index.js", 10 | "scripts": { 11 | "build": "babel src --out-dir lib --source-maps" 12 | }, 13 | "author": "Alexey Frolov ", 14 | "license": "MIT", 15 | "peerDependencies": { 16 | "react": ">=15.5.0", 17 | "prop-types": "15.6.0" 18 | }, 19 | "devDependencies": { 20 | "babel-cli": "^6.16.0", 21 | "babel-plugin-syntax-flow": "^6.18.0", 22 | "babel-plugin-transform-flow-strip-types": "^6.22.0", 23 | "babel-plugin-transform-object-rest-spread": "^6.16.0", 24 | "babel-preset-es2015": "^6.16.0", 25 | "babel-preset-react": "^6.16.0" 26 | }, 27 | "keywords": [ 28 | "react", 29 | "react-component", 30 | "layer", 31 | "layers", 32 | "tooltip", 33 | "popover", 34 | "window", 35 | "windowing", 36 | "dropdown", 37 | "overlay", 38 | "popup", 39 | "flyout", 40 | "zindex", 41 | "modal", 42 | "lightbox", 43 | "portal", 44 | "transportation", 45 | "bottom-up" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /src/LayerStore.js: -------------------------------------------------------------------------------- 1 | import type { ID, LayerFn } from './types' 2 | 3 | import LayerStoreCore from './LayerStoreCore' 4 | 5 | export default class LayerStore { 6 | 7 | constructor () { 8 | this._core = new LayerStoreCore; 9 | this._layerSubscriptions = {}; 10 | this._mountPointsubscriptions = {}; 11 | 12 | this.show = this.show.bind(this); 13 | this.hide = this.hide.bind(this); 14 | this.update = this.update.bind(this); 15 | this.register = this.register.bind(this); 16 | this.updateFn = this.updateFn.bind(this); 17 | this.unregister = this.unregister.bind(this); 18 | this.getLayer = this._core.getLayer; 19 | this.getStack = this._core.getStack; 20 | this.getIndex = this._core.getIndex; 21 | this.isActive = this._core.isActive; 22 | this.getLayersForMountPoint = this._core.getLayersForMountPoint; 23 | } 24 | 25 | subscribeToLayer(id: ID, fn: Function) { 26 | if (typeof this._layerSubscriptions[id] === 'undefined') { 27 | this._layerSubscriptions[id] = new Set(); 28 | } 29 | this._layerSubscriptions[id].add(fn); 30 | return () => { 31 | return this._layerSubscriptions[id].delete(fn); 32 | } 33 | } 34 | 35 | subscribeToMountPoint(id: ID, fn: Function) { 36 | if (typeof this._mountPointsubscriptions[id] === 'undefined') { 37 | this._mountPointsubscriptions[id] = new Set(); 38 | } 39 | this._mountPointsubscriptions[id].add(fn); 40 | return () => { 41 | return this._mountPointsubscriptions[id].delete(fn); 42 | } 43 | } 44 | 45 | notifyLayer(id: ID) { 46 | if (this._layerSubscriptions[id]) { 47 | this._layerSubscriptions[id].forEach(fn => fn()) 48 | } 49 | } 50 | 51 | notifyMountPoint(id: ID) { 52 | if (this._mountPointsubscriptions[id]) { 53 | this._mountPointsubscriptions[id].forEach(fn => fn()); 54 | } 55 | } 56 | 57 | register (id: ID, layerFn: LayerFn, mountPointId: ID = null, 58 | groups: Array = [], use: Array, defaultArgs: Array = [], 59 | defaultShow: Boolean) { 60 | this._core.register(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); 61 | if (mountPointId) { 62 | this.notifyMountPoint(mountPointId); 63 | } else { 64 | this.notifyLayer(id); 65 | } 66 | } 67 | 68 | updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null, 69 | groups: Array = [], use: Array, defaultArgs: Array = [], 70 | defaultShow: Boolean) { 71 | const lastMountPoint = this.getLayer(id).mountPointId; 72 | this._core.updateFn(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); 73 | if (lastMountPoint !== mountPointId) { 74 | this.notifyMountPoint(lastMountPoint); 75 | this.notifyMountPoint(mountPointId); 76 | } else { 77 | this.notifyLayer(id); 78 | } 79 | } 80 | 81 | reset(id: ID) { 82 | this._core.reset(id); 83 | this.notifyLayer(id) 84 | } 85 | 86 | unregister(id: ID) { 87 | this._core.unregister(id); 88 | } 89 | 90 | show (id: ID, args: Array) { 91 | this._core.show(id, args); 92 | this.notifyLayer(id); 93 | } 94 | 95 | update(id: ID, args: Array) { 96 | this._core.update(id, args); 97 | this.notifyLayer(id); 98 | } 99 | 100 | hide (id: ID) { 101 | const stack = this.getStack(); 102 | this._core.hide(id); 103 | this.notifyLayer(id); 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /src/LayerStoreCore.js: -------------------------------------------------------------------------------- 1 | import type { ID, LayerFn, Layer, Store, LayerStack, ILayerStore } from './types' 2 | 3 | export default class LayerStoreCore { 4 | 5 | store: Store; 6 | 7 | constructor () { 8 | this.store = { 9 | stack: [], 10 | layers: {}, 11 | }; 12 | 13 | this.getLayer = this.getLayer.bind(this); 14 | this.getStack = this.getStack.bind(this); 15 | this.show = this.show.bind(this); 16 | this.hide = this.hide.bind(this); 17 | this.update = this.update.bind(this); 18 | this.register = this.register.bind(this); 19 | this.updateFn = this.updateFn.bind(this); 20 | this.unregister = this.unregister.bind(this); 21 | this.isActive = this.isActive.bind(this); 22 | this.getIndex = this.getIndex.bind(this); 23 | this.getLayersForMountPoint = this.getLayersForMountPoint.bind(this); 24 | } 25 | 26 | getLayer(id: ID): Layer { 27 | return this.store.layers[id]; 28 | } 29 | 30 | getLayersForMountPoint(mountPointId: ID) { 31 | const { layers } = this.store; 32 | return Object.keys(layers).filter(id => layers[id].mountPointId === mountPointId) 33 | } 34 | 35 | getStack(): LayerStack { 36 | return this.store.stack; 37 | } 38 | 39 | register (id: ID, layerFn: LayerFn, mountPointId: ID = null, 40 | groups: Array = [], use: Array, defaultArgs: Array = [], 41 | defaultShow: Boolean) { 42 | this.store.layers[id] = { layerFn, groups, mountPointId, defaultArgs, defaultShow, use }; 43 | this.reset(id); 44 | } 45 | 46 | updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null, 47 | groups: Array = [], use: Array, defaultArgs: Array = [], 48 | defaultShow: Boolean) { 49 | const layer = this.getLayer(id); 50 | layer.fn = layerFn; 51 | layer.use = use; 52 | layer.mountPointId = mountPointId; 53 | layer.groups = groups; 54 | layer.defaultArgs = defaultArgs; 55 | layer.defaultShow = defaultShow; 56 | } 57 | 58 | reset(id: ID) { 59 | const layer = this.store.layers[id]; 60 | layer.args = layer.defaultArgs; 61 | if (layer.defaultShow) { 62 | this.show(id); 63 | } 64 | } 65 | 66 | unregister(id: ID) { 67 | delete this.store.layers[id]; 68 | } 69 | 70 | update(id: ID, args: Array = []) { 71 | if (args.length) { 72 | this.store.layers[id].args = args; 73 | } else { 74 | this.store.layers[id].args = this.store.layers[id].defaultArgs; 75 | } 76 | } 77 | 78 | show (id: ID, args: Array) { 79 | const { stack } = this.store; 80 | this.update(id, args); 81 | if ( id !== stack[stack.length - 1] ) { 82 | this.hide(id); 83 | this.store.stack = [...stack, id]; 84 | } 85 | } 86 | 87 | hide (id: ID) { 88 | const stack = [...this.store.stack]; 89 | if (-1 !== stack.indexOf(id)) { 90 | stack.splice(stack.indexOf(id), 1); 91 | this.store.stack = stack; 92 | } 93 | } 94 | 95 | getIndex(id: ID) { 96 | return this.store.stack.indexOf(id); 97 | } 98 | 99 | isActive(id: ID) { 100 | return this.store.stack.indexOf(id) !== -1; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/common.js: -------------------------------------------------------------------------------- 1 | export function isPrimitiveType(value) { 2 | return Object(value) !== value; 3 | } -------------------------------------------------------------------------------- /src/components/Layer.js: -------------------------------------------------------------------------------- 1 | import React, { Component, createElement} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { isPrimitiveType } from './../common'; 4 | import LayerStore from './../LayerStore'; 5 | import LayerMountPoint from './LayerMountPoint'; 6 | 7 | export default class Layer extends Component { 8 | 9 | layerStore: LayerStore; 10 | 11 | constructor(props, context) { 12 | super(props, context); 13 | this.layerStore = context.layerStore; 14 | } 15 | 16 | componentWillMount() { 17 | const { layerStore } = this.context; 18 | const { id, children, to, use, defaultArgs, defaultShow } = this.props; 19 | layerStore.register(id, children, to, null, use, defaultArgs, defaultShow); 20 | } 21 | 22 | shouldComponentUpdate(newProps) { 23 | const { children, id, to, use } = this.props; 24 | const { layerStore } = this.context; 25 | let needUpdate = false; 26 | if (id !== newProps.id || to !== newProps.to) { 27 | needUpdate = true; 28 | } 29 | else if (children.toString() !== newProps.children.toString()) { 30 | needUpdate = true; 31 | } 32 | else if (use) { 33 | if (use.length !== newProps.use.length) { 34 | needUpdate = true; 35 | } else { 36 | let i = use.length; 37 | while (i--) { 38 | if (isPrimitiveType(use[i]) && isPrimitiveType(newProps.use[i])) { 39 | if (use[i] !== newProps.use[i]) { 40 | needUpdate = true 41 | } 42 | } 43 | else if (typeof use[i].equals === 'function' && typeof newProps.use[i].equals === 'function') { 44 | if (!use[i].equals(newProps.use[i])) { // fast equality check for immutable-js && mori 45 | needUpdate = true; 46 | } 47 | } 48 | else if (JSON.stringify(use[i]) !== JSON.stringify(newProps.use[i])) { 49 | needUpdate = true; 50 | } 51 | } 52 | } 53 | } 54 | 55 | if (needUpdate) { 56 | layerStore.updateFn(newProps.id, newProps.children, newProps.to, null, newProps.use, newProps.defaultArgs, newProps.defaultShow); 57 | return true; 58 | } 59 | return false; 60 | } 61 | 62 | componentWillUnmount() { 63 | this.layerStore = null; 64 | } 65 | 66 | render() { 67 | const { id, to, elementType } = this.props; 68 | if (!to) { 69 | return createElement(LayerMountPoint, { id }); 70 | } 71 | return null; 72 | } 73 | } 74 | 75 | Layer.propTypes = { 76 | use: PropTypes.array 77 | }; 78 | 79 | Layer.defaultProps = { 80 | elementType: 'span' 81 | }; 82 | 83 | Layer.contextTypes = { 84 | layerStore: PropTypes.object 85 | }; 86 | -------------------------------------------------------------------------------- /src/components/LayerMountPoint.js: -------------------------------------------------------------------------------- 1 | import React, { Component, createElement } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import LayerStore from './../LayerStore'; 4 | import type { MountPointProps } from './../types'; 5 | 6 | export default class LayerMountPoint extends Component { 7 | 8 | props: MountPointProps; 9 | layerStore: LayerStore; 10 | 11 | constructor(props, context) { 12 | super(props, context); 13 | this.unsubscribe = null; 14 | this.layerStore = context.layerStore; 15 | } 16 | 17 | shouldComponentUpdate(props, state) { 18 | return true; 19 | } 20 | 21 | componentWillMount() { 22 | this.unsubscribe = this.layerStore.subscribeToLayer(this.props.id, () => { 23 | this.setState({}) 24 | }); 25 | } 26 | 27 | componentWillUnmount() { 28 | this.unsubscribe(); 29 | this.unsubscribe = null; 30 | this.layerStore = null; 31 | } 32 | 33 | render() { 34 | const { id } = this.props; 35 | const { show, hide, update, isActive } = this.layerStore; 36 | const stack = this.layerStore.getStack(); 37 | const layer = this.layerStore.getLayer(id); 38 | const index = this.layerStore.getIndex(id); 39 | return isActive(id) ? layer.layerFn({ 40 | index, id, stack, // seems like there is no valid use-case mountPointId in the Layer render function 41 | hide: () => hide(id), // intention here is to hide ID's management from Layer and let app developer manage these IDs independently 42 | // which will give an ability to write general-purpose Layers and share them b/w projects 43 | show: (...args) => show(id, args), // sometimes you may want to change args of the current layer 44 | update: (...args) => update(id, args) 45 | }, ...layer.args) : null; 46 | } 47 | } 48 | 49 | LayerMountPoint.contextTypes = { 50 | layerStore: PropTypes.object 51 | }; 52 | 53 | LayerMountPoint.defaultProps = { 54 | index: 0 55 | }; 56 | -------------------------------------------------------------------------------- /src/components/LayerStackMountPoint.js: -------------------------------------------------------------------------------- 1 | import React, { Component, createElement} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import LayerMountPoint from './LayerMountPoint'; 4 | import LayerStore from './../LayerStore' 5 | 6 | export default class LayerStackMountPoint extends Component { 7 | 8 | layerStore: LayerStore; 9 | 10 | constructor(props, context) { 11 | super(props, context); 12 | this.unsubscribe = context.layerStore.subscribeToMountPoint(props.id, () => { 13 | this.setState({}) 14 | }); 15 | this.layerStore = context.layerStore; 16 | } 17 | 18 | componentWillUnmount() { 19 | this.unsubscribe(); 20 | this.unsubscribe = null; 21 | this.layerStore = null; 22 | } 23 | 24 | render() { 25 | const { id: mountPointId, elementType, layerStackWrapperClass, layerWrapperClass } = this.props; 26 | return createElement(elementType, { className: layerStackWrapperClass }, this.layerStore.getLayersForMountPoint(mountPointId) 27 | .map((id) => createElement(elementType, { key: id, className: layerWrapperClass }, 28 | createElement(LayerMountPoint, { id })))) 29 | } 30 | } 31 | 32 | LayerStackMountPoint.contextTypes = { 33 | layerStore: PropTypes.object 34 | }; 35 | 36 | LayerStackMountPoint.defaultProps = { 37 | elementType: 'span', 38 | layerStackWrapperClass: '', 39 | layerWrapperClass: '' 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/LayerStackProvider.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Children } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import LayerStore from './../LayerStore' 4 | 5 | export default class LayerStackProvider extends Component { 6 | getChildContext() { 7 | return { 8 | layerStore: new LayerStore() 9 | } 10 | } 11 | 12 | render() { 13 | return Children.only(this.props.children) 14 | } 15 | } 16 | 17 | LayerStackProvider.childContextTypes = { 18 | layerStore: PropTypes.object 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/LayerToggle.js: -------------------------------------------------------------------------------- 1 | import React, { Component, createElement} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import LayerStore from './../LayerStore'; 4 | 5 | export default class LayerToggle extends Component { 6 | 7 | layerStore: LayerStore; 8 | 9 | constructor(props, context) { 10 | super(props, context); 11 | this.unsubscribe = null; 12 | this.layerStore = context.layerStore; 13 | } 14 | 15 | componentWillMount() { 16 | this.unsubscribe = this.layerStore.subscribeToLayer(this.props.for, () => { 17 | setTimeout(() => this.setState({}), 100 ); 18 | }); 19 | } 20 | 21 | componentWillUnmount() { 22 | this.unsubscribe(); 23 | this.unsubscribe = null; 24 | this.layerStore = null; 25 | } 26 | 27 | render () { 28 | const { children, ...props } = this.props; 29 | const { show, hide } = this.layerStore; 30 | const stack = this.layerStore.getStack(); 31 | return children({ 32 | stack, 33 | isActive: stack.indexOf(props.for) !== -1, 34 | show: (...args) => props.for ? show(props.for, args) : show(args), 35 | hide: (...args) => props.for ? hide(props.for) : hide(), 36 | }, ...this.layerStore.getLayer(props.for).args); 37 | } 38 | } 39 | 40 | LayerToggle.contextTypes = { 41 | layerStore: PropTypes.object 42 | }; 43 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import LayerStackProvider from './components/LayerStackProvider' 2 | import LayerStackMountPoint from './components/LayerStackMountPoint' 3 | import Layer from './components/Layer' 4 | import LayerToggle from './components/LayerToggle' 5 | 6 | export { Layer, LayerToggle, LayerStackMountPoint, LayerStackProvider } -------------------------------------------------------------------------------- /src/types.js: -------------------------------------------------------------------------------- 1 | export type ID = number | string; 2 | 3 | type LayerHandle = { 4 | show: () => undefined, 5 | hide: () => undefined, 6 | index: number, 7 | stack: Array, 8 | isActive: boolean 9 | }; 10 | 11 | export type LayerFn = (fn: LayerHandle) => ReactElement; 12 | 13 | export type Layer = { 14 | id: ID, 15 | mountPointId: ID, 16 | layerFn: LayerFn, 17 | args: Array, 18 | use: Array, 19 | defaultArgs: Array, 20 | defaultShow: Boolean, 21 | }; 22 | 23 | export type LayerStack = Array; 24 | 25 | export type Store = { 26 | stack: LayerStack, 27 | layers: { [key: ID] : Layer }; 28 | } 29 | 30 | export type MountPointProps = { 31 | id: ID, 32 | index: number, 33 | } 34 | --------------------------------------------------------------------------------