@oxyhq/services
Version:
135 lines (131 loc) • 2.96 kB
JavaScript
"use strict";
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { getIconColor } from "./utils.js";
import { useInternalTheme } from "../../theming.js";
import IconButton from "../../IconButton/IconButton.js";
import { ICON_SIZE } from "../constants.js";
import { getConstants } from "../helpers.js";
import { jsx as _jsx } from "react/jsx-runtime";
const StyleContext = /*#__PURE__*/React.createContext({
style: {},
isTextInputFocused: false,
forceFocus: () => {},
testID: ''
});
const IconAdornment = ({
icon,
topPosition,
side,
isTextInputFocused,
forceFocus,
testID,
theme: themeOverrides,
disabled
}) => {
const {
isV3
} = useInternalTheme(themeOverrides);
const {
ICON_OFFSET
} = getConstants(isV3);
const style = {
top: topPosition,
[side]: ICON_OFFSET
};
const contextState = {
style,
isTextInputFocused,
forceFocus,
testID,
disabled
};
return /*#__PURE__*/_jsx(StyleContext.Provider, {
value: contextState,
children: icon
});
};
/**
* A component to render a leading / trailing icon in the TextInput
*
* ## Usage
* ```js
* import * as React from 'react';
* import { TextInput } from 'react-native-paper';
*
* const MyComponent = () => {
* const [text, setText] = React.useState('');
*
* return (
* <TextInput
* label="Password"
* secureTextEntry
* right={<TextInput.Icon icon="eye" />}
* />
* );
* };
*
* export default MyComponent;
* ```
*/
const TextFieldIcon = ({
icon,
onPress,
forceTextInputFocus = true,
color: customColor,
theme: themeOverrides,
rippleColor,
...rest
}) => {
const {
style,
isTextInputFocused,
forceFocus,
testID,
disabled
} = React.useContext(StyleContext);
const onPressWithFocusControl = React.useCallback(e => {
if (forceTextInputFocus && !isTextInputFocused) {
forceFocus();
}
onPress?.(e);
}, [forceTextInputFocus, forceFocus, isTextInputFocused, onPress]);
const theme = useInternalTheme(themeOverrides);
const iconColor = getIconColor({
theme,
disabled,
isTextInputFocused,
customColor
});
return /*#__PURE__*/_jsx(View, {
style: [styles.container, style],
children: /*#__PURE__*/_jsx(IconButton, {
icon: icon,
style: styles.iconButton,
size: ICON_SIZE,
onPress: onPressWithFocusControl,
iconColor: iconColor,
testID: testID,
theme: themeOverrides,
rippleColor: rippleColor,
...rest
})
});
};
TextFieldIcon.displayName = 'TextField.Icon';
const styles = StyleSheet.create({
container: {
position: 'absolute',
width: ICON_SIZE,
height: ICON_SIZE,
justifyContent: 'center',
alignItems: 'center'
},
iconButton: {
margin: 0
}
});
export default TextFieldIcon;
// @component-docs ignore-next-line
export { IconAdornment };
//# sourceMappingURL=TextFieldIcon.js.map