@activecollab/components
Version:
ActiveCollab Components
47 lines • 1.71 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _styled from "styled-components";
import React, { forwardRef } from "react";
import classNames from "classnames";
import { StyledCommandPaletteCommandItem, StyledIcon } from "./CommandPalette.styles";
import { useSelectedContext } from "./context";
import { ArrowRightIcon } from "../Icons";
import { Typography } from "../Typography/Typography";
export const CommandPaletteCommandItem = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
title,
renderIcon,
className,
index,
as,
...rest
} = _ref;
const Component = as || "a";
const icon = renderIcon();
const {
selected,
setSelected
} = useSelectedContext();
const onMouseEnter = () => {
setSelected(index);
};
return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteCommandItem, _extends({}, rest, {
as: Component,
ref: ref,
className: classNames("cp-item cp-command", className),
tabIndex: 1,
"aria-selected": selected === index,
onMouseEnter: onMouseEnter,
$selected: index === selected
}), /*#__PURE__*/React.createElement(StyledIcon, null, icon), /*#__PURE__*/React.createElement(_StyledTypography, {
overflow: "truncate",
whitespace: "no-wrap",
variant: "Body 1",
color: "primary"
}, title), /*#__PURE__*/React.createElement(ArrowRightIcon, null)));
});
CommandPaletteCommandItem.displayName = "CommandPaletteCommandItem";
var _StyledTypography = _styled(Typography).withConfig({
displayName: "CommandPaletteCommandItem___StyledTypography",
componentId: "sc-1t486ve-0"
})(["flex:1;"]);
//# sourceMappingURL=CommandPaletteCommandItem.js.map