react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.31

package/components/FilePicker/FilePicker.tsx

@@ -1,15 +1,17 @@
-import { forwardRef, memo, type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
+import { memo, useCallback, useMemo } from 'react';
 
 import useFilePicker from '../../hooks/useFilePicker';
 import type { DocumentPickerOptions, DocumentResult } from '../../utils/DocumentPicker';
-import { ActivityIndicator } from '../ActivityIndicator';
 import { IconButton } from '../IconButton';
 import { TextInput, type TextInputProps } from '../TextInput';
+import { FilePickerContext } from './utils';
 
 export type OmitProp =
     | 'editable'
     | 'multiline'
     | 'onChangeText'
+    | 'onChange'
     | 'keyboardType'
     | 'defaultValue'
     | 'value'
@@ -24,45 +26,39 @@ export type Props = Omit<TextInputProps, OmitProp> &
          */
         multiple?: boolean;
         /**
-         * Displays the Spinner on the right side in place of the default upload icon
-         * @default false
+         * Default value for uncontrolled usage
          */
-        loading?: boolean;
-        left?: ReactNode;
-        right?: ReactNode;
+        defaultValue?: DocumentResult[];
         /**
          * To Control the value
          */
-        value?: DocumentResult | DocumentResult[];
+        value?: DocumentResult[];
         /**
          * The Callback function to return the selected files as an array or object
          */
-        onChange?: (result: DocumentResult | DocumentResult[]) => any;
-        /**
-         * To replace the default progress indicator
-         */
-        progressIndicator?: ReactNode;
+        onChange?: (result: DocumentResult[] | undefined) => any;
     };
 
-const FilePicker = (
-    {
-        loading,
-        right: rightProp,
-        progressIndicator,
-        type,
-        multiple,
-        transitionStyle,
-        mode,
-        presentationStyle,
-        value,
-        onChange = () => {},
-        onCancel,
-        onError,
-        ...rest
-    }: Props,
-    ref: any,
-) => {
-    const [displayText, setDisplayText] = useState('');
+const FilePicker = ({
+    ref,
+    type,
+    multiple,
+    transitionStyle,
+    mode,
+    presentationStyle,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    onCancel,
+    onError,
+    children,
+    ...rest
+}: Props) => {
+    const [value, onValueChange] = useControlledValue<DocumentResult[] | undefined>({
+        value: valueProp,
+        defaultValue,
+        onChange,
+    });
 
     const { openFilePicker } = useFilePicker({
         type,
@@ -74,60 +70,34 @@ const FilePicker = (
         onError,
     });
 
-    const onSetInputValue = useCallback(
-        (response: DocumentResult | DocumentResult[] | undefined) => {
-            if (Array.isArray(response)) {
-                if (response.length > 1) {
-                    setDisplayText(`${response.length} file${response.length > 1 ? 's' : ''}`);
-                    return;
-                }
+    const displayText = useMemo(() => {
+        if (!value) return '';
 
-                setDisplayText(response[0].name || '');
-                return;
-            }
-
-            setDisplayText(response?.name || '');
-        },
-        [],
-    );
+        if (value.length > 1) {
+            return `${value.length} files`;
+        }
+        return value[0]?.name || '';
+    }, [value]);
 
     const onPress = useCallback(() => {
         openFilePicker(response => {
-            onSetInputValue(response);
-
-            onChange?.(response);
+            onValueChange(response);
         });
-    }, [onChange, onSetInputValue, openFilePicker]);
-
-    const rightElement = useMemo(() => {
-        if (!loading) {
-            return (
-                <>
-                    {rightProp || (
-                        <IconButton type="material-community" name="upload" onPress={onPress} />
-                    )}
-                </>
-            );
-        } else {
-            return <>{progressIndicator || <ActivityIndicator />}</>;
-        }
-    }, [loading, onPress, progressIndicator, rightProp]);
+    }, [onValueChange, openFilePicker]);
 
-    // if the value changes, we only want file name or the length of the array to display the text
-    useEffect(() => {
-        onSetInputValue(value);
-    }, [onSetInputValue, value]);
+    const contextValue = useMemo(() => ({ onPressTrigger: onPress }), [onPress]);
 
     return (
-        <TextInput
-            label="Choose file"
-            {...rest}
-            value={displayText}
-            editable={false}
-            right={rightElement}
-            ref={ref}
-        />
+        <FilePickerContext value={contextValue}>
+            <TextInput value={displayText} {...rest} editable={false} ref={ref}>
+                <TextInput.Label>Choose file</TextInput.Label>
+                <TextInput.Right>
+                    <IconButton type="material-community" name="upload" onPress={onPress} />
+                </TextInput.Right>
+                {children}
+            </TextInput>
+        </FilePickerContext>
     );
 };
 
