bootstrap-rn 0.4.8 → 0.4.10

package/src/components/forms/FormCheckLabel.tsx

@@ -1,71 +1,69 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import { getStyles, each } from '../../utils';
-import Label, { LabelProps } from '../Label';
-import { FORM_VALIDATION_STATES } from '../../theme/proxies';
-import useForcedContext from '../../hooks/useForcedContext';
-import FormCheckContext from './FormCheckContext';
-import type { FormValidationState, ThemeVariables } from '../../types';
-import type { ViewRef } from '../View';
-
-export interface FormCheckLabelProps extends LabelProps {}
-
-const styles = StyleSheet.create({
-  '.form-check-input:disabled ~ .form-check-label': css`
-    @include platform(web) {
-      cursor: default;
-    }
-    opacity: $form-check-label-disabled-opacity;
-  `,
-  '.form-check-label': css`
-    flex-shrink: 1; // added for bootstrap-rn
-
-    @include platform(web) {
-      cursor: $form-check-label-cursor;
-    }
-  `,
-  '.form-check-label --text': css`
-    color: $form-check-label-color;
-  `,
-  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
-    [`.form-check-input:${state} ~ .form-check-label --text`]: css`
-      color: ${(t: ThemeVariables) => data(t).color};
-    `,
-  })),
-});
-
-const FormCheckLabel = React.forwardRef<ViewRef, FormCheckLabelProps>(
-  (props, ref) => {
-    const { children, style, textStyle, ...elementProps } = props;
-
-    const { disabled, valid, invalid } = useForcedContext(FormCheckContext);
-
-    const classes = getStyles(styles, [
-      disabled && '.form-check-input:disabled ~ .form-check-label',
-      '.form-check-label',
-    ]);
-
-    const textClasses = getStyles(styles, [
-      '.form-check-label --text',
-      // validation
-      valid && '.form-check-input:valid ~ .form-check-label --text',
-      invalid && '.form-check-input:invalid ~ .form-check-label --text',
-    ]);
-
-    return (
-      <Label
-        {...elementProps}
-        ref={ref}
-        style={[classes, style]}
-        textStyle={[textClasses, textStyle]}
-      >
-        {children}
-      </Label>
-    );
-  },
-);
-
-FormCheckLabel.displayName = 'FormCheckLabel';
-
-export default FormCheckLabel;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles, each } from '../../utils';
+import Label, { LabelProps } from '../Label';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+import useForcedContext from '../../hooks/useForcedContext';
+import FormCheckContext from './FormCheckContext';
+import type { FormValidationState, ThemeVariables } from '../../types';
+import type { ViewRef } from '../View';
+
+export interface FormCheckLabelProps extends LabelProps {}
+
+const styles = StyleSheet.create({
+  '.form-check-input:disabled ~ .form-check-label': css`
+    @include platform(web) {
+      cursor: default;
+    }
+    opacity: $form-check-label-disabled-opacity;
+  `,
+  '.form-check-label': css`
+    flex-shrink: 1; // added for bootstrap-rn
+
+    @include platform(web) {
+      cursor: $form-check-label-cursor;
+    }
+  `,
+  '.form-check-label --text': css`
+    color: $form-check-label-color;
+  `,
+  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
+    [`.form-check-input:${state} ~ .form-check-label --text`]: css`
+      color: ${(t: ThemeVariables) => data(t).color};
+    `,
+  })),
+});
+
+function FormCheckLabel(
+  props: FormCheckLabelProps & React.RefAttributes<ViewRef>,
+) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const { disabled, valid, invalid } = useForcedContext(FormCheckContext);
+
+  const classes = getStyles(styles, [
+    disabled && '.form-check-input:disabled ~ .form-check-label',
+    '.form-check-label',
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.form-check-label --text',
+    // validation
+    valid && '.form-check-input:valid ~ .form-check-label --text',
+    invalid && '.form-check-input:invalid ~ .form-check-label --text',
+  ]);
+
+  return (
+    <Label
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Label>
+  );
+}
+
+export default FormCheckLabel;

package/src/components/forms/FormLabel.tsx

