@bigbinary/neetoui-rn 0.0.173 → 0.0.176
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.
- package/lib/components/BottomSheet.js +1 -1
- package/lib/components/FlashList.js +1 -1
- package/lib/components/Input.js +1 -1
- package/lib/components/MultiSelect.js +1 -1
- package/lib/components/SearchBar.js +1 -1
- package/package.json +1 -1
- package/src/components/BottomSheet.js +95 -3
- package/src/components/FlashList.js +36 -37
- package/src/components/Input.js +21 -11
- package/src/components/MultiSelect.js +155 -201
- package/src/components/SearchBar.js +19 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _fuse=_interopRequireDefault(require("fuse.js"));var _=require("./");var _theme=require("../theme");var _constants=require("../constants");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;(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:31,columnNumber:7}}),_react.default.createElement(_.Container,{mb:16,flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:hide,__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:15}},"Done"))),canSearch&&_react.default.createElement(_.SearchBar,{placeholder:"Search",onChangeText:setSearchText,onCancel:function onCancel(){setSearchText("");},searchbarProps:{autoFocus:true},showCancelButton:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:58,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 _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var fuse=new _fuse.default(data,{keys:_constants.FUSE_KEYS,threshold:0.1});var generateData=function generateData(){if(searchText.trim().length){return fuse.search(searchText.trim()).map(function(item){return item.item;});}else{return data;}};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:153,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:163,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:164,columnNumber:9}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:172,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:174,columnNumber:15}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:children,initialNumToRender:data.length,onScrollBeginDrag:_reactNative.Keyboard.dismiss,data:generateData(),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:index,item:item});},index:index,item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:21}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:190,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,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}});
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomSheet=void 0;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeModal=_interopRequireDefault(require("react-native-modal"));var _reactNativeSafeAreaContext=require("react-native-safe-area-context");var _fuse=_interopRequireDefault(require("fuse.js"));var _=require("./");var _theme=require("../theme");var _constants=require("../constants");var _excluded=["showCreateOption","CreateItemComponent","showCreateOptionLoader","createSearchedOptionLabelStyle","createOptionLabel","onPressCreateOption","createSearchedOptionContainerStyle","data","title","hide","isVisible","onItemPress","selectedItemIndex","bg","children","titleContainerStyle","titleTextStyle","modalParams","HeaderComponent","ContentRow","contentType","canSearch","onDonePress"];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,onDonePress=_ref.onDonePress;var touchY;(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:37,columnNumber:7}}),_react.default.createElement(_.Container,{mb:16,flexDirection:"row",justifyContent:"space-between",__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:9}},title&&_react.default.createElement(_.Typography,(0,_extends2.default)({textStyle:"modalHeader"},titleTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:13}}),title),contentType&&_react.default.createElement(_.Touchable,{onPress:function onPress(){hide();onDonePress();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:13}},_react.default.createElement(_.Typography,{textStyle:"modalHeader",color:"font.purple500",__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:15}},"Done"))),canSearch&&_react.default.createElement(_.SearchBar,{placeholder:"Search",onChangeText:setSearchText,onCancel:function onCancel(){setSearchText("");},showCancelButton:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,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,onDonePress:_propTypes.default.func};var BottomSheet=function BottomSheet(_ref2){var showCreateOption=_ref2.showCreateOption,CreateItemComponent=_ref2.CreateItemComponent,showCreateOptionLoader=_ref2.showCreateOptionLoader,createSearchedOptionLabelStyle=_ref2.createSearchedOptionLabelStyle,createOptionLabel=_ref2.createOptionLabel,onPressCreateOption=_ref2.onPressCreateOption,createSearchedOptionContainerStyle=_ref2.createSearchedOptionContainerStyle,_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,onDonePress=_ref2.onDonePress,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);var _useState=(0,_react.useState)(""),_useState2=(0,_slicedToArray2.default)(_useState,2),searchText=_useState2[0],setSearchText=_useState2[1];var fuse=new _fuse.default(data,{keys:_constants.FUSE_KEYS,threshold:0.1});var generateData=function generateData(){if(searchText.trim().length){return fuse.search(searchText.trim()).map(function(item){return item.item;});}else{return data;}};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:172,columnNumber:5}}),_react.default.createElement(_reactNativeSafeAreaContext.SafeAreaView,{style:styles.safeAreaView,__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,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:183,columnNumber:9}}),_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:191,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,onDonePress:onDonePress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:193,columnNumber:15}}),data&&_react.default.createElement(_reactNative.FlatList,{ListFooterComponent:children,initialNumToRender:data.length,onScrollBeginDrag:_reactNative.Keyboard.dismiss,data:generateData(),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:index,item:item});},index:index,item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:217,columnNumber:21}});},keyExtractor:function keyExtractor(item,index){return index;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:15}}),showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:_theme.theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:236,columnNumber:15}}):!!searchText.trim()&&!generateData().length&&showCreateOption&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:244,columnNumber:17}},CreateItemComponent?_react.default.createElement(CreateItemComponent,{searchText:searchText,__self:_this,__source:{fileName:_jsxFileName,lineNumber:246,columnNumber:21}}):_react.default.createElement(_.Touchable,(0,_extends2.default)({height:40,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchText);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:248,columnNumber:21}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:255,columnNumber:23}}),createOptionLabel||"Create "+searchText+" option")))))));};exports.BottomSheet=BottomSheet;BottomSheet.defaultProps={bg:"background.primary",showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){},CreateItemComponent:null,onDonePress:function onDonePress(){}};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,onDonePress:_propTypes.default.func,bg:_propTypes.default.string,titleContainerStyle:_propTypes.default.object,titleTextStyle:_propTypes.default.object,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,CreateItemComponent:_propTypes.default.node,createSearchedOptionLabelStyle:_propTypes.default.object,createSearchedOptionContainerStyle:_propTypes.default.object,modalParams:_propTypes.default.object,children:_propTypes.default.node,HeaderComponent:_propTypes.default.elementType,ContentRow:_propTypes.default.elementType,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}});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["durationPerItem","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","keyExtractor"],_excluded2=["renderItem","
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["durationPerItem","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","onEndReached","keyExtractor"],_excluded2=["renderItem","durationPerItem","isLoading","SkeletonComponent"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.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 _Dimensions$get=_reactNative.Dimensions.get("screen"),width=_Dimensions$get.width;var Placeholder=function Placeholder(){var theme=(0,_react.useContext)(_native2.ThemeContext);return _react.default.createElement(_native.default,{marginHorizontal:15,height:"60",width:400,viewBox:"0 0 400 50",backgroundColor:theme.colors.lightgrey,foregroundColor:theme.colors.grey300,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",rx:"5",ry:"5",width:width-30,height:"50",__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}));};var FlashList=function FlashList(_ref){var _ref$durationPerItem=_ref.durationPerItem,durationPerItem=_ref$durationPerItem===void 0?200:_ref$durationPerItem,SkeletonComponent=_ref.SkeletonComponent,_ref$placeHolderItemC=_ref.placeHolderItemCount,placeHolderItemCount=_ref$placeHolderItemC===void 0?10:_ref$placeHolderItemC,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,_ref$data=_ref.data,data=_ref$data===void 0?[]:_ref$data,_ref$onRefresh=_ref.onRefresh,onRefresh=_ref$onRefresh===void 0?function(){}:_ref$onRefresh,_ref$onEndReached=_ref.onEndReached,onEndReached=_ref$onEndReached===void 0?function(){}:_ref$onEndReached,_keyExtractor=_ref.keyExtractor,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dummyData=Array.apply(null,Array(placeHolderItemCount));var _useRefreshByUser=(0,_hooks.useRefreshByUser)(onRefresh),isRefetchingByUser=_useRefreshByUser.isRefetchingByUser,refetchByUser=_useRefreshByUser.refetchByUser;return _react.default.createElement(FadeInFlatList,(0,_extends2.default)({key:isLoading,durationPerItem:durationPerItem,SkeletonComponent:SkeletonComponent,isLoading:isLoading,extraData:{isLoading:isLoading,placeHolderItemCount:placeHolderItemCount},data:isLoading?dummyData:data,refreshControl:onRefresh&&_react.default.createElement(_reactNative.RefreshControl,{refreshing:isRefetchingByUser,onRefresh:refetchByUser,__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:11}}),placeHolderItemCount:placeHolderItemCount,keyExtractor:function keyExtractor(item,index){return isLoading||!_keyExtractor?index.toString():_keyExtractor(item,index);}},rest,{onEndReached:isLoading?undefined:onEndReached,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}}));};exports.FlashList=FlashList;var FadeInFlatList=function FadeInFlatList(_ref2){var originalRenderItem=_ref2.renderItem,_ref2$durationPerItem=_ref2.durationPerItem,durationPerItem=_ref2$durationPerItem===void 0?200:_ref2$durationPerItem,_ref2$isLoading=_ref2.isLoading,isLoading=_ref2$isLoading===void 0?false:_ref2$isLoading,SkeletonComponent=_ref2.SkeletonComponent,props=(0,_objectWithoutProperties2.default)(_ref2,_excluded2);var value=(0,_reactNativeReanimated.useSharedValue)(0);var FadeInComponent=(0,_react.useCallback)(function(_ref3){var index=_ref3.index,children=_ref3.children;var inputRange=[index-1,index,index+1,index+2];var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[0,0.6,1,1],_reactNativeReanimated.Extrapolation.CLAMP),transform:[{translateX:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[25,15,10,0],_reactNativeReanimated.Extrapolation.CLAMP)}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,value:value,inputRange:inputRange,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,value,inputRange,Extrapolation}=jsThis._closure;{return{opacity:interpolate(value.value,inputRange,[0,0.6,1,1],Extrapolation.CLAMP),transform:[{translateX:interpolate(value.value,inputRange,[25,15,10,0],Extrapolation.CLAMP)}]};}}";_f.__workletHash=2524714757658;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js (90:46)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:14}},children);},[]);var Item=function Item(_ref4){var _item$extraData;var item=_ref4.item;return item!=null&&(_item$extraData=item.extraData)!=null&&_item$extraData.isLoading?_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:119,columnNumber:7}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:31}})):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:7}},originalRenderItem(item));};var renderItem=function renderItem(item){return isLoading||item.index<props.placeHolderItemCount?_react.default.createElement(Item,{item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:7}}):originalRenderItem(item);};(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withTiming)(props.data.length+1,{duration:props.data.length*durationPerItem});},[durationPerItem,value,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:10}}));};FlashList.propTypes={SkeletonComponent:_propTypes.default.element,durationPerItem:_propTypes.default.number,data:_propTypes.default.array.isRequired,isLoading:_propTypes.default.bool,placeHolderItemCount:_propTypes.default.number,onRefresh:_propTypes.default.func,onEndReached:_propTypes.default.func,keyExtractor:_propTypes.default.func};
|
package/lib/components/Input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _theme=require("../../src/theme");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(props){var _rest$inputProps,_rest$inputProps2,_rest$inputProps3;var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onBlur=props.onBlur,_onBlur=_props$onBlur===void 0?function(){}:_props$onBlur,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$noBorder=props.noBorder,noBorder=_props$noBorder===void 0?false:_props$noBorder,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(animatedController._value===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start()
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.styles=exports.Input=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledSystem=require("styled-system");var _reactNative=require("react-native");var _native=_interopRequireWildcard(require("styled-components/native"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _theme=require("../../src/theme");var _excluded=["label","value","onChangeText","onBlur","errorMessage","PrefixIcon","SuffixIcon","autoFocus","disabled","noBorder"];var _templateObject,_templateObject2,_templateObject3,_this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Input.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 View=_native.default.View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.flexbox,_styledSystem.space,_styledSystem.border,_styledSystem.color,_styledSystem.layout);var Typography=_native.default.Text(_templateObject3||(_templateObject3=(0,_taggedTemplateLiteralLoose2.default)(["\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n ","\n"])),_styledSystem.textStyle,_styledSystem.space,_styledSystem.layout,_styledSystem.flexbox,_styledSystem.typography,_styledSystem.color,_styledSystem.position,(0,_styledSystem.system)({textDecoration:{property:"textDecoration",cssProperty:"textDecoration"},textTransform:{property:"textTransform",cssProperty:"textTransform"}}));var AnimatedLabel=_reactNative.Animated.createAnimatedComponent(Typography);var Input=function Input(props){var _rest$inputProps,_rest$inputProps2,_rest$inputProps3;var label=props.label,_props$value=props.value,value=_props$value===void 0?"":_props$value,_props$onChangeText=props.onChangeText,onChangeText=_props$onChangeText===void 0?function(){}:_props$onChangeText,_props$onBlur=props.onBlur,_onBlur=_props$onBlur===void 0?function(){}:_props$onBlur,_props$errorMessage=props.errorMessage,errorMessage=_props$errorMessage===void 0?null:_props$errorMessage,PrefixIcon=props.PrefixIcon,SuffixIcon=props.SuffixIcon,_props$autoFocus=props.autoFocus,autoFocus=_props$autoFocus===void 0?false:_props$autoFocus,_props$disabled=props.disabled,disabled=_props$disabled===void 0?false:_props$disabled,_props$noBorder=props.noBorder,noBorder=_props$noBorder===void 0?false:_props$noBorder,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var _useWindowDimensions=(0,_reactNative.useWindowDimensions)(),width=_useWindowDimensions.width;var colors=(0,_react.useContext)(_native.ThemeContext).colors;var inputRef=(0,_react.useRef)();var containerRef=(0,_react.useRef)();var animatedController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){if(autoFocus){handleLabelAnimation(true);}else{handleLabelAnimation(false);}},[autoFocus]);(0,_react.useEffect)(function(){if(value){if(animatedController._value===0){handleLabelAnimation(true);}}else{handleLabelAnimation(false);}},[value]);var handleLabelAnimation=function handleLabelAnimation(isFocused){_reactNative.Animated.timing(animatedController,{toValue:!!isFocused||!!value?1:0,duration:300,useNativeDriver:false}).start();!!label&&inputRef.current&&inputRef.current.setNativeProps({style:{top:isFocused?10:0}});};var handleStyles=(0,_react.useCallback)(function(isFocused){containerRef.current&&containerRef.current.setNativeProps({borderColor:errorMessage?colors.border.danger:isFocused?colors.border.purple500:colors.border.grey400,borderWidth:errorMessage||isFocused?1.5:1});},[]);var labelStyles={fontSize:animatedController.interpolate({inputRange:[0,1],outputRange:[17,13]}),top:animatedController.interpolate({inputRange:[0,1],outputRange:[16,6]})};var handleFocusBlur=function handleFocusBlur(isFocused){if(label){if(!value)handleLabelAnimation(isFocused);if(!noBorder)handleStyles(isFocused);}};return _react.default.createElement(View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:181,columnNumber:5}},_react.default.createElement(View,(0,_extends2.default)({ref:containerRef,borderRadius:8,borderWidth:noBorder?0:1,borderColor:errorMessage?"border.danger":"border.grey400",alignItems:"center",flexDirection:"row",justifyContent:"space-between"},!((_rest$inputProps=rest.inputProps)!=null&&_rest$inputProps.multiline)&&{height:58},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:7}}),!!PrefixIcon&&_react.default.createElement(View,{pl:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:194,columnNumber:11}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}})),_react.default.createElement(View,{flex:1,left:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:9}},!!label&&_react.default.createElement(AnimatedLabel,{color:disabled?"font.grey400":"font.grey600",position:"absolute",zIndex:1,style:labelStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:13}},label),_react.default.createElement(TextInput,(0,_extends2.default)({ref:inputRef,value:value,returnKeyType:(_rest$inputProps2=rest.inputProps)!=null&&_rest$inputProps2.multiline?"default":"done",onChangeText:onChangeText,autoFocus:autoFocus,editable:!disabled,onFocus:function onFocus(){handleFocusBlur(true);},onBlur:function onBlur(){_onBlur();handleFocusBlur(false);},inputAccessoryViewID:label,color:disabled?"font.grey500":"font.primary",fontSize:17,py:3,pr:3,top:0,zIndex:2,autoCapitalize:"none"},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:209,columnNumber:11}})),((_rest$inputProps3=rest.inputProps)==null?void 0:_rest$inputProps3.multiline)&&_reactNative.Platform.OS==="ios"&&_react.default.createElement(_reactNative.InputAccessoryView,{nativeID:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:234,columnNumber:13}},_react.default.createElement(_.Container,{bg:"background.white",flexDirection:"row",p:2,width:width,justifyContent:"flex-end",alignItems:"center",pr:20,__self:_this,__source:{fileName:_jsxFileName,lineNumber:235,columnNumber:15}},_react.default.createElement(_.Button,{height:30,left:10,labelStyle:styles.doneButtonStyle,variant:"text",onPress:function onPress(){_reactNative.Keyboard.dismiss();},label:"Done",__self:_this,__source:{fileName:_jsxFileName,lineNumber:244,columnNumber:17}})))),!!SuffixIcon&&_react.default.createElement(View,{px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:259,columnNumber:11}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:260,columnNumber:13}}))),!!errorMessage&&_react.default.createElement(Typography,{py:2,color:"font.danger",__self:_this,__source:{fileName:_jsxFileName,lineNumber:265,columnNumber:9}},errorMessage));};exports.Input=Input;Input.propTypes={label:_propTypes.default.string,value:_propTypes.default.string.isRequired,onChangeText:_propTypes.default.func.isRequired,onBlur:_propTypes.default.func,errorMessage:_propTypes.default.string,disabled:_propTypes.default.bool,autoFocus:_propTypes.default.bool,PrefixIcon:_propTypes.default.elementType,SuffixIcon:_propTypes.default.elementType,noBorder:_propTypes.default.bool,containerProps:_propTypes.default.object};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.MultiSelect=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","selectedValue","deletedValue","isLoading","isSearchable","showCreateOption","showCreateOptionLoader","createOptionLabel","onPressCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemLabelStyle","multiSelectedItemContainerStyle","multiSelectedItemLabelStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsLabelStyle","createSearchedOptionContainerStyle","createSearchedOptionLabelStyle"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.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 MultiSelectItem=function MultiSelectItem(_ref){var label=_ref.label,onUnselect=_ref.onUnselect,multiSelectedItemContainerStyle=_ref.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref.multiSelectedItemLabelStyle;return _react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.base",bg:"background.grey100",borderRadius:2,flexDirection:"row",alignItems:"center",justifyContent:"space-between",p:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",mr:2,maxWidth:"90%"},multiSelectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:7}})));};MultiSelectItem.propTypes={label:_propTypes.default.string,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var label=_ref2.label,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle;return _react.default.createElement(_.Touchable,{bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:70,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},itemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,emptyOptionsPlaceholder=_ref3.emptyOptionsPlaceholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,selectedValue=_ref3.selectedValue,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,showCreateOption=_ref3.showCreateOption,showCreateOptionLoader=_ref3.showCreateOptionLoader,createOptionLabel=_ref3.createOptionLabel,onPressCreateOption=_ref3.onPressCreateOption,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,itemLabelStyle=_ref3.itemLabelStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref3.multiSelectedItemLabelStyle,searchInputContainerStyle=_ref3.searchInputContainerStyle,searchInputStyle=_ref3.searchInputStyle,emptyOptionsContainerStyle=_ref3.emptyOptionsContainerStyle,emptyOptionsLabelStyle=_ref3.emptyOptionsLabelStyle,createSearchedOptionContainerStyle=_ref3.createSearchedOptionContainerStyle,createSearchedOptionLabelStyle=_ref3.createSearchedOptionLabelStyle,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var filteredOptions=options.filter(function(item,index){var optionValue=valueExtractor(item,index);var isItemAlreadySelected=Boolean(value==null?void 0:value.find(function(selectedItem){return valueExtractor(selectedItem)===optionValue;}));return!isItemAlreadySelected;}).filter(function(item,index){var optionLabel=labelExtractor(item,index);if(searchQuery.length===0)return true;return formatStr(optionLabel).includes(formatStr(searchQuery));});var isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var isSearchedOptionsEmpty=searchQuery.length>0&&filteredOptions.length===0;var emptyOptionsPlaceholderHeight=40;var emptySearchedOptionsHeight=40;var searchInputHeight=35;var multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*Math.min(filteredOptions==null?void 0:filteredOptions.length,6)+(isSearchable?searchInputHeight+10:0)+(isOptionsEmpty&&!(isSearchedOptionsEmpty&&showCreateOption)?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{height:(0,_reactNativeReanimated.withTiming)(dropdownAnimatedHeight.value,{duration:100,easing:_reactNativeReanimated.Easing.ease},function(){var _f=function _f(){if(dropdownAnimatedHeight.value===0){(0,_reactNativeReanimated.runOnJS)(setShowDropdown)(false);}};_f._closure={dropdownAnimatedHeight:dropdownAnimatedHeight,runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{dropdownAnimatedHeight,runOnJS,setShowDropdown}=jsThis._closure;{if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}}}";_f.__workletHash=8540692570337;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (221:8)";return _f;}())};};_f._closure={withTiming:_reactNativeReanimated.withTiming,dropdownAnimatedHeight:dropdownAnimatedHeight,Easing:{ease:_reactNativeReanimated.Easing.ease},runOnJS:_reactNativeReanimated.runOnJS,setShowDropdown:setShowDropdown};_f.asString="function _f(){const{withTiming,dropdownAnimatedHeight,Easing,runOnJS,setShowDropdown}=jsThis._closure;{return{height:withTiming(dropdownAnimatedHeight.value,{duration:100,easing:Easing.ease},function(){if(dropdownAnimatedHeight.value===0){runOnJS(setShowDropdown)(false);}})};}}";_f.__workletHash=4835541372615;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.js (213:42)";return _f;}(),[]);var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){dropdownAnimatedHeight.value=0;}};var handleUnselection=function handleUnselection(item){var newValue=value.filter(function(selectedItem){return valueExtractor(selectedItem)!==valueExtractor(item);});onSelect(newValue);deletedValue(item);};var handleSelection=function handleSelection(item){onSelect([].concat((0,_toConsumableArray2.default)(value),[item]));selectedValue(item);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:262,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:263,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:272,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",flexDirection:"row",justifyContent:"space-between",alignItems:"center",p:multipleOptionsSelected?1:2,pr:2,maxHeight:120},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:9}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"sf400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:289,columnNumber:13}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:294,columnNumber:13}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:295,columnNumber:15}},value==null?void 0:value.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(MultiSelectItem,{key:index,label:optionLabel,onUnselect:function onUnselect(){return handleUnselection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemLabelStyle:multiSelectedItemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:304,columnNumber:21}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:319,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:324,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:333,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:334,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:335,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:1},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:343,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",containerStyles:{height:searchInputHeight,justifyContent:"center"}},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:344,columnNumber:19}}))),isOptionsEmpty&&!(isSearchedOptionsEmpty&&showCreateOption)&&_react.default.createElement(_.Container,(0,_extends2.default)({height:emptyOptionsPlaceholderHeight,justifyContent:"center",alignItems:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:358,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},emptyOptionsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:364,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),isSearchedOptionsEmpty&&showCreateOption&&_react.default.createElement(_.Touchable,(0,_extends2.default)({height:emptySearchedOptionsHeight,justifyContent:"center",alignItems:"center",onPress:function onPress(){return onPressCreateOption(searchQuery);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:376,columnNumber:17}}),showCreateOptionLoader?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:384,columnNumber:21}}):_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:389,columnNumber:21}}),createOptionLabel||"Create "+searchQuery+" option")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:401,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:402,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:404,columnNumber:15}},filteredOptions.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(DropdownItem,{key:index,label:optionLabel,onPress:function onPress(){return handleSelection(item);},itemContainerStyle:itemContainerStyle,defaultDropdownItemHeight:defaultDropdownItemHeight,itemLabelStyle:itemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:408,columnNumber:21}});}))))));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})).isRequired,placeholder:_propTypes.default.string,emptyOptionsPlaceholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,selectedValue:_propTypes.default.func,deletedValue:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsLabelStyle:_propTypes.default.object,createSearchedOptionContainerStyle:_propTypes.default.object,createSearchedOptionLabelStyle:_propTypes.default.object};MultiSelect.defaultProps={label:null,placeholder:"Select Option",emptyOptionsPlaceholder:null,labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},selectedValue:function selectedValue(){},deletedValue:function deletedValue(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){}};
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.MultiSelect=void 0;var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=require("react-native-reanimated");var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _native=require("styled-components/native");var _=require("./");var _excluded=["options","label","value","placeholder","labelExtractor","valueExtractor","onSelect","deletedValue","isLoading","isSearchable","showCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","multiSelectedItemContainerStyle","multiSelectedItemLabelStyle","selectedValue","CreateItemComponent","showCreateOptionLoader","createSearchedOptionLabelStyle","onPressCreateOption","createSearchedOptionContainerStyle","onDonePress"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/MultiSelect.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 MultiSelectItem=function MultiSelectItem(_ref){var label=_ref.label,onUnselect=_ref.onUnselect,multiSelectedItemContainerStyle=_ref.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref.multiSelectedItemLabelStyle;return _react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.secondary",borderRadius:12,flexDirection:"row",alignItems:"center",justifyContent:"space-between",px:2,py:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:27,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",mr:2,color:"font.grey800"},multiSelectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:38,columnNumber:5}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:47,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey800",__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:7}})));};MultiSelectItem.propTypes={label:_propTypes.default.string,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var label=_ref2.label,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle;return _react.default.createElement(_.Touchable,{bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",fontSize:"s",color:"font.grey"},itemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,labelExtractor=_ref3.labelExtractor,valueExtractor=_ref3.valueExtractor,onSelect=_ref3.onSelect,deletedValue=_ref3.deletedValue,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,showCreateOption=_ref3.showCreateOption,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,inputContainerStyle=_ref3.inputContainerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemLabelStyle=_ref3.multiSelectedItemLabelStyle,selectedValue=_ref3.selectedValue,CreateItemComponent=_ref3.CreateItemComponent,showCreateOptionLoader=_ref3.showCreateOptionLoader,createSearchedOptionLabelStyle=_ref3.createSearchedOptionLabelStyle,onPressCreateOption=_ref3.onPressCreateOption,createSearchedOptionContainerStyle=_ref3.createSearchedOptionContainerStyle,onDonePress=_ref3.onDonePress,rest=(0,_objectWithoutProperties2.default)(_ref3,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var _useState=(0,_react.useState)(false),_useState2=(0,_slicedToArray2.default)(_useState,2),showDropdown=_useState2[0],setShowDropdown=_useState2[1];var _useState3=(0,_react.useState)(""),_useState4=(0,_slicedToArray2.default)(_useState3,2),searchQuery=_useState4[0],setSearchQuery=_useState4[1];var dropdownAnimatedHeight=(0,_reactNativeReanimated.useSharedValue)(0);var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var filteredOptions=options.filter(function(item,index){var optionValue=valueExtractor(item,index);var isItemAlreadySelected=Boolean(value==null?void 0:value.find(function(selectedItem){return valueExtractor(selectedItem)===optionValue;}));return!isItemAlreadySelected;}).filter(function(item,index){var optionLabel=labelExtractor(item,index);if(searchQuery.length===0)return true;return formatStr(optionLabel).includes(formatStr(searchQuery));});var isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var isSearchedOptionsEmpty=searchQuery.length>0&&filteredOptions.length===0;var emptyOptionsPlaceholderHeight=40;var emptySearchedOptionsHeight=40;var searchInputHeight=35;var multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*Math.min(filteredOptions==null?void 0:filteredOptions.length,6)+(isSearchable?searchInputHeight+10:0)+(isOptionsEmpty&&!(isSearchedOptionsEmpty&&showCreateOption)?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var getValue=function getValue(item,index){return(item==null?void 0:item.value)||valueExtractor(item,index);};var handleCheckbox=function handleCheckbox(item){var oldData=(0,_toConsumableArray2.default)(value);var index=value.findIndex(function(data,index){return getValue(data,index)===getValue(item);});if(index===-1){oldData.push(item);}else{oldData.splice(index,1);}onSelect(oldData);};var CheckBoxContent=function CheckBoxContent(_ref4){var onPress=_ref4.onPress,item=_ref4.item,index=_ref4.index;var itemIndex=value.findIndex(function(data,i){return getValue(data,i)===getValue(item,index);});return!!(item!=null&&item.label)&&_react.default.createElement(_.Container,{py:12,__self:_this,__source:{fileName:_jsxFileName,lineNumber:231,columnNumber:9}},_react.default.createElement(_.CheckBox,{checked:itemIndex!==-1,onSelect:onPress,label:(item==null?void 0:item.label)||labelExtractor(item,index),__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:11}}));};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){dropdownAnimatedHeight.value=0;}};var handleUnselection=function handleUnselection(item){var newValue=value.filter(function(selectedItem){return valueExtractor(selectedItem)!==valueExtractor(item);});onSelect(newValue);deletedValue(item);};(0,_react.useEffect)(function(){if(showDropdown){dropdownAnimatedHeight.value=dropdownHeight;}},[showDropdown,dropdownHeight]);CheckBoxContent.propTypes={onPress:_propTypes.default.func,item:_propTypes.default.object,index:_propTypes.default.number};return _react.default.createElement(_.Container,(0,_extends2.default)({},containerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:5}}),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:277,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderRadius:12,borderWidth:1,borderColor:showDropdown?"border.base":"border.grey400",p:multipleOptionsSelected?1:2,pr:2},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:281,columnNumber:9}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"sf400",mb:1,fontSize:"xs",color:"font.grey600",ml:1},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:290,columnNumber:11}}),label),_react.default.createElement(_.Container,{flexDirection:"row",justifyContent:"space-between",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:300,columnNumber:11}},!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"sf400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:15}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_reactNativeGestureHandler.ScrollView,{showsVerticalScrollIndicator:false,__self:_this,__source:{fileName:_jsxFileName,lineNumber:311,columnNumber:15}},_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",onStartShouldSetResponder:function onStartShouldSetResponder(){return true;},__self:_this,__source:{fileName:_jsxFileName,lineNumber:312,columnNumber:17}},value==null?void 0:value.map(function(item,index){var optionLabel=labelExtractor(item,index);return _react.default.createElement(MultiSelectItem,{key:index,label:optionLabel,onUnselect:function onUnselect(){return handleUnselection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemLabelStyle:multiSelectedItemLabelStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:321,columnNumber:23}});}))),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:338,columnNumber:15}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:343,columnNumber:15}})))),_react.default.createElement(_.BottomSheet,{title:label,onItemPress:function onItemPress(_ref5){var item=_ref5.item;handleCheckbox(item);selectedValue(item);},onDonePress:onDonePress,isVisible:showDropdown,hide:function hide(){return setShowDropdown(false);},canSearch:isSearchable,data:options,contentType:"checkbox",ContentRow:CheckBoxContent,showCreateOption:showCreateOption,CreateItemComponent:CreateItemComponent,showCreateOptionLoader:showCreateOptionLoader,createSearchedOptionLabelStyle:createSearchedOptionLabelStyle,onPressCreateOption:onPressCreateOption,createSearchedOptionContainerStyle:createSearchedOptionContainerStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:353,columnNumber:7}}));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string,value:_propTypes.default.string})),placeholder:_propTypes.default.string,labelExtractor:_propTypes.default.func,valueExtractor:_propTypes.default.func,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,selectedValue:_propTypes.default.func,deletedValue:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,onDonePress:_propTypes.default.func,showCreateOption:_propTypes.default.bool,showCreateOptionLoader:_propTypes.default.bool,createOptionLabel:_propTypes.default.string,onPressCreateOption:_propTypes.default.func,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,inputContainerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemLabelStyle:_propTypes.default.object,searchInputContainerStyle:_propTypes.default.object,searchInputStyle:_propTypes.default.object,emptyOptionsContainerStyle:_propTypes.default.object,emptyOptionsLabelStyle:_propTypes.default.object,createSearchedOptionContainerStyle:_propTypes.default.object,createSearchedOptionLabelStyle:_propTypes.default.object,CreateItemComponent:_propTypes.default.node};MultiSelect.defaultProps={label:null,placeholder:"Select Option",labelExtractor:function labelExtractor(option){return option==null?void 0:option.label;},valueExtractor:function valueExtractor(option){return option==null?void 0:option.value;},value:null,onSelect:function onSelect(){},selectedValue:function selectedValue(){},deletedValue:function deletedValue(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){},onDonePress:function onDonePress(){}};
|
|
@@ -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 _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-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 _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 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(searchAnimationController,{toValue:val,duration:350,useNativeDriver:false}).start();};var searchInputWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:["100%",showCancelButton?"80%":"100%"]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:
|
|
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(searchAnimationController,{toValue:val,duration:350,useNativeDriver:false}).start();};var searchInputWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:["100%",showCancelButton?"80%":"100%"]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,(0,_extends2.default)({flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:5}}),_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles,{width:searchInputWidth}),__self:_this,__source:{fileName:_jsxFileName,lineNumber:89,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,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:96,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:102,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{marginLeft:17,opacity:searchAnimationController},__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:7}},showCancelButton&&_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:129,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
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
StyleSheet,
|
|
4
|
+
FlatList,
|
|
5
|
+
Keyboard,
|
|
6
|
+
ActivityIndicator,
|
|
7
|
+
} from "react-native";
|
|
3
8
|
import PropTypes from "prop-types";
|
|
4
9
|
import Modal from "react-native-modal";
|
|
5
10
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
@@ -19,6 +24,7 @@ const Title = ({
|
|
|
19
24
|
contentType,
|
|
20
25
|
canSearch,
|
|
21
26
|
setSearchText,
|
|
27
|
+
onDonePress,
|
|
22
28
|
}) => {
|
|
23
29
|
let touchY;
|
|
24
30
|
|
|
@@ -46,7 +52,12 @@ const Title = ({
|
|
|
46
52
|
</Typography>
|
|
47
53
|
)}
|
|
48
54
|
{contentType && (
|
|
49
|
-
<Touchable
|
|
55
|
+
<Touchable
|
|
56
|
+
onPress={() => {
|
|
57
|
+
hide();
|
|
58
|
+
onDonePress();
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
50
61
|
<Typography textStyle="modalHeader" color="font.purple500">
|
|
51
62
|
Done
|
|
52
63
|
</Typography>
|
|
@@ -61,7 +72,6 @@ const Title = ({
|
|
|
61
72
|
onCancel={() => {
|
|
62
73
|
setSearchText("");
|
|
63
74
|
}}
|
|
64
|
-
searchbarProps={{ autoFocus: true }}
|
|
65
75
|
showCancelButton={false}
|
|
66
76
|
/>
|
|
67
77
|
)}
|
|
@@ -80,6 +90,7 @@ Title.propTypes = {
|
|
|
80
90
|
contentType: PropTypes.oneOf(["checkbox", null]),
|
|
81
91
|
canSearch: PropTypes.bool,
|
|
82
92
|
setSearchText: PropTypes.func,
|
|
93
|
+
onDonePress: PropTypes.func,
|
|
83
94
|
};
|
|
84
95
|
|
|
85
96
|
/**
|
|
@@ -120,6 +131,13 @@ Title.propTypes = {
|
|
|
120
131
|
*/
|
|
121
132
|
|
|
122
133
|
export const BottomSheet = ({
|
|
134
|
+
showCreateOption,
|
|
135
|
+
CreateItemComponent,
|
|
136
|
+
showCreateOptionLoader,
|
|
137
|
+
createSearchedOptionLabelStyle,
|
|
138
|
+
createOptionLabel,
|
|
139
|
+
onPressCreateOption,
|
|
140
|
+
createSearchedOptionContainerStyle,
|
|
123
141
|
data = [],
|
|
124
142
|
title,
|
|
125
143
|
hide,
|
|
@@ -135,6 +153,7 @@ export const BottomSheet = ({
|
|
|
135
153
|
ContentRow,
|
|
136
154
|
contentType,
|
|
137
155
|
canSearch,
|
|
156
|
+
onDonePress,
|
|
138
157
|
...rest
|
|
139
158
|
}) => {
|
|
140
159
|
const [searchText, setSearchText] = useState("");
|
|
@@ -183,6 +202,7 @@ export const BottomSheet = ({
|
|
|
183
202
|
canSearch={canSearch}
|
|
184
203
|
searchText={searchText}
|
|
185
204
|
setSearchText={setSearchText}
|
|
205
|
+
onDonePress={onDonePress}
|
|
186
206
|
/>
|
|
187
207
|
)}
|
|
188
208
|
|
|
@@ -211,6 +231,40 @@ export const BottomSheet = ({
|
|
|
211
231
|
}}
|
|
212
232
|
/>
|
|
213
233
|
)}
|
|
234
|
+
|
|
235
|
+
{showCreateOptionLoader ? (
|
|
236
|
+
<ActivityIndicator
|
|
237
|
+
size="small"
|
|
238
|
+
color={theme.colors.background.base}
|
|
239
|
+
/>
|
|
240
|
+
) : (
|
|
241
|
+
!!searchText.trim() &&
|
|
242
|
+
!generateData().length &&
|
|
243
|
+
showCreateOption && (
|
|
244
|
+
<Container>
|
|
245
|
+
{CreateItemComponent ? (
|
|
246
|
+
<CreateItemComponent searchText={searchText} />
|
|
247
|
+
) : (
|
|
248
|
+
<Touchable
|
|
249
|
+
height={40}
|
|
250
|
+
justifyContent="center"
|
|
251
|
+
alignItems="center"
|
|
252
|
+
onPress={() => onPressCreateOption(searchText)}
|
|
253
|
+
{...createSearchedOptionContainerStyle}
|
|
254
|
+
>
|
|
255
|
+
<Typography
|
|
256
|
+
fontFamily="sf400"
|
|
257
|
+
fontSize="s"
|
|
258
|
+
color="font.grey"
|
|
259
|
+
{...createSearchedOptionLabelStyle}
|
|
260
|
+
>
|
|
261
|
+
{createOptionLabel || `Create ${searchText} option`}
|
|
262
|
+
</Typography>
|
|
263
|
+
</Touchable>
|
|
264
|
+
)}
|
|
265
|
+
</Container>
|
|
266
|
+
)
|
|
267
|
+
)}
|
|
214
268
|
</Container>
|
|
215
269
|
</Container>
|
|
216
270
|
</SafeAreaView>
|
|
@@ -220,6 +274,12 @@ export const BottomSheet = ({
|
|
|
220
274
|
|
|
221
275
|
BottomSheet.defaultProps = {
|
|
222
276
|
bg: "background.primary",
|
|
277
|
+
showCreateOption: false,
|
|
278
|
+
showCreateOptionLoader: false,
|
|
279
|
+
createOptionLabel: null,
|
|
280
|
+
onPressCreateOption: () => {},
|
|
281
|
+
CreateItemComponent: null,
|
|
282
|
+
onDonePress: () => {},
|
|
223
283
|
};
|
|
224
284
|
|
|
225
285
|
BottomSheet.propTypes = {
|
|
@@ -247,6 +307,10 @@ BottomSheet.propTypes = {
|
|
|
247
307
|
* Index of selected Item.
|
|
248
308
|
*/
|
|
249
309
|
selectedItemIndex: PropTypes.number,
|
|
310
|
+
/**
|
|
311
|
+
* Callback that will be called on Done button press
|
|
312
|
+
*/
|
|
313
|
+
onDonePress: PropTypes.func,
|
|
250
314
|
/**
|
|
251
315
|
* Background color.
|
|
252
316
|
*/
|
|
@@ -259,6 +323,34 @@ BottomSheet.propTypes = {
|
|
|
259
323
|
* To customise title text styles.
|
|
260
324
|
*/
|
|
261
325
|
titleTextStyle: PropTypes.object,
|
|
326
|
+
/**
|
|
327
|
+
* Show option to create the searched label if not present in the options list
|
|
328
|
+
*/
|
|
329
|
+
showCreateOption: PropTypes.bool,
|
|
330
|
+
/**
|
|
331
|
+
* Show loader while creating a searched option not present in the options list
|
|
332
|
+
*/
|
|
333
|
+
showCreateOptionLoader: PropTypes.bool,
|
|
334
|
+
/**
|
|
335
|
+
* Custom label for creating searched option not present in the options list
|
|
336
|
+
*/
|
|
337
|
+
createOptionLabel: PropTypes.string,
|
|
338
|
+
/**
|
|
339
|
+
* Callback when create searched option is pressed
|
|
340
|
+
*/
|
|
341
|
+
onPressCreateOption: PropTypes.func,
|
|
342
|
+
/**
|
|
343
|
+
* Component that renders when searched item doesn't exists
|
|
344
|
+
*/
|
|
345
|
+
CreateItemComponent: PropTypes.node,
|
|
346
|
+
/**
|
|
347
|
+
* To customise empty options placeholder text style.
|
|
348
|
+
*/
|
|
349
|
+
createSearchedOptionLabelStyle: PropTypes.object,
|
|
350
|
+
/**
|
|
351
|
+
* To customise empty options placeholder container style.
|
|
352
|
+
*/
|
|
353
|
+
createSearchedOptionContainerStyle: PropTypes.object,
|
|
262
354
|
/**
|
|
263
355
|
* To support more Modal params.
|
|
264
356
|
*/
|
|
@@ -6,27 +6,28 @@ import Animated, {
|
|
|
6
6
|
interpolate,
|
|
7
7
|
useAnimatedStyle,
|
|
8
8
|
useSharedValue,
|
|
9
|
-
withDelay,
|
|
10
9
|
withTiming,
|
|
11
10
|
} from "react-native-reanimated";
|
|
12
11
|
import PropTypes from "prop-types";
|
|
13
12
|
import ContentLoader, { Rect } from "react-content-loader/native";
|
|
14
13
|
import { ThemeContext } from "styled-components/native";
|
|
15
|
-
import { RefreshControl } from "react-native";
|
|
14
|
+
import { Dimensions, RefreshControl } from "react-native";
|
|
16
15
|
|
|
17
16
|
import { useRefreshByUser } from "@hooks";
|
|
18
17
|
|
|
18
|
+
const { width } = Dimensions.get("screen");
|
|
19
19
|
const Placeholder = () => {
|
|
20
20
|
const theme = useContext(ThemeContext);
|
|
21
21
|
return (
|
|
22
22
|
<ContentLoader
|
|
23
|
-
|
|
23
|
+
marginHorizontal={15}
|
|
24
|
+
height="60"
|
|
24
25
|
width={400}
|
|
25
26
|
viewBox="0 0 400 50"
|
|
26
27
|
backgroundColor={theme.colors.lightgrey}
|
|
27
28
|
foregroundColor={theme.colors.grey300}
|
|
28
29
|
>
|
|
29
|
-
<Rect x="0"
|
|
30
|
+
<Rect x="0" rx="5" ry="5" width={width - 30} height="50" />
|
|
30
31
|
</ContentLoader>
|
|
31
32
|
);
|
|
32
33
|
};
|
|
@@ -38,6 +39,7 @@ export const FlashList = ({
|
|
|
38
39
|
isLoading = false,
|
|
39
40
|
data = [],
|
|
40
41
|
onRefresh = () => {},
|
|
42
|
+
onEndReached = () => {},
|
|
41
43
|
keyExtractor,
|
|
42
44
|
...rest
|
|
43
45
|
}) => {
|
|
@@ -47,10 +49,11 @@ export const FlashList = ({
|
|
|
47
49
|
|
|
48
50
|
return (
|
|
49
51
|
<FadeInFlatList
|
|
52
|
+
key={isLoading}
|
|
50
53
|
durationPerItem={durationPerItem}
|
|
51
54
|
SkeletonComponent={SkeletonComponent}
|
|
52
55
|
isLoading={isLoading}
|
|
53
|
-
extraData={{ isLoading }}
|
|
56
|
+
extraData={{ isLoading, placeHolderItemCount }}
|
|
54
57
|
data={isLoading ? dummyData : data}
|
|
55
58
|
refreshControl={
|
|
56
59
|
onRefresh && (
|
|
@@ -60,19 +63,20 @@ export const FlashList = ({
|
|
|
60
63
|
/>
|
|
61
64
|
)
|
|
62
65
|
}
|
|
66
|
+
placeHolderItemCount={placeHolderItemCount}
|
|
63
67
|
keyExtractor={(item, index) => {
|
|
64
68
|
return isLoading || !keyExtractor
|
|
65
69
|
? index.toString()
|
|
66
70
|
: keyExtractor(item, index);
|
|
67
71
|
}}
|
|
68
72
|
{...rest}
|
|
73
|
+
onEndReached={isLoading ? undefined : onEndReached}
|
|
69
74
|
/>
|
|
70
75
|
);
|
|
71
76
|
};
|
|
72
77
|
|
|
73
78
|
const FadeInFlatList = ({
|
|
74
79
|
renderItem: originalRenderItem,
|
|
75
|
-
initialDelay = 250,
|
|
76
80
|
durationPerItem = 200,
|
|
77
81
|
isLoading = false,
|
|
78
82
|
SkeletonComponent,
|
|
@@ -82,15 +86,13 @@ const FadeInFlatList = ({
|
|
|
82
86
|
|
|
83
87
|
const FadeInComponent = useCallback(
|
|
84
88
|
({ index, children }) => {
|
|
85
|
-
const inputRange =
|
|
86
|
-
index === 0 ? [-1, 0, 1, 2] : [index - 1, index, index + 1, index + 2];
|
|
87
|
-
|
|
89
|
+
const inputRange = [index - 1, index, index + 1, index + 2];
|
|
88
90
|
const animatedStyles = useAnimatedStyle(() => {
|
|
89
91
|
return {
|
|
90
92
|
opacity: interpolate(
|
|
91
93
|
value.value,
|
|
92
94
|
inputRange,
|
|
93
|
-
[0, 0, 1, 1],
|
|
95
|
+
[0, 0.6, 1, 1],
|
|
94
96
|
Extrapolation.CLAMP
|
|
95
97
|
),
|
|
96
98
|
transform: [
|
|
@@ -112,37 +114,33 @@ const FadeInFlatList = ({
|
|
|
112
114
|
[]
|
|
113
115
|
);
|
|
114
116
|
|
|
115
|
-
const Item =
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
originalRenderItem(item)
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
</FadeInComponent>
|
|
127
|
-
);
|
|
128
|
-
},
|
|
129
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
130
|
-
[]
|
|
131
|
-
);
|
|
117
|
+
const Item = ({ item }) => {
|
|
118
|
+
return item?.extraData?.isLoading ? (
|
|
119
|
+
<FadeInComponent index={item.index}>
|
|
120
|
+
{SkeletonComponent || <Placeholder />}
|
|
121
|
+
</FadeInComponent>
|
|
122
|
+
) : (
|
|
123
|
+
<FadeInComponent index={item.index}>
|
|
124
|
+
{originalRenderItem(item)}
|
|
125
|
+
</FadeInComponent>
|
|
126
|
+
);
|
|
127
|
+
};
|
|
132
128
|
|
|
133
|
-
const renderItem =
|
|
134
|
-
return
|
|
135
|
-
|
|
129
|
+
const renderItem = item => {
|
|
130
|
+
return isLoading || item.index < props.placeHolderItemCount ? (
|
|
131
|
+
<Item item={item} />
|
|
132
|
+
) : (
|
|
133
|
+
originalRenderItem(item)
|
|
134
|
+
);
|
|
135
|
+
};
|
|
136
136
|
|
|
137
137
|
useEffect(() => {
|
|
138
138
|
value.value = 0;
|
|
139
|
-
value.value =
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
);
|
|
145
|
-
}, [props.data.length, durationPerItem, initialDelay, value, isLoading]);
|
|
139
|
+
value.value = withTiming(props.data.length + 1, {
|
|
140
|
+
duration: props.data.length * durationPerItem,
|
|
141
|
+
});
|
|
142
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
143
|
+
}, [durationPerItem, value, isLoading]);
|
|
146
144
|
|
|
147
145
|
return <ShopifyFlashList {...props} renderItem={renderItem} />;
|
|
148
146
|
};
|
|
@@ -154,5 +152,6 @@ FlashList.propTypes = {
|
|
|
154
152
|
isLoading: PropTypes.bool,
|
|
155
153
|
placeHolderItemCount: PropTypes.number,
|
|
156
154
|
onRefresh: PropTypes.func,
|
|
155
|
+
onEndReached: PropTypes.func,
|
|
157
156
|
keyExtractor: PropTypes.func,
|
|
158
157
|
};
|
package/src/components/Input.js
CHANGED
|
@@ -137,7 +137,8 @@ export const Input = props => {
|
|
|
137
137
|
useNativeDriver: false,
|
|
138
138
|
}).start();
|
|
139
139
|
|
|
140
|
-
|
|
140
|
+
!!label &&
|
|
141
|
+
inputRef.current &&
|
|
141
142
|
inputRef.current.setNativeProps({
|
|
142
143
|
style: {
|
|
143
144
|
top: isFocused ? 10 : 0,
|
|
@@ -170,8 +171,10 @@ export const Input = props => {
|
|
|
170
171
|
};
|
|
171
172
|
|
|
172
173
|
const handleFocusBlur = isFocused => {
|
|
173
|
-
if (
|
|
174
|
-
|
|
174
|
+
if (label) {
|
|
175
|
+
if (!value) handleLabelAnimation(isFocused);
|
|
176
|
+
if (!noBorder) handleStyles(isFocused);
|
|
177
|
+
}
|
|
175
178
|
};
|
|
176
179
|
|
|
177
180
|
return (
|
|
@@ -185,6 +188,7 @@ export const Input = props => {
|
|
|
185
188
|
flexDirection="row"
|
|
186
189
|
justifyContent="space-between"
|
|
187
190
|
{...(!rest.inputProps?.multiline && { height: 58 })}
|
|
191
|
+
{...rest.containerProps}
|
|
188
192
|
>
|
|
189
193
|
{!!PrefixIcon && (
|
|
190
194
|
<View pl={2}>
|
|
@@ -192,14 +196,16 @@ export const Input = props => {
|
|
|
192
196
|
</View>
|
|
193
197
|
)}
|
|
194
198
|
<View flex={1} left={10}>
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
199
|
+
{!!label && (
|
|
200
|
+
<AnimatedLabel
|
|
201
|
+
color={disabled ? "font.grey400" : "font.grey600"}
|
|
202
|
+
position="absolute"
|
|
203
|
+
zIndex={1}
|
|
204
|
+
style={labelStyles}
|
|
205
|
+
>
|
|
206
|
+
{label}
|
|
207
|
+
</AnimatedLabel>
|
|
208
|
+
)}
|
|
203
209
|
<TextInput
|
|
204
210
|
ref={inputRef}
|
|
205
211
|
value={value}
|
|
@@ -305,6 +311,10 @@ Input.propTypes = {
|
|
|
305
311
|
* Takes a boolean value based on which border is hidden/shown.
|
|
306
312
|
*/
|
|
307
313
|
noBorder: PropTypes.bool,
|
|
314
|
+
/**
|
|
315
|
+
* Used to pass custom styles to the wrapper component.
|
|
316
|
+
*/
|
|
317
|
+
containerProps: PropTypes.object,
|
|
308
318
|
};
|
|
309
319
|
|
|
310
320
|
export const styles = StyleSheet.create({
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import Icon from "react-native-remix-icon";
|
|
1
|
+
import React, { useContext, useEffect, useState } from "react";
|
|
3
2
|
import PropTypes from "prop-types";
|
|
4
|
-
import Animated, {
|
|
5
|
-
useSharedValue,
|
|
6
|
-
useAnimatedStyle,
|
|
7
|
-
withTiming,
|
|
8
|
-
Easing,
|
|
9
|
-
runOnJS,
|
|
10
|
-
} from "react-native-reanimated";
|
|
11
3
|
import {
|
|
12
4
|
ActivityIndicator,
|
|
13
|
-
TouchableWithoutFeedback,
|
|
14
5
|
Keyboard,
|
|
6
|
+
TouchableWithoutFeedback,
|
|
15
7
|
} from "react-native";
|
|
16
|
-
import { ThemeContext } from "styled-components/native";
|
|
17
8
|
import { ScrollView } from "react-native-gesture-handler";
|
|
9
|
+
import { useSharedValue } from "react-native-reanimated";
|
|
10
|
+
import Icon from "react-native-remix-icon";
|
|
11
|
+
import { ThemeContext } from "styled-components/native";
|
|
18
12
|
|
|
19
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
BottomSheet,
|
|
15
|
+
CheckBox,
|
|
16
|
+
Container,
|
|
17
|
+
Touchable,
|
|
18
|
+
Typography,
|
|
19
|
+
} from "@components";
|
|
20
20
|
|
|
21
21
|
const MultiSelectItem = ({
|
|
22
22
|
label,
|
|
@@ -25,14 +25,13 @@ const MultiSelectItem = ({
|
|
|
25
25
|
multiSelectedItemLabelStyle,
|
|
26
26
|
}) => (
|
|
27
27
|
<Container
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
bg="background.grey100"
|
|
31
|
-
borderRadius={2}
|
|
28
|
+
bg="background.secondary"
|
|
29
|
+
borderRadius={12}
|
|
32
30
|
flexDirection="row"
|
|
33
31
|
alignItems="center"
|
|
34
32
|
justifyContent="space-between"
|
|
35
|
-
|
|
33
|
+
px={2}
|
|
34
|
+
py={1}
|
|
36
35
|
m={1}
|
|
37
36
|
{...multiSelectedItemContainerStyle}
|
|
38
37
|
>
|
|
@@ -40,13 +39,13 @@ const MultiSelectItem = ({
|
|
|
40
39
|
fontFamily="sf400"
|
|
41
40
|
fontSize="s"
|
|
42
41
|
mr={2}
|
|
43
|
-
|
|
42
|
+
color="font.grey800"
|
|
44
43
|
{...multiSelectedItemLabelStyle}
|
|
45
44
|
>
|
|
46
45
|
{label}
|
|
47
46
|
</Typography>
|
|
48
47
|
<TouchableWithoutFeedback onPress={onUnselect}>
|
|
49
|
-
<Icon name="ri-close-line" size="20" color="
|
|
48
|
+
<Icon name="ri-close-line" size="20" color="grey800" />
|
|
50
49
|
</TouchableWithoutFeedback>
|
|
51
50
|
</Container>
|
|
52
51
|
);
|
|
@@ -140,32 +139,27 @@ export const MultiSelect = ({
|
|
|
140
139
|
label,
|
|
141
140
|
value,
|
|
142
141
|
placeholder,
|
|
143
|
-
emptyOptionsPlaceholder,
|
|
144
142
|
labelExtractor,
|
|
145
143
|
valueExtractor,
|
|
146
144
|
onSelect,
|
|
147
|
-
selectedValue,
|
|
148
145
|
deletedValue,
|
|
149
146
|
isLoading,
|
|
150
147
|
isSearchable,
|
|
151
148
|
showCreateOption,
|
|
152
|
-
showCreateOptionLoader,
|
|
153
|
-
createOptionLabel,
|
|
154
|
-
onPressCreateOption,
|
|
155
149
|
labelStyle,
|
|
156
150
|
containerStyle,
|
|
157
151
|
inputContainerStyle,
|
|
158
152
|
dropdownContainerStyle,
|
|
159
153
|
itemContainerStyle,
|
|
160
|
-
itemLabelStyle,
|
|
161
154
|
multiSelectedItemContainerStyle,
|
|
162
155
|
multiSelectedItemLabelStyle,
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
emptyOptionsLabelStyle,
|
|
167
|
-
createSearchedOptionContainerStyle,
|
|
156
|
+
selectedValue,
|
|
157
|
+
CreateItemComponent,
|
|
158
|
+
showCreateOptionLoader,
|
|
168
159
|
createSearchedOptionLabelStyle,
|
|
160
|
+
onPressCreateOption,
|
|
161
|
+
createSearchedOptionContainerStyle,
|
|
162
|
+
onDonePress,
|
|
169
163
|
...rest
|
|
170
164
|
}) => {
|
|
171
165
|
const theme = useContext(ThemeContext);
|
|
@@ -210,22 +204,41 @@ export const MultiSelect = ({
|
|
|
210
204
|
? emptySearchedOptionsHeight
|
|
211
205
|
: 0);
|
|
212
206
|
|
|
213
|
-
const
|
|
214
|
-
return
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
)
|
|
227
|
-
}
|
|
228
|
-
|
|
207
|
+
const getValue = (item, index) => {
|
|
208
|
+
return item?.value || valueExtractor(item, index);
|
|
209
|
+
};
|
|
210
|
+
|
|
211
|
+
const handleCheckbox = item => {
|
|
212
|
+
const oldData = [...value];
|
|
213
|
+
const index = value.findIndex(
|
|
214
|
+
(data, index) => getValue(data, index) === getValue(item)
|
|
215
|
+
);
|
|
216
|
+
|
|
217
|
+
if (index === -1) {
|
|
218
|
+
oldData.push(item);
|
|
219
|
+
} else {
|
|
220
|
+
oldData.splice(index, 1);
|
|
221
|
+
}
|
|
222
|
+
onSelect(oldData);
|
|
223
|
+
};
|
|
224
|
+
|
|
225
|
+
const CheckBoxContent = ({ onPress, item, index }) => {
|
|
226
|
+
const itemIndex = value.findIndex(
|
|
227
|
+
(data, i) => getValue(data, i) === getValue(item, index)
|
|
228
|
+
);
|
|
229
|
+
return (
|
|
230
|
+
!!item?.label && (
|
|
231
|
+
<Container py={12}>
|
|
232
|
+
<CheckBox
|
|
233
|
+
checked={itemIndex !== -1}
|
|
234
|
+
onSelect={onPress}
|
|
235
|
+
// checkboxContainerProp={containerStyle}
|
|
236
|
+
label={item?.label || labelExtractor(item, index)}
|
|
237
|
+
/>
|
|
238
|
+
</Container>
|
|
239
|
+
)
|
|
240
|
+
);
|
|
241
|
+
};
|
|
229
242
|
|
|
230
243
|
const handleOpenDropdown = () => {
|
|
231
244
|
Keyboard.dismiss();
|
|
@@ -246,11 +259,6 @@ export const MultiSelect = ({
|
|
|
246
259
|
deletedValue(item);
|
|
247
260
|
};
|
|
248
261
|
|
|
249
|
-
const handleSelection = item => {
|
|
250
|
-
onSelect([...value, item]);
|
|
251
|
-
selectedValue(item);
|
|
252
|
-
};
|
|
253
|
-
|
|
254
262
|
useEffect(() => {
|
|
255
263
|
if (showDropdown) {
|
|
256
264
|
dropdownAnimatedHeight.value = dropdownHeight;
|
|
@@ -258,168 +266,110 @@ export const MultiSelect = ({
|
|
|
258
266
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
259
267
|
}, [showDropdown, dropdownHeight]);
|
|
260
268
|
|
|
269
|
+
CheckBoxContent.propTypes = {
|
|
270
|
+
onPress: PropTypes.func,
|
|
271
|
+
item: PropTypes.object,
|
|
272
|
+
index: PropTypes.number,
|
|
273
|
+
};
|
|
274
|
+
|
|
261
275
|
return (
|
|
262
276
|
<Container {...containerStyle}>
|
|
263
|
-
<Typography
|
|
264
|
-
fontFamily="sf400"
|
|
265
|
-
mb={1}
|
|
266
|
-
fontSize="s"
|
|
267
|
-
color="font.base"
|
|
268
|
-
{...labelStyle}
|
|
269
|
-
>
|
|
270
|
-
{label}
|
|
271
|
-
</Typography>
|
|
272
277
|
<TouchableWithoutFeedback
|
|
273
278
|
disabled={isLoading}
|
|
274
279
|
onPress={handleOpenDropdown}
|
|
275
280
|
>
|
|
276
281
|
<Container
|
|
282
|
+
borderRadius={12}
|
|
277
283
|
borderWidth={1}
|
|
278
|
-
borderColor="border.grey400"
|
|
279
|
-
flexDirection="row"
|
|
280
|
-
justifyContent="space-between"
|
|
281
|
-
alignItems="center"
|
|
284
|
+
borderColor={showDropdown ? "border.base" : "border.grey400"}
|
|
282
285
|
p={multipleOptionsSelected ? 1 : 2}
|
|
283
286
|
pr={2}
|
|
284
|
-
maxHeight={120}
|
|
285
287
|
{...inputContainerStyle}
|
|
286
288
|
{...rest}
|
|
287
289
|
>
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
}
|
|
311
|
-
multiSelectedItemLabelStyle={multiSelectedItemLabelStyle}
|
|
312
|
-
/>
|
|
313
|
-
);
|
|
314
|
-
})}
|
|
315
|
-
</Container>
|
|
316
|
-
</ScrollView>
|
|
317
|
-
)}
|
|
318
|
-
{isLoading ? (
|
|
319
|
-
<ActivityIndicator
|
|
320
|
-
size="small"
|
|
321
|
-
color={theme.colors.background.base}
|
|
322
|
-
/>
|
|
323
|
-
) : (
|
|
324
|
-
<Icon
|
|
325
|
-
name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
|
|
326
|
-
size="20"
|
|
327
|
-
color="grey"
|
|
328
|
-
/>
|
|
329
|
-
)}
|
|
330
|
-
</Container>
|
|
331
|
-
</TouchableWithoutFeedback>
|
|
332
|
-
{showDropdown && (
|
|
333
|
-
<Container overflow="hidden">
|
|
334
|
-
<Animated.View style={animatedStyles}>
|
|
335
|
-
<Card
|
|
336
|
-
bg="background.white"
|
|
337
|
-
borderWidth={1}
|
|
338
|
-
borderColor="border.grey400"
|
|
339
|
-
maxHeight={dropdownHeight}
|
|
340
|
-
{...dropdownContainerStyle}
|
|
341
|
-
>
|
|
342
|
-
{isSearchable && (
|
|
343
|
-
<Container p={1} {...searchInputContainerStyle}>
|
|
344
|
-
<Input
|
|
345
|
-
placeholder="Search"
|
|
346
|
-
onChangeText={setSearchQuery}
|
|
347
|
-
fontSize="s"
|
|
348
|
-
// eslint-disable-next-line react-native/no-inline-styles
|
|
349
|
-
containerStyles={{
|
|
350
|
-
height: searchInputHeight,
|
|
351
|
-
justifyContent: "center",
|
|
352
|
-
}}
|
|
353
|
-
{...searchInputStyle}
|
|
354
|
-
/>
|
|
355
|
-
</Container>
|
|
356
|
-
)}
|
|
357
|
-
{isOptionsEmpty && !(isSearchedOptionsEmpty && showCreateOption) && (
|
|
290
|
+
<Typography
|
|
291
|
+
fontFamily="sf400"
|
|
292
|
+
mb={1}
|
|
293
|
+
fontSize="xs"
|
|
294
|
+
color="font.grey600"
|
|
295
|
+
ml={1}
|
|
296
|
+
{...labelStyle}
|
|
297
|
+
>
|
|
298
|
+
{label}
|
|
299
|
+
</Typography>
|
|
300
|
+
<Container
|
|
301
|
+
flexDirection="row"
|
|
302
|
+
justifyContent="space-between"
|
|
303
|
+
alignItems="center"
|
|
304
|
+
>
|
|
305
|
+
{!multipleOptionsSelected && (
|
|
306
|
+
<Typography fontFamily="sf400" fontSize="s" color="font.grey">
|
|
307
|
+
{!multipleOptionsSelected && placeholder}
|
|
308
|
+
</Typography>
|
|
309
|
+
)}
|
|
310
|
+
{multipleOptionsSelected && (
|
|
311
|
+
<ScrollView showsVerticalScrollIndicator={false}>
|
|
358
312
|
<Container
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
{
|
|
313
|
+
flexWrap="wrap"
|
|
314
|
+
flexDirection="row"
|
|
315
|
+
maxWidth="85%"
|
|
316
|
+
onStartShouldSetResponder={() => true}
|
|
363
317
|
>
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
318
|
+
{value?.map((item, index) => {
|
|
319
|
+
const optionLabel = labelExtractor(item, index);
|
|
320
|
+
return (
|
|
321
|
+
<MultiSelectItem
|
|
322
|
+
key={index}
|
|
323
|
+
label={optionLabel}
|
|
324
|
+
onUnselect={() => handleUnselection(item)}
|
|
325
|
+
multiSelectedItemContainerStyle={
|
|
326
|
+
multiSelectedItemContainerStyle
|
|
327
|
+
}
|
|
328
|
+
multiSelectedItemLabelStyle={
|
|
329
|
+
multiSelectedItemLabelStyle
|
|
330
|
+
}
|
|
331
|
+
/>
|
|
332
|
+
);
|
|
333
|
+
})}
|
|
372
334
|
</Container>
|
|
373
|
-
)}
|
|
374
|
-
|
|
375
|
-
{isSearchedOptionsEmpty && showCreateOption && (
|
|
376
|
-
<Touchable
|
|
377
|
-
height={emptySearchedOptionsHeight}
|
|
378
|
-
justifyContent="center"
|
|
379
|
-
alignItems="center"
|
|
380
|
-
onPress={() => onPressCreateOption(searchQuery)}
|
|
381
|
-
{...createSearchedOptionContainerStyle}
|
|
382
|
-
>
|
|
383
|
-
{showCreateOptionLoader ? (
|
|
384
|
-
<ActivityIndicator
|
|
385
|
-
size="small"
|
|
386
|
-
color={theme.colors.background.base}
|
|
387
|
-
/>
|
|
388
|
-
) : (
|
|
389
|
-
<Typography
|
|
390
|
-
fontFamily="sf400"
|
|
391
|
-
fontSize="s"
|
|
392
|
-
color="font.grey"
|
|
393
|
-
{...createSearchedOptionLabelStyle}
|
|
394
|
-
>
|
|
395
|
-
{createOptionLabel || `Create ${searchQuery} option`}
|
|
396
|
-
</Typography>
|
|
397
|
-
)}
|
|
398
|
-
</Touchable>
|
|
399
|
-
)}
|
|
400
|
-
{/* Animation not working without this hidden input */}
|
|
401
|
-
<Container height={0}>
|
|
402
|
-
<Input />
|
|
403
|
-
</Container>
|
|
404
|
-
<ScrollView>
|
|
405
|
-
{filteredOptions.map((item, index) => {
|
|
406
|
-
const optionLabel = labelExtractor(item, index);
|
|
407
|
-
return (
|
|
408
|
-
<DropdownItem
|
|
409
|
-
key={index}
|
|
410
|
-
label={optionLabel}
|
|
411
|
-
onPress={() => handleSelection(item)}
|
|
412
|
-
itemContainerStyle={itemContainerStyle}
|
|
413
|
-
defaultDropdownItemHeight={defaultDropdownItemHeight}
|
|
414
|
-
itemLabelStyle={itemLabelStyle}
|
|
415
|
-
/>
|
|
416
|
-
);
|
|
417
|
-
})}
|
|
418
335
|
</ScrollView>
|
|
419
|
-
|
|
420
|
-
|
|
336
|
+
)}
|
|
337
|
+
{isLoading ? (
|
|
338
|
+
<ActivityIndicator
|
|
339
|
+
size="small"
|
|
340
|
+
color={theme.colors.background.base}
|
|
341
|
+
/>
|
|
342
|
+
) : (
|
|
343
|
+
<Icon
|
|
344
|
+
name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
|
|
345
|
+
size="20"
|
|
346
|
+
color="grey"
|
|
347
|
+
/>
|
|
348
|
+
)}
|
|
349
|
+
</Container>
|
|
421
350
|
</Container>
|
|
422
|
-
|
|
351
|
+
</TouchableWithoutFeedback>
|
|
352
|
+
|
|
353
|
+
<BottomSheet
|
|
354
|
+
title={label}
|
|
355
|
+
onItemPress={({ item }) => {
|
|
356
|
+
handleCheckbox(item);
|
|
357
|
+
selectedValue(item);
|
|
358
|
+
}}
|
|
359
|
+
onDonePress={onDonePress}
|
|
360
|
+
isVisible={showDropdown}
|
|
361
|
+
hide={() => setShowDropdown(false)}
|
|
362
|
+
canSearch={isSearchable}
|
|
363
|
+
data={options}
|
|
364
|
+
contentType="checkbox"
|
|
365
|
+
ContentRow={CheckBoxContent}
|
|
366
|
+
showCreateOption={showCreateOption}
|
|
367
|
+
CreateItemComponent={CreateItemComponent}
|
|
368
|
+
showCreateOptionLoader={showCreateOptionLoader}
|
|
369
|
+
createSearchedOptionLabelStyle={createSearchedOptionLabelStyle}
|
|
370
|
+
onPressCreateOption={onPressCreateOption}
|
|
371
|
+
createSearchedOptionContainerStyle={createSearchedOptionContainerStyle}
|
|
372
|
+
/>
|
|
423
373
|
</Container>
|
|
424
374
|
);
|
|
425
375
|
};
|
|
@@ -437,15 +387,11 @@ MultiSelect.propTypes = {
|
|
|
437
387
|
label: PropTypes.string,
|
|
438
388
|
value: PropTypes.string,
|
|
439
389
|
})
|
|
440
|
-
)
|
|
390
|
+
),
|
|
441
391
|
/**
|
|
442
392
|
* The text to be displayed if no option is selected.
|
|
443
393
|
*/
|
|
444
394
|
placeholder: PropTypes.string,
|
|
445
|
-
/**
|
|
446
|
-
* The text to be displayed if no options are provided.
|
|
447
|
-
*/
|
|
448
|
-
emptyOptionsPlaceholder: PropTypes.string,
|
|
449
395
|
/**
|
|
450
396
|
* Use custom key as label.
|
|
451
397
|
*/
|
|
@@ -478,6 +424,10 @@ MultiSelect.propTypes = {
|
|
|
478
424
|
* Toggle Search bar within the options dropdown to search through the options.
|
|
479
425
|
*/
|
|
480
426
|
isSearchable: PropTypes.bool,
|
|
427
|
+
/**
|
|
428
|
+
* Callback that will be called on Done button press
|
|
429
|
+
*/
|
|
430
|
+
onDonePress: PropTypes.func,
|
|
481
431
|
/**
|
|
482
432
|
* Show option to create the searched label if not present in the options list
|
|
483
433
|
*/
|
|
@@ -550,12 +500,15 @@ MultiSelect.propTypes = {
|
|
|
550
500
|
* To customise empty options placeholder text style.
|
|
551
501
|
*/
|
|
552
502
|
createSearchedOptionLabelStyle: PropTypes.object,
|
|
503
|
+
/**
|
|
504
|
+
* Component that renders when searched item doesn't exists
|
|
505
|
+
*/
|
|
506
|
+
CreateItemComponent: PropTypes.node,
|
|
553
507
|
};
|
|
554
508
|
|
|
555
509
|
MultiSelect.defaultProps = {
|
|
556
510
|
label: null,
|
|
557
511
|
placeholder: "Select Option",
|
|
558
|
-
emptyOptionsPlaceholder: null,
|
|
559
512
|
labelExtractor: option => option?.label,
|
|
560
513
|
valueExtractor: option => option?.value,
|
|
561
514
|
value: null,
|
|
@@ -568,4 +521,5 @@ MultiSelect.defaultProps = {
|
|
|
568
521
|
showCreateOptionLoader: false,
|
|
569
522
|
createOptionLabel: null,
|
|
570
523
|
onPressCreateOption: () => {},
|
|
524
|
+
onDonePress: () => {},
|
|
571
525
|
};
|
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Animated, StyleSheet } from "react-native";
|
|
3
|
+
import {
|
|
4
|
+
flexbox,
|
|
5
|
+
space,
|
|
6
|
+
border,
|
|
7
|
+
buttonStyle,
|
|
8
|
+
typography,
|
|
9
|
+
color,
|
|
10
|
+
} from "styled-system";
|
|
11
|
+
import styled from "styled-components/native";
|
|
3
12
|
import PropTypes from "prop-types";
|
|
4
13
|
import Icon from "react-native-remix-icon";
|
|
5
14
|
|
|
@@ -7,6 +16,15 @@ import { Container, Button } from "@components";
|
|
|
7
16
|
import { useDebounce } from "@hooks";
|
|
8
17
|
import { theme } from "@theme";
|
|
9
18
|
|
|
19
|
+
const TextInput = styled.TextInput`
|
|
20
|
+
${flexbox}
|
|
21
|
+
${space}
|
|
22
|
+
${border}
|
|
23
|
+
${buttonStyle}
|
|
24
|
+
${typography}
|
|
25
|
+
${color}
|
|
26
|
+
`;
|
|
27
|
+
|
|
10
28
|
/**
|
|
11
29
|
* SearchBars are used to search or filter items.
|
|
12
30
|
*
|