bootstrap-rn 0.3.0 → 0.3.1

package/src/components/list-group/ListGroupItem.js

@@ -0,0 +1,152 @@
+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 View from '../View';
+import { getStyles, each } from '../../utils';
+import { THEME_COLORS } from '../../theme/proxies';
+import { shiftColor } from '../../theme/functions';
+import useForcedContext from '../../hooks/useForcedContext';
+import ListContext from '../helpers/ListContext';
+import ListGroupContext from './ListGroupContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
+  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,
+};
+
+export const styles = StyleSheet.create({
+  '.list-group-item': css`
+    position: relative;
+    // display: block;
+    padding: $list-group-item-padding-y $list-group-item-padding-x;
+    background-color: $list-group-bg;
+    border: $list-group-border-width solid $list-group-border-color;
+  `,
+  '.list-group-item --text': css`
+    color: $list-group-color;
+    text-decoration: none; // if($link-decoration == none, null, none);
+  `,
+  '.list-group-item:first-child': css`
+    border-top-left-radius: $list-group-border-radius;
+    border-top-right-radius: $list-group-border-radius;
+  `,
+  '.list-group-item:last-child': css`
+    border-bottom-left-radius: $list-group-border-radius;
+    border-bottom-right-radius: $list-group-border-radius;
+  `,
+  '.list-group-item.disabled': css`
+    // pointer-events: none;
+    background-color: $list-group-disabled-bg;
+  `,
+  '.list-group-item.disabled --text': css`
+    color: $list-group-disabled-color;
+  `,
+  '.list-group-item.active': css`
+    z-index: 2; // Place active items above their siblings for proper border styling
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border-color;
+  `,
+  '.list-group-item.active --text': css`
+    color: $list-group-active-color;
+  `,
+  '.list-group-item + .list-group-item': css`
+    border-top-width: 0;
+  `,
+  '.list-group-item + .list-group-item.active': css`
+    margin-top: -$list-group-border-width;
+    border-top-width: $list-group-border-width;
+  `,
+  '.list-group-item-flush': css`
+    border-top-left-radius: 0; // added for bootstrap-rn
+    border-top-right-radius: 0; // added for bootstrap-rn
+    border-bottom-left-radius: 0; // added for bootstrap-rn
+    border-bottom-right-radius: 0; // added for bootstrap-rn
+    border-top-width: 0;
+    border-right-width: 0;
+    border-bottom-width: $list-group-border-width;
+    border-left-width: 0;
+  `,
+  '.list-group-item-flush:last-child': css`
+    border-bottom-width: 0;
+  `,
+  '.list-group-item-flush + .list-group-item-flush.active': css`
+    border-top-width: $list-group-border-width; // added for bootstrap-rn
+  `,
+  ...each(THEME_COLORS, (state, value) => ({
+    [`.list-group-item-${state}`]: css`
+      background-color: ${shiftColor(
+        value,
+        (t) => t['list-group-item-bg-scale'],
+      )};
+    `,
+    [`.list-group-item-${state} --text`]: css`
+      color: ${shiftColor(value, (t) => t['list-group-item-color-scale'])};
+    `,
+  })),
+});
+
+const ListGroupItem = React.forwardRef((props, ref) => {
+  const {
+    children,
+    color,
+    active = false,
+    disabled = false,
+    style,
+    textStyle,
+    ...elementProps
+  } = props;
+
+  const { first, last } = useForcedContext(ListContext);
+  const { flush } = useForcedContext(ListGroupContext);
+
+  const classes = getStyles(styles, [
+    '.list-group-item',
+    first && '.list-group-item:first-child',
+    last && '.list-group-item:last-child',
+    active && '.list-group-item.active',
+    disabled && '.list-group-item.disabled',
+    !first && '.list-group-item + .list-group-item',
+    !first && active && '.list-group-item + .list-group-item.active',
+    flush && '.list-group-item-flush',
+    flush && last && '.list-group-item-flush:last-child',
+    !first &&
+      flush &&
+      active &&
+      '.list-group-item-flush + .list-group-item-flush.active',
+    color && `.list-group-item-${color}`,
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.list-group-item --text',
+    active && '.list-group-item.active --text',
+    disabled && '.list-group-item.disabled --text',
+    color && `.list-group-item-${color} --text`,
+  ]);
+
+  const role = Platform.OS === 'web' ? 'listitem' : null;
+
+  return (
+    <View
+      {...elementProps}
+      ref={ref}
+      role={role}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </View>
+  );
+});
+
+ListGroupItem.displayName = 'ListGroupItem';
+ListGroupItem.propTypes = propTypes;
+
+export default ListGroupItem;

package/src/components/list-group/ListGroupItemAction.js

