@bigbinary/neetoui-rn 0.0.184 → 0.0.187

package/index.d.ts

@@ -0,0 +1,450 @@
+import React from "react";
+import Carousel from "react-native-snap-carousel";
+import dayjs from "dayjs";
+import RNPopover from "react-native-popover-view";
+import {
+  FlexboxProps,
+  SpaceProps,
+  BorderProps,
+  ColorProps,
+  LayoutProps,
+  PositionProps,
+  ButtonStyleProps,
+  TypographyProps,
+} from "styled-system";
+import {
+  ImageProps as RNImageProps,
+  ViewProps as RNViewProps,
+  TextInputProps as RNTextInputProps,
+  ScrollViewProps as RNScrollViewProps,
+  FlatListProps as RNFlatListProps,
+  TextProps as RNTextProps,
+  TextInputAndroidProps as RNTextInputAndroidProps,
+  TextInputIOSProps as RNTextInputIOSProps,
+  ViewStyle,
+  TextStyle,
+  TouchableOpacityProps,
+} from "react-native";
+import { ModalProps } from "react-native-modal";
+import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+import { CalendarProps as RNCalendarProps } from "react-native-calendars";
+import { FlashListProps as RNFlashListProps } from "@shopify/flash-list";
+import {
+  RichEditorProps,
+  RichToolbarProps,
+} from "react-native-pell-rich-editor";
+import { MaterialTopTabBarProps } from "@react-navigation/material-top-tabs";
+import {
+  ToastProps as RNToastProps,
+  ToastHideParams,
+  ToastShowParams,
+  ToastConfig,
+} from "react-native-toast-message";
+import { RippleProps } from "react-native-material-ripple";
+
+import { theme as themeDef } from "./src/theme";
+import { BUTTON_VARIANTS } from "./src/components/Button";
+
+type addPrefixToObject<
+  TObject extends object,
+  TPrefix extends string
+> = `${TPrefix}${keyof TObject}`;
+
+const theme: {
+  colors: {
+    font: addPrefixToObject<typeof themeDef.colors.font, "font.">;
+    background: addPrefixToObject<
+      typeof themeDef.colors.background,
+      "background."
+    >;
+    border: addPrefixToObject<typeof themeDef.colors.border, "border.">;
+    toast: addPrefixToObject<typeof themeDef.colors.toast, "toast.">;
+  };
+  fonts: keyof typeof themeDef.fonts;
+  fontSizes: keyof typeof themeDef.fontSizes;
+};
+
+interface StyleProps
+  extends FlexboxProps,
+    SpaceProps,
+    BorderProps,
+    ColorProps,
+    LayoutProps,
+    PositionProps {}
+
+interface ViewProps extends RNViewProps, StyleProps {
+  children?: React.ReactNode;
+}
+interface TextProps extends RNTextProps, StyleProps, TypographyProps {
+  children?: React.ReactNode;
+}
+interface TextInputProps
+  extends RNTextInputAndroidProps,
+    RNTextInputIOSProps,
+    StyleProps,
+    TypographyProps {}
+interface FlatListProps extends RNFlatListProps, StyleProps {}
+interface ScrollViewProps extends RNScrollViewProps, StyleProps {}
+interface TouchableProps extends RippleProps, StyleProps, ButtonStyleProps {
+  children?: React.ReactNode;
+}
+
+interface AccordionProps extends ViewProps {
+  header?: () => React.ReactNode;
+  noBorder?: boolean;
+  onStateChange?: (isExpanded: boolean) => void;
+  iconProp?: {
+    name?: string;
+    Label?: () => React.ReactNode;
+    size?: number;
+    color?: string;
+  };
+  position?: "top" | "bottom";
+}
+
+type AlertProps = {};
+type AlertButton = {
+  label: string;
+  onPress?: () => void;
+  variant?: typeof BUTTON_VARIANTS[keyof typeof BUTTON_VARIANTS];
+};
+type AlertShowParams = {
+  title?: string;
+  description?: string;
+  isCancelable?: boolean;
+  onDismiss?: () => void;
+  buttons?: Array<AlertButton>;
+};
+
+interface AnimatedImageProps extends RNImageProps {
+  imageHeight?: number;
+  imageWidth?: number;
+  imageUrl: string;
+}
+
+interface AvatarProps extends ViewProps {
+  name?: string;
+  variant?: "small" | "medium";
+  bgColor?: typeof theme.colors.background;
+  fontColor?: typeof theme.colors.font;
+  imageUrl?: string;
+}
+
+interface BadgeProps extends ViewProps {
+  badgeColor?: typeof theme.colors.background;
+  content?: string | number;
+  size?: number;
+  fontSize?: typeof theme.fontSizes;
+  fontFamily?: typeof theme.fonts;
+  color?: typeof theme.colors.font;
+}
+
+interface BottomSheetProps extends ViewProps {
+  showCreateOption?: boolean;
+  CreateItemComponent?: React.ReactNode;
+  showCreateOptionLoader?: boolean;
+  createSearchedOptionLabelStyle?: TextProps;
+  createOptionLabel?: string;
+  onPressCreateOption?: (searchText: string) => void;
+  createSearchedOptionContainerStyle?: TouchableProps;
+  data?: Array<any>;
+  title?: string;
+  hide?: () => void;
+  isVisible?: boolean;
+  onItemPress?: ({ index, item }: { index: number; item: any }) => void;
+  selectedItemIndex?: number;
+  bg?: typeof theme.colors.background;
+  titleContainerStyle?: ViewProps;
+  titleTextStyle?: TextProps;
+  modalParams?: ModalProps;
+  HeaderComponent?: () => React.ReactNode;
+  ContentRow?: () => React.ReactNode;
+  contentType?: "checkbox" | null;
+  canSearch?: boolean;
+  onDonePress?: () => void;
+}
+
+interface ButtonProps extends TouchableProps {
+  variant?: typeof BUTTON_VARIANTS[keyof typeof BUTTON_VARIANTS];
+  label: string;
+  labelStyle?: TextProps;
+  RightIcon?: () => React.ReactNode;
+  LeftIcon?: () => React.ReactNode;
+  disabled?: boolean;
+  isLoading?: boolean;
+  loadingText?: string;
+  fontFamily?: typeof theme.fonts;
+  color?: typeof theme.colors;
+  fontSize?: typeof theme.fontSizes;
+}
+
+type ButtonGroupProps = {
+  activeColor?: typeof theme.colors[keyof typeof theme.colors];
+  inActiveColor?: typeof theme.colors[keyof typeof theme.colors];
+  buttonItems: Array<string>;
+  onPress: () => void;
+  currentActiveBtn: string;
+  wrapperStyle?: ViewProps;
+  buttonTextStyle?: TextProps;
+  buttonStyle?: TouchableProps;
+};
+
+interface CalendarProps extends RNCalendarProps {
+  selectedDate?: string | typeof dayjs;
+}
+
+interface CardProps extends TouchableOpacityProps, StyleProps {
+  elevation?: number;
+}
+
+type CarouselProps = {
+  itemArray: Array<any>;
+  renderItem: () => React.ReactNode;
+  carouselRef?: React.RefObject<Carousel>;
+  onSnapToItem?: (index: number) => void;
+};
+
+interface CheckBoxProps extends TouchableProps {
+  checked: boolean;
+  onSelect: () => void;
+  disabled?: boolean;
+  label?: string;
+  checkboxStyle?: ViewProps;
+  checkIconStyle?: any;
+  labelStyle?: TextProps;
+}
+
+type ChipProps = {
+  label: string;
+  LeftIcon?: React.FC;
+  variant?: "outlined" | "solid";
+  labelColor?: typeof theme.colors.font;
+  closeIconBackground?: typeof theme.colors.background;
+  closeIconColor?: string;
+  onClose?: () => void;
+  onChipPress?: () => void;
+  isDisabled?: disabled;
+  closeIconSize?: number;
+  closeIcon?: string;
+  containerStyle?: TouchableProps;
+  closeIconContainerStyle?: TouchableProps;
+};
+
+interface DividerProps extends ViewProps {
+  thickness?: number | string;
+  orientation?: "horizontal" | "vertical";
+  bg?: typeof theme.colors.background;
+}
+
+interface FabProps extends TouchableProps {
+  Icon: React.FC;
+  bg: typeof theme.colors.background;
+  disabled?: boolean;
+  variant?: "solid" | "inverse";
+  onPress: () => void;
+}
+
+interface FlashListProps extends RNFlashListProps {
+  SkeletonComponent?: React.FC;
+  durationPerItem?: number;
+  data: Array<any>;
+  isLoading?: boolean;
+  placeHolderItemCount?: number;
+  onRefresh?: () => void;
+  onEndReached?: () => void;
+  keyExtractor?: (item: any, index: number) => string;
+}
+
+type InputProps = {
+  label?: string;
+  value: string;
+  onChangeText: (val: string) => void;
+  onBlur?: () => void;
+  errorMessage?: string;
+  PrefixIcon?: React.FC;
+  SuffixIcon?: React.FC;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  noBorder?: boolean;
+  showInputAccessoryView?: boolean;
+  inputProps?: RNTextInputProps;
+};
+
+interface ListItemProps extends ViewProps {
+  LeftComponent?: React.FC;
+  label: string;
+  RightComponent: React.FC;
+}
+
+interface MultiSelectProps extends ViewProps {
+  options?: Array<any>;
+  label?: string;
+  value?: string | Array<any>;
+  placeholder?: string;
+  labelExtractor?: (item: any, index: number) => string;
+  valueExtractor?: (item: any, index: number) => string;
+  onSelect?: (selectedData: Array<any>) => void;
+  deletedValue?: (deletedOption: any) => void;
+  isLoading?: boolean;
+  isSearchable?: boolean;
+  showCreateOption?: boolean;
+  labelStyle?: TextProps;
+  containerStyle?: ViewProps;
+  inputContainerStyle?: ViewProps;
+  dropdownContainerStyle?: ViewProps;
+  itemContainerStyle?: ViewProps;
+  multiSelectedItemContainerStyle?: ViewProps;
+  multiSelectedItemLabelStyle?: TextProps;
+  selectedValue?: (selectedOption: any) => void;
+  CreateItemComponent?: React.FC;
+  showCreateOptionLoader?: boolean;
+  createSearchedOptionLabelStyle?: TextProps;
+  onPressCreateOption?: (searchText: string) => void;
+  createSearchedOptionContainerStyle?: ViewProps;
+  onDonePress?: () => void;
+}
+
+type OnBoardingProps = {
+  appLogo: React.FC;
+  slides: Array<any>;
+  onComplete: () => void;
+  logoWidth?: number;
+};
+
+type OtpInputsProps = {
+  handleChange: (value: string) => void;
+  numberOfInputs: number;
+  error?: boolean;
+  code: string;
+  containerStyles?: ViewProps;
+  textStyles?: TextProps;
+};
+
+interface ParentViewProps extends ViewProps {
+  barStyle?: "light-content" | "dark-content";
+  topInset?: boolean;
+  rightInset?: boolean;
+  leftInset?: boolean;
+  bottomInset?: boolean;
+}
+
+type RNPopoverProps = typeof RNPopover.propTypes;
+interface PopoverProps extends RNPopoverProps {
+  children?: React.ReactNode;
+  data?: Array<any>;
+  fontFamily?: typeof theme.fonts;
+  fontSize?: typeof theme.fontSizes;
+}
+
+interface RadioButtonProps extends TouchableProps {
+  selected: boolean;
+  onSelect: () => void;
+  disabled?: boolean;
+  label?: string;
+  radioButtonStyle?: ViewProps;
+  labelStyle?: TextProps;
+}
+
+type RichTextEditorProps = {
+  onChange: (val: string) => void;
+  placeholderText?: string;
+  children?: React.ReactNode;
+  toolbarActions: Array<string>;
+  editorProps?: RichEditorProps;
+  toolBarProps?: RichToolbarProps;
+};
+
+interface SearchBarProps extends ViewProps {
+  placeholder?: string;
+  onChangeText: (val: string) => void;
+  onCancel?: () => void;
+  debounceDelay?: number | string;
+  showCancelButton?: boolean;
+  containerProps?: ViewProps;
+  searchbarProps?: TextInputProps;
+}
+
+interface SegmentedTopBarProps extends MaterialTopTabBarProps {
+  inactiveSegmentStyle?: ViewStyle;
+  activeSegmentStyle?: ViewStyle;
+  activeTextStyle?: TouchableProps;
+  inactiveTextStyle?: TouchableProps;
+  height?: number;
+}
+
+interface SelectProps
+  extends Omit<MultiSelectProps, "value" | "selectedValue" | "deletedValue"> {
+  value: any;
+}
+
+interface SocialButtonProps extends TouchableProps {
+  variant: "apple" | "google";
+  disabled?: boolean;
+  labelStyle?: TextProps;
+  isLoading?: boolean;
+}
+
+interface ToastProps extends Omit<RNToastProps, "config" | "position"> {
+  toasterConfig: ToastConfig;
+}
+
+type ToggleSwitchProps = {
+  value: boolean;
+  onValueChange?: () => void;
+  disabled?: boolean;
+};
+
+type TopBarProps = {
+  data: Array<any>;
+  activeIndex?: number;
+  onActiveTabChange: () => void;
+  activeTabTextStyle?: TextStyle;
+  activeTabContainerStyle?: ViewStyle;
+  inActiveTabTextStyle?: TextStyle;
+  inActiveTabContainerStyle?: ViewStyle;
+  tabContainerStyle?: ViewStyle;
+};
+
+export const Accordion: React.FC<AccordionProps>;
+export const Alert: React.FC<AlertProps> & {
+  show?: (params: AlertShowParams) => void;
+};
+export const AnimatedImage: React.FC<AnimatedImageProps>;
+export const Avatar: React.FC<AvatarProps>;
+export const Badge: React.FC<BadgeProps>;
+export const BottomSheet: React.FC<BottomSheetProps>;
+export const BottomTabBar: React.FC<BottomTabBarProps>;
+export const Button: React.FC<ButtonProps>;
+export const ButtonGroup: React.FC<ButtonGroupProps>;
+export const Calendar: React.FC<CalendarProps>;
+export const Card: React.FC<CardProps>;
+export const Carousel: React.FC<CarouselProps>;
+export const CheckBox: React.FC<CheckBoxProps>;
+export const Chip: React.FC<ChipProps>;
+export const Container: React.FC<ViewProps>;
+export const Divider: React.FC<DividerProps>;
+export const Fab: React.FC<FabProps>;
+export const FlashList: React.FC<FlashListProps>;
+export const FlatList: React.FC<FlatListProps>;
+export const Input: React.FC<InputProps>;
+export const ListItem: React.FC<ListItemProps>;
+export const MultiSelect: React.FC<MultiSelectProps>;
+export const OnBoarding: React.FC<OnBoardingProps>;
+export const OtpInputs: React.FC<OtpInputsProps>;
+export const ParentView: React.FC<ParentViewProps>;
+export const Popover: React.FC<PopoverProps>;
+export const RadioButton: React.FC<RadioButtonProps>;
+export const RichTextEditor: React.FC<RichTextEditorProps>;
+export const ScrollView: React.FC<ScrollViewProps>;
+export const SearchBar: React.FC<SearchBarProps>;
+export const SegmentedTopBar: React.FC<SegmentedTopBarProps>;
+export const Select: React.FC<SelectProps>;
+export const SocialButton: React.FC<SocialButtonProps>;
+export const Toast: React.FC<ToastProps> & {
+  show?: (params: ToastShowParams) => void;
+  hide?: (params: ToastHideParams) => void;
+};
+export const ToggleSwitch: React.FC<ToggleSwitchProps>;
+export const TopBar: React.FC<TopBarProps>;
+export const Touchable: React.FC<TouchableProps>;
+export const Typography: React.FC<TextProps>;

