@bigbinary/neetoui-rn 0.0.180 → 0.0.181
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","onCancel","debounceDelay","showCancelButton"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onCancel=props.onCancel,onCancel=_props$onCancel===void 0?function(){}:_props$onCancel,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,_props$showCancelButt=props.showCancelButton,showCancelButton=_props$showCancelButt===void 0?true:_props$showCancelButt,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText,Number(debounceDelay));var searchAnimationController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.timing(
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SearchBar=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _styledSystem=require("styled-system");var _native=_interopRequireDefault(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _excluded=["placeholder","onChangeText","onCancel","debounceDelay","showCancelButton"];var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var TextInput=_native.default.TextInput(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.buttonStyle,_styledSystem.typography,_styledSystem.color);var SearchBar=function SearchBar(props){var _props$placeholder=props.placeholder,placeholder=_props$placeholder===void 0?"Search":_props$placeholder,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onCancel=props.onCancel,onCancel=_props$onCancel===void 0?function(){}:_props$onCancel,_props$debounceDelay=props.debounceDelay,debounceDelay=_props$debounceDelay===void 0?1000:_props$debounceDelay,_props$showCancelButt=props.showCancelButton,showCancelButton=_props$showCancelButt===void 0?true:_props$showCancelButt,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var inputRef=(0,_react.useRef)();var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var debouncedSearchTextValue=(0,_hooks.useDebounce)(searchText,Number(debounceDelay));var searchAnimationController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;var buttonOpacityController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.sequence([_reactNative.Animated.timing(buttonOpacityController,{toValue:val,duration:350,useNativeDriver:false}),_reactNative.Animated.timing(searchAnimationController,{toValue:val,duration:200,useNativeDriver:false})]).start();};var cancelButtonWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:[0,60]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center",flex:1},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:5}}),_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles,{flex:1}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:108,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-search-line",size:20,color:_theme.theme.colors.font.grey600,__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:11}})),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:searchText,onChangeText:setSearchText,onFocus:function onFocus(){animateSearchInput(1);},onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},placeholder:placeholder,fontSize:16,flex:1,placeholderTextColor:_theme.theme.colors.font.grey600,color:"font.primary",autoCapitalize:"none",returnKeyType:"search"},rest.searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:115,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{opacity:buttonOpacityController,width:cancelButtonWidth,alignItems:"flex-end"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:7}},showCancelButton&&_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,labelStyle:{mx:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:143,columnNumber:11}})));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({inputContainerStyles:{height:42,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"}});SearchBar.propTypes={placeholder:_propTypes.default.string,onChangeText:_propTypes.default.func.isRequired,debounceDelay:_propTypes.default.oneOfType([_propTypes.default.number,_propTypes.default.string]),searchbarProps:_propTypes.default.object,onCancel:_propTypes.default.func,showCancelButton:_propTypes.default.bool};
|
package/package.json
CHANGED
|
@@ -4,7 +4,6 @@ import {
|
|
|
4
4
|
FlatList,
|
|
5
5
|
Keyboard,
|
|
6
6
|
ActivityIndicator,
|
|
7
|
-
Platform,
|
|
8
7
|
} from "react-native";
|
|
9
8
|
import PropTypes from "prop-types";
|
|
10
9
|
import Modal from "react-native-modal";
|
|
@@ -170,7 +169,7 @@ export const BottomSheet = ({
|
|
|
170
169
|
};
|
|
171
170
|
|
|
172
171
|
const contentContainerStyle = {
|
|
173
|
-
paddingBottom:
|
|
172
|
+
paddingBottom: 50,
|
|
174
173
|
};
|
|
175
174
|
|
|
176
175
|
return (
|
|
@@ -59,22 +59,30 @@ export const SearchBar = props => {
|
|
|
59
59
|
Number(debounceDelay)
|
|
60
60
|
);
|
|
61
61
|
const searchAnimationController = useRef(new Animated.Value(0)).current;
|
|
62
|
+
const buttonOpacityController = useRef(new Animated.Value(0)).current;
|
|
62
63
|
|
|
63
64
|
useEffect(() => {
|
|
64
65
|
onChangeText(debouncedSearchTextValue);
|
|
65
66
|
}, [debouncedSearchTextValue, onChangeText]);
|
|
66
67
|
|
|
67
68
|
const animateSearchInput = val => {
|
|
68
|
-
Animated.
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
Animated.sequence([
|
|
70
|
+
Animated.timing(buttonOpacityController, {
|
|
71
|
+
toValue: val,
|
|
72
|
+
duration: 350,
|
|
73
|
+
useNativeDriver: false,
|
|
74
|
+
}),
|
|
75
|
+
Animated.timing(searchAnimationController, {
|
|
76
|
+
toValue: val,
|
|
77
|
+
duration: 200,
|
|
78
|
+
useNativeDriver: false,
|
|
79
|
+
}),
|
|
80
|
+
]).start();
|
|
73
81
|
};
|
|
74
82
|
|
|
75
|
-
const
|
|
83
|
+
const cancelButtonWidth = searchAnimationController.interpolate({
|
|
76
84
|
inputRange: [0, 1],
|
|
77
|
-
outputRange: [
|
|
85
|
+
outputRange: [0, 60],
|
|
78
86
|
});
|
|
79
87
|
|
|
80
88
|
const onCancelHandle = () => {
|
|
@@ -85,11 +93,16 @@ export const SearchBar = props => {
|
|
|
85
93
|
};
|
|
86
94
|
|
|
87
95
|
return (
|
|
88
|
-
<Container
|
|
96
|
+
<Container
|
|
97
|
+
flexDirection="row"
|
|
98
|
+
alignItems="center"
|
|
99
|
+
flex={1}
|
|
100
|
+
{...rest.containerProps}
|
|
101
|
+
>
|
|
89
102
|
<Animated.View
|
|
90
103
|
style={{
|
|
91
104
|
...styles.inputContainerStyles,
|
|
92
|
-
|
|
105
|
+
flex: 1,
|
|
93
106
|
}}
|
|
94
107
|
>
|
|
95
108
|
<Container px={10}>
|
|
@@ -121,12 +134,18 @@ export const SearchBar = props => {
|
|
|
121
134
|
</Animated.View>
|
|
122
135
|
<Animated.View
|
|
123
136
|
style={{
|
|
124
|
-
|
|
125
|
-
|
|
137
|
+
opacity: buttonOpacityController,
|
|
138
|
+
width: cancelButtonWidth,
|
|
139
|
+
alignItems: "flex-end",
|
|
126
140
|
}}
|
|
127
141
|
>
|
|
128
142
|
{showCancelButton && (
|
|
129
|
-
<Button
|
|
143
|
+
<Button
|
|
144
|
+
variant="text"
|
|
145
|
+
label="Cancel"
|
|
146
|
+
onPress={onCancelHandle}
|
|
147
|
+
labelStyle={{ mx: 0 }}
|
|
148
|
+
/>
|
|
130
149
|
)}
|
|
131
150
|
</Animated.View>
|
|
132
151
|
</Container>
|