bootstrap-rn 0.3.5 → 0.4.0

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

@@ -1,195 +1,196 @@
-import React, { useState, useMemo } from 'react';
-import {
-  TextStyle,
-  TextInputFocusEventData,
-  NativeSyntheticEvent,
-  TargetedEvent,
-  StyleSheet as StyleUtils,
-} from 'react-native';
-import StyleSheet from '../../../style/StyleSheet';
-import css from '../../../style/css';
-import Pressable, { PressableRef } from '../../Pressable';
-import Text from '../../Text';
-import Offcanvas from '../../offcanvas/Offcanvas';
-import useBackground from '../../../hooks/useBackground';
-import PickerNativeContext from './PickerNativeContext';
-import type { PickerProps, MenuComponentProps } from '../Picker';
-import type { BaseStyle } from '../../../types';
-
-export interface PickerNativeProps extends PickerProps {
-  style: TextStyle[];
-}
-
-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: BaseStyle[]) => {
-  const flattenedStyle = StyleUtils.flatten(style);
-  const textStyles: { [key: string]: string } = {};
-
-  Object.entries(flattenedStyle).forEach(([key, value]) => {
-    if (textStyleKeys.includes(key)) {
-      textStyles[key] = value;
-    }
-  });
-
-  return textStyles;
-};
-
-type GetTextProps = {
-  children: React.ReactElement | React.ReactElement[];
-  selectedValue?: boolean | number | string | object;
-};
-
-const getText = ({ children, selectedValue }: GetTextProps) => {
-  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;
-};
-
-function DefaultMenuComponent({
-  children,
-  selectedValue,
-  onValueChange: handleValueChange,
-  onClose: handleClose,
-}: MenuComponentProps) {
-  const contextValue = useMemo(
-    () => ({
-      selectedValue,
-      handleValueChange,
-    }),
-    [selectedValue, handleValueChange],
-  );
-
-  return (
-    <Offcanvas placement="bottom" visible onToggle={handleClose}>
-      <Offcanvas.Body contentContainerStyle={styles.menu}>
-        <PickerNativeContext.Provider value={contextValue}>
-          {children}
-        </PickerNativeContext.Provider>
-      </Offcanvas.Body>
-    </Offcanvas>
-  );
-}
-/* eslint-enable */
-
-const PickerNative = React.forwardRef<PressableRef, PickerNativeProps>(
-  (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?: boolean | number | string | object,
-    ) => {
-      onValueChange(nextValue);
-      setVisible(false);
-    };
-    const handleClose = () => {
-      setVisible(false);
-    };
-
-    const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
-      onFocus(event as NativeSyntheticEvent<TextInputFocusEventData>);
-    };
-
-    const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
-      onBlur(event as NativeSyntheticEvent<TextInputFocusEventData>);
-    };
-
-    return (
-      <>
-        <Pressable
-          {...elementProps}
-          ref={ref}
-          role="combobox"
-          onPress={() => {
-            setVisible(true);
-          }}
-          onFocus={(event: NativeSyntheticEvent<TargetedEvent>) => {
-            handleFocus(event);
-          }}
-          onBlur={(event: NativeSyntheticEvent<TargetedEvent>) => {
-            handleBlur(event);
-          }}
-          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>
-        )}
-      </>
-    );
-  },
-);
-
-export default PickerNative;
+import React, { useState, useMemo } from 'react';
+import {
+  TextStyle,
+  TextInputFocusEventData,
+  NativeSyntheticEvent,
+  TargetedEvent,
+  StyleSheet as StyleUtils,
+} from 'react-native';
+import StyleSheet from '../../../style/StyleSheet';
+import css from '../../../style/css';
+import Pressable, { PressableRef } from '../../Pressable';
+import Text from '../../Text';
+import Offcanvas from '../../offcanvas/Offcanvas';
+import useBackground from '../../../hooks/useBackground';
+import PickerNativeContext from './PickerNativeContext';
+import type { PickerProps, MenuComponentProps } from '../Picker';
+import type { BaseStyle } from '../../../types';
+import type { PickerItemProps } from '../PickerItem';
+
+export interface PickerNativeProps extends PickerProps {
+  style: TextStyle[];
+}
+
+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: BaseStyle[]) => {
+  const flattenedStyle = StyleUtils.flatten(style);
+  const textStyles: { [key: string]: string } = {};
+
+  Object.entries(flattenedStyle).forEach(([key, value]) => {
+    if (textStyleKeys.includes(key)) {
+      textStyles[key] = value;
+    }
+  });
+
+  return textStyles;
+};
+
+type GetTextProps = {
+  children:
+    | React.ReactElement<PickerItemProps>
+    | React.ReactElement<PickerItemProps>[];
+  selectedValue?: string | null | undefined;
+};
+
+const getText = ({ children, selectedValue }: GetTextProps) => {
+  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;
+};
+
+function DefaultMenuComponent({
+  children,
+  selectedValue,
+  onValueChange: handleValueChange,
+  onClose: handleClose,
+}: MenuComponentProps) {
+  const contextValue = useMemo(
+    () => ({
+      selectedValue,
+      handleValueChange,
+    }),
+    [selectedValue, handleValueChange],
+  );
+
+  return (
+    <Offcanvas placement="bottom" visible onToggle={handleClose}>
+      <Offcanvas.Body contentContainerStyle={styles.menu}>
+        <PickerNativeContext.Provider value={contextValue}>
+          {children}
+        </PickerNativeContext.Provider>
+      </Offcanvas.Body>
+    </Offcanvas>
+  );
+}
+/* eslint-enable */
+
+const PickerNative = React.forwardRef<PressableRef, PickerNativeProps>(
+  (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: string) => {
+      onValueChange(nextValue);
+      setVisible(false);
+    };
+    const handleClose = () => {
+      setVisible(false);
+    };
+
+    const handleFocus = (event: NativeSyntheticEvent<TargetedEvent>) => {
+      onFocus(event as NativeSyntheticEvent<TextInputFocusEventData>);
+    };
+
+    const handleBlur = (event: NativeSyntheticEvent<TargetedEvent>) => {
+      onBlur(event as NativeSyntheticEvent<TextInputFocusEventData>);
+    };
+
+    return (
+      <>
+        <Pressable
+          {...elementProps}
+          ref={ref}
+          role="combobox"
+          onPress={() => {
+            setVisible(true);
+          }}
+          onFocus={(event: NativeSyntheticEvent<TargetedEvent>) => {
+            handleFocus(event);
+          }}
+          onBlur={(event: NativeSyntheticEvent<TargetedEvent>) => {
+            handleBlur(event);
+          }}
+          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>
+        )}
+      </>
+    );
+  },
+);
+
+export default PickerNative;

