bootstrap-rn 0.3.0 → 0.3.2

package/src/components/forms/Input.js

@@ -0,0 +1,216 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import TextInput from '../TextInput';
+import { getStyles, each } from '../../utils';
+import useModifier from '../../hooks/useModifier';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+
+const propTypes = {
+  size: PropTypes.oneOf(['sm', 'lg']),
+  placeholderTextColor: PropTypes.string,
+  multiline: PropTypes.bool,
+  disabled: PropTypes.bool,
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  selectTextOnFocus: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+// Known issues:
+//
+// line-height (iOS)
+// If a line height is defined on iOS the text will be displayed on the bottom
+// of the line. As a workaround the line height is only defined for multi line
+// inputs.
+//
+// multi line height (iOS)
+// A multi line input on iOS has only the height of a single line input. As a
+// workaround we added a height of $input-height-sm + 8rem for multi line
+// inputs on iOS.
+//
+// single line height (Android)
+// If no height is defined, Android sets a text line height of 28px auto-
+// matically, which leads to a larger height than min height for the default
+// and sm size. As a workaround we set a height for single line inputs.
+const styles = StyleSheet.create({
+  '.form-control': css`
+    // display: block;
+    width: 100%;
+    min-height: $input-height; // added for bootstrap-rn
+    padding: $input-padding-y $input-padding-x;
+    font-family: $input-font-family;
+    font-size: $input-font-size;
+    font-weight: $input-font-weight;
+    @include platform(web) {
+      line-height: $input-font-size * $input-line-height;
+    }
+    color: $input-color;
+    background-color: $input-bg;
+    // background-clip: padding-box;
+    border: $input-border-width solid $input-border-color;
+    @include platform(web) {
+      appearance: none; // Fix appearance for date inputs in Safari
+    }
+
+    // Note: This has no effect on <select>s in some browsers, due to the limited stylability of "<select>"s in CSS.
+    border-radius: $input-border-radius;
+
+    // @include box-shadow($input-box-shadow);
+    // @include transition($input-transition);
+
+    // Customize the ":focus" state to imitate native WebKit styles.
+    &:focus {
+      color: $input-focus-color;
+      background-color: $input-focus-bg;
+      border-color: $input-focus-border-color;
+      @include platform(web) {
+        outline-width: 0; // outline: 0;
+        // @if $enable-shadows {
+        //   @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+        // } @else {
+        //   // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $input-focus-box-shadow;
+        // }
+      }
+    }
+  `,
+  '.form-control.disabled': css`
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
+    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
+    opacity: 1;
+  `,
+  '.form-control-sm': css`
+    min-height: $input-height-sm;
+    padding: $input-padding-y-sm $input-padding-x-sm;
+    font-size: $input-font-size-sm;
+    @include platform(web) {
+      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
+    }
+    border-radius: $input-border-radius-sm;
+  `,
+  '.form-control-lg': css`
+    min-height: $input-height-lg;
+    padding: $input-padding-y-lg $input-padding-x-lg;
+    font-size: $input-font-size-lg;
+    @include platform(web) {
+      line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn
+    }
+    border-radius: $input-border-radius-lg;
+  `,
+  '.form-control:not(textarea)': css`
+    @include platform(android) {
+      height: $input-height; // added for bootstrap-rn
+    }
+  `,
+  '.form-control-sm:not(textarea)': css`
+    @include platform(android) {
+      height: $input-height-sm; // added for bootstrap-rn
+    }
+  `,
+  '.form-control-lg:not(textarea)': css`
+    @include platform(android) {
+      height: $input-height-lg; // added for bootstrap-rn
+    }
+  `,
+  'textarea.form-control': css`
+    vertical-align: top; // added for bootstrap-rn
+    min-height: $input-height;
+
+    @include platform(ios) {
+      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
+    }
+    @include platform(native) {
+      line-height: $input-font-size * $input-line-height; // added for bootstrap-rn
+    }
+  `,
+  'textarea.form-control-sm': css`
+    min-height: $input-height-sm;
+
+    @include platform(ios) {
+      // TODO: Adjust ios height to sm size
+      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
+    }
+    @include platform(native) {
+      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
+    }
+  `,
+  'textarea.form-control-lg': css`
+    min-height: $input-height-lg;
+
+    @include platform(ios) {
+      // TODO: Adjust ios height to lg size
+      min-height: $input-height-sm + 8rem; // added for bootstrap-rn
+    }
+    @include platform(native) {
+      line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn
+    }
+  `,
+  ...each(FORM_VALIDATION_STATES, (state, data) => ({
+    [`.form-control:${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 Input = React.forwardRef((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
+
+  const {
+    size,
+    placeholderTextColor = StyleSheet.value('input-placeholder-color'),
+    multiline = false,
+    disabled = false,
+    valid = false,
+    invalid = false,
+    readOnly = false,
+    selectTextOnFocus = false,
+    style,
+    ...elementProps
+  } = modifierProps;
+
+  const classes = getStyles(styles, [
+    '.form-control',
+    disabled && '.form-control.disabled',
+    size === 'sm' && '.form-control-sm',
+    size === 'lg' && '.form-control-lg',
+    !multiline && '.form-control:not(textarea)',
+    !multiline && size === 'sm' && '.form-control-sm:not(textarea)',
+    !multiline && size === 'lg' && '.form-control-lg:not(textarea)',
+    multiline && 'textarea.form-control',
+    multiline && size === 'sm' && 'textarea.form-control-sm',
+    multiline && size === 'lg' && 'textarea.form-control-lg',
+    valid && '.form-control:valid',
+    invalid && '.form-control:invalid',
+  ]);
+
+  return (
+    <TextInput
+      {...elementProps}
+      ref={modifierRef}
+      placeholderTextColor={placeholderTextColor}
+      multiline={multiline}
+      disabled={disabled}
+      readOnly={disabled ? true : readOnly}
+      selectTextOnFocus={disabled ? false : selectTextOnFocus}
+      style={[classes, style]}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+Input.propTypes = propTypes;
+
+export default Input;

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;