@@ -1,43 +1,41 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import Label, { LabelProps } from '../Label';
-import { getStyles } from '../../utils';
-import type { ViewRef } from '../View';
-
-export interface FormLabelProps extends LabelProps {}
-
-const styles = StyleSheet.create({
-  '.form-label': css`
-    margin-bottom: $form-label-margin-bottom;
-  `,
-  '.form-label --text': css`
-    font-size: $form-label-font-size;
-    line-height: $form-label-font-size * $line-height-base; // added for bootstrap-rn
-    font-style: $form-label-font-style;
-    font-weight: $form-label-font-weight;
-    color: $form-label-color;
-  `,
-});
-
-const FormLabel = React.forwardRef<ViewRef, FormLabelProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.form-label']);
-  const textClasses = getStyles(styles, ['.form-label --text']);
-
-  return (
-    <Label
-      {...elementProps}
-      ref={ref}
-      style={[classes, style]}
-      textStyle={[textClasses, textStyle]}
-    >
-      {children}
-    </Label>
-  );
-});
-
-FormLabel.displayName = 'FormLabel';
-
-export default FormLabel;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Label, { LabelProps } from '../Label';
+import { getStyles } from '../../utils';
+import type { ViewRef } from '../View';
+
+export interface FormLabelProps extends LabelProps {}
+
+const styles = StyleSheet.create({
+  '.form-label': css`
+    margin-bottom: $form-label-margin-bottom;
+  `,
+  '.form-label --text': css`
+    font-size: $form-label-font-size;
+    line-height: $form-label-font-size * $line-height-base; // added for bootstrap-rn
+    font-style: $form-label-font-style;
+    font-weight: $form-label-font-weight;
+    color: $form-label-color;
+  `,
+});
+
+function FormLabel(props: FormLabelProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.form-label']);
+  const textClasses = getStyles(styles, ['.form-label --text']);
+
+  return (
+    <Label
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Label>
+  );
+}
+
+export default FormLabel;

package/src/components/forms/FormText.tsx

@@ -1,38 +1,36 @@
-import React from 'react';
-import StyleSheet from '../../style/StyleSheet';
-import css from '../../style/css';
-import View, { ViewProps, ViewRef } from '../View';
-import Text from '../Text';
-import { getStyles } from '../../utils';
-
-export interface FormTextProps extends ViewProps {}
-
-const styles = StyleSheet.create({
-  '.form-text': css`
-    margin-top: $form-text-margin-top;
-  `,
-  '.form-text --text': css`
-    font-size: $form-text-font-size;
-    font-style: $form-text-font-style;
-    font-weight: $form-text-font-weight;
-    color: $form-text-color;
-  `,
-});
-
-const FormText = React.forwardRef<ViewRef, FormTextProps>((props, ref) => {
-  const { children, style, textStyle, ...elementProps } = props;
-
-  const classes = getStyles(styles, ['.form-text']);
-  const textClasses = getStyles(styles, ['.form-text --text']);
-
-  // composite component
-  return (
-    <View {...elementProps} ref={ref} style={[classes, style]}>
-      <Text style={[textClasses, textStyle]}>{children}</Text>
-    </View>
-  );
-});
-
-FormText.displayName = 'FormText';
-
-export default FormText;
+import React from 'react';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View, { ViewProps, ViewRef } from '../View';
+import Text from '../Text';
+import { getStyles } from '../../utils';
+
+export interface FormTextProps extends ViewProps {}
+
+const styles = StyleSheet.create({
+  '.form-text': css`
+    margin-top: $form-text-margin-top;
+  `,
+  '.form-text --text': css`
+    font-size: $form-text-font-size;
+    font-style: $form-text-font-style;
+    font-weight: $form-text-font-weight;
+    color: $form-text-color;
+  `,
+});
+
+function FormText(props: FormTextProps & React.RefAttributes<ViewRef>) {
+  const { ref, children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.form-text']);
+  const textClasses = getStyles(styles, ['.form-text --text']);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+}
+
+export default FormText;

package/src/components/forms/Input.tsx

@@ -170,10 +170,11 @@ const styles = StyleSheet.create({
   })),
 });
 
