/**
 * Copyright (c) 2020 Dell Inc., or its subsidiaries. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 */ import * as React from "react" ; import { classNames } from "../../utils" ; import { ClassNames } from "./ClassNames" ; import { ReactNode } from "react" ; import { Icon } from "../../icon" ; param { className } CSS param { style } CSS param { disabled } set param { readonly } set param { helperText } helper param { errorHelperText } error param { label } label param { placeholder } placeholder param { name } unique param { id } unique param { value } value param { defaultValue } default param { rows } visible param { cols } visible param { wrap } specifies param { required } set param { error } set param { spellcheck } set param { draggable } set param { maxLength } specifies param { onChange } callback param { onBlur } callback param { onKeyDown } callback param { onKeyPress } callback param { dataqa } for type TextAreaProps = { className ? : string ; style ? : any ; disabled ? : boolean ; readonly ? : boolean ; helperText ? : ReactNode ; errorHelperText ? : string ; label ? : string ; placeholder ? : string ; name : string ; id ? : string ; value ? : any ; defaultValue ? : any ; rows ? : number ; cols ? : number ; wrap ? : TextWrapType ; required ? : boolean ; error ? : boolean ; errorTitle ? : string ; spellCheck ? : boolean ; draggable ? : boolean ; maxLength ? : number ; onChange ? : ( evt : React . ChangeEvent < HTMLTextAreaElement > ) => void ; onBlur ? : ( evt : React . FocusEvent < HTMLTextAreaElement > ) => void ; onKeyDown ? : ( evt : React . KeyboardEvent < HTMLTextAreaElement > ) => void ; onKeyPress ? : ( evt : React . KeyboardEvent < HTMLTextAreaElement > ) => void ; dataqa ? : string ; } ; param { HARD } for param { SOFT } for export enum TextWrapType { HARD = "hard" , SOFT = "soft" } /**
 * TextArea Componnet :
 *  Component for long text input
 */ export class TextArea extends React . PureComponent < TextAreaProps > { private renderHelperText = ( helperText ) : ReactNode => { return < span className = { ClassNames . CLR_SUBTEXT } > { helperText } < /span>; } ; private renderLabel = ( label ) => { return < label className = { ClassNames . CLR_CONTROL_LABEL } > { label } < /label>; } ; private buildTextArea ( ) { const { style , className , disabled , value , defaultValue , placeholder , children , name , id , required , onBlur , onKeyPress , onChange , onKeyDown , dataqa , readonly , rows , cols , wrap , spellCheck , maxLength , draggable , errorTitle , } = this . props ; return ( < React . Fragment > < textarea name = { name } id = { id } value = { value } defaultValue = { defaultValue } disabled = { disabled } className = { classNames ( [ ClassNames . CLR_TEXTAREA , ClassNames . NG_PRISTINE , ClassNames . NG_VALID , ClassNames . NG_TOUCHED , className , ] ) } placeholder = { placeholder } data - qa = { dataqa } onChange = { onChange } onKeyPress = { onKeyPress } onKeyDown = { onKeyDown } onBlur = { onBlur } style = { style } required = { required } readOnly = { readonly } rows = { rows } cols = { cols } wrap = { wrap } spellCheck = { spellCheck } maxLength = { maxLength } draggable = { draggable } / > { children } < Icon className = { ClassNames . CLR_VALIDATE_ICON } shape = "exclamation-circle" title = { errorTitle } / > < /React.Fragment>); } render ( ) { const { disabled , label , error , errorHelperText , helperText } = this . props ; return ( < div className = { ClassNames . CLR_FORM_CONTROL } > { label && this . renderLabel ( label ) } < div className = { classNames ( [ ClassNames . CLR_CONTROL_CONTAINER , error && ClassNames . CLR_ERROR , disabled && ClassNames . CLR_FORM_DISABLED , ] ) } style = { { width : "100%" } } > < div className = { ClassNames . CLR_TEXTAREA_WRAPPER } > { this . buildTextArea ( ) } < /div> { error ? errorHelperText && this . renderHelperText ( errorHelperText ) : helperText && this . renderHelperText ( helperText ) } < /div> < /div>); } }