profile
viewpoint

issue closedSTRML/react-grid-layout

Make grid items not resize to width/height smaller than children

Starting from the example code no.11 from here I replace line 29 from:

<span className="text">{i}</span>

to:

<h1 className="text">{i}</h1>
<h1 className="text">{i}</h1>
<h1 className="text">{i}</h1>
<h1 className="text">{i}</h1>

Now, when I resize an item to make it as small as possible (i.e. 1 row). The result looks something like this: image

How can I prevent the item from becoming smaller than the children element?

I tried using jquery with something like this (tried attaching it to onResize, onResizeStop, and even on the class react-grid-item):

$(".react-grid-item").height($(".react-grid-item>span>div").height()) or

$(".react-resizable-handle").click(function(){
	$(".react-grid-item").height($(".react-grid-item>span>div").height())
})

and other variants. The problem with this is that jQuery bugs with RGL and resizing does not always work properly (i.e. sometimes don't trigger the event).

closed time in 9 hours

KMouratidis

issue commentSTRML/react-grid-layout

drag from outside doesn't work in firefox

This is an old Firefox issue https://bugzilla.mozilla.org/show_bug.cgi?id=568313. We can fix it by adding ondragstart="event.dataTransfer.setData('text/plain', '')" in a tag with draggable attribute. But it works not properly in our case. I'll try to find out how to fix it

daynin

comment created time in 10 hours

pull request commentSTRML/react-grid-layout

Fix for the drag-from-outside example

@marnett-git I created an issue https://github.com/STRML/react-grid-layout/issues/1004 and I'll try to fix it

n1ghtmare

comment created time in 10 hours

issue openedSTRML/react-grid-layout

drag from outside doesn't work in firefox

this example doesn't https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html in firefox (version: 68.0.1 (64-bit))

created time in 10 hours

pull request commentSTRML/react-grid-layout

Fix for the drag-from-outside example

@VishalJadhaoCTS sorry, I don't know. Only @STRML can release new version

n1ghtmare

comment created time in 10 hours

pull request commentSTRML/react-grid-layout

Ability to store data on layout items

@oguzgelal thank you for your contribution! But can we solve this problem by storing data in some object like this:

const store = {
  'id1': { /* some data here */ },
  'id2: { /* some data here */ },
}

and getting the data by GridItem id?

oguzgelal

comment created time in 10 hours

pull request commentSTRML/react-grid-layout

Update doc about importing CSS with CRA #642

@n1ghtmare what do you think?

YannickLeRoux

comment created time in 10 hours

Pull request review commentSTRML/react-grid-layout

Update doc about importing CSS with CRA #642

 Include the following stylesheets in your application: /node_modules/react-grid-layout/css/styles.css /node_modules/react-resizable/css/styles.css ```+If using Create React App:++```+import 'react-grid-layout/css/styles.css' 

what the difference between:

Include the following stylesheets in your application:
'''
/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css
'''

and your addition for Create React App?

I think it's not about CRA at all, it's about webpack and importing .css files like modules. In my opinion, we can't describe all possible ways to include those files and it's not so necessary to specify it in documentation.

YannickLeRoux

comment created time in 10 hours

PR closed STRML/react-grid-layout

Added support for dragging from external sources

Adds support for dragging elements from external sources to support #842 As a showcase, the toolbox example has been updated to drag items back on the grid

Fixes the path to commons bundle same as #937

+193 -43

6 comments

21 changed files

artemsaveliev

pr closed time in 10 hours

pull request commentSTRML/react-grid-layout

Added support for dragging from external sources

@artemsaveliev sorry, I missed your PR and added it here https://github.com/STRML/react-grid-layout/pull/980

artemsaveliev

comment created time in 10 hours

issue commentSTRML/react-grid-layout

Cannot handle conditional children

@mzogheib you can fix it by filtering your items before rendering:

const items = [
  { text: 'This child is always present' },
 someCondition &&  { text: 'This child is conditionally present' }
].filter(Boolean)

<ResponsiveReactGridLayout>
  {items.map(item => <div>{item.text}</div>)}
</ResponsiveReactGridLayout>

But I think, we can try to fix it on the lib's side

mzogheib

comment created time in 11 hours

Pull request review commentSTRML/react-grid-layout

add setTimeout in onWindowResize for Issue #961

 export default function WidthProvider<       // eslint-disable-next-line       const node = ReactDOM.findDOMNode(this); // Flow casts this to Text | Element       if (node instanceof HTMLElement)-        this.setState({ width: node.offsetWidth });+        setTimeout(this.setState({ width: node.offsetWidth }), 0);

I think making setTimeout on each event loop tick is not a good solution. Unfortunately, this change will negatively affect performance

suhailnaw

comment created time in 11 hours

issue commentSTRML/react-grid-layout

Newly adding grid item always should pick the first fit position from the grid

@OshanAbeykoon let me know pls, if it helps you

OshanAbeykoon

comment created time in 11 hours

issue commentSTRML/react-grid-layout

Newly adding grid item always should pick the first fit position from the grid

@OshanAbeykoon hi! I think you can do it by using an external array with items so you can push a new item in any position

https://codesandbox.io/s/react-grid-layout-d9n8q

This example is super simple, but it shows the idea

OshanAbeykoon

comment created time in 11 hours

issue commentSTRML/react-grid-layout

Make grid items not resize to width/height smaller than children

@KMouratidis did the answers above help you?

KMouratidis

comment created time in 11 hours

issue commentSTRML/react-grid-layout

Auto-Height (or similar) Layout Items

@mperu92 did you find the answer?

mperu92

comment created time in 12 hours

issue closedSTRML/react-grid-layout

[Bug] put RGL into a scaled elements then click grid looks weird

feb-15-2017 18-47-57

if I removed the scale style from the parent element then it will be normal. any suggestion to solve the problem?

closed time in 16 hours

imlgm

issue closedSTRML/react-grid-layout

Transform Scale Messes Up Dragging

I'm trying to add zooming functionality to my react-grid-layout using css transform scale. The zooming works but the dragging functionality gets messed up and you need to drag a lot to move an element. You can test this by adding transform: scale(2); to your react-grid-layout component.

I'm trying to implement the solution found here: http://stackoverflow.com/questions/15467122/how-to-get-the-correct-mouse-position-in-relation-to-a-div-that-has-has-a-scale http://jsfiddle.net/YzLHc/1/

Any help on how I can implement this in the react-grid-layout onDrag callback would be appreciated.

_onDrag(layout, oldItem, newItem, placeholder, e, element){

}

closed time in 16 hours

turnerniles

PR merged STRML/react-grid-layout

feat: add transformScale enhancement

this adds support for parent DOM use transform scale fix issues: https://github.com/STRML/react-grid-layout/issues/484 https://github.com/STRML/react-grid-layout/issues/350

+22 -5

8 comments

3 changed files

xcqwan

pr closed time in 16 hours

push eventdaynin/case-212

Sergey Golovin

commit sha f3d019a7aa2219d5fd932d9c596b9a8b36e27a7c

create 6a833317-ac1c-4faa-81c2-e19d7c7ec5c1

view details

push time in 2 days

fork daynin/case-212

Открытое письмо специалистов IT-индустрии в защиту фигурантов «московского дела»

fork in 2 days

issue commentSTRML/react-grid-layout

Making an element static triggers strange layout behaviour

Perhaps this is somehow relates to https://github.com/STRML/react-grid-layout/issues/965

kakato10

comment created time in 2 days

issue closedSTRML/react-grid-layout

16-drag-outside

https://strml.github.io/react-grid-layout/examples/16-drag-outside.html the example is not present.

closed time in 2 days

Marius8881

issue commentSTRML/react-grid-layout

16-drag-outside

@Marius8881 now you can find the example here https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html. (But this feature is still unpublished)

Marius8881

comment created time in 2 days

pull request commentSTRML/react-grid-layout

feat: add transformScale

LGTM

@n1ghtmare what do you think?

xcqwan

comment created time in 2 days

pull request commentSTRML/react-grid-layout

Fix for the drag-from-outside example

@Zacele yes, it'll be available in the next version (which isn't released yet)

