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

Update common layout components

Browse Source
This commit is contained in:
Bill 2022-03-01 03:23:44 -05:00
parent c6512be476
commit 0dfb3649b8
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/common/Base.tsx
View File

@ -13,13 +13,14 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
position?: PositionType;
float?: FloatType;
pointer?: boolean;
visible?: boolean;
textColor?: ColorVariantType;
classNames?: string[];
}
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, textColor = null, classNames = [], className = '', style = {}, ...rest } = 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 getClassNames = useMemo(() =>
{
@ -41,12 +42,14 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
if(pointer) newClassNames.push('cursor-pointer');
if(visible !== null) newClassNames.push(visible ? 'visible' : 'invisible');
if(textColor) newClassNames.push('text-' + textColor);
if(classNames.length) newClassNames.push(...classNames);
return newClassNames;
}, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, textColor, classNames ]);
}, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, visible, textColor, classNames ]);
const getClassName = useMemo(() =>
{

3
src/common/Grid.tsx
View File

@ -1,5 +1,4 @@
import { FC, useMemo } from 'react';
import { CSSProperties } from 'styled-components';
import { CSSProperties, FC, useMemo } from 'react';
import { Base, BaseProps } from './Base';
import { GridContextProvider } from './GridContext';
import { AlignItemType, AlignSelfType, JustifyContentType, SpacingType } from './types';

2
src/common/types/OverflowType.ts
View File

@ -1 +1 @@
export type OverflowType = 'hidden' | 'auto' | 'unset';
export type OverflowType = 'auto' | 'hidden' | 'visible' | 'scroll' | 'unset';