react-native-molecules 0.5.0-beta.10 → 0.5.0-beta.11

package/components/Checkbox/CheckboxBase.tsx

@@ -1,15 +1,6 @@
 import setColor from 'color';
-import {
-    forwardRef,
-    memo,
-    type PropsWithoutRef,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
-import { Animated, Platform, View, type ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
+import { forwardRef, memo, type PropsWithoutRef, useCallback, useMemo } from 'react';
+import { Platform, type ViewProps } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
@@ -44,9 +35,6 @@ const CheckboxAndroid = (
     }: Props,
     ref: any,
 ) => {
-    const { current: scaleAnim } = useRef<Animated.Value>(new Animated.Value(1));
-    const isFirstRendering = useRef<boolean>(true);
-
     const { actionsRef, hovered } = useActionState({ ref, actionsToListen: ['hover'] });
 
     const state = resolveStateVariant({
@@ -63,101 +51,20 @@ const CheckboxAndroid = (
         size,
     });
 
-    // const componentStyles = useComponentStyles('Checkbox', style, {
-    //     variant: 'android',
-    //     state: resolveStateVariant({
-    //         disabled,
-    //         checkedAndHovered: checked && !indeterminate && hovered,
-    //         checked: checked && !indeterminate,
-    //         hovered,
-    //     }),
-    //     size,
-    // });
-
-    const borderWidth = scaleAnim.interpolate({
-        inputRange: [0.8, 1],
-        outputRange: [7, 0],
-    });
-
-    const {
-        iconSize,
-        rippleColor,
-        scale,
-        animationDuration,
-        rippleContainerStyles,
-        filledContainerStyles,
-        animatedContainerStyles,
-        animatedFillStyles,
-        stateLayerStyle,
-        iconStyle,
-    } = useMemo(() => {
-        // const {
-        //     color: checkedColor,
-        //     uncheckedColor,
-        //     animationScale: _scale,
-        //     animationDuration: _animationDuration,
-        //     iconSize: _iconSize,
-        //     padding,
-        //     width,
-        //     height,
-        //     borderRadius,
-        //     ...checkboxStyles
-        //     // @ts-ignore
-        // } = styles.root;
-
-        const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
-
-        return {
-            iconStyle: [styles.icon, _color],
-            iconSize: iconSizeMap[size],
-            // TODO - fix this on web
-            rippleColor:
-                Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
-            checkboxStyle: [styles.root, style],
-            scale: 1,
-            animationDuration: 100,
-            rippleContainerStyles: [styles.root],
-            animatedContainerStyles: { transform: [{ scale: scaleAnim }] },
-            filledContainerStyles: [StyleSheet.absoluteFill, styles.fillContainer],
-            // for toggle animation // This needs to be computed because it's opinionated animation
-            animatedFillStyles: [
-                styles.animatedFill, // 4 because padding - border(which is 1px each side)
-                tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp, 'borderColor'),
-                { borderWidth },
-            ],
-            stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
-        };
-    }, [
-        borderWidth,
-        checked,
-        colorProp,
-        scaleAnim,
-        stateLayerProps?.style,
-        style,
-        uncheckedColorProp,
-        size,
-    ]);
-
-    useEffect(() => {
-        // Do not run animation on very first rendering
-        if (isFirstRendering.current) {
-            isFirstRendering.current = false;
-            return;
-        }
-
-        Animated.sequence([
-            Animated.timing(scaleAnim, {
-                toValue: 0.85,
-                duration: checked ? animationDuration * scale : 0,
-                useNativeDriver: false,
-            }),
-            Animated.timing(scaleAnim, {
-                toValue: 1,
-                duration: checked ? animationDuration * scale : animationDuration * scale * 1.75,
-                useNativeDriver: false,
-            }),
-        ]).start();
-    }, [checked, scaleAnim, scale, animationDuration]);
+    const { iconSize, rippleColor, rippleContainerStyles, stateLayerStyle, iconStyle } =
+        useMemo(() => {
+            const _color = tokenStylesParser.getColor(checked ? colorProp : uncheckedColorProp);
+
+            return {
+                iconStyle: [styles.icon, _color],
+                iconSize: iconSizeMap[size],
+                // TODO - fix this on web
+                rippleColor:
+                    Platform.OS === 'web' ? undefined : setColor(_color).fade(0.32).rgb().string(),
+                rippleContainerStyles: [styles.root, style],
+                stateLayerStyle: [styles.stateLayer, stateLayerProps?.style],
+            };
+        }, [checked, colorProp, uncheckedColorProp, size, style, stateLayerProps?.style]);
 
     const onChange = useCallback(() => {
         onChangeProp?.(!checked);
@@ -185,18 +92,13 @@ const CheckboxAndroid = (
             testID={testID}
             ref={actionsRef}>
             <>
-                <Animated.View style={animatedContainerStyles}>
-                    <Icon
-                        allowFontScaling={false}
-                        type="material-community"
-                        name={icon}
-                        size={iconSize}
-                        style={iconStyle}
-                    />
-                    <View style={filledContainerStyles}>
-                        <Animated.View style={animatedFillStyles} />
-                    </View>
-                </Animated.View>
+                <Icon
+                    allowFontScaling={false}
+                    type="material-community"
+                    name={icon}
+                    size={iconSize}
+                    style={iconStyle}
+                />
                 <StateLayer
                     testID={testID ? `${testID}-stateLayer` : ''}
                     {...stateLayerProps}
@@ -207,11 +109,4 @@ const CheckboxAndroid = (
     );
 };
 
-// const styles = StyleSheet.create({
-//     fillContainer: {
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//     },
-// });
-
 export default memo(forwardRef(CheckboxAndroid));

package/components/Checkbox/utils.ts

@@ -132,31 +132,6 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
             },
         ],
     },
-    fillContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    animatedFill: {
-        width: 24 / 2 + (PADDING - 2),
-        height: 24 / 2 + (PADDING - 2),
-
-        variants: {
-            size: {
-                sm: {
-                    width: iconSizeMap.sm / 2 + (PADDING - 2),
-                    height: iconSizeMap.sm / 2 + (PADDING - 2),
-                },
-                md: {
-                    width: iconSizeMap.md / 2 + (PADDING - 2),
-                    height: iconSizeMap.md / 2 + (PADDING - 2),
-                },
-                lg: {
-                    width: iconSizeMap.lg / 2 + (PADDING - 2),
-                    height: iconSizeMap.lg / 2 + (PADDING - 2),
-                },
-            },
-        },
-    },
     icon: {
         color: theme.colors.onSurfaceVariant,
 

package/components/DatePickerInput/DatePickerInput.tsx

@@ -5,6 +5,7 @@ import { useLatest, useToggle } from '../../hooks';
 import { noop } from '../../utils/lodash';
 import { DatePickerDocked } from '../DatePickerDocked';
 import { IconButton } from '../IconButton';
+import { TextInput } from '../TextInput';
 import DatePickerInputModal from './DatePickerInputModal';
 import DatePickerInputWithoutModal from './DatePickerInputWithoutModal';
 import type { DatePickerInputProps } from './types';
@@ -125,8 +126,9 @@ function DatePickerInput(
             validRange={validRange}
             onChange={onChange}
             // locale={locale}
-            inputButtons={rightElement}
-        />
+        >
+            <TextInput.Right>{rightElement}</TextInput.Right>
+        </DatePickerInputWithoutModal>
     );
 }
 

package/components/DatePickerInput/DatePickerInputWithoutModal.tsx

@@ -7,13 +7,11 @@ import { datePickerInputStyles } from './utils';
 
 function DatePickerInputWithoutModal(
     {
-        label,
         value,
         onChange: onChangeProp,
         // locale = 'en',
         validRange,
         inputMode,
-        inputButtons,
         dateFormat = 'dd/MM/yyyy',
         style,
         onBlur: onBlurProp,
@@ -61,14 +59,12 @@ function DatePickerInputWithoutModal(
             onBlur={onBlur}
             onFocus={onFocus}
             ref={inputRef}
-            label={label}
             value={formattedValue}
             keyboardType={'number-pad'}
             mask={dateFormat}
             onChangeText={onChangeText}
             // keyboardAppearance={theme.dark ? 'dark' : 'default'}
             // error={formattedValue ? !!error : false}
-            right={inputButtons}
             // supportingText={formattedValue ? error || undefined : undefined}
         />
     );

package/components/DatePickerInput/types.ts

@@ -23,6 +23,4 @@ export interface DatePickerInputProps
     endYear?: number;
     dockedPopoverContentProps?: ViewProps;
 }
-export interface DatePickerInputWithoutModalProps extends Omit<DatePickerInputProps, 'withModal'> {
-    inputButtons?: any;
-}
+export interface DatePickerInputWithoutModalProps extends Omit<DatePickerInputProps, 'withModal'> {}

package/components/DatePickerModal/CalendarEdit.tsx

@@ -3,6 +3,7 @@ import { Keyboard, TextInput as TextInputNative, View } from 'react-native';
 
 import type { ModeType, ValidRangeType } from '../DatePickerInline';
 import DatePickerInputWithoutModal from '../DatePickerInput/DatePickerInputWithoutModal';
+import { TextInput } from '../TextInput';
 import type { LocalState, LocalStateRange, LocalStateSingle } from './types';
 import { datePickerModalEditStyles } from './utils';
 
@@ -91,14 +92,14 @@ Props) {
                     <DatePickerInputWithoutModal
                         inputMode="start"
                         ref={dateInput}
-                        label={label}
                         value={(state as LocalStateSingle).date}
                         onChange={onSingleInputChange}
                         onSubmitEditing={onSubmitInput}
                         validRange={validRange}
                         // locale={locale}
-                        autoComplete={'off'}
-                    />
+                        autoComplete={'off'}>
+                        <TextInput.Label>{label}</TextInput.Label>
+                    </DatePickerInputWithoutModal>
                 ) : null}
             </>
 
