baseui
Version:
A React Component library implementing the Base design language
200 lines (197 loc) • 9.26 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = require("./styled-components");
var _utils = require("./utils");
var _buttonInternals = _interopRequireDefault(require("./button-internals"));
var _defaultProps = require("./default-props");
var _overrides = require("../helpers/overrides");
var _focusVisible = require("../utils/focusVisible");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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.
*/
class Button extends React.Component {
constructor(..._args) {
super(..._args);
_defineProperty(this, "state", {
isFocusVisible: false,
isHovered: false,
isPressed: false
});
// @ts-ignore
_defineProperty(this, "internalOnClick", (...args) => {
const {
isLoading,
onClick
} = this.props;
if (isLoading) {
args[0].preventDefault();
return;
}
// @ts-expect-error
onClick && onClick(...args);
});
_defineProperty(this, "handleFocus", event => {
if ((0, _focusVisible.isFocusVisible)(event)) {
this.setState({
isFocusVisible: true
});
}
});
// eslint-disable-next-line @typescript-eslint/no-unused-vars
_defineProperty(this, "handleBlur", event => {
if (this.state.isFocusVisible !== false) {
this.setState({
isFocusVisible: false
});
}
});
_defineProperty(this, "handleHovered", event => {
this.setState({
isHovered: true
});
// Forward the mouse enter event to user handler if provided
if (this.props.onMouseEnter) {
this.props.onMouseEnter(event);
}
});
_defineProperty(this, "handleNotHovered", event => {
this.setState({
isHovered: false
});
// Forward the mouse leave event to user handler if provided
if (this.props.onMouseLeave) {
this.props.onMouseLeave(event);
}
});
_defineProperty(this, "handlePressed", event => {
this.setState({
isPressed: true
});
// Forward the mouse down event to user handler if provided
if (this.props.onMouseDown) {
this.props.onMouseDown(event);
}
});
_defineProperty(this, "handleNotPressed", event => {
this.setState({
isPressed: false
});
// Forward the mouse up event to user handler if provided
if (this.props.onMouseUp) {
this.props.onMouseUp(event);
}
});
}
render() {
const {
overrides = {},
// eslint-disable-next-line @typescript-eslint/no-unused-vars
size,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
kind,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
shape,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
minHitArea,
isLoading,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
isSelected,
// Removing from restProps
// eslint-disable-next-line @typescript-eslint/no-unused-vars
startEnhancer,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
endEnhancer,
children,
forwardedRef,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
colors,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
backgroundSafe,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
widthType,
'aria-label': ariaLabel,
...restProps
} = this.props;
// Get overrides.
const isAnchor = 'href' in restProps && Boolean(restProps?.href);
const [BaseButton, baseButtonProps] = (0, _overrides.getOverrides)(
// adding both (1) BaseButton and (2) Root
// (1) because it's a Button under the hood
// (2) because we want consistency with the rest of the components
overrides.BaseButton || overrides.Root, isAnchor ? _styledComponents.AnchorBaseButton : _styledComponents.BaseButton);
const [LoadingSpinner, loadingSpinnerProps] = (0, _overrides.getOverrides)(overrides.LoadingSpinner, _styledComponents.LoadingSpinner);
const [LoadingSpinnerContainer, loadingSpinnerContainerProps] = (0, _overrides.getOverrides)(overrides.LoadingSpinnerContainer, _styledComponents.LoadingSpinnerContainer);
const sharedProps = {
...(0, _utils.getSharedProps)(this.props),
$isFocusVisible: this.state.isFocusVisible,
$isHovered: this.state.isHovered,
$isPressed: this.state.isPressed
};
const ariaLoadingElements = isLoading ? {
['aria-label']: ariaLabel ? ariaLabel : typeof children === 'string' ? `loading ${children}` : 'content is loading',
['aria-busy']: 'true',
['aria-live']: 'polite'
} : {};
const ariaDisabledProps = restProps?.disabled && isAnchor ? {
['aria-disabled']: true
} : {};
const ariaLabelProps = isLoading ? {} : ariaLabel ? {
['aria-label']: ariaLabel
} : typeof children === 'string' ? {
['aria-label']: children
} : {};
// Only need to apply aria-pressed if it's a standalone button with isSelected prop
const ariaPressedProps =
// Button group component will pass aria-checked prop
typeof baseButtonProps['aria-checked'] === 'undefined' && typeof isSelected === 'boolean' ? {
['aria-pressed']: isSelected
} : {};
return /*#__PURE__*/React.createElement(BaseButton, _extends({
ref: forwardedRef,
"data-baseweb": "button"
}, ariaLoadingElements, ariaDisabledProps, ariaLabelProps, ariaPressedProps, sharedProps, restProps, baseButtonProps, {
// Applies last to override passed in onClick
onClick: this.internalOnClick,
onFocus: (0, _focusVisible.forkFocus)({
...restProps,
...baseButtonProps
}, this.handleFocus),
onBlur: (0, _focusVisible.forkBlur)({
...restProps,
...baseButtonProps
}, this.handleBlur),
onMouseEnter: this.handleHovered,
onMouseLeave: this.handleNotHovered,
onMouseDown: this.handlePressed,
onMouseUp: this.handleNotPressed
}), isLoading ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_buttonInternals.default, _extends({}, this.props, {
isHovered: this.state.isHovered,
isPressed: this.state.isPressed,
isFocused: this.state.isFocusVisible
})), /*#__PURE__*/React.createElement(LoadingSpinnerContainer, _extends({}, sharedProps, loadingSpinnerContainerProps, {
"aria-hidden": true
}), /*#__PURE__*/React.createElement(LoadingSpinner, _extends({}, sharedProps, loadingSpinnerProps)))) : /*#__PURE__*/React.createElement(_buttonInternals.default, _extends({}, this.props, {
isHovered: this.state.isHovered,
isPressed: this.state.isPressed,
isFocused: this.state.isFocusVisible
})));
}
}
_defineProperty(Button, "defaultProps", _defaultProps.defaultProps);
const ForwardedButton = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(Button, _extends({
forwardedRef: ref
}, props)));
ForwardedButton.displayName = 'Button';
var _default = exports.default = ForwardedButton;