@oxyhq/services
Version:
78 lines (77 loc) • 2.13 kB
JavaScript
"use strict";
import * as React from 'react';
import { Animated, StyleSheet } from 'react-native';
import AnimatedText from "../../Typography/AnimatedText.js";
import { jsx as _jsx } from "react/jsx-runtime";
const LabelBackground = ({
labeled,
labelLayoutWidth,
labelLayoutHeight,
placeholderStyle,
baseLabelTranslateX,
topPosition,
backgroundColor,
roundness,
labelStyle,
maxFontSizeMultiplier,
testID
}) => {
const opacity = labeled.interpolate({
inputRange: [0, 0.6],
outputRange: [1, 0]
});
const labelTranslationX = {
translateX: labeled.interpolate({
inputRange: [0, 1],
outputRange: [-baseLabelTranslateX, 0]
})
};
const labelTextScaleY = {
scaleY: labeled.interpolate({
inputRange: [0, 1],
outputRange: [0.2, 1]
})
};
const labelTextTransform = [...labelStyle.transform, labelTextScaleY];
const isRounded = roundness > 6;
const roundedEdgeCover = isRounded ? /*#__PURE__*/_jsx(Animated.View, {
pointerEvents: "none",
style: [StyleSheet.absoluteFill, styles.view, {
backgroundColor,
maxHeight: Math.max(roundness / 3, 2),
bottom: Math.max(roundness, 2),
transform: [labelTranslationX],
opacity
}]
}, "labelBackground-view") : null;
return [roundedEdgeCover, /*#__PURE__*/_jsx(AnimatedText, {
testID: `${testID}-label-background`,
style: [placeholderStyle, labelStyle, styles.outlinedLabel, {
top: topPosition + 1,
width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
height: labelLayoutHeight,
backgroundColor,
opacity,
transform: labelTextTransform
}],
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier
}, "labelBackground-text")];
};
export default LabelBackground;
const styles = StyleSheet.create({
view: {
position: 'absolute',
top: 6,
left: 10,
width: 12
},
// eslint-disable-next-line react-native/no-color-literals
outlinedLabel: {
position: 'absolute',
left: 8,
paddingHorizontal: 0,
color: 'transparent'
}
});
//# sourceMappingURL=LabelBackground.js.map