@bigbinary/neetoui-rn 0.0.185 → 0.0.188

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;
+  animationDuration?: 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/FlashList.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["durationPerItem","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","onEndReached","keyExtractor"],_excluded2=["renderItem","durationPerItem","isLoading","SkeletonComponent"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var _Dimensions$get=_reactNative.Dimensions.get("screen"),width=_Dimensions$get.width;var Placeholder=function Placeholder(){var theme=(0,_react.useContext)(_native2.ThemeContext);return _react.default.createElement(_native.default,{marginHorizontal:15,height:"60",width:400,viewBox:"0 0 400 50",backgroundColor:theme.colors.lightgrey,foregroundColor:theme.colors.grey300,__self:_this,__source:{fileName:_jsxFileName,lineNumber:22,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",rx:"5",ry:"5",width:width-30,height:"50",__self:_this,__source:{fileName:_jsxFileName,lineNumber:30,columnNumber:7}}));};var FlashList=function FlashList(_ref){var _ref$durationPerItem=_ref.durationPerItem,durationPerItem=_ref$durationPerItem===void 0?200:_ref$durationPerItem,SkeletonComponent=_ref.SkeletonComponent,_ref$placeHolderItemC=_ref.placeHolderItemCount,placeHolderItemCount=_ref$placeHolderItemC===void 0?10:_ref$placeHolderItemC,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,_ref$data=_ref.data,data=_ref$data===void 0?[]:_ref$data,_ref$onRefresh=_ref.onRefresh,onRefresh=_ref$onRefresh===void 0?function(){}:_ref$onRefresh,_ref$onEndReached=_ref.onEndReached,onEndReached=_ref$onEndReached===void 0?function(){}:_ref$onEndReached,_keyExtractor=_ref.keyExtractor,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dummyData=Array.apply(null,Array(placeHolderItemCount));var _useRefreshByUser=(0,_hooks.useRefreshByUser)(onRefresh),isRefetchingByUser=_useRefreshByUser.isRefetchingByUser,refetchByUser=_useRefreshByUser.refetchByUser;return _react.default.createElement(FadeInFlatList,(0,_extends2.default)({key:isLoading,durationPerItem:durationPerItem,SkeletonComponent:SkeletonComponent,isLoading:isLoading,extraData:{isLoading:isLoading,placeHolderItemCount:placeHolderItemCount},data:isLoading?dummyData:data,refreshControl:onRefresh&&_react.default.createElement(_reactNative.RefreshControl,{refreshing:isRefetchingByUser,onRefresh:refetchByUser,__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:11}}),placeHolderItemCount:placeHolderItemCount,keyExtractor:function keyExtractor(item,index){return isLoading||!_keyExtractor?index.toString():_keyExtractor(item,index);}},rest,{onEndReached:isLoading?undefined:onEndReached,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:5}}));};exports.FlashList=FlashList;var FadeInFlatList=function FadeInFlatList(_ref2){var originalRenderItem=_ref2.renderItem,_ref2$durationPerItem=_ref2.durationPerItem,durationPerItem=_ref2$durationPerItem===void 0?200:_ref2$durationPerItem,_ref2$isLoading=_ref2.isLoading,isLoading=_ref2$isLoading===void 0?false:_ref2$isLoading,SkeletonComponent=_ref2.SkeletonComponent,props=(0,_objectWithoutProperties2.default)(_ref2,_excluded2);var value=(0,_reactNativeReanimated.useSharedValue)(0);var FadeInComponent=(0,_react.useCallback)(function(_ref3){var index=_ref3.index,children=_ref3.children;var inputRange=[index-1,index,index+1,index+2];var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[0,0.6,1,1],_reactNativeReanimated.Extrapolation.CLAMP),transform:[{translateX:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[25,15,10,0],_reactNativeReanimated.Extrapolation.CLAMP)}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,value:value,inputRange:inputRange,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,value,inputRange,Extrapolation}=jsThis._closure;{return{opacity:interpolate(value.value,inputRange,[0,0.6,1,1],Extrapolation.CLAMP),transform:[{translateX:interpolate(value.value,inputRange,[25,15,10,0],Extrapolation.CLAMP)}]};}}";_f.__workletHash=2524714757658;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js (90:46)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:14}},children);},[]);var Item=function Item(_ref4){var _item$extraData;var item=_ref4.item;return item!=null&&(_item$extraData=item.extraData)!=null&&_item$extraData.isLoading?_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:119,columnNumber:7}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:120,columnNumber:31}})):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:123,columnNumber:7}},originalRenderItem(item));};var renderItem=function renderItem(item){return isLoading||item.index<props.placeHolderItemCount?_react.default.createElement(Item,{item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:131,columnNumber:7}}):originalRenderItem(item);};(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withTiming)(props.data.length+1,{duration:props.data.length*durationPerItem});},[durationPerItem,value,props.data.length,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:145,columnNumber:10}}));};FlashList.propTypes={SkeletonComponent:_propTypes.default.element,durationPerItem:_propTypes.default.number,data:_propTypes.default.array.isRequired,isLoading:_propTypes.default.bool,placeHolderItemCount:_propTypes.default.number,onRefresh:_propTypes.default.func,onEndReached:_propTypes.default.func,keyExtractor:_propTypes.default.func};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.FlashList=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _flashList=require("@shopify/flash-list");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _propTypes=_interopRequireDefault(require("prop-types"));var _native=_interopRequireWildcard(require("react-content-loader/native"));var _native2=require("styled-components/native");var _reactNative=require("react-native");var _hooks=require("../hooks");var _excluded=["animationDuration","SkeletonComponent","placeHolderItemCount","isLoading","data","onRefresh","onEndReached","keyExtractor"],_excluded2=["renderItem","animationDuration","isLoading","SkeletonComponent"];var _this=this,_jsxFileName="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var _Dimensions$get=_reactNative.Dimensions.get("screen"),width=_Dimensions$get.width;var Placeholder=function Placeholder(){var theme=(0,_react.useContext)(_native2.ThemeContext);return _react.default.createElement(_native.default,{marginHorizontal:15,height:"60",width:400,viewBox:"0 0 400 50",backgroundColor:theme.colors.lightgrey,foregroundColor:theme.colors.grey300,__self:_this,__source:{fileName:_jsxFileName,lineNumber:24,columnNumber:5}},_react.default.createElement(_native.Rect,{x:"0",rx:"5",ry:"5",width:width-30,height:"50",__self:_this,__source:{fileName:_jsxFileName,lineNumber:32,columnNumber:7}}));};var FlashList=function FlashList(_ref){var _ref$animationDuratio=_ref.animationDuration,animationDuration=_ref$animationDuratio===void 0?2000:_ref$animationDuratio,SkeletonComponent=_ref.SkeletonComponent,_ref$placeHolderItemC=_ref.placeHolderItemCount,placeHolderItemCount=_ref$placeHolderItemC===void 0?10:_ref$placeHolderItemC,_ref$isLoading=_ref.isLoading,isLoading=_ref$isLoading===void 0?false:_ref$isLoading,_ref$data=_ref.data,data=_ref$data===void 0?[]:_ref$data,_ref$onRefresh=_ref.onRefresh,onRefresh=_ref$onRefresh===void 0?function(){}:_ref$onRefresh,_ref$onEndReached=_ref.onEndReached,onEndReached=_ref$onEndReached===void 0?function(){}:_ref$onEndReached,_keyExtractor=_ref.keyExtractor,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var dummyData=Array.apply(null,Array(placeHolderItemCount));var _useRefreshByUser=(0,_hooks.useRefreshByUser)(onRefresh),isRefetchingByUser=_useRefreshByUser.isRefetchingByUser,refetchByUser=_useRefreshByUser.refetchByUser;return _react.default.createElement(FadeInFlatList,(0,_extends2.default)({key:isLoading,animationDuration:animationDuration,SkeletonComponent:SkeletonComponent,isLoading:isLoading,extraData:{isLoading:isLoading,placeHolderItemCount:placeHolderItemCount},data:isLoading?dummyData:data,refreshControl:onRefresh&&_react.default.createElement(_reactNative.RefreshControl,{refreshing:isRefetchingByUser,onRefresh:refetchByUser,__self:_this,__source:{fileName:_jsxFileName,lineNumber:62,columnNumber:11}}),placeHolderItemCount:placeHolderItemCount,keyExtractor:function keyExtractor(item,index){return isLoading||!_keyExtractor?index.toString():_keyExtractor(item,index);}},rest,{onEndReached:isLoading?undefined:onEndReached,__self:_this,__source:{fileName:_jsxFileName,lineNumber:53,columnNumber:5}}));};exports.FlashList=FlashList;var FadeInFlatList=function FadeInFlatList(_ref2){var originalRenderItem=_ref2.renderItem,animationDuration=_ref2.animationDuration,_ref2$isLoading=_ref2.isLoading,isLoading=_ref2$isLoading===void 0?false:_ref2$isLoading,SkeletonComponent=_ref2.SkeletonComponent,props=(0,_objectWithoutProperties2.default)(_ref2,_excluded2);var value=(0,_reactNativeReanimated.useSharedValue)(0);var FadeInComponent=(0,_react.useCallback)(function(_ref3){var index=_ref3.index,children=_ref3.children;var inputRange=[index-1,index,index+1,index+2];var animatedStyles=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{opacity:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[0,0.6,1,1],_reactNativeReanimated.Extrapolation.CLAMP),transform:[{translateX:(0,_reactNativeReanimated.interpolate)(value.value,inputRange,[25,15,10,0],_reactNativeReanimated.Extrapolation.CLAMP)}]};};_f._closure={interpolate:_reactNativeReanimated.interpolate,value:value,inputRange:inputRange,Extrapolation:{CLAMP:_reactNativeReanimated.Extrapolation.CLAMP}};_f.asString="function _f(){const{interpolate,value,inputRange,Extrapolation}=jsThis._closure;{return{opacity:interpolate(value.value,inputRange,[0,0.6,1,1],Extrapolation.CLAMP),transform:[{translateX:interpolate(value.value,inputRange,[25,15,10,0],Extrapolation.CLAMP)}]};}}";_f.__workletHash=2524714757658;_f.__location="/home/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/FlashList.js (92:46)";_f.__optimalization=3;return _f;}());return _react.default.createElement(_reactNativeReanimated.default.View,{style:animatedStyles,__self:_this,__source:{fileName:_jsxFileName,lineNumber:113,columnNumber:14}},children);},[]);var Item=function Item(_ref4){var _item$extraData;var item=_ref4.item;return item!=null&&(_item$extraData=item.extraData)!=null&&_item$extraData.isLoading?_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:121,columnNumber:7}},SkeletonComponent||_react.default.createElement(Placeholder,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:122,columnNumber:31}})):_react.default.createElement(FadeInComponent,{index:item.index,__self:_this,__source:{fileName:_jsxFileName,lineNumber:125,columnNumber:7}},originalRenderItem(item));};var renderItem=function renderItem(item){return isLoading||item.index<props.placeHolderItemCount?_react.default.createElement(Item,{item:item,__self:_this,__source:{fileName:_jsxFileName,lineNumber:133,columnNumber:7}}):originalRenderItem(item);};(0,_react.useEffect)(function(){value.value=0;value.value=(0,_reactNativeReanimated.withSequence)((0,_reactNativeReanimated.withTiming)(20,{duration:animationDuration}),(0,_reactNativeReanimated.withTiming)(props.data.length+1,{duration:0}));return function(){(0,_reactNativeReanimated.cancelAnimation)(value);};},[animationDuration,value,props.data.length,isLoading]);return _react.default.createElement(_flashList.FlashList,(0,_extends2.default)({},props,{renderItem:renderItem,__self:_this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:10}}));};FlashList.propTypes={SkeletonComponent:_propTypes.default.element,animationDuration:_propTypes.default.number,data:_propTypes.default.array.isRequired,isLoading:_propTypes.default.bool,placeHolderItemCount:_propTypes.default.number,onRefresh:_propTypes.default.func,onEndReached:_propTypes.default.func,keyExtractor:_propTypes.default.func};

