Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v2.0.0 #854

Merged
merged 12 commits into from
Apr 26, 2018
Merged

v2.0.0 #854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0716784
Using GET by default (although configurable) in search forms. Fixes #…
4lejandrito Apr 25, 2018
fc700bb
Passing isomorphic tests
4lejandrito Apr 26, 2018
285bbcd
SF | Fixes #846
Apr 26, 2018
8b89b8a
Regen snapshots | Fixes #846
Apr 26, 2018
8d3d088
Merge pull request #852 from carloslancha/pr-849
jbalsas Apr 26, 2018
957c74a
Create custom emit method to propagate all the event cascade | Fixes …
Apr 26, 2018
8194772
Extend dropdown classes from ClayComponent and propagate itemClicked …
Apr 26, 2018
90c4d88
Extend management toolbar from ClayComponent and propagate itemClicke…
Apr 26, 2018
2e83aac
Extend datasetdisplay from ClayComponent and propagate itemClicked ev…
Apr 26, 2018
7c2fd86
Get the correct item in dropdowns | Fixes #850
Apr 26, 2018
c96ecf8
SF | Fixes #850
Apr 26, 2018
0f780dd
Merge pull request #851 from carloslancha/issue-850-propagate-managem…
jbalsas Apr 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 68 additions & 2 deletions packages/clay-component/src/ClayComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Component from 'metal-component';
import {Config} from 'metal-state';
import {domData} from 'metal-dom';
import {core, isServerSide} from 'metal';
import {isObject} from 'util';

/**
* Clay Component.
Expand All @@ -11,8 +12,8 @@ class ClayComponent extends Component {
/**
* @inheritDoc
*/
attached() {
super.attached();
attached(...args) {
super.attached(...args);

if (isServerSide()) {
return;
Expand Down Expand Up @@ -56,6 +57,71 @@ class ClayComponent extends Component {
}
}
}

/**
* @inheritDoc
*/
buildFacade_(eventName, data, originalEvent) {
if (this.getShouldUseFacade()) {
const facade = {
data: data,
preventDefault: function() {
facade.preventedDefault = true;
if (
originalEvent &&
originalEvent.preventDefault &&
(!originalEvent.preventDefault ||
!originalEvent.defaultPrevented)
) {
originalEvent.preventDefault();
}
},
stopInmediatePropagation: function() {
if (
originalEvent &&
originalEvent.stopInmediatePropagation
) {
originalEvent.stopInmediatePropagation();
}
},
stopPropagation: function() {
if (originalEvent && originalEvent.stopPropagation) {
originalEvent.stopPropagation();
}
},
target: this,
type: eventName,
};

return facade;
}
}

/**
* Execute each of the listeners in order with te supplied arguments.
* @param {string|object} event
* @param {*} opt_args [arg1], [arg2], [...]
* @return {boolean} Returns true if event had listeners, false otherwise.
*/
emit(event, ...args) {
const eventName = isObject(event) ? event.name : event;
const facade = this.buildFacade_(
eventName,
event.data,
event.originalEvent
);

args = isObject(event) ? [facade] : args;

const listeners = this.getRawListeners_(eventName);

if (listeners.length === 0) {
return false;
}

this.runListeners_(listeners, args, facade);
return true;
}
}

