@bigbinary/neetoui-rn 0.0.185 → 0.0.186

package/index.d.ts

@@ -0,0 +1,449 @@
+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;
+  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/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/package.json

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