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

Comparing version 0.1.4 to 0.1.5

package.json

 {
   "name": "react-native-box-lite",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
@@ -5,0 +5,0 @@ "lint": "eslint .",

README.md

@@ -0,0 +0,0 @@ # react-native-box-lite

src/components/groups/index.ts

 export {default as RadioGroup} from './RadioGroup';
 export {default as CheckboxGroup} from './CheckboxGroup';

src/components/index.ts

@@ -0,0 +0,0 @@ import RadioButton from './radioButton';

src/components/textInput/index.ts

 export {default as TextInputBox} from './TextInput';

src/config/Colors.ts

@@ -0,0 +0,0 @@ export const COLORS = {

src/config/index.ts

 import {BORDER_RADIUS, LINE_HEIGHT_SIZE, SIZE_SPACE, TEXT_SIZE} from './Spaces';
+export * from './Spaces';
+export * from './Colors';
 
@@ -3,0 +5,0 @@ interface DefaultTheme {

src/config/Spaces.ts

 export const SIZE_SPACE = {
+  default: 1,
   '0': 0,
@@ -3,0 +4,0 @@ '0.5': 2,

src/declarations.d.ts

@@ -0,0 +0,0 @@ declare module '*.png' {

src/hoc/index.ts

 export {default as withElementBox} from './withElementBox';
 export {default as withButtonBox} from './withButtonBox';

src/hook/index.ts

@@ -0,0 +0,0 @@ import useClassName from './useClassName';

src/hook/useClassVirtualizedList.ts

@@ -0,0 +0,0 @@ import {useMemo} from 'react';

src/index.ts

@@ -5,1 +5,2 @@ export * from './utils';
 export * from './hook';
+export * from './config';

src/model/index.ts

@@ -1,4 +0,1 @@
-export * from './classStyle';
-export * from './component';
-
 export type Varian = 'primary' | 'outline' | 'secondary' | 'dark' | 'light';
@@ -17,2 +14,300 @@
   FastImage,
+  SvgUri,
 }
+
+export enum ScaleType {
+  NONE = 0,
+  HORIZONTAL = 1,
+  VERTICAL = 2,
+  MODERATE = 3,
+  FONTSIZE = 4,
+}
+
+import {
+  GestureResponderEvent,
+  ImageResizeMode,
+  ImageSourcePropType,
+  ImageStyle,
+  NativeScrollEvent,
+  ScrollViewProps,
+  StyleProp,
+  TextInputProps,
+  TextProps,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import {ReactNode} from 'react';
+
+interface checkedType {
+  checked?: string;
+  unchecked?: string;
+}
+export interface BoxProps extends ViewProps {
+  className?: string;
+}
+
+export interface ButtonComponentProps {
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  classNameText?: string;
+  enableDebounce?: boolean;
+  delayDebounce?: number;
+  varian?: Varian;
+  title?: string;
+  numberOfLines?: number;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  children?: ReactNode;
+  onPress?: (e: GestureResponderEvent) => void;
+}
+
+interface CheckboxItemBaseProps {
+  className?: string;
+  classNameBox?: string;
+  classNameChildren?: string;
+  classNameLabel?: string;
+  classNameStatus?: checkedType;
+  size?: number;
+  enableDebounce?: boolean;
+  delayDebounce?: number;
+  resizeMode?: ImageResizeMode;
+  varian?: VarianCheckbox;
+}
+
+export interface CheckboxProps<ItemT = any> extends CheckboxItemBaseProps {
+  checked?: boolean;
+  value?: ItemT;
+  label?: string;
+  iconColor?: string;
+  iconChecked?: ReactNode;
+  iconSize?: number;
+  renderIconChecked?: (checked: boolean) => ReactNode;
+  onChange?: (value?: ItemT) => void;
+}
+
+export interface RadioButtonProps<ItemT = any> extends CheckboxItemBaseProps {
+  classNameStatus?: checkedType & {
+    borderChecked?: string;
+  };
+  checked?: boolean;
+  value?: ItemT;
+  label?: string;
+  sizeChildren?: number;
+  varian?: VarianColor;
+  onChange?: (value?: ItemT) => void;
+}
+
+export interface ImageBoxProps {
+  source: ImageSourcePropType;
+  className?: string;
+  imageModuleType?: ImageModuleType;
+  style?: StyleProp<ImageStyle>;
+  resizeMode?: ImageStyle['resizeMode'];
+}
+
+export interface TextComponentProps extends TextProps {
+  className?: string;
+}
+
+interface ProgressBaseProps extends BoxProps {
+  value: number;
+  label?: string;
+  varian: VarianColor;
+  showLabel?: boolean;
+  classLabel?: string;
+  renderLabel?: (value: number) => ReactNode;
+}
+
+export interface ProgressBarProps extends ProgressBaseProps {
+  classBox?: string;
+  classProgress?: string;
+}
+
+export interface ProgressCircleProps extends ProgressBaseProps {
+  size?: number;
+  strokeWidth?: number;
+  colorProgress?: string;
+  colorBackground?: string;
+}
+
+export interface SwipeBoxProps<ItemT = any> extends ScrollViewProps {
+  classBox?: string;
+  classSlider?: string;
+  classSliderItem?: string;
+  classPageItem?: string;
+  classPagination?: string;
+  data: ItemT[];
+  showPagination?: boolean;
+  currentIndex?: number;
+  width?: number;
+  itemWidth?: number;
+  sliderWidth?: number;
+  enableAnimation?: boolean;
+  enableControl?: boolean;
+  space?: number;
+  iconNext?: ReactNode;
+  iconPrev?: ReactNode;
+  iconColor?: string;
+  renderSliderItem: (item: ItemT, index: number) => ReactNode;
+  renderPageItem?: (item: ItemT, index: number) => ReactNode;
+  renderControl?: () => ReactNode;
+  onIndexChanged?: (index: number) => void;
+  onEndReached?: () => void;
+}
+
+export interface OnEndReachedProps extends NativeScrollEvent {
+  space: number;
+  itemWidth: number;
+  horizontal?: boolean | null;
+}
+
+interface GroupPropsBase<ItemT = any> {
+  data: ItemT[];
+  classBox?: string;
+  pickKey?: keyof ItemT;
+  pickLabel?: keyof ItemT;
+  onChange?: (value: ItemT) => void;
+}
+
+export interface RadioGroupProps<ItemT = any> extends GroupPropsBase<ItemT> {
+  value?: number | string;
+  radioItem?: CheckboxItemBaseProps & {
+    size?: number;
+    sizeChildren?: number;
+    varian?: VarianColor;
+  };
+}
+
+export interface CheckBoxGroupProps<ItemT = any> extends GroupPropsBase<ItemT> {
+  value?: (number | string)[];
+  checkBoxItem?: CheckboxItemBaseProps & {
+    iconColor?: string;
+    iconChecked?: ReactNode;
+    iconSize?: number;
+  };
+}
+
+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>;
+  classContentSelected?: VirtualListClassProps;
+  onPressSelectedItem?: (item: ItemT) => void;
+  renderButtonAction?: (
+    params: RenderButtonProps & {
+      dataSelected: ItemT[] | null;
+    },
+  ) => ReactNode;
+}
+
+export interface VirtualListClassProps {
+  className?: string;
+  classContent?: string;
+  classColWrapper?: string;
+  classIndicator?: string;
+  classHeader?: string;
+  classFooter?: string;
+}

src/styles/index.ts

@@ -1,1 +0,44 @@
-export * from './ClassStyles';
+import {styleConfig} from './Theme.styles';
+import {ColorStyles} from './Colors.styles';
+import {createSizeCustomStyles} from '../utils/styles';
+import {StyleProp} from 'react-native';
+import {commonStyles} from './common.styles';
+
+const classStyles = {
+  ...ColorStyles,
+  ...styleConfig,
+  ...commonStyles,
+};
+
+export const getClassNameStyles = (className: string): StyleProp<any> => {
+  try {
+    if (className.length > 0) {
+      const listClass = className?.split(' ');
+      return listClass.map(item => {
+        try {
+          const customClass = item.match(/\[(\d+)\]/);
+          if (customClass) {
+            const typeClass = item?.split(customClass[0]);
+            if (typeClass?.length && typeClass[0] && customClass?.[1]) {
+              const customsClass = typeClass[0].split(/-$/);
+              if (customsClass) {
+                return createSizeCustomStyles(
+                  Number(customClass[1]),
+                  customsClass[0],
+                );
+              }
+            }
+            return {};
+          } else {
+            return classStyles[item as never] || {};
+          }
+        } catch (error) {
+          return {};
+        }
+      });
+    }
+    return {};
+  } catch (error) {
+    return {};
+  }
+};

src/styles/Theme.styles.ts

@@ -0,0 +0,0 @@ import {StyleSheet} from 'react-native';

src/utils/helper.util.ts

@@ -0,0 +0,0 @@ import {OnEndReachedProps} from '../model';

src/utils/index.ts

 export * from './resize.util';
 export * from './helper.util';

src/utils/resize.util.ts

@@ -0,0 +0,0 @@ import {Dimensions, NativeModules, Platform} from 'react-native';

src/utils/styles.ts

@@ -36,15 +36,9 @@ import {CONFIG_BOX} from '../config';
       const keyStyle = propertiesOptions[property]?.toString();
-      if (hasSlice) {
-        const keysStyle = keyStyle.split(' ');
-        if (keysStyle.length > 1) {
-          keysStyle.forEach(item => {
-            styles[styleProperty] = {
-              [item]: value,
-            };
-          });
-        } else {
+      const keyStyleSplit = hasSlice ? keyStyle.split(' ') : [];
+      if (keyStyleSplit.length > 1) {
+        keyStyleSplit.forEach(item => {
           styles[styleProperty] = {
-            [keyStyle]: value,
+            [item]: value,
           };
-        }
+        });
       } else {
@@ -114,15 +108,9 @@ styles[styleProperty] = {
       const keyStyle = propertiesOptions[property]?.toString();
-      if (hasSlice) {
-        const keysStyle = keyStyle.split(' ');
-        if (keysStyle.length > 1) {
-          keysStyle.forEach(item => {
-            styles[styleProperty] = {
-              [item]: value,
-            };
-          });
-        } else {
+      const keyStyleSplit = hasSlice ? keyStyle.split(' ') : [];
+      if (keyStyleSplit.length > 1) {
+        keyStyleSplit.forEach(item => {
           styles[styleProperty] = {
-            [keyStyle]: value,
+            [item]: value,
           };
-        }
+        });
       } else {
@@ -129,0 +117,0 @@ styles[styleProperty] = {

No alert changes

Worsened metrics

Total package byte prevSize

424868

decreased by-2.22%

Number of package files

64

decreased by-11.11%

Lines of code

7609

decreased by-0.39%

No dependency changes