@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
48 lines • 2.53 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/* eslint-disable no-console */
/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from 'react';
import { Checkbox, List, ListItem } from '@momentum-ui/react-collaboration';
var ListWithEventBubbling = /** @class */ (function (_super) {
__extends(ListWithEventBubbling, _super);
function ListWithEventBubbling() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
enableBubbling: true,
};
_this.onChange = function (e) {
_this.setState({ enableBubbling: e.target.checked });
};
_this.bubbledEventHandler = function (e) {
console.log("KeyDown Event \nKeyCode: ".concat(e.keyCode, " \nKey: ").concat(e.key));
};
return _this;
}
ListWithEventBubbling.prototype.render = function () {
return (React.createElement("div", null,
React.createElement("div", { className: "medium-4 columns", onKeyDown: this.bubbledEventHandler },
React.createElement(List, { shouldPropagateKeyDown: this.state.enableBubbling },
React.createElement(ListItem, { label: "List Item 1" }),
React.createElement(ListItem, { label: "List Item 2" }),
React.createElement(ListItem, { label: "List Item 3" }),
React.createElement(ListItem, { label: "List Item 4" }))),
React.createElement(Checkbox, { checked: this.state.enableBubbling, onChange: this.onChange, label: "Enable Event Bubbling (See Console)", htmlId: "checkbox-for-event-bubbling" })));
};
return ListWithEventBubbling;
}(React.PureComponent));
export default ListWithEventBubbling;
//# sourceMappingURL=ListWithEventBubbling.js.map