Add more styles

Author: mkmarek

examples/Assets/Resources/components/popup.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Panel from './panel';
+
+const backdropStyles = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#000000aa',
+    justifyContent: 'center'
+}
+
+const panelOuterStyle = {
+    width: 400,
+    height: 300,
+    alignSelf: 'center',
+    verticalAlign: 'center'
+}
+
+const panelInnerStyle = {
+    flexDirection: 'row'
+}
+
+const buttonStyle = {
+    alignSelf: 'flex-end',
+    width: 100,
+    marginBottom: 15,
+    marginLeft: 15
+};
+
+export default function Popup({ onClose }) {
+
+    return <element style={backdropStyles}>
+        <Panel outerStyle={panelOuterStyle} innerStyle={panelInnerStyle}>
+            <button style={buttonStyle} onClick={onClose} text="Close" />
+        </Panel>
+    </element>
+}

examples/Assets/Resources/components/popup.jsx.meta

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render } from 'unity-renderer';
 import TabPanel from './components/tab-panel';
 import Counter from './components/counter';
 import ComponentPreview from './components/component-preview';
 import Todo from './components/Todo';
+import Popup from './components/popup';
 
 const margin = (margin) => ({
   marginTop: margin,
@@ -28,6 +29,8 @@ const Tab1Style = Object.assign(margin('auto'), {
 });
 
 function App() {
+  const [popupOpened, setPopupOpened] = useState(false);
+
   return (
     <element style={rootStyle}>
       <TabPanel style={tabPanelStyle}>
@@ -49,7 +52,11 @@ function App() {
         <TabPanel.Panel name="ECS TODO example">
           <Todo />
         </TabPanel.Panel>
+        <TabPanel.Panel name="Popup example">
+          <button onClick={() => setPopupOpened(true)} text="Open popup" />
+        </TabPanel.Panel>
       </TabPanel>
+      {popupOpened && <Popup onClose={() => setPopupOpened(false)} />}
     </element>
   );
 }

examples/Assets/Resources/index.jsx

@@ -104,6 +104,11 @@ public class ComponentStyle
                 public string minHeight;
                 public string maxWidth;
                 public string maxHeight;
+                public string position;
+                public string top;
+                public string bottom;
+                public string left;
+                public string right;
             }
         }
     }

packages/com.mkmarek.uielements.react/Runtime/Bridge/JsToNativeBridgePayload.cs

@@ -110,6 +110,21 @@ public static void AssignStyleProps(JsToNativeBridgePayload.BridgeMessage.Compon
 
             if (!string.IsNullOrWhiteSpace(style.unityTextAlign))
                 element.style.unityTextAlign = ParseTextAlign(style.unityTextAlign);
+
+            if (!string.IsNullOrWhiteSpace(style.position))
+                element.style.position = ParsePositionStyleEnum(style.position);
+
+            if (!string.IsNullOrWhiteSpace(style.top))
+                element.style.top = ParseStyleLength(style.top);
+
+            if (!string.IsNullOrWhiteSpace(style.bottom))
+                element.style.bottom = ParseStyleLength(style.bottom);
+            
+            if (!string.IsNullOrWhiteSpace(style.left))
+                element.style.left = ParseStyleLength(style.left);
+
+            if (!string.IsNullOrWhiteSpace(style.right))
+                element.style.right = ParseStyleLength(style.right);
         }
 
         public static Color ParseColor(string hexColor)
@@ -201,6 +216,21 @@ private static StyleEnum<Justify> ParseJustifyStyleEnum(string styleJustifyConte
             return default;
         }
 
+        private static StyleEnum<Position> ParsePositionStyleEnum(string position)
+        {
+            var keyword = GetStyleKeyword(position);
+
+            if (keyword.HasValue) return new StyleEnum<Position>(keyword.Value);
+
+            switch (position)
+            {
+                case "relative": return new StyleEnum<Position>(Position.Relative);
+                case "absolute": return new StyleEnum<Position>(Position.Absolute);
+            }
+
+            return default;
+        }
+
         private static StyleEnum<FlexDirection> ParseFlexDirectionStyleEnum(string styleFlexDirection)
         {
             var keyword = GetStyleKeyword(styleFlexDirection);