lodash#isMatch TypeScript Examples

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;
}

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,
            }}
          />
        )}
    </>
  );
}