nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add DisplayType

Browse Source
This commit is contained in:
Bill 2022-03-08 00:11:57 -05:00
parent 354b779eb7
commit 7999be5046
4 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/common/Base.tsx
View File

@ -4,6 +4,7 @@ import { ColorVariantType, FloatType, OverflowType, PositionType } from './types
export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T> export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T>
{ {
innerRef?: LegacyRef<T>; innerRef?: LegacyRef<T>;
display?: string;
fit?: boolean; fit?: boolean;
grow?: boolean; grow?: boolean;
shrink?: boolean; shrink?: boolean;
@ -20,12 +21,14 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
export const Base: FC<BaseProps<HTMLDivElement>> = props => export const Base: FC<BaseProps<HTMLDivElement>> = props =>
{ {
const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, visible = null, textColor = null, classNames = [], className = '', style = {}, ...rest } = props; const { ref = null, innerRef = null, display = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, visible = null, textColor = null, classNames = [], className = '', style = {}, ...rest } = props;
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {
const newClassNames: string[] = []; const newClassNames: string[] = [];
if(display && display.length) newClassNames.push('d-' + display);
if(fit || fullWidth) newClassNames.push('w-100'); if(fit || fullWidth) newClassNames.push('w-100');
if(fit || fullHeight) newClassNames.push('h-100'); if(fit || fullHeight) newClassNames.push('h-100');
@ -49,7 +52,7 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
if(classNames.length) newClassNames.push(...classNames); if(classNames.length) newClassNames.push(...classNames);
return newClassNames; return newClassNames;
}, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, visible, textColor, classNames ]); }, [ display, fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, visible, textColor, classNames ]);
const getClassName = useMemo(() => const getClassName = useMemo(() =>
{ {

10
src/common/Flex.tsx
View File

@ -4,7 +4,6 @@ import { AlignItemType, AlignSelfType, JustifyContentType, SpacingType } from '.
export interface FlexProps extends BaseProps<HTMLDivElement> export interface FlexProps extends BaseProps<HTMLDivElement>
{ {
inline?: boolean;
column?: boolean; column?: boolean;
reverse?: boolean; reverse?: boolean;
gap?: SpacingType; gap?: SpacingType;
@ -16,15 +15,12 @@ export interface FlexProps extends BaseProps<HTMLDivElement>
export const Flex: FC<FlexProps> = props => export const Flex: FC<FlexProps> = props =>
{ {
const { inline = false, column = undefined, reverse = false, gap = null, center = false, alignSelf = null, alignItems = null, justifyContent = null, classNames = [], ...rest } = props; const { display = 'flex', column = undefined, reverse = false, gap = null, center = false, alignSelf = null, alignItems = null, justifyContent = null, classNames = [], ...rest } = props;
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {
const newClassNames: string[] = []; const newClassNames: string[] = [];
if(inline) newClassNames.push('d-inline-flex');
else newClassNames.push('d-flex');
if(column) if(column)
{ {
if(reverse) newClassNames.push('flex-column-reverse'); if(reverse) newClassNames.push('flex-column-reverse');
@ -48,7 +44,7 @@ export const Flex: FC<FlexProps> = props =>
if(classNames.length) newClassNames.push(...classNames); if(classNames.length) newClassNames.push(...classNames);
return newClassNames; return newClassNames;
}, [ inline, column, reverse, gap, center, alignSelf, alignItems, justifyContent, classNames ]); }, [ column, reverse, gap, center, alignSelf, alignItems, justifyContent, classNames ]);
return <Base classNames={ getClassNames } { ...rest } />; return <Base display={ display } classNames={ getClassNames } { ...rest } />;
} }

1
src/common/types/DisplayType.ts Normal file
View File

@ -0,0 +1 @@
export type DisplayType = 'none' | 'inline' | 'inline-block' | 'block' | 'grid' | 'table' | 'table-cell' | 'table-row' | 'flex' | 'inline-flex';

1
src/common/types/index.ts
View File

@ -3,6 +3,7 @@ export * from './AlignSelfType';
export * from './ButtonSizeType'; export * from './ButtonSizeType';
export * from './ColorVariantType'; export * from './ColorVariantType';
export * from './ColumnSizesType'; export * from './ColumnSizesType';
export * from './DisplayType';
export * from './FloatType'; export * from './FloatType';
export * from './FontSizeType'; export * from './FontSizeType';
export * from './FontWeightType'; export * from './FontWeightType';