ui-rn 1.0.18 → 2.0.0

package/ZoomImg.tsx

@@ -1,206 +0,0 @@
-import { Animated, Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import React, { useEffect } from 'react'
-import { Image, ImageProps } from 'react-native'
-import { ImageZoom, ZoomableRef } from '@likashefqet/react-native-image-zoom';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { Dimensions } from 'react-native';
-import { isNumber } from 'underscore';
-import { Platform } from 'react-native';
-import { StatusBar } from 'react-native';
-import SafeAreaView from 'react-native-safe-area-view'
-
-
-const { width, height } = Dimensions.get('screen')
-const HIT_SLOP = { top: 16, left: 16, bottom: 16, right: 16 };
-const TIME = 50
-interface ZoomImageProps extends ImageProps {
-    uri: string
-}
-interface ZoomImageState {
-    visible: boolean
-    disableZoonOut: boolean
-}
-export default class ZoomImg extends React.Component<ZoomImageProps, ZoomImageState> {
-    ref = React.createRef<ZoomableRef>()
-    scale: number = 1
-    scale_v = 0.3
-    _startZoomIn: any
-    _startZoomOut: any
-    constructor(props: ZoomImageProps) {
-        super(props)
-        this.state = {
-            visible: false,
-            disableZoonOut: true
-        }
-        this.zoomIn = this.zoomIn.bind(this)
-        this.zoomOut = this.zoomOut.bind(this)
-        this.startZoomIn = this.startZoomIn.bind(this)
-        this.stopZoomIn = this.stopZoomIn.bind(this)
-        this.startZoomOut = this.startZoomOut.bind(this)
-        this.stopZoomOut = this.stopZoomOut.bind(this)
-
-    }
-    onZoom(e?: any) { }
-    zoomIn() {
-        const { disableZoonOut } = this.state
-        if (disableZoonOut) { this.setState({ disableZoonOut: false }) }
-        this.scale = this.scale + this.scale_v
-        this.ref.current?.zoom({ scale: this.scale, x: width / 2, y: height / 2 })
-    }
-    zoomOut() {
-        if (this.scale - this.scale_v <= 1) {
-            this.ref.current?.zoom({ scale: 1, x: 0, y: 0 })
-            this.setState({ disableZoonOut: true })
-            return
-        }
-        this.scale = this.scale - this.scale_v
-        this.ref.current?.zoom({ scale: this.scale, x: width / 2, y: height / 2 })
-    }
-    startZoomIn() { this._startZoomIn = setInterval(() => { this.zoomIn() }, TIME); }
-    stopZoomIn() { if (this._startZoomIn) clearInterval(this._startZoomIn) }
-    startZoomOut() { this._startZoomOut = setInterval(() => { this.zoomOut() }, TIME); }
-    stopZoomOut() { if (this._startZoomOut) clearInterval(this._startZoomOut) }
-
-    open() { this.setState({ visible: true }) }
-    close() { this.setState({ visible: false }) }
-    render(): React.ReactNode {
-        const { uri, style, source } = this.props
-        const { visible, disableZoonOut, } = this.state
-        const styleButton = { hitSlop: HIT_SLOP }
-        if (isNumber(source)) return <Image source={source} style={style} />
-        //@ts-ignore
-        const value = uri ?? source.uri
-        return (
-            <>
-                <TouchableOpacity onPress={() => this.open()}>
-                    <Image source={{ uri: value }} style={style} />
-                </TouchableOpacity>
-                <Modal visible={visible} presentationStyle='fullScreen'>
-                    <StatusBarManager presentationStyle='overFullScreen' />
-                    <SafeAreaView forceInset={{ top: 'always', }} style={{ flex: 1, backgroundColor: '#000' }}>
-                        <GestureHandlerRootView style={styles.container}>
-                            <View style={[styles.header]}>
-                                <SafeAreaView style={styles.root}>
-                                    <TouchableOpacity style={styles.closeButton} onPress={() => this.close()} hitSlop={HIT_SLOP}>
-                                        <Text style={styles.closeText}>✕</Text>
-                                    </TouchableOpacity>
-                                    <TouchableOpacity style={styles.closeButton} onPress={this.zoomIn} onLongPress={this.startZoomIn} onPressOut={this.stopZoomIn} {...styleButton}>
-                                        <Text style={[styles.closeText, styles.actionText]}>+</Text>
-                                    </TouchableOpacity>
-                                    <TouchableOpacity style={[styles.closeButton, { backgroundColor: disableZoonOut ? "#0000001F" : "#00000077" }]} disabled={disableZoonOut} onPress={this.zoomOut} onLongPress={this.startZoomOut} onPressOut={this.stopZoomOut} {...styleButton}>
-                                        <Text style={[styles.closeText, styles.actionText]}>-</Text>
-                                    </TouchableOpacity>
-                                </SafeAreaView>
-                            </View>
-                            <ImageZoom
-                                ref={this.ref}
-                                uri={value}
-                                minScale={1}
-                                maxScale={3}
-                                // scale={4}
-                                doubleTapScale={3}
-                                isSingleTapEnabled
-                                isDoubleTapEnabled
-                                onInteractionStart={() => {
-                                    console.log('onInteractionStart');
-                                    this.onZoom();
-                                }}
-                                onInteractionEnd={() => console.log('onInteractionEnd')}
-                                onPanStart={() => console.log('onPanStart')}
-                                onPanEnd={() => console.log('onPanEnd')}
-                                onPinchStart={() => console.log('onPinchStart')}
-                                onPinchEnd={() => console.log('onPinchEnd')}
-                                onSingleTap={() => console.log('onSingleTap')}
-                                onDoubleTap={(zoomType) => {
-                                    console.log('onDoubleTap', zoomType);
-                                    this.onZoom(zoomType);
-                                }}
-                                onProgrammaticZoom={(zoomType) => {
-                                    console.log('onZoom', zoomType);
-                                    this.onZoom(zoomType);
-                                }}
-                                style={styles.image}
-                                onResetAnimationEnd={(finished, values) => {
-                                    console.log('onResetAnimationEnd', finished);
-                                    console.log('lastScaleValue:', values?.SCALE.lastValue);
-                                    // onAnimationEnd(finished);
-                                }}
-                                resizeMode="contain"
-                            />
-                        </GestureHandlerRootView >
-                    </SafeAreaView>
-                </Modal>
-            </>
-        )
-    }
-
-}
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: "#000",
-    },
-    image: {
-        width: width,
-        height: height,
-        resizeMode: 'contain'
-    },
-    header: {
-        position: "absolute",
-        width: "100%",
-        zIndex: 1,
-        top: 0,
-    },
-    action: {
-        position: "absolute",
-        width: "100%",
-        zIndex: 1,
-        top: 100,
-    },
-    root: {
-        alignItems: "flex-end",
-    },
-    closeButton: {
-        marginRight: 8,
-        marginTop: 8,
-        width: 44,
-        height: 44,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: 22,
-        backgroundColor: "#00000077",
-    },
-    closeText: {
-        lineHeight: 22,
-        fontSize: 19,
-        textAlign: "center",
-        color: "#FFF",
-        includeFontPadding: false,
-    },
-    actionButton: {
-        marginRight: 5,
-        marginTop: 8,
-        width: 40,
-        height: 40,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: 22,
-        backgroundColor: "#00000077",
-    },
-    actionText: {
-        fontSize: 24
-    }
-})
-const StatusBarManager = ({ presentationStyle, }: { presentationStyle?: "fullScreen" | "pageSheet" | "formSheet" | "overFullScreen" | undefined; }) => {
-    if (Platform.OS === "ios" || presentationStyle !== "overFullScreen") {
-        return null;
-    }
-    //Can't get an actual state of app status bar with default RN. Gonna rely on "presentationStyle === overFullScreen" prop and guess application status bar state to be visible in this case.
-    StatusBar.setHidden(true);
-    useEffect(() => {
-        StatusBar.setHidden(true);
-        return () => StatusBar.setHidden(false);
-    }, []);
-    return null;
-};

