mirror of
https://github.com/zoriya/v10.git
synced 2026-08-11 08:29:47 +00:00
44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
"use client";
|
|
import { mergeProps } from "../../utils/merge-props.js";
|
|
import { createButton } from "@videojs/core/dom";
|
|
import { useCallback } from "react";
|
|
//#region src/ui/hooks/use-button.ts
|
|
/**
|
|
* Hook for button behavior with keyboard and pointer interaction.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* const { getButtonProps, buttonRef } = useButton({
|
|
* displayName: 'PlayButton',
|
|
* onActivate: () => togglePlayback(),
|
|
* isDisabled: () => disabled,
|
|
* });
|
|
*
|
|
* return useRender('button', componentProps, {
|
|
* state,
|
|
* ref: [forwardedRef, buttonRef],
|
|
* props: [elementProps, getButtonProps],
|
|
* });
|
|
* ```
|
|
*
|
|
* @param params - Button configuration with activation handler and disabled check.
|
|
*/
|
|
function useButton(params) {
|
|
const { displayName, onActivate, isDisabled } = params;
|
|
const buttonRef = useCallback((element) => {
|
|
if (element && element.tagName !== "BUTTON") console.warn(`${displayName} should render a <button> element for accessibility`);
|
|
}, [displayName]);
|
|
return {
|
|
getButtonProps: useCallback((externalProps) => {
|
|
return mergeProps(createButton({
|
|
onActivate,
|
|
isDisabled
|
|
}), externalProps);
|
|
}, [onActivate, isDisabled]),
|
|
buttonRef
|
|
};
|
|
}
|
|
//#endregion
|
|
export { useButton };
|
|
|
|
//# sourceMappingURL=use-button.js.map
|