bootstrap-rn 0.3.4 → 0.3.6

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/style/makeUtilities.ts

@@ -1,76 +1,79 @@
-import css from './css';
-import { GRID_BREAKPOINTS } from '../theme/proxies';
-import utilities from '../theme/utilities';
-import { each } from '../utils';
-import type { StyleUtility } from '../types';
-
-export function makeUtility(options: StyleUtility) {
-  return each(options.values, (key, value) => {
-    const name = options.class || options.property;
-    const suffix = key === 'null' ? '' : `-${key}`;
-
-    // We use css as a function, because of ts-styled-plugin error.
-    //
-    // Equivalent code:
-    // css`
-    //   ${options.property}: ${value};
-    // `
-
-    const styles = {
-      [`${name}${suffix}`]: css(['', ': ', ';'], options.property, value),
-    };
-
-    if (!options.responsive) {
-      return styles;
-    }
-
-    return {
-      ...styles,
-      ...each(GRID_BREAKPOINTS, (breakpoint) => {
-        if (breakpoint === 'xs') {
-          return {};
-        }
-
-        // We use css as a function, because of ts-styled-plugin error.
-        //
-        // Equivalent code:
-        // css`
-        //   @include media-breakpoint-up(${breakpoint}) {
-        //     ${options.property}: ${value};
-        //   }
-        // `
-
-        return {
-          [`${name}-${breakpoint}${suffix}`]: css(
-            ['@include media-breakpoint-up(', ') {\n', ': ', ';\n}'],
-            breakpoint,
-            options.property,
-            value,
-          ),
-        };
-      }),
-    };
-  });
-}
-
-export default function makeUtilities(
-  resolve:
-    | Record<string, StyleUtility>
-    | ((u: Record<string, StyleUtility>) => Record<string, StyleUtility>),
-) {
-  const customUtilities =
-    typeof resolve === 'function' ? resolve(utilities) : resolve;
-
-  const definitions = Object.values({
-    ...utilities,
-    ...customUtilities,
-  }).reduce((result, utility) => {
-    if (!utility) {
-      return result;
-    }
-
-    return Object.assign(result, makeUtility(utility));
-  }, {});
-
-  return definitions;
-}
+import css from './css';
+import { GRID_BREAKPOINTS } from '../theme/proxies';
+import utilities from '../theme/utilities';
+import { each } from '../utils';
+import type { ExtendedStyle, StyleUtility } from '../types';
+
+export function makeUtility(options: StyleUtility) {
+  return each(options.values, (key, value) => {
+    const name = options.class || options.property;
+    const suffix = key === 'null' ? '' : `-${key}`;
+
+    // We use css as a function, because of ts-styled-plugin error.
+    //
+    // Equivalent code:
+    // css`
+    //   ${options.property}: ${value};
+    // `
+
+    const styles = {
+      [`${name}${suffix}`]: css(['', ': ', ';'], options.property, value),
+    };
+
+    if (!options.responsive) {
+      return styles;
+    }
+
+    return {
+      ...styles,
+      ...each(GRID_BREAKPOINTS, (breakpoint) => {
+        if (breakpoint === 'xs') {
+          return {};
+        }
+
+        // We use css as a function, because of ts-styled-plugin error.
+        //
+        // Equivalent code:
+        // css`
+        //   @include media-breakpoint-up(${breakpoint}) {
+        //     ${options.property}: ${value};
+        //   }
+        // `
+
+        return {
+          [`${name}-${breakpoint}${suffix}`]: css(
+            ['@include media-breakpoint-up(', ') {\n', ': ', ';\n}'],
+            breakpoint,
+            options.property,
+            value,
+          ),
+        };
+      }),
+    };
+  });
+}
+
+export default function makeUtilities<T extends string>(
+  resolve:
+    | { [K in T]: StyleUtility }
+    | ((u: Record<string, StyleUtility>) => { [K in T]: StyleUtility }),
+) {
+  const customUtilities =
+    typeof resolve === 'function' ? resolve(utilities) : resolve;
+
+  const definitions = Object.values({
+    ...utilities,
+    ...customUtilities,
+  }).reduce(
+    (result, utility) => {
+      if (!utility) {
+        return result;
+      }
+
+      return Object.assign(result, makeUtility(utility));
+    },
+    {} as { [K in T]: ExtendedStyle },
+  );
+
+  return definitions;
+}