@fluentui/react
Version:
Reusable React components for building web experiences.
48 lines • 2.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonGridCell = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var react_hooks_1 = require("@fluentui/react-hooks");
var ButtonGridCell = function (props) {
var _a;
var defaultId = (0, react_hooks_1.useId)('gridCell');
var item = props.item, _b = props.id, id = _b === void 0 ? defaultId : _b, className = props.className, selected = props.selected, _c = props.disabled, disabled = _c === void 0 ? false : _c, onRenderItem = props.onRenderItem, cellDisabledStyle = props.cellDisabledStyle, cellIsSelectedStyle = props.cellIsSelectedStyle, index = props.index, label = props.label, getClassNames = props.getClassNames, onClick = props.onClick, onHover = props.onHover, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseEnter = props.onMouseEnter, onFocus = props.onFocus;
var buttonProps = (0, Utilities_1.getNativeProps)(props, Utilities_1.buttonProperties);
var handleClick = React.useCallback(function (event) {
if (onClick && !disabled) {
onClick(item, event);
}
}, [disabled, item, onClick]);
var handleMouseEnter = React.useCallback(function (ev) {
var didUpdateOnEnter = onMouseEnter && onMouseEnter(ev);
if (!didUpdateOnEnter && onHover && !disabled) {
onHover(item, ev);
}
}, [disabled, item, onHover, onMouseEnter]);
var handleMouseMove = React.useCallback(function (ev) {
var didUpdateOnMove = onMouseMove && onMouseMove(ev);
if (!didUpdateOnMove && onHover && !disabled) {
onHover(item, ev);
}
}, [disabled, item, onHover, onMouseMove]);
var handleMouseLeave = React.useCallback(function (ev) {
var didUpdateOnLeave = onMouseLeave && onMouseLeave(ev);
if (!didUpdateOnLeave && onHover && !disabled) {
onHover(undefined, ev);
}
}, [disabled, onHover, onMouseLeave]);
var handleFocus = React.useCallback(function (event) {
if (onFocus && !disabled) {
onFocus(item, event);
}
}, [disabled, item, onFocus]);
return (React.createElement(Button_1.CommandButton, tslib_1.__assign({ id: id, "data-index": index, "data-is-focusable": true, "aria-selected": selected, ariaLabel: label, title: label }, buttonProps, { className: (0, Utilities_1.css)(className, (_a = {},
_a['' + cellIsSelectedStyle] = selected,
_a['' + cellDisabledStyle] = disabled,
_a)), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onFocus: handleFocus, getClassNames: getClassNames }), onRenderItem(item)));
};
exports.ButtonGridCell = ButtonGridCell;
//# sourceMappingURL=ButtonGridCell.js.map