bootstrap-rn 0.3.0 → 0.3.2

package/src/hooks/useBackground.js

@@ -0,0 +1,110 @@
+import { StyleSheet } from 'react-native';
+
+// The assumed background styles are typed as followed:
+//
+// type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
+// type PositionX = 'center' | 'left' | 'right';
+// type PositionY = 'center' | 'top' | 'bottom';
+//
+// type BackgroundStyles = {
+//   backgroundImage: string,
+//   backgroundSize: 'contain' | 'cover' | string | number,
+//   backgroundPosition: Position,
+//   backgroundPositionX:
+//     | PositionX
+//     | { position: PositionX, offset: string | number },
+//   backgroundPositionY:
+//     | PositionY
+//     | { position: PositionY, offset: string | number },
+// };
+
+const styles = StyleSheet.create({
+  reset: {
+    // Background repeat is not supported on native yet.
+    backgroundRepeat: 'no-repeat',
+  },
+});
+
+const normalizeValue = (value) =>
+  typeof value === 'number' && value !== 0 ? `${value}px` : value;
+
+const resolveBackgroundSize = (style) => {
+  const { backgroundSize } = style;
+
+  if (typeof backgroundSize !== 'object') {
+    return backgroundSize;
+  }
+
+  const { width = 'auto', height = 'auto' } = backgroundSize;
+
+  return `${normalizeValue(width)} ${normalizeValue(height)}`;
+};
+
+const resolveBackgroundPosition = (style) => {
+  const {
+    backgroundPosition,
+    backgroundPositionX,
+    backgroundPositionY,
+  } = style;
+
+  if (!backgroundPosition && !backgroundPositionX && !backgroundPositionY) {
+    return null;
+  }
+
+  const value = {
+    positionX: backgroundPosition || 'left',
+    offsetX: 0,
+    positionY: backgroundPosition || 'top',
+    offsetY: 0,
+  };
+
+  if (backgroundPositionX) {
+    const { position: positionX = 'left', offset: offsetX = 0 } =
+      typeof backgroundPositionX === 'object'
+        ? backgroundPositionX
+        : { position: backgroundPositionX };
+
+    value.positionX = positionX;
+    value.offsetX = normalizeValue(offsetX);
+  }
+
+  if (backgroundPositionY) {
+    const { position: positionY = 'top', offset: offsetY = 0 } =
+      typeof backgroundPositionY === 'object'
+        ? backgroundPositionY
+        : { position: backgroundPositionY };
+
+    value.positionY = positionY;
+    value.offsetY = normalizeValue(offsetY);
+  }
+
+  const valueX = value.offsetX
+    ? `${value.positionX} ${value.offsetX}`
+    : value.positionX;
+  const valueY = value.offsetY
+    ? `${value.positionY} ${value.offsetY}`
+    : value.positionY;
+
+  return `${valueX} ${valueY}`;
+};
+
+export default function useBackground(style) {
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  return {
+    style: [
+      flattenedStyle,
+      styles.reset,
+      {
+        // Transform background size
+        backgroundSize: resolveBackgroundSize(flattenedStyle),
+        // Workaround, because some browsers do not support two-value syntax:
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x#browser_compatibility
+        backgroundPositionX: null,
+        backgroundPositionY: null,
+        backgroundPosition: resolveBackgroundPosition(flattenedStyle),
+      },
+    ],
+    element: null,
+  };
+}

package/src/hooks/useBackground.native.js

