Implemented equals for simplicity reasons

Author: rstaib

src/column/renderAlignSelf.ts

@@ -1,16 +1,18 @@
 import ColumnAlignSelf from "./ColumnAlignSelf";
-import { css } from "../utils";
+import { css, equals } from "../utils";
 
 export default (alignSelf?: ColumnAlignSelf): string => {
   if (
-    alignSelf === "baseline" ||
-    alignSelf === "center" ||
-    alignSelf === "flex-end" ||
-    alignSelf === "flex-start" ||
-    alignSelf === "stretch"
+    equals(alignSelf, [
+      "baseline",
+      "center",
+      "flex-end",
+      "flex-start",
+      "stretch"
+    ])
   ) {
     return css`
-      align-self: ${alignSelf} !important;
+      align-self: ${alignSelf + ""} !important;
     `;
   } else {
     return "";

src/row/renderAlignContent.ts

@@ -1,17 +1,19 @@
 import RowAlignContent from "./RowAlignContent";
-import { css } from "../utils";
+import { css, equals } from "../utils";
 
 export default (alignContent?: RowAlignContent): string => {
   if (
-    alignContent === "center" ||
-    alignContent === "flex-end" ||
-    alignContent === "flex-start" ||
-    alignContent === "space-around" ||
-    alignContent === "space-between" ||
-    alignContent === "stretch"
+    equals(alignContent, [
+      "center",
+      "flex-end",
+      "flex-start",
+      "space-around",
+      "space-between",
+      "stretch"
+    ])
   ) {
     return css`
-      align-content: ${alignContent} !important;
+      align-content: ${alignContent + ""} !important;
     `;
   } else {
     return "";

src/row/renderAlignItems.ts

@@ -1,16 +1,18 @@
 import RowAlignItems from "./RowAlignItems";
-import { css } from "../utils";
+import { css, equals } from "../utils";
 
 export default (alignItems?: RowAlignItems): string => {
   if (
-    alignItems === "baseline" ||
-    alignItems === "center" ||
-    alignItems === "flex-end" ||
-    alignItems === "flex-start" ||
-    alignItems === "stretch"
+    equals(alignItems, [
+      "baseline",
+      "center",
+      "flex-end",
+      "flex-start",
+      "stretch"
+    ])
   ) {
     return css`
-      align-items: ${alignItems} !important;
+      align-items: ${alignItems + ""} !important;
     `;
   } else {
     return "";

src/row/renderDirection.ts

@@ -1,15 +1,10 @@
 import RowDirection from "./RowDirection";
-import { css } from "../utils";
+import { css, equals } from "../utils";
 
 export default (direction?: RowDirection): string => {
-  if (
-    direction === "column" ||
-    direction === "column-reverse" ||
-    direction === "row" ||
-    direction === "row-reverse"
-  ) {
+  if (equals(direction, ["column", "column-reverse", "row", "row-reverse"])) {
     return css`
-      flex-direction: ${direction} !important;
+      flex-direction: ${direction + ""} !important;
     `;
   } else {
     return "";

src/row/renderJustifyContent.ts

@@ -1,16 +1,18 @@
 import RowJustifyContent from "./RowJustifyContent";
-import { css } from "../utils";
+import { css, equals } from "../utils";
 
 export default (contentJustify?: RowJustifyContent): string => {
   if (
-    contentJustify === "center" ||
-    contentJustify === "flex-end" ||
-    contentJustify === "flex-start" ||
-    contentJustify === "space-around" ||
-    contentJustify === "space-between"
+    equals(contentJustify, [
+      "center",
+      "flex-end",
+      "flex-start",
+      "space-around",
+      "space-between"
+    ])
   ) {
     return css`
-      justify-content: ${contentJustify} !important;
+      justify-content: ${contentJustify + ""} !important;
     `;
   } else {
     return "";

src/row/renderWrap.ts

@@ -1,12 +1,12 @@
 import RowWrap from "./RowWrap";
-import { css } from "../utils";
+import { css, equals } from "../utils";
 
 function renderWrap(wrap?: RowWrap): string {
   if (wrap == null) {
     return renderWrap("wrap");
   }
 
-  if (wrap === "nowrap" || wrap === "wrap" || wrap === "wrap-reverse") {
+  if (equals(wrap, ["nowrap", "wrap", "wrap-reverse"])) {
     return css`
       flex-wrap: ${wrap};
     `;

src/utils/__snapshots__/index.test.ts.snap

@@ -4,6 +4,7 @@ exports[`index should verify the API shape 1`] = `
 Object {
   "RenderProvider": Object {},
   "css": [Function],
+  "equals": [Function],
   "flatten": [Function],
   "map": [Function],
   "percentage": [Function],

src/utils/equals.test.ts

@@ -0,0 +1,51 @@
+import equals from "./equals";
+
+describe("equals", () => {
+  it("should return true", () => {
+    // arrange
+    const a = "test-b";
+    const b = ["test-a", "Test-b", "test-b"];
+
+    // act
+    const output = equals(a, b);
+
+    // assert
+    expect(output).toBeTruthy();
+  });
+
+  it("should return false", () => {
+    // arrange
+    const a = "test-b";
+    const b = ["test-a", "Test-b", "test-B"];
+
+    // act
+    const output = equals(a, b);
+
+    // assert
+    expect(output).toBeFalsy();
+  });
+
+  it("should return false if array is empty", () => {
+    // arrange
+    const a = "test-b";
+    const b = [];
+
+    // act
+    const output = equals(a, b);
+
+    // assert
+    expect(output).toBeFalsy();
+  });
+
+  it("should return false if undefined", () => {
+    // arrange
+    const a = undefined;
+    const b = ["test-a", "Test-b", "test-B"];
+
+    // act
+    const output = equals(a, b);
+
+    // assert
+    expect(output).toBeFalsy();
+  });
+});

src/utils/equals.ts

@@ -0,0 +1,3 @@
+export default (a: string | undefined, b: string[]) => {
+  return a != null && b.indexOf(a) > -1;
+};

src/utils/index.ts

@@ -1,4 +1,5 @@
 export { default as css } from "./css";
+export { default as equals } from "./equals";
 export { default as flatten } from "./flatten";
 export { default as map } from "./map";
 export { default as percentage } from "./percentage";