Convert PlatformWindow from ReactXP

1 files changed, 21 insertions, 37 deletions

diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx
index cc10374fec..c461b647f6 100644
--- a/gui/src/renderer/components/PlatformWindow.tsx
+++ b/gui/src/renderer/components/PlatformWindow.tsx
@@ -1,42 +1,26 @@
-import * as React from 'react';
-import { Component, Styles, Types, View } from 'reactxp';
+import styled from 'styled-components';
 
-interface IProps {
-  arrowPosition?: number;
-}
+const ARROW_WIDTH = 30;
 
-const containerStyle = Styles.createViewStyle({ flex: 1 });
+export default styled.div({}, ({ arrowPosition }: { arrowPosition?: number }) => {
+  let mask: string | undefined;
 
-export default class PlatformWindow extends Component<IProps> {
-  public render() {
-    return <View style={[containerStyle, this.platformStyle()]}>{this.props.children}</View>;
-  }
-
-  private platformStyle(): Types.ViewStyleRuleSet {
-    if (process.platform === 'darwin') {
-      const arrowPosition = this.props.arrowPosition;
-      let arrowPositionCss = '50%';
-
-      if (typeof arrowPosition === 'number') {
-        const arrowWidth = 30;
-        const adjustedArrowPosition = arrowPosition - arrowWidth * 0.5;
-        arrowPositionCss = `${adjustedArrowPosition}px`;
-      }
+  if (process.platform === 'darwin') {
+    const arrowPositionCss =
+      arrowPosition !== undefined ? `${arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
 
-      const webkitMask = [
-        `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`,
-        `url(../../assets/images/app-header-backdrop.svg) no-repeat`,
-      ];
-
-      return Styles.createViewStyle(
-        {
-          // @ts-ignore
-          WebkitMask: webkitMask.join(','),
-        },
-        false,
-      );
-    } else {
-      return undefined;
-    }
+    mask = [
+      `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`,
+      `url(../../assets/images/app-header-backdrop.svg) no-repeat`,
+    ].join(',');
   }
-}
+
+  return {
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    mask,
+  };
+});