@appbuckets/react-ui/esm/RxTable/lib/useDataSorting.js

Just Another React UI Framework

import { __read } from 'tslib';
import * as React from 'react';
import arraySort from 'array-sort';
import { useAutoControlledValue } from '@appbuckets/react-ui-core';
import areEqualStringArray from '../../utils/areEqualStringArray.js';
import 'clsx';

/* --------
 * Hook definition
 * -------- */
function useDataSorting(config) {
  var data = config.data,
    defaultReverseSorting = config.defaultReverseSorting,
    defaultSort = config.defaultSort,
    onSortChange = config.onSortChange,
    reverseSorting = config.reverseSorting,
    sort = config.sort;
  // ----
  // Define internal State
  // ----
  var _a = __read(
      useAutoControlledValue([], {
        defaultProp: defaultSort,
        prop: sort,
      }),
      2
    ),
    sorting = _a[0],
    trySetSorting = _a[1];
  var _b = __read(
      useAutoControlledValue(false, {
        defaultProp: defaultReverseSorting,
        prop: reverseSorting,
      }),
      2
    ),
    isSortReversed = _b[0],
    trySetReverseSorting = _b[1];
  // ----
  // Handlers
  // ----
  var handleChangeSorting = React.useCallback(
    function (newSorting, reverse) {
      /** Check if sorting is changed */
      var isSortChanged = !areEqualStringArray(sorting, newSorting);
      var isReversingChanged = reverse !== isSortReversed;
      /** If no change, return */
      if (!isSortChanged && !isReversingChanged) {
        return;
      }
      /** Call user defined handler */
      if (onSortChange) {
        onSortChange(newSorting, reverse);
      }
      /** Try to set new Sorting */
      if (isSortChanged) {
        trySetSorting(newSorting);
      }
      if (reverse !== isSortReversed) {
        trySetReverseSorting(reverse);
      }
    },
    [onSortChange, isSortReversed, sorting, trySetReverseSorting, trySetSorting]
  );
  // ----
  // Memoized Sorted Data
  // ----
  var sortedData = React.useMemo(
    function () {
      if (sorting.length) {
        return arraySort(data, sorting, { reverse: isSortReversed });
      }
      return data;
    },
    [data, isSortReversed, sorting]
  );
  // ----
  // Return Data and handler
  // ----
  return {
    sortedData: sortedData,
    setSorting: handleChangeSorting,
    isSortReversed: isSortReversed,
    sorting: sorting,
  };
}

export { useDataSorting as default };