baseui
Version:
A React Component library implementing the Base design language
137 lines (134 loc) • 6.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _button = require("../button");
var _constants = require("./constants");
var _overrides = require("../helpers/overrides");
var _locale = require("../locale");
var _styledComponents = require("./styled-components");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
// @ts-ignore
function isIndexSelected(selected, index) {
if (!Array.isArray(selected) && typeof selected !== 'number') {
return false;
}
if (Array.isArray(selected)) {
return selected.includes(index);
}
return selected === index;
}
class ButtonGroup extends React.Component {
constructor(...args) {
super(...args);
_defineProperty(this, "childRefs", {});
}
render() {
const {
overrides = {},
mode,
children,
selected,
disabled,
onClick,
kind,
shape,
size,
wrap,
padding
} = this.props;
const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
const isRadio = mode === _constants.MODE.radio;
const isSimpleClickableBtnGroup = (!mode || Object.values(_constants.MODE).every(val => val !== mode)) && typeof selected === 'undefined'; // button group for simple clickable buttons(not checkbox or radio buttons)
const numItems = React.Children.count(children);
return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
"aria-label": ariaLabel || locale.buttongroup.ariaLabel,
"aria-labelledby": this.props['aria-labelledby'],
"aria-describedby": this.props['aria-describedby'],
"data-baseweb": "button-group",
role: isRadio ? 'radiogroup' : 'group',
$size: size,
$padding: padding,
$wrap: wrap
}, rootProps), React.Children.map(children, (child, index) => {
if (! /*#__PURE__*/React.isValidElement(child)) {
return null;
}
const isSelected = child.props.isSelected ? child.props.isSelected : isSimpleClickableBtnGroup ? undefined // avoid adding aria-pressed to buttons in actionable button group
: isIndexSelected(selected, index);
if (isRadio) {
this.childRefs[index] = /*#__PURE__*/React.createRef();
}
return /*#__PURE__*/React.cloneElement(child, {
disabled: disabled || child.props.disabled,
isSelected,
ref: isRadio ? this.childRefs[index] : undefined,
tabIndex: !isRadio || isSelected || isRadio && (!selected || selected === -1 || Array.isArray(selected) && selected.length === 0) && index === 0 ? 0 : -1,
onKeyDown: e => {
if (!isRadio) return;
const value = Number(selected) ? Number(selected) : 0;
if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
e.preventDefault && e.preventDefault();
const prevIndex = value - 1 < 0 ? numItems - 1 : value - 1;
onClick && onClick(e, prevIndex);
this.childRefs[prevIndex].current && this.childRefs[prevIndex].current.focus();
}
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
e.preventDefault && e.preventDefault();
const nextIndex = value + 1 > numItems - 1 ? 0 : value + 1;
onClick && onClick(e, nextIndex);
this.childRefs[nextIndex].current && this.childRefs[nextIndex].current.focus();
}
},
kind,
onClick: event => {
if (disabled) {
return;
}
if (child.props.onClick) {
child.props.onClick(event);
}
if (onClick) {
onClick(event, index);
}
},
shape,
size,
overrides: {
BaseButton: {
props: {
...(typeof child.props['aria-checked'] === 'boolean' ? {
'aria-checked': child.props['aria-checked']
} : isSimpleClickableBtnGroup ? {} : {
'aria-checked': isSelected
}),
role: child.props.role || isRadio ? 'radio' : !isSimpleClickableBtnGroup ? 'checkbox' : undefined
}
},
...child.props.overrides
}
});
})));
}
}
exports.default = ButtonGroup;
_defineProperty(ButtonGroup, "defaultProps", {
disabled: false,
onClick: () => {},
shape: _button.SHAPE.default,
size: _button.SIZE.default,
kind: _button.KIND.secondary,
padding: _constants.PADDING.none
});