@fluentui/react/lib-amd/utilities/ButtonGrid/ButtonGridCell.js

Reusable React components for building web experiences.

define(["require", "exports", "tslib", "react", "../../Utilities", "../../Button", "@fluentui/react-hooks"], function (require, exports, tslib_1, React, Utilities_1, Button_1, react_hooks_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.ButtonGridCell = void 0;
    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