package/lib/components/BottomTabBar.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomTabBar=void 0;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 _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _=require("./");var _native=require("styled-components/native");var _jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.js",_this=this;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;}function TabElement(_ref){var isFocused=_ref.isFocused,onPress=_ref.onPress,name=_ref.name,tabBarActiveTintColor=_ref.tabBarActiveTintColor,tabBarInactiveTintColor=_ref.tabBarInactiveTintColor,icon=_ref.icon,size=_ref.size;var theme=(0,_react.useContext)(_native.ThemeContext);var offset=(0,_reactNativeReanimated.useSharedValue)(isFocused?1:0);(0,_react.useEffect)(function(){if(isFocused){offset.value=(0,_reactNativeReanimated.withTiming)(1,{duration:500});}else{offset.value=(0,_reactNativeReanimated.withTiming)(0,{duration:0});}},[isFocused]);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,1],[1,0],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,1],[1,0],{extrapolateRight:Extrapolation.CLAMP})};}}";_f.__workletHash=10271988492931;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.js (92:42)";_f.__optimalization=3;return _f;}());var animatedStyles2=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP}),transform:[{scale:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:Extrapolation.CLAMP}),transform:[{scale:interpolate(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:Extrapolation.CLAMP})}]};}}";_f.__workletHash=9420491443699;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.js (100:43)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_.Container,{flex:1,onTouchStart:onPress,alignItems:"center",borderTopWidth:1,borderColor:"background.grey200",__self:this,__source:{fileName:_jsxFileName,lineNumber:116,columnNumber:5}},_react.default.createElement(_.Container,{height:35,width:48,alignItems:"center",mb:1,__self:this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles],__self:this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{size:size,color:theme.colors.font.grey500,name:icon,__self:this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:11}})),_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles2],__self:this,__source:{fileName:_jsxFileName,lineNumber:127,columnNumber:9}},_react.default.createElement(_reactNativeRemixIcon.default,{size:size,color:theme.colors.font.base,name:icon,__self:this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:11}}))),_react.default.createElement(_.Typography,{color:isFocused?tabBarActiveTintColor:tabBarInactiveTintColor,fontFamily:"sf500",fontSize:"4xs",__self:this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:7}},name));}var styles=_reactNative.StyleSheet.create({iconContainer:{position:"absolute",margin:10}});var BottomTabBar=function BottomTabBar(_ref2){var state=_ref2.state,descriptors=_ref2.descriptors,navigation=_ref2.navigation;return _react.default.createElement(_.Container,{flexDirection:"row",height:_reactNative.Platform.OS==="android"?63:83,bg:"background.white",__self:_this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:5}},state.routes.map(function(_ref3,index){var key=_ref3.key,name=_ref3.name;var options=descriptors[key].options;var isFocused=state.index===index;var _options$customTabBar=options==null?void 0:options.customTabBarProps,icon=_options$customTabBar.icon,size=_options$customTabBar.size;var tabBarActiveTintColor=options.tabBarActiveTintColor,tabBarInactiveTintColor=options.tabBarInactiveTintColor;var onPress=function onPress(){var event=navigation.emit({type:"tabPress",target:key,canPreventDefault:true});if(!isFocused&&!event.defaultPrevented){navigation.navigate({name:name,merge:true});}};return _react.default.createElement(TabElement,{key:index,onPress:onPress,isFocused:isFocused,name:name,tabBarActiveTintColor:tabBarActiveTintColor,tabBarInactiveTintColor:tabBarInactiveTintColor,icon:icon,size:size,__self:_this,__source:{fileName:_jsxFileName,lineNumber:174,columnNumber:11}});}));};exports.BottomTabBar=BottomTabBar;TabElement.propTypes={isFocused:_propTypes.default.bool,onPress:_propTypes.default.func,name:_propTypes.default.string,tabBarActiveTintColor:_propTypes.default.string,tabBarInactiveTintColor:_propTypes.default.string,icon:_propTypes.default.string,size:_propTypes.default.number};BottomTabBar.propTypes={state:_propTypes.default.object,descriptors:_propTypes.default.object,navigation:_propTypes.default.object};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BottomTabBar=void 0;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 _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _=require("./");var _native=require("styled-components/native");var _jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.js",_this=this;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;}function TabElement(_ref){var isFocused=_ref.isFocused,onPress=_ref.onPress,name=_ref.name,tabBarActiveTintColor=_ref.tabBarActiveTintColor,tabBarInactiveTintColor=_ref.tabBarInactiveTintColor,icon=_ref.icon,size=_ref.size;var theme=(0,_react.useContext)(_native.ThemeContext);var offset=(0,_reactNativeReanimated.useSharedValue)(isFocused?1:0);(0,_react.useEffect)(function(){if(isFocused){offset.value=(0,_reactNativeReanimated.withTiming)(1,{duration:500});}else{offset.value=(0,_reactNativeReanimated.withTiming)(0,{duration:0});}},[isFocused]);var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,1],[1,0],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,1],[1,0],{extrapolateRight:Extrapolation.CLAMP})};}}";_f.__workletHash=10271988492931;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.js (93:42)";_f.__optimalization=3;return _f;}());var animatedStyles2=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP}),transform:[{scale:(0,_reactNativeReanimated.interpolate)(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:_reactNativeReanimated.Extrapolation.CLAMP})}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,offset:offset,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,offset,Extrapolation}=jsThis._closure;{return{opacity:interpolate(offset.value,[0,0.9,1],[0,0.5,1],{extrapolateRight:Extrapolation.CLAMP}),transform:[{scale:interpolate(offset.value,[0,0.8,1],[1,1.2,1],{extrapolateRight:Extrapolation.CLAMP})}]};}}";_f.__workletHash=9420491443699;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/BottomTabBar.js (101:43)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:onPress,__self:this,__source:{fileName:_jsxFileName,lineNumber:117,columnNumber:5}},_react.default.createElement(_.Container,{flex:1,alignItems:"center",borderTopWidth:1,borderColor:"background.grey200",__self:this,__source:{fileName:_jsxFileName,lineNumber:118,columnNumber:7}},_react.default.createElement(_.Container,{height:35,width:48,alignItems:"center",mb:1,__self:this,__source:{fileName:_jsxFileName,lineNumber:124,columnNumber:9}},_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles],__self:this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{size:size,color:theme.colors.font.grey500,name:icon,__self:this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:13}})),_react.default.createElement(_reactNativeReanimated.default.View,{style:[styles.iconContainer,animatedStyles2],__self:this,__source:{fileName:_jsxFileName,lineNumber:128,columnNumber:11}},_react.default.createElement(_reactNativeRemixIcon.default,{size:size,color:theme.colors.font.base,name:icon,__self:this,__source:{fileName:_jsxFileName,lineNumber:129,columnNumber:13}}))),_react.default.createElement(_.Typography,{color:isFocused?tabBarActiveTintColor:tabBarInactiveTintColor,fontFamily:"sf500",fontSize:"4xs",__self:this,__source:{fileName:_jsxFileName,lineNumber:132,columnNumber:9}},name)));}var styles=_reactNative.StyleSheet.create({iconContainer:{position:"absolute",margin:10}});var BottomTabBar=function BottomTabBar(_ref2){var state=_ref2.state,descriptors=_ref2.descriptors,navigation=_ref2.navigation;return _react.default.createElement(_.Container,{flexDirection:"row",height:_reactNative.Platform.OS==="android"?63:83,bg:"background.white",__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:5}},state.routes.map(function(_ref3,index){var key=_ref3.key,name=_ref3.name;var options=descriptors[key].options;var isFocused=state.index===index;var _options$customTabBar=options==null?void 0:options.customTabBarProps,icon=_options$customTabBar.icon,size=_options$customTabBar.size;var tabBarActiveTintColor=options.tabBarActiveTintColor,tabBarInactiveTintColor=options.tabBarInactiveTintColor;var onPress=function onPress(){var event=navigation.emit({type:"tabPress",target:key,canPreventDefault:true});if(!isFocused&&!event.defaultPrevented){navigation.navigate({name:name,merge:true});}};return _react.default.createElement(TabElement,{key:index,onPress:onPress,isFocused:isFocused,name:name,tabBarActiveTintColor:tabBarActiveTintColor,tabBarInactiveTintColor:tabBarInactiveTintColor,icon:icon,size:size,__self:_this,__source:{fileName:_jsxFileName,lineNumber:176,columnNumber:11}});}));};exports.BottomTabBar=BottomTabBar;TabElement.propTypes={isFocused:_propTypes.default.bool,onPress:_propTypes.default.func,name:_propTypes.default.string,tabBarActiveTintColor:_propTypes.default.string,tabBarInactiveTintColor:_propTypes.default.string,icon:_propTypes.default.string,size:_propTypes.default.number};BottomTabBar.propTypes={state:_propTypes.default.object,descriptors:_propTypes.default.object,navigation:_propTypes.default.object};

