bootstrap-rn 0.3.0 → 0.3.1

package/src/style/StyleSheet.js

@@ -0,0 +1,121 @@
+import { StyleSheet as BaseStyleSheet } from 'react-native';
+
+let activeKey = null;
+
+const themes = {};
+const sheets = [];
+
+const createSheet = (sheet) => {
+  const theme = themes[activeKey];
+
+  const statelessSource = {};
+  const statefulSource = {};
+
+  // 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] = value;
+    } else {
+      statelessSource[key] = value;
+    }
+  });
+
+  // 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),
+      stateful: statefulSource,
+    },
+    {
+      get(target, prop) {
+        return target.stateless[prop] || target.stateful[prop] || undefined;
+      },
+      ownKeys: (target) => target.keys,
+      getOwnPropertyDescriptor(target, name) {
+        const proxy = this;
+        return {
+          get value() {
+            return proxy.get(target, name);
+          },
+          configurable: true,
+          enumerable: true,
+        };
+      },
+      has: (target, name) => target.keys.indexOf(name) >= 0,
+    },
+  );
+};
+
+const { absoluteFill, absoluteFillObject, hairlineWidth } = BaseStyleSheet;
+
+const StyleSheet = {
+  create(source) {
+    // Create sheet object.
+    const sheet = {
+      source,
+      cache: {},
+      active: null,
+    };
+
+    // If initialized, set active sheet based by active theme.
+    if (activeKey !== null) {
+      sheet.cache[activeKey] = createSheet(sheet);
+      sheet.active = sheet.cache[activeKey];
+    } else {
+      // Placeholder until build method is called.
+      sheet.active = {};
+    }
+
+    sheets.push(sheet);
+
+    return sheet.active;
+  },
+  build(theme, key = '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) {
+    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/TextStyleContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TextStyleContext = React.createContext();
+
+TextStyleContext.displayName = 'TextStyleContext';
+
+export default TextStyleContext;

package/src/style/TextStyleProvider.js

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import TextStyleContext from './TextStyleContext';
+
+const propTypes = {
+  children: PropTypes.node,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+function TextStyleProvider(props) {
+  const { children, style } = props;
+
+  const parentContext = useContext(TextStyleContext);
+
+  return (
+    <TextStyleContext.Provider
+      value={{
+        style: parentContext ? [parentContext.style, style] : style,
+        hasTextAncestor: parentContext && parentContext.hasTextAncestor,
+      }}
+    >
+      {children}
+    </TextStyleContext.Provider>
+  );
+}
+
+TextStyleProvider.propTypes = propTypes;
+
+export default TextStyleProvider;

package/src/style/createStyle.js

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native';
+import mediaBreakpointBetween from './mixins/mediaBreakpointBetween';
+import mediaBreakpointDown from './mixins/mediaBreakpointDown';
+import mediaBreakpointOnly from './mixins/mediaBreakpointOnly';
+import mediaBreakpointUp from './mixins/mediaBreakpointUp';
+import platform from './mixins/platform';
+
+export const BOOTSTRAP_RN_STYLE = Symbol.for('bootstrap-rn.style');
+
+const mixins = {
+  'media-breakpoint-between': mediaBreakpointBetween,
+  'media-breakpoint-down': mediaBreakpointDown,
+  'media-breakpoint-only': mediaBreakpointOnly,
+  'media-breakpoint-up': mediaBreakpointUp,
+  platform,
+};
+
+const hasInteraction = ({ scopes }) =>
+  scopes.some((scope) => scope.type === 'selector');
+
+function createStyle(definitions) {
+  // If there is only one definition without conditions, return.
+  if (definitions.length === 1 && definitions[0].scopes.length === 0) {
+    return definitions[0].declarations;
+  }
+
+  // Filter definitions that should not be used based on mixins.
+  const platformDefinitions = definitions.filter((item) =>
+    item.scopes.every((scope) => {
+      if (scope.type !== 'mixin') {
+        return true;
+      }
+
+      return mixins[scope.name].include(scope);
+    }),
+  );
+
+  // Create style sheets.
+  const styles = StyleSheet.create({
+    ...platformDefinitions.map((item) => item.declarations),
+  });
+
+  const resolve = (state) => {
+    const { interaction } = state;
+    const basicStyles = [];
+    const interactionStyles = [];
+
+    Object.values(styles).forEach((style, key) => {
+      const active = platformDefinitions[key].scopes.every((scope) => {
+        if (scope.type === 'selector') {
+          if (scope.name === 'hover') {
+            return interaction && interaction.hover;
+          }
+
+          if (scope.name === 'focus') {
+            return interaction && interaction.focus;
+          }
+
+          if (scope.name === 'focus-visible') {
+            return interaction && interaction.focusVisible;
+          }
+
+          if (scope.name === 'active') {
+            return interaction && interaction.active;
+          }
+        }
+
+        if (scope.type === 'mixin') {
+          return mixins[scope.name].apply(scope, state);
+        }
+
+        throw new Error(`Unknown scope type "${scope.type}"`);
+      });
+
+      if (active) {
+        if (hasInteraction(platformDefinitions[key])) {
+          interactionStyles.push(style);
+        } else {
+          basicStyles.push(style);
+        }
+      }
+    });
+
+    return [basicStyles, interactionStyles];
+  };
+
+  resolve.$$typeof = BOOTSTRAP_RN_STYLE;
+
+  return resolve;
+}
+
+export default createStyle;

package/src/style/css.js

@@ -0,0 +1,17 @@
+import parse from './parse';
+import transform from './transform';
+import createStyle from './createStyle';
+
+export default function css(...args) {
+  const ast = parse(...args);
+
+  const result = (theme, key) => {
+    const transformed = transform(ast.children, theme, { key });
+
+    return createStyle(transformed);
+  };
+
+  result.ast = ast;
+
+  return result;
+}

package/src/style/functions.js

@@ -0,0 +1,32 @@
+import RgbaValue from './types/RgbaValue';
+import UnitValue from './types/UnitValue';
+
+// Sass equivalent
+export function rgb(value) {
+  const color = RgbaValue.parse(value);
+  return `rgb(${color.red},${color.green},${color.blue})`;
+}
+
+// Sass equivalent
+export function rgba(value, alpha) {
+  const color = RgbaValue.parse(value);
+  return `rgba(${color.red},${color.green},${color.blue},${alpha})`;
+}
+
+// Sass equivalent
+export function opacity(value) {
+  return RgbaValue.parse(value).alpha;
+}
+
+// Sass equivalent
+export function mix(color1, color2, weight = 0.5) {
+  const rgb1 = RgbaValue.parse(color1).toRgb();
+  const rgb2 = RgbaValue.parse(color2).toRgb();
+  const percentage = UnitValue.parse(weight).toNumber();
+
+  const [r, g, b] = rgb1.map((value, key) =>
+    Math.round(rgb2[key] + (value - rgb2[key]) * percentage),
+  );
+
+  return new RgbaValue(r, g, b).toHex();
+}

package/src/style/makeTheme.js

@@ -0,0 +1,19 @@
+import transform from './transform';
+import variables from '../theme/variables';
+
+const extractVariables = (source, baseVariables = {}, options) => {
+  if (typeof source !== 'function') {
+    // TODO: Resolve t => ... functions on source object.
+    return { ...source, ...baseVariables };
+  }
+
+  const result = transform(source.ast.children, baseVariables, options);
+
+  return { ...result[0].variables, ...baseVariables };
+};
+
+export default function makeTheme(customVariables) {
+  const customTheme = extractVariables(customVariables);
+
+  return extractVariables(variables, customTheme, { preferTheme: true });
+}

package/src/style/makeUtilities.js

@@ -0,0 +1,56 @@
+import css from './css';
+import { GRID_BREAKPOINTS } from '../theme/proxies';
+import utilities from '../theme/utilities';
+import { each } from '../utils';
+
+export function makeUtility(options) {
+  return each(options.values, (key, value) => {
+    const name = options.class || options.property;
+    const suffix = key === 'null' ? '' : `-${key}`;
+
+    const styles = {
+      [`${name}${suffix}`]: css`
+        ${options.property}: ${value};
+      `,
+    };
+
+    if (!options.responsive) {
+      return styles;
+    }
+
+    return {
+      ...styles,
+      ...each(GRID_BREAKPOINTS, (breakpoint) => {
+        if (breakpoint === 'xs') {
+          return null;
+        }
+
+        return {
+          [`${name}-${breakpoint}${suffix}`]: css`
+            @include media-breakpoint-up(${breakpoint}) {
+              ${options.property}: ${value};
+            }
+          `,
+        };
+      }),
+    };
+  });
+}
+
+export default function makeUtilities(resolve) {
+  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;
+}

package/src/style/math.js

@@ -0,0 +1,60 @@
+import { PixelRatio } from 'react-native';
+import UnitValue from './types/UnitValue';
+
+const POWER = 10 ** 8;
+const UNIT_ORDER = ['percent', 'number', 'px', 'rem'];
+
+const fixRounding = (value) => Math.round(value * POWER) / POWER;
+
+const normalizeValue = (number1, number2) => {
+  if (number1.unit === 'px' && number2.unit === 'rem') {
+    return number1.value / (PixelRatio.getFontScale() * 16);
+  }
+
+  if (number1.unit === 'percent' && number2.unit !== 'percent') {
+    return number1.value / 100;
+  }
+
+  return number1.value;
+};
+
+const calculateValue = (number1, operator, number2) => {
+  const value1 = normalizeValue(number1, number2);
+  const value2 = normalizeValue(number2, number1);
+
+  switch (operator) {
+    case '+':
+      return value1 + value2;
+    case '-':
+      return value1 - value2;
+    case '*':
+      return fixRounding(value1 * value2);
+    case '/':
+      return fixRounding(value1 / value2);
+    case '%':
+      return value1 % value2;
+    default:
+      throw new Error('Unknown operator.');
+  }
+};
+
+const determineUnit = (number1, number2) => {
+  const index1 = UNIT_ORDER.indexOf(number1.unit);
+  const index2 = UNIT_ORDER.indexOf(number2.unit);
+
+  return index1 > index2 ? number1.unit : number2.unit;
+};
+
+export function calculate(value1, operator, value2) {
+  const number1 = UnitValue.parse(value1);
+  const number2 = UnitValue.parse(value2);
+
+  const value = calculateValue(number1, operator, number2);
+  const unit = determineUnit(number1, number2);
+
+  return new UnitValue(value, unit).toString();
+}
+
+export function normalizeNumber(value) {
+  return UnitValue.parse(value).toNumber();
+}

package/src/style/mixins/mediaBreakpointBetween.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.up(scope.args[0]) && media.down(scope.args[1]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointDown.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.down(scope.args[0]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointOnly.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.up(scope.args[0]) && media.down(scope.args[0]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/mediaBreakpointUp.js

@@ -0,0 +1,10 @@
+const mediaBreakpointUp = {
+  include() {
+    return true;
+  },
+  apply(scope, { media }) {
+    return media.up(scope.args[0]);
+  },
+};
+
+export default mediaBreakpointUp;

package/src/style/mixins/platform.js

@@ -0,0 +1,14 @@
+import { Platform } from 'react-native';
+
+const platform = {
+  include(scope) {
+    return scope.args[0] === 'native'
+      ? Platform.OS === 'android' || Platform.OS === 'ios'
+      : Platform.OS === scope.args[0];
+  },
+  apply() {
+    return true;
+  },
+};
+
+export default platform;

package/src/style/parse/InputStream.js

@@ -0,0 +1,69 @@
+const checkFunction = (char, silent) => {
+  if (typeof char !== 'function') {
+    return true;
+  }
+
+  if (silent) {
+    return false;
+  }
+
+  throw new Error(`CSS syntax error: Unexpected function.`);
+};
+
+class InputStream {
+  constructor(fragments, ...tags) {
+    this.dictionary = fragments.reduce((result, current, i) => {
+      const value = current.split('');
+      const tag = tags[i - 1];
+
+      if (!tag) {
+        return [...result, ...value];
+      }
+
+      if (typeof tag !== 'string') {
+        return [...result, tag, ...value];
+      }
+
+      return [...result, ...tag.split(''), ...value];
+    });
+    this.cursor = 0;
+  }
+
+  peek(offset = 0) {
+    return this.dictionary[this.cursor + offset];
+  }
+
+  read(marker) {
+    const char = this.peek();
+
+    if (marker && marker !== char) {
+      throw new Error(
+        `CSS syntax error: Expected "${marker}", but found "${char}"`,
+      );
+    }
+
+    if (this.remainingChars() === 0) {
+      throw new Error(`CSS syntax error: Unexpected end of string.`);
+    }
+
+    this.cursor += 1;
+
+    return char;
+  }
+
+  charsWhile(check, silent = false) {
+    let value = '';
+
+    while (checkFunction(this.peek(), silent) && check(this.peek())) {
+      value += this.read();
+    }
+
+    return value;
+  }
+
+  remainingChars() {
+    return this.dictionary.length - this.cursor;
+  }
+}
+
+export default InputStream;

package/src/style/parse/index.js

@@ -0,0 +1,23 @@
+import InputStream from './InputStream';
+import parseBlock from './parseBlock';
+
+function parse(...args) {
+  const input = new InputStream(...args);
+
+  const children = [];
+
+  while (input.remainingChars() > 0) {
+    const block = parseBlock(input);
+
+    if (block) {
+      children.push(block);
+    }
+  }
+
+  return {
+    type: 'root',
+    children,
+  };
+}
+
+export default parse;

package/src/style/parse/isIdent.js

@@ -0,0 +1,3 @@
+export default function isIdent(char) {
+  return /[a-z0-9_-]/i.test(char);
+}

package/src/style/parse/isWhitespace.js

@@ -0,0 +1,3 @@
+export default function isWhitespace(char) {
+  return /\s/.test(char);
+}

package/src/style/parse/parseBlock.js

@@ -0,0 +1,37 @@
+import variable from './rules/variable';
+import declaration from './rules/declaration';
+import directive from './rules/directive';
+import selector from './rules/selector';
+import comment from './rules/comment';
+import isWhitespace from './isWhitespace';
+
+function parseBlock(input) {
+  if (isWhitespace(input.peek())) {
+    input.charsWhile(isWhitespace);
+    return null;
+  }
+
+  if (variable.locate(input)) {
+    return variable.read(input);
+  }
+
+  if (declaration.locate(input)) {
+    return declaration.read(input);
+  }
+
+  if (selector.locate(input)) {
+    return selector.read(input, parseBlock);
+  }
+
+  if (directive.locate(input)) {
+    return directive.read(input, parseBlock);
+  }
+
+  if (comment.locate(input)) {
+    return comment.read(input);
+  }
+
+  throw new Error(`CSS syntax error: Unknown error at "${input.peek()}"`);
+}
+
+export default parseBlock;

package/src/style/parse/rules/comment.js

@@ -0,0 +1,40 @@
+const consumeAsterisk = (input) => {
+  input.read('*');
+
+  if (input.peek() === '/') {
+    input.read('/');
+
+    return false;
+  }
+
+  return true;
+};
+
+const comment = {
+  locate(input) {
+    return (
+      input.peek() === '/' && (input.peek(1) === '*' || input.peek(1) === '/')
+    );
+  },
+  read(input) {
+    input.read('/');
+
+    // Read until new line for inline comments
+    if (input.peek() === '/') {
+      input.read('/');
+      input.charsWhile((char) => char !== '\n');
+      return null;
+    }
+
+    input.read('*');
+
+    // Read until comment ending
+    do {
+      input.charsWhile((char) => char !== '*');
+    } while (consumeAsterisk(input));
+
+    return null;
+  },
+};
+
+export default comment;