@@ -0,0 +1,191 @@
+import React from 'react';
+import { I18nManager, StyleSheet, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+
+// The assumed background styles are typed as followed:
+//
+// type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
+// type PositionX = 'center' | 'left' | 'right';
+// type PositionY = 'center' | 'top' | 'bottom';
+//
+// type BackgroundStyles = {
+//   backgroundImage: string,
+//   backgroundSize: 'contain' | 'cover' | string | number,
+//   backgroundPosition: Position,
+//   backgroundPositionX:
+//     | PositionX
+//     | { position: PositionX, offset: string | number },
+//   backgroundPositionY:
+//     | PositionY
+//     | { position: PositionY, offset: string | number },
+// };
+
+const styles = StyleSheet.create({
+  container: { overflow: 'hidden' },
+  object: { aspectRatio: 1 },
+});
+
+const horizontalPositions = {
+  left: (offset = 0) => ({
+    alignItems: I18nManager.isRTL ? 'flex-end' : 'flex-start',
+    paddingLeft: offset,
+  }),
+  right: (offset = 0) => ({
+    alignItems: I18nManager.isRTL ? 'flex-start' : 'flex-end',
+    paddingRight: offset,
+  }),
+  center: (offset) => {
+    if (offset !== undefined) {
+      return null;
+    }
+
+    return {
+      alignItems: 'center',
+    };
+  },
+};
+
+const verticalPositions = {
+  top: (offset = 0) => ({
+    justifyContent: 'flex-start',
+    paddingTop: offset,
+  }),
+  bottom: (offset = 0) => ({
+    justifyContent: 'flex-end',
+    paddingBottom: offset,
+  }),
+  center: (offset) => {
+    if (offset !== undefined) {
+      return null;
+    }
+
+    return {
+      justifyContent: 'center',
+    };
+  },
+};
+
+const getXml = (value) => {
+  const match = value.match(/^url\("data:image\/svg\+xml,(.*?)"\)$/);
+
+  if (!match) {
+    return null;
+  }
+
+  return decodeURIComponent(match[1]);
+};
+
+const transforms = {
+  backgroundSize(value) {
+    if (value === 'cover') {
+      return {
+        width: '100%',
+        // TODO: Support cover for views with height > width.
+        // height: '100%',
+      };
+    }
+
+    if (value === 'contain') {
+      return {
+        width: '100%',
+        height: '100%',
+      };
+    }
+
+    const { width, height = width } = value;
+
+    return {
+      width,
+      height,
+    };
+  },
+  backgroundPosition(value) {
+    if (value === 'center') {
+      return {
+        alignItems: 'center',
+        justifyContent: 'center',
+      };
+    }
+
+    if (horizontalPositions[value]) {
+      return {
+        ...horizontalPositions[value](),
+        justifyContent: 'center',
+      };
+    }
+
+    if (verticalPositions[value]) {
+      return {
+        alignItems: 'center',
+        ...verticalPositions[value](),
+      };
+    }
+
+    return null;
+  },
+  backgroundPositionX(value) {
+    const { position = 'left', offset } =
+      typeof value === 'object' ? value : { position: value };
+
+    if (!horizontalPositions[position]) {
+      return null;
+    }
+
+    return horizontalPositions[position](offset);
+  },
+  backgroundPositionY(value) {
+    const { position = 'top', offset } =
+      typeof value === 'object' ? value : { position: value };
+
+    if (!verticalPositions[position]) {
+      return null;
+    }
+
+    return verticalPositions[position](offset);
+  },
+};
+
+export default function useBackground(style) {
+  const flattenedStyle = StyleSheet.flatten(style);
+
+  const background = {
+    containerStyle: {},
+    objectStyle: {},
+    xml: null,
+  };
+
+  Object.entries(flattenedStyle).forEach(([key, value]) => {
+    if (!value) {
+      return;
+    }
+
+    if (key === 'backgroundImage') {
+      background.xml = getXml(value);
+    } else if (key === 'backgroundSize') {
+      Object.assign(background.objectStyle, transforms[key](value));
+    } else if (
+      key === 'backgroundPosition' ||
+      key === 'backgroundPositionX' ||
+      key === 'backgroundPositionY'
+    ) {
+      Object.assign(background.containerStyle, transforms[key](value));
+    }
+  });
+
+  return {
+    style: flattenedStyle,
+    element: (
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          styles.container,
+          background.containerStyle,
+        ]}
+      >
+        <View style={[styles.object, background.objectStyle]}>
+          {background.xml && <SvgXml xml={background.xml} />}
+        </View>
+      </View>
+    ),
+  };
+}

package/src/hooks/useControlledState.js

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+export default function useControlledState(
+  defaultValue,
+  controlledValue,
+  handleChange = () => {},
+) {
+  const [stateValue, setStateValue] = useState(defaultValue);
+
+  const isControlled =
+    controlledValue !== undefined && controlledValue !== null;
+
+  const value = isControlled ? controlledValue : stateValue;
+
+  const setValue = (next) => {
+    const nextValue = typeof next === 'function' ? next(value) : next;
+
+    if (value === nextValue) {
+      return;
+    }
+
+    if (!isControlled) {
+      setStateValue(next);
+    }
+
+    handleChange(nextValue);
+  };
+
+  return [value, setValue];
+}

package/src/hooks/useFixedElement.js

@@ -0,0 +1,17 @@
+import { useContext, useRef, useEffect } from 'react';
+import Context from '../Context';
+
+export default function useFixedElement() {
+  const context = useContext(Context);
+  const ref = useRef();
+
+  useEffect(() => {
+    const link = context.addFixedElement(ref);
+
+    return () => {
+      link.remove();
+    };
+  }, []);
+
+  return ref;
+}

