77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
|
'use client';
|
||
|
|
||
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
||
|
import * as React from 'react';
|
||
|
import { useControllableReducer } from '../utils/useControllableReducer';
|
||
|
import { DropdownActionTypes } from './useDropdown.types';
|
||
|
import { dropdownReducer } from './dropdownReducer';
|
||
|
|
||
|
/**
|
||
|
*
|
||
|
* Demos:
|
||
|
*
|
||
|
* - [Menu](https://mui.com/base-ui/react-menu/#hooks)
|
||
|
*
|
||
|
* API:
|
||
|
*
|
||
|
* - [useDropdown API](https://mui.com/base-ui/react-menu/hooks-api/#use-dropdown)
|
||
|
*/
|
||
|
export function useDropdown() {
|
||
|
var parameters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
||
|
var defaultOpen = parameters.defaultOpen,
|
||
|
onOpenChange = parameters.onOpenChange,
|
||
|
openProp = parameters.open,
|
||
|
_parameters$component = parameters.componentName,
|
||
|
componentName = _parameters$component === void 0 ? 'useDropdown' : _parameters$component;
|
||
|
var _React$useState = React.useState(''),
|
||
|
popupId = _React$useState[0],
|
||
|
setPopupId = _React$useState[1];
|
||
|
var _React$useState2 = React.useState(null),
|
||
|
triggerElement = _React$useState2[0],
|
||
|
setTriggerElement = _React$useState2[1];
|
||
|
var lastActionType = React.useRef(null);
|
||
|
var handleStateChange = React.useCallback(function (event, field, value, reason) {
|
||
|
if (field === 'open') {
|
||
|
onOpenChange == null || onOpenChange(event, value);
|
||
|
}
|
||
|
lastActionType.current = reason;
|
||
|
}, [onOpenChange]);
|
||
|
var controlledProps = React.useMemo(function () {
|
||
|
return openProp !== undefined ? {
|
||
|
open: openProp
|
||
|
} : {};
|
||
|
}, [openProp]);
|
||
|
var _useControllableReduc = useControllableReducer({
|
||
|
controlledProps: controlledProps,
|
||
|
initialState: defaultOpen ? {
|
||
|
open: true,
|
||
|
changeReason: null
|
||
|
} : {
|
||
|
open: false,
|
||
|
changeReason: null
|
||
|
},
|
||
|
onStateChange: handleStateChange,
|
||
|
reducer: dropdownReducer,
|
||
|
componentName: componentName
|
||
|
}),
|
||
|
_useControllableReduc2 = _slicedToArray(_useControllableReduc, 2),
|
||
|
state = _useControllableReduc2[0],
|
||
|
dispatch = _useControllableReduc2[1];
|
||
|
React.useEffect(function () {
|
||
|
if (!state.open && lastActionType.current !== null && lastActionType.current !== DropdownActionTypes.blur) {
|
||
|
triggerElement == null || triggerElement.focus();
|
||
|
}
|
||
|
}, [state.open, triggerElement]);
|
||
|
var contextValue = {
|
||
|
state: state,
|
||
|
dispatch: dispatch,
|
||
|
popupId: popupId,
|
||
|
registerPopup: setPopupId,
|
||
|
registerTrigger: setTriggerElement,
|
||
|
triggerElement: triggerElement
|
||
|
};
|
||
|
return {
|
||
|
contextValue: contextValue,
|
||
|
open: state.open
|
||
|
};
|
||
|
}
|