@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
125 lines • 6.16 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 __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import { UIDConsumer } from 'react-uid';
import { Icon, List, ListItem, ListItemHeader, ListItemSection, } from '@momentum-ui/react-collaboration';
/**
* @deprecated - Components in the legacy folder (/src/legacy) are deprecated. Please use a component from the components folder (/src/components) instead. Legacy components may not follow accessibility standards.
**/
var DeviceListCall = /** @class */ (function (_super) {
__extends(DeviceListCall, _super);
function DeviceListCall() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
selectedIndex: _this.props.defaultSelected,
};
_this.handleSelect = function (e, opts) {
var onSelect = _this.props.onSelect;
var value = opts.value, eventKey = opts.eventKey;
e.preventDefault();
return _this.setState({
selectedIndex: eventKey,
}, function () { return onSelect && onSelect(e, { eventKey: eventKey, value: value }); });
};
return _this;
}
DeviceListCall.prototype.render = function () {
var _a = this.props, className = _a.className, devices = _a.devices, header = _a.header, props = __rest(_a, ["className", "devices", "header"]);
var selectedIndex = this.state.selectedIndex;
var otherProps = omit(__assign({}, props), ['defaultSelected', 'onSelect']);
var getLeftSection = function (deviceType) {
switch (deviceType) {
case 'device':
return React.createElement(Icon, { name: "spark-board_20" });
default:
return React.createElement(Icon, { name: "laptop_20" });
}
};
var getRightSection = function (uid, idx) {
if (!isNaN(selectedIndex)) {
if (idx === selectedIndex) {
return React.createElement(Icon, { name: "check_20", color: "blue-50" });
}
}
else if (uid === selectedIndex) {
return React.createElement(Icon, { name: "check_20", color: "blue-50" });
}
};
return (React.createElement(List, __assign({ className: className, onSelect: this.handleSelect, active: selectedIndex }, otherProps),
React.createElement(ListItemHeader, { header: header }),
devices.map(function (_a, idx) {
var eventKey = _a.eventKey, id = _a.id, name = _a.name, title = _a.title, type = _a.type, value = _a.value, deviceProps = __rest(_a, ["eventKey", "id", "name", "title", "type", "value"]);
return (React.createElement(UIDConsumer, { name: function (uid) { return "md-device-list-call-".concat(uid); }, key: "device-".concat(idx) }, function (uid) {
var uniqueKey = eventKey || id || uid;
return (React.createElement(ListItem, __assign({ value: value, label: name, title: title || name, id: uniqueKey }, deviceProps),
React.createElement(ListItemSection, { position: "left" }, getLeftSection(type)),
React.createElement(ListItemSection, { position: "center" },
React.createElement("div", { className: "md-list-item__header" }, name)),
React.createElement(ListItemSection, { position: "right" }, getRightSection(uniqueKey, idx))));
}));
})));
};
return DeviceListCall;
}(React.PureComponent));
DeviceListCall.defaultProps = {
className: '',
defaultSelected: null,
onSelect: null,
};
DeviceListCall.propTypes = {
/** HTML Class for associated input | '' */
className: PropTypes.string,
/** Default Index Value selected | null */
defaultSelected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
/** Required list of devices to show in list */
devices: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
value: PropTypes.string,
type: PropTypes.oneOf(['', 'device']),
title: PropTypes.string,
})).isRequired,
/** ListItem header */
header: PropTypes.string.isRequired,
/** Optional function called when list item is selected | null */
onSelect: PropTypes.func,
};
DeviceListCall.displayName = 'DeviceListCall';
export default DeviceListCall;
//# sourceMappingURL=index.js.map