bootstrap-rn 0.3.0 → 0.3.1

package/src/components/forms/Picker.js

@@ -0,0 +1,186 @@
+import React, { useState } from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import useMedia from '../../hooks/useMedia';
+import { getStyles, each } from '../../utils';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+import { escapeSvg } from '../../theme/functions';
+import useStyle from '../../hooks/useStyle';
+import useModifier from '../../hooks/useModifier';
+import PickerWeb from './internals/PickerWeb';
+import PickerNative from './internals/PickerNative';
+import PickerItem from './PickerItem';
+import PickerContext from './PickerContext';
+
+/* eslint-disable react/no-unused-prop-types */
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  placeholderTextColor: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  disabled: PropTypes.bool,
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool,
+  useNativeComponent: PropTypes.bool,
+  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,
+};
+/* eslint-enable */
+
+const styles = StyleSheet.create({
+  select: css`
+    opacity: 1;
+  `,
+  '.form-select': css`
+    // display: block;
+    width: 100%;
+    padding: $form-select-padding-y $form-select-indicator-padding
+      $form-select-padding-y $form-select-padding-x;
+    /* @include platform(web) {
+      // See https://github.com/twbs/bootstrap/issues/32636
+      -moz-padding-start: subtract($form-select-padding-x, 3px);
+    } */
+    font-family: $form-select-font-family;
+    font-size: $form-select-font-size;
+    font-weight: $form-select-font-weight;
+    line-height: $form-select-font-size * $form-select-line-height;
+    color: $form-select-color;
+    background-color: $form-select-bg;
+    background-image: ${(t) => escapeSvg(t['form-select-indicator'])};
+    background-repeat: no-repeat;
+    background-position: $form-select-bg-position;
+    background-size: $form-select-bg-size;
+    border: $form-select-border-width solid $form-select-border-color;
+    border-radius: $form-select-border-radius;
+    // @include box-shadow($form-select-box-shadow);
+    // @include transition($form-select-transition);
+    @include platform(web) {
+      appearance: none;
+    }
+
+    &:focus {
+      border-color: $form-select-focus-border-color;
+      @include platform(web) {
+        outline-width: 0; // outline: 0;
+        // @if $enable-shadows {
+        //   @include box-shadow(
+        //     $form-select-box-shadow,
+        //     $form-select-focus-box-shadow
+        //   );
+        // } @else {
+        //   // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $form-select-focus-box-shadow;
+        // }
+      }
+    }
+  `,
+  '.form-select.disabled': css`
+    color: $form-select-disabled-color;
+    background-color: $form-select-disabled-bg;
+    border-color: $form-select-disabled-border-color;
+  `,
+  '.form-select-sm': css`
+    padding-top: $form-select-padding-y-sm;
+    padding-bottom: $form-select-padding-y-sm;
+    padding-left: $form-select-padding-x-sm;
+    font-size: $form-select-font-size-sm;
+    border-radius: $form-select-border-radius-sm;
+  `,
+  '.form-select-lg': css`
+    padding-top: $form-select-padding-y-lg;
+    padding-bottom: $form-select-padding-y-lg;
+    padding-left: $form-select-padding-x-lg;
+    font-size: $form-select-font-size-lg;
+    border-radius: $form-select-border-radius-lg;
+  `,
+  ...each(FORM_VALIDATION_STATES, (state, data) => ({
+    [`.form-select:${state}`]: css`
+      border-color: ${(t) => data(t).color};
+
+      &:focus {
+        border-color: ${(t) => data(t).color};
+        @include platform(web) {
+          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width
+            rgba(${(t) => data(t).color}, $input-btn-focus-color-opacity);
+        }
+      }
+    `,
+  })),
+});
+
+const Picker = React.forwardRef((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
+
+  const {
+    children,
+    onFocus = () => {},
+    onBlur = () => {},
+    placeholderTextColor = StyleSheet.value('input-placeholder-color'),
+    size,
+    disabled = false,
+    valid = false,
+    invalid = false,
+    useNativeComponent = false,
+    autoFocus = false,
+    style,
+    styleName,
+    ...elementProps
+  } = modifierProps;
+
+  const media = useMedia();
+  const [focused, setFocused] = useState(autoFocus);
+
+  const classes = getStyles(styles, [
+    'select', // reboot
+    '.form-select',
+    disabled && '.form-select.disabled',
+    size === 'sm' && '.form-select-sm',
+    size === 'lg' && '.form-select-lg',
+    valid && '.form-select:valid',
+    invalid && '.form-select:invalid',
+  ]);
+
+  const resolveStyle = useStyle([classes, style], styleName);
+
+  const BasePicker =
+    Platform.OS === 'web' && !useNativeComponent ? PickerWeb : PickerNative;
+
+  return (
+    <PickerContext.Provider value={{ useNativeComponent }}>
+      <BasePicker
+        {...elementProps}
+        ref={modifierRef}
+        placeholderTextColor={placeholderTextColor}
+        onFocus={(event) => {
+          setFocused(true);
+          onFocus(event);
+        }}
+        onBlur={(event) => {
+          setFocused(false);
+          onBlur(event);
+        }}
+        disabled={disabled}
+        autoFocus={autoFocus}
+        style={resolveStyle({
+          media,
+          interaction: { focus: focused, focusVisible: focused },
+        })}
+      >
+        {children}
+      </BasePicker>
+    </PickerContext.Provider>
+  );
+});
+
+Picker.displayName = 'Picker';
+Picker.propTypes = propTypes;
+
+Picker.Item = PickerItem;
+
+export default Picker;

