%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/common/components/ |
Current File : /home/emergentqj/actioncivile/pre-auth/.4cc3a2e1590a4463a5f392ddcc26929e/static/js/common/components/TextInput.jsx |
import React from "react"; import { bool, func, number, string, } from "prop-types"; import styled, { css } from "styled-components"; import { ifProp, theme } from "styled-tools"; const StyledInput = styled.input` height: 40px; width: 100%; margin-bottom: 10px; border: 1px solid #aaa; padding-left: 10px; padding-right: 10px; border-radius: 4px; ${ifProp( "transparent", css` background-color: transparent; `, )} ${ifProp( "notValid", css` border-color: ${theme("color.error")}; `, )} `; export function TextInput({ keyProperty, maxLength, notValid, onBlur, onChange, onFocus, onKeyUp, value, disabled, placeholder, transparent, }) { return ( <StyledInput id={keyProperty} onBlur={onBlur} onChange={(se) => { onChange({ [keyProperty]: se.target.value }); }} onFocus={onFocus} onKeyUp={onKeyUp} type="text" value={value} notValid={notValid} disabled={disabled} placeholder={placeholder} transparent={transparent} {...(maxLength ? { maxLength } : {})} /> ); } TextInput.propTypes = { keyProperty: string.isRequired, label: string.isRequired, maxLength: number, notValid: bool, onBlur: func, onChange: func.isRequired, onFocus: func, onKeyUp: func, required: bool, value: string.isRequired, disabled: bool, placeholder: string, transparent: bool, }; TextInput.defaultProps = { maxLength: null, notValid: false, onBlur: () => {}, onFocus: () => {}, onKeyUp: () => {}, required: false, disabled: false, placeholder: null, transparent: false, };