bootstrap-rn 0.3.0 → 0.3.1

package/src/components/Pressable.js

@@ -0,0 +1,148 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Text, I18nManager, Pressable as BasePressable } from 'react-native';
+import TextStyleContext from '../style/TextStyleContext';
+import useModifier from '../hooks/useModifier';
+import useAction from '../hooks/useAction';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+import useInteractionState from '../hooks/useInteractionState';
+import Caret from './Caret';
+
+const DIRECTIONS = ['up', 'down', 'start', 'end'];
+
+const propTypes = {
+  children: PropTypes.node,
+  caret: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({
+      direction: PropTypes.oneOf(DIRECTIONS),
+      color: PropTypes.string,
+    }),
+  ]),
+  active: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  activeStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  activeTextStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  styleName: PropTypes.any,
+};
+
+// One of the following should be set for aria support:
+// 1) role
+// 2) aria-label + aria-hint
+// 3) accessibilityActions + onAccessibilityAction
+export const getRole = (props) => {
+  const { role, accessibilityActions } = props;
+
+  if (role) {
+    return role;
+  }
+
+  if (props['aria-label'] || accessibilityActions) {
+    return null;
+  }
+
+  return 'button';
+};
+
+const applyCaret = (children, caret) => {
+  if (!caret) {
+    return children;
+  }
+
+  const options = caret === true ? {} : caret;
+
+  const element = <Caret color={options.color} direction={options.direction} />;
+  const space = <Text> </Text>;
+
+  const isLeftCaret =
+    options.direction === (I18nManager.isRTL ? 'end' : 'start');
+
+  if (isLeftCaret) {
+    return (
+      <>
+        {element}
+        {space}
+        {children}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {children}
+      {space}
+      {element}
+    </>
+  );
+};
+
+const Pressable = React.forwardRef((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useActionable', props, ref);
+  const [actionProps, actionRef] = useAction(modifierProps, modifierRef);
+
+  const {
+    children,
+    caret = false,
+    active = false,
+    style,
+    activeStyle,
+    textStyle,
+    activeTextStyle,
+    styleName,
+    ...elementProps
+  } = actionProps;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const resolveStyle = useStyle(style, styleName);
+  const resolveActiveStyle = useStyle(active && activeStyle);
+  const resolveTextStyle = useStyle([context && context.style, textStyle]);
+  const resolveActiveTextStyle = useStyle(active && activeTextStyle);
+
+  const { interaction, interactionProps } = useInteractionState(elementProps);
+
+  const hasTextStyle = (context && context.style) || textStyle;
+  const wrappedChildren = applyCaret(children, caret);
+
+  return (
+    <BasePressable
+      {...elementProps}
+      {...interactionProps}
+      ref={actionRef}
+      role={getRole(actionProps)}
+      style={[
+        resolveStyle({ media, interaction }),
+        resolveActiveStyle({ media, interaction }),
+      ]}
+    >
+      {hasTextStyle ? (
+        <TextStyleContext.Provider
+          value={{
+            style: [
+              resolveTextStyle({ media, interaction }),
+              resolveActiveTextStyle({ media, interaction }),
+            ],
+            hasAncestor: context && context.hasTextAncestor,
+          }}
+        >
+          {wrappedChildren}
+        </TextStyleContext.Provider>
+      ) : (
+        wrappedChildren
+      )}
+    </BasePressable>
+  );
+});
+
+Pressable.displayName = 'Pressable';
+Pressable.propTypes = propTypes;
+
+export default Pressable;

package/src/components/ScrollView.js

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { ScrollView as BaseScrollView } from 'react-native';
+import TextStyleContext from '../style/TextStyleContext';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+
+const propTypes = {
+  children: PropTypes.node,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentContainerStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  styleName: PropTypes.any,
+};
+
+const ScrollView = React.forwardRef((props, ref) => {
+  const {
+    children,
+    contentContainerStyle,
+    style,
+    textStyle,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const resolveContentContainerStyle = useStyle(contentContainerStyle);
+  const resolveStyle = useStyle(style, styleName);
+  const resolveTextStyle = useStyle([context && context.style, textStyle]);
+
+  const hasTextStyle = (context && context.style) || textStyle;
+
+  return (
+    <BaseScrollView
+      {...elementProps}
+      ref={ref}
+      contentContainerStyle={resolveContentContainerStyle({ media })}
+      style={resolveStyle({ media })}
+    >
+      {hasTextStyle ? (
+        <TextStyleContext.Provider
+          value={{
+            style: resolveTextStyle({ media }),
+            hasAncestor: context && context.hasTextAncestor,
+          }}
+        >
+          {children}
+        </TextStyleContext.Provider>
+      ) : (
+        children
+      )}
+    </BaseScrollView>
+  );
+});
+
+ScrollView.displayName = 'ScrollView';
+ScrollView.propTypes = propTypes;
+
+export default ScrollView;

package/src/components/Text.js

@@ -0,0 +1,121 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Text as BaseText } from 'react-native';
+import StyleSheet from '../style/StyleSheet';
+import css from '../style/css';
+import useMedia from '../hooks/useMedia';
+import TextStyleContext from '../style/TextStyleContext';
+import { getStyles } from '../utils';
+import { THEME_COLORS } from '../theme/proxies';
+import useStyle from '../hooks/useStyle';
+
+const propTypes = {
+  color: PropTypes.oneOf([
+    ...Object.keys(THEME_COLORS),
+    'muted',
+    'black-50',
+    'white-50',
+  ]),
+  small: PropTypes.bool,
+  mark: PropTypes.bool,
+  bold: PropTypes.bool,
+  italic: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  styleName: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  text: css`
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    font-weight: $font-weight-base;
+    line-height: $font-size-base * $line-height-base;
+  `,
+  strong: css`
+    font-weight: $font-weight-bolder;
+  `,
+  italic: css`
+    font-style: italic;
+  `,
+  small: css`
+    font-size: $small-font-size;
+    line-height: $small-font-size * $line-height-base;
+  `,
+  mark: css`
+    padding: $mark-padding;
+    background-color: $mark-bg;
+  `,
+});
+
+const getStyleName = (styleName, color) => {
+  if (!color) {
+    return styleName;
+  }
+
+  return styleName ? `text-${color} ${styleName}` : `text-${color}`;
+};
+
+const Text = React.forwardRef((props, ref) => {
+  const {
+    color, // will be deprecated soon
+    bold = false,
+    italic = false,
+    mark = false,
+    small = false,
+    style,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const classes = getStyles(styles, [
+    bold && 'strong',
+    italic && 'italic',
+    small && 'small',
+    mark && 'mark',
+  ]);
+
+  const resolveStyle = useStyle(
+    [
+      // eslint-disable-next-line react/destructuring-assignment
+      (!context || !context.hasTextAncestor) && styles.text,
+      // eslint-disable-next-line react/destructuring-assignment
+      context && context.style,
+      classes,
+      style,
+    ],
+    getStyleName(styleName, color),
+  );
+
+  const element = (
+    <BaseText {...elementProps} ref={ref} style={resolveStyle({ media })} />
+  );
+
+  // eslint-disable-next-line react/destructuring-assignment
+  if (context && context.hasTextAncestor && !context.style) {
+    return element;
+  }
+
+  // If we are not in an ancestor context yet, we need to set hasTextAncestor
+  // to true for nested text components. Furthermore we need to reset the
+  // context style, because we only need to apply the style once.
+  return (
+    <TextStyleContext.Provider
+      value={{
+        style: null,
+        hasTextAncestor: true,
+      }}
+    >
+      {element}
+    </TextStyleContext.Provider>
+  );
+});
+
+Text.displayName = 'Text';
+Text.propTypes = propTypes;
+
+export default Text;

package/src/components/TextInput.js

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { TextInput as BaseTextInput } from 'react-native';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+
+const propTypes = {
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  autoFocus: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  styleName: PropTypes.any,
+};
+
+const TextInput = React.forwardRef((props, ref) => {
+  const {
+    onFocus = () => {},
+    onBlur = () => {},
+    autoFocus = false,
+    style,
+    styleName,
+    ...elementProps
+  } = props;
+
+  const [focused, setFocused] = useState(autoFocus);
+
+  const media = useMedia();
+  const resolveStyle = useStyle(style, styleName);
+
+  return (
+    <BaseTextInput
+      {...elementProps}
+      ref={ref}
+      onFocus={(event) => {
+        setFocused(true);
+        onFocus(event);
+      }}
+      onBlur={(event) => {
+        setFocused(false);
+        onBlur(event);
+      }}
+      autoFocus={autoFocus}
+      style={resolveStyle({
+        media,
+        interaction: { focus: focused, focusVisible: focused },
+      })}
+    />
+  );
+});
+
+TextInput.displayName = 'TextInput';
+TextInput.propTypes = propTypes;
+
+export default TextInput;

package/src/components/View.js

@@ -0,0 +1,50 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { View as BaseView } from 'react-native';
+import TextStyleContext from '../style/TextStyleContext';
+import useMedia from '../hooks/useMedia';
+import useStyle from '../hooks/useStyle';
+
+const propTypes = {
+  children: PropTypes.node,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  styleName: PropTypes.any,
+};
+
+const View = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, styleName, ...elementProps } = props;
+
+  const media = useMedia();
+  const context = useContext(TextStyleContext);
+
+  const resolveStyle = useStyle(style, styleName);
+  const resolveTextStyle = useStyle([context && context.style, textStyle]);
+
+  const hasTextStyle = (context && context.style) || textStyle;
+
+  return (
+    <BaseView {...elementProps} ref={ref} style={resolveStyle({ media })}>
+      {hasTextStyle ? (
+        <TextStyleContext.Provider
+          value={{
+            style: resolveTextStyle({ media }),
+            hasAncestor: context && context.hasTextAncestor,
+          }}
+        >
+          {children}
+        </TextStyleContext.Provider>
+      ) : (
+        children
+      )}
+    </BaseView>
+  );
+});
+
+View.displayName = 'View';
+View.propTypes = propTypes;
+
+export default View;

