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

Reusable React components for building web experiences.

import { __assign } from "tslib";
import * as React from 'react';
import { css, getNativeProps, buttonProperties } from '../../Utilities';
import { CommandButton } from '../../Button';
import { useId } from '@fluentui/react-hooks';
export var ButtonGridCell = function (props) {
    var _a;
    var defaultId = 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 = getNativeProps(props, 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(CommandButton, __assign({ id: id, "data-index": index, "data-is-focusable": true, "aria-selected": selected, ariaLabel: label, title: label }, buttonProps, { className: css(className, (_a = {},
            _a['' + cellIsSelectedStyle] = selected,
            _a['' + cellDisabledStyle] = disabled,
            _a)), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onFocus: handleFocus, getClassNames: getClassNames }), onRenderItem(item)));
};
//# sourceMappingURL=ButtonGridCell.js.map