ui-rn 1.0.5 → 1.0.7

package/Example/index.tsx

@@ -1,28 +1,19 @@
-import { StyleSheet, Text, View } from 'react-native'
-import React from 'react'
-import { Polygon, Svg } from 'react-native-svg'
-export default function Hexagon({ width = 100, stroke = "black", strokeWidth = "2", fill = "lightblue" }) {
-    const diameter = width
-    const radius = (diameter / 2)
-    const m = (Math.sqrt(3) / 2) * radius// Math.sin(60) * radius //-> x
-    const n = (1 / 2) * radius//Math.cos(60) * radius//-> y
-    const hexagonPoints = [
-        { x: radius, y: 0 },
-        { x: radius + m, y: radius - n },//60
-        { x: radius + m, y: radius + n },
-        { x: radius, y: diameter },//180
-        { x: radius - m, y: radius + n },
-        { x: radius - m, y: radius - n },
-        { x: radius, y: 0 },
-    ]
-    const points = hexagonPoints.map(point => `${point.x},${point.y}`).join(' ');
+import { StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import { Block } from 'ui-rn';
+export default function App() {
     return (
-        <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
-            <Svg height={diameter} width={width}>
-                <Polygon points={points} fill={fill} stroke={stroke} strokeWidth={strokeWidth} />
-            </Svg>
+        <View style={styles.container}>
+            <Text>App</Text>
+            <Block></Block>
         </View>
     );
-};
+}
 
-const styles = StyleSheet.create({})
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-rn",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "repository": "https://github.com/phamha98/ui-rn",
   "description": "ui-rn",
   "author": "Phamha98",
@@ -10,7 +10,8 @@
     "@types/underscore": "^1.11.15",
     "validate-color": "^2.2.4",
     "react-native-safe-area-view": "^1.1.1",
-    "react-native-linear-gradient": "^2.8.3"
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-indicators": "^0.17.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/Icon/PropsStyle.tsx

@@ -14,9 +14,10 @@ import {
 } from 'react-native'
 
 import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
-export interface Props {
+import { MakeProp } from "./makeProps";
+export interface Props extends MakeProp {
     name: string
-    size?: number | Array<size>
+    size?: number
     type?: keyof typeof RNVectorIcon
     onPress?: () => void
     styleContainer?: StyleProp<ViewStyle>
@@ -28,5 +29,4 @@ export interface Props {
 
 }
 
-type size = 18 | 20 | 22 | 23 | 24 | 25 | 26 | 28 | 30 | 32 | 34 | 36
 

package/src/Icon/index.tsx

@@ -39,26 +39,31 @@ export const RNVectorIcon = {
 }
 export type IconType = keyof typeof RNVectorIcon
 import { Props, } from './PropsStyle'
-import { Colors } from '../config'
+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) {
+        super(props)
+        this.res = makeProps(props)
+    }
     render() {
+        const { size, color, style } = this.res
+        console.debug('res', this.res)
         if (this.props.name === "none") return null
         const IconView = RNVectorIcon[this.props.type || 'Ionicons']
         if (typeof this.props.onPress != "function") {
             return (
                 <IconView
-                    //@ts-ignore
-                    size={this.props.size}
-                    //@ts-ignore
-                    color={Colors(this.props.color) ?? this.props.color}
+                    size={size}
+                    color={color}
+                    style={style}
                     name={this.props.name}
                     onPress={this.props.onPress}
-                    style={this.props.style as any}
                 />
             )
         }
@@ -76,13 +81,12 @@ export default class IconApp extends React.PureComponent<Props> {
                         this.props.styleContainer,
 
                     ]} >
-                <IconView //@ts-ignore
-                    size={this.props.size}
-                    //@ts-ignore
-                    color={Colors(this.props.color) ?? this.props.color}
+                <IconView
+                    size={size}
+                    color={color}
+                    style={style}
                     name={this.props.name}
                     onPress={this.props.onPress}
-                    style={this.props.style as any}
                 />
             </TouchableOpacity>
         )

package/src/Icon/makeProps.ts

@@ -0,0 +1,48 @@
+import { StyleSheet } from "react-native";
+import { isNaN, isNumber } from "underscore";
+enum COLORS { "white" = 1, "red", "blue", "black", "green", "yellow", "pink", "gray", "primary" }
+enum NAMES { "ic_back" = "add-circle", }
+type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
+type NameModifiers = Partial<Record<keyof typeof NAMES, boolean>>;
+
+const SHORT_VARIATIONS = {
+    mar: "margin",
+    marH: "marginHorizontal",
+    marV: "marginVertical",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    zIndex: 'zIndex',
+    opacity: 'opacity',
+    size: 'size',
+
+};
+export type ShortKey = keyof typeof SHORT_VARIATIONS;
+export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>
+export type MakeProp = Convert<ShortKey> & ColorModifiers & NameModifiers
+
+export const makeProps = (props: { [key: string]: any }) => {
+    const style: { [key: string]: number | string } = {};
+    let res = { size: props.size ?? 23, color: props.color ?? 'gray', name: props.name ?? 'home' }
+    Object.keys(props).forEach((key) => {
+        const match = key.match(/^(\w+)-(\w+)$/) as string[]
+        console.debug('COLORS11', key, COLORS[key])
+        if (COLORS[key]) {
+            console.debug('COLORS22', match)
+            res['color'] = key
+        }
+        if (NAMES[key]) {
+            let match = key.match(/^(\w+)_(\w+)$/) as string[]
+            res['name'] = NAMES[match[1]]
+        }
+        else if (match) {
+            const value = isNaN(parseInt(match[2], 10)) ? match[2] : parseInt(match[2], 10)
+            if (match[1] == 'size') res['size'] = parseInt(match[2], 10)
+            else if (match[1] == 'color') res['color'] = match[2]
+            else if (SHORT_VARIATIONS[match[1]]) style[SHORT_VARIATIONS[match[1]]] = value
+        }
+
+    });
+    return { ...res, style: StyleSheet.create({ style }).style }
+};

package/src/Loading/Loading.tsx

@@ -0,0 +1,107 @@
+import React, { PureComponent } from 'react'
+import {
+    Dimensions,
+    Modal,
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    ViewProps,
+    Text
+} from 'react-native'
+import LoadingType, { LoadingTypeI } from './LoadingType'
+export type Props = {
+    boxStyle?: ViewProps['style']
+    containerStyle?: ViewProps['style']
+}
+type State = {
+    visible: boolean,
+    touch: boolean,
+    progress: number,
+    progressShow: boolean,
+    type: LoadingTypeI
+}
+export default class Loading extends PureComponent<Props, State> {
+    state: State
+    constructor(props: any) {
+        super(props)
+        this.state = {
+            visible: false,
+            touch: false,
+            progress: 0,
+            progressShow: false,
+            type: 'BallIndicator'
+        }
+    }
+    show(touch = true) {
+        this.setState({ visible: true, touch })
+    }
+    hide() {
+        this.setState({ visible: false, progress: 0, progressShow: false })
+    }
+    openProgress(e: any) { this.setState(prev => ({ ...prev, ...e })) }
+    onPressOut() {
+        if (this.state.touch) {
+            this.hide()
+        }
+    }
+
+    componentDidMount(): void {
+    }
+    componentWillUnmount(): void {
+    }
+    renderIcon() {
+        if (this.state.type) return React.createElement(LoadingType[this.state.type], { color: '#4481EB' })
+        return null
+    }
+    renderProgress() {
+        if (this.state.progressShow) {
+            return (<Text style={styles.text}>{this.state.progress}{'%'}</Text>)
+        }
+        return null
+    }
+    render() {
+        return (
+            <Modal
+                visible={this.state.visible}
+                transparent
+                style={{ zIndex: 999999 }}
+            >
+                <TouchableOpacity onPress={() => this.onPressOut()}
+                    activeOpacity={1} style={[styles.container, this.props.containerStyle]}>
+                    <View style={[styles.box, this.props.boxStyle]}>
+                        {this.renderProgress()}
+                        {this.renderIcon()}
+                    </View>
+                </TouchableOpacity>
+            </Modal>
+        )
+    }
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#06060660',
+    },
+    box: {
+        width: Dimensions.get('screen').width * 0.25,
+        height: Dimensions.get('screen').width * 0.25,
+        backgroundColor: '#fff',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 16,
+        shadowColor: '#000',
+        elevation: 3,
+        shadowOffset: {
+            width: 3,
+            height: 5,
+        },
+        shadowOpacity: 0.1,
+    },
+    text: {
+        position: 'absolute',
+        fontSize: 10,
+        color: '#4481EB'
+    },
+})

