@bigbinary/neetoui-rn 0.0.233 → 0.0.234
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 _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.jsx";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(_ref){var _ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?"Search":_ref$placeholder,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onCancel=_ref.onCancel,onCancel=_ref$onCancel===void 0?function(){}:_ref$onCancel,_ref$debounceDelay=_ref.debounceDelay,debounceDelay=_ref$debounceDelay===void 0?1000:_ref$debounceDelay,_ref$showCancelButton=_ref.showCancelButton,showCancelButton=_ref$showCancelButton===void 0?true:_ref$showCancelButton,containerProps=_ref.containerProps,searchbarProps=_ref.searchbarProps;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.trim(),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 _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=_interopRequireDefault(require("styled-components/native"));var _styledSystem=require("styled-system");var _=require("./");var _hooks=require("../hooks");var _theme=require("../theme");var _templateObject,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.jsx";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 _Dimensions$get=_reactNative.Dimensions.get("window"),screenWidth=_Dimensions$get.width;var buttonSize=(0,_reactNativeSizeMatters.moderateScale)(screenWidth*0.19);var SearchBar=function SearchBar(_ref){var _ref$placeholder=_ref.placeholder,placeholder=_ref$placeholder===void 0?"Search":_ref$placeholder,_ref$onChangeText=_ref.onChangeText,onChangeText=_ref$onChangeText===void 0?function(){}:_ref$onChangeText,_ref$onCancel=_ref.onCancel,onCancel=_ref$onCancel===void 0?function(){}:_ref$onCancel,_ref$debounceDelay=_ref.debounceDelay,debounceDelay=_ref$debounceDelay===void 0?1000:_ref$debounceDelay,_ref$showCancelButton=_ref.showCancelButton,showCancelButton=_ref$showCancelButton===void 0?true:_ref$showCancelButton,containerProps=_ref.containerProps,searchbarProps=_ref.searchbarProps;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.trim(),Number(debounceDelay));var buttonWidth=(0,_reactNativeReanimated.useSharedValue)(0);var buttonOpacity=(0,_reactNativeReanimated.useSharedValue)(0);(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){buttonWidth.value=(0,_reactNativeReanimated.withTiming)(val,{easing:_reactNativeReanimated.Easing.linear,duration:200});buttonOpacity.value=(0,_reactNativeReanimated.withTiming)(val,{easing:_reactNativeReanimated.Easing.linear,duration:100});};var cancelButtonStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{width:(0,_reactNativeReanimated.interpolate)(buttonWidth.value,[0,1],[0,buttonSize]),opacity:buttonOpacity.value};};_f._closure={interpolate:_reactNativeReanimated.interpolate,buttonWidth:buttonWidth,buttonSize:buttonSize,buttonOpacity:buttonOpacity};_f.asString="function _f(){const{interpolate,buttonWidth,buttonSize,buttonOpacity}=jsThis._closure;{return{width:interpolate(buttonWidth.value,[0,1],[0,buttonSize]),opacity:buttonOpacity.value};}}";_f.__workletHash=14021668969407;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SearchBar.jsx (96:45)";_f.__optimalization=3;return _f;}());var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{alignItems:"center",flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:5}},_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){var _inputRef$current;if(!(inputRef!=null&&(_inputRef$current=inputRef.current)!=null&&_inputRef$current.isFocused())){var _inputRef$current2;inputRef==null?void 0:(_inputRef$current2=inputRef.current)==null?void 0:_inputRef$current2.focus();}},__self:_this,__source:{fileName:_jsxFileName,lineNumber:110,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",borderColor:_theme.theme.colors.border.grey400,borderRadius:(0,_reactNativeSizeMatters.moderateScale)(8),borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),flex:1,flexDirection:"row",height:(0,_reactNativeSizeMatters.moderateScale)(42)},containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:9}}),_react.default.createElement(_.Container,{px:(0,_reactNativeSizeMatters.moderateScale)(8),__self:_this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{color:_theme.theme.colors.font.grey600,name:"ri-search-line",size:(0,_reactNativeSizeMatters.moderateScale)(20),__self:_this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:13}})),_react.default.createElement(TextInput,(0,_extends2.default)({autoCapitalize:"none",color:"font.primary",flex:1,fontSize:(0,_reactNativeSizeMatters.moderateScale)(16),padding:0,placeholder:placeholder,placeholderTextColor:_theme.theme.colors.font.grey600,ref:inputRef,returnKeyType:"search",value:searchText,onChangeText:setSearchText,onBlur:function onBlur(){if(!searchText)animateSearchInput(0);},onFocus:function onFocus(){animateSearchInput(1);}},searchbarProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:134,columnNumber:11}})))),showCancelButton&&_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.cancelButtonWrapper,cancelButtonStyle],__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:9}},_react.default.createElement(_.Touchable,{flexGrow:1,height:(0,_reactNativeSizeMatters.moderateScale)(42),justifyContent:"center",px:(0,_reactNativeSizeMatters.moderateScale)(8),onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:158,columnNumber:11}},_react.default.createElement(_.Typography,{fontFamily:_theme.theme.fonts.sf500,numberOfLines:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:13}},"Cancel"))));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({cancelButtonWrapper:{alignItems:"flex-end",justifyContent:"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,containerProps:_propTypes.default.object};
|
package/package.json
CHANGED
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Dimensions, TouchableWithoutFeedback, StyleSheet } from "react-native";
|
|
3
3
|
|
|
4
4
|
import PropTypes from "prop-types";
|
|
5
|
+
import Animated, {
|
|
6
|
+
Easing,
|
|
7
|
+
interpolate,
|
|
8
|
+
useAnimatedStyle,
|
|
9
|
+
useSharedValue,
|
|
10
|
+
withTiming,
|
|
11
|
+
} from "react-native-reanimated";
|
|
5
12
|
import Icon from "react-native-remix-icon";
|
|
6
13
|
import { moderateScale } from "react-native-size-matters";
|
|
7
14
|
import styled from "styled-components/native";
|
|
@@ -14,7 +21,7 @@ import {
|
|
|
14
21
|
color,
|
|
15
22
|
} from "styled-system";
|
|
16
23
|
|
|
17
|
-
import { Container,
|
|
24
|
+
import { Container, Touchable, Typography } from "@components";
|
|
18
25
|
import { useDebounce } from "@hooks";
|
|
19
26
|
import { theme } from "@theme";
|
|
20
27
|
|
|
@@ -49,6 +56,9 @@ const TextInput = styled.TextInput`
|
|
|
49
56
|
* ```
|
|
50
57
|
*/
|
|
51
58
|
|
|
59
|
+
const { width: screenWidth } = Dimensions.get("window");
|
|
60
|
+
const buttonSize = moderateScale(screenWidth * 0.19);
|
|
61
|
+
|
|
52
62
|
export const SearchBar = ({
|
|
53
63
|
placeholder = "Search",
|
|
54
64
|
onChangeText = () => {},
|
|
@@ -64,32 +74,29 @@ export const SearchBar = ({
|
|
|
64
74
|
searchText.trim(),
|
|
65
75
|
Number(debounceDelay)
|
|
66
76
|
);
|
|
67
|
-
const
|
|
68
|
-
const
|
|
77
|
+
const buttonWidth = useSharedValue(0);
|
|
78
|
+
const buttonOpacity = useSharedValue(0);
|
|
69
79
|
|
|
70
80
|
useEffect(() => {
|
|
71
81
|
onChangeText(debouncedSearchTextValue);
|
|
72
82
|
}, [debouncedSearchTextValue, onChangeText]);
|
|
73
83
|
|
|
74
84
|
const animateSearchInput = val => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
useNativeDriver: false,
|
|
85
|
-
}),
|
|
86
|
-
]).start();
|
|
85
|
+
buttonWidth.value = withTiming(val, {
|
|
86
|
+
easing: Easing.linear,
|
|
87
|
+
duration: 200,
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
buttonOpacity.value = withTiming(val, {
|
|
91
|
+
easing: Easing.linear,
|
|
92
|
+
duration: 100,
|
|
93
|
+
});
|
|
87
94
|
};
|
|
88
95
|
|
|
89
|
-
const
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
});
|
|
96
|
+
const cancelButtonStyle = useAnimatedStyle(() => ({
|
|
97
|
+
width: interpolate(buttonWidth.value, [0, 1], [0, buttonSize]),
|
|
98
|
+
opacity: buttonOpacity.value,
|
|
99
|
+
}));
|
|
93
100
|
|
|
94
101
|
const onCancelHandle = () => {
|
|
95
102
|
animateSearchInput(0);
|
|
@@ -117,7 +124,7 @@ export const SearchBar = ({
|
|
|
117
124
|
height={moderateScale(42)}
|
|
118
125
|
{...containerProps}
|
|
119
126
|
>
|
|
120
|
-
<Container px={moderateScale(
|
|
127
|
+
<Container px={moderateScale(8)}>
|
|
121
128
|
<Icon
|
|
122
129
|
color={theme.colors.font.grey600}
|
|
123
130
|
name="ri-search-line"
|
|
@@ -129,6 +136,7 @@ export const SearchBar = ({
|
|
|
129
136
|
color="font.primary"
|
|
130
137
|
flex={1}
|
|
131
138
|
fontSize={moderateScale(16)}
|
|
139
|
+
padding={0}
|
|
132
140
|
placeholder={placeholder}
|
|
133
141
|
placeholderTextColor={theme.colors.font.grey600}
|
|
134
142
|
ref={inputRef}
|
|
@@ -146,27 +154,31 @@ export const SearchBar = ({
|
|
|
146
154
|
</Container>
|
|
147
155
|
</TouchableWithoutFeedback>
|
|
148
156
|
{showCancelButton && (
|
|
149
|
-
<Animated.View
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}}
|
|
156
|
-
>
|
|
157
|
-
<Button
|
|
158
|
-
height={moderateScale(20)}
|
|
159
|
-
label="Cancel"
|
|
160
|
-
labelStyle={{ mx: 0 }}
|
|
161
|
-
variant="text"
|
|
157
|
+
<Animated.View style={[styles.cancelButtonWrapper, cancelButtonStyle]}>
|
|
158
|
+
<Touchable
|
|
159
|
+
flexGrow={1}
|
|
160
|
+
height={moderateScale(42)}
|
|
161
|
+
justifyContent="center"
|
|
162
|
+
px={moderateScale(8)}
|
|
162
163
|
onPress={onCancelHandle}
|
|
163
|
-
|
|
164
|
+
>
|
|
165
|
+
<Typography fontFamily={theme.fonts.sf500} numberOfLines={1}>
|
|
166
|
+
Cancel
|
|
167
|
+
</Typography>
|
|
168
|
+
</Touchable>
|
|
164
169
|
</Animated.View>
|
|
165
170
|
)}
|
|
166
171
|
</Container>
|
|
167
172
|
);
|
|
168
173
|
};
|
|
169
174
|
|
|
175
|
+
const styles = StyleSheet.create({
|
|
176
|
+
cancelButtonWrapper: {
|
|
177
|
+
alignItems: "flex-end",
|
|
178
|
+
justifyContent: "center",
|
|
179
|
+
},
|
|
180
|
+
});
|
|
181
|
+
|
|
170
182
|
SearchBar.propTypes = {
|
|
171
183
|
/**
|
|
172
184
|
* Set the placeholder text
|