rn-collie/compoment/PayInput/PayInput.js

A UI library for react native.

import React, {Component} from 'react';
import {StyleSheet, Text, View, ViewStyle} from 'react-native';
import utils from "../../utils";
import Functions from "../../function/Functions";

type Props = {
    style?: ViewStyle,
    textStyle?: ViewStyle,
    dividerStyle?: ViewStyle,
    onComplete?: ()=>string,
}
type State = {
    pwds: string,//需要显示的值
}
/**
 * 此控件需要配合PayKeyboard控件使用
 */
export default class PayInput extends Component<Props, State> {

    state = {
        pwds: [null, null, null, null, null, null],
    };

    /**
     * @param value 密码键盘单次输入的值
     */
    onInput(value: string | null) {
        if (utils.isEmpty(value)) {
            return;
        }

        if (value === 'X') {
            this._onDelete();
        } else {
            this._onAdd(value);
            this._onComplete();
        }
    }

    /**
     * 清除输入的所有值
     */
    clear() {
        this.setState({
            pwds: [null, null, null, null, null, null]
        })
    }

    /**
     * @returns 返回输入的值
     */
    get inputValue(): string {
        return Functions.join(this.state.pwds, '', '')
    }

    _onDelete() {
        let {pwds} = this.state;
        let i = pwds.length - 1;
        while (i > -1) {
            if (pwds[i] != null) {
                pwds[i] = null;
                break;
            }
            i--;
        }
        this.setState({});
    }

    _onAdd(text) {
        let {pwds} = this.state;
        let i = 0;
        while (i < pwds.length) {
            if (pwds[i] == null) {
                pwds[i] = text;
                break;
            }
            i++;
        }
        this.setState({});
    }

    _onComplete() {
        let isOk = Functions.arrayOK(this.state.pwds, (value) => {
            return value !== null;
        });
        if (isOk) {
            this.props.onComplete && this.props.onComplete(Functions.join(this.state.pwds, '', ''));
        }
    }

    renderText() {
        let {pwds} = this.state;
        let ret = [];
        let textStyle = this.props.textStyle;
        let dividerStyle = this.props.dividerStyle;
        pwds.forEach((value, index) => {
            if (value) {
                ret.push(<Text key={index} style={[styles.textStyle, utils.parseStyle(textStyle)]}>*</Text>)
            } else {
                ret.push(<Text key={index} style={[styles.textStyle, utils.parseStyle(textStyle)]}/>)
            }
            if (index !== (pwds.length - 1)) {
                ret.push(<View key={index + 10} style={[styles.dividerStyle, dividerStyle]}/>)
            }
        });
        return ret;
    }

    render() {
        return <View style={[styles.rootStyle, utils.parseStyle(this.props.style)]}>
            {this.renderText()}
        </View>;
    }
}

const styles = StyleSheet.create({
    rootStyle: {
        borderRadius: 3,
        borderWidth: 1,
        height: 45,
        borderColor:'rgba(0,0,0,0.10)',
        flexDirection: 'row'
    },
    textStyle: {
        flex: 1,
        fontSize: 40,
        textAlign: 'center',
        color: '#333333'
    },
    dividerStyle: {
        width: 1, height: '100%', backgroundColor: 'rgba(0,0,0,0.10)'
    }
});