react 封装一个input框（2019-11-15）

[yaogengzhu]

react 封装一个input

import React, { useState, ChangeEvent } from 'react'
import { createUseStyles } from 'react-jss'

const useStyles = createUseStyles({
    inputContainer: {
        display: "flex",
        borderRadius: '8px',
        height: "48px",
        background: "#F2F2F2",
        overflow: "hidden",
        border: "1px solid #F2F2F2",

        "&.isfocus": {
            border: (props: any) => props.isVerifyFail ? "1px solid #E51C23" : "1px solid #009688"
        },

        "& input": {
            paddingTop: '24px',
            paddingLeft: '10px',
            fontSize: '14px',
            color: '#333',
            width: "100%",
            height: "100%",
            outline: "none",
            background: "#F2F2F2",
            border: "none",
            opacity: (props: IProps) => props.type === "date" ? 0 : 1
        }
    },
    content: {
        position: 'relative',
        flex: 1,
    },
    placeholder: {
        position: 'absolute',
        top: '50%',
        left: "10px",
        transform: 'translateY(-50%)',
        color: '#666666',
        fontSize: "14px",
        transition: "all .4s",

        '&.isfocus': {
            top: '4px',
            transform: 'translateY(0)',
            fontSize: '12px',
            color: (props: any) => props.isVerifyFail ? "#E51C23" : "#009688"
        },

        '&.isrequired': {
            '&:before': {
                content: '"*"',
                color: '#F82525',
                verticalAlign: "middle"
            }
        }
    }
})

interface IProps {
    value?: string
    prefix?: () => React.ReactNode
    suffix?: () => React.ReactNode
    renderContent?: () => React.ReactNode
    onFocus?: () => void
    onBlur?: () => void
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void
    placeholder?: string,
    isRequired?: boolean,
    isVerifyFail?: boolean,
    disabled?: boolean,
    type?: string
}

const Input: React.FC<IProps> = (props: IProps) => {
    const classes = useStyles(props)
    const [isFocus, setFoucsState] = useState(false)

    function onFocus() {
        props.onFocus && props.onFocus()
        setFoucsState(true)
    }

    function onBlur() {
        props.onBlur && props.onBlur()
        setFoucsState(false)
    }

    return <label className={[classes.inputContainer, isFocus ? 'isfocus' : ''].join(' ')}>
        {props.prefix && props.prefix()}
        <div className={classes.content}>
            <input type={props.type || 'text'} value={props.value} disabled={props.disabled} onFocus={onFocus} onBlur={onBlur} onChange={props.onChange}></input>
            {props.renderContent && props.renderContent()}
            <span className={[classes.placeholder, isFocus || props.value ? 'isfocus' : '', props.isRequired ? 'isrequired' : ""].join(' ')}>{props.placeholder}</span>
        </div>
        {props.suffix && props.suffix()}
    </label>
}

export {
    Input
}

[yaogengzhu]