package/lib/components/Button.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=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("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled","isLoading","loadingText","fontFamily","color","fontSize"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.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 Button=function Button(props){var variant=props.variant,label=props.label,labelStyle=props.labelStyle,RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,disabled=props.disabled,isLoading=props.isLoading,loadingText=props.loadingText,fontFamily=props.fontFamily,color=props.color,fontSize=props.fontSize,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var width=variant==="text"||variant==="danger-text"?null:"100%";var getButtonColors=function getButtonColors(){switch(variant){case"solid":return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};case"text":return{bg:"transparent",border:"transparent",color:theme.colors.font.primary,ripple:theme.colors.background.grey800};case"danger":return{bg:theme.colors.background.danger,border:theme.colors.background.danger,color:theme.colors.background.white,ripple:"white"};case"danger-inverse":return{bg:theme.colors.background.white,border:theme.colors.background.danger,color:theme.colors.background.danger,ripple:theme.colors.background.grey800};case"danger-text":return{bg:"transparent",border:"transparent",color:theme.colors.background.danger,ripple:theme.colors.background.grey800};default:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};}};var renderOpacity=function renderOpacity(){if(["danger","danger-inverse","danger-text"].includes(variant)&&disabled)return 0.5;return 1;};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:getButtonColors().ripple,disabled:disabled||isLoading,bg:getButtonColors().bg,height:48,width:width,borderRadius:8,flexDirection:"row",alignItems:"center",justifyContent:"center",borderColor:getButtonColors().border,borderWidth:1,opacity:renderOpacity()},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:136,columnNumber:5}}),isLoading?_react.default.createElement(_.Container,{flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:9}},_react.default.createElement(_reactNative.ActivityIndicator,{color:getButtonColors().color,__self:_this,__source:{fileName:_jsxFileName,lineNumber:153,columnNumber:11}}),!!loadingText&&_react.default.createElement(_.Typography,(0,_extends2.default)({textAlign:"center",mx:2,color:color||getButtonColors().color,fontSize:fontSize,fontFamily:fontFamily||theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:155,columnNumber:13}}),loadingText)):_react.default.createElement(_react.default.Fragment,null,LeftIcon&&_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:169,columnNumber:24}}),_react.default.createElement(_.Typography,(0,_extends2.default)({textAlign:"center",mx:2,color:color||getButtonColors().color,fontSize:fontSize,fontFamily:fontFamily||theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:170,columnNumber:11}}),label),RightIcon&&_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:180,columnNumber:25}})));};exports.Button=Button;Button.defaultProps={variant:"solid",isLoading:false,loadingText:"",fontSize:"m"};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,variant:_propTypes2.default.oneOf(["text","solid","danger","danger-inverse","danger-text"]),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,isLoading:_propTypes2.default.bool,loadingText:_propTypes2.default.string});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.Button=exports.BUTTON_VARIANTS=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("@styled-system/prop-types"));var _propTypes2=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNative=require("react-native");var _=require("./");var _excluded=["variant","label","labelStyle","RightIcon","LeftIcon","disabled","isLoading","loadingText","fontFamily","color","fontSize"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/Button.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 BUTTON_VARIANTS=Object.freeze({SOLID:"solid",TEXT:"text",DANGER:"danger",DANGER_INVERSE:"danger-inverse",DANGER_TEXT:"danger-text"});exports.BUTTON_VARIANTS=BUTTON_VARIANTS;var Button=function Button(props){var variant=props.variant,label=props.label,labelStyle=props.labelStyle,RightIcon=props.RightIcon,LeftIcon=props.LeftIcon,disabled=props.disabled,isLoading=props.isLoading,loadingText=props.loadingText,fontFamily=props.fontFamily,color=props.color,fontSize=props.fontSize,rest=(0,_objectWithoutProperties2.default)(props,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var width=variant==="text"||variant==="danger-text"?null:"100%";var getButtonColors=function getButtonColors(){switch(variant){case BUTTON_VARIANTS.SOLID:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};case BUTTON_VARIANTS.TEXT:return{bg:"transparent",border:"transparent",color:theme.colors.font.primary,ripple:theme.colors.background.grey800};case BUTTON_VARIANTS.DANGER:return{bg:theme.colors.background.danger,border:theme.colors.background.danger,color:theme.colors.background.white,ripple:"white"};case BUTTON_VARIANTS.DANGER_INVERSE:return{bg:theme.colors.background.white,border:theme.colors.background.danger,color:theme.colors.background.danger,ripple:theme.colors.background.grey800};case BUTTON_VARIANTS.DANGER_TEXT:return{bg:"transparent",border:"transparent",color:theme.colors.background.danger,ripple:theme.colors.background.grey800};default:return{bg:theme.colors.background[disabled?"grey400":"base"],border:theme.colors.background[disabled?"grey400":"base"],color:theme.colors.background.white,ripple:"white"};}};var renderOpacity=function renderOpacity(){if(["danger","danger-inverse","danger-text"].includes(variant)&&disabled)return 0.5;return 1;};return _react.default.createElement(_.Touchable,(0,_extends2.default)({rippleColor:getButtonColors().ripple,disabled:disabled||isLoading,bg:getButtonColors().bg,height:48,width:width,borderRadius:8,flexDirection:"row",alignItems:"center",justifyContent:"center",borderColor:getButtonColors().border,borderWidth:1,opacity:renderOpacity()},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:5}}),isLoading?_react.default.createElement(_.Container,{flexDirection:"row",__self:_this,__source:{fileName:_jsxFileName,lineNumber:161,columnNumber:9}},_react.default.createElement(_reactNative.ActivityIndicator,{color:getButtonColors().color,__self:_this,__source:{fileName:_jsxFileName,lineNumber:162,columnNumber:11}}),!!loadingText&&_react.default.createElement(_.Typography,(0,_extends2.default)({textAlign:"center",mx:2,color:color||getButtonColors().color,fontSize:fontSize,fontFamily:fontFamily||theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:164,columnNumber:13}}),loadingText)):_react.default.createElement(_react.default.Fragment,null,LeftIcon&&_react.default.createElement(LeftIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:178,columnNumber:24}}),_react.default.createElement(_.Typography,(0,_extends2.default)({textAlign:"center",mx:2,color:color||getButtonColors().color,fontSize:fontSize,fontFamily:fontFamily||theme.fonts.sf500},labelStyle,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:179,columnNumber:11}}),label),RightIcon&&_react.default.createElement(RightIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:189,columnNumber:25}})));};exports.Button=Button;Button.defaultProps={variant:"solid",isLoading:false,loadingText:"",fontSize:"m"};Button.propTypes=(0,_extends2.default)({},_propTypes.default.buttonStyle,_propTypes.default.flexbox,_propTypes.default.space,_propTypes.default.border,_propTypes.default.layout,_propTypes.default.color,{label:_propTypes2.default.string.isRequired,variant:_propTypes2.default.oneOf(Object.values(BUTTON_VARIANTS)),disabled:_propTypes2.default.bool,labelStyle:_propTypes2.default.object,RightIcon:_propTypes2.default.elementType,LeftIcon:_propTypes2.default.elementType,isLoading:_propTypes2.default.bool,loadingText:_propTypes2.default.string});

