From 7aaeaa35a2fc82ca603632909edcb01852f4a992 Mon Sep 17 00:00:00 2001 From: Oskar Augustyn <5261873+donoskaro@users.noreply.github.com> Date: Mon, 3 May 2021 14:23:50 +0100 Subject: [PATCH 1/2] feat: Added option to allow the use of the element width for determining responsive layouts. --- demo/demo.built.js | 23 ++++++++++++++++------- dist/react-masonry-css.cjs.js | 15 ++++++++++----- dist/react-masonry-css.module.js | 15 ++++++++++----- dist/react-masonry-css.umd.js | 15 ++++++++++----- index.d.ts | 1 + src/react-masonry-css.js | 14 ++++++++++++-- 6 files changed, 59 insertions(+), 24 deletions(-) diff --git a/demo/demo.built.js b/demo/demo.built.js index 5e58438..73cfc45 100644 --- a/demo/demo.built.js +++ b/demo/demo.built.js @@ -8520,9 +8520,13 @@ if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); - if (enumerableOnly) symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable; - }); + + if (enumerableOnly) { + symbols = symbols.filter(function (sym) { + return Object.getOwnPropertyDescriptor(object, sym).enumerable; + }); + } + keys.push.apply(keys, symbols); } @@ -8578,6 +8582,8 @@ // ...any other attribute, will be added to the container columnAttrs: undefined, // object, added to the columns + // Whether to use the element width for responsiveness calculations. + elementResponsive: false, // Deprecated props // The column property is deprecated. // It is an alias of the `columnAttrs` property @@ -8590,7 +8596,9 @@ super(props); // Correct scope for when methods are accessed externally this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this); - this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // default state + this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // Refs + + this.elementRef = React__default['default'].createRef(); // default state let columnCount; @@ -8641,7 +8649,7 @@ } reCalculateColumnCount() { - const windowWidth = window && window.innerWidth || Infinity; + const width = this.props.elementResponsive ? this.elementRef.current.offsetWidth : window && window.innerWidth || Infinity; let breakpointColsObject = this.props.breakpointCols; // Allow passing a single number to `breakpointCols` instead of an object if (typeof breakpointColsObject !== 'object') { @@ -8655,7 +8663,7 @@ for (let breakpoint in breakpointColsObject) { const optBreakpoint = parseInt(breakpoint); - const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint; + const isCurrentBreakpoint = optBreakpoint > 0 && width <= optBreakpoint; if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) { matchedBreakpoint = optBreakpoint; @@ -8752,7 +8760,8 @@ } return /*#__PURE__*/React__default['default'].createElement("div", _extends({}, rest, { - className: classNameOutput + className: classNameOutput, + ref: this.elementRef }), this.renderColumns()); } diff --git a/dist/react-masonry-css.cjs.js b/dist/react-masonry-css.cjs.js index f006e1d..7e4de22 100644 --- a/dist/react-masonry-css.cjs.js +++ b/dist/react-masonry-css.cjs.js @@ -12,7 +12,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } @@ -31,6 +31,8 @@ const defaultProps = { // ...any other attribute, will be added to the container columnAttrs: undefined, // object, added to the columns + // Whether to use the element width for responsiveness calculations. + elementResponsive: false, // Deprecated props // The column property is deprecated. // It is an alias of the `columnAttrs` property @@ -43,7 +45,9 @@ class Masonry extends React__default['default'].Component { super(props); // Correct scope for when methods are accessed externally this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this); - this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // default state + this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // Refs + + this.elementRef = React__default['default'].createRef(); // default state let columnCount; @@ -94,7 +98,7 @@ class Masonry extends React__default['default'].Component { } reCalculateColumnCount() { - const windowWidth = window && window.innerWidth || Infinity; + const width = this.props.elementResponsive ? this.elementRef.current.offsetWidth : window && window.innerWidth || Infinity; let breakpointColsObject = this.props.breakpointCols; // Allow passing a single number to `breakpointCols` instead of an object if (typeof breakpointColsObject !== 'object') { @@ -108,7 +112,7 @@ class Masonry extends React__default['default'].Component { for (let breakpoint in breakpointColsObject) { const optBreakpoint = parseInt(breakpoint); - const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint; + const isCurrentBreakpoint = optBreakpoint > 0 && width <= optBreakpoint; if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) { matchedBreakpoint = optBreakpoint; @@ -205,7 +209,8 @@ class Masonry extends React__default['default'].Component { } return /*#__PURE__*/React__default['default'].createElement("div", _extends({}, rest, { - className: classNameOutput + className: classNameOutput, + ref: this.elementRef }), this.renderColumns()); } diff --git a/dist/react-masonry-css.module.js b/dist/react-masonry-css.module.js index e701a9a..f17277e 100644 --- a/dist/react-masonry-css.module.js +++ b/dist/react-masonry-css.module.js @@ -6,7 +6,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } @@ -25,6 +25,8 @@ const defaultProps = { // ...any other attribute, will be added to the container columnAttrs: undefined, // object, added to the columns + // Whether to use the element width for responsiveness calculations. + elementResponsive: false, // Deprecated props // The column property is deprecated. // It is an alias of the `columnAttrs` property @@ -37,7 +39,9 @@ class Masonry extends React.Component { super(props); // Correct scope for when methods are accessed externally this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this); - this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // default state + this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // Refs + + this.elementRef = React.createRef(); // default state let columnCount; @@ -88,7 +92,7 @@ class Masonry extends React.Component { } reCalculateColumnCount() { - const windowWidth = window && window.innerWidth || Infinity; + const width = this.props.elementResponsive ? this.elementRef.current.offsetWidth : window && window.innerWidth || Infinity; let breakpointColsObject = this.props.breakpointCols; // Allow passing a single number to `breakpointCols` instead of an object if (typeof breakpointColsObject !== 'object') { @@ -102,7 +106,7 @@ class Masonry extends React.Component { for (let breakpoint in breakpointColsObject) { const optBreakpoint = parseInt(breakpoint); - const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint; + const isCurrentBreakpoint = optBreakpoint > 0 && width <= optBreakpoint; if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) { matchedBreakpoint = optBreakpoint; @@ -199,7 +203,8 @@ class Masonry extends React.Component { } return /*#__PURE__*/React.createElement("div", _extends({}, rest, { - className: classNameOutput + className: classNameOutput, + ref: this.elementRef }), this.renderColumns()); } diff --git a/dist/react-masonry-css.umd.js b/dist/react-masonry-css.umd.js index 88f3300..d76f54b 100644 --- a/dist/react-masonry-css.umd.js +++ b/dist/react-masonry-css.umd.js @@ -14,7 +14,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } - function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } @@ -33,6 +33,8 @@ // ...any other attribute, will be added to the container columnAttrs: undefined, // object, added to the columns + // Whether to use the element width for responsiveness calculations. + elementResponsive: false, // Deprecated props // The column property is deprecated. // It is an alias of the `columnAttrs` property @@ -45,7 +47,9 @@ super(props); // Correct scope for when methods are accessed externally this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this); - this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // default state + this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); // Refs + + this.elementRef = React__default['default'].createRef(); // default state let columnCount; @@ -96,7 +100,7 @@ } reCalculateColumnCount() { - const windowWidth = window && window.innerWidth || Infinity; + const width = this.props.elementResponsive ? this.elementRef.current.offsetWidth : window && window.innerWidth || Infinity; let breakpointColsObject = this.props.breakpointCols; // Allow passing a single number to `breakpointCols` instead of an object if (typeof breakpointColsObject !== 'object') { @@ -110,7 +114,7 @@ for (let breakpoint in breakpointColsObject) { const optBreakpoint = parseInt(breakpoint); - const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint; + const isCurrentBreakpoint = optBreakpoint > 0 && width <= optBreakpoint; if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) { matchedBreakpoint = optBreakpoint; @@ -207,7 +211,8 @@ } return /*#__PURE__*/React__default['default'].createElement("div", _extends({}, rest, { - className: classNameOutput + className: classNameOutput, + ref: this.elementRef }), this.renderColumns()); } diff --git a/index.d.ts b/index.d.ts index 7782d71..d3f23a0 100644 --- a/index.d.ts +++ b/index.d.ts @@ -4,6 +4,7 @@ export interface MasonryProps { breakpointCols?: number | { default: number, [key: number]: number } | { [key: number]: number }; columnClassName?: string; className: string; + elementResponsive?: boolean; } export default class Masonry extends React.Component, any> { diff --git a/src/react-masonry-css.js b/src/react-masonry-css.js index bf445f5..bab120a 100644 --- a/src/react-masonry-css.js +++ b/src/react-masonry-css.js @@ -13,6 +13,9 @@ const defaultProps = { // ...any other attribute, will be added to the container columnAttrs: undefined, // object, added to the columns + // Whether to use the element width for responsiveness calculations. + elementResponsive: false, + // Deprecated props // The column property is deprecated. // It is an alias of the `columnAttrs` property @@ -29,6 +32,9 @@ class Masonry extends React.Component { this.reCalculateColumnCount = this.reCalculateColumnCount.bind(this); this.reCalculateColumnCountDebounce = this.reCalculateColumnCountDebounce.bind(this); + // Refs + this.elementRef = React.createRef(); + // default state let columnCount if (this.props.breakpointCols && this.props.breakpointCols.default) { @@ -77,7 +83,10 @@ class Masonry extends React.Component { } reCalculateColumnCount() { - const windowWidth = window && window.innerWidth || Infinity; + const width = this.props.elementResponsive + ? this.elementRef.current.offsetWidth + : (window && window.innerWidth || Infinity); + let breakpointColsObject = this.props.breakpointCols; // Allow passing a single number to `breakpointCols` instead of an object @@ -92,7 +101,7 @@ class Masonry extends React.Component { for(let breakpoint in breakpointColsObject) { const optBreakpoint = parseInt(breakpoint); - const isCurrentBreakpoint = optBreakpoint > 0 && windowWidth <= optBreakpoint; + const isCurrentBreakpoint = optBreakpoint > 0 && width <= optBreakpoint; if(isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) { matchedBreakpoint = optBreakpoint; @@ -201,6 +210,7 @@ class Masonry extends React.Component {
{this.renderColumns()}
From 4696abbdac4f0e589cdd5ee6c5d8ca05e3f68a1c Mon Sep 17 00:00:00 2001 From: Oskar Augustyn <5261873+donoskaro@users.noreply.github.com> Date: Mon, 3 May 2021 14:47:20 +0100 Subject: [PATCH 2/2] fix: Added to list of ignored props. --- demo/demo.built.js | 3 ++- dist/react-masonry-css.cjs.js | 3 ++- dist/react-masonry-css.module.js | 3 ++- dist/react-masonry-css.umd.js | 3 ++- src/react-masonry-css.js | 1 + 5 files changed, 9 insertions(+), 4 deletions(-) diff --git a/demo/demo.built.js b/demo/demo.built.js index 73cfc45..b94b3ad 100644 --- a/demo/demo.built.js +++ b/demo/demo.built.js @@ -8744,10 +8744,11 @@ columnClassName, columnAttrs, column, + elementResponsive, // used className } = _this$props, - rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "className"]); + rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "elementResponsive", "className"]); let classNameOutput = className; diff --git a/dist/react-masonry-css.cjs.js b/dist/react-masonry-css.cjs.js index 7e4de22..90ad1c6 100644 --- a/dist/react-masonry-css.cjs.js +++ b/dist/react-masonry-css.cjs.js @@ -193,10 +193,11 @@ class Masonry extends React__default['default'].Component { columnClassName, columnAttrs, column, + elementResponsive, // used className } = _this$props, - rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "className"]); + rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "elementResponsive", "className"]); let classNameOutput = className; diff --git a/dist/react-masonry-css.module.js b/dist/react-masonry-css.module.js index f17277e..4a7a285 100644 --- a/dist/react-masonry-css.module.js +++ b/dist/react-masonry-css.module.js @@ -187,10 +187,11 @@ class Masonry extends React.Component { columnClassName, columnAttrs, column, + elementResponsive, // used className } = _this$props, - rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "className"]); + rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "elementResponsive", "className"]); let classNameOutput = className; diff --git a/dist/react-masonry-css.umd.js b/dist/react-masonry-css.umd.js index d76f54b..1be66bd 100644 --- a/dist/react-masonry-css.umd.js +++ b/dist/react-masonry-css.umd.js @@ -195,10 +195,11 @@ columnClassName, columnAttrs, column, + elementResponsive, // used className } = _this$props, - rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "className"]); + rest = _objectWithoutProperties(_this$props, ["children", "breakpointCols", "columnClassName", "columnAttrs", "column", "elementResponsive", "className"]); let classNameOutput = className; diff --git a/src/react-masonry-css.js b/src/react-masonry-css.js index bab120a..384525d 100644 --- a/src/react-masonry-css.js +++ b/src/react-masonry-css.js @@ -188,6 +188,7 @@ class Masonry extends React.Component { columnClassName, columnAttrs, column, + elementResponsive, // used className,