import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import TextInput from '../text-input'; import { Icons } from '../icons'; import IconButton from '../icon-button'; import commonInputStyle from '../text-input/common-input-styles'; const iconNames = Object.keys(Icons); const StyledIconBlock = styled.div` display: flex; align-items: center; cursor: ${props => props.isDisabled || !props.isClickable ? "default" : "pointer"}; height: 100%; padding-right: 7px; -webkit-tap-highlight-color: rgba(0,0,0,0); `; const StyledChildrenBlock = styled.div` display: flex; align-items: center; padding: 2px 0px 2px 2px; `; // eslint-disable-next-line react/prop-types, no-unused-vars const CustomInputGroup = ({ isIconFill, hasError, hasWarning, isDisabled, scale, ...props }) => (
); const StyledInputGroup = styled(CustomInputGroup)` display: flex; .prepend { display: flex; align-items: center; } .append { align-items: center; margin: 0; } ${commonInputStyle} :focus-within { border-color: #2da7db; } `; class InputBlock extends React.Component { constructor(props) { super(props); } onIconClick = (e) => { if (typeof this.props.onIconClick === "function" && !this.props.isDisabled) this.props.onIconClick(e); } onChange = (e) => { if (typeof this.props.onChange === "function") this.props.onChange(e); } render() { let iconButtonSize = 0; const { hasError, hasWarning, isDisabled, scale, size, className, style, children, id, name, type, value, placeholder, tabIndex, maxLength, onBlur, onFocus, isReadOnly, isAutoFocussed, autoComplete, mask, keepCharPositions, iconName, iconColor, isIconFill, onIconClick, iconSize } = this.props; if (typeof iconSize == "number" && iconSize > 0) { iconButtonSize = iconSize; } else { switch (size) { case 'base': iconButtonSize = 15; break; case 'middle': iconButtonSize = 18; break; case 'big': iconButtonSize = 21; break; case 'huge': iconButtonSize = 24; break; } } return (