n1ghtmare

comment created time in 2 days

pull request commentSTRML/react-grid-layout

feat: add transformScale

@xcqwan thank you for changing, but I think we still need some replacements here:

// parent layout transform scale
// if parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has transform scale
// drag GridItem will get wrong position
// specify that key to fix it
transformScale: ?number = 1,

Let's write something like:

// If parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has "transform: scale(n)" css property,
// we should set scale coefficient to avoid render artefacts while dragging.
transformScale: ?number = 1,
xcqwan

comment created time in 2 days

issue commentSTRML/react-grid-layout

example 16 drag from outside 404 not found

@VishalJadhaoCTS now you can find the example here https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html

VishalJadhaoCTS

comment created time in 2 days

issue commentSTRML/react-grid-layout

example 16 drag from outside 404 not found

@n1ghtmare

Do we merge those changes there? yes, of course. I've done it. But we still need to publish new version in npm to allow users use new API. @STRML could you help use with it?

VishalJadhaoCTS

comment created time in 2 days

push eventSTRML/react-grid-layout

Leo Thorp

commit sha 3352c84515e587c2bb7ec7935e24be5705d33704

add missing demo links to README.md (#821) * add missing demo links to README.md * remove extra line

view details

Samuel Reed

commit sha c3ebdb4647fe400af969536e372a2055291d04d3

chore(readme): webpackbin has been merged with codesandbox.io

view details

Matt Haff

commit sha 53f8272fbdd24c474992674d18d85c99e61a697f

Issue #898: Updating WebpackBin link to new CodeSandbox link in README (#906)

view details

Nacho Justicia

commit sha e8794dcad7481bc84f728148f6f672016e78c28b

Add graphext to projects using react-grid-layout list (#905)

view details

nikolas

commit sha 31a9560f17b5e43fb39febe95afab4734635f9c0

travis: test on node 10 (#877) * travis: test on node 10 This is the current LTS release of node. https://github.com/nodejs/Release#release-schedule * Update .travis.yml Updated to specify latest node version & latest LTS

view details

Samuel Reed

commit sha aa5af3cca2662a2ed2083f07c1798b745d4d6f89

fix(deps): update to webpack4 (#907) Clears webpack-dev-server warning

view details

Samuel Reed

commit sha 80873c88b32755bd0ae028df20edc955c2c55d3e

Fix/tests (#908) * fix(test): fix jsdom error w/jest * fix(test): ensure TimSort in Node 11+ doesn't break our tests The test shouldn't depend on the runtime's Array#sort internals

view details

Sergey Golovin

commit sha 1ff0ab0aaf6597aa3569b62dde84ae903beeaa20

feat(grid): add an ability to drop elements from outside of a grid - add isDroppable flag for grids - add onDrop callback for getting an element position after dropping - add documentation - add an example

view details

Sergey Golovin

commit sha 56eb5c8861541134b5fecffb42c6c488a257d0b9

Merge pull request #980 from daynin/droppable feat(grid): add an ability to drop elements from outside of a grid

view details

Sergey Golovin

commit sha e50401705d8548b11a598981a72bf4cd50283cd9

fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside - fix typo - fix markup

view details

Sergey Golovin

commit sha 3d4e863a0d4956b2d91542dfea4eaf52ff8e3a94

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate - fix warnings - fix performance issues

view details

Sergey Golovin

commit sha 9fe5882e823f56e7b0f5908ab0606729d78f13a7

Merge pull request #990 from daynin/fix-cwrp-warnings fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

Sergey Golovin

commit sha c3ed8589c214e5ca1aaf4326f07812ca7c8556bf

Merge pull request #993 from daynin/fix-examples fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside

view details

Dimitar Dimitrov

commit sha 4e8f11f4d98befbfab372f58f5dcd3dc0fa6dd88

Fix for the drag-from-outside example

view details

Sergey Golovin

commit sha 19bd90b07783df1353b587e48f3e95c74c3e120b

Merge pull request #997 from n1ghtmare/examples-fix Fix for the drag-from-outside example

view details

Sergey Golovin

commit sha 8daff381f559d33b1e4aaa031a14965552a5f8bf

chore(docs): update documentation

view details

push time in 2 days

push eventSTRML/react-grid-layout

push time in 2 days

push eventSTRML/react-grid-layout

Sergey Golovin

commit sha 3111a8bd616e9c62cdeb44f58db64f127c239490

chore(example): rebuild docs

view details

push time in 2 days

push eventSTRML/react-grid-layout

Leo Thorp

commit sha 3352c84515e587c2bb7ec7935e24be5705d33704

add missing demo links to README.md (#821) * add missing demo links to README.md * remove extra line

view details

Samuel Reed

commit sha c3ebdb4647fe400af969536e372a2055291d04d3

chore(readme): webpackbin has been merged with codesandbox.io

view details

Matt Haff

commit sha 53f8272fbdd24c474992674d18d85c99e61a697f

Issue #898: Updating WebpackBin link to new CodeSandbox link in README (#906)

view details

Nacho Justicia

commit sha e8794dcad7481bc84f728148f6f672016e78c28b

Add graphext to projects using react-grid-layout list (#905)

view details

nikolas

commit sha 31a9560f17b5e43fb39febe95afab4734635f9c0

travis: test on node 10 (#877) * travis: test on node 10 This is the current LTS release of node. https://github.com/nodejs/Release#release-schedule * Update .travis.yml Updated to specify latest node version & latest LTS

view details

Samuel Reed

commit sha aa5af3cca2662a2ed2083f07c1798b745d4d6f89

fix(deps): update to webpack4 (#907) Clears webpack-dev-server warning

view details

Samuel Reed

commit sha 80873c88b32755bd0ae028df20edc955c2c55d3e

Fix/tests (#908) * fix(test): fix jsdom error w/jest * fix(test): ensure TimSort in Node 11+ doesn't break our tests The test shouldn't depend on the runtime's Array#sort internals

view details

Sergey Golovin

commit sha 1ff0ab0aaf6597aa3569b62dde84ae903beeaa20

feat(grid): add an ability to drop elements from outside of a grid - add isDroppable flag for grids - add onDrop callback for getting an element position after dropping - add documentation - add an example

view details

Sergey Golovin

commit sha 56eb5c8861541134b5fecffb42c6c488a257d0b9

Merge pull request #980 from daynin/droppable feat(grid): add an ability to drop elements from outside of a grid

view details

Sergey Golovin

commit sha e50401705d8548b11a598981a72bf4cd50283cd9

fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside - fix typo - fix markup

view details

Sergey Golovin

commit sha 3d4e863a0d4956b2d91542dfea4eaf52ff8e3a94

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate - fix warnings - fix performance issues

view details

Sergey Golovin

commit sha 9fe5882e823f56e7b0f5908ab0606729d78f13a7

Merge pull request #990 from daynin/fix-cwrp-warnings fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

Sergey Golovin

commit sha c3ed8589c214e5ca1aaf4326f07812ca7c8556bf

Merge pull request #993 from daynin/fix-examples fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside

view details

Dimitar Dimitrov

commit sha 4e8f11f4d98befbfab372f58f5dcd3dc0fa6dd88

Fix for the drag-from-outside example

view details

Sergey Golovin

commit sha 19bd90b07783df1353b587e48f3e95c74c3e120b

Merge pull request #997 from n1ghtmare/examples-fix Fix for the drag-from-outside example

view details

Sergey Golovin

commit sha 9913f63147d175e005c997a30d48c43f6547aaaa

chore(docs): update documentation links

view details

push time in 2 days

pull request commentSTRML/react-grid-layout

Fix for the drag-from-outside example

@STRML could you publish docs, pls?

n1ghtmare

comment created time in 2 days

push eventSTRML/react-grid-layout

Dimitar Dimitrov

commit sha 4e8f11f4d98befbfab372f58f5dcd3dc0fa6dd88

Fix for the drag-from-outside example

view details

Sergey Golovin

commit sha 19bd90b07783df1353b587e48f3e95c74c3e120b

Merge pull request #997 from n1ghtmare/examples-fix Fix for the drag-from-outside example

view details

push time in 2 days

PR merged STRML/react-grid-layout

Reviewers
Fix for the drag-from-outside example

Fixed some issues with the examples (addressing #996)

+13 -4

3 comments

3 changed files

n1ghtmare

pr closed time in 2 days

issue commentSTRML/react-grid-layout

example 16 drag from outside 404 not found

@VishalJadhaoCTS it'll be fixed here https://github.com/STRML/react-grid-layout/pull/997

VishalJadhaoCTS

comment created time in 2 days

Pull request review commentSTRML/react-resizable

new react getDerivedStateFromProps

 export default class Resizable extends React.Component<Props, State> {     slackW: 0, slackH: 0   }; -  componentWillReceiveProps(nextProps: Object) {+  static getDerivedStateFromProps(props: Object, state:Object) {     // If parent changes height/width, set that in our state.-    if (!this.state.resizing &&-        (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {-      this.setState({-        width: nextProps.width,-        height: nextProps.height-      });-    }+    if (!state.resizing &&+        (props.width !== props.width || props.height !== props.height)) {

It won't work

props.width !== props.width // false (always, except cases with NaN)

you should use componentDidMount here

rvdende

comment created time in 2 days

Pull request review commentSTRML/react-resizable

new react getDerivedStateFromProps

 export default class ResizableBox extends React.Component<ResizableProps, State>     }   }; -  componentWillReceiveProps(nextProps: ResizableProps) {-    if (nextProps.width !== this.props.width || nextProps.height !== this.props.height) {-      this.setState({-        width: nextProps.width,-        height: nextProps.height-      });+  static getDerivedStateFromProps(props: ResizableProps, state:Object) {+    if (props.width !== props.width || props.height !== props.height) {

the same case as above

rvdende

comment created time in 2 days

pull request commentSTRML/react-resizable

new react getDerivedStateFromProps

It is strange to have types in .js files for me

this package uses flowtype (not typescript), that's why we use .js extension instead of .ts

rvdende

comment created time in 2 days

pull request commentSTRML/react-grid-layout

chore: update FlowType version

@n1ghtmare

once it's merged and its version is updated, perhaps it will be a good idea to update all our dependencies here (before we push a new version) yes, I think that's a good idea!

I created an issue for it https://github.com/STRML/react-grid-layout/issues/1002

daynin

comment created time in 2 days

issue openedSTRML/react-grid-layout

update react-resizable and flowtype version

After merging this PR https://github.com/STRML/react-resizable/pull/107 we should update the version in package.json file. Along with it we should update at least flowtype version (but I thing it'll be good to check out all dependencies for updates)

created time in 2 days

PR opened STRML/react-grid-layout

Reviewers
chore: update FlowType version enhancement
+22 -13

0 comment

5 changed files

pr created time in 6 days

create barnchdaynin/react-grid-layout

branch : update-flow

created branch time in 6 days

issue closedSTRML/react-grid-layout

Console warnings using react 16.9

My app console warnings: image

From code sandbox example (with upgraded react 16.9.0 deps): image

Using react-grid-layout 0.16.6

closed time in 6 days

gknapp

issue commentSTRML/react-grid-layout

Console warnings using react 16.9

I fixed it here #990

gknapp

comment created time in 6 days

delete branch daynin/react-grid-layout

delete branch : fix-examples

delete time in 6 days

push eventSTRML/react-grid-layout

Sergey Golovin

commit sha e50401705d8548b11a598981a72bf4cd50283cd9

fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside - fix typo - fix markup

view details

Sergey Golovin

commit sha c3ed8589c214e5ca1aaf4326f07812ca7c8556bf

Merge pull request #993 from daynin/fix-examples fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside

view details

push time in 6 days

delete branch daynin/react-grid-layout

delete branch : fix-cwrp-warnings

delete time in 6 days

push eventSTRML/react-grid-layout

Sergey Golovin

commit sha 3d4e863a0d4956b2d91542dfea4eaf52ff8e3a94

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate - fix warnings - fix performance issues

view details

Sergey Golovin

commit sha 9fe5882e823f56e7b0f5908ab0606729d78f13a7

Merge pull request #990 from daynin/fix-cwrp-warnings fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

push time in 6 days

PR merged STRML/react-grid-layout

Reviewers
fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

relates to: https://github.com/STRML/react-grid-layout/issues/988

+240 -130

4 comments

3 changed files

daynin

pr closed time in 6 days

Pull request review commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

 export default class ReactGridLayout extends React.Component<Props, State> {         newLayoutBase,         nextProps.children,         nextProps.cols,-        this.compactType(nextProps)+        compactType(nextProps)       );-      const oldLayout = this.state.layout;-      this.setState({ layout: newLayout });-      this.onLayoutMaybeChanged(newLayout, oldLayout);++      return {+        layout: newLayout,+        // We need to save these props to state for using+        // getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)+        compactType: nextProps.compactType,+        children: nextProps.children,+        propsLayout: nextProps.layout+      };     }++    return null;+  }++  componentDidUpdate(prevProps: Props, prevState: State) {+    const newLayout = this.state.layout;

@n1ghtmare done

daynin

comment created time in 8 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha 3d4e863a0d4956b2d91542dfea4eaf52ff8e3a94

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate - fix warnings - fix performance issues

view details

push time in 8 days

Pull request review commentSTRML/react-grid-layout

feat: add transformScale

 isResizable: ?boolean = true, // Uses CSS3 translate() instead of position top/left. // This makes about 6x faster paint performance useCSSTransforms: ?boolean = true,+// parent layout transform scale+// If react-grid-layout dom's parent dom has transform scale, you should specify that key

@xcqwan I think we should explain why we need to set this property and what the value of this property means. Also I'd prefer (if you don't mind) to replace "dom's parent dom" by "if parent DOM node of ResponsiveReactGridLayout or ReactGridLayout has transform scale..." and so on

xcqwan

comment created time in 8 days

issue commentSTRML/react-grid-layout

Responsive layout doesn't work unless window is resized.

Use window.dispatchEvent(new Event('resize')); when you want that react-grid-layout resize dynamically. I think it can work, but it seems to me like an unobvious workaround. Maybe we should add an ability to listen to parent resizing. I'll mark it as a bug for now

@STRML @n1ghtmare what do you think?

skyorion427

comment created time in 8 days

issue commentSTRML/react-grid-layout

how can I move a grid in static grid

@zhangwei900808 did the answer above help you?

zhangwei900808

comment created time in 8 days

issue commentSTRML/react-grid-layout

Width and Height on layout items being ignored

@clough360 pls, try to add "measureBeforeMount" prop into your GridLayout instance props. Let me know if it helps

clough360

comment created time in 8 days

Pull request review commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

 export default class ReactGridLayout extends React.Component<Props, State> {     this.onLayoutMaybeChanged(this.state.layout, this.props.layout);   } -  componentWillReceiveProps(nextProps: Props) {+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {     let newLayoutBase;++    if (prevState.activeDrag) {

@n1ghtmare thank you!

daynin

comment created time in 8 days

pull request commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

@STRML @n1ghtmare check it out, pls

daynin

comment created time in 8 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha e92c4eee50a59fc1b5ea377fb62040b4b4ac2cc5

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate - fix warnings - fix performance issues

view details

push time in 8 days

Pull request review commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

 export default class ReactGridLayout extends React.Component<Props, State> {     this.onLayoutMaybeChanged(this.state.layout, this.props.layout);   } -  componentWillReceiveProps(nextProps: Props) {+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {     let newLayoutBase;++    if (prevState.activeDrag) {

do not compare layouts while dragging

daynin

comment created time in 8 days

Pull request review commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

 export default class GridItem extends React.Component<Props, State> {   mixinDraggable(child: ReactElement<any>): ReactElement<any> {     return (       <DraggableCore-        onStart={this.onDragHandler("onDragStart")}-        onDrag={this.onDragHandler("onDrag")}-        onStop={this.onDragHandler("onDragStop")}+        onStart={this.onDragStart}

do not recreate new functions every single render cycle

daynin

comment created time in 8 days

pull request commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

Performance comparison: master: http://s.csssr.ru/U286BQJEP/20190912141129.mp4 fix-cwrp-warnings (before fix): http://s.csssr.ru/U286BQJEP/20190912132331.mp4 fix-cwrp-warnings (after fix): http://s.csssr.ru/U286BQJEP/20190912141619.mp4

daynin

comment created time in 8 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha 729b8906d057a0bd06918164e953472c417438fe

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate - fix warnings - fix performance issues

view details

push time in 8 days

pull request commentSTRML/react-grid-layout

fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside

@STRML fixed. And I fixed html markup in these files

daynin

comment created time in 9 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha e50401705d8548b11a598981a72bf4cd50283cd9

fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside - fix typo - fix markup

view details

push time in 9 days

Pull request review commentSTRML/react-grid-layout

feat(grid): add an ability to drop elements from outside of a grid

+import React from "react";

@STRML fixed https://github.com/STRML/react-grid-layout/pull/993

daynin

comment created time in 10 days

create barnchdaynin/react-grid-layout

branch : fix-examples

created branch time in 10 days

Pull request review commentSTRML/react-grid-layout

feat(grid): add an ability to drop elements from outside of a grid

 export default class GridItem extends React.Component<Props, State> {     className: ""   }; +  currentNode: HTMLElement;++  componentWillReceiveProps(nextProps: Props) {+    const { droppingPosition } = nextProps;+    const { dragging } = this.state;++    if (!droppingPosition || !this.props.droppingPosition) {+      return;+    }++    if (!this.currentNode) {+      // eslint-disable-next-line react/no-find-dom-node+      this.currentNode = ((ReactDOM.findDOMNode(this): any): HTMLElement);+    }++    if (!dragging) {

@STRML if you don't mind I'll refactor it here https://github.com/STRML/react-grid-layout/pull/990

daynin

comment created time in 10 days

Pull request review commentSTRML/react-grid-layout

feat(grid): add an ability to drop elements from outside of a grid

 export default class GridItem extends React.Component<Props, State> {     className: ""   }; +  currentNode: HTMLElement;++  componentWillReceiveProps(nextProps: Props) {+    const { droppingPosition } = nextProps;+    const { dragging } = this.state;++    if (!droppingPosition || !this.props.droppingPosition) {+      return;+    }++    if (!this.currentNode) {+      // eslint-disable-next-line react/no-find-dom-node+      this.currentNode = ((ReactDOM.findDOMNode(this): any): HTMLElement);

@STRML no, I think it's impossible

daynin

comment created time in 10 days

issue commentSTRML/react-grid-layout

Question: Is it possible to have different margin and containerPadding config for different Breakpoints?

@faizalMo hi! Now you can find only one margin prop for all breakpoints. But I think it's pretty easy to add an ability to use different margins for different breakpoints.

The simplest implementation of this feature is passing margin as a map like this:

{ lg: [5, 5], md: [10, 10], sm: [15, 15]
faizalMo

comment created time in 11 days

issue commentSTRML/react-grid-layout

adding items with height > 1

@StefanMermans looks like the library bug

StefanMermans

comment created time in 11 days

issue commentSTRML/react-grid-layout

Safari randomly Crashes when moving/resizing grid around

I can't reproduce it too (safari: Version 12.1.2 (14607.3.9)). Maybe this is not a problem of the library. @bgold0 does it happen on demo-pages or only in your app?

bgold0

comment created time in 11 days

Pull request review commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

 export default class ReactGridLayout extends React.Component<Props, State> {     this.onLayoutMaybeChanged(this.state.layout, this.props.layout);   } -  componentWillReceiveProps(nextProps: Props) {+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {

I think that layout recreating on the user side is not an obvious way to fix it. I mean not obvious for a user

Maybe replacing the code into componentDidMount will be enough to fix performance issues. I'll try to compare cases with componentWillReceiveProps, getDerivedStateFromProps + componentDidUpdate and componentDidUpdate

daynin

comment created time in 11 days

pull request commentSTRML/react-grid-layout

feat: add transformScale

@xcqwan thank you! But I mean we need to add some documentation in the readme file. We need it here because this is a change in public API

xcqwan

comment created time in 11 days

Pull request review commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

 export default class GridItem extends React.Component<Props, State> {    currentNode: HTMLElement; -  componentWillReceiveProps(nextProps: Props) {-    const { droppingPosition } = nextProps;+  componentDidUpdate(prevProps: Props) {+    const { droppingPosition } = this.props;     const { dragging } = this.state; -    if (!droppingPosition || !this.props.droppingPosition) {+    if (!droppingPosition || !prevProps.droppingPosition) {

@STRML thank you for the comment! I'll fix it right after the performance issue

daynin

comment created time in 11 days

Pull request review commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

 export default class ReactGridLayout extends React.Component<Props, State> {     this.onLayoutMaybeChanged(this.state.layout, this.props.layout);   } -  componentWillReceiveProps(nextProps: Props) {+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {

@STRML @n1ghtmare we can try this

Also if we go this route, we can do the changes without getDerivedStateFromProps and just go with componentDidUpdate

with props mirroring. It can help us to avoid extra comparisons

What do you think?

daynin

comment created time in 11 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha 25ea554180fa28166655aba5d3ec750fb93fcc9c

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

push time in 11 days

pull request commentSTRML/react-grid-layout

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

@n1ghtmare

I've left some comments, also, just FYI, I'm getting some errors in the console. Didn't see those before

I fixed it

daynin

comment created time in 11 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha 6f72052375a1361fb6f168909c4da0573a2a9dd8

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

push time in 11 days

startedSTRML/react-grid-layout

started time in 12 days

issue commentSTRML/react-grid-layout

Multiple grids

We added an ability to drop elements from outside of a grid (see https://github.com/STRML/react-grid-layout/pull/980). Maybe this feature can help you

razvanip

comment created time in 12 days

issue closedSTRML/react-grid-layout

How to drag and drop between two grids or from outside the grid (dashboard)

Thanks for submitting an issue to RGL!

Please mark the type of this issue:

  • [ ] Bug
  • [ ] Feature Request
  • [x] Question

If you have a question or bug report, please use the WebpackBin Template to demonstrate. It is much easier for us to help you if you do.

closed time in 12 days

razvantomegea

issue commentSTRML/react-grid-layout

How to drag and drop between two grids or from outside the grid (dashboard)

@razvantomegea we added an ability to drag some elements from outside of the grid

razvantomegea

comment created time in 12 days

issue commentSTRML/react-grid-layout

Console warnings using react 16.9

but from the looks of it I had to change quite too many things in the internals to make it work with getDerivedStateFromProps and componentDidUpdate

@n1ghtmare I think I did it the same way, check it out pls

gknapp

comment created time in 12 days

PR opened STRML/react-grid-layout

Reviewers
fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

relates to: https://github.com/STRML/react-grid-layout/issues/988

+71 -43

0 comment

3 changed files

pr created time in 12 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha a0e9ada3d1fabd259f913b7e5692602ad3a2c6d5

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

push time in 12 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha 8ccc6c08c6e0df24b13d08a16936f8ee3c9a5092

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

push time in 12 days

push eventdaynin/react-grid-layout

Sergey Golovin

commit sha 56eb5c8861541134b5fecffb42c6c488a257d0b9

Merge pull request #980 from daynin/droppable feat(grid): add an ability to drop elements from outside of a grid

view details

Sergey Golovin

commit sha bc40294ef117f3f562a00e36698c9a4796bb4b6c

fix: replace componentWillReceiveProps by getDerivedStateFromProps and componentDidUpdate

view details

push time in 12 days

create barnchdaynin/react-grid-layout

branch : fix-cwrp-warnings

created branch time in 12 days

delete branch daynin/react-grid-layout

delete branch : droppable

delete time in 12 days

push eventSTRML/react-grid-layout

Sergey Golovin

commit sha 1ff0ab0aaf6597aa3569b62dde84ae903beeaa20

feat(grid): add an ability to drop elements from outside of a grid - add isDroppable flag for grids - add onDrop callback for getting an element position after dropping - add documentation - add an example

view details

Sergey Golovin

commit sha 56eb5c8861541134b5fecffb42c6c488a257d0b9

Merge pull request #980 from daynin/droppable feat(grid): add an ability to drop elements from outside of a grid

view details

push time in 12 days

PR merged STRML/react-grid-layout

feat(grid): add an ability to drop elements from outside of a grid
  • add isDroppable flag for grids
  • add onDrop callback for getting an element position after dropping
  • add documentation
  • add an example

Relates to: https://github.com/STRML/react-grid-layout/issues/586

+364 -25

7 comments

10 changed files

daynin

pr closed time in 12 days

issue commentSTRML/react-grid-layout

Console warnings using react 16.9

I'm working on it. I'll try to fix it as soon as possible

gknapp

comment created time in 15 days

pull request commentSTRML/react-grid-layout

feat: add transformScale

@xcqwan thank you for your PR! Add documentation for this feature, pls

Let me know if you need my help

xcqwan

comment created time in 16 days

pull request commentSTRML/react-grid-layout

feat(grid): add an ability to drop elements from outside of a grid

@STRML check it pls. If it's ok, I'll merge it

daynin

comment created time in 16 days

issue commentSTRML/react-grid-layout

Is this project dead?

@STRML thank you!

n1ghtmare

comment created time in 16 days

more