@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
256 lines • 13.5 kB
JavaScript
/** @component button */
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 { Loading } from '@momentum-ui/react-collaboration';
import omit from 'lodash/omit';
import { UIDConsumer } from 'react-uid';
import ButtonGroupContext from '../ButtonGroupContext';
import SelectableContext, { makeKeyboardKey } from '../SelectableContext';
import mapContextToProps from '@restart/context/mapContextToProps';
/**
* @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 Button = /** @class */ (function (_super) {
__extends(Button, _super);
function Button() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleKeyDown = function (e, eventKey) {
var _a = _this.props, onClick = _a.onClick, parentOnSelect = _a.parentOnSelect, parentKeyDown = _a.parentKeyDown, preventKeyboardDoubleClick = _a.preventKeyboardDoubleClick;
if (e.which === 32 || e.which === 13 || e.charCode === 32 || e.charCode === 13) {
if (preventKeyboardDoubleClick) {
e.preventDefault();
}
parentOnSelect && parentOnSelect(e, { eventKey: eventKey });
onClick && onClick(e);
}
else {
parentKeyDown && parentKeyDown(e, eventKey);
}
};
_this.handleClick = function (e, eventKey) {
var _a = _this.props, onClick = _a.onClick, parentOnSelect = _a.parentOnSelect;
onClick && onClick(e);
parentOnSelect && parentOnSelect(e, { eventKey: eventKey });
};
_this.handleKeyUp = function (e) {
var preventKeyboardDoubleClick = _this.props.preventKeyboardDoubleClick;
if (preventKeyboardDoubleClick &&
(e.which === 32 || e.which === 13 || e.charCode === 32 || e.charCode === 13)) {
e.preventDefault();
}
};
return _this;
}
Button.prototype.render = function () {
var _this = this;
var _a = this.props, active = _a.active, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, ariaPressed = _a.ariaPressed, children = _a.children, circle = _a.circle, className = _a.className, color = _a.color, containerLarge = _a.containerLarge, disabled = _a.disabled, eventKey = _a.eventKey, expand = _a.expand, href = _a.href, keyboardKey = _a.keyboardKey, label = _a.label, loading = _a.loading, large = _a.large, removeStyle = _a.removeStyle, size = _a.size, style = _a.style, tag = _a.tag, type = _a.type, props = __rest(_a, ["active", "ariaLabel", "ariaLabelledBy", "ariaPressed", "children", "circle", "className", "color", "containerLarge", "disabled", "eventKey", "expand", "href", "keyboardKey", "label", "loading", "large", "removeStyle", "size", "style", "tag", "type"]);
var otherProps = omit(__assign({}, props), [
'id',
'onClick',
'parentOnSelect',
'parentKeyDown',
'preventKeyboardDoubleClick',
]);
var isButtonGroupIcon = function (isButtonGroup) {
return isButtonGroup &&
children &&
React.Children.toArray(children).reduce(function (prev, child) { return (prev ? prev : child.type && child.type.displayName === 'Icon'); }, false);
};
var getChildren = function () {
return (children && [
loading && (React.createElement("div", { key: "child-0" },
React.createElement(Loading, null))),
React.createElement("span", { className: "md-button__children", style: { opacity: "".concat(loading ? 0 : 1) }, key: "child-1" }, children),
]);
};
var getColor = function () {
if (removeStyle)
return false;
return color === 'none' ? 'color-none' : color;
};
// Method for deprecated large prop
var getSize = function () {
if (removeStyle)
return false;
/* eslint-disable no-console */
var validButtonSize = checkButtonSize();
if (!circle && !validButtonSize) {
console.warn('[@momentum-ui/react-collaboration] Button: selected size is not supported for non-circular button. Size will default to 36');
return '36';
}
else if (large) {
console.warn('[@momentum-ui/react-collaboration] Button: large prop is deprecated and will be removed. Please use size prop.');
return !circle ? '52' : '44';
}
else {
return size === 'none' ? 'size-none' : size;
}
/* eslint-enable no-console */
};
var checkButtonSize = function () { return ['none', '28', '36', '40', '52', 28, 36, 40, 52].includes(size); };
var getTabIndex = function (_a) {
var isButtonGroup = _a.isButtonGroup, focus = _a.focus;
if (!isButtonGroup) {
return 0;
}
else if (isButtonGroup && focus) {
return 0;
}
else
return -1;
};
var withContext = function () { return (React.createElement(UIDConsumer, { name: function (id) { return "md-button-".concat(id); } }, function (id) { return (React.createElement(ButtonGroupContext.Consumer, null, function (context) {
var contextProps = {};
contextProps.id = _this.props.id || id;
contextProps.uniqueKey = eventKey || contextProps.id;
contextProps.active =
active || (context && context.active === contextProps.uniqueKey);
contextProps.isButtonGroup = (context && context.isButtonGroup) || false;
contextProps.focus = context && context.focus === contextProps.uniqueKey;
contextProps.width = (context && context.width) || null;
contextProps.tabIndex = disabled ? null : getTabIndex(contextProps);
return createElement(contextProps);
})); })); };
var keyboardNavKey = makeKeyboardKey(keyboardKey || label || children);
var createElement = function (cxtProps) {
return React.createElement(tag, __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ ref: function (ref) { return (_this.button = ref); }, className: 'md-button' +
"".concat((circle && " md-button--circle") || '') +
"".concat((isButtonGroupIcon(cxtProps.isButtonGroup) && " md-button--icon-group") || '') +
"".concat((getSize() && " md-button--".concat(getSize())) || '') +
"".concat((expand && " md-button--expand") || '') +
"".concat((color && " md-button--".concat(getColor())) || '') +
"".concat((removeStyle && ' md-button--none') || '') +
"".concat((cxtProps.active && !disabled && " active") || '') +
"".concat((className && " ".concat(className)) || ''), id: cxtProps.id, 'data-md-event-key': cxtProps.uniqueKey, onClick: function (e) { return _this.handleClick(e, cxtProps.uniqueKey); }, onKeyDown: function (e) { return _this.handleKeyDown(e, cxtProps.uniqueKey); }, onKeyUp: _this.handleKeyUp, style: __assign({ style: style }, (cxtProps.width && { width: cxtProps.width })), disabled: disabled || loading, alt: ariaLabel || label, href: (tag === 'a' && href) || undefined, type: (tag !== 'a' && type) || '' }, (keyboardNavKey && { 'data-md-keyboard-key': keyboardNavKey })), (cxtProps.focus && { 'aria-current': "".concat(cxtProps.focus) })), (ariaLabel ? { 'aria-label': ariaLabel } : { 'aria-labelledby': ariaLabelledBy })), { 'aria-pressed': ariaPressed }), (ariaPressed && ariaPressed !== '' ? { 'aria-pressed': ariaPressed } : {})), { tabIndex: cxtProps.tabIndex }), (tag && tag !== 'button' && { role: 'button' })), otherProps), getChildren());
};
return label ? (React.createElement("div", { className: "md-button__container".concat(containerLarge ? '' : '--small') },
withContext(),
React.createElement("div", { className: "md-button__label" }, label))) : (withContext());
};
return Button;
}(React.Component));
Button.propTypes = {
/** @prop Sets active css styling | false */
active: PropTypes.bool,
/** @prop Text to display for blindness accessibility features | '' */
ariaLabel: PropTypes.string,
/** @prop ID to reference for blindness accessibility feature | '' */
ariaLabelledBy: PropTypes.string,
/** @prop Boolean value for aria-pressed (toggle button accessibility) | null */
ariaPressed: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
/** @prop Children Nodes to Render inside Button | null */
children: PropTypes.node,
/** @prop Sets circle css styling | false */
circle: PropTypes.bool,
/** @prop Optional css class string | '' */
className: PropTypes.string,
/** @prop Sets optional Button color | '' */
color: PropTypes.string,
/** @prop Sets containerLarge css styling | false */
containerLarge: PropTypes.bool,
/** @prop Sets the attribute disabled to Button | false */
disabled: PropTypes.bool,
/** @prop Unique string used for tracking events among ancestors | '' */
eventKey: PropTypes.string,
/** @prop Sets expand css styling to widen the Button | false */
expand: PropTypes.bool,
/** @prop Href prop changes element to anchor element | '' */
href: PropTypes.string,
/** @prop Sets Button id | null */
id: PropTypes.string,
/** @prop Unique string used for keyboard navigation | '' */
keyboardKey: PropTypes.string,
/** @prop Text to display inside the button | '' */
label: PropTypes.string,
/** @prop Depreciated large css styling, use size instead | false */
large: PropTypes.bool,
/** @prop Activates the loading animation and sets the button to disabled | false */
loading: PropTypes.bool,
/** @prop Handler to be called when the user taps the button | null */
onClick: PropTypes.func,
// Internal Context Use Only
parentKeyDown: PropTypes.func,
// Internal Context Use Only
parentOnSelect: PropTypes.func,
/** @prop Optional prop to prevent space/enter running onClick twice on buttons */
preventKeyboardDoubleClick: PropTypes.bool,
/** @prop Optional prop to remove Button's default style | false */
removeStyle: PropTypes.bool,
/** @prop Optional string or number size prop | 36 */
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** @prop Additional css styling applied to the button | {} */
style: PropTypes.object,
/** @prop Optional tag to define type of element | 'button' */
tag: PropTypes.oneOf(['button', 'input', 'a']),
/** @prop Optional html type | 'button' */
type: PropTypes.oneOf(['button', 'reset', 'submit']),
};
Button.defaultProps = {
active: false,
ariaLabel: '',
ariaLabelledBy: '',
ariaPressed: null,
children: null,
circle: false,
className: '',
color: '',
containerLarge: false,
disabled: false,
eventKey: '',
expand: false,
href: '',
id: '',
keyboardKey: '',
label: '',
large: false,
loading: false,
onClick: null,
parentKeyDown: null,
parentOnSelect: null,
preventKeyboardDoubleClick: false,
removeStyle: false,
size: 36,
style: {},
tag: 'button',
type: 'button',
};
Button.displayName = 'Button';
export default mapContextToProps(SelectableContext, function (context) { return context; }, Button);
//# sourceMappingURL=index.js.map