UNPKG

react-columns

Version:

React component for rendering columns from a list of children with horizontal ordering

6 lines 5.18 kB
/*! * react-columns v1.2.1 - http://novascreen.github.io/react-columns/ * MIT Licensed */ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactColumns=t(require("react")):e.ReactColumns=t(e.React)}(window,function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)},function(e,t,n){"use strict";n.r(t);var o=n(0),r=n.n(o),u={};function i(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.queries,n=void 0===t?[]:t,o=e.valueKey,r=void 0===o?"value":o,i=e.defaultValue,s=void 0===i?"":i,l=e.onChange,c=void 0===l?function(){}:l,a=n.map(function(e){return function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.query,n=void 0===t?"":t,o=e.full,r=void 0!==o&&o,i=e.onChange,s=void 0===i?function(){}:i,l={query:n,full:r,queryMatches:!1,_mq:null};if(!n)return l;function c(e){l.queryMatches=e.matches,s(l.queryMatches)}return l.query=r||")"===n[n.length-1]?n:"("+n+")",u[l.query]||(u[l.query]=window.matchMedia(l.query)),l._mq=u[l.query],l.queryMatches=l._mq.matches,l.removeListener=function(){l._mq.removeListener(c)},l._mq.addListener(c),l}({query:e.query,full:e.full,onChange:p})});function f(){var e=s;return a.forEach(function(t,o){t.queryMatches&&(e=n[o][r])}),e}function p(e){c(f())}return{getValue:f,removeListeners:function(){a.forEach(function(e,t){e.removeListener()})}}}var s=function(e){function t(n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,e.call(this,n));return o.setColumns=o.setColumns.bind(o),o.state={},o}return function(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)}(t,e),t.prototype.componentDidMount=function(){this.updateColumns(this.props)},t.prototype.componentWillReceiveProps=function(e){var t=this.props.queries!==e.queries,n=this.props.columns!==e.columns;(t||n)&&this.updateColumns(e)},t.prototype.componentWillUnmount=function(){this.removeColumnListeners()},t.prototype.updateColumns=function(e){e.queries.length&&(this.removeColumnListeners(),this._columns=i({queries:e.queries,valueKey:"columns",defaultValue:e.queries.length?1:e.columns,onChange:this.setColumns}),this.setColumns())},t.prototype.setColumns=function(){var e=this;this.setState(function(){return{columns:e._columns.getValue()}})},t.prototype.removeColumnListeners=function(){this._columns&&this._columns.removeListeners()},t.prototype.renderColumns=function(e){var t=this.props,n=t.children,o=t.dimensions,u=t.gap,i={boxSizing:"border-box",float:"left",width:1/e*100+"%",paddingLeft:u,paddingRight:u},s=n;e>1&&(s=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.children,n=void 0===t?[]:t,o=e.columns,r=void 0===o?1:o,u=e.dimensions,i=void 0===u?[]:u,s=[],l=[];if(1===r)return n;if(i.length&&i.length===n.length){for(var c=0;c<r;c++)s[c]=[],l[c]=0;n.forEach(function(e,t){var n=i[t],o=n.width,r=n.height,u=l.indexOf(Math.min.apply(Math,l));s[u].push(e),l[u]+=r/o})}else for(var a=function(e){s[e]=n.filter(function(t,n){return n%r===e})},f=0;f<r;f++)a(f);return s}({children:n,columns:e,dimensions:o}).map(function(e,t){return r.a.createElement("div",{key:t,style:i},e)}));return s},t.prototype.render=function(){var e=this.props,t=e.className,n=e.gap,o=e.rootStyles,u=this.state.columns,i=void 0===u?this.props.columns:u,s=1===i?{}:{marginLeft:"calc("+n+" * -1)",marginRight:"calc("+n+" * -1)"};return r.a.createElement("div",{className:t,style:o},r.a.createElement("div",{style:s},this.renderColumns(i),r.a.createElement("div",{style:{clear:"both"}})))},t}(o.Component);s.defaultProps={className:"",rootStyles:{overflowX:"hidden"},queries:[],columns:3,gap:"0px"};t.default=s}]).default}); //# sourceMappingURL=react-columns.min.js.map