86eba636a5
* Adjust/optimize table column rendering * Split helper * Adjust * Remove ddebug helper logs * Don't render children on empty array * Pass isEmpty to Body * Account hooks ordering
31 lines
960 B
TypeScript
31 lines
960 B
TypeScript
// Copyright 2017-2023 @polkadot/react-hooks authors & contributors
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
import { createNamedHook } from './createNamedHook';
|
|
import { useDebounce } from './useDebounce';
|
|
import { useWindowSize } from './useWindowSize';
|
|
|
|
type NumColumns = 1 | 2 | 3;
|
|
|
|
// we don't have this anywhere
|
|
const SIZE_COL_3 = 1500;
|
|
// this aligns with Columar
|
|
const SIZE_COL_2 = 1050;
|
|
|
|
// TODO For 2 vs 3 column we may want different breakpoints
|
|
// (as set this basically aligns with Columar with an additional
|
|
// 3-column variant added for larger screens- as per above)
|
|
function useWindowColumnsImpl (maxColumns: NumColumns = 3): NumColumns {
|
|
const windowSize = useWindowSize();
|
|
|
|
return useDebounce(
|
|
maxColumns >= 3 && windowSize.width >= SIZE_COL_3
|
|
? 3
|
|
: maxColumns >= 2 && windowSize.width >= SIZE_COL_2
|
|
? 2
|
|
: 1
|
|
);
|
|
}
|
|
|
|
export const useWindowColumns = createNamedHook('useWindowColumns', useWindowColumnsImpl);
|