ui-rn 2.0.3 → 2.0.4

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "ui-rn",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "repository": "https://github.com/package-dev/ui-rn",
   "description": "ui-rn",
   "author": "Phamha98",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "src/index.tsx",
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.70"

package/src/Icon/PropsStyle.d.ts

@@ -0,0 +1,15 @@
+import { RNVectorIcon } from "./index";
+import { FlexStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { MakeProp } from "./makeProps";
+export interface Props extends MakeProp {
+    name: string;
+    size?: number;
+    type?: keyof typeof RNVectorIcon;
+    onPress?: () => void;
+    styleContainer?: StyleProp<ViewStyle>;
+    style?: StyleProp<TextStyle>;
+    alignSelf?: FlexStyle['alignSelf'];
+    disabled?: boolean;
+    activeOpacity?: number;
+    color?: string;
+}

package/src/Icon/PropsStyle.js

@@ -0,0 +1 @@
+export {};

package/src/Icon/index.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
+/**
+ * Collection of React Native Vector Icons
+ * Provides access to various icon sets from react-native-vector-icons
+ */
+export declare const RNVectorIcon: {
+    Ionicons: typeof Ionicons;
+    AntDesign: typeof Ionicons;
+    Entypo: typeof Ionicons;
+    EvilIcons: typeof Ionicons;
+    MaterialIcons: typeof Ionicons;
+    MaterialCommunityIcons: typeof Ionicons;
+    FontAwesome: typeof Ionicons;
+    FontAwesome5: typeof FontAwesome5;
+    SimpleLineIcons: typeof Ionicons;
+    Feather: typeof Ionicons;
+    Octicons: typeof Ionicons;
+    Fontisto: typeof Ionicons;
+};
+export type IconType = keyof typeof RNVectorIcon;
+import { Props } from "./PropsStyle";
+export default class IconApp extends React.PureComponent<Props> {
+    static defaultProps: Props;
+    res: {
+        color: string;
+        style: any;
+        size: number;
+    };
+    constructor(props: Props);
+    render(): React.JSX.Element | null;
+}

package/src/Icon/index.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import EvilIcons from "react-native-vector-icons/EvilIcons";
+import FontAwesome from "react-native-vector-icons/FontAwesome";
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import MaterialIcons from "react-native-vector-icons/MaterialIcons";
+import Entypo from "react-native-vector-icons/Entypo";
+import AntDesign from "react-native-vector-icons/AntDesign";
+import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";
+import Feather from "react-native-vector-icons/Feather";
+import Octicons from "react-native-vector-icons/Octicons";
+import Fontisto from "react-native-vector-icons/Fontisto";
+/**
+ * Collection of React Native Vector Icons
+ * Provides access to various icon sets from react-native-vector-icons
+ */
+export const RNVectorIcon = {
+    Ionicons,
+    AntDesign,
+    Entypo,
+    EvilIcons,
+    MaterialIcons,
+    MaterialCommunityIcons,
+    FontAwesome,
+    FontAwesome5,
+    SimpleLineIcons,
+    Feather,
+    Octicons,
+    Fontisto,
+};
+import { makeProps } from "./makeProps";
+export default class IconApp extends React.PureComponent {
+    static defaultProps = {
+        size: 23,
+        color: "gray",
+        name: "home",
+    };
+    res;
+    constructor(props) {
+        super(props);
+        this.res = makeProps(props);
+    }
+    render() {
+        const { size, color, style } = this.res;
+        if (this.props.name === "none")
+            return null;
+        const IconView = RNVectorIcon[this.props.type || "Ionicons"];
+        if (typeof this.props.onPress != "function") {
+            return (<IconView size={size} color={color} style={style} name={this.props.name} onPress={this.props.onPress}/>);
+        }
+        return (<TouchableOpacity activeOpacity={this.props.activeOpacity || 0.5} disabled={typeof this.props.onPress == "function" ? this.props.disabled : true} style={[
+                styles.container,
+                { ...(this.props.alignSelf && { alignSelf: this.props.alignSelf }) },
+                this.props.style,
+                this.props.styleContainer,
+            ]}>
+        <IconView size={size} color={color} style={style} name={this.props.name} onPress={this.props.onPress}/>
+      </TouchableOpacity>);
+    }
+}
+/**
+ * Default styles for the IconApp component
+ */
+const styles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "flex-start",
+    },
+});

