diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 0000000..73e60e8 --- /dev/null +++ b/.flowconfig @@ -0,0 +1,14 @@ +[ignore] +/lib/.* +.*/node_modules/esformatter/.* +.*/node_modules/fbjs/.*.flow +.*/node_modules/.store/fbjs@.*/.*.flow +.*/node_modules/.store/gh-pages@.*/.* +.*/node_modules/.store/browserify-zlib@.*/_/package.json +.*/test/.* + +[include] + +[libs] + +[options] diff --git a/demo/package.json b/demo/package.json index 8255160..2d2014f 100644 --- a/demo/package.json +++ b/demo/package.json @@ -1,6 +1,6 @@ { "name": "demo", - "version": "2.1.1", + "version": "5.0.0", "private": true, "devDependencies": { "react-scripts": "0.6.1" diff --git a/demo/src/Demo.js b/demo/src/Demo.js index 7c52fc2..0f469a6 100644 --- a/demo/src/Demo.js +++ b/demo/src/Demo.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import CircularJSON from 'circular-json'; -import Highlight from 'react-highlight'; import Markdown from 'react-remarkable'; import { Layer, LayerToggle } from 'react-layer-stack'; @@ -47,9 +46,6 @@ class Demo extends Component { { this.renderLightbox() } - #### DEMO top component data - { JSON.stringify(this.state, null, '\t') } - {/*#### LAYER STATE TOGGLE*/} {/*{({ show, hide, isActive }) => (*/} {/* )}*/} @@ -105,8 +101,8 @@ class Demo extends Component { renderLightbox() { return ( - { (_, content) => - + { ({ index }, content) => + { content } } @@ -135,19 +131,20 @@ class Demo extends Component { renderMovableWindow() { return ( - {({index, hide, update}, { + {({index, hide, update, reset}, { ...rest, + windowLeft, windowTop, pinned = false, mouseDown = false, mouseLastPositionX = 0, - mouseLastPositionY = 0, - windowLeft = 670, - windowTop = 100} = {}) => ( + mouseLastPositionY = 0 } = {}) => ( update({...rest, mouseDown: true})} onMouseUp={() => update({...rest, mouseDown: false})} - onMouseMove={({ screenX, screenY}) => { + onMouseMove={(e) => { + e.preventDefault(); + const { screenX, screenY } = e; const newArgs = { mouseLastPositionX: screenX, mouseLastPositionY: screenY }; @@ -155,13 +152,13 @@ class Demo extends Component { newArgs.windowLeft = windowLeft + (screenX - mouseLastPositionX); newArgs.windowTop = windowTop + (screenY - mouseLastPositionY); } - update({...rest, ...newArgs}) + update({...rest, ...newArgs}); }} onClick={ hide } zIndex={ index * 100 }>
mouseDown || update({...rest, pinned: true})} onMouseLeave={() => mouseDown || update({...rest, pinned: false})}> PIN TO MOVE @@ -177,27 +174,29 @@ class Demo extends Component {
- ##### Layer inside Layer (inside Layer inside Layer inside Layer inside Layer inside Layer inside Layer ... inside Layer) - {({ show, hide }) => ( - )} + )} ##### Arguments: - + 
                     { JSON.stringify(rest, null, '\t') }
-                  
+
##### Data from outer component (closure/context): - + 
                     { JSON.stringify(this.state, null, '\t') }
-                  
+
@@ -216,9 +215,7 @@ class Demo extends Component { background: 'rgba(0,0,0,0.8)', color: '#fff'}}> #### Layers displaying: - { CircularJSON.stringify(stack, null, ' ') } - } diff --git a/lib/LayerStore.js b/lib/LayerStore.js index 3b357bf..c8daa66 100644 --- a/lib/LayerStore.js +++ b/lib/LayerStore.js @@ -13,6 +13,7 @@ LayerStore = function () { this.hide = this.hide.bind(this); this.update = this.update.bind(this); this.register = this.register.bind(this); + this.reset = this.reset.bind(this); this.updateFn = this.updateFn.bind(this); this.unregister = this.unregister.bind(this); this.getLayer = this._core.getLayer; @@ -40,6 +41,14 @@ LayerStore = function () { return function () { return _this2._mountPointsubscriptions[id].delete(fn); }; + } }, { key: 'notifyStack', value: function notifyStack( + + fromIndex) { + var stack = this._core.getStack();var + length = stack.length; + for (var i = fromIndex; i < length; ++i) { + this.notifyLayer(stack[i]); + } } }, { key: 'notifyLayer', value: function notifyLayer( id) { @@ -54,10 +63,12 @@ LayerStore = function () { } } }, { key: 'register', value: function register( - id, layerFn) + id, + layerFn) + - {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]; - this._core.register(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); + {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var defaultArgs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var defaultShow = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false; + this._core.register(id, layerFn, mountPointId, defaultArgs, defaultShow); if (mountPointId) { this.notifyMountPoint(mountPointId); } else { @@ -65,11 +76,13 @@ LayerStore = function () { } } }, { key: 'updateFn', value: function updateFn( - id, layerFn) + id, + layerFn) - {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]; + + {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var defaultArgs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var defaultShow = arguments[4]; var lastMountPoint = this.getLayer(id).mountPointId; - this._core.updateFn(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); + this._core.updateFn(id, layerFn, mountPointId, defaultArgs, defaultShow); if (lastMountPoint !== mountPointId) { this.notifyMountPoint(lastMountPoint); this.notifyMountPoint(mountPointId); @@ -88,8 +101,9 @@ LayerStore = function () { } }, { key: 'show', value: function show( id, args) { + var index = this.getIndex(id); this._core.show(id, args); - this.notifyLayer(id); + this.notifyStack(index); } }, { key: 'update', value: function update( id, args) { @@ -98,8 +112,9 @@ LayerStore = function () { } }, { key: 'hide', value: function hide( id) { - var stack = this.getStack(); + var index = this.getIndex(id); this._core.hide(id); this.notifyLayer(id); + this.notifyStack(index); } }]);return LayerStore;}();exports.default = LayerStore; //# sourceMappingURL=LayerStore.js.map \ No newline at end of file diff --git a/lib/LayerStore.js.map b/lib/LayerStore.js.map index be7af3f..90bba10 100644 --- a/lib/LayerStore.js.map +++ b/lib/LayerStore.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/LayerStore.js"],"names":["LayerStore","_core","_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,8BAAb;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,KAAKV,KAAL,CAAWU,QAA3B;AACA,SAAKC,QAAL,GAAgB,KAAKX,KAAL,CAAWW,QAA3B;AACA,SAAKC,QAAL,GAAgB,KAAKZ,KAAL,CAAWY,QAA3B;AACA,SAAKC,QAAL,GAAgB,KAAKb,KAAL,CAAWa,QAA3B;AACA,SAAKC,sBAAL,GAA8B,KAAKd,KAAL,CAAWc,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,WAAK1B,KAAL,CAAWO,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,WAAKtB,KAAL,CAAWQ,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,WAAKf,KAAL,CAAW8B,KAAX,CAAiBf,EAAjB;AACA,WAAKa,WAAL,CAAiBb,EAAjB;AACD,K;;AAEUA,M,EAAQ;AACjB,WAAKf,KAAL,CAAWS,UAAX,CAAsBM,EAAtB;AACD,K;;AAEKA,M,EAAQgB,I,EAAa;AACzB,WAAK/B,KAAL,CAAWG,IAAX,CAAgBY,EAAhB,EAAoBgB,IAApB;AACA,WAAKH,WAAL,CAAiBb,EAAjB;AACD,K;;AAEMA,M,EAAQgB,I,EAAa;AAC1B,WAAK/B,KAAL,CAAWM,MAAX,CAAkBS,EAAlB,EAAsBgB,IAAtB;AACA,WAAKH,WAAL,CAAiBb,EAAjB;AACD,K;;AAEKA,M,EAAQ;AACZ,UAAMiB,QAAQ,KAAKrB,QAAL,EAAd;AACA,WAAKX,KAAL,CAAWK,IAAX,CAAgBU,EAAhB;AACA,WAAKa,WAAL,CAAiBb,EAAjB;AACD,K,6CAnGkBhB,U","file":"LayerStore.js","sourcesContent":["import type { ID, LayerFn } from './types'\n\nimport LayerStoreCore from './LayerStoreCore'\n\nexport default class LayerStore {\n\n constructor () {\n this._core = new LayerStoreCore;\n this._layerSubscriptions = {};\n this._mountPointsubscriptions = {};\n\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n this.update = this.update.bind(this);\n this.register = this.register.bind(this);\n this.updateFn = this.updateFn.bind(this);\n this.unregister = this.unregister.bind(this);\n this.getLayer = this._core.getLayer;\n this.getStack = this._core.getStack;\n this.getIndex = this._core.getIndex;\n this.isActive = this._core.isActive;\n this.getLayersForMountPoint = this._core.getLayersForMountPoint;\n }\n\n subscribeToLayer(id: ID, fn: Function) {\n if (typeof this._layerSubscriptions[id] === 'undefined') {\n this._layerSubscriptions[id] = new Set();\n }\n this._layerSubscriptions[id].add(fn);\n return () => {\n return this._layerSubscriptions[id].delete(fn);\n }\n }\n\n subscribeToMountPoint(id: ID, fn: Function) {\n if (typeof this._mountPointsubscriptions[id] === 'undefined') {\n this._mountPointsubscriptions[id] = new Set();\n }\n this._mountPointsubscriptions[id].add(fn);\n return () => {\n return this._mountPointsubscriptions[id].delete(fn);\n }\n }\n\n notifyLayer(id: ID) {\n if (this._layerSubscriptions[id]) {\n this._layerSubscriptions[id].forEach(fn => fn())\n }\n }\n\n notifyMountPoint(id: ID) {\n if (this._mountPointsubscriptions[id]) {\n this._mountPointsubscriptions[id].forEach(fn => fn());\n }\n }\n\n register (id: ID, layerFn: LayerFn, mountPointId: ID = null,\n groups: Array = [], use: Array, defaultArgs: Array = [],\n defaultShow: Boolean) {\n this._core.register(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow);\n if (mountPointId) {\n this.notifyMountPoint(mountPointId);\n } else {\n this.notifyLayer(id);\n }\n }\n\n updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null,\n groups: Array = [], use: Array, defaultArgs: Array = [],\n defaultShow: Boolean) {\n const lastMountPoint = this.getLayer(id).mountPointId;\n this._core.updateFn(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow);\n if (lastMountPoint !== mountPointId) {\n this.notifyMountPoint(lastMountPoint);\n this.notifyMountPoint(mountPointId);\n } else {\n this.notifyLayer(id);\n }\n }\n\n reset(id: ID) {\n this._core.reset(id);\n this.notifyLayer(id)\n }\n\n unregister(id: ID) {\n this._core.unregister(id);\n }\n\n show (id: ID, args: Array) {\n this._core.show(id, args);\n this.notifyLayer(id);\n }\n\n update(id: ID, args: Array) {\n this._core.update(id, args);\n this.notifyLayer(id);\n }\n\n hide (id: ID) {\n const stack = this.getStack();\n this._core.hide(id);\n this.notifyLayer(id);\n }\n}"]} \ No newline at end of file +{"version":3,"sources":["../src/LayerStore.js"],"names":["LayerStore","_core","_layerSubscriptions","_mountPointsubscriptions","show","bind","hide","update","register","reset","updateFn","unregister","getLayer","getStack","getIndex","isActive","getLayersForMountPoint","id","fn","Set","add","delete","fromIndex","stack","length","i","notifyLayer","forEach","layerFn","mountPointId","defaultArgs","defaultShow","notifyMountPoint","lastMountPoint","args","index","notifyStack"],"mappings":"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","file":"LayerStore.js","sourcesContent":["import type { ID, LayerFn } from './types'\n\nimport LayerStoreCore from './LayerStoreCore'\n\nexport default class LayerStore {\n\n constructor () {\n this._core = new LayerStoreCore;\n this._layerSubscriptions = {};\n this._mountPointsubscriptions = {};\n\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n this.update = this.update.bind(this);\n this.register = this.register.bind(this);\n this.reset = this.reset.bind(this);\n this.updateFn = this.updateFn.bind(this);\n this.unregister = this.unregister.bind(this);\n this.getLayer = this._core.getLayer;\n this.getStack = this._core.getStack;\n this.getIndex = this._core.getIndex;\n this.isActive = this._core.isActive;\n this.getLayersForMountPoint = this._core.getLayersForMountPoint;\n }\n\n subscribeToLayer(id: ID, fn: Function) {\n if (typeof this._layerSubscriptions[id] === 'undefined') {\n this._layerSubscriptions[id] = new Set();\n }\n this._layerSubscriptions[id].add(fn);\n return () => {\n return this._layerSubscriptions[id].delete(fn);\n }\n }\n\n subscribeToMountPoint(id: ID, fn: Function) {\n if (typeof this._mountPointsubscriptions[id] === 'undefined') {\n this._mountPointsubscriptions[id] = new Set();\n }\n this._mountPointsubscriptions[id].add(fn);\n return () => {\n return this._mountPointsubscriptions[id].delete(fn);\n }\n }\n\n notifyStack(fromIndex) {\n const stack = this._core.getStack();\n const { length } = stack;\n for (let i = fromIndex; i < length; ++i) {\n this.notifyLayer(stack[i]);\n }\n }\n\n notifyLayer(id: ID) {\n if (this._layerSubscriptions[id]) {\n this._layerSubscriptions[id].forEach(fn => fn())\n }\n }\n\n notifyMountPoint(id: ID) {\n if (this._mountPointsubscriptions[id]) {\n this._mountPointsubscriptions[id].forEach(fn => fn());\n }\n }\n\n register (id: ID,\n layerFn: LayerFn,\n mountPointId = null,\n defaultArgs = [],\n defaultShow = false) {\n this._core.register(id, layerFn, mountPointId, defaultArgs, defaultShow);\n if (mountPointId) {\n this.notifyMountPoint(mountPointId);\n } else {\n this.notifyLayer(id);\n }\n }\n\n updateFn (id: ID,\n layerFn: LayerFn,\n mountPointId: ID = null,\n defaultArgs: Array = [],\n defaultShow: Boolean) {\n const lastMountPoint = this.getLayer(id).mountPointId;\n this._core.updateFn(id, layerFn, mountPointId, defaultArgs, defaultShow);\n if (lastMountPoint !== mountPointId) {\n this.notifyMountPoint(lastMountPoint);\n this.notifyMountPoint(mountPointId);\n } else {\n this.notifyLayer(id);\n }\n }\n\n reset(id: ID) {\n this._core.reset(id);\n this.notifyLayer(id)\n }\n\n unregister(id: ID) {\n this._core.unregister(id);\n }\n\n show (id: ID, args: Array) {\n const index = this.getIndex(id);\n this._core.show(id, args);\n this.notifyStack(index);\n }\n\n update(id: ID, args: Array) {\n this._core.update(id, args);\n this.notifyLayer(id);\n }\n\n hide (id: ID) {\n const index = this.getIndex(id);\n this._core.hide(id);\n this.notifyLayer(id);\n this.notifyStack(index);\n }\n}"]} \ No newline at end of file diff --git a/lib/LayerStoreCore.js b/lib/LayerStoreCore.js index 5bd3df4..5ae698b 100644 --- a/lib/LayerStoreCore.js +++ b/lib/LayerStoreCore.js @@ -36,21 +36,23 @@ LayerStoreCore = function () { return this.store.stack; } }, { key: 'register', value: function register( - id, layerFn) + id, + layerFn) - {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]; - this.store.layers[id] = { layerFn: layerFn, groups: groups, mountPointId: mountPointId, defaultArgs: defaultArgs, defaultShow: defaultShow, use: use }; + + {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var defaultArgs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var defaultShow = arguments[4]; + this.store.layers[id] = { layerFn: layerFn, mountPointId: mountPointId, defaultArgs: defaultArgs, defaultShow: defaultShow }; this.reset(id); } }, { key: 'updateFn', value: function updateFn( - id, layerFn) + id, + layerFn) + - {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]; + {var mountPointId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;var defaultArgs = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];var defaultShow = arguments[4]; var layer = this.getLayer(id); layer.fn = layerFn; - layer.use = use; layer.mountPointId = mountPointId; - layer.groups = groups; layer.defaultArgs = defaultArgs; layer.defaultShow = defaultShow; } }, { key: 'reset', value: function reset( @@ -68,16 +70,14 @@ LayerStoreCore = function () { } }, { key: 'update', value: function update( id) {var args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; - if (args.length) { - this.store.layers[id].args = args; - } else { - this.store.layers[id].args = this.store.layers[id].defaultArgs; - } + this.store.layers[id].args = args; } }, { key: 'show', value: function show( id, args) {var stack = this.store.stack; - this.update(id, args); + if (args && args.length) { + this.update(id, args); + } if (id !== stack[stack.length - 1]) { this.hide(id); this.store.stack = [].concat(_toConsumableArray(stack), [id]); diff --git a/lib/LayerStoreCore.js.map b/lib/LayerStoreCore.js.map index 680ef46..5478337 100644 --- a/lib/LayerStoreCore.js.map +++ b/lib/LayerStoreCore.js.map @@ -1 +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'\n\nexport default class LayerStoreCore {\n\n store: Store;\n\n constructor () {\n this.store = {\n stack: [],\n layers: {},\n };\n\n this.getLayer = this.getLayer.bind(this);\n this.getStack = this.getStack.bind(this);\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n this.update = this.update.bind(this);\n this.register = this.register.bind(this);\n this.updateFn = this.updateFn.bind(this);\n this.unregister = this.unregister.bind(this);\n this.isActive = this.isActive.bind(this);\n this.getIndex = this.getIndex.bind(this);\n this.getLayersForMountPoint = this.getLayersForMountPoint.bind(this);\n }\n\n getLayer(id: ID): Layer {\n return this.store.layers[id];\n }\n\n getLayersForMountPoint(mountPointId: ID) {\n const { layers } = this.store;\n return Object.keys(layers).filter(id => layers[id].mountPointId === mountPointId)\n }\n\n getStack(): LayerStack {\n return this.store.stack;\n }\n\n register (id: ID, layerFn: LayerFn, mountPointId: ID = null,\n groups: Array = [], use: Array, defaultArgs: Array = [],\n defaultShow: Boolean) {\n this.store.layers[id] = { layerFn, groups, mountPointId, defaultArgs, defaultShow, use };\n this.reset(id);\n }\n\n updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null,\n groups: Array = [], use: Array, defaultArgs: Array = [],\n defaultShow: Boolean) {\n const layer = this.getLayer(id);\n layer.fn = layerFn;\n layer.use = use;\n layer.mountPointId = mountPointId;\n layer.groups = groups;\n layer.defaultArgs = defaultArgs;\n layer.defaultShow = defaultShow;\n }\n\n reset(id: ID) {\n const layer = this.store.layers[id];\n layer.args = layer.defaultArgs;\n if (layer.defaultShow) {\n this.show(id);\n }\n }\n\n unregister(id: ID) {\n delete this.store.layers[id];\n }\n\n update(id: ID, args: Array = []) {\n if (args.length) {\n this.store.layers[id].args = args;\n } else {\n this.store.layers[id].args = this.store.layers[id].defaultArgs;\n }\n }\n\n show (id: ID, args: Array) {\n const { stack } = this.store;\n this.update(id, args);\n if ( id !== stack[stack.length - 1] ) {\n this.hide(id);\n this.store.stack = [...stack, id];\n }\n }\n\n hide (id: ID) {\n const stack = [...this.store.stack];\n if (-1 !== stack.indexOf(id)) {\n stack.splice(stack.indexOf(id), 1);\n this.store.stack = stack;\n }\n }\n\n getIndex(id: ID) {\n return this.store.stack.indexOf(id);\n }\n\n isActive(id: ID) {\n return this.store.stack.indexOf(id) !== -1;\n }\n}\n"]} \ No newline at end of file +{"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","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'\n\nexport default class LayerStoreCore {\n\n store: Store;\n\n constructor () {\n this.store = {\n stack: [],\n layers: {},\n };\n\n this.getLayer = this.getLayer.bind(this);\n this.getStack = this.getStack.bind(this);\n this.show = this.show.bind(this);\n this.hide = this.hide.bind(this);\n this.update = this.update.bind(this);\n this.register = this.register.bind(this);\n this.updateFn = this.updateFn.bind(this);\n this.unregister = this.unregister.bind(this);\n this.isActive = this.isActive.bind(this);\n this.getIndex = this.getIndex.bind(this);\n this.getLayersForMountPoint = this.getLayersForMountPoint.bind(this);\n }\n\n getLayer(id: ID): Layer {\n return this.store.layers[id];\n }\n\n getLayersForMountPoint(mountPointId: ID) {\n const { layers } = this.store;\n return Object.keys(layers).filter(id => layers[id].mountPointId === mountPointId)\n }\n\n getStack(): LayerStack {\n return this.store.stack;\n }\n\n register (id: ID,\n layerFn: LayerFn,\n mountPointId: ID = null,\n defaultArgs: Array = [],\n defaultShow: Boolean) {\n this.store.layers[id] = { layerFn, mountPointId, defaultArgs, defaultShow };\n this.reset(id);\n }\n\n updateFn (id: ID,\n layerFn: LayerFn,\n mountPointId: ID = null,\n defaultArgs: Array = [],\n defaultShow: Boolean) {\n const layer = this.getLayer(id);\n layer.fn = layerFn;\n layer.mountPointId = mountPointId;\n layer.defaultArgs = defaultArgs;\n layer.defaultShow = defaultShow;\n }\n\n reset(id: ID) {\n const layer = this.store.layers[id];\n layer.args = layer.defaultArgs;\n if (layer.defaultShow) {\n this.show(id);\n }\n }\n\n unregister(id: ID) {\n delete this.store.layers[id];\n }\n\n update(id: ID, args: Array = []) {\n this.store.layers[id].args = args;\n }\n\n show (id: ID, args: Array) {\n const { stack } = this.store;\n if(args && args.length) {\n this.update(id, args);\n }\n if ( id !== stack[stack.length - 1] ) {\n this.hide(id);\n this.store.stack = [...stack, id];\n }\n }\n\n hide (id: ID) {\n const stack = [...this.store.stack];\n if (-1 !== stack.indexOf(id)) {\n stack.splice(stack.indexOf(id), 1);\n this.store.stack = stack;\n }\n }\n\n getIndex(id: ID) {\n return this.store.stack.indexOf(id);\n }\n\n isActive(id: ID) {\n return this.store.stack.indexOf(id) !== -1;\n }\n}\n"]} \ No newline at end of file diff --git a/lib/components/Layer.js b/lib/components/Layer.js index 399e8f5..2d03d44 100644 --- a/lib/components/Layer.js +++ b/lib/components/Layer.js @@ -1,69 +1,39 @@ '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); -var _common = require('./../common'); var _LayerStore = require('./../LayerStore');var _LayerStore2 = _interopRequireDefault(_LayerStore); 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 + + Layer = function (_Component) {_inherits(Layer, _Component); + + + + + + function Layer(props, context) {_classCallCheck(this, Layer);var _this = _possibleConstructorReturn(this, (Layer.__proto__ || Object.getPrototypeOf(Layer)).call(this, props, context)); _this.layerStore = context.layerStore;return _this; }_createClass(Layer, [{ key: 'componentWillMount', value: function componentWillMount() - {var - layerStore = this.context.layerStore;var _props = - this.props;var id = _props.id;var children = _props.children;var to = _props.to;var use = _props.use;var defaultArgs = _props.defaultArgs;var defaultShow = _props.defaultShow; - layerStore.register(id, children, to, null, use, defaultArgs, defaultShow); - } }, { key: 'shouldComponentUpdate', value: function shouldComponentUpdate( - - newProps) {var _props2 = - this.props;var children = _props2.children;var id = _props2.id;var to = _props2.to;var use = _props2.use;var - layerStore = this.context.layerStore; - var needUpdate = false; - if (id !== newProps.id || to !== newProps.to) { - needUpdate = true; - } else - if (children.toString() !== newProps.children.toString()) { - needUpdate = true; - } else - if (use) { - if (use.length !== newProps.use.length) { - needUpdate = true; - } else { - var i = use.length; - while (i--) { - if ((0, _common.isPrimitiveType)(use[i]) && (0, _common.isPrimitiveType)(newProps.use[i])) { - if (use[i] !== newProps.use[i]) { - needUpdate = true; - } - } else - if (typeof use[i].equals === 'function' && typeof newProps.use[i].equals === 'function') { - if (!use[i].equals(newProps.use[i])) {// fast equality check for immutable-js && mori - needUpdate = true; - } - } else - if (JSON.stringify(use[i]) !== JSON.stringify(newProps.use[i])) { - needUpdate = true; - } - } - } - } + {var _props = + this.props;var id = _props.id;var children = _props.children;var to = _props.to; + this.layerStore.register(id, children, to, this.props.defaultArgs, this.props.defaultShow); + } }, { key: 'componentWillUpdate', value: function componentWillUpdate(_ref) - if (needUpdate) { - layerStore.updateFn(newProps.id, newProps.children, newProps.to, null, newProps.use, newProps.defaultArgs, newProps.defaultShow); - return true; - } - return false; + {var id = _ref.id;var children = _ref.children;var to = _ref.to;var defaultArgs = _ref.defaultArgs;var defaultShow = _ref.defaultShow; + this.layerStore.updateFn(id, children, to, defaultArgs, defaultShow); } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { this.layerStore = null; } }, { key: 'render', value: function render() - {var _props3 = - this.props;var id = _props3.id;var to = _props3.to;var elementType = _props3.elementType; + {var _props2 = + this.props;var id = _props2.id;var to = _props2.to; if (!to) { return (0, _react.createElement)(_LayerMountPoint2.default, { id: id }); } @@ -71,10 +41,6 @@ Layer = function (_Component) {_inherits(Layer, _Component); } }]);return Layer;}(_react.Component);exports.default = Layer; -Layer.propTypes = { - use: _react.PropTypes.array }; - - Layer.defaultProps = { elementType: 'span' }; diff --git a/lib/components/Layer.js.map b/lib/components/Layer.js.map index 8b62cc9..b561b44 100644 --- a/lib/components/Layer.js.map +++ b/lib/components/Layer.js.map @@ -1 +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","propTypes","array","defaultProps","contextTypes","object"],"mappings":"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","file":"Layer.js","sourcesContent":["import React, { Component, PropTypes, createElement} from 'react';\nimport { isPrimitiveType } from './../common';\nimport LayerStore from './../LayerStore';\nimport LayerMountPoint from './LayerMountPoint';\n\nexport default class Layer extends Component {\n\n layerStore: LayerStore;\n\n constructor(props, context) {\n super(props, context);\n this.layerStore = context.layerStore;\n }\n\n componentWillMount() {\n const { layerStore } = this.context;\n const { id, children, to, use, defaultArgs, defaultShow } = this.props;\n layerStore.register(id, children, to, null, use, defaultArgs, defaultShow);\n }\n\n shouldComponentUpdate(newProps) {\n const { children, id, to, use } = this.props;\n const { layerStore } = this.context;\n let needUpdate = false;\n if (id !== newProps.id || to !== newProps.to) {\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 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 layerStore.updateFn(newProps.id, newProps.children, newProps.to, null, newProps.use, newProps.defaultArgs, newProps.defaultShow);\n return true;\n }\n return false;\n }\n\n componentWillUnmount() {\n this.layerStore = null;\n }\n\n render() {\n const { id, to, elementType } = this.props;\n if (!to) {\n return createElement(LayerMountPoint, { id });\n }\n return null;\n }\n}\n\nLayer.propTypes = {\n use: PropTypes.array\n};\n\nLayer.defaultProps = {\n elementType: 'span'\n};\n\nLayer.contextTypes = {\n layerStore: PropTypes.object\n};"]} \ No newline at end of file +{"version":3,"sources":["../../src/components/Layer.js"],"names":["Layer","props","context","layerStore","id","children","to","register","defaultArgs","defaultShow","updateFn","defaultProps","elementType","contextTypes","object"],"mappings":"gnBAAA,8B;AACA,6C;AACA,oD;;;;AAIqBA,K;;;;;;;;;;AAUnB,iBAAYC,KAAZ,EAAmBC,OAAnB,EAA4B;AACpBD,SADoB,EACbC,OADa;AAE1B,UAAKC,UAAL,GAAkBD,QAAQC,UAA1B,CAF0B;AAG3B,G;;AAEoB;AACU,WAAKF,KADf,KACXG,EADW,UACXA,EADW,KACPC,QADO,UACPA,QADO,KACGC,EADH,UACGA,EADH;AAEnB,WAAKH,UAAL,CAAgBI,QAAhB,CAAyBH,EAAzB,EAA6BC,QAA7B,EAAuCC,EAAvC,EAA2C,KAAKL,KAAL,CAAWO,WAAtD,EAAmE,KAAKP,KAAL,CAAWQ,WAA9E;AACD,K;;AAEmE,SAA9CL,EAA8C,QAA9CA,EAA8C,KAA1CC,QAA0C,QAA1CA,QAA0C,KAAhCC,EAAgC,QAAhCA,EAAgC,KAA5BE,WAA4B,QAA5BA,WAA4B,KAAfC,WAAe,QAAfA,WAAe;AAClE,WAAKN,UAAL,CAAgBO,QAAhB,CAAyBN,EAAzB,EAA6BC,QAA7B,EAAuCC,EAAvC,EAA2CE,WAA3C,EAAwDC,WAAxD;AACD,K;;AAEsB;AACrB,WAAKN,UAAL,GAAkB,IAAlB;AACD,K;;AAEQ;AACY,WAAKF,KADjB,KACCG,EADD,WACCA,EADD,KACKE,EADL,WACKA,EADL;AAEP,UAAI,CAACA,EAAL,EAAS;AACP,eAAO,qDAA+B,EAAEF,MAAF,EAA/B,CAAP;AACD;AACD,aAAO,IAAP;AACD,K,wDAlCkBJ,K;;;AAqCrBA,MAAMW,YAAN,GAAqB;AACnBC,eAAa,MADM,EAArB;;;AAIAZ,MAAMa,YAAN,GAAqB;AACnBV,cAAY,iBAAUW,MADH,EAArB","file":"Layer.js","sourcesContent":["import React, { Component, PropTypes, createElement} from 'react';\nimport LayerStore from './../LayerStore';\nimport LayerMountPoint from './LayerMountPoint';\n\nimport type { ID, LayerFn } from './../types'\n\nexport default class Layer extends Component {\n\n props: {\n id: ID,\n children: LayerFn,\n to: ?ID,\n };\n\n layerStore: LayerStore;\n\n constructor(props, context) {\n super(props, context);\n this.layerStore = context.layerStore;\n }\n\n componentWillMount() {\n const { id, children, to } = this.props;\n this.layerStore.register(id, children, to, this.props.defaultArgs, this.props.defaultShow);\n }\n\n componentWillUpdate({ id, children, to, defaultArgs, defaultShow }) {\n this.layerStore.updateFn(id, children, to, defaultArgs, defaultShow);\n }\n\n componentWillUnmount() {\n this.layerStore = null;\n }\n\n render() {\n const { id, to } = this.props;\n if (!to) {\n return createElement(LayerMountPoint, { id });\n }\n return null;\n }\n}\n\nLayer.defaultProps = {\n elementType: 'span'\n};\n\nLayer.contextTypes = {\n layerStore: PropTypes.object\n};"]} \ No newline at end of file diff --git a/lib/components/LayerMountPoint.js b/lib/components/LayerMountPoint.js index 28895a3..1107ebe 100644 --- a/lib/components/LayerMountPoint.js +++ b/lib/components/LayerMountPoint.js @@ -11,14 +11,15 @@ LayerMountPoint = function (_Component) {_inherits(LayerMountPoint, _Component); props, context)); _this.unsubscribe = null; _this.layerStore = context.layerStore;return _this; - }_createClass(LayerMountPoint, [{ key: 'shouldComponentUpdate', value: function shouldComponentUpdate( + }_createClass(LayerMountPoint, [{ key: 'shouldComponentUpdate', value: function shouldComponentUpdate() - props, state) { + { return true; } }, { key: 'componentWillMount', value: function componentWillMount() {var _this2 = this; this.unsubscribe = this.layerStore.subscribeToLayer(this.props.id, function () { + console.log(_this2.layerStore); _this2.setState({}); }); } }, { key: 'componentWillUnmount', value: function componentWillUnmount() @@ -31,7 +32,7 @@ LayerMountPoint = function (_Component) {_inherits(LayerMountPoint, _Component); {var id = this.props.id;var _layerStore = - this.layerStore;var _show = _layerStore.show;var _hide = _layerStore.hide;var _update = _layerStore.update;var isActive = _layerStore.isActive; + this.layerStore;var _show = _layerStore.show;var _hide = _layerStore.hide;var _update = _layerStore.update;var _reset = _layerStore.reset;var isActive = _layerStore.isActive; var stack = this.layerStore.getStack(); var layer = this.layerStore.getLayer(id); var index = this.layerStore.getIndex(id); @@ -40,7 +41,8 @@ LayerMountPoint = function (_Component) {_inherits(LayerMountPoint, _Component); hide: function hide() {return _hide(id);}, // intention here is to hide ID's management from Layer and let app developer manage these IDs independently // which will give an ability to write general-purpose Layers and share them b/w projects 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 - 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( + update: function update() {for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {args[_key2] = arguments[_key2];}return _update(id, args);}, + reset: function reset() {return _reset(id);} }].concat(_toConsumableArray( layer.args))) : null; } }]);return LayerMountPoint;}(_react.Component);exports.default = LayerMountPoint; diff --git a/lib/components/LayerMountPoint.js.map b/lib/components/LayerMountPoint.js.map index f65c5be..62b0c82 100644 --- a/lib/components/LayerMountPoint.js.map +++ b/lib/components/LayerMountPoint.js.map @@ -1 +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","contextTypes","object","defaultProps"],"mappings":"gnBAAA,8B;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,KAECK,KAFD,eAECA,IAFD,KAEOC,KAFP,eAEOA,IAFP,KAEaC,OAFb,eAEaA,MAFb,KAEqBC,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,kEAxCkBpB,e;;;AA2CrBA,gBAAgBqB,YAAhB,GAA+B;AAC7BjB,cAAY,iBAAUkB,MADO,EAA/B;;;AAIAtB,gBAAgBuB,YAAhB,GAA+B;AAC7BN,SAAO,CADsB,EAA/B","file":"LayerMountPoint.js","sourcesContent":["import React, { Component, createElement, PropTypes} from 'react'\nimport LayerStore from './../LayerStore';\nimport type { MountPointProps } from './../types'\n\nexport default class LayerMountPoint extends Component {\n\n props: MountPointProps;\n layerStore: LayerStore;\n\n constructor(props, context) {\n super(props, context);\n this.unsubscribe = null;\n this.layerStore = context.layerStore;\n }\n\n shouldComponentUpdate(props, state) {\n return true;\n }\n\n componentWillMount() {\n this.unsubscribe = this.layerStore.subscribeToLayer(this.props.id, () => {\n this.setState({})\n });\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n this.unsubscribe = null;\n this.layerStore = null;\n }\n\n render() {\n const { id } = this.props;\n const { show, hide, update, isActive } = this.layerStore;\n const stack = this.layerStore.getStack();\n const layer = this.layerStore.getLayer(id);\n const index = this.layerStore.getIndex(id);\n return isActive(id) ? layer.layerFn({\n index, id, stack, // seems like there is no valid use-case mountPointId in the Layer render function\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 update: (...args) => update(id, args)\n }, ...layer.args) : null;\n }\n}\n\nLayerMountPoint.contextTypes = {\n layerStore: PropTypes.object\n};\n\nLayerMountPoint.defaultProps = {\n index: 0\n};"]} \ No newline at end of file +{"version":3,"sources":["../../src/components/LayerMountPoint.js"],"names":["LayerMountPoint","props","context","unsubscribe","layerStore","subscribeToLayer","id","console","log","setState","show","hide","update","reset","isActive","stack","getStack","layer","getLayer","index","getIndex","layerFn","args","contextTypes","object","defaultProps"],"mappings":"gnBAAA,8B;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;;AAEuB;AACtB,aAAO,IAAP;AACD,K;;AAEoB;AACnB,WAAKD,WAAL,GAAmB,KAAKC,UAAL,CAAgBC,gBAAhB,CAAiC,KAAKJ,KAAL,CAAWK,EAA5C,EAAgD,YAAM;AACvEC,gBAAQC,GAAR,CAAY,OAAKJ,UAAjB;AACA,eAAKK,QAAL,CAAc,EAAd;AACD,OAHkB,CAAnB;AAID,K;;AAEsB;AACrB,WAAKN,WAAL;AACA,WAAKA,WAAL,GAAmB,IAAnB;AACA,WAAKC,UAAL,GAAkB,IAAlB;AACD,K;;AAEQ;AACCE,QADD,GACQ,KAAKL,KADb,CACCK,EADD;AAEyC,WAAKF,UAF9C,KAECM,KAFD,eAECA,IAFD,KAEOC,KAFP,eAEOA,IAFP,KAEaC,OAFb,eAEaA,MAFb,KAEqBC,MAFrB,eAEqBA,KAFrB,KAE4BC,QAF5B,eAE4BA,QAF5B;AAGP,UAAMC,QAAQ,KAAKX,UAAL,CAAgBY,QAAhB,EAAd;AACA,UAAMC,QAAQ,KAAKb,UAAL,CAAgBc,QAAhB,CAAyBZ,EAAzB,CAAd;AACA,UAAMa,QAAQ,KAAKf,UAAL,CAAgBgB,QAAhB,CAAyBd,EAAzB,CAAd;AACA,aAAOQ,SAASR,EAAT,IAAeW,MAAMI,OAAN,eAAc;AAClCF,oBADkC,EAC3Bb,MAD2B,EACvBS,YADuB,EAChB;AAClBJ,cAAM,wBAAMA,MAAKL,EAAL,CAAN,EAF4B,EAEZ;AACtB;AACAI,cAAM,mDAAIY,IAAJ,gDAAIA,IAAJ,iCAAaZ,MAAKJ,EAAL,EAASgB,IAAT,CAAb,EAJ4B,EAIC;AACnCV,gBAAQ,sDAAIU,IAAJ,qDAAIA,IAAJ,mCAAaV,QAAON,EAAP,EAAWgB,IAAX,CAAb,EAL0B;AAMlCT,eAAO,yBAAMA,OAAMP,EAAN,CAAN,EAN2B,EAAd;AAOhBW,YAAMK,IAPU,GAAf,GAOa,IAPpB;AAQD,K,kEA1CkBtB,e;;;AA6CrBA,gBAAgBuB,YAAhB,GAA+B;AAC7BnB,cAAY,iBAAUoB,MADO,EAA/B;;;AAIAxB,gBAAgByB,YAAhB,GAA+B;AAC7BN,SAAO,CADsB,EAA/B","file":"LayerMountPoint.js","sourcesContent":["import React, { Component, createElement, PropTypes} from 'react'\nimport LayerStore from './../LayerStore';\nimport type { MountPointProps } from './../types'\n\nexport default class LayerMountPoint extends Component {\n\n props: MountPointProps;\n layerStore: LayerStore;\n\n constructor(props, context) {\n super(props, context);\n this.unsubscribe = null;\n this.layerStore = context.layerStore;\n }\n\n shouldComponentUpdate() {\n return true;\n }\n\n componentWillMount() {\n this.unsubscribe = this.layerStore.subscribeToLayer(this.props.id, () => {\n console.log(this.layerStore)\n this.setState({})\n });\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n this.unsubscribe = null;\n this.layerStore = null;\n }\n\n render() {\n const { id } = this.props;\n const { show, hide, update, reset, isActive } = this.layerStore;\n const stack = this.layerStore.getStack();\n const layer = this.layerStore.getLayer(id);\n const index = this.layerStore.getIndex(id);\n return isActive(id) ? layer.layerFn({\n index, id, stack, // seems like there is no valid use-case mountPointId in the Layer render function\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 update: (...args) => update(id, args),\n reset: () => reset(id)\n }, ...layer.args) : null;\n }\n}\n\nLayerMountPoint.contextTypes = {\n layerStore: PropTypes.object\n};\n\nLayerMountPoint.defaultProps = {\n index: 0\n};"]} \ No newline at end of file diff --git a/lib/components/LayerStackMountPoint.js b/lib/components/LayerStackMountPoint.js index b9c0573..89c4d0a 100644 --- a/lib/components/LayerStackMountPoint.js +++ b/lib/components/LayerStackMountPoint.js @@ -2,10 +2,17 @@ var _LayerMountPoint = require('./LayerMountPoint');var _LayerMountPoint2 = _interopRequireDefault(_LayerMountPoint); 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 + + LayerStackMountPoint = function (_Component) {_inherits(LayerStackMountPoint, _Component); + + + + + function LayerStackMountPoint(props, context) {_classCallCheck(this, LayerStackMountPoint);var _this = _possibleConstructorReturn(this, (LayerStackMountPoint.__proto__ || Object.getPrototypeOf(LayerStackMountPoint)).call(this, props, context)); _this.unsubscribe = context.layerStore.subscribeToMountPoint(props.id, function () { diff --git a/lib/components/LayerStackMountPoint.js.map b/lib/components/LayerStackMountPoint.js.map index 646efc6..3bb3814 100644 --- a/lib/components/LayerStackMountPoint.js.map +++ b/lib/components/LayerStackMountPoint.js.map @@ -1 +1 @@ -{"version":3,"sources":["../../src/components/LayerStackMountPoint.js"],"names":["LayerStackMountPoint","props","context","unsubscribe","layerStore","subscribeToMountPoint","id","setState","mountPointId","elementType","getLayersForMountPoint","map","key","contextTypes","object","defaultProps"],"mappings":"gnBAAA,8B;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;AACmC,WAAKH,KADxC,KACKO,YADL,UACCF,EADD,KACmBG,WADnB,UACmBA,WADnB;AAEP,aAAO,0BAAcA,WAAd,EAA2B,EAA3B,EAA+B,KAAKL,UAAL,CAAgBM,sBAAhB,CAAuCF,YAAvC;AACnCG,SADmC,CAC9B,UAACL,EAAD,UAAQ,0BAAcG,WAAd,EAA2B,EAAEG,KAAKN,EAAP,EAA3B;AACZ,6DAA+B,EAAEA,MAAF,EAA/B,CADY,CAAR,EAD8B,CAA/B,CAAP;AAGD,K,uEAvBkBN,oB;;;AA0BrBA,qBAAqBa,YAArB,GAAoC;AAClCT,cAAY,iBAAUU,MADY,EAApC;;;AAIAd,qBAAqBe,YAArB,GAAoC;AAClCN,eAAa,MADqB,EAApC","file":"LayerStackMountPoint.js","sourcesContent":["import React, { Component, PropTypes, createElement} from 'react';\nimport LayerMountPoint from './LayerMountPoint';\nimport LayerStore from './../LayerStore'\n\nexport default class LayerStackMountPoint extends Component {\n\n layerStore: LayerStore;\n\n constructor(props, context) {\n super(props, context);\n this.unsubscribe = context.layerStore.subscribeToMountPoint(props.id, () => {\n this.setState({})\n });\n this.layerStore = context.layerStore;\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n this.unsubscribe = null;\n this.layerStore = null;\n }\n\n render() {\n const { id: mountPointId, elementType } = this.props;\n return createElement(elementType, {}, this.layerStore.getLayersForMountPoint(mountPointId)\n .map ((id) => createElement(elementType, { key: id },\n createElement(LayerMountPoint, { id }))))\n }\n}\n\nLayerStackMountPoint.contextTypes = {\n layerStore: PropTypes.object\n};\n\nLayerStackMountPoint.defaultProps = {\n elementType: 'span'\n};"]} \ No newline at end of file +{"version":3,"sources":["../../src/components/LayerStackMountPoint.js"],"names":["LayerStackMountPoint","props","context","unsubscribe","layerStore","subscribeToMountPoint","id","setState","mountPointId","elementType","getLayersForMountPoint","map","key","contextTypes","object","defaultProps"],"mappings":"gnBAAA,8B;AACA,oD;AACA,6C;;;;AAIqBA,oB;;;;;;;;;AASnB,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;AACmC,WAAKH,KADxC,KACKO,YADL,UACCF,EADD,KACmBG,WADnB,UACmBA,WADnB;AAEP,aAAO,0BAAcA,WAAd,EAA2B,EAA3B,EAA+B,KAAKL,UAAL,CAAgBM,sBAAhB,CAAuCF,YAAvC;AACnCG,SADmC,CAC9B,UAACL,EAAD,UAAQ,0BAAcG,WAAd,EAA2B,EAAEG,KAAKN,EAAP,EAA3B;AACZ,6DAA+B,EAAEA,MAAF,EAA/B,CADY,CAAR,EAD8B,CAA/B,CAAP;AAGD,K,uEA5BkBN,oB;;;AA+BrBA,qBAAqBa,YAArB,GAAoC;AAClCT,cAAY,iBAAUU,MADY,EAApC;;;AAIAd,qBAAqBe,YAArB,GAAoC;AAClCN,eAAa,MADqB,EAApC","file":"LayerStackMountPoint.js","sourcesContent":["import React, { Component, PropTypes, createElement} from 'react';\nimport LayerMountPoint from './LayerMountPoint';\nimport LayerStore from './../LayerStore'\n\nimport type { ID, LayerFn } from './../types'\n\nexport default class LayerStackMountPoint extends Component {\n\n layerStore: LayerStore;\n\n props: {\n id: ID,\n elementType: LayerFn,\n };\n\n constructor(props, context) {\n super(props, context);\n this.unsubscribe = context.layerStore.subscribeToMountPoint(props.id, () => {\n this.setState({})\n });\n this.layerStore = context.layerStore;\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n this.unsubscribe = null;\n this.layerStore = null;\n }\n\n render() {\n const { id: mountPointId, elementType } = this.props;\n return createElement(elementType, {}, this.layerStore.getLayersForMountPoint(mountPointId)\n .map ((id) => createElement(elementType, { key: id },\n createElement(LayerMountPoint, { id }))))\n }\n}\n\nLayerStackMountPoint.contextTypes = {\n layerStore: PropTypes.object\n};\n\nLayerStackMountPoint.defaultProps = {\n elementType: 'span'\n};"]} \ No newline at end of file diff --git a/lib/components/LayerToggle.js b/lib/components/LayerToggle.js index 64efdf0..d33f80a 100644 --- a/lib/components/LayerToggle.js +++ b/lib/components/LayerToggle.js @@ -1,10 +1,17 @@ '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); 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 + + LayerToggle = function (_Component) {_inherits(LayerToggle, _Component); + + + + + function LayerToggle(props, context) {_classCallCheck(this, LayerToggle);var _this = _possibleConstructorReturn(this, (LayerToggle.__proto__ || Object.getPrototypeOf(LayerToggle)).call(this, props, context)); _this.unsubscribe = null; @@ -13,7 +20,7 @@ LayerToggle = function (_Component) {_inherits(LayerToggle, _Component); {var _this2 = this; this.unsubscribe = this.layerStore.subscribeToLayer(this.props.for, function () { - setTimeout(function () {return _this2.setState({});}, 100); + _this2.setState({}); }); } }, { key: 'componentWillUnmount', value: function componentWillUnmount() @@ -31,7 +38,12 @@ LayerToggle = function (_Component) {_inherits(LayerToggle, _Component); stack: stack, isActive: stack.indexOf(props.for) !== -1, 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);}, - hide: function hide() {return props.for ? _hide(props.for) : _hide();} }].concat(_toConsumableArray( + hide: function hide() {var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;return props.for ? _hide(props.for) : _hide(id);}, + toggle: function toggle(_id) { + var id = props.for ? props.for : _id; + stack.indexOf(props.for) !== -1 ? _hide(id) : _show(id); + }, + reset: function (_reset) {function reset(_x2) {return _reset.apply(this, arguments);}reset.toString = function () {return _reset.toString();};return reset;}(function (id) {return props.for ? reset(props.for) : reset(id);}) }].concat(_toConsumableArray( this.layerStore.getLayer(props.for).args))); } }]);return LayerToggle;}(_react.Component);exports.default = LayerToggle; diff --git a/lib/components/LayerToggle.js.map b/lib/components/LayerToggle.js.map index f195c21..0adb86f 100644 --- a/lib/components/LayerToggle.js.map +++ b/lib/components/LayerToggle.js.map @@ -1 +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","contextTypes","object"],"mappings":"gnBAAA,8B;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,KACAQ,QADA,UACAA,QADA,KACaR,KADb;AAEe,WAAKG,UAFpB,KAEAM,KAFA,eAEAA,IAFA,KAEMC,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,8DAhCkBhB,W;;;AAmCrBA,YAAYkB,YAAZ,GAA2B;AACzBd,cAAY,iBAAUe,MADG,EAA3B","file":"LayerToggle.js","sourcesContent":["import React, { Component, PropTypes, createElement} from 'react'\nimport LayerStore from './../LayerStore'\n\nexport default class LayerToggle extends Component {\n\n layerStore: LayerStore;\n\n constructor(props, context) {\n super(props, context);\n this.unsubscribe = null;\n this.layerStore = context.layerStore;\n }\n\n componentWillMount() {\n this.unsubscribe = this.layerStore.subscribeToLayer(this.props.for, () => {\n setTimeout(() => this.setState({}), 100 );\n });\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n this.unsubscribe = null;\n this.layerStore = null;\n }\n\n render () {\n const { children, ...props } = this.props;\n const { show, hide } = this.layerStore;\n const stack = this.layerStore.getStack();\n return children({\n stack,\n isActive: stack.indexOf(props.for) !== -1,\n show: (...args) => props.for ? show(props.for, args) : show(args),\n hide: (...args) => props.for ? hide(props.for) : hide(),\n }, ...this.layerStore.getLayer(props.for).args);\n }\n}\n\nLayerToggle.contextTypes = {\n layerStore: PropTypes.object\n};"]} \ No newline at end of file +{"version":3,"sources":["../../src/components/LayerToggle.js"],"names":["LayerToggle","props","context","unsubscribe","layerStore","subscribeToLayer","for","setState","children","show","hide","stack","getStack","isActive","indexOf","args","id","toggle","_id","reset","getLayer","contextTypes","object"],"mappings":"gnBAAA,8B;AACA,6C;;;;AAIqBA,W;;;;;;;;;AASnB,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;AACxE,eAAKC,QAAL,CAAc,EAAd;AACD,OAFkB,CAAnB;AAGD,K;;AAEsB;AACrB,WAAKJ,WAAL;AACA,WAAKA,WAAL,GAAmB,IAAnB;AACA,WAAKC,UAAL,GAAkB,IAAlB;AACD,K;;AAES;AACuB,WAAKH,KAD5B,KACAO,QADA,UACAA,QADA,KACaP,KADb;AAEe,WAAKG,UAFpB,KAEAK,KAFA,eAEAA,IAFA,KAEMC,KAFN,eAEMA,IAFN;AAGR,UAAMC,QAAQ,KAAKP,UAAL,CAAgBQ,QAAhB,EAAd;AACA,aAAOJ,2BAAS;AACdG,oBADc;AAEdE,kBAAUF,MAAMG,OAAN,CAAcb,MAAMK,GAApB,MAA6B,CAAC,CAF1B;AAGdG,cAAM,mDAAIM,IAAJ,gDAAIA,IAAJ,iCAAad,MAAMK,GAAN,GAAYG,MAAKR,MAAMK,GAAX,EAAgBS,IAAhB,CAAZ,GAAoCN,MAAKM,IAAL,CAAjD,EAHQ;AAIdL,cAAM,qBAACM,EAAD,uEAAM,IAAN,QAAef,MAAMK,GAAN,GAAYI,MAAKT,MAAMK,GAAX,CAAZ,GAA8BI,MAAKM,EAAL,CAA7C,EAJQ;AAKdC,gBAAQ,gBAACC,GAAD,EAAS;AACf,cAAMF,KAAKf,MAAMK,GAAN,GAAYL,MAAMK,GAAlB,GAAwBY,GAAnC;AACAP,gBAAMG,OAAN,CAAcb,MAAMK,GAApB,MAA6B,CAAC,CAA9B,GAAkCI,MAAKM,EAAL,CAAlC,GAA6CP,MAAKO,EAAL,CAA7C;AACD,SARa;AASdG,qKAAO,UAACH,EAAD,UAAQf,MAAMK,GAAN,GAAYa,MAAMlB,MAAMK,GAAZ,CAAZ,GAA+Ba,MAAMH,EAAN,CAAvC,EAAP,CATc,EAAT;AAUD,WAAKZ,UAAL,CAAgBgB,QAAhB,CAAyBnB,MAAMK,GAA/B,EAAoCS,IAVnC,GAAP;AAWD,K,8DA1CkBf,W;;;AA6CrBA,YAAYqB,YAAZ,GAA2B;AACzBjB,cAAY,iBAAUkB,MADG,EAA3B","file":"LayerToggle.js","sourcesContent":["import React, { Component, PropTypes, createElement} from 'react'\nimport LayerStore from './../LayerStore'\n\nimport type { ID, LayerFn } from './../types'\n\nexport default class LayerToggle extends Component {\n\n layerStore: LayerStore;\n\n props: {\n for: ID,\n children: LayerFn,\n };\n\n constructor(props, context) {\n super(props, context);\n this.unsubscribe = null;\n this.layerStore = context.layerStore;\n }\n\n componentWillMount() {\n this.unsubscribe = this.layerStore.subscribeToLayer(this.props.for, () => {\n this.setState({});\n });\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n this.unsubscribe = null;\n this.layerStore = null;\n }\n\n render () {\n const { children, ...props } = this.props;\n const { show, hide } = this.layerStore;\n const stack = this.layerStore.getStack();\n return children({\n stack,\n isActive: stack.indexOf(props.for) !== -1,\n show: (...args) => props.for ? show(props.for, args) : show(args),\n hide: (id = null) => props.for ? hide(props.for) : hide(id),\n toggle: (_id) => {\n const id = props.for ? props.for : _id;\n stack.indexOf(props.for) !== -1 ? hide(id) : show(id);\n },\n reset: (id) => props.for ? reset(props.for) : reset(id),\n }, ...this.layerStore.getLayer(props.for).args);\n }\n}\n\nLayerToggle.contextTypes = {\n layerStore: PropTypes.object\n};"]} \ No newline at end of file diff --git a/package.json b/package.json index 9f566b9..28ed890 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-layer-stack", - "version": "4.2.1", + "version": "5.0.0", "description": "Simple but ubiquitously powerful and agnostic layering system for React. Useful for any kind of windowing/popover/modals/tooltip application", "repository": { "type": "git", @@ -8,7 +8,8 @@ }, "main": "lib/index.js", "scripts": { - "build": "babel src --out-dir lib --source-maps" + "build": "babel src --out-dir lib --source-maps", + "build:flow": "flow-copy-source -v -i '{**/test/*.js,**/*.test.js}' src lib" }, "author": "Alexey Frolov ", "license": "MIT", diff --git a/src/LayerStore.js b/src/LayerStore.js index c8648a7..0182288 100644 --- a/src/LayerStore.js +++ b/src/LayerStore.js @@ -1,4 +1,4 @@ -import type { ID, LayerFn } from './types' +import type { ID, LayerProps } from './types' import LayerStoreCore from './LayerStoreCore' @@ -9,12 +9,6 @@ export default class LayerStore { this._layerSubscriptions = {}; this._mountPointsubscriptions = {}; - this.show = this.show.bind(this); - this.hide = this.hide.bind(this); - this.update = this.update.bind(this); - this.register = this.register.bind(this); - this.updateFn = this.updateFn.bind(this); - this.unregister = this.unregister.bind(this); this.getLayer = this._core.getLayer; this.getStack = this._core.getStack; this.getIndex = this._core.getIndex; @@ -42,6 +36,14 @@ export default class LayerStore { } } + notifyStack(fromIndex) { + const stack = this._core.getStack(); + const { length } = stack; + for (let i = fromIndex; i < length; ++i) { + this.notifyLayer(stack[i]); + } + } + notifyLayer(id: ID) { if (this._layerSubscriptions[id]) { this._layerSubscriptions[id].forEach(fn => fn()) @@ -54,25 +56,23 @@ export default class LayerStore { } } - register (id: ID, layerFn: LayerFn, mountPointId: ID = null, - groups: Array = [], use: Array, defaultArgs: Array = [], - defaultShow: Boolean) { - this._core.register(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); - if (mountPointId) { - this.notifyMountPoint(mountPointId); + register (props: LayerProps) { + const { id, to } = props; + this._core.register(props); + if (to) { + this.notifyMountPoint(to); } else { this.notifyLayer(id); } } - updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null, - groups: Array = [], use: Array, defaultArgs: Array = [], - defaultShow: Boolean) { - const lastMountPoint = this.getLayer(id).mountPointId; - this._core.updateFn(id, layerFn, mountPointId, groups, use, defaultArgs, defaultShow); - if (lastMountPoint !== mountPointId) { + updateFn (props: LayerProps) { + const { id, to } = props; + const lastMountPoint = this.getLayer(id).to; + this._core.updateFn(props); + if (lastMountPoint !== to) { this.notifyMountPoint(lastMountPoint); - this.notifyMountPoint(mountPointId); + this.notifyMountPoint(to); } else { this.notifyLayer(id); } @@ -88,8 +88,9 @@ export default class LayerStore { } show (id: ID, args: Array) { + const index = this.getIndex(id); this._core.show(id, args); - this.notifyLayer(id); + this.notifyStack(index); } update(id: ID, args: Array) { @@ -98,8 +99,29 @@ export default class LayerStore { } hide (id: ID) { - const stack = this.getStack(); + const index = this.getIndex(id); this._core.hide(id); this.notifyLayer(id); + this.notifyStack(index); + } + + getLayer(id: ID): Layer { + return this._core.getLayer(id); + } + + getLayersForMountPoint(to: ID): Array { + return this._core.getLayersForMountPoint(to); + } + + getStack(): Array { + return this._core.getStack(); + } + + getIndex(id: ID) { + return this._core.getIndex(id); + } + + isActive(id: ID) { + return this._core.isActive(id); } } \ No newline at end of file diff --git a/src/LayerStoreCore.js b/src/LayerStoreCore.js index 736c2e0..3daacdd 100644 --- a/src/LayerStoreCore.js +++ b/src/LayerStoreCore.js @@ -1,4 +1,6 @@ -import type { ID, LayerFn, Layer, Store, LayerStack, ILayerStore } from './types' +//@flow + +import type { ID, Layer, LayerProps, Store } from './types' export default class LayerStoreCore { @@ -9,55 +11,44 @@ export default class LayerStoreCore { stack: [], layers: {}, }; - - this.getLayer = this.getLayer.bind(this); - this.getStack = this.getStack.bind(this); - this.show = this.show.bind(this); - this.hide = this.hide.bind(this); - this.update = this.update.bind(this); - this.register = this.register.bind(this); - this.updateFn = this.updateFn.bind(this); - this.unregister = this.unregister.bind(this); - this.isActive = this.isActive.bind(this); - this.getIndex = this.getIndex.bind(this); - this.getLayersForMountPoint = this.getLayersForMountPoint.bind(this); } getLayer(id: ID): Layer { return this.store.layers[id]; } - getLayersForMountPoint(mountPointId: ID) { + getLayersForMountPoint(to: ID) { const { layers } = this.store; - return Object.keys(layers).filter(id => layers[id].mountPointId === mountPointId) + return Object.keys(layers).filter(id => layers[id].to === to) } - getStack(): LayerStack { + getStack(): Array { return this.store.stack; } - register (id: ID, layerFn: LayerFn, mountPointId: ID = null, - groups: Array = [], use: Array, defaultArgs: Array = [], - defaultShow: Boolean) { - this.store.layers[id] = { layerFn, groups, mountPointId, defaultArgs, defaultShow, use }; + getIndex(id: ID) { + return this.store.stack.indexOf(id); + } + + isActive(id: ID) { + return this.store.stack.indexOf(id) !== -1; + } + + register (props: LayerProps) { + const { id } = props; + this.store.layers[id] = props; this.reset(id); } - updateFn (id: ID, layerFn: LayerFn, mountPointId: ID = null, - groups: Array = [], use: Array, defaultArgs: Array = [], - defaultShow: Boolean) { - const layer = this.getLayer(id); - layer.fn = layerFn; - layer.use = use; - layer.mountPointId = mountPointId; - layer.groups = groups; - layer.defaultArgs = defaultArgs; - layer.defaultShow = defaultShow; + updateFn (props: LayerProps) { + const { id } = props; + const layer = this.store.layers[id]; + this.store.layers[id] = Object.assign(layer, props); } reset(id: ID) { const layer = this.store.layers[id]; - layer.args = layer.defaultArgs; + layer.state = layer.initialState; if (layer.defaultShow) { this.show(id); } @@ -67,17 +58,16 @@ export default class LayerStoreCore { delete this.store.layers[id]; } - update(id: ID, args: Array = []) { - if (args.length) { - this.store.layers[id].args = args; - } else { - this.store.layers[id].args = this.store.layers[id].defaultArgs; - } + update(id: ID, state) { + if (Ob) + this.store.layers[id].state = state; } - show (id: ID, args: Array) { + show (id: ID, state) { const { stack } = this.store; - this.update(id, args); + if(args && args.length) { + this.update(id, args); + } if ( id !== stack[stack.length - 1] ) { this.hide(id); this.store.stack = [...stack, id]; @@ -91,12 +81,4 @@ export default class LayerStoreCore { this.store.stack = stack; } } - - getIndex(id: ID) { - return this.store.stack.indexOf(id); - } - - isActive(id: ID) { - return this.store.stack.indexOf(id) !== -1; - } } diff --git a/src/components/Layer.js b/src/components/Layer.js index 8ee8d93..64a5fac 100644 --- a/src/components/Layer.js +++ b/src/components/Layer.js @@ -1,10 +1,12 @@ +import type { LayerProps } from './../types' + import React, { Component, PropTypes, createElement} from 'react'; -import { isPrimitiveType } from './../common'; import LayerStore from './../LayerStore'; import LayerMountPoint from './LayerMountPoint'; export default class Layer extends Component { + props: LayerProps; layerStore: LayerStore; constructor(props, context) { @@ -13,49 +15,12 @@ export default class Layer extends Component { } componentWillMount() { - const { layerStore } = this.context; - const { id, children, to, use, defaultArgs, defaultShow } = this.props; - layerStore.register(id, children, to, null, use, defaultArgs, defaultShow); + const { id, children, to } = this.props; + this.layerStore.register(id, children, to, this.props.defaultArgs, this.props.defaultShow); } - shouldComponentUpdate(newProps) { - const { children, id, to, use } = this.props; - const { layerStore } = this.context; - let needUpdate = false; - if (id !== newProps.id || to !== newProps.to) { - needUpdate = true; - } - else if (children.toString() !== newProps.children.toString()) { - needUpdate = true; - } - else if (use) { - if (use.length !== newProps.use.length) { - needUpdate = true; - } else { - let i = use.length; - while (i--) { - if (isPrimitiveType(use[i]) && isPrimitiveType(newProps.use[i])) { - if (use[i] !== newProps.use[i]) { - needUpdate = true - } - } - else if (typeof use[i].equals === 'function' && typeof newProps.use[i].equals === 'function') { - if (!use[i].equals(newProps.use[i])) { // fast equality check for immutable-js && mori - needUpdate = true; - } - } - else if (JSON.stringify(use[i]) !== JSON.stringify(newProps.use[i])) { - needUpdate = true; - } - } - } - } - - if (needUpdate) { - layerStore.updateFn(newProps.id, newProps.children, newProps.to, null, newProps.use, newProps.defaultArgs, newProps.defaultShow); - return true; - } - return false; + componentWillUpdate({ id, children, to, defaultArgs, defaultShow }) { + this.layerStore.updateFn(id, children, to, defaultArgs, defaultShow); } componentWillUnmount() { @@ -63,7 +28,7 @@ export default class Layer extends Component { } render() { - const { id, to, elementType } = this.props; + const { id, to } = this.props; if (!to) { return createElement(LayerMountPoint, { id }); } @@ -71,10 +36,6 @@ export default class Layer extends Component { } } -Layer.propTypes = { - use: PropTypes.array -}; - Layer.defaultProps = { elementType: 'span' }; diff --git a/src/components/LayerMountPoint.js b/src/components/LayerMountPoint.js index c792884..02d72a8 100644 --- a/src/components/LayerMountPoint.js +++ b/src/components/LayerMountPoint.js @@ -1,10 +1,11 @@ +import type { LayerMountPointProps } from './../types' + import React, { Component, createElement, PropTypes} from 'react' import LayerStore from './../LayerStore'; -import type { MountPointProps } from './../types' export default class LayerMountPoint extends Component { - props: MountPointProps; + props: LayerMountPointProps; layerStore: LayerStore; constructor(props, context) { @@ -13,12 +14,13 @@ export default class LayerMountPoint extends Component { this.layerStore = context.layerStore; } - shouldComponentUpdate(props, state) { + shouldComponentUpdate() { return true; } componentWillMount() { this.unsubscribe = this.layerStore.subscribeToLayer(this.props.id, () => { + console.log(this.layerStore) this.setState({}) }); } @@ -31,16 +33,16 @@ export default class LayerMountPoint extends Component { render() { const { id } = this.props; - const { show, hide, update, isActive } = this.layerStore; const stack = this.layerStore.getStack(); const layer = this.layerStore.getLayer(id); const index = this.layerStore.getIndex(id); - return isActive(id) ? layer.layerFn({ - index, id, stack, // seems like there is no valid use-case mountPointId in the Layer render function - hide: () => hide(id), // intention here is to hide ID's management from Layer and let app developer manage these IDs independently + return isActive(id) ? layer.children({ + index, id, stack, // seems like there is no valid use-case to in the Layer render function + hide: () => this.layerStore.hide(id), // intention here is to hide ID's management from Layer and let app developer manage these IDs independently // which will give an ability to write general-purpose Layers and share them b/w projects - show: (...args) => show(id, args), // sometimes you may want to change args of the current layer - update: (...args) => update(id, args) + show: (...args) => this.layerStore.show(id, args), // sometimes you may want to change args of the current layer + update: (...args) => this.layerStore.update(id, args), + reset: () => this.layerStore.reset(id) }, ...layer.args) : null; } } diff --git a/src/components/LayerStackMountPoint.js b/src/components/LayerStackMountPoint.js index 9dd2c72..f843bae 100644 --- a/src/components/LayerStackMountPoint.js +++ b/src/components/LayerStackMountPoint.js @@ -1,9 +1,12 @@ +import type { LayerStackMountPointProps } from './../types' + import React, { Component, PropTypes, createElement} from 'react'; import LayerMountPoint from './LayerMountPoint'; import LayerStore from './../LayerStore' export default class LayerStackMountPoint extends Component { + props: LayerStackMountPointProps; layerStore: LayerStore; constructor(props, context) { @@ -21,8 +24,8 @@ export default class LayerStackMountPoint extends Component { } render() { - const { id: mountPointId, elementType } = this.props; - return createElement(elementType, {}, this.layerStore.getLayersForMountPoint(mountPointId) + const { id: to, elementType } = this.props; + return createElement(elementType, {}, this.layerStore.getLayersForMountPoint(to) .map ((id) => createElement(elementType, { key: id }, createElement(LayerMountPoint, { id })))) } diff --git a/src/components/LayerToggle.js b/src/components/LayerToggle.js index fca2f03..6969b69 100644 --- a/src/components/LayerToggle.js +++ b/src/components/LayerToggle.js @@ -1,10 +1,14 @@ +import type { LayerToggleProps } from './../types' + import React, { Component, PropTypes, createElement} from 'react' import LayerStore from './../LayerStore' export default class LayerToggle extends Component { + props: LayerToggleProps; layerStore: LayerStore; + constructor(props, context) { super(props, context); this.unsubscribe = null; @@ -13,7 +17,7 @@ export default class LayerToggle extends Component { componentWillMount() { this.unsubscribe = this.layerStore.subscribeToLayer(this.props.for, () => { - setTimeout(() => this.setState({}), 100 ); + this.setState({}); }); } @@ -25,13 +29,17 @@ export default class LayerToggle extends Component { render () { const { children, ...props } = this.props; - const { show, hide } = this.layerStore; const stack = this.layerStore.getStack(); return children({ stack, isActive: stack.indexOf(props.for) !== -1, - show: (...args) => props.for ? show(props.for, args) : show(args), - hide: (...args) => props.for ? hide(props.for) : hide(), + show: (...args) => props.for ? this.layerStore.show(props.for, args) : this.layerStore.show(args), + hide: (id = null) => props.for ? this.layerStore.hide(props.for) : this.layerStore.hide(id), + toggle: (_id) => { + const id = props.for ? props.for : _id; + stack.indexOf(props.for) !== -1 ? this.layerStore.hide(id) : this.layerStore.show(id); + }, + reset: (id) => props.for ? this.layerStore.reset(props.for) : this.layerStore.reset(id), }, ...this.layerStore.getLayer(props.for).args); } } diff --git a/src/types.js b/src/types.js index 74faab1..21c06a1 100644 --- a/src/types.js +++ b/src/types.js @@ -1,33 +1,51 @@ +//@flow + export type ID = number | string; type LayerHandle = { - show: () => undefined, - hide: () => undefined, index: number, - stack: Array, - isActive: boolean + isActive: boolean, + show: (state: any) => void, + hide: () => void, + update: (state: any) => void, + reset: () => void, }; -export type LayerFn = (fn: LayerHandle) => ReactElement; +export type Store = { + stack: Array, + layers: { [key: ID] : Layer }; +} + +export type LayerFn = (handle: LayerHandle, state: any) => React$Element; + +export type LayerProps = { + id: ID, + to: ID, + children: LayerFn, + initialState: Array, + defaultShow: Boolean, +}; export type Layer = { id: ID, - mountPointId: ID, - layerFn: LayerFn, - args: Array, - use: Array, - defaultArgs: Array, + to: ID, + children: LayerFn, + initialState: Array, defaultShow: Boolean, + state: any, }; -export type LayerStack = Array; +export type LayerToggleProps = { + for: ID, + children: (handle: LayerHandle, state) => React$Element, +}; -export type Store = { - stack: LayerStack, - layers: { [key: ID] : Layer }; +export type LayerMountPointProps = { + id: ID, + index: number, } -export type MountPointProps = { +export type LayerStackMountPointProps = { id: ID, - index: number, + elementType: string, } \ No newline at end of file