@activecollab/components
Version:
ActiveCollab Components
81 lines • 2.71 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _styled2 from "styled-components";
import _styled from "styled-components";
import React, { forwardRef } from "react";
import classNames from "classnames";
import { StyledCommandPaletteItem, StyledCommandPaletteItemLoader, StyledIcon } from "./CommandPalette.styles";
import { useSelectedContext } from "./context";
import { useSearchContext } from "./context/SearchContext";
import { findHighlightedSearch } from "../../utils/findHighlightedSearch";
import { SkeletonLoader } from "../Loaders";
import { Typography } from "../Typography/Typography";
const generateRandomWidth = () => {
// generate range 30-80
const randomNum = Math.round(Math.random() * 30 + 30);
return randomNum + "%";
};
export const CommandPaletteItem = /*#__PURE__*/forwardRef((_ref, ref) => {
let {
title,
renderIcon,
className,
index,
loading,
as,
...rest
} = _ref;
const Component = as || "a";
const icon = renderIcon && renderIcon();
const {
selected,
setSelected
} = useSelectedContext();
const {
search
} = useSearchContext();
const onMouseEnter = () => {
setSelected(index);
};
if (loading) {
return /*#__PURE__*/React.createElement(StyledCommandPaletteItemLoader, {
"aria-busy": true,
"aria-disabled": true
}, /*#__PURE__*/React.createElement(_StyledSkeletonLoader, null), /*#__PURE__*/React.createElement(_StyledSkeletonLoader2, {
$_css: generateRandomWidth()
}));
}
return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(StyledCommandPaletteItem, _extends({}, rest, {
as: Component,
ref: ref,
className: classNames("cp-item", className),
tabIndex: 1,
"aria-selected": selected === index,
onMouseEnter: onMouseEnter,
$selected: index === selected
}), /*#__PURE__*/React.createElement(StyledIcon, null, icon), search && title ? /*#__PURE__*/React.createElement(Typography, {
overflow: "truncate",
whitespace: "no-wrap",
variant: "Body 1",
color: "primary",
dangerouslySetInnerHTML: {
__html: findHighlightedSearch(search, title)
}
}) : null));
});
CommandPaletteItem.displayName = "CommandPaletteItem";
var _StyledSkeletonLoader = _styled(SkeletonLoader).withConfig({
displayName: "CommandPaletteItem___StyledSkeletonLoader",
componentId: "sc-6tfj5q-0"
})({
width: 24,
height: 24,
borderRadius: "100%"
});
var _StyledSkeletonLoader2 = _styled(SkeletonLoader).withConfig({
displayName: "CommandPaletteItem___StyledSkeletonLoader2",
componentId: "sc-6tfj5q-1"
})(p => ({
width: p.$_css,
height: 16
}));
//# sourceMappingURL=CommandPaletteItem.js.map