Stefan Hacker
71 lines
3.6 KiB
JavaScript
71 lines
3.6 KiB
JavaScript
define(["require", "exports", "tslib", "react", "@fluentui/react-hooks", "@fluentui/utilities"], function (require, exports, tslib_1, React, react_hooks_1, utilities_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.useLink = void 0;
|
|
var getClassNames = (0, utilities_1.classNamesFunction)();
|
|
/**
|
|
* The useLink hook processes the Link component props and returns
|
|
* state, slots and slotProps for consumption by the component.
|
|
*/
|
|
var useLink = function (props, forwardedRef) {
|
|
var as = props.as, className = props.className, disabled = props.disabled, href = props.href, onClick = props.onClick, styles = props.styles, theme = props.theme, underline = props.underline;
|
|
var rootRef = React.useRef(null);
|
|
var mergedRootRefs = (0, react_hooks_1.useMergedRefs)(rootRef, forwardedRef);
|
|
useComponentRef(props, rootRef);
|
|
(0, utilities_1.useFocusRects)(rootRef);
|
|
var classNames = getClassNames(styles, {
|
|
className: className,
|
|
isButton: !href,
|
|
isDisabled: disabled,
|
|
isUnderlined: underline,
|
|
theme: theme,
|
|
});
|
|
var _onClick = function (ev) {
|
|
if (disabled) {
|
|
ev.preventDefault();
|
|
}
|
|
else if (onClick) {
|
|
onClick(ev);
|
|
}
|
|
};
|
|
var rootType = as ? as : href ? 'a' : 'button';
|
|
var state = {};
|
|
var slots = { root: rootType };
|
|
var slotProps = {
|
|
root: tslib_1.__assign(tslib_1.__assign({}, adjustPropsForRootType(rootType, props)), { 'aria-disabled': disabled, className: classNames.root, onClick: _onClick, ref: mergedRootRefs }),
|
|
};
|
|
return { state: state, slots: slots, slotProps: slotProps };
|
|
};
|
|
exports.useLink = useLink;
|
|
var useComponentRef = function (props, link) {
|
|
React.useImperativeHandle(props.componentRef, function () { return ({
|
|
focus: function () {
|
|
if (link.current) {
|
|
link.current.focus();
|
|
}
|
|
},
|
|
}); }, [link]);
|
|
};
|
|
var adjustPropsForRootType = function (RootType, props) {
|
|
// Deconstruct the props so we remove props like `as`, `theme` and `styles`
|
|
// as those will always be removed. We also take some props that are optional
|
|
// based on the RootType.
|
|
var as = props.as, disabled = props.disabled, target = props.target, href = props.href, theme = props.theme, getStyles = props.getStyles, styles = props.styles, componentRef = props.componentRef, underline = props.underline, restProps = tslib_1.__rest(props, ["as", "disabled", "target", "href", "theme", "getStyles", "styles", "componentRef", "underline"]);
|
|
// RootType will be a string if we're dealing with an html component
|
|
if (typeof RootType === 'string') {
|
|
// Remove the disabled prop for anchor elements
|
|
if (RootType === 'a') {
|
|
return tslib_1.__assign({ target: target, href: disabled ? undefined : href }, restProps);
|
|
}
|
|
// Add the type='button' prop for button elements
|
|
if (RootType === 'button') {
|
|
return tslib_1.__assign({ type: 'button', disabled: disabled }, restProps);
|
|
}
|
|
// Remove the target and href props for all other non anchor elements
|
|
return tslib_1.__assign(tslib_1.__assign({}, restProps), { disabled: disabled });
|
|
}
|
|
// Retain all props except 'as' for ReactComponents
|
|
return tslib_1.__assign({ target: target, href: href, disabled: disabled }, restProps);
|
|
};
|
|
});
|
|
//# sourceMappingURL=useLink.js.map
|