bootstrap-rn 0.3.3 → 0.3.4

package/src/components/forms/internals/FormCheckInputNative.js

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from '../../Pressable';
-import useBackground from '../../../hooks/useBackground';
-
-const propTypes = {
-  type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
-  value: PropTypes.bool.isRequired,
-  onValueChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  hitSlop: PropTypes.number,
-  disabled: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  id: PropTypes.any,
-};
-
-const FormCheckInputNative = React.forwardRef((props, ref) => {
-  const {
-    type,
-    value,
-    onValueChange: handleValueChange,
-    onFocus = () => {},
-    onBlur = () => {},
-    hitSlop = 8,
-    disabled = false,
-    style,
-    id,
-  } = props;
-
-  const inputBackground = useBackground(style);
-
-  return (
-    <Pressable
-      ref={ref}
-      role={type}
-      aria-checked={value}
-      onPress={() => {
-        handleValueChange(!value);
-      }}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      hitSlop={hitSlop}
-      disabled={disabled}
-      style={inputBackground.style}
-      id={id}
-    >
-      {inputBackground.element}
-    </Pressable>
-  );
-});
-
-FormCheckInputNative.displayName = 'FormCheckInputNative';
-FormCheckInputNative.propTypes = propTypes;
-
-export default FormCheckInputNative;

package/src/components/forms/internals/FormCheckInputWeb.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import {
-  unstable_createElement as createElement,
-  StyleSheet,
-} from 'react-native';
-import PropTypes from 'prop-types';
-import useBackground from '../../../hooks/useBackground';
-
-const propTypes = {
-  type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
-  value: PropTypes.bool.isRequired,
-  onValueChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  disabled: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-  // eslint-disable-next-line react/forbid-prop-types
-  id: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  reboot: {
-    flexShrink: 0,
-    margin: 0,
-  },
-});
-
-// eslint-disable-next-line react/prop-types
-const Input = React.forwardRef(({ style, ...props }, ref) =>
-  createElement('input', { ...props, ref, style: [styles.reboot, style] }),
-);
-
-const FormCheckInputWeb = React.forwardRef((props, ref) => {
-  const {
-    type,
-    value,
-    onValueChange: handleValueChange,
-    onFocus = () => {},
-    onBlur = () => {},
-    disabled = false,
-    style,
-    id,
-  } = props;
-
-  const inputBackground = useBackground(style);
-
-  return (
-    <Input
-      ref={ref}
-      type={type === 'switch' ? 'checkbox' : type}
-      checked={value}
-      onChange={() => {
-        handleValueChange(!value);
-      }}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      disabled={disabled}
-      style={inputBackground.style}
-      id={id}
-    />
-  );
-});
-
-FormCheckInputWeb.displayName = 'FormCheckInputWeb';
-FormCheckInputWeb.propTypes = propTypes;
-
-export default FormCheckInputWeb;

package/src/components/forms/internals/PickerNative.js

@@ -1,177 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../../style/StyleSheet';
-import css from '../../../style/css';
-import Pressable from '../../Pressable';
-import Text from '../../Text';
-import Offcanvas from '../../offcanvas/Offcanvas';
-import useBackground from '../../../hooks/useBackground';
-import PickerNativeContext from './PickerNativeContext';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  selectedValue: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.object,
-  ]),
-  onValueChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  placeholder: PropTypes.string,
-  placeholderTextColor: PropTypes.string,
-  disabled: PropTypes.bool,
-  MenuComponent: PropTypes.elementType,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
-
-const styles = StyleSheet.create({
-  menu: css`
-    align-items: center;
-  `,
-});
-
-// Ref: https://reactnative.dev/docs/text-style-props
-const textStyleKeys = [
-  'color',
-  'fontFamily',
-  'fontSize',
-  'fontStyle',
-  'fontWeight',
-  'includeFontPaddingAndroid',
-  'fontVariant',
-  'letterSpacing',
-  'lineHeight',
-  'textAlign',
-  'textAlignVerticalAndroid',
-  'textDecorationColoriOS',
-  'textDecorationLine',
-  'textDecorationStyleiOS',
-  'textShadowColor',
-  'textShadowOffset',
-  'textShadowRadius',
-  'textTransform',
-  'writingDirection',
-];
-
-const extractTextStyles = (style) => {
-  const textStyles = {};
-
-  Object.entries(style).forEach(([key, value]) => {
-    if (textStyleKeys.includes(key)) {
-      textStyles[key] = value;
-    }
-  });
-
-  return textStyles;
-};
-
-const getText = ({ children, selectedValue }) => {
-  const items = React.Children.map(children, (child) => ({
-    label: child.props.label,
-    value: child.props.value,
-  }));
-
-  const selectedItem = items.find((item) => item.value === selectedValue);
-
-  return selectedItem?.label;
-};
-
-/* eslint-disable react/prop-types */
-const DefaultMenuComponent = ({
-  children,
-  selectedValue,
-  onValueChange: handleValueChange,
-  onClose: handleClose,
-}) => (
-  <Offcanvas placement="bottom" visible onToggle={handleClose}>
-    <Offcanvas.Body contentContainerStyle={styles.menu}>
-      <PickerNativeContext.Provider
-        value={{
-          selectedValue,
-          handleValueChange,
-        }}
-      >
-        {children}
-      </PickerNativeContext.Provider>
-    </Offcanvas.Body>
-  </Offcanvas>
-);
-/* eslint-enable */
-
-const PickerNative = React.forwardRef((props, ref) => {
-  const {
-    children,
-    selectedValue,
-    onValueChange = () => {},
-    onFocus = () => {},
-    onBlur = () => {},
-    placeholder,
-    placeholderTextColor,
-    disabled = false,
-    MenuComponent = DefaultMenuComponent,
-    style,
-    ...elementProps
-  } = props;
-
-  const background = useBackground(style);
-
-  const [visible, setVisible] = useState(false);
-
-  const textStyle = extractTextStyles(background.style);
-
-  const showPlaceholder = selectedValue === undefined || selectedValue === null;
-
-  const handleValueChange = (nextValue) => {
-    onValueChange(nextValue);
-    setVisible(false);
-  };
-  const handleClose = () => {
-    setVisible(false);
-  };
-
-  return (
-    <>
-      <Pressable
-        {...elementProps}
-        ref={ref}
-        role="combobox"
-        onPress={() => {
-          setVisible(true);
-        }}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        disabled={disabled}
-        style={background.style}
-      >
-        {background.element}
-        <Text
-          numberOfLines={1}
-          style={[
-            textStyle,
-            showPlaceholder && { color: placeholderTextColor },
-          ]}
-        >
-          {showPlaceholder
-            ? placeholder || <Text>&nbsp;</Text>
-            : getText({ children, selectedValue })}
-        </Text>
-      </Pressable>
-      {visible && (
-        <MenuComponent
-          selectedValue={selectedValue}
-          onValueChange={handleValueChange}
-          onClose={handleClose}
-        >
-          {children}
-        </MenuComponent>
-      )}
-    </>
-  );
-});
-
-PickerNative.propTypes = propTypes;
-
-export default PickerNative;

package/src/components/forms/internals/PickerNativeContext.js

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

package/src/components/forms/internals/PickerNativeItem.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../../style/StyleSheet';
-import css from '../../../style/css';
-import Pressable from '../../Pressable';
-import Text from '../../Text';
-import useMedia from '../../../hooks/useMedia';
-import { getStyles } from '../../../utils';
-import useStyle from '../../../hooks/useStyle';
-import useForcedContext from '../../../hooks/useForcedContext';
-import PickerNativeContext from './PickerNativeContext';
-
-const propTypes = {
-  label: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.object,
-  ]),
-  disabled: PropTypes.bool,
-};
-
-const styles = StyleSheet.create({
-  item: css`
-    margin: 0.25rem 1rem;
-    padding: 0.25rem;
-  `,
-  itemDisabled: css``,
-});
-
-const PickerNativeItem = React.forwardRef((props, ref) => {
-  const { label, value, disabled = false } = props;
-
-  const { selectedValue, handleValueChange } = useForcedContext(
-    PickerNativeContext,
-  );
-  const media = useMedia();
-
-  const classes = getStyles(styles, ['item', disabled && 'itemDisabled']);
-
-  const resolveStyle = useStyle(classes);
-
-  const selected = value === selectedValue;
-
-  return (
-    <Pressable
-      ref={ref}
-      onPress={() => {
-        handleValueChange(value);
-      }}
-      aria-selected={selected}
-      disabled={disabled}
-      style={resolveStyle({ media })}
-    >
-      <Text styleName={selected && 'text-primary'}>{label}</Text>
-    </Pressable>
-  );
-});
-
-PickerNativeItem.displayName = 'PickerNativeItem';
-PickerNativeItem.propTypes = propTypes;
-
-export default PickerNativeItem;

package/src/components/forms/internals/PickerWebContext.js

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