package/lib/components/Input.js

@@ -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","textAlignVertical"];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,_props$textAlignVerti=props.textAlignVertical,textAlignVertical=_props$textAlignVerti===void 0?"top":_props$textAlignVerti,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(Math.floor(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:[14,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:182,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},{overflow:"hidden"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:183,columnNumber:7}}),!!PrefixIcon&&_react.default.createElement(View,{pl:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:196,columnNumber:11}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:13}})),_react.default.createElement(View,{flex:1,left:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:200,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:202,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,pr:3,top:0,zIndex:2,autoCapitalize:"none",mt:10,pb:3,pt:1,textAlignVertical:textAlignVertical},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:211,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:239,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:240,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:249,columnNumber:17}})))),!!SuffixIcon&&_react.default.createElement(View,{px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:264,columnNumber:11}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:265,columnNumber:13}}))),!!errorMessage&&_react.default.createElement(Typography,{py:2,color:"font.danger",__self:_this,__source:{fileName:_jsxFileName,lineNumber:270,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,textAlignVertical:_propTypes.default.oneOf(["auto","top","bottom","center"])};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;
+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","showInputAccessoryView","textAlignVertical"];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,_props$showInputAcces=props.showInputAccessoryView,showInputAccessoryView=_props$showInputAcces===void 0?true:_props$showInputAcces,_props$textAlignVerti=props.textAlignVertical,textAlignVertical=_props$textAlignVerti===void 0?"top":_props$textAlignVerti,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(Math.floor(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:[14,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:183,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},{overflow:"hidden"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:184,columnNumber:7}}),!!PrefixIcon&&_react.default.createElement(View,{pl:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:197,columnNumber:11}},_react.default.createElement(PrefixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:198,columnNumber:13}})),_react.default.createElement(View,{flex:1,left:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:201,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:203,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,pr:3,top:0,zIndex:2,autoCapitalize:"none",mt:10,pb:3,pt:1,textAlignVertical:textAlignVertical},rest.inputProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:212,columnNumber:11}})),((_rest$inputProps3=rest.inputProps)==null?void 0:_rest$inputProps3.multiline)&&showInputAccessoryView&&_reactNative.Platform.OS==="ios"&&_react.default.createElement(_reactNative.InputAccessoryView,{nativeID:label,__self:_this,__source:{fileName:_jsxFileName,lineNumber:242,columnNumber:15}},_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:243,columnNumber:17}},_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:252,columnNumber:19}})))),!!SuffixIcon&&_react.default.createElement(View,{px:2,__self:_this,__source:{fileName:_jsxFileName,lineNumber:267,columnNumber:11}},_react.default.createElement(SuffixIcon,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:268,columnNumber:13}}))),!!errorMessage&&_react.default.createElement(Typography,{py:2,color:"font.danger",__self:_this,__source:{fileName:_jsxFileName,lineNumber:273,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,textAlignVertical:_propTypes.default.oneOf(["auto","top","bottom","center"]),showInputAccessoryView:_propTypes.default.bool};var styles=_reactNative.StyleSheet.create({doneButtonStyle:{fontFamily:"sf700",color:_theme.theme.colors.font.base}});exports.styles=styles;

