react-native-box-lite - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

package.json

 {
   "name": "react-native-box-lite",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "scripts": {
@@ -41,2 +41,5 @@ "lint": "eslint .",
     "react-native-text",
+    "react-native-dropdown",
+    "react-native-input",
+    "react-native-progress",
     "radio button",
@@ -43,0 +46,0 @@ "checkbox",

src/components/index.ts

@@ -11,3 +11,8 @@ import Text from './text';
 import SwipeBox from './swipeBox';
+import DropdownBox from './dropdowns';
+import MultiSelectDropdown from './multiSelectDropdown';
+import ScrollViewBox from './scrollViewBox';
+import FlatListBox from './flatListBox';
 export * from './groups';
+export * from './textInput';
 
@@ -25,2 +30,6 @@ export {
   SwipeBox,
+  DropdownBox,
+  MultiSelectDropdown,
+  ScrollViewBox,
+  FlatListBox,
 };

src/hook/index.ts

@@ -6,2 +6,3 @@ import useClassName from './useClassName';
 import useCircleSpecs from './useCircleSpecs';
+import useStateVisible from './useStateVisible';
 
@@ -14,2 +15,3 @@ export {
   useCircleSpecs,
+  useStateVisible,
 };

src/model/component.ts

@@ -8,2 +8,3 @@ import {
   StyleProp,
+  TextInputProps,
   TextProps,
@@ -21,3 +22,3 @@ TouchableOpacityProps,
 export interface BoxProps extends ViewProps {
-  className: string;
+  className?: string;
 }
@@ -32,2 +33,5 @@
   title?: string;
+  numberOfLines?: number;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
 }
@@ -56,3 +60,3 @@
   renderIconChecked?: (checked?: boolean) => ReactNode;
-  onPress?: (value?: ItemT) => void;
+  onChange?: (value?: ItemT) => void;
 }
@@ -69,3 +73,3 @@
   varian?: VarianColor;
-  onPress?: (value?: ItemT) => void;
+  onChange?: (value?: ItemT) => void;
 }
@@ -75,3 +79,3 @@
   source: ImageSourcePropType;
-  className: string;
+  className?: string;
   imageModuleType?: ImageModuleType;
@@ -91,3 +95,3 @@ style?: StyleProp<ImageStyle>;
   showLabel?: boolean;
-  classLabel: string;
+  classLabel?: string;
   renderLabel?: (value: number) => ReactNode;
