@bigbinary/neetoui-rn 0.0.243 → 0.0.245

package/src/components/CheckBox.jsx

@@ -5,7 +5,7 @@ import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
-import { Container, Typography, Touchable } from "@components";
+import { Typography, Touchable } from "@components";
 
 /**
  *
@@ -59,34 +59,26 @@ export const CheckBox = ({
   onSelect,
   disabled,
   label,
-  checkboxStyle,
   checkIconStyle,
   labelStyle,
   ...rest
 }) => {
   const theme = useContext(ThemeContext);
   const disabledProps = {
-    bg: theme.colors.background[checked ? "grey400" : "white"],
     labelProps: {
       color: theme.colors.font.grey400,
     },
   };
 
   const checkedProps = {
-    bg: theme.colors.background.base,
     labelProps: {
-      fontFamily: theme.fonts.sf500,
-      color: theme.colors.font.primary,
+      fontFamily: theme.fonts.sf600,
     },
   };
 
   const unCheckedProps = {
-    bg: theme.colors.background.white,
-    borderWidth: moderateScale(1),
-    borderColor: theme.colors.border.secondary,
     labelProps: {
       fontFamily: theme.fonts.sf400,
-      color: theme.colors.font.secondary,
     },
   };
 
@@ -96,33 +88,14 @@ export const CheckBox = ({
       disabled={disabled}
       flexDirection="row"
       flexShrink={1}
+      py={moderateScale(8)}
       onPress={onSelect}
       {...rest}
     >
-      <Container
-        alignItems="center"
-        borderRadius={moderateScale(3)}
-        height={moderateScale(16)}
-        justifyContent="center"
-        width={moderateScale(16)}
-        {...(!checked && unCheckedProps)}
-        {...(checked && checkedProps)}
-        {...(disabled && disabledProps)}
-        {...checkboxStyle}
-      >
-        {checked && (
-          <Icon
-            color={theme.colors.font.white}
-            name="ri-check-line"
-            size={moderateScale(14)}
-            {...checkIconStyle}
-          />
-        )}
-      </Container>
       <Typography
         flex={1}
         fontSize="m"
-        ml={moderateScale(8)}
+        lineHeight={`${moderateScale(22)}px`}
         {...(checked && checkedProps.labelProps)}
         {...(!checked && unCheckedProps.labelProps)}
         {...(disabled && disabledProps.labelProps)}
@@ -130,6 +103,12 @@ export const CheckBox = ({
       >
         {label}
       </Typography>
+      <Icon
+        color={theme.colors.font.primary}
+        name={checked ? "checkbox-line" : "checkbox-blank-line"}
+        size={moderateScale(20)}
+        {...checkIconStyle}
+      />
     </Touchable>
   );
 };
@@ -151,10 +130,6 @@ CheckBox.propTypes = {
    * Text label to be shown with radio button.
    */
   label: Proptypes.string,
-  /**
-   * Customize checkbox style.
-   */
-  checkboxStyle: Proptypes.object,
   /**
    * Customize check icon style.
    */

package/src/components/InputEmailChip.jsx

@@ -66,8 +66,6 @@ export const InputEmailChip = ({
   const handleInputTouchStart = () => setEmailIndexForDeletion(-1);
 
   const handleTouchStart = () => {
-    if (disabled) return;
-
     if (!inputRef.current?.isFocused()) {
       inputRef.current?.focus();
     }
@@ -81,6 +79,10 @@ export const InputEmailChip = ({
     }
   };
 
+  const handleOnEndEditing = event => {
+      checkAndUpdateEmails(event.nativeEvent.text);
+  };
+
   const checkAndUpdateEmails = text => {
     const emailCandidate = trimChars(text, delimiters);
 
@@ -181,17 +183,21 @@ export const InputEmailChip = ({
                 onTouchStart: handleInputTouchStart,
                 onFocus: handleOnFocus,
                 onBlur: handleOnBlur,
+                onEndEditing: handleOnEndEditing,
               }}
               onChangeText={handleTextChange}
             />
           </Container>
         )}
       </Container>
-      <TextInput
-        editable={false}
-        style={styles.touchableTextInputWrapper}
-        onTouchStart={handleTouchStart}
-      />
+      {!disabled && (
+        <TextInput
+          editable={false}
+          pointerEvents={shouldShowInput ? "box-none" : "auto"}
+          style={styles.touchableTextInputWrapper}
+          onTouchStart={handleTouchStart}
+        />
+      )}
     </Container>
   );
 };
