---

前言

今天要封装的SortButton 组件，主要用在表格列排序上，运用于更新路由并跳转更新，起到刷新页面仍然处于当前排序数据。

SortButton组件

1. 功能分析

（1）用于显示一个可以点击的按钮，用于排序数据
（2）接受一个field参数，用于指定要排序的字段
（3）可选择性接收一个sortParam参数，用于传递排序参数，如果未提供，则使用useSortParam的默认结果
（4）点击按钮时会触发排序动作，由handleSortClick函数定义

2. 代码+详细注释

// @/components/SortButton/index.tsx
import { ReactComponent as SortIcon } from "../../assets/sort_icon.svg";
import { SortButtonContainer } from "./styled";
import { useSortParam } from "@/hooks";
/**
 * 排序按钮组件
 * @param field - 要排序的字段名
 * @param sortParam - 排序参数，可选，默认使用useSortParam的结果
 */
export function SortButton<T extends string>({ field, sortParam }: { field: T; sortParam?: ReturnType<typeof useSortParam<T>> }) {
  // 获取排序参数
  const sortParamByQuery = useSortParam();
  // 获取排序字段、排序方式和排序事件处理函数
  const { sortBy, orderBy, handleSortClick } = sortParam ?? sortParamByQuery;
  // 判断当前字段是否为激活状态
  const isActive = sortBy === field;

  // 点击按钮时的事件处理函数
  const handleClick = () => {
    handleSortClick(field);
  };

  return (
    // 渲染排序按钮
    <SortButtonContainer>
      <button type="button" data-order={isActive ? orderBy : null} onClick={handleClick}>
        <SortIcon />
      </button>
    </SortButtonContainer>
  );
}
export default SortButton;
------------------------------------------------------------------------------
// @/components/SortButton/styled.tsx
import styled from "styled-components";
export const SortButtonContainer = styled.div`
  appearance: none;
  border: none;
  outline: none;
  background: none;
  display: inline-flex;
  vertical-align: text-top;
  margin-left: 8px;
  cursor: pointer;

  &[data-order="desc"] {
    svg > path:first-child {
      fill: var(--cd-primary-color);
    }
  }

  &[data-order="asc"] {
    svg > path:last-child {
      fill: var(--cd-primary-color);
    }
  }
`;

3. 使用到的全局hook代码

import { useEffect, useState, useCallback, useMemo } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { omit, omitNil } from "@/utils/object";

/**
 * @description 获取URL中的查询参数
 * @param search 查询参数字符串
 * @param names 需要获取的参数名称
 * @returns 参数对象
 */
function getSearchParams<T extends string = string>(search: string, names?: T[]): Partial<Record<T, string>> {
  const urlSearchParams = new URLSearchParams(search);
  const entries = [...urlSearchParams.entries()].filter((entry): entry is [T, string] => names == null || (names as string[]).includes(entry[0]));
  return Object.fromEntries(entries) as Partial<Record<T, string>>;
}

/**
 * @description 获取当前URL中的查询参数
 * @param names 需要获取的参数名称
 * @returns 参数对象
 */
export function useSearchParams<T extends string>(...names: T[]): Partial<Record<T, string>> {
  const location = useLocation();
  return useMemo(() => getSearchParams(location.search, names), [location.search, names]);
}

/**
 * @description 更新URL中的查询参数
 * @returns 更新后的URL
 */
export function useUpdateSearchParams<T extends string>(): (updater: (current: Partial<Record<T, string>>) => Partial<Record<T, string | null | undefined>>, replace?: boolean, routing?: boolean) => string {
  const navigate = useNavigate();
  const { search, pathname, hash } = useLocation();

  return useCallback(
    (updater, replace, routing = true) => {
      const oldParams: Partial<Record<T, string>> = getSearchParams(search);
      const newParams = omitNil(updater(oldParams));
      const newUrlSearchParams = new URLSearchParams(newParams as Record<string, string>);
      newUrlSearchParams.sort();
      const newQueryString = newUrlSearchParams.toString();
      const to = `${pathname}${newQueryString ? `?${newQueryString}` : ""}${hash}`;

      if (routing) {
        if (replace) {
          navigate.replace(to);
        } else {
          navigate.push(to);
        }
      }

      return to;
    },
    [hash, navigate, pathname, search]
  );
}

/**
 * @description 排序参数
 * @type SortType 排序字段类型
 */
export type OrderByType = "asc" | "desc";

/**
 * @description 获取排序参数
 * @param isSortBy 判断是否为排序字段的函数
 * @param defaultValue 默认排序字段
 * @returns 排序参数对象
 */
export function useSortParam<T extends string>(
  isSortBy?: (s?: string) => boolean,
  defaultValue?: string
): {
  sortBy: T | undefined;
  orderBy: OrderByType;
  sort?: string;
  handleSortClick: (sortRule?: T) => void;
} {
  type SortType = T | undefined;
  function isSortByType(s?: string): s is SortType {
    if (!isSortBy) return true;
    return isSortBy(s) || s === undefined;
  }
  function isOrderByType(s?: string): s is OrderByType {
    return s === "asc" || s === "desc";
  }
  const { sort: sortParam = defaultValue } = useSearchParams("sort");
  const updateSearchParams = useUpdateSearchParams<"sort" | "page">();
  let sortBy: SortType;
  let orderBy: OrderByType = "asc";
  if (sortParam) {
    const sortEntry = sortParam.split(",")[0];
    const indexOfPoint = sortEntry.indexOf(".");
    if (indexOfPoint < 0) {
      if (isSortByType(sortEntry)) {
        sortBy = sortEntry;
      }
    } else {
      const sBy = sortEntry.substring(0, indexOfPoint);
      if (isSortByType(sBy)) {
        sortBy = sBy;
        const oBy = sortEntry.substring(indexOfPoint + 1);
        if (isOrderByType(oBy)) {
          orderBy = oBy;
        }
      }
    }
  }
  const sort = sortBy ? `${sortBy}.${orderBy}` : undefined;

  const handleSortClick = (sortRule?: SortType) => {
    if (sortBy === sortRule) {
      if (orderBy === "desc") {
        updateSearchParams((params) => omit({ ...params, sort: `${sortRule}.asc` }, ["page"]), true);
      } else {
        updateSearchParams((params) => omit({ ...params, sort: `${sortRule}.desc` }, ["page"]), true);
      }
    } else {
      updateSearchParams((params) => omit({ ...params, sort: `${sortRule}.desc` }, ["page"]), true);
    }
  };

  return { sortBy, orderBy, sort, handleSortClick };
}
--------------------------------------------------------------------------
// @/utils/object.ts
export function omit<T extends Record<any, any>, U extends keyof T>(obj: T, keys: U[]): Omit<T, U> {
  const newObj = { ...obj };
  keys.forEach((key) => {
    delete newObj[key];
  });
  return newObj;
}
export function omitNil<T extends Record<any, any>>(obj: T): { [K in keyof T]: null extends T[K] ? T[K] | undefined : T[K] } {
  return Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null)) as any;
}

4. 使用方式

// 引入组件
import SortButton from "@/components/SortButton";
// 使用
<SortButton field="transactions" />

5. 效果展示

---

总结

下一篇讲【全局常用组件Echarts封装】。关注本栏目，将实时更新。