| 1 | {"version":3,"sources":["Searchbar.tsx"],"names":["React","Platform","StyleSheet","TextInput","I18nManager","color","IconButton","Surface","withTheme","MaterialCommunityIcon","Searchbar","forwardRef","ref","clearAccessibilityLabel","clearIcon","icon","iconColor","customIconColor","inputStyle","onIconPress","placeholder","searchAccessibilityLabel","style","theme","value","rest","root","useRef","useImperativeHandle","input","current","focus","clear","setNativeProps","args","isFocused","blur","noop","Error","handleClearPress","onChangeText","colors","roundness","dark","fonts","textColor","text","font","regular","alpha","rgb","string","rippleColor","borderRadius","elevation","styles","container","size","isRTL","select","web","outline","primary","create","flexDirection","alignItems","flex","fontSize","paddingLeft","alignSelf","textAlign","minWidth"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n Platform,\n StyleSheet,\n StyleProp,\n TextInput,\n I18nManager,\n TextInputProps,\n ViewStyle,\n TextStyle,\n} from 'react-native';\n\nimport color from 'color';\nimport IconButton from './IconButton';\nimport Surface from './Surface';\nimport { withTheme } from '../core/theming';\nimport type { IconSource } from './Icon';\nimport MaterialCommunityIcon from './MaterialCommunityIcon';\n\ntype Props = React.ComponentPropsWithRef<typeof TextInput> & {\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n clearAccessibilityLabel?: string;\n /**\n * Accessibility label for the button. This is read by the screen reader when the user taps the button.\n */\n searchAccessibilityLabel?: string;\n /**\n * Hint text shown when the input is empty.\n */\n placeholder?: string;\n /**\n * The value of the text input.\n */\n value: string;\n /**\n * Icon name for the left icon button (see `onIconPress`).\n */\n icon?: IconSource;\n /**\n * Callback that is called when the text input's text changes.\n */\n onChangeText?: (query: string) => void;\n /**\n * Callback to execute if we want the left icon to act as button.\n */\n onIconPress?: () => void;\n /**\n * Set style of the TextInput component inside the searchbar\n */\n inputStyle?: StyleProp<TextStyle>;\n style?: StyleProp<ViewStyle>;\n\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n /**\n * Custom color for icon, default will be derived from theme\n */\n iconColor?: string;\n /**\n * Custom icon for clear button, default will be icon close\n */\n clearIcon?: IconSource;\n};\n\ntype TextInputHandles = Pick<\n TextInput,\n 'setNativeProps' | 'isFocused' | 'clear' | 'blur' | 'focus'\n>;\n\n/**\n * Searchbar is a simple input box where users can type search queries.\n *\n * <div class=\"screenshots\">\n * <img class=\"medium\" src=\"screenshots/searchbar.png\" />\n * </div>\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { Searchbar } from 'react-native-paper';\n *\n * const MyComponent = () => {\n * const [searchQuery, setSearchQuery] = React.useState('');\n *\n * const onChangeSearch = query => setSearchQuery(query);\n *\n * return (\n * <Searchbar\n * placeholder=\"Search\"\n * onChangeText={onChangeSearch}\n * value={searchQuery}\n * />\n * );\n * };\n *\n * export default MyComponent;\n\n * ```\n */\nconst Searchbar = React.forwardRef<TextInputHandles, Props>(\n (\n {\n clearAccessibilityLabel = 'clear',\n clearIcon,\n icon,\n iconColor: customIconColor,\n inputStyle,\n onIconPress,\n placeholder,\n searchAccessibilityLabel = 'search',\n style,\n theme,\n value,\n ...rest\n }: Props,\n ref\n ) => {\n const root = React.useRef<TextInput>(null);\n\n React.useImperativeHandle(ref, () => {\n const input = root.current;\n\n if (input) {\n return {\n focus: () => input.focus(),\n clear: () => input.clear(),\n setNativeProps: (args: TextInputProps) => input.setNativeProps(args),\n isFocused: () => input.isFocused(),\n blur: () => input.blur(),\n };\n }\n\n const noop = () => {\n throw new Error('TextInput is not available');\n };\n\n return {\n focus: noop,\n clear: noop,\n setNativeProps: noop,\n isFocused: noop,\n blur: noop,\n };\n });\n\n const handleClearPress = () => {\n root.current?.clear();\n rest.onChangeText?.('');\n };\n\n const { colors, roundness, dark, fonts } = theme;\n const textColor = colors.text;\n const font = fonts.regular;\n const iconColor =\n customIconColor ||\n (dark ? textColor : color(textColor).alpha(0.54).rgb().string());\n const rippleColor = color(textColor).alpha(0.32).rgb().string();\n\n return (\n <Surface\n style={[\n { borderRadius: roundness, elevation: 4 },\n styles.container,\n style,\n ]}\n >\n <IconButton\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits=\"button\"\n accessibilityComponentType=\"button\"\n accessibilityRole=\"button\"\n borderless\n rippleColor={rippleColor}\n onPress={onIconPress}\n color={iconColor}\n icon={\n icon ||\n (({ size, color }) => (\n <MaterialCommunityIcon\n name=\"magnify\"\n color={color}\n size={size}\n direction={I18nManager.isRTL ? 'rtl' : 'ltr'}\n />\n ))\n }\n accessibilityLabel={searchAccessibilityLabel}\n />\n <TextInput\n style={[\n styles.input,\n {\n color: textColor,\n ...font,\n ...Platform.select({ web: { outline: 'none' } }),\n },\n inputStyle,\n ]}\n placeholder={placeholder || ''}\n placeholderTextColor={colors.placeholder}\n selectionColor={colors.primary}\n underlineColorAndroid=\"transparent\"\n returnKeyType=\"search\"\n keyboardAppearance={dark ? 'dark' : 'light'}\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits=\"search\"\n accessibilityRole=\"search\"\n ref={root}\n value={value}\n {...rest}\n />\n <IconButton\n borderless\n disabled={!value}\n accessibilityLabel={clearAccessibilityLabel}\n color={value ? iconColor : 'rgba(255, 255, 255, 0)'}\n rippleColor={rippleColor}\n onPress={handleClearPress}\n icon={\n clearIcon ||\n (({ size, color }) => (\n <MaterialCommunityIcon\n name=\"close\"\n color={color}\n size={size}\n direction={I18nManager.isRTL ? 'rtl' : 'ltr'}\n />\n ))\n }\n // @ts-expect-error We keep old a11y props for backwards compat with old RN versions\n accessibilityTraits=\"button\"\n accessibilityComponentType=\"button\"\n accessibilityRole=\"button\"\n />\n </Surface>\n );\n }\n);\n\nconst styles = StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n input: {\n flex: 1,\n fontSize: 18,\n paddingLeft: 8,\n alignSelf: 'stretch',\n textAlign: I18nManager.isRTL ? 'right' : 'left',\n minWidth: 0,\n },\n});\n\nexport default withTheme(Searchbar);\n"]} |