@dnb/eufemia/components/table/useHandleSortState.js

DNB Eufemia Design System UI Library

import React from 'react';
export function useHandleSortState(config, defaults = {
  direction: 'off',
  modes: ['asc', 'desc', 'off']
}) {
  const initialState = React.useMemo(() => {
    return Object.entries(config).reduce((acc, [name, opts]) => {
      acc[name] = {
        ...defaults,
        ...opts
      };
      return acc;
    }, {});
  }, [config, defaults]);
  const [internalState, setState] = React.useState(initialState);
  const sortHandler = React.useMemo(() => {
    const list = Object.entries(internalState);
    return list.reduce((acc, [name, opts]) => {
      acc[name] = () => {
        const state = {
          ...internalState[name]
        };
        if (!state.active && state.lastDirection) {
          state.direction = state.lastDirection;
          state.active = true;
          state.lastDirection = null;
        } else if (!state.active && state.direction !== 'off') {
          state.active = true;
        } else {
          state.direction = getNextMode({
            direction: state.direction,
            opts,
            defaults
          });
          state.active = state.direction !== 'off';
        }
        setState({
          ...list.reduce((acc, [name, opts]) => {
            acc[name] = opts;
            acc[name].active = false;
            if (opts.direction !== 'off') {
              acc[name].lastDirection = opts.direction;
            }
            return acc;
          }, {}),
          [name]: state
        });
      };
      return acc;
    }, {});
  }, [internalState]);
  let activeSortName = null;
  const sortState = Object.entries(internalState).reduce((acc, [name, {
    active,
    direction
  }]) => {
    const reversed = direction === 'off' ? undefined : direction === 'desc';
    if (active) {
      activeSortName = name;
    } else {
      active = false;
    }
    acc[name] = {
      active,
      direction,
      reversed
    };
    return acc;
  }, {});
  return {
    sortState,
    sortHandler,
    activeSortName
  };
  function getNextMode({
    direction,
    opts,
    defaults
  }) {
    const modes = defaults.modes.filter(mode => {
      return opts.modes.includes(mode);
    });
    if (!modes.includes(direction)) {
      direction = modes[0];
    }
    let next = direction;
    for (let i = 0, l = modes.length; i < l; i++) {
      const mode = modes[i];
      if (direction === mode) {
        let c = i + 1;
        if (c >= l) {
          c = 0;
        }
        next = modes[c];
        break;
      }
    }
    return next;
  }
}
export default useHandleSortState;
//# sourceMappingURL=useHandleSortState.js.map