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) => {
|
2020-07-21 12:02:32 +00:00
|
|
|
if (typeof this.props.onIconClick === "function" && !this.props.isDisabled)
|
|
|
|
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,
|
2021-02-03 12:07:31 +00:00
|
|
|
theme,
|
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 (
|
2019-11-28 11:35:32 +00:00
|
|
|
<StyledInputGroup
|
|
|
|
hasError={hasError}
|
|
|
|
hasWarning={hasWarning}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
scale={scale}
|
|
|
|
size={size}
|
|
|
|
className={className}
|
|
|
|
style={style}
|
2021-02-03 12:07:31 +00:00
|
|
|
theme={theme}
|
2019-11-28 11:35:32 +00:00
|
|
|
>
|
2019-12-03 12:00:10 +00:00
|
|
|
<div className="prepend">
|
2021-02-03 12:07:31 +00:00
|
|
|
<StyledChildrenBlock className="prepend-children" theme={theme}>
|
2020-11-06 15:05:00 +00:00
|
|
|
{children}
|
|
|
|
</StyledChildrenBlock>
|
2019-12-03 12:00:10 +00:00
|
|
|
</div>
|
2019-09-12 11:10:15 +00:00
|
|
|
<TextInput
|
2019-11-28 11:35:32 +00:00
|
|
|
id={id}
|
|
|
|
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}
|
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
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
onClick={this.onIconClick}
|
|
|
|
isClickable={typeof onIconClick === "function"}
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
size={iconButtonSize}
|
|
|
|
color={iconColor}
|
|
|
|
hoverColor={hoverColor}
|
|
|
|
iconName={iconName}
|
|
|
|
isFill={isIconFill}
|
2019-12-13 09:25:21 +00:00
|
|
|
isDisabled={isDisabled}
|
2020-07-21 12:02:32 +00:00
|
|
|
isClickable={typeof onIconClick === "function"}
|
2021-02-03 12:07:31 +00:00
|
|
|
theme={theme}
|
2020-07-21 12:02:32 +00:00
|
|
|
/>
|
|
|
|
</StyledIconBlock>
|
|
|
|
</div>
|
2021-03-01 12:50:16 +00:00
|
|
|
}
|
2019-09-12 11:10:15 +00:00
|
|
|
</StyledInputGroup>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
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"]),
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Define 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]),
|
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"]),
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Indicates the input field has scale */
|
2019-07-10 12:14:53 +00:00
|
|
|
scale: PropTypes.bool,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Called with the new value. Required when input is not read only. Parent should pass it back as `value` */
|
2019-07-10 12:14:53 +00:00
|
|
|
onChange: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Called when field is blurred */
|
2019-07-10 12:14:53 +00:00
|
|
|
onBlur: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Called when field is focused */
|
2019-07-10 12:14:53 +00:00
|
|
|
onFocus: PropTypes.func,
|
2021-03-08 20:18:45 +00:00
|
|
|
/** Focus 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,
|
2021-03-08 20:18:45 +00:00
|
|
|
/**Will be triggered whenever an 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]),
|
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: "",
|
|
|
|
iconColor: "#ffffff",
|
2019-12-26 08:47:02 +00:00
|
|
|
hoverColor: "#ffffff",
|
2019-07-10 12:14:53 +00:00
|
|
|
isIconFill: false,
|
2019-09-06 08:54:19 +00:00
|
|
|
isDisabled: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
keepCharPositions: false,
|
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;
|