package/src/hooks/useForcedContext.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import invariant from 'tiny-invariant';
+
+export default function useForcedContext(Context) {
+  const context = useContext(Context);
+
+  invariant(context, `Failed to get context "${Context.displayName}".`);
+
+  return context;
+}

package/src/hooks/useIdentifier.js

@@ -0,0 +1,14 @@
+import { useContext, useRef } from 'react';
+import Context from '../Context';
+
+export default function useIdentifier(prefix) {
+  const context = useContext(Context);
+
+  const ref = useRef();
+
+  if (!ref.current) {
+    ref.current = context.generateKey(prefix);
+  }
+
+  return ref.current;
+}

package/src/hooks/useInteractionState.js

@@ -0,0 +1,54 @@
+import { useState, useMemo } from 'react';
+import { useFocusRing } from '@react-native-aria/focus';
+
+export default function useInteractionState({
+  onFocus = () => {},
+  onBlur = () => {},
+  onHoverIn = () => {},
+  onHoverOut = () => {},
+  onPressIn = () => {},
+  onPressOut = () => {},
+  autoFocus,
+}) {
+  const [active, setActive] = useState(false);
+  const [hover, setHovered] = useState(false);
+  const {
+    isFocused: focus,
+    isFocusVisible: focusVisible,
+    focusProps,
+  } = useFocusRing({ autoFocus });
+
+  const interactionProps = useMemo(
+    () => ({
+      onHoverIn(event) {
+        setHovered(true);
+        onHoverIn(event);
+      },
+      onHoverOut(event) {
+        setHovered(false);
+        onHoverOut(event);
+      },
+      onFocus(event) {
+        focusProps.onFocus(event);
+        onFocus(event);
+      },
+      onBlur(event) {
+        focusProps.onBlur(event);
+        onBlur(event);
+      },
+      onPressIn(event) {
+        setActive(true);
+        onPressIn(event);
+      },
+      onPressOut(event) {
+        setActive(false);
+        onPressOut(event);
+      },
+    }),
+    [onFocus, onBlur, onHoverIn, onHoverOut, onPressIn, onPressOut],
+  );
+
+  const interaction = { hover, focus, focusVisible, active };
+
+  return { interaction, interactionProps };
+}

package/src/hooks/useList.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import ListContext from '../components/helpers/ListContext';
+
+const wrapChildren = (children, cache) =>
+  React.Children.map(children, (child) => {
+    if (child === null) {
+      return null;
+    }
+
+    if (child.type === React.Fragment) {
+      return (
+        <React.Fragment key={child.key}>
+          {wrapChildren(child.props.children, cache)}
+        </React.Fragment>
+      );
+    }
+
+    if (React.isValidElement(child) && typeof child === 'object') {
+      // eslint-disable-next-line no-param-reassign
+      cache.count += 1;
+
+      const pos = cache.count;
+
+      return (
+        <ListContext.Provider
+          value={{
+            nth(value) {
+              return pos === value;
+            },
+            get first() {
+              return pos === 1;
+            },
+            get last() {
+              return pos === cache.count;
+            },
+            get length() {
+              return cache.count;
+            },
+          }}
+          key={child.key}
+        >
+          {child}
+        </ListContext.Provider>
+      );
+    }
+
+    return null;
+  });
+
+export default function useList(children) {
+  return wrapChildren(children, { count: 0 });
+}

package/src/hooks/useMedia.js

@@ -0,0 +1,27 @@
+import { useContext } from 'react';
+import Context from '../Context';
+import StyleSheet from '../style/StyleSheet';
+
+export default function useMedia() {
+  const context = useContext(Context);
+
+  const viewport = context.getViewport();
+  const breakpoints = StyleSheet.value('grid-breakpoints');
+
+  const breakpointKeys = Object.keys(breakpoints);
+
+  return {
+    up(point) {
+      return breakpointKeys.indexOf(viewport) >= breakpointKeys.indexOf(point);
+    },
+    down(point) {
+      return breakpointKeys.indexOf(viewport) <= breakpointKeys.indexOf(point);
+    },
+    only(point) {
+      return viewport === point;
+    },
+    between(lower, upper) {
+      return this.up(lower) && this.down(upper);
+    },
+  };
+}

package/src/hooks/useModifier.js