package/lib/components/Input.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.185",
+  "version": "0.0.188",
   "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/FlashList.js

@@ -2,10 +2,12 @@
 import React, { useCallback, useContext, useEffect } from "react";
 import { FlashList as ShopifyFlashList } from "@shopify/flash-list";
 import Animated, {
+  cancelAnimation,
   Extrapolation,
   interpolate,
   useAnimatedStyle,
   useSharedValue,
+  withSequence,
   withTiming,
 } from "react-native-reanimated";
 import PropTypes from "prop-types";
@@ -33,7 +35,7 @@ const Placeholder = () => {
 };
 
 export const FlashList = ({
-  durationPerItem = 200,
+  animationDuration = 2000,
   SkeletonComponent,
   placeHolderItemCount = 10,
   isLoading = false,
@@ -50,7 +52,7 @@ export const FlashList = ({
   return (
     <FadeInFlatList
       key={isLoading}
-      durationPerItem={durationPerItem}
+      animationDuration={animationDuration}
       SkeletonComponent={SkeletonComponent}
       isLoading={isLoading}
       extraData={{ isLoading, placeHolderItemCount }}
@@ -77,7 +79,7 @@ export const FlashList = ({
 
 const FadeInFlatList = ({
   renderItem: originalRenderItem,
-  durationPerItem = 200,
+  animationDuration,
   isLoading = false,
   SkeletonComponent,
   ...props
@@ -136,18 +138,27 @@ const FadeInFlatList = ({
 
   useEffect(() => {
     value.value = 0;
-    value.value = withTiming(props.data.length + 1, {
-      duration: props.data.length * durationPerItem,
-    });
+    value.value = withSequence(
+      withTiming(20, {
+        duration: animationDuration,
+      }),
+      withTiming(props.data.length + 1, {
+        duration: 0,
+      })
+    );
+
+    return () => {
+      cancelAnimation(value);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [durationPerItem, value, props.data.length, isLoading]);
+  }, [animationDuration, value, props.data.length, isLoading]);
 
   return <ShopifyFlashList {...props} renderItem={renderItem} />;
 };
 
 FlashList.propTypes = {
   SkeletonComponent: PropTypes.element,
-  durationPerItem: PropTypes.number,
+  animationDuration: PropTypes.number,
   data: PropTypes.array.isRequired,
   isLoading: PropTypes.bool,
   placeHolderItemCount: PropTypes.number,

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({