@bigbinary/neetoui-rn 0.0.107 → 0.0.110
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/MultiSelect.js +1 -0
- package/lib/components/OtpInputs.js +1 -1
- package/lib/components/Select.js +1 -1
- package/lib/components/index.js +1 -1
- package/package.json +1 -1
- package/src/components/MultiSelect.js +354 -0
- package/src/components/OtpInputs.js +11 -2
- package/src/components/Select.js +104 -88
- package/src/components/index.js +1 -0
|
@@ -0,0 +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 _reactNative=require("react-native");var _native=require("styled-components/native");var _=require("./");var _excluded=["options","label","value","placeholder","onSelect","isLoading","isSearchable","labelStyle","containerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","multiSelectedItemContainerStyle","multiSelectedItemTextStyle"];var _this=this,_jsxFileName="/Users/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 item=_ref.item,onUnselect=_ref.onUnselect,multiSelectedItemContainerStyle=_ref.multiSelectedItemContainerStyle,multiSelectedItemTextStyle=_ref.multiSelectedItemTextStyle;return _react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.base",bg:"background.grey100",borderRadius:2,flexDirection:"row",alignItems:"center",p:1,m:1},multiSelectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:3}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",mr:2},multiSelectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:5}}),item==null?void 0:item.label),_react.default.createElement(_.Touchable,{onPress:onUnselect,__self:_this,__source:{fileName:_jsxFileName,lineNumber:39,columnNumber:5}},_react.default.createElement(_reactNativeRemixIcon.default,{name:"ri-close-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:40,columnNumber:7}})));};MultiSelectItem.propTypes={item:_propTypes.default.object,onUnselect:_propTypes.default.func,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemTextStyle:_propTypes.default.object};var DropdownItem=function DropdownItem(_ref2){var item=_ref2.item,index=_ref2.index,onPress=_ref2.onPress,defaultDropdownItemHeight=_ref2.defaultDropdownItemHeight,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle;return _react.default.createElement(_.Touchable,{key:index,bg:"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:61,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:7}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:"font.grey"},itemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:9}}),item==null?void 0:item.label)));};DropdownItem.propTypes={item:_propTypes.default.object,index:_propTypes.default.number,onPress:_propTypes.default.func,defaultDropdownItemHeight:_propTypes.default.number,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object};var MultiSelect=function MultiSelect(_ref3){var options=_ref3.options,label=_ref3.label,value=_ref3.value,placeholder=_ref3.placeholder,onSelect=_ref3.onSelect,isLoading=_ref3.isLoading,isSearchable=_ref3.isSearchable,labelStyle=_ref3.labelStyle,containerStyle=_ref3.containerStyle,dropdownContainerStyle=_ref3.dropdownContainerStyle,itemContainerStyle=_ref3.itemContainerStyle,itemTextStyle=_ref3.itemTextStyle,multiSelectedItemContainerStyle=_ref3.multiSelectedItemContainerStyle,multiSelectedItemTextStyle=_ref3.multiSelectedItemTextStyle,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 multipleOptionsSelected=(value==null?void 0:value.length)>0;var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var handleUnselection=function handleUnselection(item){var newValue=value.filter(function(selectedItem){return selectedItem.value!==item.value;});onSelect(newValue);};return _react.default.createElement(_.Container,{elevation:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:165,columnNumber:5}},_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:function onPress(){setShowDropdown(!showDropdown);setSearchQuery("");},__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:7}},_react.default.createElement(_reactNative.View,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:182,columnNumber:9}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:multipleOptionsSelected?1:2,pr:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},containerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:183,columnNumber:11}}),!multipleOptionsSelected&&_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:15}},!multipleOptionsSelected&&placeholder),multipleOptionsSelected&&_react.default.createElement(_.Container,{flexWrap:"wrap",flexDirection:"row",maxWidth:"85%",__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,columnNumber:15}},value==null?void 0:value.map(function(item,index){return _react.default.createElement(MultiSelectItem,{key:index,item:item,index:index,onUnselect:function onUnselect(){return handleUnselection(item);},multiSelectedItemContainerStyle:multiSelectedItemContainerStyle,multiSelectedItemTextStyle:multiSelectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:202,columnNumber:19}});})),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:216,columnNumber:15}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:221,columnNumber:15}})))),showDropdown&&_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",position:"absolute",left:0,right:0,top:"100%",maxHeight:defaultDropdownItemHeight*6,elevation:5},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:232,columnNumber:9}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:245,columnNumber:13}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:246,columnNumber:15}})),_react.default.createElement(_reactNative.ScrollView,{nestedScrollEnabled:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:253,columnNumber:11}},options.filter(function(item){var isItemAlreadySelected=Boolean(value.find(function(selectedItem){return selectedItem.value===item.value;}));return!isItemAlreadySelected;}).filter(function(item){if(searchQuery.length===0)return true;return formatStr(item.label).includes(formatStr(searchQuery));}).map(function(item,index){return _react.default.createElement(DropdownItem,{key:index,item:item,index:index,onPress:function onPress(){return onSelect([].concat((0,_toConsumableArray2.default)(value),[item]));},itemContainerStyle:itemContainerStyle,defaultDropdownItemHeight:defaultDropdownItemHeight,itemTextStyle:itemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:17}});}))));};exports.MultiSelect=MultiSelect;MultiSelect.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string.isRequired,value:_propTypes.default.string.isRequired})).isRequired,placeholder:_propTypes.default.string,value:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.array]),onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,multiSelectedItemContainerStyle:_propTypes.default.object,multiSelectedItemTextStyle:_propTypes.default.object};MultiSelect.defaultProps={label:null,placeholder:"Select Option",value:null,onSelect:function onSelect(){},isLoading:false,isSearchable:false};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.OtpInputs=void 0;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 _theme=require("../theme");var _=require("./");var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/OtpInputs.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 styles={inputStyles:{fontSize:0,backgroundColor:"transparent",color:"transparent",width:"100%",height:"100%",position:"absolute"},defaultContainerStyles:{margin:2,borderRadius:6,borderWidth:1,borderColor:_theme.theme.colors.background.secondary,backgroundColor:_theme.theme.colors.background.white,justifyContent:"center",alignItems:"center",minHeight:45,minWidth:45},defaultTextStyles:{fontSize:_theme.theme.fontSizes.xl,fontFamily:_theme.theme.fonts.inter700}};var OtpInputs=function OtpInputs(_ref){var _ref$handleChange=_ref.handleChange,handleChange=_ref$handleChange===void 0?function(){}:_ref$handleChange,_ref$numberOfInputs=_ref.numberOfInputs,numberOfInputs=_ref$numberOfInputs===void 0?4:_ref$numberOfInputs,_ref$error=_ref.error,error=_ref$error===void 0?false:_ref$error,_ref$code=_ref.code,code=_ref$code===void 0?"":_ref$code,containerStyles=_ref.containerStyles,textStyles=_ref.textStyles;var inputRef=_react.default.useRef();(0,_react.useEffect)(function(){_reactNative.InteractionManager.runAfterInteractions(function(){if(inputRef!=null&&inputRef.current){inputRef.current.focus();}});},[inputRef]);return _react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:5}},_react.default.createElement(_.Touchable,{onPress:function onPress(){inputRef&&inputRef.current.focus();},__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}},_react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",justifyContent:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:85,columnNumber:9}},Array(numberOfInputs).fill().map(function(number,index){return _react.default.createElement(_.Container,(0,_extends2.default)({key:index},styles.defaultContainerStyles,containerStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:94,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({accessibilityLabel:"otp",color:error?_theme.theme.colors.font.danger:_theme.theme.colors.font.secondary},styles.defaultTextStyles,textStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:19}}),code[index]||""));}),_react.default.createElement(_.Input,(0,_extends2.default)({keyboardType:"phone-pad",selectionColor:"transparent",autoFocus:true,onChangeText:function onChangeText(value){if(!isNaN(value)){if(value.length<=numberOfInputs){handleChange&&handleChange(value);}if(value.length>=numberOfInputs){return _reactNative.Keyboard.dismiss();}}},ref:inputRef,value:code||""},styles.inputStyles,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:11}})))));};exports.OtpInputs=OtpInputs;OtpInputs.defaultProps={containerStyles:{},textStyles:{}};OtpInputs.propTypes={code:_propTypes.default.string.isRequired,numberOfInputs:_propTypes.default.number.isRequired,handleChange:_propTypes.default.func.isRequired,error:_propTypes.default.bool,containerStyles:_propTypes.default.object,textStyles:_propTypes.default.object};
|
package/lib/components/Select.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=void 0;var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Select=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 _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNative=require("react-native");var _native=require("styled-components/native");var _=require("./");var _excluded=["options","label","value","placeholder","onSelect","isLoading","isSearchable","labelStyle","containerStyle","dropdownContainerStyle","itemContainerStyle","itemTextStyle","selectedItemContainerStyle","selectedItemTextStyle"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.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 DropdownItem=function DropdownItem(_ref){var item=_ref.item,index=_ref.index,isSelectedItem=_ref.isSelectedItem,defaultDropdownItemHeight=_ref.defaultDropdownItemHeight,onPress=_ref.onPress,itemContainerStyle=_ref.itemContainerStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,itemTextStyle=_ref.itemTextStyle,selectedItemTextStyle=_ref.selectedItemTextStyle;return _react.default.createElement(_.Touchable,{key:index,bg:isSelectedItem?"background.base":"background.white",onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:20,columnNumber:3}},_react.default.createElement(_.Container,(0,_extends2.default)({height:defaultDropdownItemHeight,p:2},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:25,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",fontSize:"s",color:isSelectedItem?"font.white":"font.grey"},itemTextStyle,isSelectedItem&&selectedItemTextStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:31,columnNumber:7}}),item==null?void 0:item.label)));};DropdownItem.propTypes={item:_propTypes.default.object,index:_propTypes.default.number,isSelectedItem:_propTypes.default.bool,defaultDropdownItemHeight:_propTypes.default.number,onPress:_propTypes.default.func,itemContainerStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,selectedItemTextStyle:_propTypes.default.object};var Select=function Select(_ref2){var _options$selectedItem;var options=_ref2.options,label=_ref2.label,value=_ref2.value,placeholder=_ref2.placeholder,onSelect=_ref2.onSelect,isLoading=_ref2.isLoading,isSearchable=_ref2.isSearchable,labelStyle=_ref2.labelStyle,containerStyle=_ref2.containerStyle,dropdownContainerStyle=_ref2.dropdownContainerStyle,itemContainerStyle=_ref2.itemContainerStyle,itemTextStyle=_ref2.itemTextStyle,selectedItemContainerStyle=_ref2.selectedItemContainerStyle,selectedItemTextStyle=_ref2.selectedItemTextStyle,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);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 theme=(0,_react.useContext)(_native.ThemeContext);var selectedItemIndex=options==null?void 0:options.findIndex(function(item){return(item==null?void 0:item.value)===value;});var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||32;var formatStr=function formatStr(str){var _str$toLowerCase;return str==null?void 0:(_str$toLowerCase=str.toLowerCase())==null?void 0:_str$toLowerCase.trim();};var handleItemSelection=function handleItemSelection(item,index){setShowDropdown(false);onSelect(item,index);};return _react.default.createElement(_.Container,{elevation:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:130,columnNumber:5}},_react.default.createElement(_.Typography,(0,_extends2.default)({fontFamily:"inter400",mb:1,fontSize:"s",color:"font.base"},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:7}}),label),_react.default.createElement(_.Touchable,{disabled:isLoading,onPress:function onPress(){setShowDropdown(!showDropdown);setSearchQuery("");},__self:_this,__source:{fileName:_jsxFileName,lineNumber:140,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({borderWidth:1,borderColor:"border.grey400",p:2,flexDirection:"row",justifyContent:"space-between",alignItems:"center"},containerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:9}}),_react.default.createElement(_.Typography,{fontFamily:"inter400",fontSize:"s",color:"font.grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:157,columnNumber:11}},(options==null?void 0:(_options$selectedItem=options[selectedItemIndex])==null?void 0:_options$selectedItem.label)||placeholder),isLoading?_react.default.createElement(_reactNative.ActivityIndicator,{size:"small",color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:"20",color:"grey",__self:_this,__source:{fileName:_jsxFileName,lineNumber:166,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,(0,_extends2.default)({bg:"background.white",borderWidth:1,borderColor:"border.grey400",position:"absolute",left:0,right:0,top:"100%",maxHeight:defaultDropdownItemHeight*6,shadowOpacity:0.25,shadowRadius:3.84,"shadow-color":"#000",shadowOffset:{width:0,height:2},elevation:5},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:175,columnNumber:9}}),isSearchable&&_react.default.createElement(_.Container,{p:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:195,columnNumber:13}},_react.default.createElement(_.Input,{placeholder:"Search",onChangeText:setSearchQuery,fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:15}})),_react.default.createElement(_reactNative.ScrollView,{nestedScrollEnabled:true,__self:_this,__source:{fileName:_jsxFileName,lineNumber:203,columnNumber:11}},options.filter(function(item){if((searchQuery==null?void 0:searchQuery.length)===0)return true;return formatStr(item.label).includes(formatStr(searchQuery));}).map(function(item,index){return _react.default.createElement(DropdownItem,{key:index,item:item,index:index,isSelectedItem:(item==null?void 0:item.value)===value,defaultDropdownItemHeight:defaultDropdownItemHeight,onPress:function onPress(){return handleItemSelection(item,index);},itemContainerStyle:itemContainerStyle,selectedItemContainerStyle:selectedItemContainerStyle,itemTextStyle:itemTextStyle,selectedItemTextStyle:selectedItemTextStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:210,columnNumber:17}});}))));};exports.Select=Select;Select.propTypes={label:_propTypes.default.string,options:_propTypes.default.arrayOf(_propTypes.default.shape({label:_propTypes.default.string.isRequired,value:_propTypes.default.string.isRequired})).isRequired,placeholder:_propTypes.default.string,value:_propTypes.default.string,onSelect:_propTypes.default.func,isLoading:_propTypes.default.bool,isSearchable:_propTypes.default.bool,labelStyle:_propTypes.default.object,containerStyle:_propTypes.default.object,dropdownContainerStyle:_propTypes.default.object,itemContainerStyle:_propTypes.default.object,itemTextStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,selectedItemTextStyle:_propTypes.default.object};Select.defaultProps={label:null,placeholder:"Select Option",value:null,onSelect:function onSelect(){},isLoading:false,isSearchable:false};
|
package/lib/components/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");
|
|
1
|
+
Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"MultiSelect",{enumerable:true,get:function get(){return _MultiSelect.MultiSelect;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Select",{enumerable:true,get:function get(){return _Select.Select;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");var _Select=require("./Select");var _MultiSelect=require("./MultiSelect");
|
package/package.json
CHANGED
|
@@ -0,0 +1,354 @@
|
|
|
1
|
+
import React, { useState, useContext } from "react";
|
|
2
|
+
import Icon from "react-native-remix-icon";
|
|
3
|
+
import PropTypes from "prop-types";
|
|
4
|
+
import {
|
|
5
|
+
ActivityIndicator,
|
|
6
|
+
ScrollView,
|
|
7
|
+
View,
|
|
8
|
+
TouchableWithoutFeedback,
|
|
9
|
+
} from "react-native";
|
|
10
|
+
import { ThemeContext } from "styled-components/native";
|
|
11
|
+
|
|
12
|
+
import { Container, Input, Touchable, Typography, Card } from "@components";
|
|
13
|
+
|
|
14
|
+
const MultiSelectItem = ({
|
|
15
|
+
item,
|
|
16
|
+
onUnselect,
|
|
17
|
+
multiSelectedItemContainerStyle,
|
|
18
|
+
multiSelectedItemTextStyle,
|
|
19
|
+
}) => (
|
|
20
|
+
<Container
|
|
21
|
+
borderWidth={1}
|
|
22
|
+
borderColor="border.base"
|
|
23
|
+
bg="background.grey100"
|
|
24
|
+
borderRadius={2}
|
|
25
|
+
flexDirection="row"
|
|
26
|
+
alignItems="center"
|
|
27
|
+
p={1}
|
|
28
|
+
m={1}
|
|
29
|
+
{...multiSelectedItemContainerStyle}
|
|
30
|
+
>
|
|
31
|
+
<Typography
|
|
32
|
+
fontFamily="inter400"
|
|
33
|
+
fontSize="s"
|
|
34
|
+
mr={2}
|
|
35
|
+
{...multiSelectedItemTextStyle}
|
|
36
|
+
>
|
|
37
|
+
{item?.label}
|
|
38
|
+
</Typography>
|
|
39
|
+
<Touchable onPress={onUnselect}>
|
|
40
|
+
<Icon name="ri-close-line" size="20" color="grey" />
|
|
41
|
+
</Touchable>
|
|
42
|
+
</Container>
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
MultiSelectItem.propTypes = {
|
|
46
|
+
item: PropTypes.object,
|
|
47
|
+
onUnselect: PropTypes.func,
|
|
48
|
+
multiSelectedItemContainerStyle: PropTypes.object,
|
|
49
|
+
multiSelectedItemTextStyle: PropTypes.object,
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const DropdownItem = ({
|
|
53
|
+
item,
|
|
54
|
+
index,
|
|
55
|
+
onPress,
|
|
56
|
+
defaultDropdownItemHeight,
|
|
57
|
+
itemContainerStyle,
|
|
58
|
+
itemTextStyle,
|
|
59
|
+
}) => {
|
|
60
|
+
return (
|
|
61
|
+
<Touchable key={index} bg="background.white" onPress={onPress}>
|
|
62
|
+
<Container
|
|
63
|
+
height={defaultDropdownItemHeight}
|
|
64
|
+
p={2}
|
|
65
|
+
{...itemContainerStyle}
|
|
66
|
+
>
|
|
67
|
+
<Typography
|
|
68
|
+
fontFamily="inter400"
|
|
69
|
+
fontSize="s"
|
|
70
|
+
color="font.grey"
|
|
71
|
+
{...itemTextStyle}
|
|
72
|
+
>
|
|
73
|
+
{item?.label}
|
|
74
|
+
</Typography>
|
|
75
|
+
</Container>
|
|
76
|
+
</Touchable>
|
|
77
|
+
);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
DropdownItem.propTypes = {
|
|
81
|
+
item: PropTypes.object,
|
|
82
|
+
index: PropTypes.number,
|
|
83
|
+
onPress: PropTypes.func,
|
|
84
|
+
defaultDropdownItemHeight: PropTypes.number,
|
|
85
|
+
itemContainerStyle: PropTypes.object,
|
|
86
|
+
itemTextStyle: PropTypes.object,
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
/**
|
|
90
|
+
*
|
|
91
|
+
* MultiSelect can be used to select multiple options from a list of options.
|
|
92
|
+
*
|
|
93
|
+
* <div class="screenshots">
|
|
94
|
+
* <img src="screenshots/multiSelect/multiSelect.png" />
|
|
95
|
+
* </div>
|
|
96
|
+
*
|
|
97
|
+
* ## Usage
|
|
98
|
+
*
|
|
99
|
+
* ```js
|
|
100
|
+
* import * as React, { useState } from 'react';
|
|
101
|
+
* import { MultiSelect, Container } from '@bigbinary/neetoui-rn';
|
|
102
|
+
*
|
|
103
|
+
* const OPTIONS = [
|
|
104
|
+
* {
|
|
105
|
+
* label: "Option 1",
|
|
106
|
+
* value: "option_1"
|
|
107
|
+
* },
|
|
108
|
+
* {
|
|
109
|
+
* label: "Option 2",
|
|
110
|
+
* value: "option_2"
|
|
111
|
+
* },
|
|
112
|
+
* ]
|
|
113
|
+
*
|
|
114
|
+
* export default function Main() {
|
|
115
|
+
* const [selectedOptions, setSelectedOptions] = useState([])
|
|
116
|
+
*
|
|
117
|
+
* return (
|
|
118
|
+
* <Container>
|
|
119
|
+
* <MultiSelect
|
|
120
|
+
* label="Select"
|
|
121
|
+
* options={OPTIONS}
|
|
122
|
+
* value={selectedOptions}
|
|
123
|
+
* onSelect={setSelectedOptions}
|
|
124
|
+
* />
|
|
125
|
+
* </Container>
|
|
126
|
+
* );
|
|
127
|
+
* }
|
|
128
|
+
* ```
|
|
129
|
+
*
|
|
130
|
+
*/
|
|
131
|
+
|
|
132
|
+
export const MultiSelect = ({
|
|
133
|
+
options,
|
|
134
|
+
label,
|
|
135
|
+
value,
|
|
136
|
+
placeholder,
|
|
137
|
+
onSelect,
|
|
138
|
+
isLoading,
|
|
139
|
+
isSearchable,
|
|
140
|
+
labelStyle,
|
|
141
|
+
containerStyle,
|
|
142
|
+
dropdownContainerStyle,
|
|
143
|
+
itemContainerStyle,
|
|
144
|
+
itemTextStyle,
|
|
145
|
+
multiSelectedItemContainerStyle,
|
|
146
|
+
multiSelectedItemTextStyle,
|
|
147
|
+
...rest
|
|
148
|
+
}) => {
|
|
149
|
+
const theme = useContext(ThemeContext);
|
|
150
|
+
const [showDropdown, setShowDropdown] = useState(false);
|
|
151
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
152
|
+
|
|
153
|
+
const multipleOptionsSelected = value?.length > 0;
|
|
154
|
+
const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
|
|
155
|
+
const formatStr = str => str?.toLowerCase()?.trim();
|
|
156
|
+
|
|
157
|
+
const handleUnselection = item => {
|
|
158
|
+
const newValue = value.filter(
|
|
159
|
+
selectedItem => selectedItem.value !== item.value
|
|
160
|
+
);
|
|
161
|
+
onSelect(newValue);
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
return (
|
|
165
|
+
<Container elevation={0}>
|
|
166
|
+
<Typography
|
|
167
|
+
fontFamily="inter400"
|
|
168
|
+
mb={1}
|
|
169
|
+
fontSize="s"
|
|
170
|
+
color="font.base"
|
|
171
|
+
{...labelStyle}
|
|
172
|
+
>
|
|
173
|
+
{label}
|
|
174
|
+
</Typography>
|
|
175
|
+
<TouchableWithoutFeedback
|
|
176
|
+
disabled={isLoading}
|
|
177
|
+
onPress={() => {
|
|
178
|
+
setShowDropdown(!showDropdown);
|
|
179
|
+
setSearchQuery("");
|
|
180
|
+
}}
|
|
181
|
+
>
|
|
182
|
+
<View>
|
|
183
|
+
<Container
|
|
184
|
+
borderWidth={1}
|
|
185
|
+
borderColor="border.grey400"
|
|
186
|
+
p={multipleOptionsSelected ? 1 : 2}
|
|
187
|
+
pr={2}
|
|
188
|
+
flexDirection="row"
|
|
189
|
+
justifyContent="space-between"
|
|
190
|
+
alignItems="center"
|
|
191
|
+
{...containerStyle}
|
|
192
|
+
{...rest}
|
|
193
|
+
>
|
|
194
|
+
{!multipleOptionsSelected && (
|
|
195
|
+
<Typography fontFamily="inter400" fontSize="s" color="font.grey">
|
|
196
|
+
{!multipleOptionsSelected && placeholder}
|
|
197
|
+
</Typography>
|
|
198
|
+
)}
|
|
199
|
+
{multipleOptionsSelected && (
|
|
200
|
+
<Container flexWrap="wrap" flexDirection="row" maxWidth="85%">
|
|
201
|
+
{value?.map((item, index) => (
|
|
202
|
+
<MultiSelectItem
|
|
203
|
+
key={index}
|
|
204
|
+
item={item}
|
|
205
|
+
index={index}
|
|
206
|
+
onUnselect={() => handleUnselection(item)}
|
|
207
|
+
multiSelectedItemContainerStyle={
|
|
208
|
+
multiSelectedItemContainerStyle
|
|
209
|
+
}
|
|
210
|
+
multiSelectedItemTextStyle={multiSelectedItemTextStyle}
|
|
211
|
+
/>
|
|
212
|
+
))}
|
|
213
|
+
</Container>
|
|
214
|
+
)}
|
|
215
|
+
{isLoading ? (
|
|
216
|
+
<ActivityIndicator
|
|
217
|
+
size="small"
|
|
218
|
+
color={theme.colors.background.base}
|
|
219
|
+
/>
|
|
220
|
+
) : (
|
|
221
|
+
<Icon
|
|
222
|
+
name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
|
|
223
|
+
size="20"
|
|
224
|
+
color="grey"
|
|
225
|
+
/>
|
|
226
|
+
)}
|
|
227
|
+
</Container>
|
|
228
|
+
</View>
|
|
229
|
+
</TouchableWithoutFeedback>
|
|
230
|
+
|
|
231
|
+
{showDropdown && (
|
|
232
|
+
<Card
|
|
233
|
+
bg="background.white"
|
|
234
|
+
borderWidth={1}
|
|
235
|
+
borderColor="border.grey400"
|
|
236
|
+
position="absolute"
|
|
237
|
+
left={0}
|
|
238
|
+
right={0}
|
|
239
|
+
top="100%"
|
|
240
|
+
maxHeight={defaultDropdownItemHeight * 6}
|
|
241
|
+
elevation={5}
|
|
242
|
+
{...dropdownContainerStyle}
|
|
243
|
+
>
|
|
244
|
+
{isSearchable && (
|
|
245
|
+
<Container p={1}>
|
|
246
|
+
<Input
|
|
247
|
+
placeholder="Search"
|
|
248
|
+
onChangeText={setSearchQuery}
|
|
249
|
+
fontSize="s"
|
|
250
|
+
/>
|
|
251
|
+
</Container>
|
|
252
|
+
)}
|
|
253
|
+
<ScrollView nestedScrollEnabled={true}>
|
|
254
|
+
{options
|
|
255
|
+
.filter(item => {
|
|
256
|
+
const isItemAlreadySelected = Boolean(
|
|
257
|
+
value.find(selectedItem => selectedItem.value === item.value)
|
|
258
|
+
);
|
|
259
|
+
return !isItemAlreadySelected;
|
|
260
|
+
})
|
|
261
|
+
.filter(item => {
|
|
262
|
+
if (searchQuery.length === 0) return true;
|
|
263
|
+
return formatStr(item.label).includes(formatStr(searchQuery));
|
|
264
|
+
})
|
|
265
|
+
.map((item, index) => (
|
|
266
|
+
<DropdownItem
|
|
267
|
+
key={index}
|
|
268
|
+
item={item}
|
|
269
|
+
index={index}
|
|
270
|
+
onPress={() => onSelect([...value, item])}
|
|
271
|
+
itemContainerStyle={itemContainerStyle}
|
|
272
|
+
defaultDropdownItemHeight={defaultDropdownItemHeight}
|
|
273
|
+
itemTextStyle={itemTextStyle}
|
|
274
|
+
/>
|
|
275
|
+
))}
|
|
276
|
+
</ScrollView>
|
|
277
|
+
</Card>
|
|
278
|
+
)}
|
|
279
|
+
</Container>
|
|
280
|
+
);
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
MultiSelect.propTypes = {
|
|
284
|
+
/**
|
|
285
|
+
* The text to use for the floating label.
|
|
286
|
+
*/
|
|
287
|
+
label: PropTypes.string,
|
|
288
|
+
/**
|
|
289
|
+
* options to populate the options dropdown.
|
|
290
|
+
*/
|
|
291
|
+
options: PropTypes.arrayOf(
|
|
292
|
+
PropTypes.shape({
|
|
293
|
+
label: PropTypes.string.isRequired,
|
|
294
|
+
value: PropTypes.string.isRequired,
|
|
295
|
+
})
|
|
296
|
+
).isRequired,
|
|
297
|
+
/**
|
|
298
|
+
* The text to be displayed if no option is selected.
|
|
299
|
+
*/
|
|
300
|
+
placeholder: PropTypes.string,
|
|
301
|
+
/**
|
|
302
|
+
* The selected value to show for the Select input.
|
|
303
|
+
*/
|
|
304
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
|
|
305
|
+
/**
|
|
306
|
+
* Callback function when an option is selected, receives the select option object.
|
|
307
|
+
*/
|
|
308
|
+
onSelect: PropTypes.func,
|
|
309
|
+
/**
|
|
310
|
+
* Used to show if the dropdown is loading state, while loading Select input will be disabled.
|
|
311
|
+
*/
|
|
312
|
+
isLoading: PropTypes.bool,
|
|
313
|
+
/**
|
|
314
|
+
* Toggle Search bar within the options dropdown to search through the options.
|
|
315
|
+
*/
|
|
316
|
+
isSearchable: PropTypes.bool,
|
|
317
|
+
/**
|
|
318
|
+
* To customise floating label styles.
|
|
319
|
+
*/
|
|
320
|
+
labelStyle: PropTypes.object,
|
|
321
|
+
/**
|
|
322
|
+
* To customise Select input container styles.
|
|
323
|
+
*/
|
|
324
|
+
containerStyle: PropTypes.object,
|
|
325
|
+
/**
|
|
326
|
+
* To customise dropdown container styles.
|
|
327
|
+
*/
|
|
328
|
+
dropdownContainerStyle: PropTypes.object,
|
|
329
|
+
/**
|
|
330
|
+
* To customise dropdown item container styles.
|
|
331
|
+
*/
|
|
332
|
+
itemContainerStyle: PropTypes.object,
|
|
333
|
+
/**
|
|
334
|
+
* To customise dropdown item text styles.
|
|
335
|
+
*/
|
|
336
|
+
itemTextStyle: PropTypes.object,
|
|
337
|
+
/**
|
|
338
|
+
* To customise item container styles for multi selected items.
|
|
339
|
+
*/
|
|
340
|
+
multiSelectedItemContainerStyle: PropTypes.object,
|
|
341
|
+
/**
|
|
342
|
+
* To customise item text styles for multi selected item.
|
|
343
|
+
*/
|
|
344
|
+
multiSelectedItemTextStyle: PropTypes.object,
|
|
345
|
+
};
|
|
346
|
+
|
|
347
|
+
MultiSelect.defaultProps = {
|
|
348
|
+
label: null,
|
|
349
|
+
placeholder: "Select Option",
|
|
350
|
+
value: null,
|
|
351
|
+
onSelect: () => {},
|
|
352
|
+
isLoading: false,
|
|
353
|
+
isSearchable: false,
|
|
354
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { Keyboard } from "react-native";
|
|
1
|
+
import React, { useEffect } from "react";
|
|
2
|
+
import { InteractionManager, Keyboard } from "react-native";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
4
|
|
|
5
5
|
import { theme } from "../theme";
|
|
@@ -66,6 +66,14 @@ export const OtpInputs = ({
|
|
|
66
66
|
textStyles,
|
|
67
67
|
}) => {
|
|
68
68
|
const inputRef = React.useRef();
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
// Must run after animations for keyboard to automatically open
|
|
71
|
+
InteractionManager.runAfterInteractions(() => {
|
|
72
|
+
if (inputRef?.current) {
|
|
73
|
+
inputRef.current.focus();
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
}, [inputRef]);
|
|
69
77
|
|
|
70
78
|
return (
|
|
71
79
|
<Container>
|
|
@@ -106,6 +114,7 @@ export const OtpInputs = ({
|
|
|
106
114
|
<Input
|
|
107
115
|
keyboardType="phone-pad"
|
|
108
116
|
selectionColor="transparent"
|
|
117
|
+
autoFocus={true}
|
|
109
118
|
onChangeText={value => {
|
|
110
119
|
if (!isNaN(value)) {
|
|
111
120
|
if (value.length <= numberOfInputs) {
|
package/src/components/Select.js
CHANGED
|
@@ -1,11 +1,58 @@
|
|
|
1
|
-
import React, { useState, useContext
|
|
1
|
+
import React, { useState, useContext } from "react";
|
|
2
2
|
import Icon from "react-native-remix-icon";
|
|
3
3
|
import PropTypes from "prop-types";
|
|
4
|
-
import { ActivityIndicator, ScrollView
|
|
4
|
+
import { ActivityIndicator, ScrollView } from "react-native";
|
|
5
5
|
import { ThemeContext } from "styled-components/native";
|
|
6
6
|
|
|
7
7
|
import { Container, Input, Touchable, Typography } from "@components";
|
|
8
8
|
|
|
9
|
+
const DropdownItem = ({
|
|
10
|
+
item,
|
|
11
|
+
index,
|
|
12
|
+
isSelectedItem,
|
|
13
|
+
defaultDropdownItemHeight,
|
|
14
|
+
onPress,
|
|
15
|
+
itemContainerStyle,
|
|
16
|
+
selectedItemContainerStyle,
|
|
17
|
+
itemTextStyle,
|
|
18
|
+
selectedItemTextStyle,
|
|
19
|
+
}) => (
|
|
20
|
+
<Touchable
|
|
21
|
+
key={index}
|
|
22
|
+
bg={isSelectedItem ? "background.base" : "background.white"}
|
|
23
|
+
onPress={onPress}
|
|
24
|
+
>
|
|
25
|
+
<Container
|
|
26
|
+
height={defaultDropdownItemHeight}
|
|
27
|
+
p={2}
|
|
28
|
+
{...itemContainerStyle}
|
|
29
|
+
{...(isSelectedItem && selectedItemContainerStyle)}
|
|
30
|
+
>
|
|
31
|
+
<Typography
|
|
32
|
+
fontFamily="inter400"
|
|
33
|
+
fontSize="s"
|
|
34
|
+
color={isSelectedItem ? "font.white" : "font.grey"}
|
|
35
|
+
{...itemTextStyle}
|
|
36
|
+
{...(isSelectedItem && selectedItemTextStyle)}
|
|
37
|
+
>
|
|
38
|
+
{item?.label}
|
|
39
|
+
</Typography>
|
|
40
|
+
</Container>
|
|
41
|
+
</Touchable>
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
DropdownItem.propTypes = {
|
|
45
|
+
item: PropTypes.object,
|
|
46
|
+
index: PropTypes.number,
|
|
47
|
+
isSelectedItem: PropTypes.bool,
|
|
48
|
+
defaultDropdownItemHeight: PropTypes.number,
|
|
49
|
+
onPress: PropTypes.func,
|
|
50
|
+
itemContainerStyle: PropTypes.object,
|
|
51
|
+
selectedItemContainerStyle: PropTypes.object,
|
|
52
|
+
itemTextStyle: PropTypes.object,
|
|
53
|
+
selectedItemTextStyle: PropTypes.object,
|
|
54
|
+
};
|
|
55
|
+
|
|
9
56
|
/**
|
|
10
57
|
*
|
|
11
58
|
* Select can be used to select an option from a list of options.
|
|
@@ -51,7 +98,7 @@ import { Container, Input, Touchable, Typography } from "@components";
|
|
|
51
98
|
*/
|
|
52
99
|
|
|
53
100
|
export const Select = ({
|
|
54
|
-
|
|
101
|
+
options,
|
|
55
102
|
label,
|
|
56
103
|
value,
|
|
57
104
|
placeholder,
|
|
@@ -67,66 +114,18 @@ export const Select = ({
|
|
|
67
114
|
selectedItemTextStyle,
|
|
68
115
|
...rest
|
|
69
116
|
}) => {
|
|
70
|
-
const [options, setOptions] = useState(data);
|
|
71
117
|
const [showDropdown, setShowDropdown] = useState(false);
|
|
72
|
-
const
|
|
118
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
73
119
|
const theme = useContext(ThemeContext);
|
|
74
|
-
const selectedItemIndex =
|
|
120
|
+
const selectedItemIndex = options?.findIndex(item => item?.value === value);
|
|
75
121
|
const defaultDropdownItemHeight = itemContainerStyle?.height || 32;
|
|
122
|
+
const formatStr = str => str?.toLowerCase()?.trim();
|
|
76
123
|
|
|
77
124
|
const handleItemSelection = (item, index) => {
|
|
78
125
|
setShowDropdown(false);
|
|
79
126
|
onSelect(item, index);
|
|
80
127
|
};
|
|
81
128
|
|
|
82
|
-
const handleSearchOption = useCallback(
|
|
83
|
-
searchTerm => {
|
|
84
|
-
const qualifiedOptions = data?.filter(option =>
|
|
85
|
-
option?.label
|
|
86
|
-
?.toLowerCase()
|
|
87
|
-
?.trim()
|
|
88
|
-
?.includes(searchTerm?.toLowerCase()?.trim())
|
|
89
|
-
);
|
|
90
|
-
setOptions(qualifiedOptions);
|
|
91
|
-
},
|
|
92
|
-
[data]
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
const DropdownItem = ({ item, index }) => {
|
|
96
|
-
const isSelectedItem = index === selectedItemIndex;
|
|
97
|
-
return (
|
|
98
|
-
<Touchable
|
|
99
|
-
key={index}
|
|
100
|
-
bg={isSelectedItem ? "background.base" : "background.white"}
|
|
101
|
-
onPress={() => {
|
|
102
|
-
handleItemSelection(item, index);
|
|
103
|
-
}}
|
|
104
|
-
>
|
|
105
|
-
<Container
|
|
106
|
-
height={defaultDropdownItemHeight}
|
|
107
|
-
p={2}
|
|
108
|
-
{...itemContainerStyle}
|
|
109
|
-
{...(isSelectedItem && selectedItemContainerStyle)}
|
|
110
|
-
>
|
|
111
|
-
<Typography
|
|
112
|
-
fontFamily="inter400"
|
|
113
|
-
fontSize="s"
|
|
114
|
-
color={isSelectedItem ? "font.white" : "font.grey"}
|
|
115
|
-
{...itemTextStyle}
|
|
116
|
-
{...(isSelectedItem && selectedItemTextStyle)}
|
|
117
|
-
>
|
|
118
|
-
{item?.label}
|
|
119
|
-
</Typography>
|
|
120
|
-
</Container>
|
|
121
|
-
</Touchable>
|
|
122
|
-
);
|
|
123
|
-
};
|
|
124
|
-
|
|
125
|
-
DropdownItem.propTypes = {
|
|
126
|
-
item: PropTypes.object,
|
|
127
|
-
index: PropTypes.number,
|
|
128
|
-
};
|
|
129
|
-
|
|
130
129
|
return (
|
|
131
130
|
<Container elevation={0}>
|
|
132
131
|
<Typography
|
|
@@ -140,36 +139,37 @@ export const Select = ({
|
|
|
140
139
|
</Typography>
|
|
141
140
|
<Touchable
|
|
142
141
|
disabled={isLoading}
|
|
143
|
-
onPress={() =>
|
|
142
|
+
onPress={() => {
|
|
143
|
+
setShowDropdown(!showDropdown);
|
|
144
|
+
setSearchQuery("");
|
|
145
|
+
}}
|
|
144
146
|
>
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
>
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
</Container>
|
|
172
|
-
</View>
|
|
147
|
+
<Container
|
|
148
|
+
borderWidth={1}
|
|
149
|
+
borderColor="border.grey400"
|
|
150
|
+
p={2}
|
|
151
|
+
flexDirection="row"
|
|
152
|
+
justifyContent="space-between"
|
|
153
|
+
alignItems="center"
|
|
154
|
+
{...containerStyle}
|
|
155
|
+
{...rest}
|
|
156
|
+
>
|
|
157
|
+
<Typography fontFamily="inter400" fontSize="s" color="font.grey">
|
|
158
|
+
{options?.[selectedItemIndex]?.label || placeholder}
|
|
159
|
+
</Typography>
|
|
160
|
+
{isLoading ? (
|
|
161
|
+
<ActivityIndicator
|
|
162
|
+
size="small"
|
|
163
|
+
color={theme.colors.background.base}
|
|
164
|
+
/>
|
|
165
|
+
) : (
|
|
166
|
+
<Icon
|
|
167
|
+
name={`arrow-${showDropdown ? "up" : "down"}-s-line`}
|
|
168
|
+
size="20"
|
|
169
|
+
color="grey"
|
|
170
|
+
/>
|
|
171
|
+
)}
|
|
172
|
+
</Container>
|
|
173
173
|
</Touchable>
|
|
174
174
|
{showDropdown && (
|
|
175
175
|
<Container
|
|
@@ -195,15 +195,31 @@ export const Select = ({
|
|
|
195
195
|
<Container p={1}>
|
|
196
196
|
<Input
|
|
197
197
|
placeholder="Search"
|
|
198
|
-
onChangeText={
|
|
198
|
+
onChangeText={setSearchQuery}
|
|
199
199
|
fontSize="s"
|
|
200
200
|
/>
|
|
201
201
|
</Container>
|
|
202
202
|
)}
|
|
203
203
|
<ScrollView nestedScrollEnabled={true}>
|
|
204
|
-
{options
|
|
205
|
-
|
|
206
|
-
|
|
204
|
+
{options
|
|
205
|
+
.filter(item => {
|
|
206
|
+
if (searchQuery?.length === 0) return true;
|
|
207
|
+
return formatStr(item.label).includes(formatStr(searchQuery));
|
|
208
|
+
})
|
|
209
|
+
.map((item, index) => (
|
|
210
|
+
<DropdownItem
|
|
211
|
+
key={index}
|
|
212
|
+
item={item}
|
|
213
|
+
index={index}
|
|
214
|
+
isSelectedItem={item?.value === value}
|
|
215
|
+
defaultDropdownItemHeight={defaultDropdownItemHeight}
|
|
216
|
+
onPress={() => handleItemSelection(item, index)}
|
|
217
|
+
itemContainerStyle={itemContainerStyle}
|
|
218
|
+
selectedItemContainerStyle={selectedItemContainerStyle}
|
|
219
|
+
itemTextStyle={itemTextStyle}
|
|
220
|
+
selectedItemTextStyle={selectedItemTextStyle}
|
|
221
|
+
/>
|
|
222
|
+
))}
|
|
207
223
|
</ScrollView>
|
|
208
224
|
</Container>
|
|
209
225
|
)}
|
|
@@ -219,7 +235,7 @@ Select.propTypes = {
|
|
|
219
235
|
/**
|
|
220
236
|
* Data to populate the options dropdown.
|
|
221
237
|
*/
|
|
222
|
-
|
|
238
|
+
options: PropTypes.arrayOf(
|
|
223
239
|
PropTypes.shape({
|
|
224
240
|
label: PropTypes.string.isRequired,
|
|
225
241
|
value: PropTypes.string.isRequired,
|
package/src/components/index.js
CHANGED