@@ -0,0 +1,17 @@
+import Context from '../Context';
+import { concatRefs } from '../utils';
+import useForcedContext from './useForcedContext';
+
+export default function useModifier(name, props, ref) {
+  const context = useForcedContext(Context);
+
+  const useModifierHook = context.modifiers[name];
+
+  if (!useModifier) {
+    return [props, ref];
+  }
+
+  const { ref: modifierRef, ...modifierProps } = useModifierHook(props);
+
+  return [modifierProps, concatRefs(modifierRef, ref)];
+}

package/src/hooks/useScrollbarEffects.js

@@ -0,0 +1,82 @@
+import { useRef, useMemo } from 'react';
+import { Platform, findNodeHandle } from 'react-native';
+
+const computeScrollbarWidth = () => {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+};
+
+export default function useScrollbarEffects(elements) {
+  if (Platform.OS !== 'web') {
+    return useMemo(
+      () => ({
+        hide() {},
+        show() {},
+      }),
+      [],
+    );
+  }
+
+  const state = useRef({
+    counter: 0,
+    elements: [],
+    originalWidths: [],
+    originalBodyOverflow: '',
+  });
+
+  return useMemo(
+    () => ({
+      hide() {
+        state.current.counter += 1;
+
+        if (state.current.counter !== 1) {
+          return;
+        }
+
+        const rect = document.body.getBoundingClientRect();
+        const isBodyOverflowing = rect.left + rect.right < window.innerWidth;
+
+        // Set body and fixed elements padding adjustments.
+        const fixedElements = elements
+          .filter((ref) => ref.current)
+          .map((ref) => findNodeHandle(ref.current));
+        state.current.elements = [document.body, ...fixedElements];
+
+        state.current.originalWidths = state.current.elements.map(
+          (el) => el.style.width || '',
+        );
+
+        state.current.originalBodyOverflow = document.body.style.overflow || '';
+
+        if (isBodyOverflowing) {
+          const scrollbarWidth = computeScrollbarWidth();
+
+          state.current.elements.forEach((el) => {
+            // eslint-disable-next-line no-param-reassign
+            el.style.width = `calc(100% - ${scrollbarWidth}px)`;
+          });
+        }
+
+        // Add "overflow: hidden" to body element.
+        document.body.style.overflow = 'hidden';
+      },
+      show() {
+        state.current.counter -= 1;
+
+        if (state.current.counter !== 0) {
+          return;
+        }
+
+        // Remove "overflow: hidden" from body element.
+        document.body.style.overflow = state.current.originalBodyOverflow;
+
+        // Reset body padding adjustments.
+        state.current.elements.forEach((el, key) => {
+          // eslint-disable-next-line no-param-reassign
+          el.style.width = state.current.originalWidths[key] || '';
+        });
+      },
+    }),
+    [],
+  );
+}

package/src/hooks/useStyle.js

@@ -0,0 +1,62 @@
+import { useContext, useMemo } from 'react';
+import { BOOTSTRAP_RN_STYLE } from '../style/createStyle';
+import Context from '../Context';
+
+const normalize = (style) => {
+  if (!Array.isArray(style)) {
+    return [style];
+  }
+
+  return style
+    .filter((val) => !!val)
+    .reduce((res, val) => [...res, ...normalize(val)], []);
+};
+
+export default function useStyle(style, styleName) {
+  const { utilities: utilitiesStyles } = useContext(Context);
+
+  const utilities = useMemo(() => {
+    if (!styleName) {
+      return null;
+    }
+
+    const names = styleName.split(' ');
+
+    return names.map((name) => {
+      if (!utilitiesStyles[name]) {
+        // eslint-disable-next-line no-console
+        console.warn(`Unknown utility style "${name}".`);
+
+        return null;
+      }
+
+      return utilitiesStyles[name];
+    });
+  }, [styleName]);
+
+  const styles = normalize(utilities ? [style, ...utilities] : style);
+
+  return (state) => {
+    const basicStyles = [];
+    const interactionStyles = [];
+
+    styles.forEach((value) => {
+      if (value && value.$$typeof === BOOTSTRAP_RN_STYLE) {
+        // Style is a bootstrap style that contains basic and interaction styles.
+        const [resolvedBasicStyles, resolvedInteractionStyles] = value(state);
+
+        basicStyles.push(...resolvedBasicStyles);
+        interactionStyles.push(...resolvedInteractionStyles);
+      } else if (typeof value === 'function') {
+        // Style is some other custom function type style.
+        basicStyles.push(value(state));
+      } else {
+        // Style is basic object style.
+        basicStyles.push(value);
+      }
+    });
+
+    // Put basic styles first, then interaction styles for hover, focus, pressed.
+    return [...basicStyles, ...interactionStyles];
+  };
+}