baseui
Version:
A React Component library implementing the Base design language
180 lines (178 loc) • 8.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _chevronDownSmall = _interopRequireDefault(require("../icon/chevron-down-small"));
var _locale = require("../locale");
var _overrides = require("../helpers/overrides");
var _styledComponents = require("./styled-components");
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); } /*
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.
*/
const Panel = ({
'aria-controls': ariaControls,
children,
disabled = false,
expanded = false,
onChange = () => {},
onClick = () => {},
onKeyDown = () => {},
overrides = {},
title = '',
renderAll = false
},
// @ts-ignore
ref) => {
const [localState, setLocalState] = React.useState({
expanded,
isFocusVisible: false,
elementHeight: 0,
animationInProgress: false
});
const handleFocus = React.useCallback(event => {
if ((0, _focusVisible.isFocusVisible)(event)) {
setLocalState({
...localState,
isFocusVisible: true
});
}
}, [localState]);
const handleBlur = React.useCallback(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
event => {
if (localState.isFocusVisible) {
setLocalState({
...localState,
isFocusVisible: false
});
}
}, [localState]);
const handleClick = React.useCallback(e => {
if (disabled) {
return;
}
typeof onChange === 'function' && onChange({
expanded: !expanded
});
typeof onClick === 'function' && onClick(e);
}, [expanded, disabled, onChange, onClick]);
const handleKeyDown = React.useCallback(e => {
if (disabled) {
return;
}
const ENTER = 13;
const SPACE = 32;
if (e.keyCode === ENTER || e.keyCode === SPACE) {
typeof onChange === 'function' && onChange({
expanded: !expanded
});
if (e.keyCode === SPACE) {
e.preventDefault(); // prevent jumping scroll when using Space
}
}
typeof onKeyDown === 'function' && onKeyDown(e);
}, [expanded, disabled, onChange, onKeyDown]);
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const _animateRef = React.useRef(null);
React.useEffect(() => {
if (_animateRef.current) {
const height = _animateRef.current.getBoundingClientRect().height;
// After the first render, when everything is in the DOM, update the local
//state to indicate an animation is in progress.
if (expanded !== localState.expanded) {
setLocalState({
...localState,
expanded,
animationInProgress: true
});
} else if (parseInt(localState.elementHeight) !== height) {
// After the second render (where child elements were added to the Content)
//the Content height now reflects the true height. This kicks off the actual
//animation.
setLocalState({
...localState,
elementHeight: height ? `${height}px` : 0
});
}
}
}, [_animateRef.current, expanded, localState.elementHeight, localState.expanded, setLocalState]);
const contentHeight = React.useMemo(() => {
// When closing, the first render will re-query the content element for the new
//height and set the height of the animation container from auto to a px value.
if (!expanded && localState.expanded) {
const height = _animateRef.current.getBoundingClientRect().height;
setLocalState({
...localState,
elementHeight: height ? `${height}px` : 0
});
return localState.elementHeight;
}
if (!localState.expanded) {
return 0;
}
// When no longer animating, set the height to auto to accommodate dynamic nested components.
return localState.animationInProgress ? localState.elementHeight : 'auto';
}, [expanded, localState.expanded, localState.animationInProgress, localState.elementHeight]);
const sharedProps = {
$disabled: disabled,
$expanded: expanded,
$isFocusVisible: localState.isFocusVisible
};
const {
PanelContainer: PanelContainerOverride,
Header: HeaderOverride,
Content: ContentOverride,
ContentAnimationContainer: ContentAnimationContainerOverride,
ToggleIcon: ToggleIconOverride,
ToggleIconGroup: ToggleIconGroupOverride
} = overrides;
const [PanelContainer, panelContainerProps] = (0, _overrides.getOverrides)(PanelContainerOverride, _styledComponents.PanelContainer);
const [Header, headerProps] = (0, _overrides.getOverrides)(HeaderOverride, _styledComponents.Header);
const [Content, contentProps] = (0, _overrides.getOverrides)(ContentOverride, _styledComponents.Content);
const [ContentAnimationContainer, contentAnimationProps] = (0, _overrides.getOverrides)(ContentAnimationContainerOverride, _styledComponents.ContentAnimationContainer);
const [ToggleIconGroup, toggleIconGroupProps] = (0, _overrides.getOverrides)(ToggleIconGroupOverride, _styledComponents.ToggleIconGroup);
const [ToggleIcon, toggleIconProps] = (0, _overrides.getOverrides)(ToggleIconOverride, _styledComponents.ToggleIcon);
return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(PanelContainer, _extends({}, sharedProps, panelContainerProps), /*#__PURE__*/React.createElement(Header, _extends({
tabIndex: 0,
role: "button",
"aria-expanded": expanded,
"aria-disabled": disabled || null
}, sharedProps, headerProps, ariaControls ? {
'aria-controls': ariaControls
} : {}, {
onClick: handleClick,
onKeyDown: handleKeyDown,
onFocus: (0, _focusVisible.forkFocus)(headerProps, handleFocus),
onBlur: (0, _focusVisible.forkBlur)(headerProps, handleBlur),
ref: ref
}), title, /*#__PURE__*/React.createElement(ToggleIcon, _extends({
viewBox: "0 0 24 24",
title: localState.expanded ? locale.accordion.collapse : locale.accordion.expand,
$size: 24
}, toggleIconProps, sharedProps), /*#__PURE__*/React.createElement(ToggleIconGroup, _extends({}, sharedProps, toggleIconGroupProps), /*#__PURE__*/React.createElement(_chevronDownSmall.default, null)))), /*#__PURE__*/React.createElement(ContentAnimationContainer, _extends({}, sharedProps, contentAnimationProps, {
$height: contentHeight,
onTransitionEnd: () => {
if (localState.animationInProgress) {
setLocalState({
...localState,
animationInProgress: false
});
}
}
}), /*#__PURE__*/React.createElement(Content, _extends({
ref: _animateRef
}, sharedProps, contentProps, ariaControls ? {
id: ariaControls
} : {}), localState.expanded || renderAll || localState.animationInProgress ? children : null))));
};
const ForwardedPanel = /*#__PURE__*/React.forwardRef(Panel);
ForwardedPanel.displayName = 'Panel';
var _default = exports.default = ForwardedPanel;