package/lib/components/SearchBar.js

@@ -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 _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;var buttonOpacityController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.sequence([_reactNative.Animated.timing(buttonOpacityController,{toValue:val,duration:350,useNativeDriver:false}),_reactNative.Animated.timing(searchAnimationController,{toValue:val,duration:200,useNativeDriver:false})]).start();};var cancelButtonWidth=searchAnimationController.interpolate({inputRange:[0,1],outputRange:[0,60]});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:96,columnNumber:5}}),_react.default.createElement(_reactNative.Animated.View,{style:(0,_extends2.default)({},styles.inputContainerStyles),__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:7}},_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:102,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:103,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:109,columnNumber:9}}))),_react.default.createElement(_reactNative.Animated.View,{style:{opacity:buttonOpacityController,width:cancelButtonWidth,alignItems:"flex-end"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:129,columnNumber:7}},showCancelButton&&_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,labelStyle:{mx:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:137,columnNumber:11}})));};exports.SearchBar=SearchBar;var styles=_reactNative.StyleSheet.create({inputContainerStyles:{height:42,flex:1,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};
+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 buttonWidthController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;var buttonOpacityController=(0,_react.useRef)(new _reactNative.Animated.Value(0)).current;(0,_react.useEffect)(function(){onChangeText(debouncedSearchTextValue);},[debouncedSearchTextValue,onChangeText]);var animateSearchInput=function animateSearchInput(val){_reactNative.Animated.sequence([_reactNative.Animated.timing(buttonOpacityController,{toValue:val,duration:350,useNativeDriver:false}),_reactNative.Animated.timing(buttonWidthController,{toValue:val,duration:200,useNativeDriver:false})]).start();};var cancelButtonWidth=buttonWidthController.interpolate({inputRange:[0,1],outputRange:[0,60]});var onCancelHandle=function onCancelHandle(){animateSearchInput(0);setSearchText("");inputRef.current.blur();onCancel();};return _react.default.createElement(_.Container,{flexDirection:"row",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:96,columnNumber:5}},_react.default.createElement(_.Container,(0,_extends2.default)({height:42,flex:1,borderWidth:1,borderColor:_theme.theme.colors.border.grey400,borderRadius:8,flexDirection:"row",alignItems:"center"},rest.containerProps,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:97,columnNumber:7}}),_react.default.createElement(_.Container,{px:10,__self:_this,__source:{fileName:_jsxFileName,lineNumber:107,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:108,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:114,columnNumber:9}}))),showCancelButton&&_react.default.createElement(_reactNative.Animated.View,{style:{opacity:buttonOpacityController,width:cancelButtonWidth,alignItems:"flex-end"},__self:_this,__source:{fileName:_jsxFileName,lineNumber:135,columnNumber:9}},_react.default.createElement(_.Button,{variant:"text",label:"Cancel",onPress:onCancelHandle,labelStyle:{mx:0},__self:_this,__source:{fileName:_jsxFileName,lineNumber:142,columnNumber:11}})));};exports.SearchBar=SearchBar;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

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.184",
+  "version": "0.0.187",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -32,6 +32,7 @@
     "lib",
     "src",
     "react-native.config.js",
