Skip to content

Hover plugin#639

Open
yoursdearboy wants to merge 1 commit into
GriddleGriddle:masterfrom
yoursdearboy:hoverPlugin
Open

Hover plugin#639
yoursdearboy wants to merge 1 commit into
GriddleGriddle:masterfrom
yoursdearboy:hoverPlugin

Conversation

@yoursdearboy

Copy link
Copy Markdown

Griddle major version

1.3.0

Changes proposed in this pull request

Added a plugin that provide each Cell with hoveredRowKey property which is equal to griddleKey of hovered row.

Why these changes are made

Don't know if this repo is a proper place to contribute plugins (at least I see plugins directory).
We use it to show toolbar for records in rows (see storybook demo).

Are there tests?

Storybook story only.

@MichaelDeBoey

Copy link
Copy Markdown

@dahlbyk Any news on merging this one?

@dahlbyk dahlbyk left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MichaelDeBoey I'll defer to @ryanlanciaux @joellanciaux on the decision to include another plugin, and if so what that plugin scope should be.

In the meantime, here are some thoughts on the code.

focusOut: rowMouseLeave
}, dispatch)
),
components.RowContainer

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than compose this with the default RowContainer, it's probably more correct for this to be a RowEnhancer (like in this example story).

},
(dispatch, {griddleKey}) => bindActionCreators({
focusIn: rowMouseEnter.bind(this, griddleKey),
focusOut: rowMouseLeave

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As of #679, if these were onMouseEnter/onMouseLeave they'd be passed through correctly in Row.

connect(
state => {
return {
hoveredRowKey: state.get('hoveredRowKey', null)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not entirely convinced it should be the plugin's responsibility to inject hoveredRowKey into Cell (or anywhere). It seems to be an implementation detail of this demo. I'm more inclined to avoid customizing Row altogether, letting ButtonsColumn be connected instead:

const ButtonsColumn = connect(
    state => ({ hoveredRowKey: state.get('hoveredRowKey', null) })
  )(
    ({griddleKey,hoveredRowKey}) =>
      (griddleKey === hoveredRowKey) && <button>Edit</button> : null
  );

@MichaelDeBoey

Copy link
Copy Markdown

@yoursdearboy Any news on addressing @dahlbyk's comments? 🙂

@dahlbyk

dahlbyk commented Dec 20, 2017

Copy link
Copy Markdown
Contributor

@MichaelDeBoey honestly, I would just copy the relevant bits into your own plugin. There's not all that much to wiring up Row events.

@MichaelDeBoey

MichaelDeBoey commented Dec 20, 2017

Copy link
Copy Markdown

@dahlbyk Yeah I had a few problems doing so, so was hoping the plugin could help 😕

Will try and make some issues together with a codesandbox, so you could maybe point me in the right direction if you want 🙂

@dahlbyk

dahlbyk commented Dec 23, 2017

Copy link
Copy Markdown
Contributor

Glad to help as time allows

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants