bootstrap-rn 0.3.0 → 0.3.2

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

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

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

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

@@ -0,0 +1,64 @@
+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/PickerWeb.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Picker as BasePicker, StyleSheet as StyleUtils } from 'react-native';
+import PropTypes from 'prop-types';
+import useBackground from '../../../hooks/useBackground';
+import PickerWebContext from './PickerWebContext';
+
+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,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const PLACEHOLDER = '__PLACEHOLDER__';
+
+const getOptionStyle = (style, showPlaceholder) => {
+  if (!showPlaceholder) {
+    return null;
+  }
+
+  const flattenedStyle = StyleUtils.flatten(style);
+
+  return flattenedStyle.color;
+};
+
+const PickerWeb = React.forwardRef((props, ref) => {
+  const {
+    children,
+    selectedValue,
+    onValueChange = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    placeholder,
+    placeholderTextColor,
+    disabled,
+    style,
+    ...elementProps
+  } = props;
+
+  const background = useBackground(style);
+
+  const showPlaceholder = selectedValue === undefined || selectedValue === null;
+
+  return (
+    <BasePicker
+      {...elementProps}
+      ref={ref}
+      selectedValue={showPlaceholder ? PLACEHOLDER : selectedValue}
+      onValueChange={onValueChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      disabled={disabled}
+      style={[
+        background.style,
+        showPlaceholder && { color: placeholderTextColor },
+      ]}
+    >
+      <option value={PLACEHOLDER} disabled hidden>
+        {placeholder}
+      </option>
+      <PickerWebContext.Provider
+        value={{
+          optionColor: getOptionStyle(background.style, showPlaceholder),
+        }}
+      >
+        {children}
+      </PickerWebContext.Provider>
+    </BasePicker>
+  );
+});
+
+PickerWeb.propTypes = propTypes;
+
+export default PickerWeb;

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

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

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

@@ -0,0 +1,37 @@
+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/Col.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { GRID_BREAKPOINTS, GRID_COLUMNS } from '../../theme/proxies';
+import { infix } from '../../theme/breakpoints';
+import { getStyles, each, makeArray, normalize } from '../../utils';
+
+const sizes = makeArray(GRID_COLUMNS).map((v) => v + 1);
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  size: PropTypes.oneOf(['auto', ...sizes]),
+  sizeSm: PropTypes.oneOf(['auto', ...sizes]),
+  sizeMd: PropTypes.oneOf(['auto', ...sizes]),
+  sizeLg: PropTypes.oneOf(['auto', ...sizes]),
+  sizeXl: PropTypes.oneOf(['auto', ...sizes]),
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '*': css`
+    // Add box sizing if only the grid is loaded
+    /* box-sizing: if(
+      variable-exists(include-column-box-sizing) and $include-column-box-sizing,
+      border-box,
+      null
+    ); */
+    // Prevent columns from becoming too narrow when at smaller grid tiers by
+    // always setting "width: 100%;". This works because we set the width
+    // later on to override this initial width.
+    flex-shrink: 0;
+    width: 100%;
+    @include platform(web) {
+      max-width: 100%; // Prevent ".col-auto", ".col" (& responsive variants) from breaking out the grid
+    }
+    padding-right: $grid-gutter-width * 0.5;
+    padding-left: $grid-gutter-width * 0.5;
+    margin-top: 0;
+  `,
+  ...each(GRID_BREAKPOINTS, (breakpoint) => ({
+    [`.col${infix(breakpoint)}`]: css`
+      @include media-breakpoint-up(${breakpoint}) {
+        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      }
+    `,
+    [`.col${infix(breakpoint)}-auto`]: css`
+      @include media-breakpoint-up(${breakpoint}) {
+        flex: 0 0 auto;
+        width: auto;
+      }
+    `,
+    ...normalize(
+      makeArray(GRID_COLUMNS - 1, (i) => ({
+        [`.col${infix(breakpoint)}-${i + 1}`]: css`
+          @include media-breakpoint-up(${breakpoint}) {
+            flex: 0 0 auto;
+            width: ${((i + 1) / GRID_COLUMNS) * 100}%;
+          }
+        `,
+        [`.offset${infix(breakpoint)}-${i}`]: css`
+          @include media-breakpoint-up(${breakpoint}) {
+            margin-left: ${(i / GRID_COLUMNS) * 100}%;
+          }
+        `,
+      })),
+    ),
+  })),
+});
+
+const Col = React.forwardRef((props, ref) => {
+  const {
+    children,
+    size,
+    sizeSm,
+    sizeMd,
+    sizeLg,
+    sizeXl,
+    style,
+    ...elementProps
+  } = props;
+
+  const classes = getStyles(styles, [
+    '*',
+    `.col-${size.toString()}`,
+    sizeSm && `.col-sm-${sizeSm.toString()}`,
+    sizeMd && `.col-md-${sizeMd.toString()}`,
+    sizeLg && `.col-lg-${sizeLg.toString()}`,
+    sizeXl && `.col-xl-${sizeXl.toString()}`,
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+Col.displayName = 'Col';
+Col.propTypes = propTypes;
+
+export default Col;

package/src/components/grid/Row.js

@@ -0,0 +1,41 @@
+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 } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  rows: PropTypes.number,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.row': css`
+    display: flex;
+    flex-direction: row; // added for bootstrap-rn
+    flex-wrap: wrap;
+    margin-top: 0;
+    margin-right: -0.5 * $grid-gutter-width;
+    margin-left: -0.5 * $grid-gutter-width;
+  `,
+});
+
+const Row = React.forwardRef((props, ref) => {
+  const { children, style, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.row']);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      {children}
+    </View>
+  );
+});
+
+Row.displayName = 'Row';
+Row.propTypes = propTypes;
+
+export default Row;

package/src/components/grid/RowContext.js

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

package/src/components/helpers/BackdropHandler.js

@@ -0,0 +1,135 @@
+import React, { useEffect, useMemo } from 'react';
+import { Platform, findNodeHandle } from 'react-native';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Pressable from '../Pressable';
+
+const propTypes = {
+  toggleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  dialogRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  onClose: PropTypes.func,
+  autoClose: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf(['inside', 'outside']),
+  ]),
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
+};
+
+const styles = StyleSheet.create({
+  handler: css`
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    flex-grow: 1;
+  `,
+});
+
+const initialState = {
+  waitingForMouseUp: false,
+  ignoreBackdropClick: false,
+};
+
+const BackdropHandler = (props) => {
+  const {
+    toggleRef,
+    dialogRef,
+    onClose: handleClose,
+    backdrop = true,
+    autoClose = 'outside',
+  } = props;
+
+  if (Platform.OS === 'web') {
+    const state = useMemo(() => initialState, []);
+
+    useEffect(() => {
+      const toggle = toggleRef ? findNodeHandle(toggleRef.current) : undefined;
+      const dialog = findNodeHandle(dialogRef.current);
+
+      const handleDialogMouseDown = () => {
+        state.waitingForMouseUp = true;
+      };
+
+      // Workaround for chrome, because chrome does not fire onMouseDown event
+      // for dialog when clicking on the <select> menu.
+      const handleDialogMouseUp = () => {
+        state.ignoreBackdropClick = true;
+      };
+
+      const handleDocumentClick = ({ target }) => {
+        const isDialogClick =
+          state.ignoreBackdropClick || dialog.contains(target);
+
+        if (backdrop === 'static' || autoClose === false) {
+          return;
+        }
+
+        // Click outside -> return if autoClose is inside.
+        if (!isDialogClick && autoClose === 'inside') {
+          return;
+        }
+
+        // Click inside / on dialog -> return if autoClose is outside.
+        if (isDialogClick) {
+          state.ignoreBackdropClick = false;
+
+          if (autoClose === 'outside') {
+            return;
+          }
+        }
+
+        // Click on toggle -> return always.
+        if (toggle && (target === toggle || toggle.contains(target))) {
+          return;
+        }
+
+        handleClose();
+      };
+
+      const handleDocumentMouseUp = () => {
+        if (state.waitingForMouseUp) {
+          state.ignoreBackdropClick = true;
+        }
+
+        state.waitingForMouseUp = false;
+      };
+
+      dialog.addEventListener('mousedown', handleDialogMouseDown);
+      dialog.addEventListener('mouseup', handleDialogMouseUp);
+      // See https://github.com/necolas/react-native-web/issues/2115
+      document.addEventListener('click', handleDocumentClick, true);
+      document.addEventListener('mouseup', handleDocumentMouseUp, true);
+
+      return () => {
+        dialog.addEventListener('mousedown', handleDialogMouseDown);
+        dialog.addEventListener('mouseup', handleDialogMouseUp);
+        document.removeEventListener('click', handleDocumentClick, true);
+        document.removeEventListener('mouseup', handleDocumentMouseUp, true);
+      };
+    }, [backdrop, autoClose]);
+
+    return null;
+  }
+
+  if (backdrop !== true) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      style={styles.handler}
+      onPress={() => {
+        handleClose();
+      }}
+      accessible={false}
+      importantForAccessibility="no"
+    />
+  );
+};
+
+BackdropHandler.displayName = 'BackdropHandler';
+BackdropHandler.propTypes = propTypes;
+
+export default BackdropHandler;

package/src/components/helpers/ListContext.js

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