feat: add vertices example

BrianCraig · Feb 25, 2020 · ff2b1a9 · ff2b1a9
1 parent 324c7e9
commit ff2b1a9
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "constraint-layout",
+  "name": "react-constraint",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import "./App.css";
-import { simpleBlock } from "./constraints/example";
 import { createLayoutComponent } from "./constraints/generator";
+import { vertices } from "./examples/vertices";
 
 const codeStyle: React.CSSProperties = {
   width: "50vw",
@@ -21,13 +21,13 @@ const viewStyle: React.CSSProperties = {
   left: "50%"
 };
 
-const Comp = createLayoutComponent(simpleBlock);
+const Comp = createLayoutComponent(vertices);
 
 const App: React.FC = () => {
   return (
     <>
       <div style={codeStyle} contentEditable>
-        {JSON.stringify(simpleBlock, null, 2)}
+        {JSON.stringify(vertices, null, 2)}
       </div>
       <div style={viewStyle}>
         <Comp width={400} height={400} Block={<p>Hola</p>} />

diff --git a/src/constraints/example.ts → src/examples/simple.ts b/src/constraints/example.ts → src/examples/simple.ts
@@ -1,4 +1,4 @@
-import { LayoutDefinition } from "./definition";
+import { LayoutDefinition } from "../constraints/definition";
 
 export const simpleBlock: LayoutDefinition = {
   Block: {

diff --git a/src/examples/vertices.ts b/src/examples/vertices.ts
@@ -0,0 +1,60 @@
+import { LayoutDefinition } from "../constraints/definition";
+
+export const vertices: LayoutDefinition = {
+  Center: {
+    constraints: [
+      {
+        component: "parent",
+        fromSide: "top",
+        toSide: "top",
+        distance: 64
+      },
+      {
+        component: "parent",
+        fromSide: "right",
+        toSide: "right",
+        distance: -64
+      },
+      {
+        component: "parent",
+        fromSide: "bottom",
+        toSide: "bottom",
+        distance: -64
+      },
+      {
+        component: "parent",
+        fromSide: "left",
+        toSide: "left",
+        distance: 64
+      }
+    ]
+  },
+  BottomLeft: {
+    constraints: [
+      {
+        component: "Center",
+        fromSide: "top",
+        toSide: "bottom",
+        distance: -32
+      },
+      {
+        component: "Center",
+        fromSide: "right",
+        toSide: "left",
+        distance: 32
+      },
+      {
+        component: "Center",
+        fromSide: "bottom",
+        toSide: "bottom",
+        distance: 32
+      },
+      {
+        component: "Center",
+        fromSide: "left",
+        toSide: "left",
+        distance: -32
+      }
+    ]
+  }
+};