/**
Expand Down
2 changes: 1 addition & 1 deletion packages/clay-dataset-display/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@
],
"dependencies": {
"clay-card-grid": "^2.0.0-rc.12",
"clay-component": "^2.0.0-rc.12",
"clay-list": "^2.0.0-rc.12",
"clay-management-toolbar": "^2.0.0-rc.12",
"clay-table": "^2.0.0-rc.12",
"metal": "^2.16.0",
"metal-component": "^2.16.0",
"metal-soy": "^2.16.0",
"metal-state": "^2.16.0",
"metal-web-component": "^2.16.0"
Expand Down
49 changes: 41 additions & 8 deletions packages/clay-dataset-display/src/ClayDatasetDisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ import {
filterItemsValidator,
} from 'clay-management-toolbar';
import {Config} from 'metal-state';
import Component from 'metal-component';
import ClayComponent from 'clay-component';
import defineWebComponent from 'metal-web-component';
import Soy from 'metal-soy';

import templates from './ClayDatasetDisplay.soy.js';

/**
* Metal ClayDatasetDisplay component.
* @extends Component
* @extends ClayComponent
*/
class ClayDatasetDisplay extends Component {
class ClayDatasetDisplay extends ClayComponent {
/**
* @inheritDoc
*/
Expand Down Expand Up @@ -73,11 +73,16 @@ class ClayDatasetDisplay extends Component {

/**
* Continues the propagation of the action item clicked event
* @param {!Object} item
* @param {!Event} event
* @private
*/
_handleActionClicked(item) {
this.emit('actionClicked', item);
* @return {Boolean} If the event has been prevented or not.
*/
_handleActionItemClicked(event) {
return !this.emit({
data: event.data,
name: 'actionItemClicked',
originalEvent: event,
});
}

/**
Expand All @@ -89,6 +94,20 @@ class ClayDatasetDisplay extends Component {
this.emit('creationButtonClicked', event);
}

/**
* Continues the propagation of the creation menu item clicked event
* @param {!Event} event
* @private
* @return {Boolean} If the event has been prevented or not.
*/
_handleCreationMenuItemClicked(event) {
return !this.emit({
data: event.data,
name: 'creationMenuItemClicked',
originalEvent: event,
});
}

/**
* Continues the propagation of the creation menu more button clicked event
* @param {!Event} event
Expand All @@ -115,6 +134,20 @@ class ClayDatasetDisplay extends Component {
this.emit('filterDoneClicked', event);
}

/**
* Continues the propagation of the filter item click event
* @param {!Event} event
* @private
* @return {Boolean} If the event has been prevented or not.
*/
_handleFilterItemClicked(event) {
return !this.emit({
data: event.data,
name: 'filterItemClicked',
originalEvent: event,
});
}

/**
* Toggles the selection of an item and adds or removes it from selected items
* list.
Expand Down Expand Up @@ -227,7 +260,7 @@ class ClayDatasetDisplay extends Component {
* @param {!Object} item
* @private
*/
_handleViewTypeClicked(item) {
_handleViewTypeItemClicked(item) {
this.views[this.selectedView].active = false;

for (let [index, view] of this.views.entries()) {
Expand Down
12 changes: 8 additions & 4 deletions packages/clay-dataset-display/src/ClayDatasetDisplay.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,19 @@
*/
{template .render}
{@param spritemap: string}
{@param? _handleActionClicked: any}
{@param? _handleActionItemClicked: any}
{@param? _handleCreationButtonClicked: any}
{@param? _handleCreationMenuItemClicked: any}
{@param? _handleCreationMenuMoreButtonClicked: any}
{@param? _handleDeselectAllClicked: any}
{@param? _handleFilterDoneClicked: any}
{@param? _handleFilterItemClicked: any}
{@param? _handleItemToggled: any}
{@param? _handleSearch: any}
{@param? _handleSelectAllClicked: any}
{@param? _handleSelectPageCheckboxChanged: any}
{@param? _handleSortingButtonClicked: any}
{@param? _handleViewTypeClicked: any}
{@param? _handleViewTypeItemClicked: any}
{@param? _selectedItems: list<?>}
{@param? _totalItems: number}
{@param? actionItems: list<[
Expand Down Expand Up @@ -105,16 +107,18 @@
{param actionItems: $actionItems /}
{param creationMenu: $creationMenu /}
{param events: [
'actionClicked': $_handleActionClicked,
'actionItemClicked': $_handleActionItemClicked,
'creationButtonClicked': $_handleCreationButtonClicked,
'creationMenuItemClicked': $_handleCreationMenuItemClicked,
'creationMenuMoreButtonClicked': $_handleCreationMenuMoreButtonClicked,
'deselectAllClicked': $_handleDeselectAllClicked,
'filterDoneClicked': $_handleFilterDoneClicked,
'filterItemClicked': $_handleFilterItemClicked,
'search': $_handleSearch,
'selectAllClicked': $_handleSelectAllClicked,
'selectPageCheckboxChanged': $_handleSelectPageCheckboxChanged,
'sortingButtonClicked': $_handleSortingButtonClicked,
'viewTypeClicked': $_handleViewTypeClicked
'viewTypeClicked': $_handleViewTypeItemClicked
] /}
{param filterItems: $filterItems /}
{param ref: 'managementToolbar' /}
Expand Down
55 changes: 53 additions & 2 deletions packages/clay-dataset-display/src/__tests__/ClayDatasetDisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -543,7 +543,13 @@ describe('ClayDatasetDisplay', function() {
jest.runAllTimers();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('actionClicked', expect.any(Object));
expect(spy).toHaveBeenCalledWith(
expect.objectContaining({
data: expect.any(Object),
name: 'actionItemClicked',
originalEvent: expect.any(Object),
})
);
});

it('should render a ClayDatasetDisplay and emit an event on management toolbar filter done button click', () => {
Expand All @@ -553,7 +559,8 @@ describe('ClayDatasetDisplay', function() {

const spy = jest.spyOn(component, 'emit');

let filtersDropdown = component.refs.managementToolbar.refs.filters;
let filtersDropdown =
component.refs.managementToolbar.refs.filtersDropdown;
filtersDropdown.refs.portal.refs.dropdownButton.element.click();

jest.runAllTimers();
Expand Down Expand Up @@ -585,6 +592,50 @@ describe('ClayDatasetDisplay', function() {
);
});

it('should render a ClayDatasetDisplay and emit an event on creation menu item click', () => {
jest.useFakeTimers();

component = new ClayDatasetDisplay(defaultConfig);

const spy = jest.spyOn(component, 'emit');

const element =
component.refs.managementToolbar.refs.creationMenuDropdown.refs
.dropdown.refs.portal.element;
element.querySelector('ul li').click();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(
expect.objectContaining({
data: expect.any(Object),
name: 'creationMenuItemClicked',
originalEvent: expect.any(Object),
})
);
});

it('should render a ClayDatasetDisplay and emit an event on filter item click', () => {
jest.useFakeTimers();

component = new ClayDatasetDisplay(defaultConfig);

const spy = jest.spyOn(component, 'emit');

const element =
component.refs.managementToolbar.refs.filtersDropdown.refs.portal
.element;
element.querySelector('ul li:not(.dropdown-subheader)').click();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(
expect.objectContaining({
data: expect.any(Object),
name: 'filterItemClicked',
originalEvent: expect.any(Object),
})
);
});

it('should render a ClayDatasetDisplay and emit an event on management toolbar creation menu more button click', () => {
jest.useFakeTimers();

Expand Down
18 changes: 9 additions & 9 deletions packages/clay-dataset-display/src/__tests__/__snapshots__/ClayDatasetDisplay.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -776,7 +776,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -1507,7 +1507,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay and change view o
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -2416,7 +2416,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with grouped item
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -2977,7 +2977,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -3878,7 +3878,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -4917,7 +4917,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and li
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -5648,7 +5648,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with items and se
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down Expand Up @@ -6889,7 +6889,7 @@ exports[`ClayDatasetDisplay should render a ClayDatasetDisplay with ungrouped it
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container-fluid container-fluid-max-xl">
<form action="mySearchURL" method="POST" name="mySearchName" role="search">
<form action="mySearchURL" method="GET" name="mySearchName" role="search">
<div class="input-group">
<div class="input-group-item">
<input aria-label="Search" class="form-control input-group-inset input-group-inset-after" name="mySearchInputName" placeholder="Search for..." ref="search" type="text">
Expand Down
Loading