@@ -0,0 +1,188 @@
+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 Pressable from '../Pressable';
+import { getStyles, each } from '../../utils';
+import { THEME_COLORS } from '../../theme/proxies';
+import { shiftColor, shadeColor } from '../../theme/functions';
+import useModifier from '../../hooks/useModifier';
+import useForcedContext from '../../hooks/useForcedContext';
+import { styles as baseStyles } from './ListGroupItem';
+import ListContext from '../helpers/ListContext';
+import ListGroupContext from './ListGroupContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
+  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
+  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,
+};
+
+const actionStyles = StyleSheet.create({
+  '.list-group-item-action': css`
+    width: 100%; // For "<button>"s (anchors become 100% by default though)
+
+    // Hover state
+    &:hover {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      background-color: $list-group-hover-bg;
+    }
+
+    &:focus {
+      z-index: 1; // Place hover/focus items above their siblings for proper border styling
+      background-color: $list-group-hover-bg;
+    }
+
+    &:active {
+      background-color: $list-group-action-active-bg;
+    }
+  `,
+  '.list-group-item-action --text': css`
+    color: $list-group-action-color;
+    // text-align: inherit; // For "<button>"s (anchors inherit)
+
+    // Hover state
+    &:hover {
+      color: $list-group-action-hover-color;
+      text-decoration: none;
+    }
+
+    &:focus {
+      color: $list-group-action-hover-color;
+      text-decoration: none;
+    }
+
+    &:active {
+      color: $list-group-action-active-color;
+    }
+  `,
+  ...each(THEME_COLORS, (state, value) => ({
+    [`.list-group-item-${state}-action`]: css`
+      &:hover {
+        background-color: ${shadeColor(
+          shiftColor(value, (t) => t['list-group-item-bg-scale']),
+          0.1,
+        )};
+      }
+
+      &:focus {
+        background-color: ${shadeColor(
+          shiftColor(value, (t) => t['list-group-item-bg-scale']),
+          0.1,
+        )};
+      }
+    `,
+    [`.list-group-item-${state}-action --text`]: css`
+      &:hover {
+        color: ${shiftColor(value, (t) => t['list-group-item-color-scale'])};
+      }
+
+      &:focus {
+        color: ${shiftColor(value, (t) => t['list-group-item-color-scale'])};
+      }
+    `,
+    [`.list-group-item-${state}-action.active`]: css`
+      background-color: ${shiftColor(
+        value,
+        (t) => t['list-group-item-color-scale'],
+      )};
+      border-color: ${shiftColor(
+        value,
+        (t) => t['list-group-item-color-scale'],
+      )};
+    `,
+    [`.list-group-item-${state}-action.active --text`]: css`
+      color: $white;
+    `,
+  })),
+});
+
+const ListGroupItemAction = React.forwardRef((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useTabbable', props, ref);
+
+  const {
+    children,
+    color,
+    active = false,
+    disabled = false,
+    style,
+    activeStyle,
+    textStyle,
+    activeTextStyle,
+    ...elementProps
+  } = modifierProps;
+
+  const { first, last } = useForcedContext(ListContext);
+  const { flush } = useForcedContext(ListGroupContext);
+
+  const styles = { ...baseStyles, ...actionStyles };
+
+  const classes = getStyles(styles, [
+    '.list-group-item',
+    '.list-group-item-action',
+    first && '.list-group-item:first-child',
+    last && '.list-group-item:last-child',
+    disabled && '.list-group-item.disabled',
+    !first && '.list-group-item + .list-group-item',
+    !first && active && '.list-group-item + .list-group-item.active',
+    flush && '.list-group-item-flush',
+    flush && last && '.list-group-item-flush:last-child',
+    !first &&
+      flush &&
+      active &&
+      '.list-group-item-flush + .list-group-item-flush.active',
+    color && `.list-group-item-${color}`,
+    color && `.list-group-item-${color}-action`,
+  ]);
+
+  const activeClasses = getStyles(styles, [
+    '.list-group-item.active',
+    color && `.list-group-item-${color}-action.active`,
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.list-group-item --text',
+    '.list-group-item-action --text',
+    disabled && '.list-group-item.disabled --text',
+    color && `.list-group-item-${color} --text`,
+    color && `.list-group-item-${color}-action --text`,
+  ]);
+
+  const activeTextClasses = getStyles(styles, [
+    '.list-group-item.active --text',
+    color && `.list-group-item-${color}-action.active --text`,
+  ]);
+
+  const role = Platform.OS === 'web' ? 'listitem' : null;
+
+  return (
+    <Pressable
+      {...elementProps}
+      ref={modifierRef}
+      role={role}
+      active={active}
+      disabled={disabled}
+      style={[...classes, style]}
+      activeStyle={[...activeClasses, activeStyle]}
+      textStyle={[...textClasses, textStyle]}
+      activeTextStyle={[...activeTextClasses, activeTextStyle]}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+ListGroupItemAction.displayName = 'ListGroupItemAction';
+ListGroupItemAction.propTypes = propTypes;
+
+export default ListGroupItemAction;

package/src/components/modal/Modal.js

@@ -0,0 +1,241 @@
+import React, { useRef } from 'react';
+import { Modal as BaseModal, SafeAreaView } from 'react-native';
+import PropTypes from 'prop-types';
+import { OverlayProvider } from '@react-native-aria/overlays';
+import StyleSheet from '../../style/StyleSheet';
+import { getStyles } from '../../utils';
+import css from '../../style/css';
+import ScrollView from '../ScrollView';
+import View from '../View';
+import BackdropHandler from '../helpers/BackdropHandler';
+import useScrollbarEffects from '../../hooks/useScrollbarEffects';
+import useModal from './useModal';
+import ModalContext from './ModalContext';
+import ModalHeader from './ModalHeader';
+import ModalTitle from './ModalTitle';
+import ModalBody from './ModalBody';
+import ModalFooter from './ModalFooter';
+
+const MODAL_SIZES = ['sm', 'lg', 'xl'];
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  visible: PropTypes.bool.isRequired,
+  size: PropTypes.oneOf(MODAL_SIZES),
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
+  scrollable: PropTypes.bool,
+  centered: PropTypes.bool,
+  onToggle: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentContainerStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dialogStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  dialogTextStyle: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  contentTextStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.modal': css`
+    position: absolute; // fixed;
+    top: 0;
+    left: 0;
+    z-index: $zindex-modal;
+    // display: none;
+    width: 100%;
+    height: 100%;
+    // overflow-x: hidden;
+    // overflow-y: auto;
+    // Prevent Chrome on Windows from adding a focus outline. For details, see
+    // https://github.com/twbs/bootstrap/pull/10951.
+    @include platform(web) {
+      outline-width: 0; // outline: 0;
+    }
+    // We deliberately don't use "-webkit-overflow-scrolling: touch;" due to a
+    // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
+    // See also https://github.com/twbs/bootstrap/issues/17695
+  `,
+  '.modal-dialog': css`
+    position: relative;
+    width: auto;
+    margin: $modal-dialog-margin;
+    // allow clicks to pass through for custom click handling to close modal
+    // pointer-events: none;
+
+    @include media-breakpoint-up(sm) {
+      width: 100%; // added for bootstrap-rn
+      max-width: $modal-md;
+      margin: $modal-dialog-margin-y-sm-up auto;
+    }
+  `,
+  '.modal-dialog-scrollable': css`
+    flex-shrink: 1; // added for bootstrap-rn
+    // height: calc(100% - var(--#{$prefix}modal-margin) * 2);
+  `,
+  '.modal-dialog-scrollable .modal-content': css`
+    max-height: 100%;
+    overflow: hidden;
+  `,
+  '.modal-dialog-centered': css`
+    display: flex;
+    // align-items: center;
+    // min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
+  `,
+  '.modal-content': css`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%; // Ensure ".modal-content" extends the full width of the parent ".modal-dialog"
+    // counteract the pointer-events: none; in the .modal-dialog
+    // pointer-events: auto;
+    background-color: $modal-content-bg;
+    // background-clip: padding-box;
+    border: $modal-content-border-width solid $modal-content-border-color;
+    border-radius: $modal-content-border-radius;
+    // @include box-shadow($modal-content-box-shadow-xs);
+    // Remove focus outline from opened modal
+    // outline: 0;
+
+    @include media-breakpoint-up(sm) {
+      // @include box-shadow($modal-content-box-shadow-sm-up);
+    }
+  `,
+  '.modal-content --text': css`
+    color: $modal-content-color;
+  `,
+  '.modal-backdrop': css`
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: $zindex-modal-backdrop;
+    width: 100%;
+    height: 100%;
+    background-color: $modal-backdrop-bg;
+    opacity: $modal-backdrop-opacity;
+  `,
+  '.modal-sm': css`
+    @include media-breakpoint-up(sm) {
+      max-width: $modal-sm;
+    }
+  `,
+  '.modal-lg': css`
+    @include media-breakpoint-up(lg) {
+      max-width: $modal-lg;
+    }
+  `,
+  '.modal-xl': css`
+    @include media-breakpoint-up(lg) {
+      max-width: $modal-lg;
+    }
+    @include media-breakpoint-up(xl) {
+      max-width: $modal-xl;
+    }
+  `,
+});
+
+const Modal = React.forwardRef((props, ref) => {
+  const {
+    children,
+    visible,
+    size,
+    backdrop = true,
+    scrollable = false,
+    centered = false,
+    onToggle: handleToggle,
+    style,
+    contentContainerStyle,
+    dialogStyle,
+    contentStyle,
+    textStyle,
+    dialogTextStyle,
+    contentTextStyle,
+    ...elementProps
+  } = props;
+
+  const dialogRef = useRef();
+
+  const modal = useModal(scrollable);
+
+  useScrollbarEffects({
+    keepBodyScroll: false,
+    visible,
+  });
+
+  const backdropClasses = getStyles(styles, ['.modal-backdrop']);
+  const classes = getStyles(styles, ['.modal']);
+  const dialogClasses = getStyles(styles, [
+    '.modal-dialog',
+    size === 'sm' && '.modal-sm',
+    size === 'lg' && '.modal-lg',
+    size === 'xl' && '.modal-xl',
+    scrollable && '.modal-dialog-scrollable',
+    centered && '.modal-dialog-centered',
+  ]);
+  const contentClasses = getStyles(styles, [
+    '.modal-content',
+    scrollable && '.modal-dialog-scrollable .modal-content',
+  ]);
+  const contentTextClasses = getStyles(styles, ['.modal-content --text']);
+
+  // If scrollable we use a ScrollView in ModalBody, so we can use a View here.
+  const FlexView = scrollable ? View : ScrollView;
+
+  const centeredStyle = centered && { justifyContent: 'center' };
+
+  return (
+    <BaseModal transparent visible={visible} onRequestClose={handleToggle}>
+      {backdrop && <View style={backdropClasses} />}
+      <FlexView
+        {...elementProps}
+        ref={ref}
+        style={[classes, scrollable && centeredStyle, style]}
+        textStyle={textStyle}
+        contentContainerStyle={
+          scrollable
+            ? undefined
+            : [{ flexGrow: 1 }, centeredStyle, contentContainerStyle]
+        }
+      >
+        <BackdropHandler
+          dialogRef={dialogRef}
+          onClose={handleToggle}
+          backdrop={backdrop}
+        />
+        <SafeAreaView style={{ flexShrink: 1 }}>
+          <View
+            ref={dialogRef}
+            style={[dialogClasses, dialogStyle]}
+            textStyle={dialogTextStyle}
+          >
+            <View
+              style={[contentClasses, contentStyle]}
+              textStyle={[contentTextClasses, contentTextStyle]}
+            >
+              <ModalContext.Provider value={modal}>
+                <OverlayProvider>{children}</OverlayProvider>
+              </ModalContext.Provider>
+            </View>
+          </View>
+        </SafeAreaView>
+      </FlexView>
+    </BaseModal>
+  );
+});
+
+Modal.displayName = 'Modal';
+Modal.propTypes = propTypes;
+
+Modal.Context = ModalContext;
+Modal.Header = ModalHeader;
+Modal.Title = ModalTitle;
+Modal.Body = ModalBody;
+Modal.Footer = ModalFooter;
+
+export default Modal;

package/src/components/modal/ModalBody.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+import useForcedContext from '../../hooks/useForcedContext';
+import StyleSheet from '../../style/StyleSheet';
+import View from '../View';
+import ScrollView from '../ScrollView';
+import ModalContext from './ModalContext';
+
+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
+  contentContainerStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.modal-body': css`
+    position: relative;
+    // Enable "flex-grow: 1" so that the body take up as much space as possible
+    // when there should be a fixed height on ".modal-dialog".
+    // Note from bootstrap-rn: Centered modals do not work with this style, but
+    // everything just works fine without this style.
+    // flex: 1 1 auto;
+    padding: $modal-inner-padding;
+  `,
+});
+
+const ModalBody = React.forwardRef((props, ref) => {
+  const { children, style, contentContainerStyle, ...elementProps } = props;
+
+  const { scrollable } = useForcedContext(ModalContext);
+
+  const classes = getStyles(styles, ['.modal-body']);
+
+  const FlexView = scrollable ? ScrollView : View;
+
+  return (
+    <FlexView
+      {...elementProps}
+      ref={ref}
+      style={scrollable ? style : [classes, style]}
+      contentContainerStyle={
+        scrollable ? [classes, contentContainerStyle] : undefined
+      }
+    >
+      {children}
+    </FlexView>
+  );
+});
+
+ModalBody.displayName = 'ModalBody';
+ModalBody.propTypes = propTypes;
+
+export default ModalBody;

package/src/components/modal/ModalContext.js

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

package/src/components/modal/ModalFooter.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import View from '../View';
+import css from '../../style/css';
+import { getStyles } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.modal-footer': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center; // vertically center
+    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+    padding: $modal-inner-padding;
+    border-top-width: $modal-footer-border-width;
+    border-style: solid;
+    border-color: $modal-footer-border-color;
+    border-bottom-start-radius: $modal-content-inner-border-radius;
+    border-bottom-end-radius: $modal-content-inner-border-radius;
+  `,
+});
+
+const ModalFooter = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.modal-footer']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+ModalFooter.displayName = 'ModalFooter';
+ModalFooter.propTypes = propTypes;
+
+export default ModalFooter;