From 7f329e3041337005a3a212b971a3d41fcfb9c918 Mon Sep 17 00:00:00 2001 From: Bill Date: Sun, 20 Feb 2022 23:28:33 -0500 Subject: [PATCH] Update common components --- src/common/Base.tsx | 9 ++++++--- src/common/Grid.tsx | 18 +++++++++++++++--- src/common/Text.tsx | 15 ++++++++++++--- src/common/types/FloatType.ts | 1 + src/common/types/FontSizeType.ts | 2 +- src/common/types/TextAlignType.ts | 1 + src/common/types/index.ts | 2 ++ 7 files changed, 38 insertions(+), 10 deletions(-) create mode 100644 src/common/types/FloatType.ts create mode 100644 src/common/types/TextAlignType.ts diff --git a/src/common/Base.tsx b/src/common/Base.tsx index 630f5417..20cbb8e5 100644 --- a/src/common/Base.tsx +++ b/src/common/Base.tsx @@ -1,5 +1,5 @@ import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, LegacyRef, useMemo } from 'react'; -import { ColorVariantType, OverflowType, PositionType } from './types'; +import { ColorVariantType, FloatType, OverflowType, PositionType } from './types'; export interface BaseProps extends DetailedHTMLProps, T> { @@ -11,6 +11,7 @@ export interface BaseProps extends DetailedHTMLProps extends DetailedHTMLProps> = props => { - const { ref = null, innerRef = null, fit = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = 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, textColor = null, classNames = [], className = '', style = {}, ...rest } = props; const getClassNames = useMemo(() => { @@ -36,6 +37,8 @@ export const Base: FC> = props => if(position) newClassNames.push('position-' + position); + if(float) newClassNames.push('float-' + float); + if(pointer) newClassNames.push('cursor-pointer'); if(textColor) newClassNames.push('text-' + textColor); @@ -43,7 +46,7 @@ export const Base: FC> = props => if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, pointer, textColor, classNames ]); + }, [ fit, grow, shrink, fullWidth, fullHeight, overflow, position, float, pointer, textColor, classNames ]); const getClassName = useMemo(() => { diff --git a/src/common/Grid.tsx b/src/common/Grid.tsx index 504a48d1..ed59d47a 100644 --- a/src/common/Grid.tsx +++ b/src/common/Grid.tsx @@ -2,7 +2,7 @@ import { FC, useMemo } from 'react'; import { CSSProperties } from 'styled-components'; import { Base, BaseProps } from './Base'; import { GridContextProvider } from './GridContext'; -import { SpacingType } from './types'; +import { AlignItemType, AlignSelfType, JustifyContentType, SpacingType } from './types'; export interface GridProps extends BaseProps { @@ -10,11 +10,15 @@ export interface GridProps extends BaseProps gap?: SpacingType; maxContent?: boolean; columnCount?: number; + center?: boolean; + alignSelf?: AlignSelfType; + alignItems?: AlignItemType; + justifyContent?: JustifyContentType; } export const Grid: FC = props => { - const { inline = false, gap = 2, maxContent = false, columnCount = 0, fullHeight = true, classNames = [], style = {}, ...rest } = props; + const { inline = false, gap = 2, maxContent = false, columnCount = 0, center = false, alignSelf = null, alignItems = null, justifyContent = null, fullHeight = true, classNames = [], style = {}, ...rest } = props; const getClassNames = useMemo(() => { @@ -28,10 +32,18 @@ export const Grid: FC = props => if(maxContent) newClassNames.push('flex-basis-max-content'); + if(alignSelf) newClassNames.push('align-self-' + alignSelf); + + if(alignItems) newClassNames.push('align-items-' + alignItems); + + if(justifyContent) newClassNames.push('justify-content-' + justifyContent); + + if(!alignItems && !justifyContent && center) newClassNames.push('align-items-center', 'justify-content-center'); + if(classNames.length) newClassNames.push(...classNames); return newClassNames; - }, [ inline, gap, maxContent, classNames ]); + }, [ inline, gap, maxContent, alignSelf, alignItems, justifyContent, center, classNames ]); const getStyle = useMemo(() => { diff --git a/src/common/Text.tsx b/src/common/Text.tsx index d81b5f76..0ea93b57 100644 --- a/src/common/Text.tsx +++ b/src/common/Text.tsx @@ -1,12 +1,13 @@ import { FC, useMemo } from 'react'; import { Base, BaseProps } from './Base'; -import { ColorVariantType, FontSizeType, FontWeightType } from './types'; +import { ColorVariantType, FontSizeType, FontWeightType, TextAlignType } from './types'; export interface TextProps extends BaseProps { variant?: ColorVariantType; fontWeight?: FontWeightType; fontSize?: FontSizeType; + align?: TextAlignType; bold?: boolean; underline?: boolean; italics?: boolean; @@ -14,11 +15,13 @@ export interface TextProps extends BaseProps center?: boolean; textEnd?: boolean; small?: boolean; + wrap?: boolean; + textBreak?: boolean; } export const Text: FC = props => { - const { variant = 'black', fontWeight = null, fontSize = 0, bold = false, underline = false, italics = false, truncate = false, center = false, textEnd = false, small = false, ...rest } = props; + const { variant = 'black', fontWeight = null, fontSize = 0, align = null, bold = false, underline = false, italics = false, truncate = false, center = false, textEnd = false, small = false, wrap = false, textBreak = false, ...rest } = props; const getClassNames = useMemo(() => { @@ -32,6 +35,8 @@ export const Text: FC = props => if(fontSize) newClassNames.push('fs-' + fontSize); + if(align) newClassNames.push('text-' + align); + if(underline) newClassNames.push('text-decoration-underline'); if(italics) newClassNames.push('fst-italic'); @@ -44,8 +49,12 @@ export const Text: FC = props => if(small) newClassNames.push('small'); + if(wrap) newClassNames.push('text-wrap'); + + if(textBreak) newClassNames.push('text-break'); + return newClassNames; - }, [ variant, fontWeight, fontSize, bold, underline, italics, truncate, center, textEnd, small ]); + }, [ variant, fontWeight, fontSize, align, bold, underline, italics, truncate, center, textEnd, small, wrap, textBreak ]); return ; } diff --git a/src/common/types/FloatType.ts b/src/common/types/FloatType.ts new file mode 100644 index 00000000..63e495fe --- /dev/null +++ b/src/common/types/FloatType.ts @@ -0,0 +1 @@ +export type FloatType = 'start' | 'end' | 'none'; diff --git a/src/common/types/FontSizeType.ts b/src/common/types/FontSizeType.ts index a6b28c93..120c11c9 100644 --- a/src/common/types/FontSizeType.ts +++ b/src/common/types/FontSizeType.ts @@ -1 +1 @@ -export type FontSizeType = 1 | 2 | 3 | 4 | 5; +export type FontSizeType = 1 | 2 | 3 | 4 | 5 | 6; diff --git a/src/common/types/TextAlignType.ts b/src/common/types/TextAlignType.ts new file mode 100644 index 00000000..cb826480 --- /dev/null +++ b/src/common/types/TextAlignType.ts @@ -0,0 +1 @@ +export type TextAlignType = 'start' | 'center' | 'end'; diff --git a/src/common/types/index.ts b/src/common/types/index.ts index 011ab11e..9fcf00b4 100644 --- a/src/common/types/index.ts +++ b/src/common/types/index.ts @@ -3,9 +3,11 @@ export * from './AlignSelfType'; export * from './ButtonSizeType'; export * from './ColorVariantType'; export * from './ColumnSizesType'; +export * from './FloatType'; export * from './FontSizeType'; export * from './FontWeightType'; export * from './JustifyContentType'; export * from './OverflowType'; export * from './PositionType'; export * from './SpacingType'; +export * from './TextAlignType';