-const Input = React.forwardRef<TextInputRef, InputProps>((props, ref) => {
-  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
+function Input(props: InputProps & React.RefAttributes<TextInputRef>) {
+  const modifierProps = useModifier('useFormField', props);
 
   const {
+    ref,
     size,
     placeholderTextColor = StyleSheet.value('input-placeholder-color'),
     multiline = false,
@@ -204,7 +205,7 @@ const Input = React.forwardRef<TextInputRef, InputProps>((props, ref) => {
   return (
     <TextInput
       {...elementProps}
-      ref={modifierRef}
+      ref={ref}
       placeholderTextColor={placeholderTextColor}
       multiline={multiline}
       disabled={disabled}
@@ -213,8 +214,6 @@ const Input = React.forwardRef<TextInputRef, InputProps>((props, ref) => {
       style={[classes, style]}
     />
   );
-});
-
-Input.displayName = 'Input';
+}
 
 export default Input;

package/src/components/forms/Picker.tsx

@@ -115,10 +115,11 @@ const styles = StyleSheet.create({
   })),
 });
 
-const Picker = React.forwardRef<PressableRef, PickerProps>((props, ref) => {
-  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
+function Picker(props: PickerProps & React.RefAttributes<PressableRef>) {
+  const modifierProps = useModifier('useFormField', props);
 
   const {
+    ref,
     children,
     onFocus = () => {},
     onBlur = () => {},
@@ -163,7 +164,7 @@ const Picker = React.forwardRef<PressableRef, PickerProps>((props, ref) => {
     <PickerContext.Provider value={contextValue}>
       <BasePicker
         {...elementProps}
-        ref={modifierRef}
+        ref={ref}
         placeholderTextColor={placeholderTextColor}
         onFocus={(event) => {
           setFocused(true);
@@ -184,9 +185,7 @@ const Picker = React.forwardRef<PressableRef, PickerProps>((props, ref) => {
       </BasePicker>
     </PickerContext.Provider>
   );
-});
-
-Picker.displayName = 'Picker';
+}
 
 export default Object.assign(Picker, {
   Item: PickerItem,

package/src/components/forms/PickerItem.tsx

@@ -12,8 +12,8 @@ export interface PickerItemProps extends ViewProps {
   disabled?: boolean;
 }
 
-const PickerItem = React.forwardRef<ViewRef, PickerItemProps>((props, ref) => {
-  const { label, value, disabled = false } = props;
+function PickerItem(props: PickerItemProps & React.RefAttributes<ViewRef>) {
+  const { ref, label, value, disabled = false } = props;
 
   const { useNativeComponent } = useForcedContext(PickerContext);
 
@@ -25,8 +25,6 @@ const PickerItem = React.forwardRef<ViewRef, PickerItemProps>((props, ref) => {
   return (
     <BasePickerItem ref={ref} label={label} value={value} disabled={disabled} />
   );
-});
-
-PickerItem.displayName = 'PickerItem';
+}
 
 export default PickerItem;

package/src/components/forms/Radio.tsx

@@ -5,13 +5,15 @@ import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
 import RadioGroup from './RadioGroup';
 import RadioContext from './RadioContext';
 
-export interface RadioProps
-  extends Omit<FormCheckInputProps, 'value' | 'type'> {
+export interface RadioProps extends Omit<
+  FormCheckInputProps,
+  'value' | 'type'
+> {
   value: boolean | number | string | object | null;
 }
 
-const Radio = React.forwardRef<PressableRef, RadioProps>((props, ref) => {
-  const { value, ...elementProps } = props;
+function Radio(props: RadioProps & React.RefAttributes<PressableRef>) {
+  const { ref, value, ...elementProps } = props;
 
   const { selectedValue, onValueChange, disabled } =
     useForcedContext(RadioContext);
@@ -28,9 +30,7 @@ const Radio = React.forwardRef<PressableRef, RadioProps>((props, ref) => {
       disabled={disabled}
     />
   );
-});
-
-Radio.displayName = 'Radio';
+}
 
 export default Object.assign(Radio, {
   Group: RadioGroup,

package/src/components/forms/RadioGroup.tsx

@@ -10,8 +10,9 @@ export interface RadioGroupProps extends ViewProps {
   disabled?: boolean;
 }
 
-const RadioGroup = React.forwardRef<ViewRef, RadioGroupProps>((props, ref) => {
+function RadioGroup(props: RadioGroupProps & React.RefAttributes<ViewRef>) {
   const {
+    ref,
     children,
     selectedValue,
     onValueChange = () => {},
@@ -35,8 +36,6 @@ const RadioGroup = React.forwardRef<ViewRef, RadioGroupProps>((props, ref) => {
       </RadioContext.Provider>
     </View>
   );
-});
-
-RadioGroup.displayName = 'RadioGroup';
+}
 
 export default RadioGroup;

package/src/components/forms/Switch.tsx

@@ -1,15 +1,13 @@
-import React from 'react';
-import type { PressableRef } from '../Pressable';
-import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
-
-export interface SwitchProps extends Omit<FormCheckInputProps, 'type'> {}
-
-const Switch = React.forwardRef<PressableRef, SwitchProps>((props, ref) => {
-  const { ...elementProps } = props;
-
-  return <FormCheckInput {...elementProps} ref={ref} type="switch" />;
-});
-
-Switch.displayName = 'Switch';
-
-export default Switch;
+import React from 'react';
+import type { PressableRef } from '../Pressable';
+import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
+
+export interface SwitchProps extends Omit<FormCheckInputProps, 'type'> {}
+
+function Switch(props: SwitchProps & React.RefAttributes<PressableRef>) {
+  const { ref, ...elementProps } = props;
+
+  return <FormCheckInput {...elementProps} ref={ref} type="switch" />;
+}
+
+export default Switch;

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

@@ -1,51 +1,49 @@
-import React, { forwardRef } from 'react';
-import type { ViewStyle } from 'react-native';
-import Pressable, { PressableRef } from '../../Pressable';
-import useBackground from '../../../hooks/useBackground';
-import type { FormCheckInputProps } from '../FormCheckInput';
-
-export interface FormCheckInputNativeProps extends FormCheckInputProps {
-  style: ViewStyle[];
-}
-
-const FormCheckInputNative = forwardRef<
-  PressableRef,
-  FormCheckInputNativeProps
->((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={() => {
-        if (handleValueChange) handleValueChange(!value);
-      }}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      hitSlop={hitSlop}
-      disabled={disabled}
-      style={inputBackground.style}
-      id={id}
-    >
-      {inputBackground.element}
-    </Pressable>
-  );
-});
-
-FormCheckInputNative.displayName = 'FormCheckInputNative';
-
-export default FormCheckInputNative;
+import React from 'react';
+import type { ViewStyle } from 'react-native';
+import Pressable, { PressableRef } from '../../Pressable';
+import useBackground from '../../../hooks/useBackground';
+import type { FormCheckInputProps } from '../FormCheckInput';
+
+export interface FormCheckInputNativeProps extends FormCheckInputProps {
+  style: ViewStyle[];
+}
+
+function FormCheckInputNative(
+  props: FormCheckInputNativeProps & React.RefAttributes<PressableRef>,
+) {
+  const {
+    ref,
+    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={() => {
+        if (handleValueChange) handleValueChange(!value);
+      }}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      hitSlop={hitSlop}
+      disabled={disabled}
+      style={inputBackground.style}
+      id={id}
+    >
+      {inputBackground.element}
+    </Pressable>
+  );
+}
+
+export default FormCheckInputNative;

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

@@ -31,16 +31,18 @@ type InputProps = {
   id?: string;
 };
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ style, ...props }, ref) =>
-    createElement('input', { ...props, ref, style: [styles.reboot, style] }),
-);
+const Input = ({
+  ref,
+  style,
+  ...props
+}: InputProps & React.RefAttributes<HTMLInputElement>) =>
+  createElement('input', { ...props, ref, style: [styles.reboot, style] });
 
-const FormCheckInputWeb = React.forwardRef<
-  PressableRef,
-  FormCheckInputWebProps
->((props, ref) => {
+function FormCheckInputWeb(
+  props: FormCheckInputWebProps & React.RefAttributes<PressableRef>,
+) {
   const {
+    ref,
     type,
     value,
     onValueChange: handleValueChange,
@@ -72,8 +74,6 @@ const FormCheckInputWeb = React.forwardRef<
       autoFocus={autoFocus}
     />
   );
-});
-
-FormCheckInputWeb.displayName = 'FormCheckInputWeb';
+}
 
 export default FormCheckInputWeb;