adopted-ember-addons / adopted-ember-addons/ember-light-table

Improve Actions Documentation Story

Offen
#297 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
311
Forks
130
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

Opening this issue to discuss & track what needs to be done to better facilitate users cleanly implementing interactions between the user, cells, and table. Will open a PR once we've agreed on next steps.

**For example when should we use `tableActions`?**
http://offirgolan.github.io/ember-light-table/docs/classes/light-table.html#property_tableActions
(related: should make sure all references to `tableActions` point to the definition -- https://github.com/offirgolan/ember-light-table/search?l=JavaScript&q=tableActions&utf8=%E2%9C%93)

**When should we override the implementation of `Cell`?**
I did this to add a `column-is-selected` class to every cell (which involves having a click callback with an implementation provided, as opposed to calling a parent and implementing it everywhere it gets used), and also to wire up a right click event.

- Maybe we provide a new component new cell component provided with the lib that has callbacks for `click` and `right click` already baked in?

```js
/**
* Enriches ember-light-table cell with column selection functionality.
*
* The class `column-is-selected` is added to the element when the column is selected.
* Only one column can be selected at a time, and clicking within the same column does not un-select a column.
* On right click, the component will call the `contextMenu` action on `tableActions`
*/
export default Cell.extend({
classNameBindings: ['columnIsSelected'],
columnIsSelected: computed.readOnly('column.selected'),
contextMenu(event){
// really anything could be done here, for example tracking right clicks
const fn = this.get('tableActions.contextMenu');
if (fn) {
fn(event);
}
},

click(event) {
const columns = this.get('table.columns');
const column = this.get('column');
// this 'selects' columns
this.get('table.selectedColumns').setEach('selected', false);
column.set('selected', true);
},

});
```

**I've done this, and I'm not sure how I feel about it**
```hbs
{{!-- onCellClick can be implemented differently for each column,
and since it's implemented on the column, then the logic lives
in JS with the parent of the table, not in other files --}}
{{drilldown-button click=(action column.onCellClick column row)}}
```
```js
Component.extend({
componentFunction: K, // could be anything
primaryColumn: computed(function() {
return Column.create({
/// ...
onCellClick: this.componentFunction.bind(this)
});
})
})
```
The other option for something like this is delegating to `tableActions` and in that callback redelegating to the column depending on which it is. That would look something like this:
`{{button click=(action tableActions.onButtonClick column row rowValue)}}`
```hbs
{{#light-table tableActions=(hash buttonClick=(action 'cellButtonClicked') )}}
...
{{/light-table}}
```
and in the component
```js
{
actions: {
cellButtonClicked(event, column, row, value) {
// detect column and delegate to the appropriate function in the component.
}
}
}
```
It's a lot of writing simply because we go from from logic related to `column <> table <> column`

- Maybe we find a way to allow the user to enable linking cell events (`contextMenu`, `mouseEnter`, etc...) to `tableAction` events while defining the `Column`?
- How do we facilitate calling column specific actions implementations from their respective cell?

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.