@bigbinary/neetoui-rn 0.0.184 → 0.0.185
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
|
|
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 buttonWidthController=(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(buttonWidthController,{toValue:val,duration:200,useNativeDriver:false})]).start();};var cancelButtonWidth=buttonWidthController.interpolate({inputRange:[0,1],outputRange:[0,60]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:42,flex:1,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:7}}),_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,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:108,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:114,columnNumber:9}}))),showCancelButton&&_react.default.createElement(_reactNative.Animated.View,{style:{opacity:buttonOpacityController,width:cancelButtonWidth,alignItems:"flex-end"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:9}},_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,labelStyle:{mx:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:11}})));};exports.SearchBar=SearchBar;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
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
|
2
|
-
import { Animated
|
|
2
|
+
import { Animated } from "react-native";
|
|
3
3
|
import {
|
|
4
4
|
flexbox,
|
|
5
5
|
space,
|
|
@@ -58,7 +58,7 @@ export const SearchBar = props => {
|
|
|
58
58
|
searchText,
|
|
59
59
|
Number(debounceDelay)
|
|
60
60
|
);
|
|
61
|
-
const
|
|
61
|
+
const buttonWidthController = useRef(new Animated.Value(0)).current;
|
|
62
62
|
const buttonOpacityController = useRef(new Animated.Value(0)).current;
|
|
63
63
|
|
|
64
64
|
useEffect(() => {
|
|
@@ -72,7 +72,7 @@ export const SearchBar = props => {
|
|
|
72
72
|
duration: 350,
|
|
73
73
|
useNativeDriver: false,
|
|
74
74
|
}),
|
|
75
|
-
Animated.timing(
|
|
75
|
+
Animated.timing(buttonWidthController, {
|
|
76
76
|
toValue: val,
|
|
77
77
|
duration: 200,
|
|
78
78
|
useNativeDriver: false,
|
|
@@ -80,7 +80,7 @@ export const SearchBar = props => {
|
|
|
80
80
|
]).start();
|
|
81
81
|
};
|
|
82
82
|
|
|
83
|
-
const cancelButtonWidth =
|
|
83
|
+
const cancelButtonWidth = buttonWidthController.interpolate({
|
|
84
84
|
inputRange: [0, 1],
|
|
85
85
|
outputRange: [0, 60],
|
|
86
86
|
});
|
|
@@ -93,11 +93,16 @@ export const SearchBar = props => {
|
|
|
93
93
|
};
|
|
94
94
|
|
|
95
95
|
return (
|
|
96
|
-
<Container flexDirection="row" alignItems="center"
|
|
97
|
-
<
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
96
|
+
<Container flexDirection="row" alignItems="center">
|
|
97
|
+
<Container
|
|
98
|
+
height={42}
|
|
99
|
+
flex={1}
|
|
100
|
+
borderWidth={1}
|
|
101
|
+
borderColor={theme.colors.border.grey400}
|
|
102
|
+
borderRadius={8}
|
|
103
|
+
flexDirection="row"
|
|
104
|
+
alignItems="center"
|
|
105
|
+
{...rest.containerProps}
|
|
101
106
|
>
|
|
102
107
|
<Container px={10}>
|
|
103
108
|
<Icon
|
|
@@ -125,39 +130,27 @@ export const SearchBar = props => {
|
|
|
125
130
|
returnKeyType="search"
|
|
126
131
|
{...rest.searchbarProps}
|
|
127
132
|
/>
|
|
128
|
-
</
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
133
|
+
</Container>
|
|
134
|
+
{showCancelButton && (
|
|
135
|
+
<Animated.View
|
|
136
|
+
style={{
|
|
137
|
+
opacity: buttonOpacityController,
|
|
138
|
+
width: cancelButtonWidth,
|
|
139
|
+
alignItems: "flex-end",
|
|
140
|
+
}}
|
|
141
|
+
>
|
|
137
142
|
<Button
|
|
138
143
|
variant="text"
|
|
139
144
|
label="Cancel"
|
|
140
145
|
onPress={onCancelHandle}
|
|
141
146
|
labelStyle={{ mx: 0 }}
|
|
142
147
|
/>
|
|
143
|
-
|
|
144
|
-
|
|
148
|
+
</Animated.View>
|
|
149
|
+
)}
|
|
145
150
|
</Container>
|
|
146
151
|
);
|
|
147
152
|
};
|
|
148
153
|
|
|
149
|
-
const styles = StyleSheet.create({
|
|
150
|
-
inputContainerStyles: {
|
|
151
|
-
height: 42,
|
|
152
|
-
flex: 1,
|
|
153
|
-
borderWidth: 1,
|
|
154
|
-
borderColor: theme.colors.border.grey400,
|
|
155
|
-
borderRadius: 8,
|
|
156
|
-
flexDirection: "row",
|
|
157
|
-
alignItems: "center",
|
|
158
|
-
},
|
|
159
|
-
});
|
|
160
|
-
|
|
161
154
|
SearchBar.propTypes = {
|
|
162
155
|
/**
|
|
163
156
|
* Set the placeholder text
|