bootstrap-rn 0.3.0 → 0.3.2

package/src/components/dropdown/DropdownHeader.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import View from '../View';
+import Heading from '../Heading';
+
+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({
+  '.dropdown-header': css`
+    // display: block;
+    padding: $dropdown-header-padding;
+  `,
+  '.dropdown-header --text': css`
+    margin-bottom: 0; // for use with heading elements
+    font-size: $font-size-sm;
+    color: $dropdown-header-color;
+    // white-space: nowrap; // as with > li > a
+  `,
+});
+
+const DropdownHeader = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.dropdown-header']);
+  const textClasses = getStyles(styles, ['.dropdown-header --text']);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Heading size={6} style={[textClasses, textStyle]}>
+        {children}
+      </Heading>
+    </View>
+  );
+});
+
+DropdownHeader.displayName = 'DropdownHeader';
+DropdownHeader.propTypes = propTypes;
+
+export default DropdownHeader;

package/src/components/dropdown/DropdownItem.js

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+import DropdownContext from './DropdownContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  onPress: PropTypes.func,
+  active: PropTypes.bool,
+  disabled: 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({
+  '.dropdown-item': css`
+    width: 100%;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    // clear: both;
+    background-color: transparent;
+    border: 0;
+
+    &:hover {
+      // @include gradient-bg($dropdown-link-hover-bg);
+      background-color: $dropdown-link-hover-bg;
+    }
+    &:focus {
+      // @include gradient-bg($dropdown-link-hover-bg);
+      background-color: $dropdown-link-hover-bg;
+    }
+  `,
+  '.dropdown-item --text': css`
+    font-weight: $font-weight-normal;
+    color: $dropdown-link-color;
+    // text-align: inherit;
+    text-decoration: none; // if($link-decoration == none, null, none);
+    // white-space: nowrap;
+
+    &:hover {
+      color: $dropdown-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+    &:focus {
+      color: $dropdown-link-hover-color;
+      text-decoration: none; // if($link-hover-decoration == underline, none, null);
+    }
+  `,
+  '.dropdown-item.active': css`
+    // @include gradient-bg($dropdown-link-active-bg);
+    background-color: $dropdown-link-active-bg;
+
+    &:hover {
+      background-color: $dropdown-link-active-bg;
+    }
+    &:focus {
+      background-color: $dropdown-link-active-bg;
+    }
+  `,
+  '.dropdown-item.active --text': css`
+    color: $dropdown-link-active-color;
+    text-decoration: none;
+
+    &:hover {
+      color: $dropdown-link-active-color;
+    }
+    &:focus {
+      color: $dropdown-link-active-color;
+    }
+  `,
+
+  '.dropdown-item.disabled': css`
+    pointer-events: none;
+    background-color: transparent;
+    // Remove CSS gradients if they're enabled
+    // background-image: if($enable-gradients, none, null);
+
+    &:hover {
+      background-color: transparent;
+    }
+    &:focus {
+      background-color: transparent;
+    }
+  `,
+  '.dropdown-item.disabled --text': css`
+    color: $dropdown-link-disabled-color;
+
+    &:hover {
+      color: $dropdown-link-disabled-color;
+    }
+    &:focus {
+      color: $dropdown-link-disabled-color;
+    }
+  `,
+});
+
+const DropdownItem = (props) => {
+  const {
+    children,
+    onPress: handlePress,
+    active = false,
+    disabled = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const dropdown = useForcedContext(DropdownContext);
+
+  const classes = getStyles(styles, [
+    '.dropdown-item',
+    active && '.dropdown-item.active',
+    disabled && '.dropdown-item.disabled',
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.dropdown-item --text',
+    active && '.dropdown-item.active --text',
+    disabled && '.dropdown-item.disabled --text',
+  ]);
+
+  return (
+    <Pressable
+      {...elementProps}
+      onPress={(event) => {
+        if (handlePress) handlePress(event);
+
+        if (event.defaultPrevented) {
+          return;
+        }
+
+        dropdown.setVisible(false);
+      }}
+      disabled={disabled}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+};
+
+DropdownItem.displayName = 'DropdownItem';
+DropdownItem.propTypes = propTypes;
+
+export default DropdownItem;

package/src/components/dropdown/DropdownItemText.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import View from '../View';
+import Text from '../Text';
+
+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({
+  '.dropdown-item-text': css`
+    // display: block;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+  `,
+  '.dropdown-item-text --text': css`
+    color: $dropdown-link-color;
+  `,
+});
+
+const DropdownItemText = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.dropdown-item-text']);
+  const textClasses = getStyles(styles, ['.dropdown-item-text --text']);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+});
+
+DropdownItemText.displayName = 'DropdownItemText';
+DropdownItemText.propTypes = propTypes;
+
+export default DropdownItemText;

