hooks RFC: useOrder

用来对数组进行排序，并且维护多个字段的排序状态。同时还提供一个切换排序状态函数。

API

export const ORDER_KIND = ['asc', 'desc', undefined] as const;

export type OrderKind = typeof ORDER_KIND[number];

export type Orders<T> = Partial<Record<keyof T, OrderKind>>;

export interface OrderResult<T> {
  orders: Orders<T>;
  nextOrder: (key: keyof T) => void;
  orderedData: Array<T>;
}

interface Props<T> {
  /**
   * @description specify the order state
   */
  orders?: Orders<T>;

  /**
   * @description default order state
   *
   */
  defaultOrders?: Orders<T>;

  /**
   * @description a callback on orders change
   */
  onOrdersChange?: (orders: Orders<T>) => void;

  /**
   * @description specify a orderKind to decide the order while call next order
   *
   * @default 'asc', 'desc', undefined
   */
  orderKind?: Array<OrderKind>;

  /**
   * @description the data for order;
   */
  data?: Array<T>;

  /**
   * @description a callback to order data
   *
   * @default _.orderBy
   */
  orderBy?: (data: Array<T>, orders: Orders<T>) => Array<T>;
}

function useOrder<T>(props: Props<T>): OrderResult<T>;

Demo

import React from 'react';

import { Button, DownOutlined, Space, UpOutlined } from '@supermarket/components';
import { useOrder } from '@supermarket/hooks';

function getIconByOrder(order?: 'asc' | 'desc') {
  switch (order) {
    case 'asc':
      return <UpOutlined />;
    case 'desc':
      return <DownOutlined />;
    default:
      return null;
  }
}

const DEFAULT_ORDERS: Record<string, 'asc' | 'desc' | undefined> = { name: 'asc', age: 'desc' };

export default () => {
  const { orders, nextOrder } = useOrder({
    defaultOrders: DEFAULT_ORDERS,
  });
  return (
    <Space>
      <Button
        style={{ width: 80 }}
        type="text"
        iconRight
        icon={getIconByOrder(orders?.name)}
        onClick={() => nextOrder('name')}
      >
        姓名
      </Button>
      <Button
        style={{ width: 80 }}
        type="text"
        iconRight
        icon={getIconByOrder(orders?.age)}
        onClick={() => nextOrder('age')}
      >
        年龄
      </Button>
    </Space>
  );
};