@fountain-ui/core 3.0.0-alpha.1 → 3.0.0-alpha.11

package/build/module/TextField/InputLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","Animated","StyleSheet","createFontStyle","useTheme","usePaperStyles","inputPaddingHorizontal","useStyles","background","position","top","left","bottom","right","width","height","backgroundText","paddingHorizontal","color","placeholder","InputLabel","props","activeColor","animatedError","animatedLabel","error","errorColor","focused","fontSize","hasActiveOutline","label","labelLayout","labelScale","labelTranslateX","labelTranslateY","onLayoutAnimatedText","paddingOffset","placeholderColor","placeholderOpacity","topPosition","value","theme","styles","paperStyles","backgroundStyle","backgroundColor","palette","default","hasFocus","opacity","interpolate","inputRange","outputRange","labelTranslationX","transform","translateX","labelTextFontStyle","selector","typo","caption2","labelStyle","translateY","scale","absoluteFill","measured","scaleY","textAlign"],"sources":["InputLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';\nimport { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';\nimport { createFontStyle, useTheme } from '../styles';\nimport usePaperStyles from '../Paper/usePaperStyles';\nimport { inputPaddingHorizontal } from './utils';\n\ninterface LabelProps {\n    activeColor: string;\n    animatedError: Animated.Value;\n    animatedLabel: Animated.Value;\n    error?: boolean;\n    errorColor?: string;\n    focused?: boolean;\n    fontSize?: number;\n    hasActiveOutline?: boolean;\n    label?: string;\n    labelLayout: { measured: boolean; width: number; height: number };\n    labelScale: number;\n    labelTranslateX: number;\n    labelTranslateY: number;\n    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;\n    paddingOffset?: { paddingLeft: number; paddingRight: number };\n    placeholder?: string;\n    placeholderColor?: string;\n    placeholderOpacity: number | Animated.AnimatedInterpolation;\n    topPosition: number;\n    value?: string;\n}\n\ntype InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;\n\nconst useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {\n    return {\n        background: {\n            position: 'absolute',\n            top: 6,\n            left: 10,\n            bottom: 0,\n            right: 0,\n            width: 8,\n            height: 4,\n        },\n        backgroundText: {\n            position: 'absolute',\n            left: 18,\n            paddingHorizontal: 0,\n            color: 'transparent',\n        },\n        placeholder: {\n            position: 'absolute',\n            left: 0,\n            paddingHorizontal: inputPaddingHorizontal,\n        },\n    };\n};\n\nconst InputLabel = (props: LabelProps) => {\n    const {\n        activeColor,\n        animatedError,\n        animatedLabel,\n        error = false,\n        errorColor,\n        focused,\n        fontSize,\n        hasActiveOutline,\n        label,\n        labelLayout,\n        labelScale,\n        labelTranslateX,\n        labelTranslateY,\n        onLayoutAnimatedText,\n        paddingOffset,\n        placeholderColor,\n        placeholderOpacity,\n        topPosition,\n        value,\n    } = props;\n\n    const theme = useTheme();\n\n    const styles = useStyles();\n\n    const paperStyles = usePaperStyles();\n\n    const backgroundStyle = {\n        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,\n    };\n\n    const hasFocus = hasActiveOutline || value;\n    const opacity = animatedLabel.interpolate({\n        inputRange: [0, 1],\n        outputRange: [hasFocus ? 1 : 0, 0],\n    });\n\n    const labelTranslationX = {\n        transform: [\n            {\n                translateX: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateX, 0 || 0],\n                }),\n            },\n        ],\n    };\n\n    const labelTextFontStyle = createFontStyle(theme, { selector: (typo) => typo.caption2 });\n\n    const labelStyle = {\n        fontSize,\n        transform: [\n            {\n                translateX: animatedError.interpolate({\n                    inputRange: [0, 0.5, 1],\n                    outputRange: [0, value && error ? 4 : 0, 0],\n                }),\n            },\n            {\n                translateY: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelTranslateY, 0],\n                }),\n            },\n            {\n                scale: animatedLabel.interpolate({\n                    inputRange: [0, 1],\n                    outputRange: [labelScale, 1],\n                }),\n            },\n        ],\n    };\n\n    return (label ? (\n        <Animated.View\n            pointerEvents={'none'}\n            style={[\n                StyleSheet.absoluteFill,\n                {\n                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,\n                },\n                labelTranslationX,\n            ]}\n        >\n            {[\n                <Animated.View\n                    key={'labelBackground-view'}\n                    pointerEvents={'none'}\n                    style={[\n                        styles.background,\n                        backgroundStyle,\n                        {\n                            opacity,\n                            transform: [\n                                {\n                                    translateX: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [-labelTranslateX, 0],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                />,\n                <Animated.Text\n                    key={'labelBackground-text'}\n                    style={[\n                        labelTextFontStyle,\n                        styles.placeholder,\n                        styles.backgroundText,\n                        backgroundStyle,\n                        labelStyle,\n                        {\n                            top: topPosition + 1,\n                            opacity,\n                            transform: [\n                                ...labelStyle.transform,\n                                {\n                                    scaleY: animatedLabel.interpolate({\n                                        inputRange: [0, 1],\n                                        outputRange: [0.2, 1],\n                                    }),\n                                },\n                            ],\n                        },\n                    ]}\n                    numberOfLines={1}\n                >\n                    {label}\n                </Animated.Text>,\n            ]}\n            <Animated.Text\n                onLayout={onLayoutAnimatedText}\n                style={[\n                    styles.placeholder,\n                    labelTextFontStyle,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : activeColor,\n                        opacity: animatedLabel.interpolate({\n                            inputRange: [0, 1],\n                            outputRange: [hasActiveOutline ? 1 : 0, 0],\n                        }),\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n            <Animated.Text\n                style={[\n                    styles.placeholder,\n                    labelTextFontStyle,\n                    labelStyle,\n                    paddingOffset,\n                    {\n                        textAlign: 'left',\n                        top: topPosition,\n                        color: error && errorColor ? errorColor : placeholderColor,\n                        opacity: placeholderOpacity,\n                    },\n                ]}\n                numberOfLines={1}\n            >\n                {label}\n            </Animated.Text>\n        </Animated.View>\n    ) : null);\n};\n\nexport default InputLabel;\n"],"mappings":"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"}

package/build/typescript/ButtonBase/LegacyButtonBase.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type ButtonBaseProps from './ButtonBaseProps';
-export declare const ORIGINAL_OPACITY = 1;
-export declare const DISABLED_OPACITY = 0.3;
-export default function ButtonBase(props: ButtonBaseProps): JSX.Element;

package/build/typescript/TextField/InputLabel.d.ts

@@ -1,33 +0,0 @@
-/// <reference types="react" />
-import { Animated, LayoutChangeEvent } from 'react-native';
-interface LabelProps {
-    activeColor: string;
-    animatedError: Animated.Value;
-    animatedLabel: Animated.Value;
-    error?: boolean;
-    errorColor?: string;
-    focused?: boolean;
-    fontSize?: number;
-    hasActiveOutline?: boolean;
-    label?: string;
-    labelLayout: {
-        measured: boolean;
-        width: number;
-        height: number;
-    };
-    labelScale: number;
-    labelTranslateX: number;
-    labelTranslateY: number;
-    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;
-    paddingOffset?: {
-        paddingLeft: number;
-        paddingRight: number;
-    };
-    placeholder?: string;
-    placeholderColor?: string;
-    placeholderOpacity: number | Animated.AnimatedInterpolation;
-    topPosition: number;
-    value?: string;
-}
-declare const InputLabel: (props: LabelProps) => JSX.Element | null;
-export default InputLabel;

package/src/ButtonBase/LegacyButtonBase.tsx

@@ -1,135 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { Animated } from 'react-native';
-import { useAnimatedValue, useThrottle } from '../hooks';
-import { isNotAndroid12 } from '../utils';
-import { AnimatedPressable } from '../animated';
-import type ButtonBaseProps from './ButtonBaseProps';
-
-interface StartPressAnimation {
-    (pressIn: boolean, isHover: boolean): void;
-}
-
-export const ORIGINAL_OPACITY = 1;
-export const DISABLED_OPACITY = .3;
-const ACTIVE_OPACITY = .65;
-
-const ORIGINAL_SCALE = 1;
-const MINIFIED_SCALE = .96;
-
-// at "node_modules/react-native/Libraries/Pressability.js"
-// const DEFAULT_MIN_PRESS_DURATION = 130;
-const SCALE_EFFECT_PRESS_IN_DELAY = 130;
-const OPACITY_EFFECT_PRESS_IN_DELAY = 0;
-
-type TimingAnimationValue = Animated.Value | Animated.ValueXY;
-type TimingAnimationToValue = Animated.TimingAnimationConfig['toValue'];
-
-const startTimingAnimationWithDefaults = (
-    value: TimingAnimationValue,
-    toValue: TimingAnimationToValue,
-) => {
-    Animated.timing(value, {
-        toValue,
-        duration: 150,
-        useNativeDriver: isNotAndroid12,
-    }).start();
-};
-
-const getOpacityByDisabled = (disabled: boolean) => disabled ? DISABLED_OPACITY : ORIGINAL_OPACITY;
-
-export default function ButtonBase(props: ButtonBaseProps) {
-    const {
-        children,
-        disabled = false,
-        disableThrottle = false,
-        onPress,
-        onPressOut,
-        pressEffect = 'opacity',
-        pressDelay: pressDelayOrNil,
-        style: styleProp,
-        throttleMillis = 650,
-        ...otherProps
-    } = props;
-
-    const handlePress = useThrottle({
-        periodMillis: disableThrottle ? 0 : throttleMillis,
-        callback: onPress,
-    });
-
-    const opacity = useAnimatedValue(getOpacityByDisabled(disabled));
-    const scale = useAnimatedValue(ORIGINAL_SCALE);
-
-    useEffect(() => {
-        opacity.setValue(getOpacityByDisabled(disabled));
-    }, [disabled, pressEffect]);
-
-    const startScaleAnimation = useCallback<StartPressAnimation>((pressIn, isHover) => {
-        if (!isHover) {
-            startTimingAnimationWithDefaults(
-                scale,
-                pressIn ? MINIFIED_SCALE : ORIGINAL_SCALE,
-            );
-        }
-    }, []);
-
-    const startOpacityAnimation = useCallback<StartPressAnimation>((pressIn) => {
-        if (pressIn) {
-            opacity.setValue(ACTIVE_OPACITY);
-        } else {
-            startTimingAnimationWithDefaults(opacity, ORIGINAL_OPACITY);
-        }
-    }, []);
-
-    const startPressAnimation = useCallback<StartPressAnimation>((pressIn, isHover = false) => {
-        if (pressEffect === 'scale') {
-            startScaleAnimation(pressIn, isHover);
-        } else if (pressEffect === 'opacity') {
-            startOpacityAnimation(pressIn, isHover);
-        }
-    }, [pressEffect]);
-
-    const handlePressIn = useCallback(() => {
-        startPressAnimation(true, false);
-    }, [startPressAnimation]);
-
-    const handlePressOut = useCallback(() => {
-        onPressOut && onPressOut();
-
-        startPressAnimation(false, false);
-    }, [startPressAnimation, onPressOut]);
-
-    const animatedStyle = {
-        opacity,
-        transform: [{ scale }],
-    };
-
-    const defaultPressDelay = pressEffect === 'scale'
-        ? SCALE_EFFECT_PRESS_IN_DELAY
-        : OPACITY_EFFECT_PRESS_IN_DELAY;
-    const pressDelay = pressDelayOrNil ?? defaultPressDelay;
-
-    return (
-        <AnimatedPressable
-            disabled={disabled}
-            onPress={handlePress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            style={[
-                animatedStyle,
-                styleProp,
-            ]}
-            unstable_pressDelay={pressDelay}
-            {...otherProps}
-        >
-            {typeof children !== 'function' ? (
-                ({ hovered }) => {
-                    if (hovered !== undefined && !disabled) {
-                        startPressAnimation(hovered, true);
-                    }
-
-                    return children;
-                }
-            ) : children}
-        </AnimatedPressable>
-    );
-};

package/src/TextField/InputLabel.tsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { Animated, LayoutChangeEvent, StyleSheet } from 'react-native';
-import { NamedStylesStringUnion, UseStyles } from '@fountain-ui/styles';
-import { createFontStyle, useTheme } from '../styles';
-import usePaperStyles from '../Paper/usePaperStyles';
-import { inputPaddingHorizontal } from './utils';
-
-interface LabelProps {
-    activeColor: string;
-    animatedError: Animated.Value;
-    animatedLabel: Animated.Value;
-    error?: boolean;
-    errorColor?: string;
-    focused?: boolean;
-    fontSize?: number;
-    hasActiveOutline?: boolean;
-    label?: string;
-    labelLayout: { measured: boolean; width: number; height: number };
-    labelScale: number;
-    labelTranslateX: number;
-    labelTranslateY: number;
-    onLayoutAnimatedText: (event: LayoutChangeEvent) => void;
-    paddingOffset?: { paddingLeft: number; paddingRight: number };
-    placeholder?: string;
-    placeholderColor?: string;
-    placeholderOpacity: number | Animated.AnimatedInterpolation;
-    topPosition: number;
-    value?: string;
-}
-
-type InputLabelStyles = NamedStylesStringUnion<'background' | 'backgroundText' | 'placeholder'>;
-
-const useStyles: UseStyles<InputLabelStyles> = function (): InputLabelStyles {
-    return {
-        background: {
-            position: 'absolute',
-            top: 6,
-            left: 10,
-            bottom: 0,
-            right: 0,
-            width: 8,
-            height: 4,
-        },
-        backgroundText: {
-            position: 'absolute',
-            left: 18,
-            paddingHorizontal: 0,
-            color: 'transparent',
-        },
-        placeholder: {
-            position: 'absolute',
-            left: 0,
-            paddingHorizontal: inputPaddingHorizontal,
-        },
-    };
-};
-
-const InputLabel = (props: LabelProps) => {
-    const {
-        activeColor,
-        animatedError,
-        animatedLabel,
-        error = false,
-        errorColor,
-        focused,
-        fontSize,
-        hasActiveOutline,
-        label,
-        labelLayout,
-        labelScale,
-        labelTranslateX,
-        labelTranslateY,
-        onLayoutAnimatedText,
-        paddingOffset,
-        placeholderColor,
-        placeholderOpacity,
-        topPosition,
-        value,
-    } = props;
-
-    const theme = useTheme();
-
-    const styles = useStyles();
-
-    const paperStyles = usePaperStyles();
-
-    const backgroundStyle = {
-        backgroundColor: paperStyles?.backgroundColor ?? theme.palette.background.default,
-    };
-
-    const hasFocus = hasActiveOutline || value;
-    const opacity = animatedLabel.interpolate({
-        inputRange: [0, 1],
-        outputRange: [hasFocus ? 1 : 0, 0],
-    });
-
-    const labelTranslationX = {
-        transform: [
-            {
-                translateX: animatedLabel.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [labelTranslateX, 0 || 0],
-                }),
-            },
-        ],
-    };
-
-    const labelTextFontStyle = createFontStyle(theme, { selector: (typo) => typo.caption2 });
-
-    const labelStyle = {
-        fontSize,
-        transform: [
-            {
-                translateX: animatedError.interpolate({
-                    inputRange: [0, 0.5, 1],
-                    outputRange: [0, value && error ? 4 : 0, 0],
-                }),
-            },
-            {
-                translateY: animatedLabel.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [labelTranslateY, 0],
-                }),
-            },
-            {
-                scale: animatedLabel.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [labelScale, 1],
-                }),
-            },
-        ],
-    };
-
-    return (label ? (
-        <Animated.View
-            pointerEvents={'none'}
-            style={[
-                StyleSheet.absoluteFill,
-                {
-                    opacity: value || focused ? (labelLayout.measured ? 1 : 0) : 1,
-                },
-                labelTranslationX,
-            ]}
-        >
-            {[
-                <Animated.View
-                    key={'labelBackground-view'}
-                    pointerEvents={'none'}
-                    style={[
-                        styles.background,
-                        backgroundStyle,
-                        {
-                            opacity,
-                            transform: [
-                                {
-                                    translateX: animatedLabel.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [-labelTranslateX, 0],
-                                    }),
-                                },
-                            ],
-                        },
-                    ]}
-                />,
-                <Animated.Text
-                    key={'labelBackground-text'}
-                    style={[
-                        labelTextFontStyle,
-                        styles.placeholder,
-                        styles.backgroundText,
-                        backgroundStyle,
-                        labelStyle,
-                        {
-                            top: topPosition + 1,
-                            opacity,
-                            transform: [
-                                ...labelStyle.transform,
-                                {
-                                    scaleY: animatedLabel.interpolate({
-                                        inputRange: [0, 1],
-                                        outputRange: [0.2, 1],
-                                    }),
-                                },
-                            ],
-                        },
-                    ]}
-                    numberOfLines={1}
-                >
-                    {label}
-                </Animated.Text>,
-            ]}
-            <Animated.Text
-                onLayout={onLayoutAnimatedText}
-                style={[
-                    styles.placeholder,
-                    labelTextFontStyle,
-                    labelStyle,
-                    paddingOffset,
-                    {
-                        textAlign: 'left',
-                        top: topPosition,
-                        color: error && errorColor ? errorColor : activeColor,
-                        opacity: animatedLabel.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: [hasActiveOutline ? 1 : 0, 0],
-                        }),
-                    },
-                ]}
-                numberOfLines={1}
-            >
-                {label}
-            </Animated.Text>
-            <Animated.Text
-                style={[
-                    styles.placeholder,
-                    labelTextFontStyle,
-                    labelStyle,
-                    paddingOffset,
-                    {
-                        textAlign: 'left',
-                        top: topPosition,
-                        color: error && errorColor ? errorColor : placeholderColor,
-                        opacity: placeholderOpacity,
-                    },
-                ]}
-                numberOfLines={1}
-            >
-                {label}
-            </Animated.Text>
-        </Animated.View>
-    ) : null);
-};
-
-export default InputLabel;