mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 11:43:07 +02:00
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { FC, useMemo } from 'react';
|
|
import { Flex, FlexProps } from './Flex';
|
|
import { useGridContext } from './GridContext';
|
|
import { ColumnSizesType } from './types';
|
|
|
|
export interface ColumnProps extends FlexProps
|
|
{
|
|
size?: ColumnSizesType;
|
|
offset?: ColumnSizesType;
|
|
column?: boolean;
|
|
}
|
|
|
|
export const Column: FC<ColumnProps> = props =>
|
|
{
|
|
const { size = 0, offset = 0, column = true, gap = 2, classNames = [], ...rest } = props;
|
|
const { isCssGrid = false } = useGridContext();
|
|
|
|
const getClassNames = useMemo(() =>
|
|
{
|
|
const newClassNames: string[] = [];
|
|
|
|
if(size)
|
|
{
|
|
let colClassName = `col-${ size }`;
|
|
|
|
if(isCssGrid) colClassName = `g-${ colClassName }`;
|
|
|
|
newClassNames.push(colClassName);
|
|
}
|
|
|
|
if(offset)
|
|
{
|
|
let colClassName = `offset-${ offset }`;
|
|
|
|
if(isCssGrid) colClassName = `g-start-${ offset }`;
|
|
|
|
newClassNames.push(colClassName);
|
|
}
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
return newClassNames;
|
|
}, [ size, offset, isCssGrid, classNames ]);
|
|
|
|
return <Flex classNames={ getClassNames } column={ column } gap={ gap } { ...rest } />;
|
|
}
|