@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3788876021 → 12.0.0-alpha.3804385444

package/Components/MasterCell/DefaultComponents/BorderContainerView/index.tsx

@@ -7,72 +7,33 @@ type BorderPosition = "inside" | "outside" | "center";
 interface Props {
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
+  borderPaddingTop: number;
+  borderPaddingRight: number;
+  borderPaddingBottom: number;
+  borderPaddingLeft: number;
   children: React.ReactNode;
 }
 
-const MARGINS = [
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-] as const;
+const COLOR_TRANSPARENT = "transparent";
 
-const PADDINGS = [
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-] as const;
+const styles = StyleSheet.create({
+  container: {
+    overflow: "visible",
+    borderWidth: 0,
+    borderColor: COLOR_TRANSPARENT,
+  },
+});
 
-const isPercentageValue = (value: number | string) => {
-  if (typeof value === "string" && value.endsWith("%")) {
-    return true;
-  }
-
-  return false;
-};
-
-const calculateContainerSpacing = ({
-  spacingKey,
-  style,
-  additionalSpacing,
-}: {
-  spacingKey: typeof MARGINS[number] | typeof PADDINGS[number];
-  style: ImageStyle | ViewStyle;
-  additionalSpacing: number;
-}) => {
-  return {
-    [spacingKey]:
-      toNumberWithDefaultZero(style[spacingKey]) + additionalSpacing,
-  };
-};
-
-const getContainerBorderWidth = (
-  borderPosition: BorderPosition,
-  borderWidth
-) => {
+const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   switch (borderPosition) {
     case "inside":
       return 0;
     case "center":
-      return borderWidth / 2;
+      return -borderWidth / 2;
     case "outside":
-      return borderWidth;
+      return -borderWidth;
     default:
-      return borderWidth;
-  }
-};
-
-const getContainerPadding = (borderPosition: BorderPosition, borderWidth) => {
-  switch (borderPosition) {
-    case "inside":
-      return borderWidth;
-    case "center":
-      return borderWidth / 2;
-    case "outside":
-      return 0;
-    default:
-      return 0;
+      return -borderWidth;
   }
 };
 
@@ -83,84 +44,64 @@ const InsideBorder = ({
   style: ViewStyle;
   borderPosition: BorderPosition;
 }) => {
-  if (borderPosition === "outside") {
+  if (!borderPosition) {
     return null;
   }
 
-  const insideBorderWidth =
-    borderPosition === "center" ? style.borderWidth / 2 : style.borderWidth;
+  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
+  const containerPadding = getBorderPadding(borderPosition, borderWidth);
+
+  const borderRadius =
+    toNumberWithDefaultZero(style.borderRadius) -
+    getBorderPadding(borderPosition, borderWidth);
 
   return (
     <View
       style={{
         ...StyleSheet.absoluteFillObject,
-        borderWidth: insideBorderWidth,
+        right: containerPadding,
+        bottom: containerPadding,
+        left: containerPadding,
+        top: containerPadding,
+        borderWidth: borderWidth,
         borderColor: style.borderColor,
-        borderRadius: style.borderRadius,
+        borderRadius,
       }}
     />
   );
 };
 
 export const BorderContainerView = (props: Props) => {
-  const { style, children } = props;
-  // Return border position prop after re-implementing
-  const borderPosition = "outside";
-
-  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
-  const spacing = getContainerPadding(borderPosition, borderWidth);
+  const {
+    borderPosition,
+    borderPaddingTop,
+    borderPaddingRight,
+    borderPaddingBottom,
+    borderPaddingLeft,
+    style,
+    children,
+  } = props;
 
   const borderStyleForMissingBorder =
     style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
 
-  const updatedMargins = MARGINS.reduce((acc, margin) => {
-    const marginValue = calculateContainerSpacing({
-      spacingKey: margin,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...marginValue };
-  }, {});
-
-  const updatedPaddings = PADDINGS.reduce((acc, padding) => {
-    const paddingValue = calculateContainerSpacing({
-      spacingKey: padding,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...paddingValue };
-  }, {});
-
-  const updatedWidth = style.width
-    ? isPercentageValue(style.width)
-      ? style.width
-      : toNumberWithDefaultZero(style.width) - spacing * 2
-    : undefined;
-
-  const updatedHeight = style.height
-    ? isPercentageValue(style.height)
-      ? style.height
-      : toNumberWithDefaultZero(style.height) - spacing * 2
-    : undefined;
-
-  const containerStyle = {
-    borderWidth: getContainerBorderWidth(borderPosition, borderWidth),
-    padding: spacing,
-    ...updatedMargins,
-    ...updatedPaddings,
-    width: updatedWidth,
-    height: updatedHeight,
-  };
+  const padding =
+    borderPosition === "outside"
+      ? {
+          paddingTop: borderPaddingTop,
+          paddingRight: borderPaddingRight,
+          paddingBottom: borderPaddingBottom,
+          paddingLeft: borderPaddingLeft,
+        }
+      : {};
 
   return (
-    <View {...props} style={[style, containerStyle]}>
+    <View
+      {...props}
+      style={[style, styles.container, borderStyleForMissingBorder, padding]}
+    >
       {children}
-      <InsideBorder
-        style={{ ...style, ...borderStyleForMissingBorder }}
-        borderPosition={borderPosition}
-      />
+      <InsideBorder style={style} borderPosition={borderPosition} />
     </View>
   );
 };

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -177,10 +177,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.3788876021",
+  "version": "12.0.0-alpha.3804385444",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.3788876021",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3788876021",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3788876021",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3788876021",
+    "@applicaster/applicaster-types": "12.0.0-alpha.3804385444",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3804385444",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3804385444",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3804385444",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",