package/src/components/forms/internals/PickerWebItem.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Picker as WebPicker } from 'react-native';
-import PropTypes from 'prop-types';
-import useForcedContext from '../../../hooks/useForcedContext';
-import PickerWebContext from './PickerWebContext';
-
-const propTypes = {
-  label: PropTypes.string.isRequired,
-  value: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.number,
-    PropTypes.string,
-    PropTypes.object,
-  ]),
-  disabled: PropTypes.bool,
-};
-
-const PickerWebItem = React.forwardRef((props, ref) => {
-  const { label, value, disabled = false } = props;
-
-  const { optionColor } = useForcedContext(PickerWebContext);
-
-  return (
-    <WebPicker.Item
-      ref={ref}
-      label={label}
-      value={value}
-      disabled={disabled}
-      color={optionColor}
-    />
-  );
-});
-
-PickerWebItem.displayName = 'PickerWebItem';
-PickerWebItem.propTypes = propTypes;
-
-export default PickerWebItem;

package/src/components/grid/RowContext.js

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

package/src/components/helpers/ListContext.js

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

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

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

package/src/components/modal/ModalBody.js

@@ -1,57 +0,0 @@
-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

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

package/src/components/nav/NavContext.js

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

package/src/components/nav/TabContent.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from '../View';
-
-const propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-const TabContent = React.forwardRef((props, ref) => {
-  const { ...elementProps } = props;
-
-  return <View {...elementProps} ref={ref} />;
-});
-
-TabContent.displayName = 'TabContent';
-TabContent.propTypes = propTypes;
-
-export default TabContent;

package/src/components/nav/TabContext.js

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

package/src/components/navbar/NavbarContext.js

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

package/src/components/offcanvas/OffcanvasBody.js

@@ -1,67 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import css from '../../style/css';
-import StyleSheet from '../../style/StyleSheet';
-import ScrollView from '../ScrollView';
-import { GRID_BREAKPOINTS } from '../../theme/proxies';
-import { infix, next } from '../../theme/breakpoints';
-import { getStyles, each } from '../../utils';
-import NavbarContext from '../navbar/NavbarContext';
-
-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({
-  '.offcanvas-body': css`
-    // flex-grow: 1;
-    padding: $offcanvas-padding-y $offcanvas-padding-x;
-    // overflow-y: auto;
-  `,
-  // Navbar styles
-  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
-    [`.navbar-expand${infix(next(breakpoint))} .offcanvas-body`]: css`
-      @include media-breakpoint-up(${next(breakpoint)}) {
-        display: flex;
-        flex-grow: 0;
-        padding: 0;
-        // overflow-y: visible;
-      }
-    `,
-  })),
-});
-
-const OffcanvasBody = React.forwardRef((props, ref) => {
-  const { children, style, contentContainerStyle, ...elementProps } = props;
-
-  const navbar = useContext(NavbarContext);
-
-  const contentContainerClasses = getStyles(styles, [
-    '.offcanvas-body',
-    navbar &&
-      navbar.expand &&
-      `.navbar-expand${
-        navbar.expand === true ? '' : `-${navbar.expand}`
-      } .offcanvas-body`,
-  ]);
-
-  return (
-    <ScrollView
-      {...elementProps}
-      ref={ref}
-      style={style}
-      contentContainerStyle={[contentContainerClasses, contentContainerStyle]}
-    >
-      {children}
-    </ScrollView>
-  );
-});
-
-OffcanvasBody.displayName = 'OffcanvasBody';
-OffcanvasBody.propTypes = propTypes;
-
-export default OffcanvasBody;

package/src/components/offcanvas/OffcanvasContext.js

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

package/src/components/offcanvas/OffcanvasTitle.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Heading from '../Heading';
-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({
-  '.offcanvas-title': css`
-    margin-bottom: 0;
-    line-height: $font-size-base * $offcanvas-title-line-height;
-  `,
-});
-
-const OffcanvasTitle = React.forwardRef((props, ref) => {
-  const { children, style, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.offcanvas-title']);
-
-  return (
-    <Heading size={5} {...elementProps} ref={ref} style={[classes, style]}>
-      {children}
-    </Heading>
-  );
-});
-
-OffcanvasTitle.displayName = 'OffcanvasTitle';
-OffcanvasTitle.propTypes = propTypes;
-
-export default OffcanvasTitle;

package/src/components/offcanvas/useOffcanvas.js

@@ -1,20 +0,0 @@
-import { useContext, useEffect, useMemo } from 'react';
-import Context from '../../Context';
-
-export default function useOffcanvas(visible, scroll) {
-  const context = useContext(Context);
-
-  useEffect(() => {
-    if (!visible || scroll) {
-      return undefined;
-    }
-
-    context.scrollbars.hide();
-
-    return () => {
-      context.scrollbars.show();
-    };
-  }, [visible, scroll]);
-
-  return useMemo(() => ({}), []);
-}