+    "index.d.ts",
     "assets"
   ],
   "lint-staged": {

package/src/components/BottomTabBar.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from "react";
 import Icon from "react-native-remix-icon";
 import PropTypes from "prop-types";
-import { StyleSheet, Platform } from "react-native";
+import { StyleSheet, Platform, TouchableWithoutFeedback } from "react-native";
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
@@ -9,6 +9,7 @@ import Animated, {
   interpolate,
   Extrapolation,
 } from "react-native-reanimated";
+
 import { Container, Typography } from "@components";
 import { ThemeContext } from "styled-components/native";
 
@@ -113,29 +114,30 @@ function TabElement({
   });
 
   return (
-    <Container
-      flex={1}
-      onTouchStart={onPress}
-      alignItems="center"
-      borderTopWidth={1}
-      borderColor="background.grey200"
-    >
-      <Container height={35} width={48} alignItems="center" mb={1}>
-        <Animated.View style={[styles.iconContainer, animatedStyles]}>
-          <Icon size={size} color={theme.colors.font.grey500} name={icon} />
-        </Animated.View>
-        <Animated.View style={[styles.iconContainer, animatedStyles2]}>
-          <Icon size={size} color={theme.colors.font.base} name={icon} />
-        </Animated.View>
-      </Container>
-      <Typography
-        color={isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor}
-        fontFamily="sf500"
-        fontSize="4xs"
+    <TouchableWithoutFeedback onPress={onPress}>
+      <Container
+        flex={1}
+        alignItems="center"
+        borderTopWidth={1}
+        borderColor="background.grey200"
       >
-        {name}
-      </Typography>
-    </Container>
+        <Container height={35} width={48} alignItems="center" mb={1}>
+          <Animated.View style={[styles.iconContainer, animatedStyles]}>
+            <Icon size={size} color={theme.colors.font.grey500} name={icon} />
+          </Animated.View>
+          <Animated.View style={[styles.iconContainer, animatedStyles2]}>
+            <Icon size={size} color={theme.colors.font.base} name={icon} />
+          </Animated.View>
+        </Container>
+        <Typography
+          color={isFocused ? tabBarActiveTintColor : tabBarInactiveTintColor}
+          fontFamily="sf500"
+          fontSize="4xs"
+        >
+          {name}
+        </Typography>
+      </Container>
+    </TouchableWithoutFeedback>
   );
 }
 

