bootstrap-rn 0.3.4 → 0.3.5

package/src/style/StyleSheet.ts

@@ -1,138 +1,149 @@
-import { StyleSheet as BaseStyleSheet } from 'react-native';
-import type { ExtendedStyle, BaseStyle, ThemeVariables } from '../types';
-
-type StyleSource = Record<
-  string,
-  (theme: object, key: string) => ExtendedStyle | ExtendedStyle
->;
-
-type NamedExtendedStyles = Record<string, ExtendedStyle>;
-type NamedStyles = Record<string, BaseStyle>;
-
-type StyleSheetDefinition = {
-  source: StyleSource;
-  cache: Record<string, NamedExtendedStyles>;
-  active: NamedExtendedStyles;
-};
-
-let activeKey: string | null = null;
-
-const themes: Record<string, ThemeVariables> = {};
-const sheets: StyleSheetDefinition[] = [];
-
-const createSheet = (sheet: StyleSheetDefinition): NamedExtendedStyles => {
-  const theme = themes[activeKey as string];
-
-  const statelessSource: NamedStyles = {};
-  const statefulSource: NamedExtendedStyles = {};
-
-  // Apply theme to themeable styles.
-  Object.entries(sheet.source).forEach(([key, style]) => {
-    // Resolve theme.
-    const value =
-      typeof style === 'function' ? style(theme, activeKey as string) : style;
-
-    if (typeof value === 'function') {
-      statefulSource[key] = value;
-    } else {
-      statelessSource[key] = value as BaseStyle;
-    }
-  });
-
-  // Wrap stateful and stateless in a proxy, so that we can update the styles on theme change.
-  // For using Object.assign below we need some additional methods on the proxy that are mentioned here:
-  // https://stackoverflow.com/questions/43185453/object-assign-and-proxies
-  // @ts-expect-error proxy is equivalent to NamedExtendedStyles
-  return new Proxy(
-    {
-      keys: Object.keys(sheet.source),
-      stateless: BaseStyleSheet.create(statelessSource),
-      stateful: statefulSource,
-    },
-    {
-      get(target, prop: string) {
-        return target.stateless[prop] || target.stateful[prop] || undefined;
-      },
-      ownKeys: (target) => target.keys,
-      getOwnPropertyDescriptor(target, name: string) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const proxy = this;
-
-        return {
-          get value() {
-            return proxy.get(target, name);
-          },
-          configurable: true,
-          enumerable: true,
-        };
-      },
-      has: (target, name: string) => target.keys.indexOf(name) >= 0,
-    },
-  );
-};
-
-const { absoluteFill, absoluteFillObject, hairlineWidth } = BaseStyleSheet;
-
-const StyleSheet = {
-  create(source: StyleSource) {
-    // Create sheet object.
-    const sheet: StyleSheetDefinition = {
-      source,
-      cache: {},
-      // Placeholder until build method is called.
-      active: {},
-    };
-
-    // If initialized, set active sheet based by active theme.
-    if (activeKey !== null) {
-      sheet.cache[activeKey] = createSheet(sheet);
-      sheet.active = sheet.cache[activeKey];
-    }
-
-    sheets.push(sheet);
-
-    return sheet.active;
-  },
-  build(theme: ThemeVariables, key: string = 'default') {
-    if (!themes[key]) {
-      themes[key] = theme;
-    }
-
-    // If theme is already set, we don't need to do anything.
-    if (key === activeKey) {
-      return;
-    }
-
-    // Set new theme active.
-    activeKey = key;
-
-    // Update style sheets.
-    sheets.forEach((_, i) => {
-      // If there is no result for the active theme, we'll create a themed
-      // style sheet.
-      if (!sheets[i].cache[key]) {
-        sheets[i].cache[key] = createSheet(sheets[i]);
-      }
-
-      // Assign active object, which is also returned from the create
-      // function, so style changes will be applied on next rerender in
-      // the components as well.
-      Object.assign(sheets[i].active, sheets[i].cache[key]);
-    });
-  },
-  value(key: keyof ThemeVariables) {
-    if (activeKey === null) {
-      throw new Error('Use of StyleSheet.value() before initializing.');
-    }
-
-    const theme = themes[activeKey];
-
-    return theme[key];
-  },
-  // Add default styles from StyleSheet
-  absoluteFill,
-  absoluteFillObject,
-  hairlineWidth,
-};
-
-export default StyleSheet;
+import { StyleSheet as BaseStyleSheet } from 'react-native';
+import type { ExtendedStyle, BaseStyle, ThemeVariables } from '../types';
+
+type StyleSourceEntry =
+  | ((theme: object, key: string) => ExtendedStyle)
+  | ExtendedStyle;
+
+type NamedExtendedStyles<T extends string> = {
+  [K in T]: ExtendedStyle;
+};
+type NamedStyles<T extends string> = {
+  [K in T]: BaseStyle;
+};
+
+type StyleSheetDefinition<T extends string> = {
+  source: {
+    [K in T]: StyleSourceEntry;
+  };
+  cache: Record<string, NamedExtendedStyles<T>>;
+  active: NamedExtendedStyles<T>;
+};
+
+let activeKey: string | null = null;
+
+const themes: Record<string, ThemeVariables> = {};
+const sheets: StyleSheetDefinition<string>[] = [];
+
+const createSheet = <T extends string>(
+  sheet: StyleSheetDefinition<T>,
+): NamedExtendedStyles<T> => {
+  if (!activeKey) {
+    throw new Error('No active theme key.');
+  }
+
+  const theme = themes[activeKey];
+
+  const statelessSource: Partial<NamedStyles<T>> = {};
+  const statefulSource: Partial<NamedExtendedStyles<T>> = {};
+
+  // Apply theme to themeable styles.
+  Object.entries(sheet.source).forEach(([key, style]) => {
+    // Resolve theme.
+    const value = typeof style === 'function' ? style(theme, activeKey) : style;
+
+    if (typeof value === 'function') {
+      statefulSource[key as T] = value;
+    } else {
+      statelessSource[key as T] = value as BaseStyle;
+    }
+  });
+
+  // Wrap stateful and stateless in a proxy, so that we can update the styles on theme change.
+  // For using Object.assign below we need some additional methods on the proxy that are mentioned here:
+  // https://stackoverflow.com/questions/43185453/object-assign-and-proxies
+  return new Proxy(
+    {
+      keys: Object.keys(sheet.source),
+      stateless: BaseStyleSheet.create(statelessSource as NamedStyles<string>),
+      stateful: statefulSource,
+    },
+    {
+      get(target, prop: T) {
+        return target.stateless[prop] || target.stateful[prop] || undefined;
+      },
+      ownKeys: (target) => target.keys,
+      getOwnPropertyDescriptor(target, name: string) {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const proxy = this;
+
+        return {
+          get value() {
+            return proxy.get(target, name);
+          },
+          configurable: true,
+          enumerable: true,
+        };
+      },
+      has: (target, name: string) => target.keys.indexOf(name) >= 0,
+    },
+  ) as NamedExtendedStyles<T>;
+};
+
+const { absoluteFill, absoluteFillObject, hairlineWidth } = BaseStyleSheet;
+
+const StyleSheet = {
+  create<T extends string>(source: { [K in T]: StyleSourceEntry }): {
+    [K in T]: ExtendedStyle;
+  } {
+    // Create sheet object.
+    const sheet: StyleSheetDefinition<T> = {
+      source,
+      cache: {},
+      // @ts-expect-error Placeholder until build method is called.
+      active: {},
+    };
+
+    // If initialized, set active sheet based by active theme.
+    if (activeKey !== null) {
+      sheet.cache[activeKey] = createSheet(sheet);
+      sheet.active = sheet.cache[activeKey];
+    }
+
+    sheets.push(sheet);
+
+    return sheet.active;
+  },
+  build(theme: ThemeVariables, key: string = 'default') {
+    if (!themes[key]) {
+      themes[key] = theme;
+    }
+
+    // If theme is already set, we don't need to do anything.
+    if (key === activeKey) {
+      return;
+    }
+
+    // Set new theme active.
+    activeKey = key;
+
+    // Update style sheets.
+    sheets.forEach((_, i) => {
+      // If there is no result for the active theme, we'll create a themed
+      // style sheet.
+      if (!sheets[i].cache[key]) {
+        sheets[i].cache[key] = createSheet(sheets[i]);
+      }
+
+      // Assign active object, which is also returned from the create
+      // function, so style changes will be applied on next rerender in
+      // the components as well.
+      Object.assign(sheets[i].active, sheets[i].cache[key]);
+    });
+  },
+  value(key: keyof ThemeVariables) {
+    if (activeKey === null) {
+      throw new Error('Use of StyleSheet.value() before initializing.');
+    }
+
+    const theme = themes[activeKey];
+
+    return theme[key];
+  },
+  // Add default styles from StyleSheet
+  absoluteFill,
+  absoluteFillObject,
+  hairlineWidth,
+};
+
+export default StyleSheet;

