import * as React from "react" ; import { getKey } from "keycon" ; import Input from "./Input" ; import { isUndefined , IObject } from "@daybrush/utils" ; import { prefix } from "../utils/utils" ; import styled from "react-css-styled" ; const TextElement = styled ( "input" , `
{
    position: relative;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: block;
    width: 100%;
    height: 30px;
    background: transparent;
    color: var(--mainColor);
    font-weight: bold;
    background: none;
    border: 0;
    padding: 5px;
    box-sizing: border-box;
    background: var(--back1);
    font-size: 12px;
}
` ) ; export default class TextBox extends Input < { } , { } , HTMLInputElement > { protected inputAttributes : IObject < any > = { } ; public render ( ) { return ( < TextElement ref = { this . input } className = { prefix ( "input" ) } { ... this . inputAttributes } { ... this . props . inputProps } onInput = { this . onInput } onKeyDown = { this . onKeyDown } onKeyUp = { this . onKeyUp } / > ) ; } public getValue ( ) { return this . getElement ( ) . value ; } public setValue ( value ) { this . getElement ( ) . value = `${ isUndefined ( value ) ? "" : value }` ; } protected onInput = ( e ) => { const ev = e . nativeEvent || e ; if ( ! isUndefined ( ev . data ) ) { return ; } this . props . onChange ( this . getElement ( ) . value ) ; } ; protected onKeyDown = ( e ) => { e . stopPropagation ( ) ; } ; protected onKeyUp = ( e ) => { const target = e . currentTarget as HTMLInputElement ; e . stopPropagation ( ) ; if ( getKey ( e . keyCode ) === "enter" ) { this . props . onChange ( target . value ) ; } } ; }