@@ -203,7 +209,6 @@ const styles = StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    backgroundColor: "transparent",
   },
 });
 

package/src/components/MultiSelect.jsx

@@ -282,14 +282,12 @@ export const MultiSelect = ({
     );
 
     return (
-      <Container py={moderateScale(12)}>
-        <CheckBox
-          checked={itemIndex !== -1}
-          disabled={disabled}
-          label={item?.label || labelExtractor(item, index) || item}
-          onSelect={onPress}
-        />
-      </Container>
+      <CheckBox
+        checked={itemIndex !== -1}
+        disabled={disabled}
+        label={item?.label || labelExtractor(item, index) || item}
+        onSelect={onPress}
+      />
     );
   };
 
@@ -402,9 +400,10 @@ export const MultiSelect = ({
                       borderRadius={moderateScale(12)}
                       flexDirection="row"
                       justifyContent="space-between"
-                      m={moderateScale(1)}
-                      px={moderateScale(3)}
-                      py={moderateScale(1)}
+                      mr={moderateScale(4)}
+                      mt={moderateScale(4)}
+                      px={moderateScale(10)}
+                      py={moderateScale(4)}
                       {...moreItemLabelContainerStyle}
                     >
                       <Typography {...moreItemLabelStyle}>

package/src/components/NotificationPreferenceList.jsx

@@ -3,7 +3,13 @@ import React from "react";
 import PropTypes from "prop-types";
 import { moderateScale } from "react-native-size-matters";
 
-import { Container, Typography, Divider, ToggleSwitch } from "@components";
+import {
+  Container,
+  Typography,
+  Divider,
+  ToggleSwitch,
+  Loader,
+} from "@components";
 
 /**
  *
@@ -76,63 +82,87 @@ import { Container, Typography, Divider, ToggleSwitch } from "@components";
  *
  */
 
+const lineHeight = moderateScale(22);
 export const NotificationPreferenceList = ({
+  isLoading,
   data,
   itemWrapperProps,
   itemContainerProps,
   labelContainerProps,
   labelProps,
+  title,
+  titleProps,
   ...rest
 }) => (
-  <Container
-    bg="background.secondary"
-    borderRadius={moderateScale(8)}
-    {...rest}
-  >
-    {data?.map((item, index) => {
-      const { label, enabled, onSwitch, LeftIcon } = item;
-      const isLastItem = index === data.length - 1;
+  <Container width="100%">
+    <Container
+      alignItems="center"
+      flexDirection="row"
+      pb={moderateScale(8)}
+      pt={moderateScale(16)}
+    >
+      {!!title && (
+        <Typography
+          color="font.grey600"
+          fontSize="2xl"
+          lineHeight={`${lineHeight}px`}
+          {...titleProps}
+        >
+          {title}
+        </Typography>
+      )}
+      {isLoading && (
+        <Container
+          height={lineHeight}
+          justifyContent="center"
+          mx={moderateScale(8)}
+        >
+          <Loader />
+        </Container>
+      )}
+    </Container>
+    <Container
+      bg="background.secondary"
+      borderRadius={moderateScale(8)}
+      {...rest}
+    >
+      {data?.map((item, index) => {
+        const { label, enabled, onSwitch, LeftIcon } = item;
+        const isLastItem = index === data.length - 1;
 
-      return (
-        <Container key={index} px={moderateScale(12)} {...itemWrapperProps}>
-          <Container
-            alignItems="center"
-            flexDirection="row"
-            justifyContent="space-between"
-            py={moderateScale(15)}
-            {...itemContainerProps}
-          >
+        return (
+          <Container key={index} px={moderateScale(16)} {...itemWrapperProps}>
             <Container
               alignItems="center"
               flexDirection="row"
-              pr={moderateScale(15)}
-              width="85%"
-              {...labelContainerProps}
+              justifyContent="space-between"
+              py={moderateScale(12)}
+              {...itemContainerProps}
             >
-              {LeftIcon && (
-                <Container mr={moderateScale(10)}>
-                  <LeftIcon />
-                </Container>
-              )}
-              <Typography
-                color="font.grey800"
-                fontFamily="sf400"
-                fontSize="l"
-                {...labelProps}
+              <Container
+                alignItems="center"
+                flexDirection="row"
+                {...labelContainerProps}
               >
-                {label}
-              </Typography>
+                {LeftIcon && (
+                  <Container mr={moderateScale(10)}>
+                    <LeftIcon />
+                  </Container>
+                )}
+                <Typography fontSize="l" mr={moderateScale(10)} {...labelProps}>
+                  {label}
+                </Typography>
+              </Container>
+              <ToggleSwitch
+                value={enabled}
+                onValueChange={() => onSwitch(item, index)}
+              />
             </Container>
-            <ToggleSwitch
-              mt={moderateScale(4)}
-              value={enabled}
-              onValueChange={() => onSwitch(item, index)}
-            />
+            {!isLastItem && <Divider bg="background.grey300" />}
           </Container>
-          {!isLastItem && <Divider bg="background.grey300" />}
-        </Container>
-      );
-    })}
+        );
+      })}
+    </Container>
   </Container>
 );
 
@@ -157,4 +187,16 @@ NotificationPreferenceList.propTypes = {
    * Customize item label
    */
   labelProps: PropTypes.object,
+  /**
+   * Title value.
+   */
+  title: PropTypes.string,
+  /**
+   * Customize title style.
+   */
+  titleProps: PropTypes.string,
+  /**
+   * Show loader
+   */
+  isLoading: PropTypes.bool,
 };

package/src/components/RadioButton.jsx

@@ -1,10 +1,11 @@
 import React, { useContext } from "react";
 
 import Proptypes from "prop-types";
+import Icon from "react-native-remix-icon";
 import { moderateScale } from "react-native-size-matters";
 import { ThemeContext } from "styled-components/native";
 
-import { Container, Typography, Touchable } from "@components";
+import { Typography, Touchable } from "@components";
 
 /**
  *
@@ -59,7 +60,7 @@ export const RadioButton = ({
   onSelect,
   disabled,
   label,
-  radioButtonStyle,
+  selectIconStyle,
   labelStyle,
   ...rest
 }) => {
@@ -94,23 +95,15 @@ export const RadioButton = ({
       alignItems="center"
       disabled={disabled}
       flexDirection="row"
+      py={moderateScale(8)}
       onPress={onSelect}
       {...rest}
     >
-      <Container
-        bg={theme.colors.background.white}
-        borderRadius={moderateScale(8)}
-        height={moderateScale(16)}
-        width={moderateScale(16)}
-        {...(selected && selectedProps)}
-        {...(!selected && unselectedProps)}
-        {...(disabled && disabledProps)}
-        {...radioButtonStyle}
-      />
       <Typography
+        color="font.primary"
         flex={1}
         fontSize="m"
-        ml={moderateScale(8)}
+        lineHeight={`${moderateScale(22)}px`}
         {...(selected && selectedProps.labelProps)}
         {...(!selected && unselectedProps.labelProps)}
         {...(disabled && disabledProps.labelProps)}
@@ -118,6 +111,12 @@ export const RadioButton = ({
       >
         {label}
       </Typography>
+      <Icon
+        color={theme.colors.font.primary}
+        name={selected ? "ri-radio-button-line" : "checkbox-blank-circle-line"}
+        size={moderateScale(20)}
+        {...selectIconStyle}
+      />
     </Touchable>
   );
 };
@@ -142,7 +141,7 @@ RadioButton.propTypes = {
   /**
    * Customize radio button style.
    */
-  radioButtonStyle: Proptypes.object,
+  selectIconStyle: Proptypes.object,
   /**
    * Customize label style.
    */

package/src/components/ToggleSwitch.jsx

@@ -67,6 +67,7 @@ export const ToggleSwitch = ({ value, onValueChange, disabled }) => {
       borderRadius={moderateScale(70)}
       disabled={disabled}
       height={moderateScale(24)}
+      hitSlop={10}
       justifyContent="center"
       opacity={disabled ? 0.5 : 1}
       px={moderateScale(5)}

package/src/components/Touchable.jsx

@@ -65,7 +65,7 @@ const StyledRipple = styled(Ripple)`
 
 const defaultRippleConfig = {
   rippleCentered: false,
-  rippleSequential: false,
+  rippleSequential: true,
   rippleFades: true,
   rippleOutsideContainer: false,
   rippleColor: "#000",

package/src/components/index.js

@@ -21,7 +21,6 @@ export { Card } from "./Card";
 export { TopBar } from "./TopBar";
 export { RadioButton } from "./RadioButton";
 export { CheckBox } from "./CheckBox";
-export { Select } from "./Select";
 export { MultiSelect } from "./MultiSelect";
 export { Divider } from "./Divider";
 export { FlatList } from "./FlatList";
@@ -40,4 +39,3 @@ export { NotificationPreferenceList } from "./NotificationPreferenceList";
 export { OrganizationItem } from "./OrganizationItem";
 export { Loader } from "./Loader";
 export { InputEmailChip } from "./InputEmailChip";
-export { SelectButton } from "./SelectButton";

package/lib/components/Select.js

@@ -1 +0,0 @@
-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 _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./");var _excluded=["options","label","value","placeholder","emptyOptionsPlaceholder","labelExtractor","valueExtractor","onSelect","isLoading","isSearchable","showCreateOption","showCreateOptionLoader","createOptionLabel","onPressCreateOption","labelStyle","containerStyle","inputContainerStyle","dropdownContainerStyle","itemContainerStyle","itemLabelStyle","selectedItemContainerStyle","selectedItemLabelStyle","searchInputContainerStyle","searchInputStyle","emptyOptionsContainerStyle","emptyOptionsLabelStyle","createSearchedOptionContainerStyle","createSearchedOptionLabelStyle"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Select.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var DropdownItem=function DropdownItem(_ref){var label=_ref.label,isSelectedItem=_ref.isSelectedItem,defaultDropdownItemHeight=_ref.defaultDropdownItemHeight,onPress=_ref.onPress,itemContainerStyle=_ref.itemContainerStyle,selectedItemContainerStyle=_ref.selectedItemContainerStyle,itemLabelStyle=_ref.itemLabelStyle,selectedItemLabelStyle=_ref.selectedItemLabelStyle;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:_this,__source:{fileName:_jsxFileName,lineNumber:36,columnNumber:3}},_react.default.createElement(_.Container,(0,_extends2.default)({bg:isSelectedItem?"background.base":"background.white",height:defaultDropdownItemHeight,p:(0,_reactNativeSizeMatters.moderateScale)(2)},itemContainerStyle,isSelectedItem&&selectedItemContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:isSelectedItem?"font.white":"font.grey",fontFamily:"sf400",fontSize:"s"},itemLabelStyle,isSelectedItem&&selectedItemLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:44,columnNumber:7}}),label)));};DropdownItem.propTypes={label:_propTypes.default.string.isRequired,isSelectedItem:_propTypes.default.bool,defaultDropdownItemHeight:_propTypes.default.number,onPress:_propTypes.default.func,itemContainerStyle:_propTypes.default.object,selectedItemContainerStyle:_propTypes.default.object,itemLabelStyle:_propTypes.default.object,selectedItemLabelStyle:_propTypes.default.object};var Select=function Select(_ref2){var options=_ref2.options,label=_ref2.label,value=_ref2.value,placeholder=_ref2.placeholder,emptyOptionsPlaceholder=_ref2.emptyOptionsPlaceholder,labelExtractor=_ref2.labelExtractor,valueExtractor=_ref2.valueExtractor,onSelect=_ref2.onSelect,isLoading=_ref2.isLoading,isSearchable=_ref2.isSearchable,showCreateOption=_ref2.showCreateOption,showCreateOptionLoader=_ref2.showCreateOptionLoader,createOptionLabel=_ref2.createOptionLabel,onPressCreateOption=_ref2.onPressCreateOption,labelStyle=_ref2.labelStyle,containerStyle=_ref2.containerStyle,inputContainerStyle=_ref2.inputContainerStyle,dropdownContainerStyle=_ref2.dropdownContainerStyle,itemContainerStyle=_ref2.itemContainerStyle,itemLabelStyle=_ref2.itemLabelStyle,selectedItemContainerStyle=_ref2.selectedItemContainerStyle,selectedItemLabelStyle=_ref2.selectedItemLabelStyle,searchInputContainerStyle=_ref2.searchInputContainerStyle,searchInputStyle=_ref2.searchInputStyle,emptyOptionsContainerStyle=_ref2.emptyOptionsContainerStyle,emptyOptionsLabelStyle=_ref2.emptyOptionsLabelStyle,createSearchedOptionContainerStyle=_ref2.createSearchedOptionContainerStyle,createSearchedOptionLabelStyle=_ref2.createSearchedOptionLabelStyle,rest=(0,_objectWithoutProperties2.default)(_ref2,_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 label=labelExtractor(item,index);if((searchQuery==null?void 0:searchQuery.length)===0)return true;return formatStr(label).includes(formatStr(searchQuery));});var isOptionsEmpty=!options||(options==null?void 0:options.length)===0;var isSearchedOptionsEmpty=searchQuery.length>0&&filteredOptions.length===0;var emptyOptionsPlaceholderHeight=(0,_reactNativeSizeMatters.moderateScale)(40);var emptySearchedOptionsHeight=(0,_reactNativeSizeMatters.moderateScale)(40);var searchInputHeight=(0,_reactNativeSizeMatters.moderateScale)(35);var defaultDropdownItemHeight=(itemContainerStyle==null?void 0:itemContainerStyle.height)||(0,_reactNativeSizeMatters.moderateScale)(32);var dropdownHeight=(dropdownContainerStyle==null?void 0:dropdownContainerStyle.height)||(dropdownContainerStyle==null?void 0:dropdownContainerStyle.maxHeight)||defaultDropdownItemHeight*Math.min(filteredOptions==null?void 0:filteredOptions.length,(0,_reactNativeSizeMatters.moderateScale)(6))+(isSearchable?searchInputHeight+(0,_reactNativeSizeMatters.moderateScale)(10):0)+(isOptionsEmpty&&!(isSearchedOptionsEmpty&&showCreateOption)?emptyOptionsPlaceholderHeight:0)+(isSearchedOptionsEmpty&&showCreateOption?emptySearchedOptionsHeight:0);var selectedOptionLabel=labelExtractor(value||{});var selectedOptionValue=valueExtractor(value||{});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/Select.jsx (187: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/Select.jsx (180:4)";return _f;}(),[]);var toggleAnimation=function toggleAnimation(){dropdownAnimatedHeight.value=dropdownAnimatedHeight.value===0?dropdownHeight:0;};var handleOpenDropdown=function handleOpenDropdown(){_reactNative.Keyboard.dismiss();setSearchQuery("");if(!showDropdown){setShowDropdown(true);}if(showDropdown){toggleAnimation();}};var handleItemSelection=function handleItemSelection(item,index){toggleAnimation();onSelect(item,index);};(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:226,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.base",fontFamily:"sf400",fontSize:"s",mb:(0,_reactNativeSizeMatters.moderateScale)(1)},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:227,columnNumber:7}}),label),_react.default.createElement(_reactNative.TouchableWithoutFeedback,{disabled:isLoading,onPress:handleOpenDropdown,__self:_this,__source:{fileName:_jsxFileName,lineNumber:236,columnNumber:7}},_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",borderColor:"border.grey400",borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),flexDirection:"row",justifyContent:"space-between",p:(0,_reactNativeSizeMatters.moderateScale)(2)},inputContainerStyle,rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:240,columnNumber:9}}),_react.default.createElement(_.Typography,{color:"font.grey",fontFamily:"sf400",fontSize:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:250,columnNumber:11}},selectedOptionLabel||placeholder),isLoading?_react.default.createElement(_.Loader,{color:theme.colors.background.base,__self:_this,__source:{fileName:_jsxFileName,lineNumber:254,columnNumber:13}}):_react.default.createElement(_reactNativeRemixIcon.default,{color:"grey",name:"arrow-"+(showDropdown?"up":"down")+"-s-line",size:(0,_reactNativeSizeMatters.moderateScale)(20),__self:_this,__source:{fileName:_jsxFileName,lineNumber:256,columnNumber:13}}))),showDropdown&&_react.default.createElement(_.Container,{overflow:"hidden",__self:_this,__source:{fileName:_jsxFileName,lineNumber:265,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:266,columnNumber:11}},_react.default.createElement(_.Card,(0,_extends2.default)({bg:"background.white",borderColor:"border.grey400",borderWidth:(0,_reactNativeSizeMatters.moderateScale)(1),maxHeight:dropdownHeight},dropdownContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:13}}),isSearchable&&_react.default.createElement(_.Container,(0,_extends2.default)({p:(0,_reactNativeSizeMatters.moderateScale)(1)},searchInputContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:275,columnNumber:17}}),_react.default.createElement(_.Input,(0,_extends2.default)({fontSize:"s",placeholder:"Search",containerStyles:{height:searchInputHeight,justifyContent:"center"},onChangeText:setSearchQuery},searchInputStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:276,columnNumber:19}}))),isOptionsEmpty&&!(isSearchedOptionsEmpty&&showCreateOption)&&_react.default.createElement(_.Container,(0,_extends2.default)({alignItems:"center",height:emptyOptionsPlaceholderHeight,justifyContent:"center"},emptyOptionsContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:289,columnNumber:17}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey",fontFamily:"sf400",fontSize:"s"},emptyOptionsLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:295,columnNumber:19}}),emptyOptionsPlaceholder||"No Options")),isSearchedOptionsEmpty&&showCreateOption&&_react.default.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",height:emptySearchedOptionsHeight,justifyContent:"center",onPress:function onPress(){return onPressCreateOption(searchQuery);}},createSearchedOptionContainerStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:306,columnNumber:17}}),showCreateOptionLoader?_react.default.createElement(_.Loader,{color:theme.colors.background.base,size:"s",__self:_this,__source:{fileName:_jsxFileName,lineNumber:314,columnNumber:21}}):_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.grey",fontFamily:"sf400",fontSize:"s"},createSearchedOptionLabelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:316,columnNumber:21}}),createOptionLabel||"Create "+searchQuery+" option")),_react.default.createElement(_.Container,{height:0,__self:_this,__source:{fileName:_jsxFileName,lineNumber:328,columnNumber:15}},_react.default.createElement(_.Input,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:329,columnNumber:17}})),_react.default.createElement(_reactNativeGestureHandler.ScrollView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:331,columnNumber:15}},filteredOptions.map(function(item,index){var optionLabel=labelExtractor(item,index);var optionValue=valueExtractor(item,index);var isSelectedItem=selectedOptionValue&&selectedOptionValue===optionValue;return _react.default.createElement(DropdownItem,{defaultDropdownItemHeight:defaultDropdownItemHeight,isSelectedItem:isSelectedItem,itemContainerStyle:itemContainerStyle,itemLabelStyle:itemLabelStyle,key:index,label:optionLabel,selectedItemContainerStyle:selectedItemContainerStyle,selectedItemLabelStyle:selectedItemLabelStyle,onPress:function onPress(){return handleItemSelection(item,index);},__self:_this,__source:{fileName:_jsxFileName,lineNumber:339,columnNumber:21}});}))))));};exports.Select=Select;Select.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.object,onSelect:_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,selectedItemContainerStyle:_propTypes.default.object,selectedItemLabelStyle:_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};Select.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(){},isLoading:false,isSearchable:false,showCreateOption:false,showCreateOptionLoader:false,createOptionLabel:null,onPressCreateOption:function onPressCreateOption(){}};

package/lib/components/SelectButton.js

@@ -1 +0,0 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.SelectButton=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _reactNativeRemixIcon=_interopRequireDefault(require("react-native-remix-icon"));var _reactNativeSizeMatters=require("react-native-size-matters");var _native=require("styled-components/native");var _=require("./");var _excluded=["selected","onSelect","disabled","label","selectIconStyle","labelStyle"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/SelectButton.jsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var SelectButton=function SelectButton(_ref){var selected=_ref.selected,onSelect=_ref.onSelect,disabled=_ref.disabled,label=_ref.label,selectIconStyle=_ref.selectIconStyle,labelStyle=_ref.labelStyle,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var disabledProps={labelProps:{opacity:0.5}};var selectedProps={labelProps:{fontFamily:theme.fonts.sf700}};var unselectedProps={labelProps:{fontFamily:theme.fonts.sf400}};return _react.default.createElement(_.Touchable,(0,_extends2.default)({alignItems:"center",disabled:disabled,flexDirection:"row",py:(0,_reactNativeSizeMatters.moderateScale)(8),onPress:onSelect},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:88,columnNumber:5}}),_react.default.createElement(_.Typography,(0,_extends2.default)({color:"font.primary",flex:1,fontSize:"m",lineHeight:(0,_reactNativeSizeMatters.moderateScale)(22)+"px"},selected&&selectedProps.labelProps,!selected&&unselectedProps.labelProps,disabled&&disabledProps.labelProps,labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:7}}),label),selected&&_react.default.createElement(_reactNativeRemixIcon.default,(0,_extends2.default)({color:theme.colors.font.primary,name:"check-fill",size:(0,_reactNativeSizeMatters.moderateScale)(20)},selectIconStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:109,columnNumber:9}})));};exports.SelectButton=SelectButton;SelectButton.propTypes={selected:_propTypes.default.bool.isRequired,onSelect:_propTypes.default.func.isRequired,disabled:_propTypes.default.bool,label:_propTypes.default.string,selectIconStyle:_propTypes.default.object,labelStyle:_propTypes.default.object};SelectButton.defaultProps={selected:false,onSelect:function onSelect(){}};