@oxyhq/services
Version:
176 lines (175 loc) • 5.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _AnimatedText = _interopRequireDefault(require("../../Typography/AnimatedText.js"));
var _helpers = require("../helpers.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const InputLabel = props => {
const {
labeled,
wiggle,
error,
focused,
opacity,
labelLayoutWidth,
labelLayoutHeight,
labelBackground,
label,
labelError,
onLayoutAnimatedText,
onLabelTextLayout,
hasActiveOutline,
activeColor,
placeholderStyle,
baseLabelTranslateX,
baseLabelTranslateY,
font,
fontSize,
lineHeight,
fontWeight,
placeholderOpacity,
wiggleOffsetX,
labelScale,
topPosition,
paddingLeft,
paddingRight,
backgroundColor,
roundness,
placeholderColor,
errorColor,
labelTranslationXOffset,
maxFontSizeMultiplier,
testID,
isV3,
inputContainerLayout,
scaledLabel
} = props;
const {
INPUT_PADDING_HORIZONTAL
} = (0, _helpers.getConstants)(isV3);
const {
width
} = (0, _reactNative.useWindowDimensions)();
const isWeb = _reactNative.Platform.OS === 'web';
const paddingOffset = paddingLeft && paddingRight ? {
paddingLeft,
paddingRight
} : {};
const labelTranslationX = {
transform: [{
// Offset label scale since RN doesn't support transform origin
translateX: labeled.interpolate({
inputRange: [0, 1],
outputRange: [baseLabelTranslateX, labelTranslationXOffset || 0]
})
}]
};
const labelStyle = {
...font,
fontSize,
lineHeight,
fontWeight,
opacity: labeled.interpolate({
inputRange: [0, 1],
outputRange: [hasActiveOutline ? 1 : 0, 0]
}),
transform: [{
// Wiggle the label when there's an error
translateX: wiggle ? error.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, wiggleOffsetX, 0]
}) : 0
}, {
// Move label to top
translateY: baseLabelTranslateY !== 0 ? labeled.interpolate({
inputRange: [0, 1],
outputRange: [baseLabelTranslateY, 0]
}) : 0
}, {
// Make label smaller
scale: labelScale !== 0 ? labeled.interpolate({
inputRange: [0, 1],
outputRange: [labelScale, 1]
}) : labeled
}]
};
const labelWidth = (inputContainerLayout.width + INPUT_PADDING_HORIZONTAL / 2) / (scaledLabel ? labelScale : 1);
const commonStyles = [placeholderStyle, {
top: topPosition
}, {
maxWidth: labelWidth
}, labelStyle, paddingOffset || {}];
const textColor = labelError && errorColor ? errorColor : placeholderColor;
return (
/*#__PURE__*/
// Position colored placeholder and gray placeholder on top of each other and crossfade them
// This gives the effect of animating the color, but allows us to use native driver
(0, _jsxRuntime.jsx)(_reactNative.View, {
pointerEvents: "none",
style: [_reactNative.StyleSheet.absoluteFill, styles.overflow, styles.labelContainer],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
pointerEvents: "none",
style: [_reactNative.StyleSheet.absoluteFill, !isWeb && {
width
}, {
opacity
}, labelTranslationX],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
width: labelWidth
},
children: [labelBackground?.({
labeled,
labelLayoutWidth,
labelLayoutHeight,
labelStyle,
placeholderStyle,
baseLabelTranslateX,
topPosition,
label,
backgroundColor,
roundness,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedText.default, {
variant: "bodySmall",
onLayout: onLayoutAnimatedText,
onTextLayout: onLabelTextLayout,
style: [commonStyles, {
color: activeColor
}],
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID: `${testID}-label-active`,
children: label
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimatedText.default, {
variant: focused ? 'bodyLarge' : 'bodySmall',
style: [commonStyles, {
color: textColor,
opacity: placeholderOpacity
}],
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID: `${testID}-label-inactive`,
children: label
})]
})
})
})
);
};
const styles = _reactNative.StyleSheet.create({
overflow: {
overflow: 'hidden'
},
labelContainer: {
zIndex: 3
}
});
var _default = exports.default = /*#__PURE__*/_react.default.memo(InputLabel);
//# sourceMappingURL=InputLabel.js.map