2021-12-04 07:25:47 +01:00
|
|
|
import { FC, useMemo } from 'react';
|
|
|
|
import { Base, BaseProps } from './Base';
|
|
|
|
import { AlignItemType } from './types/AlignItemType';
|
2022-02-01 07:58:28 +01:00
|
|
|
import { AlignSelfType } from './types/AlignSelfType';
|
2021-12-04 07:25:47 +01:00
|
|
|
import { JustifyContentType } from './types/JustifyContentType';
|
|
|
|
import { SpacingType } from './types/SpacingType';
|
|
|
|
|
|
|
|
export interface FlexProps extends BaseProps<HTMLDivElement>
|
|
|
|
{
|
|
|
|
inline?: boolean;
|
|
|
|
column?: boolean;
|
|
|
|
reverse?: boolean;
|
|
|
|
gap?: SpacingType;
|
|
|
|
center?: boolean;
|
2022-02-01 07:58:28 +01:00
|
|
|
alignSelf?: AlignSelfType;
|
2021-12-04 07:25:47 +01:00
|
|
|
alignItems?: AlignItemType;
|
|
|
|
justifyContent?: JustifyContentType;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Flex: FC<FlexProps> = props =>
|
|
|
|
{
|
2022-02-01 07:58:28 +01:00
|
|
|
const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignSelf = null, alignItems = null, justifyContent = null, classNames = [], ...rest } = props;
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
const getClassNames = useMemo(() =>
|
|
|
|
{
|
|
|
|
const newClassNames: string[] = [];
|
|
|
|
|
|
|
|
if(inline) newClassNames.push('d-inline-flex');
|
|
|
|
else newClassNames.push('d-flex');
|
|
|
|
|
|
|
|
if(column)
|
|
|
|
{
|
|
|
|
if(reverse) newClassNames.push('flex-column-reverse');
|
|
|
|
else newClassNames.push('flex-column');
|
|
|
|
}
|
|
|
|
else
|
|
|
|
{
|
|
|
|
if(reverse) newClassNames.push('flex-row-reverse');
|
|
|
|
}
|
|
|
|
|
|
|
|
if(gap) newClassNames.push('gap-' + gap);
|
|
|
|
|
2022-02-01 07:58:28 +01:00
|
|
|
if(alignSelf) newClassNames.push('align-self-' + alignSelf);
|
|
|
|
|
2021-12-29 17:45:05 +01:00
|
|
|
if(alignItems) newClassNames.push('align-items-' + alignItems);
|
2021-12-04 07:25:47 +01:00
|
|
|
|
2021-12-29 17:45:05 +01:00
|
|
|
if(justifyContent) newClassNames.push('justify-content-' + justifyContent);
|
|
|
|
|
|
|
|
if(!alignItems && !justifyContent && center) newClassNames.push('align-items-center', 'justify-content-center');
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
if(classNames.length) newClassNames.push(...classNames);
|
|
|
|
|
|
|
|
return newClassNames;
|
2022-02-01 07:58:28 +01:00
|
|
|
}, [ inline, column, reverse, gap, center, alignSelf, alignItems, justifyContent, classNames ]);
|
2021-12-04 07:25:47 +01:00
|
|
|
|
|
|
|
return <Base classNames={ getClassNames } { ...rest } />;
|
|
|
|
}
|