package/src/types.ts

@@ -1,162 +1,168 @@
-import {
-  ViewStyle as BaseViewStyle,
-  ImageStyle as BaseImageStyle,
-  TextStyle as BaseTextStyle,
-  GestureResponderEvent,
-  Role,
-  NativeSyntheticEvent,
-  TextInputKeyPressEventData,
-} from 'react-native';
-import type { Placement, Axis, PlacementAxis } from '@react-types/overlays';
-import { BOOTSTRAP_RN_STYLE } from './style/createStyle';
-
-// Media
-
-export type Viewport = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
-export type MediaHandler = {
-  up: (point: Viewport) => boolean;
-  down: (point: Viewport) => boolean;
-  only: (point: Viewport) => boolean;
-  between: (lower: Viewport, upper: Viewport) => boolean;
-};
-
-// Styles
-
-export type BaseStyle = BaseViewStyle | BaseImageStyle | BaseTextStyle;
-
-export type InteractionState = {
-  interaction?: {
-    hover?: boolean;
-    focus: boolean;
-    focusVisible: boolean;
-    active?: boolean;
-  };
-  media: MediaHandler;
-};
-
-// Ref: https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts
-type Falsy = undefined | null | undefined | false | '';
-interface RecursiveArray<T>
-  extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
-type RegisteredStyle<T> = number & { __registeredStyleBrand: T };
-
-export type SpecialInteractionStyle<T> = {
-  (state: InteractionState): [T[], T[]];
-  $$typeof: typeof BOOTSTRAP_RN_STYLE;
-};
-
-export type ExtendedStyleType<T> =
-  | T
-  | SpecialInteractionStyle<T>
-  | ((state: InteractionState) => T);
-
-export type StyleProp<T> =
-  | ExtendedStyleType<T>
-  | RegisteredStyle<T>
-  | RecursiveArray<ExtendedStyleType<T> | RegisteredStyle<T> | Falsy>
-  | Falsy;
-
-export type ExtendedViewStyle = ExtendedStyleType<BaseViewStyle>;
-
-export type ExtendedImageStyle = ExtendedStyleType<BaseImageStyle>;
-
-export type ExtendedTextStyle = ExtendedStyleType<BaseTextStyle>;
-
-export type ExtendedStyle =
-  | ExtendedViewStyle
-  | ExtendedImageStyle
-  | ExtendedTextStyle;
-
-export type StyleName = string;
-
-// Theme
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type StyleValue = any;
-
-export type ThemeVariables = {
-  [key: string]: StyleValue;
-};
-
-export type StyleUtility = {
-  responsive?: boolean;
-  print?: boolean;
-  rfs?: boolean;
-  property: string;
-  class?: string;
-  values: Record<string, string | ((t: ThemeVariables) => StyleValue)>;
-};
-
-export type FormValidationState = (t: ThemeVariables) => {
-  color: string;
-  icon: string;
-};
-
-// Overlay
-
-export type Trigger =
-  | 'press'
-  | 'hover'
-  | 'focus'
-  | 'manual'
-  | 'press hover'
-  | 'hover press'
-  | 'hover focus'
-  | 'focus hover'
-  | 'press focus'
-  | 'focus press';
-
-export { Placement, Axis, PlacementAxis };
-
-export type TransformedPlacementAxis =
-  | 'top'
-  | 'bottom'
-  | 'end'
-  | 'start'
-  | 'center';
-
-// Modifiers
-
-// TODO: Modifiers can have different props based on the implementation. It would be better to define modifiers on the application.
-
-type To =
-  | string
-  | Partial<{
-      pathname: string;
-      search: string;
-      hash: string;
-    }>;
-
-type External =
-  | boolean
-  | {
-      download: boolean;
-      target: string;
-      rel: string;
-    };
-
-export type UseTabbableProps = {
-  to?: To;
-  external?: External;
-  end?: boolean;
-  caseSensitive?: boolean;
-  active?: boolean;
-};
-
-export type UseActionableProps = {
-  to?: To;
-  external?: External;
-  relative?: 'path' | 'route';
-  replace?: boolean;
-  preventScrollReset?: boolean;
-  reloadDocument?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  state?: any;
-  onPress?: null | ((event: GestureResponderEvent) => void);
-  role?: Role;
-};
-
-export type UseFormFieldProps = {
-  onKeyPress?: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
-};
+import {
+  ViewStyle as BaseViewStyle,
+  ImageStyle as TempImageStyle,
+  TextStyle as BaseTextStyle,
+  GestureResponderEvent,
+  Role,
+  NativeSyntheticEvent,
+  TextInputKeyPressEventData,
+} from 'react-native';
+import type { Placement, Axis, PlacementAxis } from '@react-types/overlays';
+import { BOOTSTRAP_RN_STYLE } from './style/createStyle';
+
+// Media
+
+export type Viewport = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+export type MediaHandler = {
+  up: (point: Viewport) => boolean;
+  down: (point: Viewport) => boolean;
+  only: (point: Viewport) => boolean;
+  between: (lower: Viewport, upper: Viewport) => boolean;
+};
+
+// Styles
+
+// Workaround: Add scroll to possible overflow values of ImageStyle to resolve conflict between
+// ImageStyle and ViewStyle.
+type BaseImageStyle = Omit<TempImageStyle, 'overflow'> & {
+  overflow?: 'visible' | 'hidden' | 'scroll';
+};
+
+export type BaseStyle = BaseViewStyle | BaseImageStyle | BaseTextStyle;
+
+export type InteractionState = {
+  interaction?: {
+    hover?: boolean;
+    focus: boolean;
+    focusVisible: boolean;
+    active?: boolean;
+  };
+  media: MediaHandler;
+};
+
+// Ref: https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts
+type Falsy = undefined | null | undefined | false | '';
+interface RecursiveArray<T>
+  extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
+type RegisteredStyle<T> = number & { __registeredStyleBrand: T };
+
+export type SpecialInteractionStyle<T> = {
+  (state: InteractionState): [T[], T[]];
+  $$typeof: typeof BOOTSTRAP_RN_STYLE;
+};
+
+export type ExtendedStyleType<T> =
+  | T
+  | SpecialInteractionStyle<T>
+  | ((state: InteractionState) => T);
+
+export type StyleProp<T> =
+  | ExtendedStyleType<T>
+  | RegisteredStyle<T>
+  | RecursiveArray<ExtendedStyleType<T> | RegisteredStyle<T> | Falsy>
+  | Falsy;
+
+export type ExtendedViewStyle = ExtendedStyleType<BaseViewStyle>;
+
+export type ExtendedImageStyle = ExtendedStyleType<BaseImageStyle>;
+
+export type ExtendedTextStyle = ExtendedStyleType<BaseTextStyle>;
+
+export type ExtendedStyle =
+  | ExtendedViewStyle
+  | ExtendedImageStyle
+  | ExtendedTextStyle;
+
+export type StyleName = string;
+
+// Theme
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type StyleValue = any;
+
+export type ThemeVariables = {
+  [key: string]: StyleValue;
+};
+
+export type StyleUtility = {
+  responsive?: boolean;
+  print?: boolean;
+  rfs?: boolean;
+  property: string;
+  class?: string;
+  values: Record<string, string | ((t: ThemeVariables) => StyleValue)>;
+};
+
+export type FormValidationState = (t: ThemeVariables) => {
+  color: string;
+  icon: string;
+};
+
+// Overlay
+
+export type Trigger =
+  | 'press'
+  | 'hover'
+  | 'focus'
+  | 'manual'
+  | 'press hover'
+  | 'hover press'
+  | 'hover focus'
+  | 'focus hover'
+  | 'press focus'
+  | 'focus press';
+
+export { Placement, Axis, PlacementAxis };
+
+export type TransformedPlacementAxis =
+  | 'top'
+  | 'bottom'
+  | 'end'
+  | 'start'
+  | 'center';
+
+// Modifiers
+
+// TODO: Modifiers can have different props based on the implementation. It would be better to define modifiers on the application.
+
+type To =
+  | string
+  | Partial<{
+      pathname: string;
+      search: string;
+      hash: string;
+    }>;
+
+type External =
+  | boolean
+  | Partial<{
+      download: boolean;
+      target: string;
+      rel: string;
+    }>;
+
+export type UseTabbableProps = {
+  to?: To;
+  external?: External;
+  end?: boolean;
+  caseSensitive?: boolean;
+  active?: boolean;
+};
+
+export type UseActionableProps = {
+  to?: To;
+  external?: External;
+  relative?: 'path' | 'route';
+  replace?: boolean;
+  preventScrollReset?: boolean;
+  reloadDocument?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  state?: any;
+  onPress?: null | ((event: GestureResponderEvent) => void);
+  role?: Role;
+};
+
+export type UseFormFieldProps = {
+  onKeyPress?: (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
+};