@oxyhq/services
Version:
99 lines (96 loc) • 2.41 kB
JavaScript
;
import * as React from 'react';
import { Animated, StyleSheet } from 'react-native';
import { useThemeColors } from "../styles/index.js";
// Helper function for text color
import { jsx as _jsx } from "react/jsx-runtime";
const getTextColor = (colors, disabled, type) => {
if (type === 'error') {
return colors.error;
}
if (disabled) {
return colors.secondaryText + '80'; // Add opacity
}
return colors.secondaryText;
};
/**
* Helper text is used in conjunction with input elements to provide additional hints for the user.
*/
const HelperText = ({
style,
type = 'info',
visible = true,
theme: themeProp = 'light',
onLayout,
padding = 'normal',
disabled,
maxFontSizeMultiplier = 1.5,
...rest
}) => {
const colors = useThemeColors(themeProp);
const {
current: shown
} = React.useRef(new Animated.Value(visible ? 1 : 0));
let {
current: textHeight
} = React.useRef(0);
React.useEffect(() => {
if (visible) {
// show text
Animated.timing(shown, {
toValue: 1,
duration: 150,
useNativeDriver: true
}).start();
} else {
// hide text
Animated.timing(shown, {
toValue: 0,
duration: 180,
useNativeDriver: true
}).start();
}
}, [visible, shown]);
const handleTextLayout = e => {
onLayout?.(e);
textHeight = e.nativeEvent.layout.height;
};
// Get text color based on type and disabled state
const getTextColor = () => {
if (type === 'error') {
return colors.error;
}
if (disabled) {
return colors.secondaryText + '80'; // Add opacity
}
return colors.secondaryText;
};
const textColor = getTextColor();
return /*#__PURE__*/_jsx(Animated.Text, {
onLayout: handleTextLayout,
style: [styles.text, padding !== 'none' ? styles.padding : {}, {
color: textColor,
opacity: shown,
transform: visible && type === 'error' ? [{
translateY: shown.interpolate({
inputRange: [0, 1],
outputRange: [-textHeight / 2, 0]
})
}] : []
}, style],
maxFontSizeMultiplier: maxFontSizeMultiplier,
...rest,
children: rest.children
});
};
const styles = StyleSheet.create({
text: {
fontSize: 12,
paddingVertical: 4
},
padding: {
paddingHorizontal: 12
}
});
export default HelperText;
//# sourceMappingURL=HelperText.js.map