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