package/src/components/dropdown/DropdownMenu.js

@@ -0,0 +1,283 @@
+import React, { useContext, useRef } from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import { OverlayContainer } from '@react-native-aria/overlays';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Overlay from '../helpers/Overlay';
+import BackdropHandler from '../helpers/BackdropHandler';
+import View from '../View';
+import useMedia from '../../hooks/useMedia';
+import { GRID_BREAKPOINTS } from '../../theme/proxies';
+import { infix, next } from '../../theme/breakpoints';
+import { getStyles, each, concatRefs } from '../../utils';
+import { normalizeNumber } from '../../style/math';
+import useForcedContext from '../../hooks/useForcedContext';
+import NavbarContext from '../navbar/NavbarContext';
+import DropdownContext from './DropdownContext';
+
+const ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  start: PropTypes.oneOf(ALIGNMENT_BREAKPOINTS),
+  right: PropTypes.oneOf(ALIGNMENT_BREAKPOINTS),
+  end: PropTypes.oneOf(ALIGNMENT_BREAKPOINTS),
+  // 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({
+  '.dropdown-menu': css`
+    position: absolute;
+    z-index: $zindex-dropdown;
+    // display: none; // none by default, but block on "open" of the menu
+    min-width: $dropdown-min-width;
+    padding: $dropdown-padding-y $dropdown-padding-x;
+    margin: 0; // Override default margin of ul
+    // list-style: none;
+    background-color: $dropdown-bg;
+    // background-clip: padding-box;
+    border: $dropdown-border-width solid $dropdown-border-color;
+    border-radius: $dropdown-border-radius;
+    // @include box-shadow($dropdown-box-shadow);
+  `,
+  '.dropdown-menu[data-bs-popper]': css`
+    top: 100%;
+    left: 0;
+    margin-top: $dropdown-spacer;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.dropdown-menu${infix(breakpoint)}-start[data-bs-popper]`]: css`
+      @include media-breakpoint-up(${breakpoint}) {
+        right: auto;
+        left: 0;
+      }
+    `,
+    [`.dropdown-menu${infix(breakpoint)}-end[data-bs-popper]`]: css`
+      @include media-breakpoint-up(${breakpoint}) {
+        right: 0;
+        left: auto;
+      }
+    `,
+  })),
+  '.dropup .dropdown-menu[data-bs-popper]': css`
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: $dropdown-spacer;
+  `,
+  '.dropend .dropdown-menu[data-bs-popper]': css`
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: $dropdown-spacer;
+  `,
+  '.dropstart .dropdown-menu[data-bs-popper]': css`
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: $dropdown-spacer;
+  `,
+  '.navbar-nav .dropdown-menu': css`
+    position: relative; // static;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.navbar-expand${infix(
+      next(breakpoint),
+    )} .navbar-nav .dropdown-menu`]: css`
+      @include media-breakpoint-up(${next(breakpoint)}) {
+        position: absolute;
+      }
+    `,
+  })),
+  '.dropdown-menu --text': css`
+    font-size: $dropdown-font-size;
+    color: $dropdown-color;
+    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  `,
+});
+
+const getAlignment = (media, center, start, end) => {
+  if (center) {
+    return 'center';
+  }
+
+  const alignStart = typeof start === 'boolean' ? start : media.up(start);
+  const alignEnd = typeof end === 'boolean' ? end : media.up(end);
+
+  if (!alignEnd) {
+    return 'start';
+  }
+
+  if (!alignStart) {
+    return 'end';
+  }
+
+  const startIndex = ALIGNMENT_BREAKPOINTS.indexOf(start);
+  const endIndex = ALIGNMENT_BREAKPOINTS.indexOf(end);
+
+  return startIndex > endIndex ? 'start' : 'end';
+};
+
+const transformPlacement = (media, direction, center, start, end) => {
+  if (direction === 'up') {
+    return `top ${getAlignment(media, center, start, end)}`;
+  }
+
+  if (direction === 'down') {
+    return `bottom ${getAlignment(media, center, start, end)}`;
+  }
+
+  return `${direction} top`;
+};
+
+const DropdownMenu = React.forwardRef((props, ref) => {
+  const {
+    children,
+    start = true,
+    right,
+    end = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  if (right !== undefined) {
+    // eslint-disable-next-line no-console
+    console.warn('Prop "right" is deprecated, please use "end" instead.');
+  }
+
+  const navbar = useContext(NavbarContext);
+  const media = useMedia();
+  const dialogRef = useRef();
+
+  const dropdown = useForcedContext(DropdownContext);
+
+  const {
+    identifier,
+    toggleRef,
+    visible,
+    setVisible,
+    direction,
+    center,
+    display,
+    autoClose,
+  } = dropdown;
+
+  if (!visible) {
+    return null;
+  }
+
+  const isStatic = Platform.OS === 'web' && display === 'static';
+  const isCollapsedNavbar =
+    navbar &&
+    !(navbar.expand && (navbar.expand === true || media.up(navbar.expand)));
+  const hasStaticStyle = isStatic && !isCollapsedNavbar;
+
+  const classes = getStyles(styles, [
+    '.dropdown-menu',
+    // Non-Popper styles
+    hasStaticStyle && '.dropdown-menu[data-bs-popper]',
+    hasStaticStyle &&
+      start &&
+      `.dropdown-menu${
+        start === true ? '' : `-${start}`
+      }-start[data-bs-popper]`,
+    hasStaticStyle &&
+      end &&
+      `.dropdown-menu${end === true ? '' : `-${end}`}-end[data-bs-popper]`,
+    hasStaticStyle &&
+      direction === 'up' &&
+      '.dropup .dropdown-menu[data-bs-popper]',
+    hasStaticStyle &&
+      direction === 'end' &&
+      '.dropend .dropdown-menu[data-bs-popper]',
+    hasStaticStyle &&
+      direction === 'start' &&
+      '.dropstart .dropdown-menu[data-bs-popper]',
+    // Navbar styles
+    navbar && '.navbar-nav .dropdown-menu',
+    navbar &&
+      navbar.expand &&
+      `.navbar-expand${
+        navbar.expand === true ? '' : `-${navbar.expand}`
+      } .navbar-nav .dropdown-menu`,
+  ]);
+  const textClasses = getStyles(styles, ['.dropdown-menu --text']);
+
+  if (isStatic || isCollapsedNavbar) {
+    return (
+      <>
+        {!isCollapsedNavbar && (
+          <BackdropHandler
+            toggleRef={toggleRef}
+            dialogRef={dialogRef}
+            onClose={() => {
+              setVisible(false);
+            }}
+            autoClose={autoClose}
+          />
+        )}
+        <View
+          {...elementProps}
+          ref={concatRefs(dialogRef, ref)}
+          aria-labelledby={identifier}
+          style={[classes, style]}
+          textStyle={[textClasses, textStyle]}
+        >
+          {children}
+        </View>
+      </>
+    );
+  }
+
+  return (
+    <OverlayContainer>
+      <Overlay
+        placement={transformPlacement(media, direction, center, start, end)}
+        targetRef={toggleRef}
+        offset={normalizeNumber(StyleSheet.value('dropdown-spacer'))}
+        visible={visible}
+      >
+        {(overlay, overlayRef) => (
+          <>
+            <BackdropHandler
+              toggleRef={toggleRef}
+              dialogRef={overlayRef}
+              onClose={() => {
+                setVisible(false);
+              }}
+              autoClose={autoClose}
+            />
+            <View
+              {...elementProps}
+              ref={concatRefs(overlayRef, ref)}
+              aria-labelledby={identifier}
+              style={[
+                classes,
+                overlay.overlayProps.style,
+                { maxHeight: 'auto', opacity: overlay.rendered ? 1 : 0 },
+                style,
+              ]}
+              textStyle={[textClasses, textStyle]}
+            >
+              <DropdownContext.Provider value={dropdown}>
+                {children}
+              </DropdownContext.Provider>
+            </View>
+          </>
+        )}
+      </Overlay>
+    </OverlayContainer>
+  );
+});
+
+DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenu.propTypes = propTypes;
+
+export default DropdownMenu;

package/src/components/dropdown/DropdownToggle.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import useToggleDropdown from './useToggleDropdown';
+
+const propTypes = {
+  children: PropTypes.func.isRequired,
+};
+
+const DropdownToggle = (props) => {
+  const { children } = props;
+
+  return children(useToggleDropdown({}));
+};
+
+DropdownToggle.displayName = 'DropdownToggle';
+DropdownToggle.propTypes = propTypes;
+
+export default DropdownToggle;

package/src/components/dropdown/useDismissDropdown.js

@@ -0,0 +1,17 @@
+import useForcedContext from '../../hooks/useForcedContext';
+import DropdownContext from './DropdownContext';
+
+export default function useDismissDropdown(props) {
+  const context = useForcedContext(DropdownContext);
+
+  const { onPress: handlePress, ...restProps } = props;
+
+  return {
+    ...restProps,
+    onPress: (event) => {
+      if (handlePress) handlePress(event);
+
+      context.setVisible(false);
+    },
+  };
+}

package/src/components/dropdown/useDropdown.js

@@ -0,0 +1,37 @@
+import { useMemo, useRef } from 'react';
+import useIdentifier from '../../hooks/useIdentifier';
+import useControlledState from '../../hooks/useControlledState';
+
+export default function useDropdown(
+  defaultVisible,
+  controlledVisible,
+  onToggle,
+  direction,
+  center,
+  display,
+  autoClose,
+) {
+  const identifier = useIdentifier('dropdown');
+
+  const toggleRef = useRef();
+
+  const [visible, setVisible] = useControlledState(
+    defaultVisible,
+    controlledVisible,
+    onToggle,
+  );
+
+  return useMemo(
+    () => ({
+      identifier,
+      visible,
+      setVisible,
+      toggleRef,
+      direction,
+      center,
+      display,
+      autoClose,
+    }),
+    [visible, direction, center, display, autoClose],
+  );
+}

package/src/components/dropdown/useToggleDropdown.js

@@ -0,0 +1,23 @@
+import useForcedContext from '../../hooks/useForcedContext';
+import DropdownContext from './DropdownContext';
+
+export default function useToggleDropdown(props) {
+  const context = useForcedContext(DropdownContext);
+
+  const { onPress: handlePress, caret, ...restProps } = props;
+
+  return {
+    ...restProps,
+    id: context.identifier,
+    ref: context.toggleRef,
+    onPress: (event) => {
+      if (handlePress) handlePress(event);
+
+      context.setVisible((value) => !value);
+    },
+    'aria-haspopup': true,
+    'aria-expanded': context.visible,
+    active: context.visible,
+    caret: caret === undefined ? { direction: context.direction } : caret,
+  };
+}

package/src/components/forms/Checkbox.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import FormCheckInput from './FormCheckInput';
+
+const Checkbox = React.forwardRef((props, ref) => {
+  const { ...elementProps } = props;
+
+  return <FormCheckInput {...elementProps} ref={ref} type="checkbox" />;
+});
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

package/src/components/forms/Feedback.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Text from '../Text';
+import { each, getStyles } from '../../utils';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  type: PropTypes.oneOf(Object.keys(FORM_VALIDATION_STATES)),
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  ...each(FORM_VALIDATION_STATES, (state, data) => ({
+    [`.${state}-feedback`]: css`
+      // display: none;
+      width: 100%;
+      margin-top: $form-feedback-margin-top;
+      font-size: $form-feedback-font-size;
+      font-style: $form-feedback-font-style;
+      color: ${(t) => data(t).color};
+    `,
+  })),
+});
+
+const Feedback = React.forwardRef((props, ref) => {
+  const { children, type, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, [`.${type}-feedback`]);
+
+  return (
+    <Text {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </Text>
+  );
+});
+
+Feedback.displayName = 'Feedback';
+Feedback.propTypes = propTypes;
+
+export default Feedback;