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

Improve Actions Documentation Story

未關閉
#297 1 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
JavaScript
星號
311
分支
130
PR 合併指標
30 天內沒有已合併 PR

描述

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?

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。