@@ -97,9 +101,9 @@ }
 export interface ProgressBarProps extends ProgressBaseProps {
-  classBox: string;
-  classProgress: string;
+  classBox?: string;
+  classProgress?: string;
 }
 
 export interface ProgressCircleProps extends ProgressBaseProps {
-  size: number;
-  strokeWidth: number;
+  size?: number;
+  strokeWidth?: number;
   colorProgress?: string;
@@ -110,16 +114,16 @@ colorBackground?: string;
 export interface SwipeBoxProps<ItemT = any> extends ScrollViewProps {
-  classBox: string;
-  classSlider: string;
-  classSliderItem: string;
-  classPageItem: string;
-  classPagination: string;
+  classBox?: string;
+  classSlider?: string;
+  classSliderItem?: string;
+  classPageItem?: string;
+  classPagination?: string;
   data: ItemT[];
-  showPagination: boolean;
-  currentIndex: number;
+  showPagination?: boolean;
+  currentIndex?: number;
   width?: number;
   itemWidth?: number;
   sliderWidth?: number;
-  enableAnimation: boolean;
-  enableControl: boolean;
-  space: number;
+  enableAnimation?: boolean;
+  enableControl?: boolean;
+  space?: number;
   iconNext?: ReactNode;
@@ -130,2 +134,3 @@ iconPrev?: ReactNode;
   renderPageItem?: (item: ItemT, index: number) => ReactNode;
+  renderControl?: () => ReactNode;
   onIndexChanged?: (index: number) => void;
@@ -145,6 +150,6 @@ onEndReached?: () => void;
   pickLabel?: keyof ItemT;
-  onPress?: (value?: ItemT) => void;
+  onChange?: (value?: ItemT) => void;
 }
 
-export interface RadioGroupProps extends GroupPropsBase {
+export interface RadioGroupProps<ItemT = any> extends GroupPropsBase<ItemT> {
   value?: number | string;
@@ -158,3 +163,3 @@ radioItem?: CheckboxItemBaseProps & {
 
-export interface CheckBoxGroupProps extends GroupPropsBase {
+export interface CheckBoxGroupProps<ItemT = any> extends GroupPropsBase<ItemT> {
   value?: (number | string)[];
@@ -167,1 +172,116 @@ checkBoxItem?: CheckboxItemBaseProps & {
 }
+
+export interface TextInputBoxProps extends TextInputProps {
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  classInput?: string;
+  classInputBase?: string;
+  classBox?: string;
+  label?: string;
+  classLabel?: string;
+}
+
+export interface SwitchBoxProps {
+  value?: boolean;
+  varian?: VarianColor;
+  className?: string;
+  classThumb?: string;
+  classLabel?: string;
+  disabled?: boolean;
+  label?: {
+    on?: string;
+    off?: string;
+  };
+  renderLabel?: (value: boolean) => ReactNode;
+  renderThumb?: (value: boolean) => ReactNode;
+  onChange?: (value: boolean) => void;
+}
+
+export interface SvgProps {
+  children: ReactNode;
+  width?: string;
+  height?: string;
+  viewBox?: string;
+}
+
+interface OffsetType {
+  top?: number;
+  left?: number;
+  right?: number;
+  width?: number;
+  height?: number;
+}
+
+export interface RenderButtonProps {
+  onPress: () => void;
+}
+
+export interface RenderOptionItem<ItemT = any> {
+  selected?: boolean;
+  index: number;
+  item: ItemT;
+}
+
+interface DropDownBaseProps<ItemT = any> {
+  data: ItemT[];
+  offset?: OffsetType;
+  buttonDropdown?: ButtonComponentProps & {
+    hidden?: boolean;
+    placeholder?: string;
+    classPlaceholderColor?: string;
+    classValueColor?: string;
+  };
+  maxWidthOption?: number;
+  classBox?: string;
+  classOption?: string;
+  classOptionItem?: string;
+  classOptionItemSelected?: string;
+  classOptionLabel?: string;
+  classOptionLabelSelected?: string;
+  enableRightToLeft?: boolean;
+  enableSearch?: boolean;
+  height?: number;
+  width?: number;
+  pickKey?: keyof ItemT;
+  pickLabel?: keyof ItemT;
+  enableScroll?: boolean;
+  varian?: VarianColor;
+  iconColor?: string;
+  numberOfLinesOption?: number;
+  saveKeywordType?: 'none' | 'auto' | 'submit';
+  searchType?: 'auto' | 'submit';
+  iconSelected?: ReactNode;
+  iconSelectedColor?: string;
+  styleSelectType?: 'none' | 'icon' | 'color';
+  inputSearch?: {
+    value?: string;
+    classInput?: string;
+    leftContent?: ReactNode;
+    rightContent?: ReactNode;
+    placeholder?: string;
+    onSearch?: (keyword: string) => void;
+  };
+
+  renderOptionItem?: (props: RenderOptionItem) => ReactNode;
+  onChange?: (value: ItemT) => void;
+}
+
+export interface DropDownProps<ItemT = any> extends DropDownBaseProps<ItemT> {
+  value?: number | string;
+  renderButtonAction?: (
+    params: RenderButtonProps & {
+      dataSelected: ItemT | null;
+    },
+  ) => ReactNode;
+}
+
+export interface MultiDropDownProps<ItemT = any>
+  extends DropDownBaseProps<ItemT> {
+  value?: Array<number | string>;
+  onPressSelectedItem?: (item: ItemT) => void;
+  renderButtonAction?: (
+    params: RenderButtonProps & {
+      dataSelected: ItemT[] | null;
+    },
+  ) => ReactNode;
+}

src/styles/Position.styles.ts

@@ -6,18 +6,18 @@ import {StyleSheet} from 'react-native';
   relative: {position: 'relative'},
-  '-z-1': {zIndex: -1},
-  '-z-2': {zIndex: -2},
-  '-z-3': {zIndex: -3},
-  'z-0': {zIndex: 0},
-  'z-1': {zIndex: 1},
-  'z-2': {zIndex: 2},
-  'z-3': {zIndex: 3},
-  'z-4': {zIndex: 4},
-  'z-5': {zIndex: 5},
-  'z-6': {zIndex: 6},
-  'z-7': {zIndex: 7},
-  'z-8': {zIndex: 8},
-  'z-9': {zIndex: 9},
-  'z-99': {zIndex: 99},
-  'z-999': {zIndex: 999},
-  'z-9999': {zIndex: 9999},
+  '-z-1': {zIndex: -1, elevation: -1},
+  '-z-2': {zIndex: -2, elevation: -2},
+  '-z-3': {zIndex: -3, elevation: -3},
+  'z-0': {zIndex: 0, elevation: -0},
+  'z-1': {zIndex: 1, elevation: 1},
+  'z-2': {zIndex: 2, elevation: 2},
+  'z-3': {zIndex: 3, elevation: 3},
+  'z-4': {zIndex: 4, elevation: 4},
+  'z-5': {zIndex: 5, elevation: 5},
+  'z-6': {zIndex: 6, elevation: 6},
+  'z-7': {zIndex: 7, elevation: 7},
+  'z-8': {zIndex: 8, elevation: 8},
+  'z-9': {zIndex: 9, elevation: 9},
+  'z-99': {zIndex: 99, elevation: 99},
+  'z-999': {zIndex: 999, elevation: 999},
+  'z-9999': {zIndex: 9999, elevation: 9999},
   'opacity-0': {opacity: 0},
@@ -24,0 +24,0 @@ 'opacity-5': {opacity: 0.05},

src/styles/Size.styles.ts

@@ -5,2 +5,3 @@ import {StyleSheet} from 'react-native';
 export const sizeRatioStyles = StyleSheet.create({
+  'w-auto': {width: 'auto'},
   'w-1/2': {width: '50%'},
@@ -17,2 +18,3 @@ 'w-1/3': {width: '33.333333%'},
   'w-screen': {width: device.width},
+  'min-w-auto': {minWidth: 'auto'},
   'min-w-1/2': {minWidth: '50%'},
@@ -29,2 +31,3 @@ 'min-w-1/3': {minWidth: '33.333333%'},
   'min-w-screen': {minWidth: device.width},
+  'max-w-auto': {maxWidth: 'auto'},
   'max-w-1/2': {maxWidth: '50%'},
@@ -41,2 +44,3 @@ 'max-w-1/3': {maxWidth: '33.333333%'},
   'max-w-screen': {maxWidth: device.width},
+  'h-auto': {height: 'auto'},
   'h-1/2': {height: '50%'},
@@ -53,2 +57,3 @@ 'h-1/3': {height: '33.333333%'},
   'h-screen': {height: device.height},
+  'min-h-auto': {minHeight: 'auto'},
   'min-h-1/2': {minHeight: '50%'},
@@ -65,2 +70,3 @@ 'min-h-1/3': {minHeight: '33.333333%'},
   'min-h-screen': {minHeight: device.height},
+  'max-h-auto': {maxHeight: 'auto'},
   'max-h-1/2': {maxHeight: '50%'},
@@ -67,0 +73,0 @@ 'max-h-1/3': {maxHeight: '33.333333%'},

src/utils/helper.util.ts

@@ -20,1 +20,3 @@ import {OnEndReachedProps} from '../model';
 };
+
+export const isNumber = (value: any) => typeof value === 'number';

src/utils/styles.ts

@@ -71,2 +71,3 @@ import {CONFIG_BOX} from '../config';
     'line-height': 'lineHeight',
+    aspectRatio: 'aspectRatio',
   };
@@ -73,0 +74,0 @@ let styles: {[key: string]: number} = {};

No alert changes

Improved metrics

Total package byte prevSize

426703

increased by7.51%

Number of package files

73

increased by32.73%

Lines of code

7637

increased by14.02%

No dependency changes