package/src/Loading/LoadingType.tsx

@@ -0,0 +1,24 @@
+import {
+    BallIndicator,
+    BarIndicator,
+    DotIndicator,
+    MaterialIndicator,
+    PacmanIndicator,
+    PulseIndicator,
+    SkypeIndicator,
+    UIActivityIndicator,
+    WaveIndicator,
+} from 'react-native-indicators';
+const LoadingType = {
+    BallIndicator,
+    BarIndicator,
+    DotIndicator,
+    MaterialIndicator,
+    PacmanIndicator,
+    PulseIndicator,
+    SkypeIndicator,
+    UIActivityIndicator,
+    WaveIndicator,
+}
+export type LoadingTypeI = keyof typeof LoadingType
+export default LoadingType

package/src/Loading/index.tsx

@@ -0,0 +1,22 @@
+import React, { PureComponent, ReactNode } from "react"
+import RNLoading, { Props } from "./Loading"
+
+const loadingRef = React.createRef<RNLoading>()
+export class Loading {
+    static show() {
+        loadingRef.current?.show()
+    }
+    static hide() {
+        loadingRef.current?.hide()
+    }
+}
+export default class LoadingView extends PureComponent<Props> {
+    render(): ReactNode {
+        return (
+
+            <RNLoading ref={loadingRef} {...this.props} />
+
+        )
+
+    }
+}

