Merge pull request #7 from hyperifyio/miskadev

Added Flex attributes

entities/size/SizeDTO.ts

@@ -12,7 +12,6 @@ export interface SizeDTO extends DTO {
      * Defaults to pixels.
      */
     readonly unit ?: UnitType;
-
 }
 
 /**

entities/style/Style.ts

@@ -28,6 +28,13 @@ import { Font } from "../font/Font";
 import { Size } from "../size/Size";
 import { SizeBox } from "../sizeBox/SizeBox";
 import { TextDecoration } from "../textDecoration/TextDecoration";
+import { Display } from "../types/Display";
+import { FlexDirection } from "../types/FlexDirection";
+import { FlexWrap } from "../types/FlexWrap";
+import { JustifyContent } from "../types/JustifyContent";
+import { AlignItems } from "../types/AlignItems";
+import { AlignContent } from "../types/AlignContent";
+import { AlignSelf } from "../types/AlignSelf";
 
 /**
  * Interface for Style entities.
@@ -210,4 +217,34 @@ export interface Style
     getBackgroundDTO () : BackgroundDTO | undefined;
     setBackground (value: Background | BackgroundDTO | BackgroundEntity | number | undefined) : this;
 
+    getDisplay () : Display | undefined;
+    setDisplay (value: Display | undefined) : this;
+
+    getFlexDirection () : FlexDirection | undefined;
+    setFlexDirection (value: FlexDirection | undefined) : this;
+
+    getFlexWrap () : FlexWrap | undefined;
+    setFlexWrap (value: FlexWrap | undefined) : this;
+
+    getJustifyContent () : JustifyContent | undefined;
+    setJustifyContent (value: JustifyContent | undefined) : this;
+
+    getAlignItems () : AlignItems | undefined;
+    setAlignItems (value: AlignItems | undefined) : this;
+
+    getAlignContent () : AlignContent | undefined;
+    setAlignContent (value: AlignContent | undefined) : this;
+
+    getAlignSelf () : AlignSelf | undefined;
+    setAlignSelf (value: AlignSelf | undefined) : this;
+
+    getFlexShrink () : number | undefined;
+    setFlexShrink (value: number | undefined) : this;
+
+    getFlexGrow () : number | undefined;
+    setFlexGrow (value: number | undefined) : this;
+
+    getOrder () : number | undefined;
+    setOrder (value: number | undefined) : this;
+
 }

entities/style/StyleDTO.ts

@@ -11,6 +11,14 @@ import { TextDecorationDTO } from "../textDecoration/TextDecorationDTO";
 import { BoxSizing} from "../types/BoxSizing";
 import { DTO } from "../types/DTO";
 import { TextAlign } from "../types/TextAlign";
+import { FlexDirection } from "../types/FlexDirection";
+import { Display } from "../types/Display";
+import { FlexWrap } from "../types/FlexWrap";
+import { JustifyContent } from "../types/JustifyContent";
+import { AlignItems } from "../types/AlignItems";
+import { AlignContent } from "../types/AlignContent";
+import { AlignSelf } from "../types/AlignSelf";
+
 
 export interface StyleDTO extends DTO {
     readonly textAlign          ?: TextAlign;
@@ -28,4 +36,14 @@ export interface StyleDTO extends DTO {
     readonly maxWidth           ?: SizeDTO;
     readonly maxHeight          ?: SizeDTO;
     readonly boxSizing          ?: BoxSizing;
+    readonly display            ?: Display;
+    readonly flexDirection      ?: FlexDirection;
+    readonly flexWrap           ?: FlexWrap;
+    readonly justifyContent     ?: JustifyContent;
+    readonly alignItems         ?: AlignItems;
+    readonly alignContent       ?: AlignContent;
+    readonly alignSelf          ?: AlignSelf;
+    readonly flexShrink         ?: number;
+    readonly flexGrow           ?: number;
+    readonly order              ?: number;
 }

entities/style/StyleEntity.ts

@@ -82,6 +82,13 @@ import {
     Style,
 } from "./Style";
 import { UnitType } from "../types/UnitType";
+import { Display } from "../types/Display";
+import { FlexDirection } from "../types/FlexDirection";
+import { FlexWrap } from "../types/FlexWrap";
+import { JustifyContent } from "../types/JustifyContent";
+import { AlignItems } from "../types/AlignItems";
+import { AlignContent } from "../types/AlignContent";
+import { AlignSelf } from "../types/AlignSelf";
 
 const TOP_AND_BOTTOM_MARGIN_INDEX = 0;
 const LEFT_AND_RIGHT_MARGIN_INDEX = 1;
@@ -107,7 +114,17 @@ export const StyleEntityFactory = (
                      .add( EntityFactoryImpl.createProperty("maxWidth").setTypes(SizeEntity, VariableType.UNDEFINED) )
                      .add( EntityFactoryImpl.createProperty("maxHeight").setTypes(SizeEntity, VariableType.UNDEFINED) )
                      .add( EntityFactoryImpl.createProperty("boxSizing").setTypes(BoxSizing, VariableType.UNDEFINED) )
-);
+                     .add( EntityFactoryImpl.createProperty("display").setTypes(Display, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("flexDirection").setTypes(FlexDirection, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("flexWrap").setTypes(FlexWrap, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("justifyContent").setTypes(JustifyContent, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("alignItems").setTypes(AlignItems, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("alignContent").setTypes(AlignContent, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("alignSelf").setTypes(AlignSelf, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("flexShrink").setTypes(VariableType.NUMBER, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("flexGrow").setTypes(VariableType.NUMBER, VariableType.UNDEFINED) )
+                     .add( EntityFactoryImpl.createProperty("order").setTypes(VariableType.NUMBER, VariableType.UNDEFINED) )
+                     );
 
 export const isStyleDTO = StyleEntityFactory.createTestFunctionOfDTO();
 
@@ -447,6 +464,16 @@ export class StyleEntity
         const border = this.getBorder();
         const font = this.getFont();
         const textDecoration = this.getTextDecoration();
+        const display = this.getDisplay();
+        const flexDirection = this.getFlexDirection();
+        const flexWrap = this.getFlexWrap();
+        const justifyContent = this.getJustifyContent();
+        const alignItems = this.getAlignItems();
+        const alignContent = this.getAlignContent();
+        const alignSelf = this.getAlignSelf();
+        const flexShrink = this.getFlexShrink();
+        const flexGrow = this.getFlexGrow();
+        const order = this.getOrder();
 
         return {
             ...(textColor ? { color: textColor.getCssStyles() } : {}),
@@ -464,6 +491,16 @@ export class StyleEntity
             ...(border ? border.getCssStyles() : {}),
             ...(font ? font.getCssStyles() : {}),
             ...(textDecoration ? textDecoration.getCssStyles() : {}),
+            ...(display ? { display: display } : {}),
+            ...(flexDirection ? { flexDirection: flexDirection } : {}),
+            ...(flexWrap ? { flexWrap: flexWrap } : {}),
+            ...(justifyContent ? { justifyContent: justifyContent } : {}),
+            ...(alignItems ? { alignItems: alignItems } : {}),
+            ...(alignContent ? { alignContent: alignContent } : {}),
+            ...(alignSelf ? { alignSelf: alignSelf } : {}),
+            ...(flexShrink ? { flexShrink: flexShrink } : {}),
+            ...(flexGrow ? { flexGrow: flexGrow } : {}),
+            ...(order ? { order: order } : {}),
         };
     }
 

entities/types/AlignContent.ts

@@ -0,0 +1,42 @@
+import { isUndefined } from "lodash";
+import { isEnum, explainEnum, stringifyEnum, parseEnum } from "../../types/Enum";
+import { explainOk, explainNot, explainOr } from "../../types/explain";
+
+export enum AlignContent {
+    FLEX_START = "flex-start",
+    FLEX_END = "flex-end",
+    CENTER = "center",
+    SPACE_BETWEEN = "space-between",
+    SPACE_AROUND = "space-around",
+    SPACE_EVENLY = "space-evenly",
+    STRETCH = "stretch",
+    START = "start",
+    END = "end",
+    BASELINE = "baseline",
+    FIRST_BASELINE = "first baseline",
+    LAST_BASELINE = "last baseline",
+}
+
+export function isAlignContent (value: unknown) : value is AlignContent {
+    return isEnum(AlignContent, value);
+}
+
+export function explainAlignContent (value : unknown) : string {
+    return explainEnum("AlignContent", AlignContent, isAlignContent, value);
+}
+
+export function stringifyAlignContent (value : AlignContent) : string {
+    return stringifyEnum(AlignContent, value);
+}
+
+export function parseAlignContent (value: any) : AlignContent | undefined {
+    return parseEnum(AlignContent, value) as AlignContent | undefined;
+}
+
+export function isAlignContentOrUndefined (value: unknown): value is AlignContent | undefined {
+    return isUndefined(value) || isAlignContent(value);
+}
+
+export function explainAlignContentOrUndefined (value: unknown): string {
+    return isAlignContentOrUndefined(value) ? explainOk() : explainNot(explainOr(['AlignContent', 'undefined']));
+}

entities/types/AlignItems.ts

@@ -0,0 +1,41 @@
+import { isUndefined } from "lodash";
+import { isEnum, explainEnum, stringifyEnum, parseEnum } from "../../types/Enum";
+import { explainOk, explainNot, explainOr } from "../../types/explain";
+
+export enum AlignItems {
+    STRETCH = "stretch",
+    FLEX_START = "flex-start",
+    FLEX_END = "flex-end",
+    CENTER = "center",
+    BASELINE = "baseline",
+    FIRST_BASELINE = "first baseline",
+    LAST_BASELINE = "last baseline",
+    START = "start",
+    END = "end",
+    SELF_START = "self-start",
+    SELF_END = "self-end"
+}
+
+export function isAlignItems (value: unknown) : value is AlignItems {
+    return isEnum(AlignItems, value);
+}
+
+export function explainAlignItems (value : unknown) : string {
+    return explainEnum("AlignItems", AlignItems, isAlignItems, value);
+}
+
+export function stringifyAlignItems (value : AlignItems) : string {
+    return stringifyEnum(AlignItems, value);
+}
+
+export function parseAlignItems (value: any) : AlignItems | undefined {
+    return parseEnum(AlignItems, value) as AlignItems | undefined;
+}
+
+export function isAlignItemsOrUndefined (value: unknown): value is AlignItems | undefined {
+    return isUndefined(value) || isAlignItems(value);
+}
+
+export function explainAlignItemsOrUndefined (value: unknown): string {
+    return isAlignItemsOrUndefined(value) ? explainOk() : explainNot(explainOr(['AlignItems', 'undefined']));
+}

entities/types/AlignSelf.ts

@@ -0,0 +1,36 @@
+import { isUndefined } from "lodash";
+import { isEnum, explainEnum, stringifyEnum, parseEnum } from "../../types/Enum";
+import { explainOk, explainNot, explainOr } from "../../types/explain";
+
+export enum AlignSelf {
+    AUTO = "auto",
+    FLEX_START = "flex-start",
+    FLEX_END = "flex-end",
+    CENTER = "center",
+    BASELINE = "baseline",
+    STRETCH = "stretch",
+}
+
+export function isAlignSelf (value: unknown) : value is AlignSelf {
+    return isEnum(AlignSelf, value);
+}
+
+export function explainAlignSelf (value : unknown) : string {
+    return explainEnum("AlignSelf", AlignSelf, isAlignSelf, value);
+}
+
+export function stringifyAlignSelf (value : AlignSelf) : string {
+    return stringifyEnum(AlignSelf, value);
+}
+
+export function parseAlignSelf (value: any) : AlignSelf | undefined {
+    return parseEnum(AlignSelf, value) as AlignSelf | undefined;
+}
+
+export function isAlignSelfOrUndefined (value: unknown): value is AlignSelf | undefined {
+    return isUndefined(value) || isAlignSelf(value);
+}
+
+export function explainAlignSelfOrUndefined (value: unknown): string {
+    return isAlignSelfOrUndefined(value) ? explainOk() : explainNot(explainOr(['AlignSelf', 'undefined']));
+}

entities/types/Display.ts

@@ -0,0 +1,35 @@
+import { isUndefined } from "lodash";
+import { isEnum, explainEnum, stringifyEnum, parseEnum } from "../../types/Enum";
+import { explainOk, explainNot, explainOr } from "../../types/explain";
+
+export enum Display {
+    BLOCK = "block",
+    INLINE_BLOCK = "inline-block",
+    NONE = "none",
+    FLEX = "flex",
+    GRID = "grid",
+}
+
+export function isDisplay (value: unknown) : value is Display {
+    return isEnum(Display, value);
+}
+
+export function explainDisplay (value : unknown) : string {
+    return explainEnum("Display", Display, isDisplay, value);
+}
+
+export function stringifyDisplay (value : Display) : string {
+    return stringifyEnum(Display, value);
+}
+
+export function parseDisplay (value: any) : Display | undefined {
+    return parseEnum(Display, value) as Display | undefined;
+}
+
+export function isDisplayOrUndefined (value: unknown): value is Display | undefined {
+    return isUndefined(value) || isDisplay(value);
+}
+
+export function explainDisplayOrUndefined (value: unknown): string {
+    return isDisplayOrUndefined(value) ? explainOk() : explainNot(explainOr(['Display', 'undefined']));
+}

entities/types/FlexDirection.ts

@@ -0,0 +1,34 @@
+import { isUndefined } from "lodash";
+import { isEnum, explainEnum, stringifyEnum, parseEnum } from "../../types/Enum";
+import { explainOk, explainNot, explainOr } from "../../types/explain";
+
+export enum FlexDirection {
+    ROW = "row",
+    ROW_REVERSE = "row-reverse",
+    COLUMN = "column",
+    COLUMN_REVERSE = "column-reverse",
+}
+
+export function isFlexDirection (value: unknown) : value is FlexDirection {
+    return isEnum(FlexDirection, value);
+}
+
+export function explainFlexDirection (value : unknown) : string {
+    return explainEnum("FlexDirection", FlexDirection, isFlexDirection, value);
+}
+
+export function stringifyFlexDirection (value : FlexDirection) : string {
+    return stringifyEnum(FlexDirection, value);
+}
+
+export function parseFlexDirection (value: any) : FlexDirection | undefined {
+    return parseEnum(FlexDirection, value) as FlexDirection | undefined;
+}
+
+export function isFlexDirectionOrUndefined (value: unknown): value is FlexDirection | undefined {
+    return isUndefined(value) || isFlexDirection(value);
+}
+
+export function explainFlexDirectionOrUndefined (value: unknown): string {
+    return isFlexDirectionOrUndefined(value) ? explainOk() : explainNot(explainOr(['FlexDirection', 'undefined']));
+}

entities/types/FlexWrap.ts

@@ -0,0 +1,33 @@
+import { isUndefined } from "lodash";
+import { isEnum, explainEnum, stringifyEnum, parseEnum } from "../../types/Enum";
+import { explainOk, explainNot, explainOr } from "../../types/explain";
+
+export enum FlexWrap {
+    NOWRAP = "nowrap",
+    WRAP = "wrap",
+    WRAP_REVERSE = "wrap-reverse",
+}
+
+export function isFlexWrap (value: unknown) : value is FlexWrap {
+    return isEnum(FlexWrap, value);
+}
+
+export function explainFlexWrap (value : unknown) : string {
+    return explainEnum("FlexWrap", FlexWrap, isFlexWrap, value);
+}
+
+export function stringifyFlexWrap (value : FlexWrap) : string {
+    return stringifyEnum(FlexWrap, value);
+}
+
+export function parseFlexWrap (value: any) : FlexWrap | undefined {
+    return parseEnum(FlexWrap, value) as FlexWrap | undefined;
+}
+
+export function isFlexWrapOrUndefined (value: unknown): value is FlexWrap | undefined {
+    return isUndefined(value) || isFlexWrap(value);
+}
+
+export function explainFlexWrapOrUndefined (value: unknown): string {
+    return isFlexWrapOrUndefined(value) ? explainOk() : explainNot(explainOr(['FlexWrap', 'undefined']));
+}