taro/src/components/basic/Buttons.tsx

import { Button, View, Text } from "@tarojs/components";
import './Buttons.scss'
import { ButtonType, ComponentStatus } from "../../utils/types";

import { Button as RNButton } from 'react-native';
import { AtActivityIndicator } from 'taro-ui';
import "taro-ui/dist/style/components/activity-indicator.scss";
import 'taro-ui/dist/style/components/loading.scss';



/*
export default function Buttons(props: { title: string, type?: ButtonType, status?: ComponentStatus,onClick?:()=>void,style?:any }) {
    
    const myStyle = props.status == ComponentStatus.disable ? { opacity: 0.4 } : {}
    return (
        <View style={{...myStyle}}>
            <Button className={props.type == ButtonType.outline ? 'outline_btn' : 'btn'} style={{...props.style}} onClick={props.onClick}>{props.title}</Button>
        </View>

    )
}*/

export default function Buttons(props: {
    title: string,
    type?: ButtonType,
    className?: any,
    onClick: () => void,
    disabled?: boolean,
    lowLight?: boolean,
    openType?: string,
    btnStyle?: any,
    showLoading?: boolean
}) {

    function onClick() {
        if (props.disabled) return
        props.onClick()
    }


    var mainClass = 'elevated'
    var textClass = 'elevated_text'

    if (props.type == ButtonType.text) {
        mainClass = 'texted'

        return <View style={{ opacity: (props.lowLight || props.disabled) ? 0.4 : 1 }} onClick={onClick}>
            <Text
                style={{
                    ...props.btnStyle,
                    fontWeight: 500,
                }} className={props.className ? props.className : ''}>{props.title}</Text>
        </View>
    }

    if (props.type == ButtonType.outline) {
        mainClass = 'outlined'
        textClass = 'outlined_text'

        return (
            <View className={mainClass} style={{ ...props.btnStyle, opacity: props.lowLight ? 0.4 : 1 }} onClick={onClick}>
                {
                    props.showLoading && <View style={{ marginBottom: 2, marginRight: 5 }}>
                        <AtActivityIndicator size={32} color="#000" />
                    </View>
                }
                <Text

                    style={{
                        color: props.btnStyle.color,
                        fontSize: props.btnStyle.fontSize,
                        fontWeight: 500,
                        marginBottom: 2
                    }}>{props.title}</Text>
            </View>
        )
    }
    // else {
    //     mainClass = 'puretext'
    //     textClass = 'puretext_text'
    // }
    return (
        <View className={mainClass} style={{ ...props.btnStyle, opacity: props.lowLight ? 0.4 : 1 }} onClick={onClick}>
            {
                props.showLoading && <View style={{ marginBottom: 2, marginRight: 5 }}>
                    <AtActivityIndicator size={32} color="#000" />
                </View>
            }
            <Text
                // onClick={onClick}
                style={{
                    color: props.btnStyle.color,
                    fontSize: props.btnStyle.fontSize,
                    fontWeight: 500,
                    marginBottom: 2
                }}>{props.title}</Text>
        </View>
        // <View  onClick={onClick}>
        //     <Text 
        //         style={{
        //             height: props.btnStyle.height,
        //             lineHeight: props.btnStyle.height,
        //             color: props.btnStyle.color,
        //             fontSize: props.btnStyle.fontSize
        //         }}>{props.title}</Text>
        // </View>
    )
}