ui-rn 1.0.5 → 1.0.6

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.6",
   "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/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/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'