package/src/components/alert/Alert.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { getStyles, each } from '../../utils';
+import { THEME_COLORS } from '../../theme/proxies';
+import { shiftColor } from '../../theme/functions';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
+  dismissible: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.alert': css`
+    position: relative;
+    padding: $alert-padding-y $alert-padding-x;
+    margin-bottom: $alert-margin-bottom;
+    background-color: transparent;
+    border: $alert-border-width solid transparent;
+    border-radius: $alert-border-radius;
+  `,
+  ...each(THEME_COLORS, (state, value) => ({
+    [`.alert-${state}`]: css`
+      background-color: ${shiftColor(value, (t) => t['alert-bg-scale'])};
+      border-color: ${shiftColor(value, (t) => t['alert-border-scale'])};
+    `,
+    [`.alert-${state} --text`]: css`
+      color: ${shiftColor(value, (t) => t['alert-color-scale'])};
+    `,
+  })),
+  '.alert-dismissible': {
+    // TODO
+  },
+});
+
+const Alert = React.forwardRef((props, ref) => {
+  const {
+    children,
+    color = 'primary',
+    dismissible = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const classes = getStyles(styles, [
+    '.alert',
+    `.alert-${color}`,
+    dismissible && '.alert-dismissible',
+  ]);
+
+  const textClasses = getStyles(styles, [`.alert-${color} --text`]);
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role="alert"
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+Alert.displayName = 'Alert';
+Alert.propTypes = propTypes;
+
+export default Alert;

package/src/components/badge/Badge.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import Text from '../Text';
+import { getStyles } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.badge': css`
+    // display: inline-block;
+    padding: $badge-padding-y $badge-padding-x;
+    border-radius: $badge-border-radius;
+    // @include gradient-bg();
+  `,
+  '.badge --text': css`
+    font-size: $badge-font-size;
+    font-weight: $badge-font-weight;
+    line-height: $badge-font-size * 1;
+    color: $badge-color;
+    text-align: center;
+    // white-space: nowrap;
+    // vertical-align: baseline;
+  `,
+});
+
+const Badge = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.badge']);
+  const textClasses = getStyles(styles, ['.badge --text']);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+});
+
+Badge.displayName = 'Badge';
+Badge.propTypes = propTypes;
+
+export default Badge;

package/src/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import View from '../View';
+import useList from '../../hooks/useList';
+import BreadcrumbItem from './BreadcrumbItem';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.breadcrumb': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    padding: $breadcrumb-padding-y $breadcrumb-padding-x;
+    margin-bottom: $breadcrumb-margin-bottom;
+    // list-style: none;
+    background-color: $breadcrumb-bg;
+    border-radius: $breadcrumb-border-radius;
+  `,
+  '.breadcrumb --text': css`
+    font-size: $breadcrumb-font-size;
+    line-height: $breadcrumb-font-size * $line-height-base; // added for bootstrap-rn
+  `,
+});
+
+const Breadcrumb = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const list = useList(children);
+
+  const classes = getStyles(styles, ['.breadcrumb']);
+  const textClasses = getStyles(styles, ['.breadcrumb --text']);
+
+  const role = Platform.OS === 'web' ? 'list' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {list}
+    </View>
+  );
+});
+
+Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.propTypes = propTypes;
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;