1 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2 |
|
3 | import * as React from 'react';
|
4 | import { Platform, StyleSheet, TextInput, I18nManager } from 'react-native';
|
5 | import color from 'color';
|
6 | import IconButton from './IconButton';
|
7 | import Surface from './Surface';
|
8 | import { withTheme } from '../core/theming';
|
9 | import MaterialCommunityIcon from './MaterialCommunityIcon';
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 | const Searchbar = React.forwardRef((_ref, ref) => {
|
42 | let {
|
43 | clearAccessibilityLabel = 'clear',
|
44 | clearIcon,
|
45 | icon,
|
46 | iconColor: customIconColor,
|
47 | inputStyle,
|
48 | onIconPress,
|
49 | placeholder,
|
50 | searchAccessibilityLabel = 'search',
|
51 | style,
|
52 | theme,
|
53 | value,
|
54 | ...rest
|
55 | } = _ref;
|
56 | const root = React.useRef(null);
|
57 | React.useImperativeHandle(ref, () => {
|
58 | const input = root.current;
|
59 |
|
60 | if (input) {
|
61 | return {
|
62 | focus: () => input.focus(),
|
63 | clear: () => input.clear(),
|
64 | setNativeProps: args => input.setNativeProps(args),
|
65 | isFocused: () => input.isFocused(),
|
66 | blur: () => input.blur()
|
67 | };
|
68 | }
|
69 |
|
70 | const noop = () => {
|
71 | throw new Error('TextInput is not available');
|
72 | };
|
73 |
|
74 | return {
|
75 | focus: noop,
|
76 | clear: noop,
|
77 | setNativeProps: noop,
|
78 | isFocused: noop,
|
79 | blur: noop
|
80 | };
|
81 | });
|
82 |
|
83 | const handleClearPress = () => {
|
84 | var _root$current, _rest$onChangeText;
|
85 |
|
86 | (_root$current = root.current) === null || _root$current === void 0 ? void 0 : _root$current.clear();
|
87 | (_rest$onChangeText = rest.onChangeText) === null || _rest$onChangeText === void 0 ? void 0 : _rest$onChangeText.call(rest, '');
|
88 | };
|
89 |
|
90 | const {
|
91 | colors,
|
92 | roundness,
|
93 | dark,
|
94 | fonts
|
95 | } = theme;
|
96 | const textColor = colors.text;
|
97 | const font = fonts.regular;
|
98 | const iconColor = customIconColor || (dark ? textColor : color(textColor).alpha(0.54).rgb().string());
|
99 | const rippleColor = color(textColor).alpha(0.32).rgb().string();
|
100 | return React.createElement(Surface, {
|
101 | style: [{
|
102 | borderRadius: roundness,
|
103 | elevation: 4
|
104 | }, styles.container, style]
|
105 | }, React.createElement(IconButton
|
106 | , {
|
107 | accessibilityTraits: "button",
|
108 | accessibilityComponentType: "button",
|
109 | accessibilityRole: "button",
|
110 | borderless: true,
|
111 | rippleColor: rippleColor,
|
112 | onPress: onIconPress,
|
113 | color: iconColor,
|
114 | icon: icon || (_ref2 => {
|
115 | let {
|
116 | size,
|
117 | color
|
118 | } = _ref2;
|
119 | return React.createElement(MaterialCommunityIcon, {
|
120 | name: "magnify",
|
121 | color: color,
|
122 | size: size,
|
123 | direction: I18nManager.isRTL ? 'rtl' : 'ltr'
|
124 | });
|
125 | }),
|
126 | accessibilityLabel: searchAccessibilityLabel
|
127 | }), React.createElement(TextInput, _extends({
|
128 | style: [styles.input, {
|
129 | color: textColor,
|
130 | ...font,
|
131 | ...Platform.select({
|
132 | web: {
|
133 | outline: 'none'
|
134 | }
|
135 | })
|
136 | }, inputStyle],
|
137 | placeholder: placeholder || '',
|
138 | placeholderTextColor: colors.placeholder,
|
139 | selectionColor: colors.primary,
|
140 | underlineColorAndroid: "transparent",
|
141 | returnKeyType: "search",
|
142 | keyboardAppearance: dark ? 'dark' : 'light'
|
143 | ,
|
144 | accessibilityTraits: "search",
|
145 | accessibilityRole: "search",
|
146 | ref: root,
|
147 | value: value
|
148 | }, rest)), React.createElement(IconButton, {
|
149 | borderless: true,
|
150 | disabled: !value,
|
151 | accessibilityLabel: clearAccessibilityLabel,
|
152 | color: value ? iconColor : 'rgba(255, 255, 255, 0)',
|
153 | rippleColor: rippleColor,
|
154 | onPress: handleClearPress,
|
155 | icon: clearIcon || (_ref3 => {
|
156 | let {
|
157 | size,
|
158 | color
|
159 | } = _ref3;
|
160 | return React.createElement(MaterialCommunityIcon, {
|
161 | name: "close",
|
162 | color: color,
|
163 | size: size,
|
164 | direction: I18nManager.isRTL ? 'rtl' : 'ltr'
|
165 | });
|
166 | })
|
167 | ,
|
168 | accessibilityTraits: "button",
|
169 | accessibilityComponentType: "button",
|
170 | accessibilityRole: "button"
|
171 | }));
|
172 | });
|
173 | const styles = StyleSheet.create({
|
174 | container: {
|
175 | flexDirection: 'row',
|
176 | alignItems: 'center'
|
177 | },
|
178 | input: {
|
179 | flex: 1,
|
180 | fontSize: 18,
|
181 | paddingLeft: 8,
|
182 | alignSelf: 'stretch',
|
183 | textAlign: I18nManager.isRTL ? 'right' : 'left',
|
184 | minWidth: 0
|
185 | }
|
186 | });
|
187 | export default withTheme(Searchbar);
|
188 |
|
\ | No newline at end of file |