@@ -108,27 +109,27 @@ Props) {
                         <DatePickerInputWithoutModal
                             inputMode="start"
                             ref={startInput}
-                            label={startLabel}
                             value={(state as LocalStateRange).startDate}
                             onChange={onStartDateChange}
                             returnKeyType={'next'}
                             onSubmitEditing={onSubmitStartInput}
                             validRange={validRange}
                             // locale={locale}
-                            autoComplete={'off'}
-                        />
+                            autoComplete={'off'}>
+                            <TextInput.Label>{startLabel}</TextInput.Label>
+                        </DatePickerInputWithoutModal>
                         <View style={datePickerModalEditStyles.separator} />
                         <DatePickerInputWithoutModal
                             inputMode="end"
                             ref={endInput}
-                            label={endLabel}
                             value={(state as LocalStateRange).endDate}
                             onChange={onEndDateChange}
                             onSubmitEditing={onSubmitEndInput}
                             validRange={validRange}
                             // locale={locale}
-                            autoComplete="off"
-                        />
+                            autoComplete="off">
+                            <TextInput.Label>{endLabel}</TextInput.Label>
+                        </DatePickerInputWithoutModal>
                     </View>
                 ) : null}
             </>

package/components/FilePicker/FilePicker.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, memo, type ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 
+import useControlledValue from '../../hooks/useControlledValue';
 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';
 
