| 1 | {"version":3,"sources":["Searchbar.tsx"],"names":["Searchbar","React","forwardRef","clearAccessibilityLabel","clearIcon","icon","iconColor","customIconColor","inputStyle","onIconPress","placeholder","searchAccessibilityLabel","style","theme","value","rest","ref","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","color","I18nManager","isRTL","primary","StyleSheet","create","flexDirection","alignItems","flex","fontSize","paddingLeft","alignSelf","textAlign","minWidth"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\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={[styles.input, { color: textColor, ...font }, inputStyle]}\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"]} |