bootstrap-rn 0.3.0 → 0.3.2

package/src/hooks/useTrigger.js

@@ -0,0 +1,133 @@
+import { useState, useRef } from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import useIdentifier from './useIdentifier';
+import { optional, concatRefs } from '../utils';
+import useControlledState from './useControlledState';
+
+const PLACEMENTS = ['top', 'bottom', 'left', 'right'];
+
+const TRIGGERS = [
+  'press',
+  'hover',
+  'focus',
+  'manual',
+  'press hover',
+  'hover press',
+  'hover focus',
+  'focus hover',
+  'press focus',
+  'focus press',
+];
+
+export const TriggerPropTypes = {
+  trigger: PropTypes.oneOf(TRIGGERS),
+  placement: PropTypes.oneOf(PLACEMENTS),
+  offset: PropTypes.number,
+  defaultVisible: PropTypes.bool,
+  visible: PropTypes.bool,
+  onToggle: PropTypes.func,
+};
+
+export default function useTrigger(rawTrigger, props, elementProps, ref) {
+  const {
+    defaultVisible = false,
+    visible: controlledVisible,
+    onToggle,
+  } = props;
+
+  const { onPress, onFocus, onBlur, onMouseOver, onMouseLeave } = elementProps;
+
+  const trigger = rawTrigger.split(' ');
+
+  const identifier = useIdentifier('overlay');
+  const [visible, setVisible] = useControlledState(
+    defaultVisible,
+    controlledVisible,
+    onToggle,
+  );
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  const targetRef = useRef();
+
+  return {
+    visible,
+    setVisible,
+    targetProps: {
+      ref: concatRefs(targetRef, ref),
+      ...optional(visible, { 'aria-describedby': identifier }),
+      onPress: (event) => {
+        const handleHoverAsPress =
+          (Platform.OS === 'android' || Platform.OS === 'ios') &&
+          trigger.includes('hover');
+
+        if (trigger.includes('press') || handleHoverAsPress) {
+          setVisible((value) => !value);
+        }
+
+        if (onPress) {
+          onPress(event);
+        }
+      },
+      onFocus: (event) => {
+        if (trigger.includes('focus')) {
+          setFocused(true);
+
+          if (!visible) {
+            setVisible(true);
+          }
+        }
+
+        if (onFocus) {
+          onFocus(event);
+        }
+      },
+      onBlur: (event) => {
+        if (trigger.includes('focus')) {
+          setFocused(false);
+
+          const activeHoverTrigger = trigger.includes('hover') && hovered;
+          if (visible && !activeHoverTrigger) {
+            setVisible(false);
+          }
+        }
+
+        if (onBlur) {
+          onBlur(event);
+        }
+      },
+      onMouseOver: (event) => {
+        if (trigger.includes('hover')) {
+          setHovered(true);
+
+          if (!visible && !focused) {
+            setVisible(true);
+          }
+        }
+
+        if (onMouseOver) {
+          onMouseOver(event);
+        }
+      },
+      onMouseLeave: (event) => {
+        if (trigger.includes('hover')) {
+          setHovered(false);
+
+          const activeFocusTrigger = trigger.includes('focus') && focused;
+          if (visible && !activeFocusTrigger) {
+            setVisible(false);
+          }
+        }
+
+        if (onMouseLeave) {
+          onMouseLeave(event);
+        }
+      },
+    },
+    targetRef,
+    templateProps: {
+      id: identifier,
+    },
+  };
+}

