react-flex-layout
Version:
Simple layouts for full screen React applications
1 lines • 19.2 kB
JavaScript
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("react-dom"));else if("function"==typeof define&&define.amd)define(["react","react-dom"],t);else{var i="object"==typeof exports?t(require("react"),require("react-dom")):t(e.React,e.ReactDOM);for(var n in i)("object"==typeof exports?exports:e)[n]=i[n]}}(this,function(e,t){return function(e){function t(n){if(i[n])return i[n].exports;var o=i[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){e.exports=i(1)},function(e,t,i){"use strict";e.exports={LayoutSplitter:i(2),Layout:i(10)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a=function(e,t,i){for(var n=!0;n;){var o=e,r=t,s=i;n=!1,null===o&&(o=Function.prototype);var a=Object.getOwnPropertyDescriptor(o,r);if(void 0!==a){if("value"in a)return a.value;var u=a.get;if(void 0===u)return;return u.call(s)}var l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=r,i=s,n=!0,a=l=void 0}},u=i(3),l=n(u),h=i(4),p=n(h);i(6);var c=function(e){function t(e){o(this,t),a(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.document=e.document||document,this.state={active:!1},this.handleMouseUp=this.handleMouseUp.bind(this),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleMouseDown=this.handleMouseDown.bind(this)}return r(t,e),s(t,[{key:"componentDidMount",value:function(){this.document.addEventListener("mouseup",this.handleMouseUp),this.document.addEventListener("mousemove",this.handleMouseMove)}},{key:"componentWillUnmount",value:function(){this.document.removeEventListener("mouseup",this.handleMouseUp),this.document.removeEventListener("mousemove",this.handleMouseMove)}},{key:"handleMouseMove",value:function(e){if(this.state.active){var t="horizontal"===this.props.orientation?e.clientX:e.clientY;this.state.newPositionHandler(t),p.default.emit("layout-changed")}}},{key:"handleMouseUp",value:function(){var e=this;this.state.active&&this.setState({active:!1},function(){e.props.restoreSelection(),e.props.onResizeComplete&&e.props.onResizeComplete()})}},{key:"markEventAsHandled",value:function(e){e.preventDefault?e.preventDefault():e.returnValue=!1}},{key:"handleMouseDown",value:function(e){var t=this,i="horizontal"===this.props.orientation?e.clientX:e.clientY,n="horizontal"===this.props.orientation?"layoutWidth":"layoutHeight",o="horizontal"===this.props.orientation?"minWidth":"minHeight",r="horizontal"===this.props.orientation?"setWidth":"setHeight",s="horizontal"===this.props.orientation?"getWidth":"getHeight",a=this.props.getPreviousLayout(),u=this.props.getNextLayout();a&&u&&!function(){var l="flex"===a.props[n],h="flex"===u.props[n];if(l&&h)throw new Error("You cannot place a LayoutSplitter between two flex Layouts");var p=a[s]()+u[s](),c=a.props[o],f=u.props[o],d=p-f,v=p-c;t.markEventAsHandled(e);var y=void 0;l?!function(){var e=u.state[n];y=function(t){var n=i-t,o=e+n;o=Math.max(f,Math.min(o,v)),u[r](o)}}():h?!function(){var e=a.state[n];y=function(t){var n=t-i,o=e+n;o=Math.max(c,Math.min(o,d)),a[r](o)}}():!function(){var e=a.state[n];y=function(t){var n=t-i,o=Math.max(c,Math.min(e+n,d)),s=p-o;a[r](o),u[r](s)}}(),t.setState({active:!0,newPositionHandler:y},function(){t.props.onResizing&&t.props.onResizing()})}()}},{key:"render",value:function(){var e=["LayoutSplitter",this.props.orientation],i={width:"horizontal"===this.props.orientation?t.defaultSize:this.props.containerWidth,height:"vertical"===this.props.orientation?t.defaultSize:this.props.containerHeight};return l.default.createElement("div",{className:e.join(" "),style:i,onMouseDown:this.handleMouseDown})}}]),t}(l.default.Component);t.default=c,c.propTypes={orientation:l.default.PropTypes.string,getPreviousLayout:l.default.PropTypes.func,getNextLayout:l.default.PropTypes.func,onResizing:l.default.PropTypes.func,onResizeComplete:l.default.PropTypes.func},c.defaultSize=11,e.exports=t.default},function(t,i){t.exports=e},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=i(5),r=n(o),s=new r.default.EventEmitter;t.default=s,e.exports=t.default},function(e,t){function i(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function n(e){return"function"==typeof e}function o(e){return"number"==typeof e}function r(e){return"object"==typeof e&&null!==e}function s(e){return void 0===e}e.exports=i,i.EventEmitter=i,i.prototype._events=void 0,i.prototype._maxListeners=void 0,i.defaultMaxListeners=10,i.prototype.setMaxListeners=function(e){if(!o(e)||e<0||isNaN(e))throw TypeError("n must be a positive number");return this._maxListeners=e,this},i.prototype.emit=function(e){var t,i,o,a,u,l;if(this._events||(this._events={}),"error"===e&&(!this._events.error||r(this._events.error)&&!this._events.error.length)){if(t=arguments[1],t instanceof Error)throw t;var h=new Error('Uncaught, unspecified "error" event. ('+t+")");throw h.context=t,h}if(i=this._events[e],s(i))return!1;if(n(i))switch(arguments.length){case 1:i.call(this);break;case 2:i.call(this,arguments[1]);break;case 3:i.call(this,arguments[1],arguments[2]);break;default:a=Array.prototype.slice.call(arguments,1),i.apply(this,a)}else if(r(i))for(a=Array.prototype.slice.call(arguments,1),l=i.slice(),o=l.length,u=0;u<o;u++)l[u].apply(this,a);return!0},i.prototype.addListener=function(e,t){var o;if(!n(t))throw TypeError("listener must be a function");return this._events||(this._events={}),this._events.newListener&&this.emit("newListener",e,n(t.listener)?t.listener:t),this._events[e]?r(this._events[e])?this._events[e].push(t):this._events[e]=[this._events[e],t]:this._events[e]=t,r(this._events[e])&&!this._events[e].warned&&(o=s(this._maxListeners)?i.defaultMaxListeners:this._maxListeners,o&&o>0&&this._events[e].length>o&&(this._events[e].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[e].length),"function"==typeof console.trace&&console.trace())),this},i.prototype.on=i.prototype.addListener,i.prototype.once=function(e,t){function i(){this.removeListener(e,i),o||(o=!0,t.apply(this,arguments))}if(!n(t))throw TypeError("listener must be a function");var o=!1;return i.listener=t,this.on(e,i),this},i.prototype.removeListener=function(e,t){var i,o,s,a;if(!n(t))throw TypeError("listener must be a function");if(!this._events||!this._events[e])return this;if(i=this._events[e],s=i.length,o=-1,i===t||n(i.listener)&&i.listener===t)delete this._events[e],this._events.removeListener&&this.emit("removeListener",e,t);else if(r(i)){for(a=s;a-- >0;)if(i[a]===t||i[a].listener&&i[a].listener===t){o=a;break}if(o<0)return this;1===i.length?(i.length=0,delete this._events[e]):i.splice(o,1),this._events.removeListener&&this.emit("removeListener",e,t)}return this},i.prototype.removeAllListeners=function(e){var t,i;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[e]&&delete this._events[e],this;if(0===arguments.length){for(t in this._events)"removeListener"!==t&&this.removeAllListeners(t);return this.removeAllListeners("removeListener"),this._events={},this}if(i=this._events[e],n(i))this.removeListener(e,i);else if(i)for(;i.length;)this.removeListener(e,i[i.length-1]);return delete this._events[e],this},i.prototype.listeners=function(e){var t;return t=this._events&&this._events[e]?n(this._events[e])?[this._events[e]]:this._events[e].slice():[]},i.prototype.listenerCount=function(e){if(this._events){var t=this._events[e];if(n(t))return 1;if(t)return t.length}return 0},i.listenerCount=function(e,t){return e.listenerCount(t)}},function(e,t,i){var n=i(7);"string"==typeof n&&(n=[[e.id,n,""]]);i(9)(n,{});n.locals&&(e.exports=n.locals)},function(e,t,i){t=e.exports=i(8)(),t.push([e.id,".LayoutSplitter{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;opacity:.2;z-index:1;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box}.LayoutSplitter:after,.LayoutSplitter:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.LayoutSplitter:hover{-webkit-transition:all 2s ease;transition:all 2s ease}.LayoutSplitter.vertical{border-top:5px solid rgba(255,255,255,0);border-bottom:5px solid rgba(255,255,255,0);cursor:row-resize;width:100%}.LayoutSplitter.vertical:hover{border-top:5px solid rgba(0,0,0,.5);border-bottom:5px solid rgba(0,0,0,.5)}.LayoutSplitter.horizontal{border-left:5px solid rgba(255,255,255,0);border-right:5px solid rgba(255,255,255,0);cursor:col-resize;height:100%;float:left}.LayoutSplitter.horizontal:hover{border-left:5px solid rgba(0,0,0,.5);border-right:5px solid rgba(0,0,0,.5)}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var i=this[t];i[2]?e.push("@media "+i[2]+"{"+i[1]+"}"):e.push(i[1])}return e.join("")},e.i=function(t,i){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},o=0;o<this.length;o++){var r=this[o][0];"number"==typeof r&&(n[r]=!0)}for(o=0;o<t.length;o++){var s=t[o];"number"==typeof s[0]&&n[s[0]]||(i&&!s[2]?s[2]=i:i&&(s[2]="("+s[2]+") and ("+i+")"),e.push(s))}},e}},function(e,t,i){function n(e,t){for(var i=0;i<e.length;i++){var n=e[i],o=p[n.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](n.parts[r]);for(;r<n.parts.length;r++)o.parts.push(a(n.parts[r],t))}else{for(var s=[],r=0;r<n.parts.length;r++)s.push(a(n.parts[r],t));p[n.id]={id:n.id,refs:1,parts:s}}}}function o(e){for(var t=[],i={},n=0;n<e.length;n++){var o=e[n],r=o[0],s=o[1],a=o[2],u=o[3],l={css:s,media:a,sourceMap:u};i[r]?i[r].parts.push(l):t.push(i[r]={id:r,parts:[l]})}return t}function r(){var e=document.createElement("style"),t=d();return e.type="text/css",t.appendChild(e),e}function s(){var e=document.createElement("link"),t=d();return e.rel="stylesheet",t.appendChild(e),e}function a(e,t){var i,n,o;if(t.singleton){var a=y++;i=v||(v=r()),n=u.bind(null,i,a,!1),o=u.bind(null,i,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=s(),n=h.bind(null,i),o=function(){i.parentNode.removeChild(i),i.href&&URL.revokeObjectURL(i.href)}):(i=r(),n=l.bind(null,i),o=function(){i.parentNode.removeChild(i)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}function u(e,t,i,n){var o=i?"":n.css;if(e.styleSheet)e.styleSheet.cssText=m(t,o);else{var r=document.createTextNode(o),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(r,s[t]):e.appendChild(r)}}function l(e,t){var i=t.css,n=t.media;t.sourceMap;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}function h(e,t){var i=t.css,n=(t.media,t.sourceMap);n&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var o=new Blob([i],{type:"text/css"}),r=e.href;e.href=URL.createObjectURL(o),r&&URL.revokeObjectURL(r)}var p={},c=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},f=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),d=c(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,y=0;e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=f());var i=o(e);return n(i,t),function(e){for(var r=[],s=0;s<i.length;s++){var a=i[s],u=p[a.id];u.refs--,r.push(u)}if(e){var l=o(e);n(l,t)}for(var s=0;s<r.length;s++){var u=r[s];if(0===u.refs){for(var h=0;h<u.parts.length;h++)u.parts[h]();delete p[u.id]}}}};var m=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a=function(e,t,i){for(var n=!0;n;){var o=e,r=t,s=i;n=!1,null===o&&(o=Function.prototype);var a=Object.getOwnPropertyDescriptor(o,r);if(void 0!==a){if("value"in a)return a.value;var u=a.get;if(void 0===u)return;return u.call(s)}var l=Object.getPrototypeOf(o);if(null===l)return;e=l,t=r,i=s,n=!0,a=l=void 0}},u=i(3),l=n(u),h=i(11),p=n(h),c=i(2),f=n(c),d=i(4),v=n(d),y=function(e){function t(e){if(o(this,t),a(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e),this.state={hideSelection:!1},"flex"!==e.layoutWidth){if(e.layoutWidth&&!this.isNumber(e.layoutWidth))throw new Error("layoutWidth should be a number or flex");this.state.layoutWidth=e.layoutWidth}if("flex"!==e.layoutHeight){if(e.layoutHeight&&!this.isNumber(e.layoutHeight))throw new Error("layoutHeight should be a number or flex");this.state.layoutHeight=e.layoutHeight}this.handleResize=this.handleResize.bind(this)}return r(t,e),s(t,[{key:"componentDidMount",value:function(){window.addEventListener("resize",this.handleResize),v.default.addListener("layout-changed",this.handleResize),this.handleResize()}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.handleResize),v.default.removeListener("layout-changed",this.handleResize)}},{key:"handleResize",value:function(){var e=this.state.layoutWidth,t=this.state.layoutHeight;if("window"===this.props.fill&&window)e=window.innerWidth,t=window.innerHeight;else if(!this.props.layoutWidth&&!this.props.layoutHeight){var i=p.default.findDOMNode(this);t=i.parentElement.clientHeight,e=i.parentElement.clientWidth}this.state.layoutWidth===e&&this.state.layoutHeight===t||(this.state.layoutWidth=e,this.state.layoutHeight=t,this.setState(this.state))}},{key:"getWidth",value:function(){return p.default.findDOMNode(this).offsetWidth}},{key:"setWidth",value:function(e){this.state.layoutWidth=e,this.setState(this.state),this.props.layoutChanged&&this.props.layoutChanged()}},{key:"getHeight",value:function(){return p.default.findDOMNode(this).offsetHeight}},{key:"setHeight",value:function(e){this.state.layoutHeight=e,this.setState(this.state),this.props.layoutChanged&&this.props.layoutChanged()}},{key:"childLayoutChanged",value:function(){this.setState(this.state)}},{key:"recalculateFlexLayout",value:function(){var e=this,i={};if(this.props.children){var n,o;!function(){var r=0,s=0,a=0,u=0,h=0,p=0;if(l.default.Children.map(e.props.children,function(i){var n=i.type;if(n===t&&!i.props.layoutWidth&&!i.props.layoutHeight)throw new Error("Child Layouts must have either layoutWidth or layoutHeight set");if(n===f.default)h++;else if(n===t){var o=e.refs["layout"+p];"flex"===i.props.layoutWidth?r++:!o&&e.isNumber(i.props.layoutWidth)?s+=i.props.layoutWidth:o&&e.isNumber(o.state.layoutWidth)&&(s+=o.state.layoutWidth),"flex"===i.props.layoutHeight?a++:!o&&e.isNumber(i.props.layoutHeight)?u+=i.props.layoutHeight:o&&e.isNumber(o.state.layoutHeight)&&(u+=o.state.layoutHeight)}p++}),a>0&&r>0)throw new Error("Cannot have layout children with both flex widths and heights");r>0?(n=e.state.layoutWidth||e.props.containerWidth,s+=h*f.default.defaultSize,i.width=(n-s)/r):a>0&&(o=e.state.layoutHeight||e.props.containerHeight,u+=h*f.default.defaultSize,i.height=(o-u)/a);var c=r>0||s>0,d=a>0||u>0;if(c&&d)throw new Error("You can only specify layoutHeight or layoutWidth at a single level");c?i.orientation="horizontal":d&&(i.orientation="vertical")}()}return i}},{key:"render",value:function(){var e=this,i="flex"===this.props.layoutWidth?this.props.calculatedFlexWidth:this.state.layoutWidth||this.props.containerWidth,n="flex"===this.props.layoutHeight?this.props.calculatedFlexHeight:this.state.layoutHeight||this.props.containerHeight;if(!i||!n)return l.default.createElement("div",null);var o=-1,r=this.recalculateFlexLayout(),s=l.default.Children.map(this.props.children,function(s){if(o++,s.type===t){var a={layoutChanged:e.childLayoutChanged.bind(e),calculatedFlexWidth:r.width,calculatedFlexHeight:r.height,containerHeight:n,containerWidth:i,ref:"layout"+o};if("horizontal"===r.orientation){var u=s.props.style||{};u.float="left",a.style=u}var h=l.default.cloneElement(s,a);return h}if(s.type===f.default){var a={layoutChanged:e.childLayoutChanged.bind(e),orientation:r.orientation,containerHeight:n,containerWidth:i,ref:"layout"+o,hideSelection:function(){e.setState({hideSelection:!0})},restoreSelection:function(){e.clearSelection(),e.setState({hideSelection:!1})},getPreviousLayout:function(){var t=e.props.children.indexOf(s);return e.refs["layout"+(t-1)]},getNextLayout:function(){var t=e.props.children.indexOf(s);return e.refs["layout"+(t+1)]}},h=l.default.cloneElement(s,a);return h}return s}),a=null;this.props.className&&(a=this.props.className),this.state.hideSelection&&(a&&(a+=" "),a+="hideSelection");var u=Object.assign({},this.props.style,{overflow:"auto",width:i,height:n},"window"===this.props.fill?{position:"absolute",top:0,left:0}:{});return l.default.createElement("div",{style:u,className:a},s)}},{key:"isNumber",value:function(e){return"number"==typeof e}},{key:"clearSelection",value:function(){window.getSelection?window.getSelection().empty?window.getSelection().empty():window.getSelection().removeAllRanges&&window.getSelection().removeAllRanges():document.selection&&document.selection.empty()}}]),t}(l.default.Component);t.default=y,y.propTypes={hideSelection:l.default.PropTypes.bool,minWidth:l.default.PropTypes.number,minHeight:l.default.PropTypes.number,onResize:l.default.PropTypes.func},y.defaultProps={minWidth:50,minHeight:50},e.exports=t.default},function(e,i){e.exports=t}])});