@bigbinary/neetoui-rn 0.0.137 → 0.0.138
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.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _theme=require("../theme");var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _excluded=["data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomSheet.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 Title=function Title(_ref){var title=_ref.title,bg=_ref.bg,isVisible=_ref.isVisible,hide=_ref.hide,titleContainerStyle=_ref.titleContainerStyle,titleTextStyle=_ref.titleTextStyle,contentType=_ref.contentType,canSearch=_ref.canSearch,setSearchText=_ref.setSearchText;var touchY;var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),isSearchBarOpen=_useState2[0],setSearchBarOpen=_useState2[1];(0,_react.useEffect)(function(){setSearchText("");},[isVisible,setSearchText]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,onTouchStart:function onTouchStart(e){return touchY=e.nativeEvent.pageY;},onTouchEnd:function onTouchEnd(e){if(e.nativeEvent.pageY-touchY>20)hide();},pb:12,borderRadius:20},titleContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}),canSearch&&isSearchBarOpen?null:_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:11}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:15}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:15}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple600",__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:17}},"Done")),canSearch&&!isSearchBarOpen&&_react.default.createElement(_.Touchable,{onPress:function onPress(){return setSearchBarOpen(true);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:15}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"search-line",color:_theme.theme.colors.background.grey700,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:17}}))),canSearch&&isSearchBarOpen&&_react.default.createElement(_.SearchBar,{placeholder:"Search",onChangeText:setSearchText,onCancel:function onCancel(){setSearchBarOpen(false);setSearchText("");},searchbarProps:{autoFocus:true},__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:11}})));};Title.propTypes={title:_propTypes.default.string,isVisible:_propTypes.default.boolean,hide:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool,setSearchText:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var _ref2$data=_ref2.data,data=_ref2$data===void 0?[]:_ref2$data,title=_ref2.title,hide=_ref2.hide,isVisible=_ref2.isVisible,onItemPress=_ref2.onItemPress,selectedItemIndex=_ref2.selectedItemIndex,bg=_ref2.bg,children=_ref2.children,titleContainerStyle=_ref2.titleContainerStyle,titleTextStyle=_ref2.titleTextStyle,modalParams=_ref2.modalParams,HeaderComponent=_ref2.HeaderComponent,ContentRow=_ref2.ContentRow,contentType=_ref2.contentType,canSearch=_ref2.canSearch,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchText=_useState4[0],setSearchText=_useState4[1];return _react.default.createElement(_reactNativeModal.default,(0,_extends2.default)({style:styles.modalStyle,isVisible:isVisible,onBackdropPress:hide,useNativeDriver:true,avoidKeyboard:true,hideModalContentWhileAnimating:true,onRequestClose:hide},modalParams,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:162,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:bg,borderTopRightRadius:20,borderTopLeftRadius:20,px:24,py:24},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,columnNumber:9}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:171,columnNumber:11}},title&&_react.default.createElement(Title,{bg:bg,title:title,isVisible:isVisible,hide:hide,titleContainerStyle:titleContainerStyle,titleTextStyle:titleTextStyle,HeaderComponent:HeaderComponent,contentType:contentType,canSearch:canSearch,searchText:searchText,setSearchText:setSearchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:173,columnNumber:15}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:children,initialNumToRender:data.length,onScrollBeginDrag:_reactNative.Keyboard.dismiss,data:searchText?data.filter(function(word){return word.includes(searchText);}):data,renderItem:function renderItem(_ref3){var item=_ref3.item,index=_ref3.index;return _react.default.createElement(ContentRow,{isSelected:index===selectedItemIndex,key:index,onPress:function onPress(){!contentType&&hide();onItemPress(index);},id:index,label:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:21}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:189,columnNumber:15}})))));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary"};BottomSheet.propTypes={data:_propTypes.default.array,title:_propTypes.default.string,isVisible:_propTypes.default.bool,hide:_propTypes.default.func,onItemPress:_propTypes.default.func,selectedItemIndex:_propTypes.default.number,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType.isRequired,contentType:_propTypes.default.oneOf(["checkbox",null]),canSearch:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({safeAreaView:{maxHeight:"70%",backgroundColor:_theme.theme.colors.background.primary,borderTopRightRadius:20,borderTopLeftRadius:20},modalStyle:{margin:0,justifyContent:"flex-end"},inputContainerStyle:{backgroundColor:"white",borderRadius:10}});
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
|
-
import { StyleSheet, FlatList } from "react-native";
|
|
2
|
+
import { StyleSheet, FlatList, Keyboard } from "react-native";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
|
-
import { Typography, Container, Touchable,
|
|
4
|
+
import { Typography, Container, Touchable, SearchBar } from "@components";
|
|
5
5
|
import Modal from "react-native-modal";
|
|
6
6
|
import Icon from "react-native-remix-icon";
|
|
7
7
|
import { theme } from "../theme";
|
|
8
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
8
9
|
|
|
9
10
|
const Title = ({
|
|
10
11
|
title,
|
|
@@ -15,7 +16,6 @@ const Title = ({
|
|
|
15
16
|
titleTextStyle,
|
|
16
17
|
contentType,
|
|
17
18
|
canSearch,
|
|
18
|
-
searchText,
|
|
19
19
|
setSearchText,
|
|
20
20
|
}) => {
|
|
21
21
|
let touchY;
|
|
@@ -38,60 +38,41 @@ const Title = ({
|
|
|
38
38
|
borderRadius={20}
|
|
39
39
|
{...titleContainerStyle}
|
|
40
40
|
>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
{
|
|
45
|
-
|
|
46
|
-
)}
|
|
47
|
-
{contentType && (
|
|
48
|
-
<Touchable onPress={hide}>
|
|
49
|
-
<Typography textStyle="modalHeader" color="font.purple500">
|
|
50
|
-
Done
|
|
41
|
+
{canSearch && isSearchBarOpen ? null : (
|
|
42
|
+
<Container flexDirection="row" justifyContent="space-between">
|
|
43
|
+
{title && (
|
|
44
|
+
<Typography textStyle="modalHeader" {...titleTextStyle}>
|
|
45
|
+
{title}
|
|
51
46
|
</Typography>
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
47
|
+
)}
|
|
48
|
+
{contentType && (
|
|
49
|
+
<Touchable onPress={hide}>
|
|
50
|
+
<Typography textStyle="modalHeader" color="font.purple600">
|
|
51
|
+
Done
|
|
52
|
+
</Typography>
|
|
53
|
+
</Touchable>
|
|
54
|
+
)}
|
|
55
|
+
{canSearch && !isSearchBarOpen && (
|
|
56
|
+
<Touchable onPress={() => setSearchBarOpen(true)}>
|
|
57
|
+
<Icon
|
|
58
|
+
name="search-line"
|
|
59
|
+
color={theme.colors.background.grey700}
|
|
60
|
+
/>
|
|
61
|
+
</Touchable>
|
|
62
|
+
)}
|
|
63
|
+
</Container>
|
|
64
|
+
)}
|
|
63
65
|
|
|
64
66
|
{canSearch && isSearchBarOpen && (
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<Icon
|
|
75
|
-
name="search-line"
|
|
76
|
-
size={20}
|
|
77
|
-
color={theme.colors.background.grey800}
|
|
78
|
-
/>
|
|
79
|
-
);
|
|
80
|
-
}}
|
|
81
|
-
/>
|
|
82
|
-
</Container>
|
|
83
|
-
|
|
84
|
-
<Touchable
|
|
85
|
-
onPress={() => {
|
|
86
|
-
setSearchText("");
|
|
87
|
-
setSearchBarOpen(false);
|
|
88
|
-
}}
|
|
89
|
-
>
|
|
90
|
-
<Typography fontSize="l" fontFamily="sf400" color="font.grey800">
|
|
91
|
-
Cancel
|
|
92
|
-
</Typography>
|
|
93
|
-
</Touchable>
|
|
94
|
-
</Container>
|
|
67
|
+
<SearchBar
|
|
68
|
+
placeholder="Search"
|
|
69
|
+
onChangeText={setSearchText}
|
|
70
|
+
onCancel={() => {
|
|
71
|
+
setSearchBarOpen(false);
|
|
72
|
+
setSearchText("");
|
|
73
|
+
}}
|
|
74
|
+
searchbarProps={{ autoFocus: true }}
|
|
75
|
+
/>
|
|
95
76
|
)}
|
|
96
77
|
</Container>
|
|
97
78
|
</>
|
|
@@ -107,7 +88,6 @@ Title.propTypes = {
|
|
|
107
88
|
titleTextStyle: PropTypes.object,
|
|
108
89
|
contentType: PropTypes.oneOf(["checkbox", null]),
|
|
109
90
|
canSearch: PropTypes.bool,
|
|
110
|
-
searchText: PropTypes.string,
|
|
111
91
|
setSearchText: PropTypes.func,
|
|
112
92
|
};
|
|
113
93
|
|
|
@@ -149,7 +129,7 @@ Title.propTypes = {
|
|
|
149
129
|
*/
|
|
150
130
|
|
|
151
131
|
export const BottomSheet = ({
|
|
152
|
-
data,
|
|
132
|
+
data = [],
|
|
153
133
|
title,
|
|
154
134
|
hide,
|
|
155
135
|
isVisible,
|
|
@@ -179,61 +159,64 @@ export const BottomSheet = ({
|
|
|
179
159
|
onRequestClose={hide}
|
|
180
160
|
{...modalParams}
|
|
181
161
|
>
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
162
|
+
<SafeAreaView style={styles.safeAreaView}>
|
|
163
|
+
<Container
|
|
164
|
+
bg={bg}
|
|
165
|
+
borderTopRightRadius={20}
|
|
166
|
+
borderTopLeftRadius={20}
|
|
167
|
+
px={24}
|
|
168
|
+
py={24}
|
|
169
|
+
{...rest}
|
|
170
|
+
>
|
|
171
|
+
<Container>
|
|
172
|
+
{title && (
|
|
173
|
+
<Title
|
|
174
|
+
bg={bg}
|
|
175
|
+
title={title}
|
|
176
|
+
isVisible={isVisible}
|
|
177
|
+
hide={hide}
|
|
178
|
+
titleContainerStyle={titleContainerStyle}
|
|
179
|
+
titleTextStyle={titleTextStyle}
|
|
180
|
+
HeaderComponent={HeaderComponent}
|
|
181
|
+
contentType={contentType}
|
|
182
|
+
canSearch={canSearch}
|
|
183
|
+
searchText={searchText}
|
|
184
|
+
setSearchText={setSearchText}
|
|
185
|
+
/>
|
|
186
|
+
)}
|
|
205
187
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
188
|
+
{data && (
|
|
189
|
+
<FlatList
|
|
190
|
+
ListFooterComponent={children}
|
|
191
|
+
initialNumToRender={data.length}
|
|
192
|
+
onScrollBeginDrag={Keyboard.dismiss}
|
|
193
|
+
data={
|
|
194
|
+
searchText
|
|
195
|
+
? data.filter(word => word.includes(searchText))
|
|
196
|
+
: data
|
|
197
|
+
}
|
|
198
|
+
renderItem={({ item, index }) => {
|
|
199
|
+
return (
|
|
200
|
+
<ContentRow
|
|
201
|
+
isSelected={index === selectedItemIndex}
|
|
202
|
+
key={index}
|
|
203
|
+
onPress={() => {
|
|
204
|
+
!contentType && hide();
|
|
205
|
+
onItemPress(index);
|
|
206
|
+
}}
|
|
207
|
+
id={index}
|
|
208
|
+
label={item}
|
|
209
|
+
/>
|
|
210
|
+
);
|
|
211
|
+
}}
|
|
212
|
+
keyExtractor={(item, index) => {
|
|
213
|
+
return index;
|
|
214
|
+
}}
|
|
215
|
+
/>
|
|
216
|
+
)}
|
|
217
|
+
</Container>
|
|
235
218
|
</Container>
|
|
236
|
-
</
|
|
219
|
+
</SafeAreaView>
|
|
237
220
|
</Modal>
|
|
238
221
|
);
|
|
239
222
|
};
|
|
@@ -291,13 +274,15 @@ BottomSheet.propTypes = {
|
|
|
291
274
|
};
|
|
292
275
|
|
|
293
276
|
const styles = StyleSheet.create({
|
|
294
|
-
|
|
295
|
-
|
|
277
|
+
safeAreaView: {
|
|
278
|
+
maxHeight: "70%",
|
|
279
|
+
backgroundColor: theme.colors.background.primary,
|
|
280
|
+
borderTopRightRadius: 20,
|
|
281
|
+
borderTopLeftRadius: 20,
|
|
296
282
|
},
|
|
297
283
|
modalStyle: {
|
|
298
284
|
margin: 0,
|
|
299
|
-
|
|
300
|
-
flexDirection: "row",
|
|
285
|
+
justifyContent: "flex-end",
|
|
301
286
|
},
|
|
302
287
|
inputContainerStyle: {
|
|
303
288
|
backgroundColor: "white",
|