-export default memo(forwardRef(FilePicker));
+export default memo(FilePicker);

package/components/FilePicker/index.tsx

@@ -4,4 +4,5 @@ import FilePickerDefault from './FilePicker';
 export const FilePicker = getRegisteredComponentWithFallback('FilePicker', FilePickerDefault);
 
 export type { Props as FilePickerProps } from './FilePicker';
-export { defaultStyles } from './utils';
+export type { FilePickerContextType } from './utils';
+export { defaultStyles, FilePickerContext } from './utils';

package/components/FilePicker/utils.ts

@@ -1,7 +1,16 @@
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
 
+export type FilePickerContextType = {
+    onPressTrigger: () => void;
+};
+
+export const FilePickerContext = createContext<FilePickerContextType>({
+    onPressTrigger: () => {},
+});
+
 const filePickerStylesDefault = StyleSheet.create({
     root: {},
 });

package/components/HelperText/HelperText.tsx

@@ -24,41 +24,6 @@ export type Props = TextProps & {
     testID?: string;
 };
 
-/**
- * Helper text is used in conjuction with input elements to provide additional hints for the user.
- *
- * <div class="screenshots">
- *   <img class="small" src="screenshots/helper-text.gif" />
- * </div>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { HelperText, TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *    const onChangeText = text => setText(text);
- *
- *   const hasErrors = () => {
- *     return !text.includes('@');
- *   };
- *
- *  return (
- *     <View>
- *       <TextInput label="Email" value={text} onChangeText={onChangeText} />
- *       <HelperText variant="error" visible={hasErrors()}>
- *         Email address is invalid!
- *       </HelperText>
- *     </View>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
 const HelperText = ({
     style: styleProp,
     variant = 'info',

package/components/Icon/iconFactory.tsx

@@ -1,6 +1,7 @@
 // import { textFactory } from '../Text/textFactory';
-import { memoize } from '../../utils/lodash';
-import { IconPacks, type IconType } from './types';
+import { memoize } from '@react-native-molecules/utils/helpers/lodash';
+
+import type { IconType } from './types';
 
 const customIcons: any = {};
 
@@ -10,9 +11,9 @@ export const registerCustomIconType = (id: string, customIcon: any) => {
 
 export default memoize((type: IconType) => {
     switch (type) {
-        case IconPacks.MaterialCommunity:
+        case 'material-community':
             return require('@react-native-vector-icons/material-design-icons').default;
-        case IconPacks.Feather:
+        case 'feather':
             return require('@react-native-vector-icons/feather').default;
         default:
             if (Object.prototype.hasOwnProperty.call(customIcons, type)) {

package/components/Icon/index.tsx

@@ -4,4 +4,4 @@ import IconDefault from './Icon';
 export const Icon = getRegisteredComponentWithFallback('Icon', IconDefault);
 
 export { registerCustomIconType } from './iconFactory';
-export type { IconPacks, IconProps, IconType } from './types';
+export type { CustomIconTypes, IconProps, IconType } from './types';

package/components/Icon/types.ts

@@ -1,10 +1,5 @@
 import type { ColorValue, TextProps } from 'react-native';
 
-export enum IconPacks {
-    MaterialCommunity = 'material-community',
-    Feather = 'feather',
-}
-
 export interface VectorIconProps extends TextProps {
     /**
      * Size of the icon, can also be passed as fontSize in the style object.
@@ -28,7 +23,23 @@ export interface VectorIconProps extends TextProps {
     color?: ColorValue | number | undefined;
 }
 
-export type IconType = `${IconPacks}`; // in TS 4.1+, we can do this to make enum values as a union type
+/**
+ * Interface for registering custom icon types.
+ * Users can extend this interface via declaration merging to add their own icon types.
+ *
+ * @example
+ * // In your app's type declarations (e.g., global.d.ts or a dedicated types file)
+ * declare module 'react-native-molecules' {
+ *   interface CustomIconTypes {
+ *     'my-custom-icons': true;
+ *     'another-icon-set': true;
+ *   }
+ * }
+ */
+
+export interface CustomIconTypes {}
+
+export type IconType = 'material-community' | 'feather' | keyof CustomIconTypes;
 
 export type IconProps = VectorIconProps & {
     type?: IconType;

package/components/IconButton/IconButton.tsx

@@ -1,24 +1,24 @@
-import color from 'color';
 import { forwardRef, memo, useMemo } from 'react';
 import {
     type GestureResponderEvent,
     type StyleProp,
     type TextStyle,
     type ViewProps,
-    type ViewStyle,
 } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
-import { Icon, type IconType } from '../Icon';
+import { Icon, type IconProps, type IconType } from '../Icon';
 import CrossFadeIcon from '../Icon/CrossFadeIcon';
 import { StateLayer } from '../StateLayer';
-import { Surface } from '../Surface';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import type { IconButtonVariant } from './types';
-import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
-
-const whiteSpace = 12;
+import type { IconButtonShape, IconButtonVariant, IconButtonWidth } from './types';
+import {
+    defaultStyles,
+    iconButtonConstants,
+    iconButtonDefaultProps,
+    iconButtonSizeToIconSizeMap,
+} from './utils';
 
 export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
     /**
@@ -29,6 +29,14 @@ export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
      * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
      */
     variant?: IconButtonVariant;
+    /**
+     * Container shape. Material 3 supports round and square icon buttons.
+     */
+    shape?: IconButtonShape;
+    /**
+     * Container width option. `default` maps to Material 3's uniform width.
+     */
+    width?: IconButtonWidth;
     /**
      * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
      */
@@ -63,14 +71,11 @@ export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
      */
     style?: StyleProp<TextStyle>;
     iconStyle?: StyleProp<TextStyle>;
+    iconProps?: Omit<IconProps, 'name' | 'type' | 'style' | 'color' | 'size'>;
     /**
      * color of the icon
      */
     color?: string;
-    /**
-     * Style of the innerContainer
-     */
-    innerContainerStyle?: ViewStyle;
     /**
      * Props for the state layer
      * */
@@ -82,20 +87,22 @@ const emptyObject = {};
 const IconButton = (
     {
         name,
-        size = 24,
+        size = iconButtonDefaultProps.size,
         color: _iconColor,
         type,
         accessibilityLabel,
         disabled = false,
         onPress,
         selected = false,
-        animated = false,
-        variant = 'default',
+        animated = iconButtonDefaultProps.animated,
+        variant = iconButtonDefaultProps.variant,
+        shape = iconButtonDefaultProps.shape,
+        width = iconButtonDefaultProps.width,
         style,
-        innerContainerStyle: innerContainerStyleProp = emptyObject,
         testID,
         stateLayerProps = emptyObject,
-        iconStyle,
+        iconStyle: iconStyleProp,
+        iconProps,
         ...rest
     }: Props,
     ref: any,
@@ -117,100 +124,93 @@ const IconButton = (
         variant: variant as any,
         // @ts-ignore // TODO - fix this
         state,
+        // @ts-ignore // TODO - fix this
         size: typeof size === 'string' && size ? size : undefined,
     });
 
     const {
         iconColor,
         iconSize,
-        rippleColor,
         containerStyle,
         accessibilityState,
-        innerContainerStyle,
         // accessibilityTraits,
         stateLayerStyle,
+        iconStyle,
     } = useMemo(() => {
         const iconSizeInNum =
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
-            (typeof size === 'number' && size ? (size as number) : undefined);
-
-        let _rippleColor: string | undefined;
-
-        try {
-            _rippleColor = color(_iconColor).alpha(0.12).rgb().string();
-        } catch (e) {
-            _rippleColor = undefined;
-        }
+            (typeof size === 'number' && size ? (size as number) : 24);
+        const containerHeight = Math.max(
+            iconButtonConstants.minContainerSize,
+            iconSizeInNum + iconButtonConstants.containerPadding,
+        );
+        const widthAdjustment =
+            width === 'narrow'
+                ? iconButtonConstants.narrowWidthAdjustment
+                : width === 'wide'
+                ? iconButtonConstants.wideWidthAdjustment
+                : 0;
+        const containerWidth = Math.max(iconSizeInNum, containerHeight + widthAdjustment);
+        const borderRadius =
+            shape === 'round' ? containerHeight / 2 : iconButtonConstants.squareCornerRadius;
 
         return {
             iconColor: _iconColor,
             iconSize: iconSizeInNum,
-            rippleColor: _rippleColor,
-            innerContainerStyle: [defaultStyles.innerContainer, innerContainerStyleProp],
             containerStyle: [
-                iconSizeInNum
-                    ? {
-                          width: iconSizeInNum + whiteSpace,
-                          height: iconSizeInNum + whiteSpace,
-                      }
-                    : {},
                 defaultStyles.root,
+                {
+                    width: containerWidth,
+                    height: containerHeight,
+                    borderRadius,
+                },
                 style,
             ],
+            iconStyle: [defaultStyles.icon, iconStyleProp],
             // accessibilityTraits: disabled ? ['button', 'disabled'] : 'button',
             accessibilityState: { disabled },
-            stateLayerStyle: [defaultStyles.stateLayer, stateLayerProps?.style],
+            stateLayerStyle: [defaultStyles.stateLayer, { borderRadius }, stateLayerProps?.style],
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        _iconColor,
-        disabled,
-        innerContainerStyleProp,
-        size,
-        stateLayerProps?.style,
-        style,
-        state,
-        variant,
-    ]);
+    }, [_iconColor, disabled, shape, size, stateLayerProps?.style, style, state, variant, width]);
 
     return (
-        <Surface style={containerStyle} elevation={0}>
-            <TouchableRipple
-                borderless
-                centered
-                onPress={onPress}
-                rippleColor={rippleColor}
-                accessibilityLabel={accessibilityLabel}
-                style={innerContainerStyle}
-                // accessibilityTraits={accessibilityTraits}
-                // accessibilityComponentType="button"
-                accessibilityRole="button"
-                accessibilityState={accessibilityState}
-                disabled={disabled}
-                hitSlop={
-                    // @ts-ignore
-                    TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
-                }
+        <TouchableRipple
+            borderless
+            centered={shape === 'round' && width === 'default'}
+            onPress={onPress}
+            rippleAlpha={0.12}
+            accessibilityLabel={accessibilityLabel}
+            style={containerStyle}
+            // accessibilityTraits={accessibilityTraits}
+            // accessibilityComponentType="button"
+            accessibilityRole="button"
+            accessibilityState={accessibilityState}
+            disabled={disabled}
+            hitSlop={
                 // @ts-ignore
-                ref={actionsRef}
-                testID={testID}
-                {...rest}>
-                <>
-                    <IconComponent
-                        color={iconColor}
-                        name={name}
-                        size={iconSize}
-                        type={type}
-                        style={iconStyle}
-                    />
-                    <StateLayer
-                        testID={testID ? `${testID}-stateLayer` : ''}
-                        {...stateLayerProps}
-                        style={stateLayerStyle}
-                    />
-                </>
-            </TouchableRipple>
-        </Surface>
+                TouchableRipple?.supported ? rippleSupportedHitSlop : rippleUnsupportedHitSlop
+            }
+            // @ts-ignore
+            ref={actionsRef}
+            testID={testID}
+            {...rest}>
+            <>
+                <IconComponent
+                    color={iconColor}
+                    name={name}
+                    size={iconSize}
+                    type={type}
+                    style={iconStyle}
+                    {...iconProps}
+                />
+                <StateLayer
+                    testID={testID ? `${testID}-stateLayer` : ''}
+                    {...stateLayerProps}
+                    style={stateLayerStyle}
+                />
+            </>
+        </TouchableRipple>
     );
 };
 

package/components/IconButton/index.tsx

@@ -4,4 +4,5 @@ import IconButtonDefault from './IconButton';
 export const IconButton = getRegisteredComponentWithFallback('IconButton', IconButtonDefault);
 
 export type { Props as IconButtonProps } from './IconButton';
+export type * from './types';
 export { defaultStyles } from './utils';

package/components/IconButton/types.ts

@@ -1 +1,11 @@
 export type IconButtonVariant = 'default' | 'outlined' | 'contained' | 'contained-tonal';
+export type IconButtonShape = 'round' | 'square';
+export type IconButtonWidth = 'narrow' | 'default' | 'wide';
+
+export type IconButtonDefaultProps = {
+    size: 'xs' | 'sm' | 'md' | 'lg' | number;
+    variant: IconButtonVariant;
+    shape: IconButtonShape;
+    width: IconButtonWidth;
+    animated: boolean;
+};