package/src/components/forms/PickerContext.js

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

package/src/components/forms/PickerItem.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import PickerContext from './PickerContext';
+import useForcedContext from '../../hooks/useForcedContext';
+import PickerWebItem from './internals/PickerWebItem';
+import PickerNativeItem from './internals/PickerNativeItem';
+
+const propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  disabled: PropTypes.bool,
+};
+
+const PickerItem = React.forwardRef((props, ref) => {
+  const { label, value, disabled = false } = props;
+
+  const { useNativeComponent } = useForcedContext(PickerContext);
+
+  const BasePickerItem =
+    Platform.OS === 'web' && !useNativeComponent
+      ? PickerWebItem
+      : PickerNativeItem;
+
+  return (
+    <BasePickerItem ref={ref} label={label} value={value} disabled={disabled} />
+  );
+});
+
+PickerItem.displayName = 'PickerItem';
+PickerItem.propTypes = propTypes;
+
+export default PickerItem;

package/src/components/forms/Radio.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useForcedContext from '../../hooks/useForcedContext';
+import FormCheckInput from './FormCheckInput';
+import RadioGroup from './RadioGroup';
+import RadioContext from './RadioContext';
+
+const propTypes = {
+  value: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+};
+
+const Radio = React.forwardRef((props, ref) => {
+  const { value, ...elementProps } = props;
+
+  const { selectedValue, onValueChange, disabled } = useForcedContext(
+    RadioContext,
+  );
+
+  return (
+    <FormCheckInput
+      {...elementProps}
+      ref={ref}
+      type="radio"
+      value={value === selectedValue}
+      onValueChange={() => {
+        onValueChange(value);
+      }}
+      disabled={disabled}
+    />
+  );
+});
+
+Radio.displayName = 'Radio';
+Radio.propTypes = propTypes;
+
+Radio.Group = RadioGroup;
+
+export default Radio;

package/src/components/forms/RadioContext.js

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

package/src/components/forms/RadioGroup.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from '../View';
+import RadioContext from './RadioContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  selectedValue: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.object,
+  ]),
+  onValueChange: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+const RadioGroup = React.forwardRef((props, ref) => {
+  const {
+    children,
+    selectedValue,
+    onValueChange = () => {},
+    disabled = false,
+    ...elementProps
+  } = props;
+
+  return (
+    <View {...elementProps} ref={ref} role="radiogroup">
+      <RadioContext.Provider value={{ selectedValue, onValueChange, disabled }}>
+        {children}
+      </RadioContext.Provider>
+    </View>
+  );
+});
+
+RadioGroup.displayName = 'RadioGroup';
+RadioGroup.propTypes = propTypes;
+
+export default RadioGroup;

package/src/components/forms/Switch.js

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

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

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

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

@@ -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;