lodash#isMatch TypeScript Examples
The following examples show how to use
lodash#isMatch.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.ts From backstage with Apache License 2.0 | 7 votes |
export function isLocationMatch(currentLocation: Location, toLocation: Path) {
const toDecodedSearch = new URLSearchParams(toLocation.search).toString();
const toQueryParameters = qs.parse(toDecodedSearch);
const currentDecodedSearch = new URLSearchParams(
currentLocation.search,
).toString();
const currentQueryParameters = qs.parse(currentDecodedSearch);
const matching =
isEqual(toLocation.pathname, currentLocation.pathname) &&
isMatch(currentQueryParameters, toQueryParameters);
return matching;
}
Example #2
Source File: WorkbenchTree.tsx From next-basics with GNU General Public License v3.0 | 4 votes |
function TreeNode({
node,
level,
isFirst,
isLast,
}: TreeNodeProps): ReactElement {
const isLeaf = !node.children?.length;
const {
hoverKey,
activeKey,
isTransformName,
basePaddingLeft,
showMatchedNodeOnly,
fixedActionsFor,
collapsible,
collapsedNodes,
clickFactory,
mouseEnterFactory,
mouseLeaveFactory,
contextMenuFactory,
onNodeToggle,
getCollapsedId,
} = useWorkbenchTreeContext();
const { allow, onDragStart, dragOverNode, dragStatus } =
useWorkbenchTreeDndContext();
const nodePaddingLeft = level * treeLevelPadding + basePaddingLeft - 2;
const searching = useContext(SearchingContext);
const [cacheDragStatus, setCacheDragStatus] = useState(null);
const [collapseClicked, setCollapseClicked] = useState(false);
const [collapsed, setCollapsed] = useState(
collapsedNodes?.includes(getCollapsedId?.(node)) ?? false
);
const onClick = useMemo(() => clickFactory?.(node), [clickFactory, node]);
const onMouseEnter = useMemo(
() => mouseEnterFactory?.(node),
[mouseEnterFactory, node]
);
const onMouseLeave = useMemo(
() => mouseLeaveFactory?.(node),
[mouseLeaveFactory, node]
);
const onContextMenu = useMemo(
() => contextMenuFactory?.(node),
[contextMenuFactory, node]
);
const isActive = activeKey && node.key === activeKey;
const nodeLabelCallback = useMemo(
() =>
isActive
? (element: HTMLElement) => {
element?.scrollIntoView({
block: "center",
inline: "center",
// behavior: "smooth",
});
}
: null,
// Only for initial active node.
// eslint-disable-next-line react-hooks/exhaustive-deps
[]
);
const nodeUid = useMemo(() => {
if (node.data) {
const getNodeUid = (data: Record<string, any>): number | string => {
return data.type === "mount-point"
? `${data.parent.$$uid}:${data.mountPoint}`
: data.$$uid;
};
return getNodeUid(node.data);
}
}, [node.data]);
useEffect(() => {
if (dragStatus === dragStatusEnum.inside) {
return;
}
if ([dragStatusEnum.top, dragStatusEnum.bottom].includes(dragStatus)) {
setCacheDragStatus(dragStatus);
}
}, [dragStatus]);
const isDragActive = useMemo(() => {
if (dragOverNode) {
const dragUid = dragOverNode.dataset.uid;
return Number(dragUid) === nodeUid;
}
return false;
}, [dragOverNode, nodeUid]);
const hoverStyle = useMemo((): React.CSSProperties => {
const commomStyle: React.CSSProperties = {};
let hoverStyle: React.CSSProperties;
if (isDragActive) {
if (dragStatus === dragStatusEnum.inside) {
hoverStyle = {
boxShadow: borderStyle,
background: "rgba(255, 255, 255, 0.1)",
};
}
}
return Object.assign(commomStyle, hoverStyle);
}, [isDragActive, dragStatus]);
const handleCollapse = useCallback((event: React.MouseEvent) => {
event.preventDefault();
event.stopPropagation();
setCollapseClicked(true);
setCollapsed((prev) => !prev);
}, []);
const preventMouseEvent = useCallback((event: React.MouseEvent) => {
event.preventDefault();
event.stopPropagation();
}, []);
useEffect(() => {
if (collapseClicked) {
onNodeToggle?.(getCollapsedId?.(node), collapsed);
}
}, [collapseClicked, collapsed, getCollapsedId, node, onNodeToggle]);
// Disallow collapse leaf nodes, or any nodes when searching.
const allowCollapse = collapsible && !isLeaf && !searching;
if (searching && showMatchedNodeOnly && !node.matched) {
return null;
}
return (
<>
{isDragActive && level !== 1 && cacheDragStatus === dragStatusEnum.top && (
<PlaceholderDOM
style={{
marginLeft: nodePaddingLeft,
}}
/>
)}
<li
draggable={allow && typeof nodeUid === "number"}
onDragStart={onDragStart}
data-uid={nodeUid}
style={hoverStyle}
>
<Link
className={classNames(styles.nodeLabelRow, {
[styles.active]: isActive,
[styles.hover]: hoverKey && node.key === hoverKey,
[styles.matched]:
searching && node.matchedSelf && !showMatchedNodeOnly,
[styles.fixedActions]:
fixedActionsFor &&
[]
.concat(fixedActionsFor)
.some((source) =>
isMatch(node.data as Record<string, unknown>, source)
),
[styles.collapsed]: allowCollapse && collapsed,
[styles.collapsible]: allowCollapse,
})}
tabIndex={0}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
onContextMenu={onContextMenu}
noEmptyHref
onClick={onClick}
{...pick(node.link, ["to", "href"])}
>
<span
className={styles.nodeLabel}
style={{
paddingLeft: nodePaddingLeft,
color: node.labelColor,
}}
ref={nodeLabelCallback}
>
<span className={styles.nodeIconWrapper}>
{allowCollapse && (
<span
className={styles.collapseIcon}
onClick={handleCollapse}
onMouseDown={preventMouseEvent}
title={collapsed ? "Expand" : "Collapse"}
role="button"
>
<GeneralIcon
icon={{
lib: "antd",
theme: "outlined",
icon: collapsed ? "right" : "down",
}}
/>
</span>
)}
<span className={styles.nodeIcon}>
{node.icon?.lib === "text" ? (
<WorkbenchTextIcon icon={node.icon} />
) : (
<GeneralIcon icon={node.icon} />
)}
</span>
</span>
<span className={styles.nodeName}>
{isTransformName
? smartDisplayForEvaluableString(node.name)
: node.name}
</span>
</span>
<WorkbenchMiniActionBar
className={styles.nodeActionsBar}
data={node.data}
isFirst={isFirst}
isLast={isLast}
/>
{node.badge && (
<span className={styles.badge}>
<GeneralIcon icon={node.badge} />
</span>
)}
</Link>
{isLeaf || <TreeList nodes={node.children} level={level + 1} />}
</li>
{isDragActive &&
level !== 1 &&
cacheDragStatus === dragStatusEnum.bottom && (
<PlaceholderDOM
style={{
marginLeft: nodePaddingLeft,
}}
/>
)}
</>
);
}