package/src/components/Button.js

@@ -1,3 +1,4 @@
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
 import React, { useContext } from "react";
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
@@ -6,6 +7,14 @@ import { ActivityIndicator } from "react-native";
 
 import { Typography, Touchable, Container } from "@components";
 
+export const BUTTON_VARIANTS = Object.freeze({
+  SOLID: "solid",
+  TEXT: "text",
+  DANGER: "danger",
+  DANGER_INVERSE: "danger-inverse",
+  DANGER_TEXT: "danger-text",
+});
+
 /**
  *
  * Buttons are touchable elements used to interact with the screen and to trigger an action.
@@ -78,35 +87,35 @@ export const Button = props => {
 
   const getButtonColors = () => {
     switch (variant) {
-      case "solid":
+      case BUTTON_VARIANTS.SOLID:
         return {
           bg: theme.colors.background[disabled ? "grey400" : "base"],
           border: theme.colors.background[disabled ? "grey400" : "base"],
           color: theme.colors.background.white,
           ripple: "white",
         };
-      case "text":
+      case BUTTON_VARIANTS.TEXT:
         return {
           bg: "transparent",
           border: "transparent",
           color: theme.colors.font.primary,
           ripple: theme.colors.background.grey800,
         };
-      case "danger":
+      case BUTTON_VARIANTS.DANGER:
         return {
           bg: theme.colors.background.danger,
           border: theme.colors.background.danger,
           color: theme.colors.background.white,
           ripple: "white",
         };
-      case "danger-inverse":
+      case BUTTON_VARIANTS.DANGER_INVERSE:
         return {
           bg: theme.colors.background.white,
           border: theme.colors.background.danger,
           color: theme.colors.background.danger,
           ripple: theme.colors.background.grey800,
         };
-      case "danger-text":
+      case BUTTON_VARIANTS.DANGER_TEXT:
         return {
           bg: "transparent",
           border: "transparent",
@@ -210,13 +219,7 @@ Button.propTypes = {
    *    <li>solid - button with a background color.</li>
    *  </ul>
    */