package/globals.config.js

@@ -1,33 +0,0 @@
-const { isObject } = require("lodash");
-const log = console.debug
-
-class Log {
-    static e = (...a) => log(Color.red, ...a)
-    static e1 = (...a) => Log.format(Color.red, ...a)
-    static d = (...a) => log(Color.cyan, ...a)
-    static d1 = (...a) => Log.format(Color.cyan, ...a)
-    static g = (...a) => log(Color.green, ...a)
-    static g1 = (...a) => Log.format(Color.green, ...a)
-    static y = (...a) => log(Color.yellow, ...a)
-    static y1 = (...a) => Log.format(Color.yellow, ...a)
-    static format(color = Color.yellow, ...a) {
-        {
-            if (a.length == 1) {
-                log(color, JSON.stringify(a[0], null, ' '));
-            }
-            else if (a.length >= 2) {
-                const end = a.slice(2)
-                if (isObject(a[0])) log(JSON.stringify(a[0], null, ' '), JSON.stringify(a[1], null, ' '), ...end);
-                else log(color, a[0], JSON.stringify(a[1], null, ' '), ...end);
-            }
-
-        }
-    }
-}
-const Color = {
-    red: '\x1b[31m',
-    green: '\x1b[32m',
-    yellow: '\x1b[33m',
-    cyan: '\x1b[36m',
-}
-window.Log = Log

