@ramses-superapp/ramses-ui/src/types/layout.ts

Skinless UI primitives for Ramses Built Apps

import type { ViewStyle } from 'react-native';

export const LAYOUT_PROP_KEYS = [
  'width',
  'height',
  'minWidth',
  'maxWidth',
  'minHeight',
  'maxHeight',
  'flex',
  'flexGrow',
  'flexShrink',
  'flexBasis',
  'alignSelf',
  'margin',
  'marginTop',
  'marginBottom',
  'marginLeft',
  'marginRight',
  'marginHorizontal',
  'marginVertical',
  'padding',
  'paddingTop',
  'paddingBottom',
  'paddingLeft',
  'paddingRight',
  'paddingHorizontal',
  'paddingVertical',
  'position',
  'top',
  'left',
  'right',
  'bottom',
  'zIndex',
  'display',
  'overflow',
  'aspectRatio',
] as const;

export type LayoutPropKey = (typeof LAYOUT_PROP_KEYS)[number];
export type LayoutStyle = Pick<ViewStyle, LayoutPropKey>;

export function extractLayoutProps(
  style: ViewStyle | undefined
): LayoutStyle {
  if (!style) return {};
  const layout: Record<string, unknown> = {};
  for (const key of LAYOUT_PROP_KEYS) {
    if (key in style) {
      layout[key] = (style as Record<string, unknown>)[key];
    }
  }
  return layout as LayoutStyle;
}