Skip to content

Commit

Permalink
Merge pull request #67 from uptick/hotfix/onclick-propagation
Browse files Browse the repository at this point in the history 
Only trigger event if a/button tags aren't in event tree up to row
  • Loading branch information
tabby-or-not committed Aug 31, 2018
2 parents eb79d1f + 64b79f3 commit a35cee9
Show file tree
Hide file tree
Showing 10 changed files with 330 additions and 57 deletions.
1 change: 1 addition & 0 deletions src/ObjectList.demo.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const columns = [
{dataKey: 'email', header: 'Email', sortKey: 'email'},
{dataKey: 'gender', header: 'Gender', sortKey: 'gender'},
{dataKey: 'ip_address', header: 'IPv6', sortKey: 'ip_address', optional: true},
{dataKey: 'link', header: 'Link', item: () => <a href="http://google.com"><span>Click</span></a>},
]

// ---- column grouping
Expand Down
192 changes: 192 additions & 0 deletions src/__snapshots__/ObjectList.demo.stories.storyshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,21 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
Female
</div>
</div>
<div
className="objectlist-list__content"
>
<h2
className="objectlist-list__header"
>
Link
:
</h2>
<div
className="objectlist-list__body"
>

</div>
</div>
</li>
<li
className="objectlist-list__item objectlist-list__item--clickable"
Expand Down Expand Up @@ -217,6 +232,21 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
Male
</div>
</div>
<div
className="objectlist-list__content"
>
<h2
className="objectlist-list__header"
>
Link
:
</h2>
<div
className="objectlist-list__body"
>

</div>
</div>
</li>
<li
className="objectlist-list__item objectlist-list__item--clickable"
Expand Down Expand Up @@ -267,6 +297,21 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
Female
</div>
</div>
<div
className="objectlist-list__content"
>
<h2
className="objectlist-list__header"
>
Link
:
</h2>
<div
className="objectlist-list__body"
>

</div>
</div>
</li>
<li
className="objectlist-list__item objectlist-list__item--clickable"
Expand Down Expand Up @@ -317,6 +362,21 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
Female
</div>
</div>
<div
className="objectlist-list__content"
>
<h2
className="objectlist-list__header"
>
Link
:
</h2>
<div
className="objectlist-list__body"
>

</div>
</div>
</li>
<li
className="objectlist-list__item objectlist-list__item--clickable"
Expand Down Expand Up @@ -367,6 +427,21 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
Male
</div>
</div>
<div
className="objectlist-list__content"
>
<h2
className="objectlist-list__header"
>
Link
:
</h2>
<div
className="objectlist-list__body"
>

</div>
</div>
</li>
<li
className="objectlist-list__item objectlist-list__item--clickable"
Expand Down Expand Up @@ -417,6 +492,21 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
Female
</div>
</div>
<div
className="objectlist-list__content"
>
<h2
className="objectlist-list__header"
>
Link
:
</h2>
<div
className="objectlist-list__body"
>

</div>
</div>
</li>
<li
className="objectlist-list__item objectlist-list__item--clickable"
Expand Down Expand Up @@ -467,6 +557,21 @@ exports[`Storyshots object-list/demo interactive list 1`] = `
Male
</div>
</div>
<div
className="objectlist-list__content"
>
<h2
className="objectlist-list__header"
>
Link
:
</h2>
<div
className="objectlist-list__body"
>

</div>
</div>
</li>
</ul>
</div>
Expand Down Expand Up @@ -786,6 +891,16 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
Gender
</div>
</th>
<th
className="objectlist-table__th objectlist-table__th--border-bottom "
colSpan={undefined}
rowSpan={1}
style={Object {}}
>
<span>
Link
</span>
</th>
</tr>
</thead>
<tbody>
Expand All @@ -808,6 +923,17 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
>
Female
</td>
<td
className="objectlist-table__td"
>
<a
href="http://google.com"
>
<span>
Click
</span>
</a>
</td>
</tr>
<tr
className="objectlist-table__row objectlist-table__row--clickable"
Expand All @@ -828,6 +954,17 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
>
Male
</td>
<td
className="objectlist-table__td"
>
<a
href="http://google.com"
>
<span>
Click
</span>
</a>
</td>
</tr>
<tr
className="objectlist-table__row objectlist-table__row--clickable"
Expand All @@ -848,6 +985,17 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
>
Female
</td>
<td
className="objectlist-table__td"
>
<a
href="http://google.com"
>
<span>
Click
</span>
</a>
</td>
</tr>
<tr
className="objectlist-table__row objectlist-table__row--clickable"
Expand All @@ -868,6 +1016,17 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
>
Female
</td>
<td
className="objectlist-table__td"
>
<a
href="http://google.com"
>
<span>
Click
</span>
</a>
</td>
</tr>
<tr
className="objectlist-table__row objectlist-table__row--clickable"
Expand All @@ -888,6 +1047,17 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
>
Male
</td>
<td
className="objectlist-table__td"
>
<a
href="http://google.com"
>
<span>
Click
</span>
</a>
</td>
</tr>
<tr
className="objectlist-table__row objectlist-table__row--clickable"
Expand All @@ -908,6 +1078,17 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
>
Female
</td>
<td
className="objectlist-table__td"
>
<a
href="http://google.com"
>
<span>
Click
</span>
</a>
</td>
</tr>
<tr
className="objectlist-table__row objectlist-table__row--clickable"
Expand All @@ -928,6 +1109,17 @@ exports[`Storyshots object-list/demo interactive table 1`] = `
>
Male
</td>
<td
className="objectlist-table__td"
>
<a
href="http://google.com"
>
<span>
Click
</span>
</a>
</td>
</tr>
</tbody>
</table>
Expand Down
4 changes: 2 additions & 2 deletions src/data-renderers/List.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ClassNames from 'classnames'

import ListCard from './ListCard'
import Overlay from './Overlay'
import { getVisibleColumns } from '../utils/functions'
import { getVisibleColumns, handleRowClick } from '../utils/functions'
import { STATUS_TYPE, STATUS_CHOICES, COLUMN_TYPE } from '../utils/proptypes'

export default class ListRenderer extends Component {
Expand Down Expand Up @@ -52,7 +52,7 @@ export default class ListRenderer extends Component {
key={`list-row-${idx}`}
columns={this.state.columns}
data={row}
onClick={itemOnClick ? () => itemOnClick(row) : null}
onClick={itemOnClick ? (event) => handleRowClick(event, row, itemOnClick) : null}
/>
)
})
Expand Down
4 changes: 2 additions & 2 deletions src/data-renderers/Table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Overlay from './Overlay'
import AllSelector from '../types/AllSelector'
import Selector from '../types/Selector'
import { getVisibleColumns, annotateSpans, getLeafColumns } from '../utils/functions'
import { getValueFromAccessor } from './utils'
import { getValueFromAccessor, handleRowClick } from './utils'
import { STATUS_TYPE, STATUS_CHOICES, SELECTION_TYPE, ALL_SELECTED } from '../utils/proptypes'

export default class TableRenderer extends Component {
Expand Down Expand Up @@ -139,7 +139,7 @@ export default class TableRenderer extends Component {
<tr
key={`row-${rowIndex}`}
className={rowClasses.join(' ')}
onClick={itemOnClick ? () => itemOnClick(row) : null}
onClick={itemOnClick ? event => handleRowClick(event, row, itemOnClick) : null}
>
{select && (
<td className="objectlist-table__td" key={`select-cell-${rowIndex}`} >
Expand Down
Loading

0 comments on commit a35cee9

Please sign in to comment.