package/src/Icon/makeProps.d.ts

@@ -0,0 +1,37 @@
+import { ViewStyle } from "react-native";
+declare enum COLORS {
+    white = 1,
+    red = 2,
+    blue = 3,
+    black = 4,
+    green = 5,
+    yellow = 6,
+    pink = 7,
+    gray = 8,
+    primary = 9
+}
+type ColorKey = keyof typeof COLORS;
+type ColorModifiers = Partial<Record<ColorKey, boolean>>;
+declare const PROPS: {
+    readonly mar: "margin";
+    readonly marH: "marginHorizontal";
+    readonly marV: "marginVertical";
+    readonly marL: "marginLeft";
+    readonly marT: "marginTop";
+    readonly marR: "marginRight";
+    readonly marB: "marginBottom";
+    readonly zIndex: "zIndex";
+    readonly opacity: "opacity";
+    readonly size: "size";
+};
+export type ShortKey = keyof typeof PROPS;
+export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>;
+export type MakeProp = Convert<ShortKey> & ColorModifiers;
+type Result = {
+    size: number;
+    color: string;
+    name: string;
+    style: ViewStyle;
+};
+export declare const makeProps: (props: Record<string, any>) => Result;
+export {};

package/src/Icon/{makeProps.ts → makeProps.js}

