hooks RFC: useOrder

w51jfk4q  于 2022-11-06  发布在  SEO
关注(0)|答案(4)|浏览(216)

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

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

Screenshot

dojqjjoe

dojqjjoe1#

能描述下具体解决了什么问题么。

类似: #758

beq87vna

beq87vna2#

@brickspert 我追加了描述。主要是为了维护多个字段的排序状态。返回一个函数可以方便切换某个字段的排序状态。顺便可以对传入的数据进行排序

nbewdwxp

nbewdwxp3#

@MrHeer 能 参考 #758 完整的提一下 你的 RFC 吗,你现在这个太不完善了,不好评估

dldeef67

dldeef674#

@crazylxr 我加了一个例子,还有两个截图

相关问题