@activecollab/components
Version:
ActiveCollab Components
46 lines • 2.06 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _styled from "styled-components";
const _excluded = ["title", "renderIcon", "className", "index", "as"];
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 = _ref.title,
renderIcon = _ref.renderIcon,
className = _ref.className,
index = _ref.index,
as = _ref.as,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const Component = as || "a";
const icon = renderIcon();
const _useSelectedContext = useSelectedContext(),
selected = _useSelectedContext.selected,
setSelected = _useSelectedContext.setSelected;
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