bootstrap-rn 0.3.2 → 0.3.4

package/src/components/dropdown/{useToggleDropdown.js → useToggleDropdown.ts}

@@ -1,23 +1,32 @@
-import useForcedContext from '../../hooks/useForcedContext';
-import DropdownContext from './DropdownContext';
-
-export default function useToggleDropdown(props) {
-  const context = useForcedContext(DropdownContext);
-
-  const { onPress: handlePress, caret, ...restProps } = props;
-
-  return {
-    ...restProps,
-    id: context.identifier,
-    ref: context.toggleRef,
-    onPress: (event) => {
-      if (handlePress) handlePress(event);
-
-      context.setVisible((value) => !value);
-    },
-    'aria-haspopup': true,
-    'aria-expanded': context.visible,
-    active: context.visible,
-    caret: caret === undefined ? { direction: context.direction } : caret,
-  };
-}
+import type { GestureResponderEvent } from 'react-native';
+import useForcedContext from '../../hooks/useForcedContext';
+import DropdownContext from './DropdownContext';
+import { CaretProps } from '../Caret';
+
+export interface UseToggleDropdownProps {
+  onPress?: null | ((event: GestureResponderEvent) => void);
+  caret?: boolean | CaretProps;
+}
+
+export default function useToggleDropdown<T>(
+  props: UseToggleDropdownProps & T,
+) {
+  const context = useForcedContext(DropdownContext);
+
+  const { onPress: handlePress, caret, ...restProps } = props;
+
+  return {
+    ...restProps,
+    id: context.identifier,
+    ref: context.toggleRef,
+    onPress: (event: GestureResponderEvent) => {
+      if (handlePress) handlePress(event);
+
+      context.setVisible(!context.visible);
+    },
+    'aria-haspopup': true,
+    'aria-expanded': context.visible,
+    active: context.visible,
+    caret: caret === undefined ? { direction: context.direction } : caret,
+  };
+}

package/src/components/forms/Checkbox.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PressableRef } from '../Pressable';
+import FormCheckInput, { FormCheckInputProps } from './FormCheckInput';
+
+export interface CheckboxProps extends Omit<FormCheckInputProps, 'type'> {}
+
+const Checkbox = React.forwardRef<PressableRef, CheckboxProps>((props, ref) => {
+  const { ...elementProps } = props;
+
+  return <FormCheckInput {...elementProps} ref={ref} type="checkbox" />;
+});
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

package/src/components/forms/{Feedback.js → Feedback.tsx}

@@ -1,32 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
-import Text from '../Text';
+import Text, { TextProps, TextRef } from '../Text';
 import { each, getStyles } from '../../utils';
 import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+import type { FormValidationState, ThemeVariables } from '../../types';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  type: PropTypes.oneOf(Object.keys(FORM_VALIDATION_STATES)),
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
+export interface FeedbackProps extends TextProps {
+  type?: keyof typeof FORM_VALIDATION_STATES;
+}
 
 const styles = StyleSheet.create({
-  ...each(FORM_VALIDATION_STATES, (state, data) => ({
+  ...each(FORM_VALIDATION_STATES, (state, data: FormValidationState) => ({
     [`.${state}-feedback`]: css`
       // display: none;
       width: 100%;
       margin-top: $form-feedback-margin-top;
       font-size: $form-feedback-font-size;
       font-style: $form-feedback-font-style;
-      color: ${(t) => data(t).color};
+      color: ${(t: ThemeVariables) => data(t).color};
     `,
   })),
 });
 
-const Feedback = React.forwardRef((props, ref) => {
+const Feedback = React.forwardRef<TextRef, FeedbackProps>((props, ref) => {
   const { children, type, style, ...elementProps } = props;
 
   const classes = getStyles(styles, [`.${type}-feedback`]);
@@ -39,6 +36,5 @@ const Feedback = React.forwardRef((props, ref) => {
 });
 
 Feedback.displayName = 'Feedback';
-Feedback.propTypes = propTypes;
 
 export default Feedback;

package/src/components/forms/{FormCheck.js → FormCheck.tsx}

@@ -1,21 +1,17 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useMemo } from 'react';
 import StyleSheet from '../../style/StyleSheet';
 import css from '../../style/css';
-import View from '../View';
+import View, { ViewProps, ViewRef } from '../View';
 import { getStyles } from '../../utils';
 import FormCheckContext from './FormCheckContext';
 import FormCheckLabel from './FormCheckLabel';
 
-const propTypes = {
-  children: PropTypes.node.isRequired,
-  reverse: PropTypes.bool,
-  disabled: PropTypes.bool,
-  valid: PropTypes.bool,
-  invalid: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.any,
-};
+export interface FormCheckProps extends ViewProps {
+  reverse?: boolean;
+  disabled?: boolean;
+  valid?: boolean;
+  invalid?: boolean;
+}
 
 const styles = StyleSheet.create({
   '.form-check': css`
@@ -36,7 +32,7 @@ const styles = StyleSheet.create({
   `,
 });
 
-const FormCheck = React.forwardRef((props, ref) => {
+const FormCheck = React.forwardRef<ViewRef, FormCheckProps>((props, ref) => {
   const {
     children,
     reverse = false,
@@ -52,9 +48,14 @@ const FormCheck = React.forwardRef((props, ref) => {
     reverse && '.form-check-reverse',
   ]);
 
+  const contextValue = useMemo(
+    () => ({ reverse, disabled, valid, invalid }),
+    [reverse, disabled, valid, invalid],
+  );
+
   return (
     <View {...elementProps} ref={ref} style={[classes, style]}>
-      <FormCheckContext.Provider value={{ reverse, disabled, valid, invalid }}>
+      <FormCheckContext.Provider value={contextValue}>
         {children}
       </FormCheckContext.Provider>
     </View>
@@ -62,8 +63,7 @@ const FormCheck = React.forwardRef((props, ref) => {
 });
 
 FormCheck.displayName = 'FormCheck';
-FormCheck.propTypes = propTypes;
 
-FormCheck.Label = FormCheckLabel;
-
-export default FormCheck;
+export default Object.assign(FormCheck, {
+  Label: FormCheckLabel,
+});

package/src/components/forms/FormCheckContext.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export type FormCheckContextType = {
+  reverse: boolean;
+  disabled: boolean;
+  valid: boolean;
+  invalid: boolean;
+};
+
+const FormCheckContext = React.createContext<FormCheckContextType | null>(null);
+
+FormCheckContext.displayName = 'FormCheckContext';
+
+export default FormCheckContext;