-  variant: PropTypes.oneOf([
-    "text",
-    "solid",
-    "danger",
-    "danger-inverse",
-    "danger-text",
-  ]),
+  variant: PropTypes.oneOf(Object.values(BUTTON_VARIANTS)),
   /**
    * Enable or Disable the button.
    */

package/src/components/FAB.js

@@ -1,3 +1,4 @@
+/* eslint-disable @bigbinary/neeto/no-dangling-constants */
 import * as React from "react";
 import propTypes from "@styled-system/prop-types";
 import PropTypes from "prop-types";
@@ -43,7 +44,6 @@ import { theme } from "@theme";
  * @extends StyledSystems props /styled-system
  */
 
-// eslint-disable-next-line neeto/no-dangling-constants
 export const FAB = ({ Icon, bg, disabled, variant, onPress, ...rest }) => {
   const shadowStyle = {
     shadowColor: theme.colors.background.grey800,

package/src/components/Input.js

@@ -101,6 +101,7 @@ export const Input = props => {
     autoFocus = false,
     disabled = false,
     noBorder = false,
+    showInputAccessoryView = true,
     textAlignVertical = "top",
     ...rest
   } = props;
@@ -235,30 +236,32 @@ export const Input = props => {
             textAlignVertical={textAlignVertical}
             {...rest.inputProps}
           />
-          {rest.inputProps?.multiline && Platform.OS === "ios" && (
-            <InputAccessoryView nativeID={label}>
-              <Container
-                bg="background.white"
-                flexDirection="row"
-                p={2}
-                width={width}
-                justifyContent="flex-end"
-                alignItems="center"
-                pr={20}
-              >
-                <Button
-                  height={30}
-                  left={10}
-                  labelStyle={styles.doneButtonStyle}
-                  variant="text"
-                  onPress={() => {
-                    Keyboard.dismiss();
-                  }}
-                  label="Done"
-                />
-              </Container>
-            </InputAccessoryView>
-          )}
+          {rest.inputProps?.multiline &&
+            showInputAccessoryView &&
+            Platform.OS === "ios" && (
+              <InputAccessoryView nativeID={label}>
+                <Container
+                  bg="background.white"
+                  flexDirection="row"
+                  p={2}
+                  width={width}
+                  justifyContent="flex-end"
+                  alignItems="center"
+                  pr={20}
+                >
+                  <Button
+                    height={30}
+                    left={10}
+                    labelStyle={styles.doneButtonStyle}
+                    variant="text"
+                    onPress={() => {
+                      Keyboard.dismiss();
+                    }}
+                    label="Done"
+                  />
+                </Container>
+              </InputAccessoryView>
+            )}
         </View>
         {!!SuffixIcon && (
           <View px={2}>
@@ -324,6 +327,10 @@ Input.propTypes = {
    * Used to align the position of text in input.
    */
   textAlignVertical: PropTypes.oneOf(["auto", "top", "bottom", "center"]),
+  /**
+   * Show Input AccessoryView on iOS
+   */
+  showInputAccessoryView: PropTypes.bool,
 };
 
 export const styles = StyleSheet.create({

package/src/components/SearchBar.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Animated, StyleSheet } from "react-native";
+import { Animated } from "react-native";
 import {
   flexbox,
   space,
@@ -58,7 +58,7 @@ export const SearchBar = props => {
     searchText,
     Number(debounceDelay)
   );
-  const searchAnimationController = useRef(new Animated.Value(0)).current;
+  const buttonWidthController = useRef(new Animated.Value(0)).current;
   const buttonOpacityController = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
@@ -72,7 +72,7 @@ export const SearchBar = props => {
         duration: 350,
         useNativeDriver: false,
       }),
-      Animated.timing(searchAnimationController, {
+      Animated.timing(buttonWidthController, {
         toValue: val,
         duration: 200,
         useNativeDriver: false,
@@ -80,7 +80,7 @@ export const SearchBar = props => {
     ]).start();
   };
 
-  const cancelButtonWidth = searchAnimationController.interpolate({
+  const cancelButtonWidth = buttonWidthController.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 60],
   });
@@ -93,11 +93,16 @@ export const SearchBar = props => {
   };
 
   return (
-    <Container flexDirection="row" alignItems="center" {...rest.containerProps}>
-      <Animated.View
-        style={{
-          ...styles.inputContainerStyles,
-        }}
+    <Container flexDirection="row" alignItems="center">
+      <Container
+        height={42}
+        flex={1}
+        borderWidth={1}
+        borderColor={theme.colors.border.grey400}
+        borderRadius={8}
+        flexDirection="row"
+        alignItems="center"
+        {...rest.containerProps}
       >
         <Container px={10}>
           <Icon
@@ -125,39 +130,27 @@ export const SearchBar = props => {
           returnKeyType="search"
           {...rest.searchbarProps}
         />
-      </Animated.View>
-      <Animated.View
-        style={{
-          opacity: buttonOpacityController,
-          width: cancelButtonWidth,
-          alignItems: "flex-end",
-        }}
-      >
-        {showCancelButton && (
+      </Container>
+      {showCancelButton && (
+        <Animated.View
+          style={{
+            opacity: buttonOpacityController,
+            width: cancelButtonWidth,
+            alignItems: "flex-end",
+          }}
+        >
           <Button
             variant="text"
             label="Cancel"
             onPress={onCancelHandle}
             labelStyle={{ mx: 0 }}
           />
-        )}
-      </Animated.View>
+        </Animated.View>
+      )}
     </Container>
   );
 };
 
-const styles = StyleSheet.create({
-  inputContainerStyles: {
-    height: 42,
-    flex: 1,
-    borderWidth: 1,
-    borderColor: theme.colors.border.grey400,
-    borderRadius: 8,
-    flexDirection: "row",
-    alignItems: "center",
-  },
-});
-
 SearchBar.propTypes = {
   /**
    * Set the placeholder text