package/globals.d.ts

@@ -1,16 +0,0 @@
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-
-export class Log {
-  static e: (...message: any[]) => void;
-  static e1: (...message: any[]) => void;
-  static d: (...message: any[]) => void;
-  static d1: (...message: any[]) => void;
-  static g: (...message: any[]) => void;
-  static g1: (...message: any[]) => void;
-  static y: (...message: any[]) => void;
-  static y1: (...message: any[]) => void;
-  static format: (...message: any[]) => void;
-}

package/src/Dropdown.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-import { Platform, StatusBar } from "react-native";
-import DropdownAlert from "react-native-dropdownalert";
-const ref = React.createRef<DropdownAlert>()
-
-export default function AlertApp() {
-    return (
-        <DropdownAlert
-            ref={ref}
-            inactiveStatusBarBackgroundColor={'green'}
-            updateStatusBar={false}
-            errorColor={'#9A9891FFFF'}
-            successColor={'#238209'}
-            // errorImageSrc={Images('logo')}
-            // successImageSrc={Images('logo')}
-            imageStyle={{
-                padding: 8,
-                width: 36,
-                height: 36,
-                alignSelf: 'center',
-                borderRadius: 23,
-            }}
-            elevation={40}
-            containerStyle={{ backgroundColor: 'pink' }}
-            closeInterval={1300}
-            showCancel={false}
-            wrapperStyle={{ marginTop: Platform.OS == "ios" ? 0 : StatusBar.currentHeight }}
-        />
-    )
-}
-export class AlertPush {
-    static warn(title: string = 'title', message: string = '') {
-        ref.current?.alertWithType('warn', title, message)
-    }
-    static error(title: string = 'title', message: string = '') {
-        ref.current?.alertWithType('error', title, message)
-    }
-    static success(title: string = 'title', message: string = '') {
-        ref.current?.alertWithType('success', title, message)
-    }
-}

package/src/Loading/Loading.tsx

@@ -1,172 +0,0 @@
-import React, { PureComponent } from 'react'
-import {
-    Dimensions,
-    Modal,
-    StyleSheet,
-    TouchableOpacity,
-    View,
-    ViewProps,
-    Text
-} from 'react-native'
-import LoadingType, { LoadingTypeI } from './LoadingType'
-
-/**
- * Props for the Loading component
- * @interface Props
- */
-export type Props = {
-    /** Custom style for the loading box container */
-    boxStyle?: ViewProps['style']
-    /** Custom style for the main container */
-    containerStyle?: ViewProps['style']
-}
-
-/**
- * Internal state of the Loading component
- * @interface State
- */
-type State = {
-    /** Controls the visibility of the loading modal */
-    visible: boolean,
-    /** Determines if the loading can be dismissed by touch */
-    touch: boolean,
-    /** Current progress value (0-100) */
-    progress: number,
-    /** Controls whether to show progress indicator */
-    progressShow: boolean,
-    /** Type of loading indicator to display */
-    type: LoadingTypeI
-}
-
-/**
- * Loading component that displays a modal with customizable loading indicators
- * and optional progress tracking.
- * 
- * @example
- * ```tsx
- * const loading = useRef<Loading>(null);
- * 
- * // Show loading
- * loading.current?.show();
- * 
- * // Show loading with progress
- * loading.current?.openProgress({ progress: 50, progressShow: true });
- * 
- * // Hide loading
- * loading.current?.hide();
- * ```
- */
-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'
-        }
-    }
-
-    /**
-     * Shows the loading modal
-     * @param touch - Whether the loading can be dismissed by touch (default: true)
-     */
-    show(touch = true) {
-        this.setState({ visible: true, touch })
-    }
-
-    /**
-     * Hides the loading modal and resets progress
-     */
-    hide() {
-        this.setState({ visible: false, progress: 0, progressShow: false })
-    }
-
-    /**
-     * Updates the progress state
-     * @param e - Object containing progress updates
-     */
-    openProgress(e: any) { this.setState(prev => ({ ...prev, ...e })) }
-
-    /**
-     * Handles touch events to dismiss the loading modal
-     */
-    onPressOut() {
-        if (this.state.touch) {
-            this.hide()
-        }
-    }
-
-    componentDidMount(): void {
-    }
-    componentWillUnmount(): void {
-    }
-
-    /**
-     * Renders the loading indicator based on the selected type
-     * @returns React element for the loading indicator
-     */
-    renderIcon() {
-        if (this.state.type) return React.createElement(LoadingType[this.state.type], { color: '#4481EB' })
-        return null
-    }
-
-    /**
-     * Renders the progress text if progressShow is true
-     * @returns React element for the progress text
-     */
-    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