package/src/components/forms/internals/PickerNativeContext.ts

@@ -1,14 +1,14 @@
-import React from 'react';
-
-type PickerNativeContextType = {
-  selectedValue?: boolean | number | string | object;
-  handleValueChange: (value?: boolean | number | string | object) => void;
-};
-
-const PickerNativeContext = React.createContext<PickerNativeContextType | null>(
-  null,
-);
-
-PickerNativeContext.displayName = 'PickerNativeContext';
-
-export default PickerNativeContext;
+import React from 'react';
+
+type PickerNativeContextType = {
+  selectedValue?: string | null | undefined;
+  handleValueChange: (value: string) => void;
+};
+
+const PickerNativeContext = React.createContext<PickerNativeContextType | null>(
+  null,
+);
+
+PickerNativeContext.displayName = 'PickerNativeContext';
+
+export default PickerNativeContext;

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

@@ -1,59 +1,59 @@
-import React from 'react';
-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';
-import { ViewProps, ViewRef } from '../../View';
-
-export interface PickerNativeItemProps extends ViewProps {
-  label: string;
-  value?: boolean | number | string | object;
-  disabled?: boolean;
-}
-
-const styles = StyleSheet.create({
-  item: css`
-    margin: 0.25rem 1rem;
-    padding: 0.25rem;
-  `,
-  itemDisabled: css``,
-});
-
-const PickerNativeItem = React.forwardRef<ViewRef, PickerNativeItemProps>(
-  (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' : undefined}>{label}</Text>
-      </Pressable>
-    );
-  },
-);
-
-PickerNativeItem.displayName = 'PickerNativeItem';
-
-export default PickerNativeItem;
+import React from 'react';
+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';
+import { ViewProps, ViewRef } from '../../View';
+
+export interface PickerNativeItemProps extends ViewProps {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+const styles = StyleSheet.create({
+  item: css`
+    margin: 0.25rem 1rem;
+    padding: 0.25rem;
+  `,
+  itemDisabled: css``,
+});
+
+const PickerNativeItem = React.forwardRef<ViewRef, PickerNativeItemProps>(
+  (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' : undefined}>{label}</Text>
+      </Pressable>
+    );
+  },
+);
+
+PickerNativeItem.displayName = 'PickerNativeItem';
+
+export default PickerNativeItem;

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

@@ -1,36 +1,36 @@
-import React from 'react';
-import {
-  // @ts-expect-error web only import
-  Picker as WebPicker,
-} from 'react-native';
-import useForcedContext from '../../../hooks/useForcedContext';
-import PickerWebContext from './PickerWebContext';
-import type { ViewProps, ViewRef } from '../../View';
-
-export interface PickerWebItemProps extends ViewProps {
-  label: string;
-  value?: boolean | number | string | object;
-  disabled?: boolean;
-}
-
-const PickerWebItem = React.forwardRef<ViewRef, PickerWebItemProps>(
-  (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';
-
-export default PickerWebItem;
+import React from 'react';
+import {
+  // @ts-expect-error web only import
+  Picker as WebPicker,
+} from 'react-native';
+import useForcedContext from '../../../hooks/useForcedContext';
+import PickerWebContext from './PickerWebContext';
+import type { ViewProps, ViewRef } from '../../View';
+
+export interface PickerWebItemProps extends ViewProps {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+const PickerWebItem = React.forwardRef<ViewRef, PickerWebItemProps>(
+  (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';
+
+export default PickerWebItem;