Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add option for responsiveness based on element width #74

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add option for responsiveness based on element width #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7aaeaa3
feat: Added option to allow the use of the element width for determin…
donoskaro May 3, 2021
4696abb
fix: Added to list of ignored props.
donoskaro May 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions demo/demo.built.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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
Expand All @@ -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;

Expand Down Expand Up @@ -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') {
Expand All @@ -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;
Expand Down Expand Up @@ -8736,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;

Expand All @@ -8752,7 +8761,8 @@
}

return /*#__PURE__*/React__default['default'].createElement("div", _extends({}, rest, {
className: classNameOutput
className: classNameOutput,
ref: this.elementRef
}), this.renderColumns());
}

Expand Down
18 changes: 12 additions & 6 deletions dist/react-masonry-css.cjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand All @@ -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
Expand All @@ -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;

Expand Down Expand Up @@ -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') {
Expand All @@ -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;
Expand Down Expand Up @@ -189,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;

Expand All @@ -205,7 +210,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());
}

Expand Down
18 changes: 12 additions & 6 deletions dist/react-masonry-css.module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand All @@ -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
Expand All @@ -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;

Expand Down Expand Up @@ -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') {
Expand All @@ -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;
Expand Down Expand Up @@ -183,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;

Expand All @@ -199,7 +204,8 @@ class Masonry extends React.Component {
}

return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
className: classNameOutput
className: classNameOutput,
ref: this.elementRef
}), this.renderColumns());
}

Expand Down
18 changes: 12 additions & 6 deletions dist/react-masonry-css.umd.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

Expand All @@ -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
Expand All @@ -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;

Expand Down Expand Up @@ -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') {
Expand All @@ -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;
Expand Down Expand Up @@ -191,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;

Expand All @@ -207,7 +212,8 @@
}

return /*#__PURE__*/React__default['default'].createElement("div", _extends({}, rest, {
className: classNameOutput
className: classNameOutput,
ref: this.elementRef
}), this.renderColumns());
}

Expand Down
1 change: 1 addition & 0 deletions index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<MasonryProps & React.HTMLProps<HTMLElement>, any> {
Expand Down
15 changes: 13 additions & 2 deletions src/react-masonry-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -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
Expand All @@ -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;
Expand Down Expand Up @@ -179,6 +188,7 @@ class Masonry extends React.Component {
columnClassName,
columnAttrs,
column,
elementResponsive,

// used
className,
Expand All @@ -201,6 +211,7 @@ class Masonry extends React.Component {
<div
{...rest}
className={classNameOutput}
ref={this.elementRef}
>
{this.renderColumns()}
</div>
Expand Down