@@ -1,20 +1,16 @@
-import { StyleSheet, ViewStyle } from "react-native";
-
-enum COLORS {
-    white = 1,
-    red,
-    blue,
-    black,
-    green,
-    yellow,
-    pink,
-    gray,
-    primary,
-}
-
-type ColorKey = keyof typeof COLORS;
-type ColorModifiers = Partial<Record<ColorKey, boolean>>;
-
+import { StyleSheet } from "react-native";
+var COLORS;
+(function (COLORS) {
+    COLORS[COLORS["white"] = 1] = "white";
+    COLORS[COLORS["red"] = 2] = "red";
+    COLORS[COLORS["blue"] = 3] = "blue";
+    COLORS[COLORS["black"] = 4] = "black";
+    COLORS[COLORS["green"] = 5] = "green";
+    COLORS[COLORS["yellow"] = 6] = "yellow";
+    COLORS[COLORS["pink"] = 7] = "pink";
+    COLORS[COLORS["gray"] = 8] = "gray";
+    COLORS[COLORS["primary"] = 9] = "primary";
+})(COLORS || (COLORS = {}));
 const PROPS = {
     mar: "margin",
     marH: "marginHorizontal",
@@ -26,66 +22,43 @@ const PROPS = {
     zIndex: "zIndex",
     opacity: "opacity",
     size: "size",
-} as const;
-
-export type ShortKey = keyof typeof PROPS;
-
-export type Convert<T extends string> = Partial<
-    Record<T, boolean | number | string>
->;
-
-export type MakeProp = Convert<ShortKey> & ColorModifiers;
-
-/** type guards */
-const isColorKey = (key: string): key is ColorKey => key in COLORS;
-const isShortKey = (key: string): key is ShortKey =>
-    key in PROPS;
-
-type Result = {
-    size: number;
-    color: string;
-    name: string;
-    style: ViewStyle;
 };
-
-export const makeProps = (props: Record<string, any>): Result => {
-    const style: ViewStyle = {};
-
-    const res: Omit<Result, "style"> = {
+/** type guards */
+const isColorKey = (key) => key in COLORS;
+const isShortKey = (key) => key in PROPS;
+export const makeProps = (props) => {
+    const style = {};
+    const res = {
         size: props.size ?? 23,
         color: props.color ?? "gray",
         name: props.name ?? "home",
     };
-
     Object.keys(props).forEach((key) => {
         const match = key.match(/^(\w+)-(\w+)$/);
-
         // color modifier
         if (isColorKey(key)) {
             res.color = key;
             return;
         }
-
         if (match) {
             const rawKey = match[1];
             const rawValue = match[2];
-
             const value = isNaN(Number(rawValue))
                 ? rawValue
                 : Number(rawValue);
-
             if (rawKey === "size") {
                 res.size = Number(rawValue);
-            } else if (rawKey === "color") {
+            }
+            else if (rawKey === "color") {
                 res.color = rawValue;
-            } else if (isShortKey(rawKey)) {
-                (style as any)[PROPS[rawKey]] = value;
+            }
+            else if (isShortKey(rawKey)) {
+                style[PROPS[rawKey]] = value;
             }
         }
     });
-
     return {
         ...res,
         style: StyleSheet.create({ style }).style,
     };
-};
+};

package/src/Icon/PropsStyle.tsx

@@ -1,32 +0,0 @@
-import {
-    RNVectorIcon,
-} from "./index"
-import React from 'react'
-import {
-    FlexStyle,
-    StyleProp,
-    StyleSheet,
-    TextProps,
-    TextStyle,
-    TouchableOpacity,
-    ViewProps,
-    ViewStyle,
-} from 'react-native'
-
-import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
-import { MakeProp } from "./makeProps";
-export interface Props extends MakeProp {
-    name: string
-    size?: number
-    type?: keyof typeof RNVectorIcon
-    onPress?: () => void
-    styleContainer?: StyleProp<ViewStyle>
-    style?: StyleProp<TextStyle>
-    alignSelf?: FlexStyle['alignSelf']
-    disabled?: boolean
-    activeOpacity?: number
-    color?: string
-
-}
-
-

package/src/Icon/index.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-import { StyleSheet, TouchableOpacity } from "react-native";
-import Ionicons from "react-native-vector-icons/Ionicons";
-import EvilIcons from "react-native-vector-icons/EvilIcons";
-import FontAwesome from "react-native-vector-icons/FontAwesome";
-import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
-import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
-import MaterialIcons from "react-native-vector-icons/MaterialIcons";
-import Entypo from "react-native-vector-icons/Entypo";
-import AntDesign from "react-native-vector-icons/AntDesign";
-import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";
-import Feather from "react-native-vector-icons/Feather";
-import Octicons from "react-native-vector-icons/Octicons";
-import Fontisto from "react-native-vector-icons/Fontisto";
-
-/**
- * Collection of React Native Vector Icons
- * Provides access to various icon sets from react-native-vector-icons
- */
-export const RNVectorIcon = {
-  Ionicons,
-  AntDesign,
-  Entypo,
-  EvilIcons,
-  MaterialIcons,
-  MaterialCommunityIcons,
-  FontAwesome,
-  FontAwesome5,
-  SimpleLineIcons,
-  Feather,
-  Octicons,
-  Fontisto,
-};
-
-export type IconType = keyof typeof RNVectorIcon;
-
-import { Props } from "./PropsStyle";
-import { makeProps } from "./makeProps";
-
-export default class IconApp extends React.PureComponent<Props> {
-  static defaultProps: Props = {
-    size: 23,
-    color: "gray",
-    name: "home",
-  };
-
-  res: { color: string; style: any; size: number };
-
-  constructor(props: Props) {
-    super(props);
-    this.res = makeProps(props);
-  }
-  render() {
-    const { size, color, style } = this.res;
-    if (this.props.name === "none") return null;
-    const IconView = RNVectorIcon[this.props.type || "Ionicons"];
-    if (typeof this.props.onPress != "function") {
-      return (
-        <IconView
-          size={size}
-          color={color}
-          style={style}
-          name={this.props.name}
-          onPress={this.props.onPress}
-        />
-      );
-    }
-    return (
-      <TouchableOpacity
-        activeOpacity={this.props.activeOpacity || 0.5}
-        disabled={
-          typeof this.props.onPress == "function" ? this.props.disabled : true
-        }
-        style={[
-          styles.container,
-          { ...(this.props.alignSelf && { alignSelf: this.props.alignSelf }) },
-          this.props.style,
-          this.props.styleContainer,
-        ]}
-      >
-        <IconView
-          size={size}
-          color={color}
-          style={style}
-          name={this.props.name}
-          onPress={this.props.onPress}
-        />
-      </TouchableOpacity>
-    );
-  }
-}
-
-/**
- * Default styles for the IconApp component
- */
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-    alignSelf: "flex-start",
-  },
-});