2021-12-04 07:25:47 +01:00
|
|
|
import { FC, useMemo } from 'react';
|
2022-01-07 22:43:11 +01:00
|
|
|
import { useGridContext } from './context/GridContext';
|
2021-12-04 07:25:47 +01:00
|
|
|
import { Flex, FlexProps } from './Flex';
|
|
|
|
import { ColumnSizesType } from './types/ColumnSizesType';
|
|
|
|
|
|
|
|
export interface ColumnProps extends FlexProps
|
|
|
|
{
|
|
|
|
size?: ColumnSizesType;
|
2022-01-06 03:59:46 +01:00
|
|
|
column?: boolean;
|
2021-12-04 07:25:47 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
export const Column: FC<ColumnProps> = props =>
|
|
|
|
{
|
2022-01-06 03:59:46 +01:00
|
|
|
const { size = 0, column = true, gap = 2, classNames = [], ...rest } = props;
|
2022-01-07 22:43:11 +01:00
|
|
|
const { isCssGrid = false } = useGridContext();
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
const getClassNames = useMemo(() =>
|
|
|
|
{
|
|
|
|
const newClassNames: string[] = [];
|
|
|
|
|
2022-01-07 22:43:11 +01:00
|
|
|
if(size)
|
|
|
|
{
|
|
|
|
let colClassName = `col-${ size }`;
|
|
|
|
|
|
|
|
if(isCssGrid) colClassName = `g-${ colClassName }`;
|
|
|
|
|
|
|
|
newClassNames.push(colClassName);
|
|
|
|
}
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
|
|
|
|
return newClassNames;
|
2022-01-07 22:43:11 +01:00
|
|
|
}, [ size, isCssGrid, classNames ]);
|
2021-12-04 07:25:47 +01:00
|
|
|
|
2022-01-06 03:59:46 +01:00
|
|
|
return <Flex classNames={ getClassNames } column={ column } gap={ gap } { ...rest } />;
|
2021-12-04 07:25:47 +01:00
|
|
|
}
|