@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
192 lines • 9.36 kB
JavaScript
/** @component select */
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;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import filter from 'lodash/filter';
import find from 'lodash/find';
import isEqual from 'lodash/isEqual';
import omit from 'lodash/omit';
import uniqueId from 'lodash/uniqueId';
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Icon, List } from '@momentum-ui/react-collaboration';
import EventOverlay from '../EventOverlay';
import SelectContext from '../SelectContext';
/**
* @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 Select = /** @class */ (function (_super) {
__extends(Select, _super);
function Select() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpen: false,
selected: [],
selectedIndex: [],
anchorNode: null,
anchorWidth: null,
id: _this.props.id || uniqueId('md-select-'),
};
_this.hidePopover = function () {
_this.setState({
isOpen: false,
});
};
_this.handleSelect = function (e, opts) {
e.preventDefault();
var _a = _this.state, selected = _a.selected, selectedIndex = _a.selectedIndex;
var isMulti = _this.props.isMulti;
var value = opts.value, label = opts.label, eventKey = opts.eventKey, keyboardKey = opts.keyboardKey;
var isActive = find(selected, { value: value, label: label });
!isMulti && _this.setState({ isOpen: false });
if (isActive && !isMulti)
return;
if (isActive && isMulti) {
return _this.setState({
selected: filter(selected, function (item) { return !isEqual(item, { value: value, label: label }); }),
selectedIndex: selectedIndex.filter(function (i) { return i !== keyboardKey; }),
});
}
else if (!isActive && !isMulti) {
return _this.setState({
selected: [{ value: value, label: label }],
selectedIndex: [eventKey],
});
}
else {
return _this.setState({
selected: __spreadArray(__spreadArray([], selected, true), [{ value: value, label: label }], false),
selectedIndex: __spreadArray(__spreadArray([], selectedIndex, true), [keyboardKey], false),
});
}
};
_this.choosePosition = function () {
var _a = _this.state, isOpen = _a.isOpen, anchorNode = _a.anchorNode;
isOpen && _this.setAnchorWidth(anchorNode);
};
_this.handleToggle = function () {
_this.setState({
isOpen: !_this.state.isOpen,
anchorNode: ReactDOM.findDOMNode(_this.clickTextField).parentNode,
}, function () { return _this.choosePosition(); });
};
_this.setAnchorWidth = function (elementAnchor) {
var anchor = elementAnchor && elementAnchor.getBoundingClientRect();
_this.setState({ anchorWidth: anchor.width });
};
return _this;
}
Select.prototype.componentDidUpdate = function (prevProps, prevState) {
prevState.selected !== this.state.selected &&
this.props.onSelect &&
this.props.onSelect(this.state.selected);
};
Select.prototype.render = function () {
var _this = this;
var _a = this.props, buttonProps = _a.buttonProps, children = _a.children, className = _a.className, defaultValue = _a.defaultValue, isDynamic = _a.isDynamic, isMulti = _a.isMulti, listProps = _a.listProps, overlayProps = _a.overlayProps, props = __rest(_a, ["buttonProps", "children", "className", "defaultValue", "isDynamic", "isMulti", "listProps", "overlayProps"]);
var _b = this.state, anchorNode = _b.anchorNode, anchorWidth = _b.anchorWidth, id = _b.id, isOpen = _b.isOpen, selected = _b.selected, selectedIndex = _b.selectedIndex;
var otherProps = omit(__assign({}, props), ['id', 'onSelect']);
var currentValue = function () {
if (!isMulti && selected.length)
return selected[0].label;
if (selected.length === 1) {
return "".concat(selected.length, " Item Selected");
}
else if (selected.length) {
return "".concat(selected.length, " Items Selected");
}
};
var label = (React.createElement("div", { className: "md-select__label", id: "".concat(id, "__label") },
currentValue() || defaultValue,
React.createElement(Icon, { name: "arrow-down_16" })));
var text = (React.createElement(Button, __assign({ active: isOpen, ariaLabelledBy: "".concat(id, "__label"), "aria-haspopup": "listbox", id: id, name: id, onClick: this.handleToggle, ref: function (ref) { return (_this.clickTextField = ref); } }, buttonProps), label));
var dropdownElement = isOpen && (React.createElement(EventOverlay, __assign({ allowClickAway: true, anchorNode: anchorNode, close: this.hidePopover, isDynamic: isDynamic, isOpen: isOpen }, overlayProps),
React.createElement(List, __assign({ onSelect: this.handleSelect, style: { width: anchorWidth }, ref: function (ref) { return (_this.list = ref); }, role: "listbox", itemRole: "option", active: selectedIndex, "aria-labelledby": "".concat(id, "__label"), "aria-multiselectable": isMulti }, listProps), children)));
return (React.createElement(SelectContext.Provider, { value: isMulti },
React.createElement("div", __assign({ className: 'md-input-container md-select' + "".concat((className && " ".concat(className)) || '') }, otherProps),
text,
dropdownElement)));
};
return Select;
}(React.Component));
Select.propTypes = {
/** @prop Sets the Button props | null */
buttonProps: PropTypes.shape({}),
/** @prop Children nodes to render inside Select component | null */
children: PropTypes.node,
/** @prop Optional CSS class name | '' */
className: PropTypes.string,
/** @prop Set the default selected option | '' */
defaultValue: PropTypes.string,
/** @prop Set ID for Select Component | null */
id: PropTypes.string,
/** @prop Sets the Select EventOverlay to be dynamic | true */
isDynamic: PropTypes.bool,
/** @prop Optional prop to know if multiple Select children can be active | false */
isMulti: PropTypes.bool,
/** @prop Sets the List props | null */
listProps: PropTypes.shape({}),
/** @prop Callback function invoked when user selects an item | null */
onSelect: PropTypes.func,
/** @prop Sets the EventOverlay props | null */
overlayProps: PropTypes.shape({}),
};
Select.defaultProps = {
buttonProps: null,
children: null,
className: '',
defaultValue: '',
id: null,
isDynamic: true,
isMulti: false,
listProps: null,
onSelect: null,
overlayProps: null,
};
Select.displayName = 'Select';
export default Select;
//# sourceMappingURL=index.js.map