react-components: support external state for grid #442
Conversation
🦋 Changeset detectedLatest commit: 69c5a20 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
giannif
force-pushed
the
react-components/grid-external-state
branch
from
09fa137 to
9e20c13
Compare
| prevState: State | ||
| ) => { | ||
| const gutterOffset = gutter * (columns - 1) | ||
| const gifWidth = Math.floor((width - gutterOffset) / columns) | ||
| if (prevState.gifWidth !== gifWidth) { | ||
| return { gifWidth } | ||
| } | ||
| if (externalGifs && externalGifs !== prevState.gifs) { |
There was a problem hiding this comment.
if externalGifs exists, is this ever going to be false? i can't remember if === works with arrays of objects or not.
There was a problem hiding this comment.
@sketchybones yes this should be referentially false most of the time, the state in the grid is set to the external state. When you want to update the grid, pass in a new array. I do that in the Story when deleting a gif. If you edit the title, I don't update the array, although I probably should. But since the Gif component rerenders on hover, it grabs the latest title.
I guess if you want it to update instantly, you'd want to clone the array after changing the title:
const editGif = externalGifs?.find((g) => g.id === gif.id)
if (editGif) {
editGif.title = result
setExternalGifs([...externalGifs])
}
allowing for easier data mutations
edit.grid.mov