package/src/hooks/useViewport.js

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { Dimensions, Platform } from 'react-native';
+import StyleSheet from '../style/StyleSheet';
+
+const calculateViewport = (breakpoints, width) => {
+  if (width < breakpoints.sm) {
+    return 'xs';
+  }
+  if (width < breakpoints.md) {
+    return 'sm';
+  }
+  if (width < breakpoints.lg) {
+    return 'md';
+  }
+  if (width < breakpoints.xl) {
+    return 'lg';
+  }
+  if (width < breakpoints.xxl) {
+    return 'xl';
+  }
+  return 'xxl';
+};
+
+const getWidth = (dimensions) => {
+  // Use web api on web because of issue #38:
+  // https://github.com/examunity/bootstrap-rn/issues/38
+  if (Platform.OS === 'web') {
+    return Math.max(
+      document.documentElement.clientWidth || 0,
+      window.innerWidth || 0,
+    );
+  }
+
+  return dimensions.window.width;
+};
+
+export default function useViewport(initialViewport) {
+  const [viewport, setViewport] = useState(initialViewport);
+  const breakpoints = StyleSheet.value('grid-breakpoints');
+
+  const handleChange = (dimensions) => {
+    const width = getWidth(dimensions);
+    const nextViewport = calculateViewport(breakpoints, width);
+
+    setViewport(nextViewport);
+  };
+
+  useEffect(() => {
+    // Initially determine viewport after mounting.
+    handleChange({ window: Dimensions.get('window') });
+
+    const subscription = Dimensions.addEventListener('change', handleChange);
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return viewport;
+}

package/src/index.js

@@ -0,0 +1,134 @@
+import { PortalProvider } from '@react-native-aria/overlays';
+import css from './style/css';
+import makeUtilities from './style/makeUtilities';
+import makeTheme from './style/makeTheme';
+import StyleSheet from './style/StyleSheet';
+import Context from './Context';
+import Provider from './Provider';
+// components
+import Alert from './components/alert/Alert';
+import Badge from './components/badge/Badge';
+import Breadcrumb from './components/breadcrumb/Breadcrumb';
+import ButtonGroup from './components/button-group/ButtonGroup';
+import ButtonToolbar from './components/button-group/ButtonToolbar';
+import Button from './components/buttons/Button';
+import Blockquote from './components/type/Blockquote';
+import Body from './components/Body';
+import Card from './components/card/Card';
+import Caret from './components/Caret';
+import CloseButton from './components/close/CloseButton';
+import Collapse from './components/collapse/Collapse';
+import Container from './components/containers/Container';
+import Checkbox from './components/forms/Checkbox';
+import Col from './components/grid/Col';
+import Code from './components/type/Code';
+import Dropdown from './components/dropdown/Dropdown';
+import DisplayHeading from './components/type/DisplayHeading';
+import Feedback from './components/forms/Feedback';
+import FormCheck from './components/forms/FormCheck';
+import FormLabel from './components/forms/FormLabel';
+import FormText from './components/forms/FormText';
+import Heading from './components/Heading';
+import Input from './components/forms/Input';
+import injectPopover from './components/popover/injectPopover';
+import injectTooltip from './components/tooltip/injectTooltip';
+import Image from './components/Image';
+import ImageBackground from './components/ImageBackground';
+import Label from './components/Label';
+import ListGroup from './components/list-group/ListGroup';
+import Link from './components/Link';
+import Modal from './components/modal/Modal';
+import Nav from './components/nav/Nav';
+import Navbar from './components/navbar/Navbar';
+import Offcanvas from './components/offcanvas/Offcanvas';
+import Picker from './components/forms/Picker';
+import Placeholders from './components/placeholders/Placeholders';
+import Popover from './components/popover/Popover';
+import Progress from './components/progress/Progress';
+import Paragraph from './components/type/Paragraph';
+import Pressable from './components/Pressable';
+import Pagination from './components/pagination/Pagination';
+import Radio from './components/forms/Radio';
+import Row from './components/grid/Row';
+import Switch from './components/forms/Switch';
+import Spinner from './components/spinners/Spinner';
+import ScrollView from './components/ScrollView';
+import Tab from './components/nav/Tab';
+import Toast from './components/toasts/Toast';
+import ToastContainer from './components/toasts/ToastContainer';
+import Tooltip from './components/tooltip/Tooltip';
+import Text from './components/Text';
+import TextInput from './components/TextInput';
+import useFixedElement from './hooks/useFixedElement';
+import useMedia from './hooks/useMedia';
+import useStyle from './hooks/useStyle';
+import View from './components/View';
+
+export * from './theme/functions';
+
+export {
+  Alert,
+  Badge,
+  ButtonGroup,
+  ButtonToolbar,
+  Button,
+  Breadcrumb,
+  Blockquote,
+  Body,
+  css,
+  Card,
+  Caret,
+  CloseButton,
+  Collapse,
+  Container,
+  Context,
+  Checkbox,
+  Col,
+  Code,
+  Dropdown,
+  DisplayHeading,
+  Feedback,
+  FormCheck,
+  FormLabel,
+  FormText,
+  Heading,
+  Input,
+  Image,
+  ImageBackground,
+  injectPopover,
+  injectTooltip,
+  Label,
+  ListGroup,
+  Link,
+  Modal,
+  makeUtilities,
+  makeTheme,
+  Nav,
+  Navbar,
+  Offcanvas,
+  PortalProvider,
+  Provider,
+  Picker,
+  Pagination,
+  Placeholders,
+  Popover,
+  Progress,
+  Paragraph,
+  Pressable,
+  Radio,
+  Row,
+  StyleSheet,
+  Switch,
+  Spinner,
+  ScrollView,
+  Tab,
+  Toast,
+  ToastContainer,
+  Tooltip,
+  Text,
+  TextInput,
+  useFixedElement,
+  useMedia,
+  useStyle,
+  View,
+};

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 });
+}