package/src/Text/Props.ts

@@ -1,6 +1,7 @@
 import React from 'react'
 import { TextProps, TextStyle } from 'react-native'
 import { IColor, ILanguage } from '../config'
+import { MakeProp } from './makeStyle'
 interface PropsParent {
     children?: React.ReactNode
     bold?: boolean | TextStyle['fontWeight']
@@ -11,10 +12,10 @@ interface PropsParent {
     color?: string | Array<IColor>
     toUpperCase?: boolean
     toLowerCase?: boolean
-    flex1?: boolean; flex2?: boolean; flex3?: boolean; flex4?: boolean; flex5?: boolean; flex6?: boolean; flex7?: boolean; flex8?: boolean; flex9?: boolean;
     background?: string | Array<ILanguage>
 }
-export interface Props extends TextProps, PropsParent {
+//@ts-ignore
+export interface Props extends TextProps, PropsParent, MakeProp {
     backgroundColor?: string
     primary?: boolean
     white?: boolean

package/src/Text/Style.ts

@@ -1,40 +1,22 @@
 import { Colors } from "../config";
 import { StyleProp, ViewStyle, StyleSheet } from "react-native";
-import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
+
 import { Props } from './Props'
+import { makeStyle } from "./makeStyle";
 export const Style: any = (props: Props, ColorApp = Colors) => {
     const PropsConvert = StyleSheet.flatten([
-        props.color && { color: switchArrayValueFromData(props.color, ColorApp) },
-        props.background && { backgroundColor: props.background },
-        props.size && { fontSize: props.size },
+        props.color && { color: props.color },
         props.center && { textAlign: 'center' },
         props.italic && { fontStyle: 'italic' },
         props.bold && { fontWeight: typeof props.bold == "boolean" ? '500' : props.bold },
         props.underline && { textDecorationLine: 'underline' },
         props.toUpperCase && { textTransform: 'uppercase' },
         props.toLowerCase && { textTransform: 'lowercase' },
-        props.white && { color: "white" }, props.red && { color: "red" },
-        props.blue && { color: "blue" }, props.green && { color: "green" },
-        props.yellow && { color: "yellow" }, props.pink && { color: "pink" },
-        props.gray && { color: "gray" }, props.primary && { color: Colors('primary') },
-        props.black && { color: "black" },
-        props.flex1 && { flex: 1 }, props.flex2 && { flex: 2 }, props.flex3 && { flex: 3 },
-        props.flex4 && { flex: 4 }, props.flex5 && { flex: 5 }, props.flex6 && { flex: 6 },
-        props.flex7 && { flex: 7 }, props.flex8 && { flex: 8 }, props.flex9 && { flex: 9 },
-
-    ])
-    const PropsApp = StyleSheet.flatten([
 
     ])
     return [
-        PropsApp,
+        makeStyle(props),
         PropsConvert,
     ]
 }
 
-const switchArrayValueFromData = (value: any, ColorApp = Colors) => {
-    if (isArray(value) && value.length == 1) return ColorApp(value[0])
-    if (isString(value) || isNumber(value)) return value
-    return undefined
-}
-

package/src/Text/makeStyle.ts

@@ -0,0 +1,84 @@
+import { StyleSheet } from "react-native";
+import { isNaN, isNumber } from "underscore";
+enum COLORS {
+    "white" = 1,
+    "red",
+    "blue",
+    "black",
+    "green",
+    "yellow",
+    "pink",
+    "gray",
+    "primary"
+}
+type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
+
+const SHORT_VARIATIONS = {
+    bg: "backgroundColor",
+    background: "backgroundColor",
+    color: "color",
+    w: "width",
+    width: "width",
+    minW: "minWidth",
+    maxW: "maxWidth",
+    h: "height",
+    height: "height",
+    minH: "minHeight",
+    maxH: "maxHeight",
+    pad: "padding",
+    padH: "paddingHorizontal",
+    padV: "paddingVertical",
+    padL: "paddingLeft",
+    padT: "paddingTop",
+    padR: "paddingRight",
+    padB: "paddingBottom",
+    mar: "margin",
+    marH: "marginHorizontal",
+    marV: "marginVertical",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    border: 'borderWidth',
+    borderW: 'borderWidth',
+    borderR: "borderRadius",
+    borderC: "borderColor",
+    borderLW: "borderLeftWidth",
+    borderTW: "borderTopWidth",
+    borderRW: "borderRightWidth",
+    borderBW: "borderBottomWidth",
+    flex: 'flex',
+    zIndex: 'zIndex',
+    left: 'left',
+    top: 'top',
+    bottom: 'bottom',
+    right: 'right',
+    opacity: 'opacity',
+    //
+    size: 'fontSize'
+};
+export type ShortKey = keyof typeof SHORT_VARIATIONS;
+export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>
+export type MakeProp = Convert<ShortKey> & ColorModifiers
+
+export const makeStyle = (props: { [key: string]: any }) => {
+    const style: { [key: string]: number | string } = {};
+    Object.keys(props).forEach((key) => {
+        const match = key.match(/^(\w+)-(\w+)$/) as string[]
+        if (COLORS[key]) {
+            style['colors'] = key
+        }
+        else if (match) {
+            const value = isNaN(parseInt(match[2], 10)) ? match[2] : parseInt(match[2], 10)
+            if (SHORT_VARIATIONS[match[1]]) style[SHORT_VARIATIONS[match[1]]] = value
+            else style[match[1]] = value
+        }
+        else {
+            if (SHORT_VARIATIONS[key]) {
+                style[SHORT_VARIATIONS[key]] = props[key]
+            }
+            // else style[key] = props[key]
+        }
+    });
+    return StyleSheet.create({ style }).style;
+};

package/src/Touch/Block.tsx

@@ -16,12 +16,12 @@ const Block = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props },
         colors={props.background}
         start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
         end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
-        style={[Style(props), style, props.styleBox]}>
+        style={[Style(props), style]}>
         {props.children}
       </LinearGradient >
     )
   //@ts-ignore
-  return (<View ref={ref} style={[Style(props), style, props.styleBox]}
+  return (<View ref={ref} style={[Style(props), style]}
     {...props}>
     {props.children}
   </View>

package/src/Touch/Props.ts

@@ -1,134 +1,49 @@
-import { ColorName } from "@assets/colors"
+import { IColor } from "../config"
 import { StyleProp, FlexStyle, TouchableWithoutFeedbackProps, ViewStyle } from "react-native"
-type B = boolean
-type N = number
-type S = string
-export interface PropsConvert {
-  bg?: S | Array<ColorName>
-  w?: FlexStyle['width']
-  h?: FlexStyle['height']
-  pad?: N
-  padH?: N
-  padV?: N
-  padL?: N
-  padT?: N
-  padR?: N
-  padB?: N
-  flex?: N
-  mar?: N
-  marH?: N
-  marV?: N
-  marL?: N
-  marT?: N
-  marR?: N
-  marB?: N
-  minW?: N
-  maxW?: N
-  minH?: N
-  maxH?: N
-  borderC?: S | Array<color>
-  borderW?: N | Array<border>
-  borderLW?: N | Array<border>
-  borderTW?: N | Array<border>
-  borderRW?: N | Array<border>
-  borderBW?: N | Array<border>
-  borderR?: N | Array<size>
-  borderUpRadius?: N | Array<size>
-  borderDownRadius?: N | Array<size>
+import { MakeProp } from "./makeStyle"
+
+export interface PropsApp {
+  borderUpRadius?: number
+  borderDownRadius?: number
   alignItems?: FlexStyle['alignItems']
   alignSelf?: FlexStyle['alignSelf']
   justifyContent?: FlexStyle['justifyContent']
   borderStyle?: ViewStyle['borderStyle']
   opacity?: ViewStyle['opacity']
   overflow?: ViewStyle['overflow']
-  zIndex?: ViewStyle['opacity']
-
-}
-export interface PropsApp {
-  _background?: S//old
-  alignI?: FlexStyle['alignItems']//old
-  justifyC?: FlexStyle['justifyContent']//old
-  bgW?: B//old
-  positionA?: boolean//old
-  left0?: boolean //old
-  top0?: boolean //old
-  right0?: boolean//old
-  bottom0?: boolean //old
-  centerH?: boolean //old
-  overH?: B //old
-  w100?: B //old
-  h100?: B //old
-  width?: FlexStyle['width']//old
-  height?: FlexStyle['height']//old
-  borderR100?: boolean
-  //
-  mid?: B
-  row?: B
-  alignCenter?: B
-  justifyCenter?: B
-  borderCircle?: B
-  centerBetween?: B
-  justifyBetween?: B
-  overHidden?: B
-  square?: N
-  width100?: B
-  height100?: B
-  white?: B
-  red?: B
-  blue?: B
-  black?: B
-  green?: B
-  yellow?: B
-  pink?: B
-  gray?: B
-  primary?: B
-  background?: Array<ColorName> | Array<(S)> | S
+  w100?: boolean
+  h100?: boolean
+  mid?: boolean
+  row?: boolean
+  alignCenter?: boolean
+  justifyCenter?: boolean
+  borderCircle?: boolean
+  centerBetween?: boolean
+  justifyBetween?: boolean
+  overHidden?: boolean
+  square?: number
+  width100?: boolean
+  height100?: boolean
+  background?: Array<IColor> | Array<(string)> | string
   gradient?: 'vertical' | 'horizontal'
-  flexOne?: B//old
-  shadowColor?: S | B
-  //option
-  borderOption?: { top?: N, left?: N, right?: N, bottom?: N, color?: S }
-  positionOption?: { top?: N, left?: N, right?: N, bottom?: N }
-  paddingOption?: { all?: N, top?: N, left?: N, right?: N, bottom?: N }
-  paddingFlex?: { vertical?: N, horizontal?: N }
-  marginFlex?: { vertical?: N, horizontal?: N }
-  marginOption?: { all?: N, top?: N, left?: N, right?: N, bottom?: N }
-  shadowOption?: { color?: S, width?: N, height?: N, opacity?: N, radius?: N, elevation?: N }
-  //recent
-  pad5?: B; pad10?: B; pad20?: B;
-  padV5?: B; padV10?: B; padV20?: B;
-  padH5?: B; padH10?: B; padH20?: B;
-  padL5?: B; padL10?: B; padL20?: B;
-  padT5?: B; padT10?: B; padT20?: B;
-  padR5?: B; padR10?: B; padR20?: B;
-  padB5?: B; padB10?: B; padB20?: B;
-  //
-  mar5?: B; mar10?: B; mar20?: B;
-  marH5?: B; marH10?: B; marH20?: B;
-  marV5?: B; marV10?: B; marV20?: B;
-  marL5?: B; marL10?: B; marL20?: B;
-  marT5?: B; marT10?: B; marT20?: B;
-  marR5?: B; marR10?: B; marR20?: B;
-  marB5?: B; marB10?: B; marB20?: B;
-  //
-  flex1?: B; flex2?: B; flex3?: B; flex4?: B; flex5?: B; flex6?: B; flex7?: B; flex8?: B; flex9?: B;
-  borderR2?: B; borderR5?: B; borderR10?: B; borderR15?: B; borderR20?: B;
-  borderW1?: B; borderW2?: B; borderW3?: B; borderW4?: B; borderW5?: B;
-  /**'padding30;marginTop6;borderRadius11;' */
-  styleChar?: S
-  //
+  flexOne?: boolean
+  shadowColor?: string | boolean
+  borderOption?: { top?: number, left?: number, right?: number, bottom?: number, color?: string }
+  positionOption?: { top?: number, left?: number, right?: number, bottom?: number }
+  paddingOption?: { all?: number, top?: number, left?: number, right?: number, bottom?: number }
+  paddingFlex?: { vertical?: number, horizontal?: number }
+  marginFlex?: { vertical?: number, horizontal?: number }
+  marginOption?: { all?: number, top?: number, left?: number, right?: number, bottom?: number }
+  shadowOption?: { color?: string, width?: number, height?: number, opacity?: number, radius?: number, elevation?: number }
+  styleChar?: string
   widthScreen?: boolean
   heightScreen?: boolean
+
 }
-export interface Props extends TouchableWithoutFeedbackProps, PropsConvert, PropsApp {
+
+//@ts-ignore
+export interface Props extends TouchableWithoutFeedbackProps, PropsApp, MakeProp {
   children?: React.ReactNode
-  styleBox?: StyleProp<ViewStyle>
-  hidden?: B
-  activeOpacity?: N
-}
-/**
- * backfaceVisibility:route hidden
- */
-type size = 0 | 5 | 10 | 15 | 20 | 30 | 40 | 50 | 100
-type color = '#ddd' | '#fff' | '#eee' | '#000' | 'white' | 'blue' | 'green' | 'pink' | 'yellow' | "white" | 'black' | 'blue'
-type border = 0.3 | 0.5 | 0.8 | 1 | 2 | 3 | 4 | 5
+  hidden?: boolean
+  activeOpacity?: number
+} 

package/src/Touch/Style.ts

@@ -2,53 +2,17 @@ import { StyleProp, ViewStyle, StyleSheet, Dimensions } from "react-native";
 import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
 import { Props } from './Props'
 import { Colors } from "../config";
+import { makeStyle } from "./makeStyle";
 
 export const Style: any = (props: Props) => {
-  const PropsConvert = StyleSheet.flatten([
-    props.bg && { backgroundColor: props.bg },
-    props.background && { backgroundColor: props.background },
-    props.w && { width: props.w },
-    props.minW && { minWidth: props.minW },
-    props.maxW && { maxWidth: props.maxW },
-    props.h && { height: props.h },
-    props.minH && { minHeight: props.minH },
-    props.maxH && { maxHeight: props.maxH },
-    props.pad && { padding: props.pad },
-    props.padH && { paddingHorizontal: props.padH },
-    props.padV && { paddingVertical: props.padV },
-    props.padL && { paddingLeft: props.padL },
-    props.padT && { paddingTop: props.padT },
-    props.padR && { paddingRight: props.padR },
-    props.padB && { paddingBottom: props.padB },
-    props.mar && { margin: props.mar },
-    props.marH && { marginHorizontal: props.marH },
-    props.marV && { marginVertical: props.marV },
-    props.marL && { marginLeft: props.marL },
-    props.marT && { marginTop: props.marT },
-    props.marR && { marginRight: props.marR },
-    props.marB && { marginBottom: props.marB },
-    //new
-    props.borderR && { borderRadius: (props.borderR) },
-    props.borderC && { borderColor: (props.borderC) },
-    props.borderW && { borderWidth: (props.borderW) },
-    props.borderLW && { borderLeftWidth: (props.borderLW) },
-    props.borderTW && { borderTopWidth: (props.borderTW) },
-    props.borderRW && { borderRightWidth: (props.borderRW) },
-    props.borderBW && { borderBottomWidth: (props.borderBW) },
-    //new
+
+  const PropsApp = StyleSheet.flatten([
     props.alignItems && { alignItems: props.alignItems },
     props.justifyContent && { justifyContent: props.justifyContent },
     props.borderStyle && { borderStyle: props.borderStyle },
-    props.opacity && { opacity: props.opacity },
     props.overflow && { overflow: props.overflow },
-    props.zIndex && { zIndex: props.zIndex },
-
-  ])
-  const PropsApp = StyleSheet.flatten([
-    props._background && { backgroundColor: props._background },
     props.borderUpRadius && { borderTopLeftRadius: (props.borderUpRadius), borderTopRightRadius: (props.borderUpRadius) },
     props.borderDownRadius && { borderBottomLeftRadius: (props.borderUpRadius), borderBottomRightRadius: (props.borderUpRadius) },
-    //
     props.mid && { alignItems: 'center', justifyContent: 'center' },
     props.row && { flexDirection: 'row' },
     props.width100 && { width: '100%' },
@@ -61,10 +25,6 @@ export const Style: any = (props: Props) => {
     props.overHidden && { overflow: 'hidden' },
     props.centerBetween && { alignItems: 'center', justifyContent: 'space-between', },
 
-    props.white && { backgroundColor: "white" }, props.black && { backgroundColor: "black" }, props.red && { backgroundColor: "red" },
-    props.blue && { backgroundColor: "blue" }, props.green && { backgroundColor: "green" },
-    props.yellow && { backgroundColor: "yellow" }, props.pink && { backgroundColor: "pink" },
-    props.gray && { backgroundColor: "gray" }, props.primary && { backgroundColor: Colors('primary') },
     //
     props.positionOption && {
       position: 'absolute',
@@ -92,14 +52,6 @@ export const Style: any = (props: Props) => {
       borderRightWidth: props.borderOption.right,
       borderColor: props.borderOption.color,
     },
-    props.marginFlex && {
-      paddingHorizontal: props.marginFlex.horizontal,
-      paddingVertical: props.marginFlex.vertical,
-    },
-    props.paddingFlex && {
-      paddingHorizontal: props.paddingFlex.horizontal,
-      paddingVertical: props.paddingFlex.vertical,
-    },
     !isEmpty(props.shadowOption) && {
       shadowColor: props.shadowOption?.color,
       shadowOffset: {
@@ -117,71 +69,16 @@ export const Style: any = (props: Props) => {
       shadowRadius: 10,
       elevation: 2,
     },
-    props.pad5 && { padding: 5 }, props.pad10 && { padding: 10 }, props.pad20 && { padding: 20 },
-    props.padV5 && { paddingVertical: 5 },
-    props.padV10 && { paddingVertical: 10 }, props.padV20 && { paddingVertical: 20 },
-    props.padH5 && { paddingHorizontal: 5 }, props.padH10 && { paddingHorizontal: 10 },
-    props.padH20 && { paddingHorizontal: 20 }, props.padL10 && { paddingLeft: 10 },
-    props.padT10 && { paddingTop: 10 }, props.padR10 && { paddingRight: 10 },
-    props.padB10 && { paddingBottom: 10 }, props.mar5 && { margin: 5 },
-    props.mar10 && { margin: 10 }, props.mar20 && { margin: 20 },
-    props.marH5 && { marginHorizontal: 5 }, props.marH10 && { marginHorizontal: 10 },
-    props.marH20 && { marginHorizontal: 20 }, props.marV5 && { marginVertical: 5 },
-    props.marV10 && { marginVertical: 10 }, props.marV20 && { marginVertical: 20 },
-    props.marL10 && { marginLeft: 10 }, props.marT10 && { marginTop: 10 },
-    props.marR10 && { marginRight: 10 },
-    props.marB5 && { marginBottom: 5 }, props.marB10 && { marginBottom: 10 }, props.marB20 && { marginBottom: 20 },
-    /** */
+    props.w100 && { width: '100%' },
+    props.h100 && { height: '100%' },
 
-    props.pad5 && { padding: 5 }, props.pad10 && { padding: 10 }, props.pad20 && { padding: 20 },
-    props.padV5 && { paddingVertical: 5 }, props.padV10 && { paddingVertical: 10 }, props.padV20 && { paddingVertical: 20 },
-    props.padH5 && { paddingHorizontal: 5 }, props.padH10 && { paddingHorizontal: 10 }, props.padH20 && { paddingHorizontal: 20 },
-    props.padL5 && { paddingLeft: 5 }, props.padL10 && { paddingLeft: 10 }, props.padL20 && { paddingLeft: 20 },
-    props.padT5 && { paddingTop: 5 }, props.padT10 && { paddingTop: 10 }, props.padT20 && { paddingTop: 20 },
-    props.padR5 && { paddingRight: 5 }, props.padR10 && { paddingRight: 10 }, props.padR20 && { paddingRight: 20 },
-    props.padB5 && { paddingBottom: 5 }, props.padB10 && { paddingBottom: 10 }, props.padB20 && { paddingBottom: 20 },
-    //
-    props.mar5 && { margin: 5 }, props.mar10 && { margin: 10 }, props.mar20 && { margin: 20 },
-    props.marV5 && { marginVertical: 5 }, props.marV10 && { marginVertical: 10 }, props.marV20 && { marginVertical: 20 },
-    props.marH5 && { marginHorizontal: 5 }, props.marH10 && { marginHorizontal: 10 }, props.marH20 && { marginHorizontal: 20 },
-    props.marL5 && { marginLeft: 5 }, props.marL10 && { marginLeft: 10 }, props.marL20 && { marginLeft: 20 },
-    props.marT5 && { marginTop: 5 }, props.marT10 && { marginTop: 10 }, props.marT20 && { marginTop: 20 },
-    props.marR5 && { marginRight: 5 }, props.marR10 && { marginRight: 10 }, props.marR20 && { marginRight: 20 },
-    props.marB5 && { marginBottom: 5 }, props.marB10 && { marginBottom: 10 }, props.marB20 && { marginBottom: 20 },
-    /** */
-
-    props.flex1 && { flex: 1 }, props.flex2 && { flex: 2 }, props.flex3 && { flex: 3 },
-    props.flex4 && { flex: 4 }, props.flex5 && { flex: 5 }, props.flex6 && { flex: 6 },
-    props.flex7 && { flex: 7 }, props.flex8 && { flex: 8 }, props.flex9 && { flex: 9 },
-    props.borderR2 && { borderRadius: 2 }, props.borderR5 && { borderRadius: 5 },
-    props.borderR10 && { borderRadius: 10 }, props.borderR15 && { borderRadius: 15 }, props.borderR20 && { borderRadius: 20 },
-    props.borderW1 && { borderWidth: 1 }, props.borderW2 && { borderWidth: 2 },
-    props.borderW3 && { borderWidth: 3 }, props.borderW4 && { borderWidth: 4 }, props.borderW5 && { borderWidth: 5 },    ///
-    //old
-    props.positionA && { position: 'absolute' },  //old
-    props.left0 && { left: 0, },  //old
-    props.top0 && { top: 0, },  //old
-    props.right0 && { right: 0, },  //old
-    props.bottom0 && { bottom: 0, },  //old
-    props.flexOne && { flex: 1 },  //old
-    props.bgW && { backgroundColor: "white" }, //old
-    props.centerH && { alignItems: 'center', justifyContent: 'space-between', },//old
-    props.overH && { overflow: 'hidden' },//old
-    props.w100 && { width: '100%' }, //old
-    props.h100 && { height: '100%' }, //old
-    props.width && { width: props.width },
-    props.height && { height: props.height },
-    props.alignI && { alignItems: props.alignI },
-    props.justifyC && { justifyContent: props.justifyC },
-    props.borderR100 && { borderRadius: 100 },
-    //
     props.widthScreen && { width: Dimensions.get('screen').width },
     props.heightScreen && { height: Dimensions.get('screen').height },
 
 
   ])
   return [
+    makeStyle(props),
     PropsApp,
-    PropsConvert,
   ]
 }

package/src/Touch/Touch.tsx

@@ -21,7 +21,7 @@ const Touch = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props },
           colors={props.background}
           start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
           end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
-          style={[Style(props), style, props.styleBox]}
+          style={[Style(props), style]}
         >
           {props.children}
         </LinearGradient >
@@ -31,7 +31,7 @@ const Touch = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props },
     <TouchableOpacity
       ref={ref}
       activeOpacity={props.activeOpacity || 0.5}
-      style={[Style(props), style, props.styleBox]}
+      style={[Style(props), style]}
       {...props}>
       {props.children}
     </TouchableOpacity>

package/src/Touch/makeStyle.ts

@@ -0,0 +1,85 @@
+import { StyleSheet } from "react-native";
+import { isNaN, isNumber } from "underscore";
+enum COLORS {
+    "white" = 1,
+    "red",
+    "blue",
+    "black",
+    "green",
+    "yellow",
+    "pink",
+    "gray",
+    "primary"
+}
+type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
+
+const SHORT_VARIATIONS = {
+    bg: "backgroundColor",
+    background: "backgroundColor",
+    w: "width",
+    width: "width",
+    minW: "minWidth",
+    maxW: "maxWidth",
+    h: "height",
+    height: "height",
+    minH: "minHeight",
+    maxH: "maxHeight",
+    pad: "padding",
+    padH: "paddingHorizontal",
+    padV: "paddingVertical",
+    padL: "paddingLeft",
+    padT: "paddingTop",
+    padR: "paddingRight",
+    padB: "paddingBottom",
+    mar: "margin",
+    marH: "marginHorizontal",
+    marV: "marginVertical",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    border: 'borderWidth',
+    borderW: 'borderWidth',
+    borderR: "borderRadius",
+    borderC: "borderColor",
+    borderLW: "borderLeftWidth",
+    borderTW: "borderTopWidth",
+    borderRW: "borderRightWidth",
+    borderBW: "borderBottomWidth",
+    flex: 'flex',
+    zIndex: 'zIndex',
+    left: 'left',
+    top: 'top',
+    bottom: 'bottom',
+    right: 'right',
+    opacity: 'opacity'
+};
+export type ShortKey = keyof typeof SHORT_VARIATIONS;
+export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>
+export type MakeProp = Convert<ShortKey> & ColorModifiers
+
+export const makeStyle = (props: { [key: string]: any }) => {
+    const style: { [key: string]: number | string } = {};
+    Object.keys(props).forEach((key) => {
+        const match = key.match(/^(\w+)-(\w+)$/) as string[]
+        console.debug(key, match)
+        if (COLORS[key]) {
+            style['backgroundColor'] = key
+        }
+        else if (match) {
+            const value = isNaN(parseInt(match[2], 10)) ? match[2] : parseInt(match[2], 10)
+            console.debug('value', value)
+            console.debug('value', parseInt(match[2], 10))
+            console.debug('value', isNumber(parseInt(match[2], 10)))
+            if (SHORT_VARIATIONS[match[1]]) style[SHORT_VARIATIONS[match[1]]] = value
+            else style[match[1]] = value
+        }
+        else {
+            if (SHORT_VARIATIONS[key]) {
+                style[SHORT_VARIATIONS[key]] = props[key]
+            }
+            else style[key] = props[key]
+        }
+    });
+    return StyleSheet.create({ style }).style;
+};

package/src/Touch/utils.ts

@@ -1,4 +1,3 @@
-import { Log } from "@utils";
 import { isString } from "underscore";
 
 

package/src/config.ts

@@ -1,7 +1,7 @@
-export const Colors = (e) => {
+export const Colors = (e: any) => {
     return e
 }
-export const Language = (e) => {
+export const Language = (e: any) => {
     return e
 }
 export type IColor = keyof typeof COLOR
@@ -33,4 +33,4 @@ export const Icons = {
     up: 'chevron-up-outline',
     up1: 'caret-up-outline',
     header: 'heart-outline'
-}
+}

package/src/index.tsx

@@ -2,4 +2,6 @@ export { default as Touch } from './Touch/Touch'
 export { default as Block } from './Touch/Block'
 export { default as Text } from './Text'
 export { default as Icon } from './Icon'
-export { default as Layout } from './Layout'
+export { default as Layout } from './Layout'
+export { default as LoadingView } from './Loading'
+export { Loading } from './Loading'