sapo-components-ui-rn 1.0.81 → 1.0.83

package/dist/components/SearchInput/index.d.ts

@@ -13,6 +13,7 @@ interface SearchInputProps {
     onBlur?: () => void;
     onChangeText?: (text: string) => void;
     height?: number;
+    debounceTime?: number;
 }
-declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, }: SearchInputProps) => React.JSX.Element;
+declare const SearchInput: ({ value, disabled, rightIcon, clearButton, placeholder, onFocus, onBlur, onChangeText, style, height, debounceTime, }: SearchInputProps) => React.JSX.Element;
 export default SearchInput;

package/dist/index.esm.js

@@ -9,6 +9,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Svg, { Rect, Path, Circle } from 'react-native-svg';
 import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
+import { useDebouncedCallback } from 'use-debounce';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -6324,7 +6325,8 @@ var Button = function (_a) {
                 React__default.createElement(Spacer, { width: left ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 }),
                 !isLoading && left,
                 left && React__default.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
-                isLoading ? (React__default.createElement(ActivityIndicator, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || renderTextColor() })) : (React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || renderTextColor(), size: size, bold: bold, medium: medium, style: [disabled && disabledTextStyle, textStyle] }, textProps), title)),
+                isLoading ? (React__default.createElement(ActivityIndicator, { color: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.color) || renderTextColor() })) : (React__default.createElement(View, { full: true },
+                    React__default.createElement(Text$1, __assign({ numberOfLines: 1, color: textColor || renderTextColor(), size: size, bold: bold, medium: medium, style: [disabled && disabledTextStyle, textStyle] }, textProps), title))),
                 right && React__default.createElement(Spacer, { width: CONSTANTS.SPACE_8 }),
                 !isLoading && right,
                 React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))));
@@ -7005,11 +7007,14 @@ var styles$2 = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
 var index$1 = React__default.memo(SelectionField);
 
 var SearchInput = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rightIcon = _a.rightIcon, _d = _a.clearButton, clearButton = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Tìm kiếm" : _e, onFocus = _a.onFocus, onBlur = _a.onBlur, onChangeText = _a.onChangeText, style = _a.style, height = _a.height;
+    var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rightIcon = _a.rightIcon, _d = _a.clearButton, clearButton = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Tìm kiếm" : _e, onFocus = _a.onFocus, onBlur = _a.onBlur, onChangeText = _a.onChangeText, style = _a.style, height = _a.height, _f = _a.debounceTime, debounceTime = _f === void 0 ? 500 : _f;
     var theme = useInternalTheme();
     var colors = theme.colors;
+    var debouncedOnChangeText = useDebouncedCallback(function (text) {
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
+    }, debounceTime);
     return (React__default.createElement(TextInput, { left: React__default.createElement(View, null,
-            React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: onChangeText, style: [
+            React__default.createElement(Icon$1, { name: "IconSearch", type: "Svg", size: 18 })), disabled: disabled, value: value, clearButton: clearButton, mode: "default", label: placeholder, placeholder: placeholder, right: rightIcon, onFocus: onFocus, onBlur: onBlur, allowFontScaling: false, onChangeText: debouncedOnChangeText, style: [
             {
                 height: height || 36,
             },