2020-07-21 12:02:32 +00:00
import React from "react" ;
import PropTypes from "prop-types" ;
2021-02-08 14:20:47 +00:00
2020-07-21 12:02:32 +00:00
import TextInput from "../text-input" ;
import { Icons } from "../icons" ;
import IconButton from "../icon-button" ;
2021-02-08 14:20:47 +00:00
import {
StyledInputGroup ,
StyledChildrenBlock ,
StyledIconBlock ,
} from "./styled-input-block" ;
2019-07-10 12:14:53 +00:00
2021-03-01 12:50:16 +00:00
//const iconNames = Object.keys(Icons);
2019-07-10 12:14:53 +00:00
2019-09-12 11:10:15 +00:00
class InputBlock extends React . Component {
constructor ( props ) {
super ( props ) ;
}
2020-10-16 13:16:01 +00:00
onIconClick = ( e ) => {
2022-08-04 21:58:50 +00:00
if (
typeof this . props . onIconClick === "function" /*&& !this.props.isDisabled*/
)
2020-07-21 12:02:32 +00:00
this . props . onIconClick ( e ) ;
} ;
2020-10-16 13:16:01 +00:00
onChange = ( e ) => {
2019-09-27 12:56:15 +00:00
if ( typeof this . props . onChange === "function" ) this . props . onChange ( e ) ;
2020-07-21 12:02:32 +00:00
} ;
2019-07-11 09:39:36 +00:00
2019-09-12 11:10:15 +00:00
render ( ) {
let iconButtonSize = 0 ;
2019-11-28 11:35:32 +00:00
const {
hasError ,
hasWarning ,
isDisabled ,
scale ,
size ,
className ,
style ,
children ,
id ,
name ,
type ,
value ,
placeholder ,
tabIndex ,
maxLength ,
onBlur ,
onFocus ,
2021-03-05 14:41:55 +00:00
onKeyDown ,
2019-11-28 11:35:32 +00:00
isReadOnly ,
isAutoFocussed ,
autoComplete ,
mask ,
keepCharPositions ,
iconName ,
iconColor ,
2019-12-26 08:47:02 +00:00
hoverColor ,
2019-11-28 11:35:32 +00:00
isIconFill ,
onIconClick ,
2020-10-16 13:16:01 +00:00
iconSize ,
2022-01-25 07:56:51 +00:00
theme ,
2022-01-24 09:09:26 +00:00
forwardedRef ,
2022-11-16 15:29:04 +00:00
iconButtonClassName ,
2023-03-09 13:59:21 +00:00
iconNode ,
2019-11-28 11:35:32 +00:00
} = this . props ;
if ( typeof iconSize == "number" && iconSize > 0 ) {
iconButtonSize = iconSize ;
2019-09-12 11:10:15 +00:00
} else {
2019-11-28 11:35:32 +00:00
switch ( size ) {
2020-07-21 12:02:32 +00:00
case "base" :
2020-11-28 10:09:56 +00:00
iconButtonSize = 16 ;
2019-09-12 11:10:15 +00:00
break ;
2020-07-21 12:02:32 +00:00
case "middle" :
2019-09-12 11:10:15 +00:00
iconButtonSize = 18 ;
break ;
2020-07-21 12:02:32 +00:00
case "big" :
2019-09-12 11:10:15 +00:00
iconButtonSize = 21 ;
break ;
2020-07-21 12:02:32 +00:00
case "huge" :
2019-09-12 11:10:15 +00:00
iconButtonSize = 24 ;
break ;
2019-07-31 19:36:26 +00:00
}
2019-09-12 11:10:15 +00:00
}
return (
2022-12-05 14:27:54 +00:00
< StyledInputGroup
2019-11-28 11:35:32 +00:00
hasError = { hasError }
hasWarning = { hasWarning }
isDisabled = { isDisabled }
scale = { scale }
size = { size }
className = { className }
style = { style }
2021-12-12 13:07:10 +00:00
color = { iconColor }
2022-09-21 07:40:10 +00:00
hoverColor = { hoverColor }
2019-11-28 11:35:32 +00:00
>
2019-12-03 12:00:10 +00:00
< div className = "prepend" >
2022-01-27 13:54:58 +00:00
< StyledChildrenBlock className = "prepend-children" >
2020-11-06 15:05:00 +00:00
{ children }
< / S t y l e d C h i l d r e n B l o c k >
2019-12-03 12:00:10 +00:00
< / d i v >
2019-09-12 11:10:15 +00:00
< TextInput
2019-11-28 11:35:32 +00:00
id = { id }
2021-11-25 09:11:22 +00:00
className = { className }
2019-11-28 11:35:32 +00:00
name = { name }
type = { type }
value = { value }
isDisabled = { isDisabled }
hasError = { hasError }
hasWarning = { hasWarning }
placeholder = { placeholder }
tabIndex = { tabIndex }
maxLength = { maxLength }
onBlur = { onBlur }
onFocus = { onFocus }
isReadOnly = { isReadOnly }
isAutoFocussed = { isAutoFocussed }
autoComplete = { autoComplete }
size = { size }
scale = { scale }
2019-09-12 11:10:15 +00:00
onChange = { this . onChange }
2021-03-05 14:41:55 +00:00
onKeyDown = { onKeyDown }
2019-09-12 11:10:15 +00:00
withBorder = { false }
2019-11-28 11:35:32 +00:00
mask = { mask }
keepCharPositions = { keepCharPositions }
2022-01-24 09:09:26 +00:00
forwardedRef = { forwardedRef }
2019-09-12 11:10:15 +00:00
/ >
2021-03-08 20:18:45 +00:00
{
//iconNames.includes(iconName) && (
2020-07-21 12:02:32 +00:00
< div className = "append" >
< StyledIconBlock
2022-11-16 15:29:04 +00:00
className = { ` input-block-icon ${ iconButtonClassName } ` }
2022-08-04 21:58:50 +00:00
//isDisabled={isDisabled}
2020-07-21 12:02:32 +00:00
onClick = { this . onIconClick }
isClickable = { typeof onIconClick === "function" }
>
< IconButton
size = { iconButtonSize }
2023-03-09 13:59:21 +00:00
iconNode = { iconNode }
2020-07-21 12:02:32 +00:00
iconName = { iconName }
isFill = { isIconFill }
2022-08-04 21:58:50 +00:00
//isDisabled={isDisabled}
2020-07-21 12:02:32 +00:00
isClickable = { typeof onIconClick === "function" }
2022-09-21 07:40:10 +00:00
color = { iconColor }
hoverColor = { hoverColor }
2020-07-21 12:02:32 +00:00
/ >
< / S t y l e d I c o n B l o c k >
< / d i v >
2021-03-01 12:50:16 +00:00
}
2022-12-05 14:27:54 +00:00
< / S t y l e d I n p u t G r o u p >
2019-09-12 11:10:15 +00:00
) ;
}
}
2019-07-10 12:14:53 +00:00
InputBlock . propTypes = {
2021-03-08 20:18:45 +00:00
/** Used as HTML `id` property */
2019-07-10 12:14:53 +00:00
id : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Used as HTML `name` property */
2019-07-10 12:14:53 +00:00
name : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Supported type of the input fields. */
2020-07-21 12:02:32 +00:00
type : PropTypes . oneOf ( [ "text" , "password" ] ) ,
2023-04-10 11:52:49 +00:00
/** Defines max length of value */
2019-07-10 12:14:53 +00:00
maxLength : PropTypes . number ,
2021-03-08 20:18:45 +00:00
/** Placeholder text for the input */
2019-07-10 12:14:53 +00:00
placeholder : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Accepts css tab-index */
2019-07-10 12:14:53 +00:00
tabIndex : PropTypes . number ,
2021-03-08 20:18:45 +00:00
/** input text mask */
2019-09-12 11:10:15 +00:00
mask : PropTypes . oneOfType ( [ PropTypes . array , PropTypes . func ] ) ,
2023-04-19 11:11:26 +00:00
/** Allows to add or delete characters without changing the positions of the existing characters.*/
2019-09-06 08:54:19 +00:00
keepCharPositions : PropTypes . bool ,
2021-03-08 20:18:45 +00:00
/** Supported size of the input fields. */
2020-07-21 12:02:32 +00:00
size : PropTypes . oneOf ( [ "base" , "middle" , "big" , "huge" , "large" ] ) ,
2023-04-10 11:52:49 +00:00
/** Indicates that the input field has scale */
2019-07-10 12:14:53 +00:00
scale : PropTypes . bool ,
2023-04-10 11:52:49 +00:00
/** The callback function that is required when the input is not read only. The function is called with the new value. Parent should pass it back as `value` */
2019-07-10 12:14:53 +00:00
onChange : PropTypes . func ,
2023-04-10 11:52:49 +00:00
/** The callback function that is called when the field is blurred */
2019-07-10 12:14:53 +00:00
onBlur : PropTypes . func ,
2023-04-10 11:52:49 +00:00
/** The callback function that is called when the field is focused */
2019-07-10 12:14:53 +00:00
onFocus : PropTypes . func ,
2023-04-19 11:12:53 +00:00
/** Focuses on the input field on initial render */
2019-07-10 12:14:53 +00:00
isAutoFocussed : PropTypes . bool ,
2021-03-08 20:18:45 +00:00
/** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
2019-07-10 12:14:53 +00:00
isDisabled : PropTypes . bool ,
2021-03-08 20:18:45 +00:00
/** Indicates that the field is displaying read-only content */
2019-07-10 12:14:53 +00:00
isReadOnly : PropTypes . bool ,
2021-03-08 20:18:45 +00:00
/** Indicates the input field has an error */
2019-07-10 12:14:53 +00:00
hasError : PropTypes . bool ,
2021-03-08 20:18:45 +00:00
/** Indicates the input field has a warning */
2019-07-10 12:14:53 +00:00
hasWarning : PropTypes . bool ,
2021-03-08 20:18:45 +00:00
/** Used as HTML `autocomplete` */
2019-07-10 12:14:53 +00:00
autoComplete : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Value of the input */
2019-07-11 13:39:52 +00:00
value : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Path to icon */
2019-07-10 12:14:53 +00:00
iconName : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Specifies the icon color */
2019-07-10 12:14:53 +00:00
iconColor : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Icon color on hover action */
2019-12-26 08:47:02 +00:00
hoverColor : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Size icon */
2019-07-17 13:50:29 +00:00
iconSize : PropTypes . number ,
2021-03-08 20:18:45 +00:00
/** Determines if icon fill is needed */
2019-07-10 12:14:53 +00:00
isIconFill : PropTypes . bool ,
2023-04-10 11:52:49 +00:00
/** The callback function that is triggered when the icon is clicked */
2019-07-10 12:14:53 +00:00
onIconClick : PropTypes . func ,
children : PropTypes . oneOfType ( [
PropTypes . arrayOf ( PropTypes . node ) ,
2020-10-16 13:16:01 +00:00
PropTypes . node ,
2019-11-28 11:35:32 +00:00
] ) ,
2021-03-08 20:18:45 +00:00
/** Accepts class */
2019-11-28 11:35:32 +00:00
className : PropTypes . string ,
2021-03-08 20:18:45 +00:00
/** Accepts css style */
2020-10-16 13:16:01 +00:00
style : PropTypes . oneOfType ( [ PropTypes . object , PropTypes . array ] ) ,
2023-04-19 11:11:26 +00:00
/** Sets the classNaame of the icon button */
2022-11-16 15:29:04 +00:00
iconButtonClassName : PropTypes . string ,
2020-07-21 12:02:32 +00:00
} ;
2019-07-10 12:14:53 +00:00
InputBlock . defaultProps = {
2020-07-21 12:02:32 +00:00
type : "text" ,
2019-07-10 12:14:53 +00:00
maxLength : 255 ,
2020-07-21 12:02:32 +00:00
size : "base" ,
2019-07-10 12:14:53 +00:00
scale : false ,
tabIndex : - 1 ,
hasError : false ,
hasWarning : false ,
2020-07-21 12:02:32 +00:00
autoComplete : "off" ,
2019-07-10 12:14:53 +00:00
2020-07-21 12:02:32 +00:00
value : "" ,
2019-07-10 12:14:53 +00:00
iconName : "" ,
isIconFill : false ,
2019-09-06 08:54:19 +00:00
isDisabled : false ,
2020-10-16 13:16:01 +00:00
keepCharPositions : false ,
2022-11-16 15:29:04 +00:00
iconButtonClassName : "" ,
2020-07-21 12:02:32 +00:00
} ;
2019-07-10 12:14:53 +00:00
2020-07-21 12:02:32 +00:00
export default InputBlock ;