35 lines
1.5 KiB
JavaScript
35 lines
1.5 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.InlineAction = void 0;
|
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
const react_1 = require("react");
|
|
const colors_1 = require("../helpers/colors");
|
|
const z_index_1 = require("../state/z-index");
|
|
const InlineAction = ({ renderAction, onClick, disabled, title, }) => {
|
|
const { tabIndex } = (0, z_index_1.useZIndex)();
|
|
const [hovered, setHovered] = (0, react_1.useState)(false);
|
|
const onPointerEnter = (0, react_1.useCallback)(() => {
|
|
setHovered(true);
|
|
}, []);
|
|
const onPointerLeave = (0, react_1.useCallback)(() => {
|
|
setHovered(false);
|
|
}, []);
|
|
const style = (0, react_1.useMemo)(() => {
|
|
return {
|
|
border: 'none',
|
|
background: disabled
|
|
? 'transparent'
|
|
: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
|
|
height: 24,
|
|
width: 24,
|
|
display: 'inline-flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderRadius: 3,
|
|
pointerEvents: disabled ? 'none' : 'auto',
|
|
};
|
|
}, [disabled, hovered]);
|
|
return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, title: title, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
|
|
};
|
|
exports.InlineAction = InlineAction;
|