nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-30 08:50:51 +01: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; position?: PositionType;
float?: FloatType; float?: FloatType;
pointer?: boolean; pointer?: boolean;
visible?: boolean;
textColor?: ColorVariantType; textColor?: ColorVariantType;
classNames?: string[]; classNames?: string[];
} }
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, 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(() => const getClassNames = useMemo(() =>
{ {
@ -41,12 +42,14 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
if(pointer) newClassNames.push('cursor-pointer'); if(pointer) newClassNames.push('cursor-pointer');
if(visible !== null) newClassNames.push(visible ? 'visible' : 'invisible');
if(textColor) newClassNames.push('text-' + textColor); if(textColor) newClassNames.push('text-' + textColor);
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, textColor, classNames ]); }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, visible, textColor, classNames ]);
const getClassName = useMemo(() => const getClassName = useMemo(() =>
{ {

3
src/common/Grid.tsx
View File

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