@@ -10,6 +10,7 @@ export type OmitProp =
     | 'editable'
     | 'multiline'
     | 'onChangeText'
+    | 'onChange'
     | 'keyboardType'
     | 'defaultValue'
     | 'value'
@@ -24,12 +25,9 @@ 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 | DocumentResult[];
         /**
          * To Control the value
          */
@@ -37,32 +35,31 @@ export type Props = Omit<TextInputProps, OmitProp> &
         /**
          * 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 | 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 | DocumentResult[] | undefined
+    >({
+        value: valueProp,
+        defaultValue,
+        onChange,
+    });
 
     const { openFilePicker } = useFilePicker({
         type,
@@ -74,60 +71,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;
+        if (Array.isArray(value)) {
+            if (value.length > 1) {
+                return `${value.length} files`;
             }
+            return value[0]?.name || '';
+        }
 
-            setDisplayText(response?.name || '');
-        },
-        [],
-    );
+        return value.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]);
-
-    // if the value changes, we only want file name or the length of the array to display the text
-    useEffect(() => {
-        onSetInputValue(value);
-    }, [onSetInputValue, value]);
+    }, [onValueChange, openFilePicker]);
 
     return (
-        <TextInput
-            label="Choose file"
-            {...rest}
-            value={displayText}
-            editable={false}
-            right={rightElement}
-            ref={ref}
-        />
+        <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>
     );
 };
 
-export default memo(forwardRef(FilePicker));
+export default memo(FilePicker);

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',