@@ -1,46 +0,0 @@
-import {
-    BallIndicator,
-    BarIndicator,
-    DotIndicator,
-    MaterialIndicator,
-    PacmanIndicator,
-    PulseIndicator,
-    SkypeIndicator,
-    UIActivityIndicator,
-    WaveIndicator,
-} from 'react-native-indicators';
-
-/**
- * Collection of loading indicator components from react-native-indicators
- * Each indicator provides a different visual style for loading states
- * 
- * Available indicators:
- * - BallIndicator: Animated bouncing balls
- * - BarIndicator: Animated bars
- * - DotIndicator: Animated dots
- * - MaterialIndicator: Material design style loading indicator
- * - PacmanIndicator: Pacman-style loading animation
- * - PulseIndicator: Pulsing animation
- * - SkypeIndicator: Skype-style loading indicator
- * - UIActivityIndicator: Native iOS-style activity indicator
- * - WaveIndicator: Wave-like animation
- */
-const LoadingType = {
-    BallIndicator,
-    BarIndicator,
-    DotIndicator,
-    MaterialIndicator,
-    PacmanIndicator,
-    PulseIndicator,
-    SkypeIndicator,
-    UIActivityIndicator,
-    WaveIndicator,
-}
-
-/**
- * Type definition for loading indicator names
- * Represents the keys of the LoadingType object
- */
-export type LoadingTypeI = keyof typeof LoadingType
-
-export default LoadingType

package/src/Loading/index.tsx

@@ -1,55 +0,0 @@
-import React, { PureComponent, ReactNode } from "react"
-import RNLoading, { Props } from "./Loading"
-
-/**
- * Reference to the Loading component instance
- */
-const loadingRef = React.createRef<RNLoading>()
-
-/**
- * Static Loading class that provides global access to loading functionality
- * This class allows showing and hiding the loading indicator from anywhere in the app
- * 
- * @example
- * ```tsx
- * // Show loading
- * Loading.show();
- * 
- * // Hide loading
- * Loading.hide();
- * ```
- */
-export class Loading {
-    /**
-     * Shows the loading indicator
-     */
-    static show() {
-        loadingRef.current?.show()
-    }
-
-    /**
-     * Hides the loading indicator
-     */
-    static hide() {
-        loadingRef.current?.hide()
-    }
-}
-
-/**
- * LoadingView component that renders the Loading component
- * This component should be mounted at the root level of your app
- * to enable global loading functionality
- * 
- * @example
- * ```tsx
- * // In your App.tsx or root component
- * <LoadingView />
- * ```
- */
-export default class LoadingView extends PureComponent<Props> {
-    render(): ReactNode {
-        return (
-            <RNLoading ref={loadingRef} {...this.props} />
-        )
-    }
-}

package/src/config.ts

@@ -1,36 +0,0 @@
-export const Colors = (e: any) => {
-    return e
-}
-export const Language = (e: any) => {
-    return e
-}
-export type IColor = keyof typeof COLOR
-export type ILanguage = keyof typeof LANG
-export const COLOR = {
-
-}
-export const LANG = {
-
-}
-export const Icons = {
-    menu: "menu",
-    home: 'home',
-    person: 'person-outline',
-    camera: 'camera-outline',
-    pass: 'lock-closed-outline',
-    pass1: "key-outline",
-    image: 'image-outline',
-    image1: 'images-outline',
-    mail: 'mail-outline',
-    settings: 'settings-outline',
-    logout: 'log-out-outline',
-    filter: 'funnel-outline',
-    search: 'search-outline',
-    back: 'arrow-back-outline',
-    back1: 'chevron-back-outline',
-    down: "chevron-down-outline",
-    down1: "caret-down-outline",
-    up: 'chevron-up-outline',
-    up1: 'caret-up-outline',
-    header: 'heart-outline'
-}

package/test.tsx

@@ -1,25 +0,0 @@
-import { Block, Text, Icon, Touch, Layout, LoadingView } from 'ui-rn';
-import React from 'react'
-export default function test() {
-    return (
-        <Layout>
-            <Block
-                mar-5
-                pad-5
-                red
-                background={['red', 'blue']}
-                positionOption={{ top: 10, left: 5 }}
-                alignCenter
-                borderCircle
-                mid
-                row
-                width-150
-                height-300>
-                <Text size-14 red toUpperCase italic bold>
-                    Hello
-                </Text>
-                <Icon name="home" size-45 type="MaterialIcons" />
-            </Block>
-        </Layout>
-    )
-}

package/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "compilerOptions": {},
-  "files": ["./global.d.ts"],
-  "include": ["./App.tsx"],
-  "extends": "@react-native/typescript-config/tsconfig.json"
-}