2020-10-16 13:16:01 +00:00
|
|
|
import React from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import Scrollbar from "../scrollbar/index";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import commonInputStyle from "../text-input/common-input-styles";
|
|
|
|
import TextareaAutosize from "react-autosize-textarea";
|
2019-07-29 16:42:44 +00:00
|
|
|
|
2019-12-03 13:42:55 +00:00
|
|
|
// eslint-disable-next-line react/prop-types, no-unused-vars
|
2020-10-16 13:16:01 +00:00
|
|
|
const ClearScrollbar = ({ isDisabled, heightScale, hasError, ...props }) => (
|
|
|
|
<Scrollbar {...props} />
|
|
|
|
);
|
2019-08-16 10:32:07 +00:00
|
|
|
const StyledScrollbar = styled(ClearScrollbar)`
|
2019-07-30 07:39:54 +00:00
|
|
|
${commonInputStyle};
|
2020-10-16 13:16:01 +00:00
|
|
|
:focus-within {
|
|
|
|
border-color: ${(props) => (props.hasError ? "#c30" : "#2DA7DB")};
|
|
|
|
}
|
|
|
|
:focus {
|
2019-07-30 07:39:54 +00:00
|
|
|
outline: none;
|
2020-10-16 13:16:01 +00:00
|
|
|
}
|
2019-07-29 16:42:44 +00:00
|
|
|
width: 100% !important;
|
2020-10-28 10:59:20 +00:00
|
|
|
height: ${(props) =>
|
|
|
|
props.heightScale
|
|
|
|
? "67vh"
|
|
|
|
: props.heighttextarea
|
|
|
|
? props.heighttextarea + 2 + "px"
|
|
|
|
: "91px"} !important;
|
2020-10-16 13:16:01 +00:00
|
|
|
background-color: ${(props) => props.isDisabled && "#F8F9F9"};
|
2019-07-29 16:42:44 +00:00
|
|
|
`;
|
2019-12-03 13:42:55 +00:00
|
|
|
|
|
|
|
// eslint-disable-next-line react/prop-types, no-unused-vars
|
2020-10-16 13:16:01 +00:00
|
|
|
const ClearTextareaAutosize = ({
|
|
|
|
isDisabled,
|
|
|
|
heightScale,
|
|
|
|
hasError,
|
2020-12-07 07:40:18 +00:00
|
|
|
color,
|
2020-10-16 13:16:01 +00:00
|
|
|
...props
|
|
|
|
}) => <TextareaAutosize {...props} />;
|
2019-08-16 10:32:07 +00:00
|
|
|
const StyledTextarea = styled(ClearTextareaAutosize)`
|
2019-07-31 12:44:48 +00:00
|
|
|
${commonInputStyle};
|
|
|
|
width: 100%;
|
2019-11-21 14:41:36 +00:00
|
|
|
height: 90%;
|
2019-07-31 12:44:48 +00:00
|
|
|
border: none;
|
|
|
|
outline: none;
|
|
|
|
resize: none;
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 5px 8px 2px 8px;
|
2020-10-28 10:59:20 +00:00
|
|
|
font-size: ${(props) => props.fontSize + "px"};
|
2020-10-16 13:16:01 +00:00
|
|
|
font-family: "Open Sans", sans-serif;
|
2019-12-05 11:18:09 +00:00
|
|
|
line-height: 1.5;
|
2019-07-29 16:42:44 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
:focus-within {
|
|
|
|
border-color: #2da7db;
|
|
|
|
}
|
2019-07-29 16:42:44 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
:focus {
|
2019-07-31 12:44:48 +00:00
|
|
|
outline: none;
|
2020-10-16 13:16:01 +00:00
|
|
|
}
|
2019-07-29 16:42:44 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
::-webkit-input-placeholder {
|
2020-11-30 12:02:56 +00:00
|
|
|
color: "#A3A9AE";
|
2020-10-16 13:16:01 +00:00
|
|
|
font-family: "Open Sans", sans-serif;
|
|
|
|
user-select: none;
|
|
|
|
}
|
2020-07-13 09:28:13 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
:-moz-placeholder {
|
2020-11-30 12:02:56 +00:00
|
|
|
color: "#A3A9AE";
|
2020-10-16 13:16:01 +00:00
|
|
|
font-family: "Open Sans", sans-serif;
|
|
|
|
user-select: none;
|
|
|
|
}
|
2020-07-13 09:28:13 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
::-moz-placeholder {
|
2020-11-30 12:02:56 +00:00
|
|
|
color: "#A3A9AE";
|
2020-10-16 13:16:01 +00:00
|
|
|
font-family: "Open Sans", sans-serif;
|
|
|
|
user-select: none;
|
|
|
|
}
|
2020-07-13 09:28:13 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
:-ms-input-placeholder {
|
2020-11-30 12:02:56 +00:00
|
|
|
color: "#A3A9AE";
|
|
|
|
font-family: "Open Sans", sans-serif;
|
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
::placeholder {
|
|
|
|
color: "#A3A9AE";
|
2020-10-16 13:16:01 +00:00
|
|
|
font-family: "Open Sans", sans-serif;
|
|
|
|
user-select: none;
|
|
|
|
}
|
2019-07-31 12:44:48 +00:00
|
|
|
`;
|
2019-07-29 16:42:44 +00:00
|
|
|
|
2019-08-06 13:36:41 +00:00
|
|
|
class Textarea extends React.PureComponent {
|
2019-07-29 16:42:44 +00:00
|
|
|
render() {
|
2019-12-03 10:08:50 +00:00
|
|
|
// console.log('Textarea render');
|
2019-12-17 10:49:53 +00:00
|
|
|
const {
|
|
|
|
className,
|
|
|
|
id,
|
|
|
|
isDisabled,
|
|
|
|
isReadOnly,
|
2020-07-08 13:57:34 +00:00
|
|
|
hasError,
|
2020-07-13 11:15:44 +00:00
|
|
|
heightScale,
|
2019-12-17 10:49:53 +00:00
|
|
|
maxLength,
|
|
|
|
name,
|
|
|
|
onChange,
|
|
|
|
placeholder,
|
|
|
|
style,
|
|
|
|
tabIndex,
|
2020-10-16 13:16:01 +00:00
|
|
|
value,
|
2020-10-28 10:20:21 +00:00
|
|
|
fontSize,
|
2020-10-28 10:59:20 +00:00
|
|
|
heightTextArea,
|
2020-12-07 07:40:18 +00:00
|
|
|
color,
|
2019-12-17 10:49:53 +00:00
|
|
|
} = this.props;
|
2019-07-29 16:42:44 +00:00
|
|
|
return (
|
|
|
|
<StyledScrollbar
|
2019-12-17 10:49:53 +00:00
|
|
|
className={className}
|
|
|
|
style={style}
|
2020-10-16 13:16:01 +00:00
|
|
|
stype="preMediumBlack"
|
2019-12-17 10:49:53 +00:00
|
|
|
isDisabled={isDisabled}
|
2020-07-08 13:57:34 +00:00
|
|
|
hasError={hasError}
|
2020-07-13 11:15:44 +00:00
|
|
|
heightScale={heightScale}
|
2020-10-28 10:59:20 +00:00
|
|
|
heighttextarea={heightTextArea}
|
2019-07-29 16:42:44 +00:00
|
|
|
>
|
2019-07-31 12:44:48 +00:00
|
|
|
<StyledTextarea
|
2019-12-17 10:49:53 +00:00
|
|
|
id={id}
|
|
|
|
placeholder={placeholder}
|
|
|
|
onChange={(e) => onChange && onChange(e)}
|
|
|
|
maxLength={maxLength}
|
|
|
|
name={name}
|
|
|
|
tabIndex={tabIndex}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
disabled={isDisabled}
|
|
|
|
readOnly={isReadOnly}
|
|
|
|
value={value}
|
2020-10-28 10:20:21 +00:00
|
|
|
fontSize={fontSize}
|
2020-12-07 07:40:18 +00:00
|
|
|
color={color}
|
2019-08-06 13:36:41 +00:00
|
|
|
/>
|
2019-07-29 16:42:44 +00:00
|
|
|
</StyledScrollbar>
|
2020-10-16 13:16:01 +00:00
|
|
|
);
|
2019-07-29 16:42:44 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-06 13:36:41 +00:00
|
|
|
Textarea.propTypes = {
|
2019-12-17 10:49:53 +00:00
|
|
|
className: PropTypes.string,
|
2019-07-31 12:44:48 +00:00
|
|
|
id: PropTypes.string,
|
|
|
|
isDisabled: PropTypes.bool,
|
|
|
|
isReadOnly: PropTypes.bool,
|
2020-07-08 13:57:34 +00:00
|
|
|
hasError: PropTypes.bool,
|
2020-07-13 11:15:44 +00:00
|
|
|
heightScale: PropTypes.bool,
|
2019-07-31 12:44:48 +00:00
|
|
|
maxLength: PropTypes.number,
|
|
|
|
name: PropTypes.string,
|
2019-07-29 16:42:44 +00:00
|
|
|
onChange: PropTypes.func,
|
2019-07-31 12:44:48 +00:00
|
|
|
placeholder: PropTypes.string,
|
2019-12-17 10:49:53 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2019-07-31 12:44:48 +00:00
|
|
|
tabIndex: PropTypes.number,
|
2019-09-13 11:11:45 +00:00
|
|
|
value: PropTypes.string,
|
2020-10-28 10:20:21 +00:00
|
|
|
fontSize: PropTypes.number,
|
2020-10-28 10:59:20 +00:00
|
|
|
heightTextArea: PropTypes.number,
|
2020-12-07 07:40:18 +00:00
|
|
|
color: PropTypes.string,
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-07-29 16:42:44 +00:00
|
|
|
|
2019-08-06 13:36:41 +00:00
|
|
|
Textarea.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
className: "",
|
2019-07-31 12:44:48 +00:00
|
|
|
isDisabled: false,
|
|
|
|
isReadOnly: false,
|
2020-07-08 13:57:34 +00:00
|
|
|
hasError: false,
|
2020-07-13 11:15:44 +00:00
|
|
|
heightScale: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
placeholder: "",
|
2019-07-31 12:44:48 +00:00
|
|
|
tabIndex: -1,
|
2020-10-16 13:16:01 +00:00
|
|
|
value: "",
|
2020-10-28 10:59:20 +00:00
|
|
|
fontSize: 13,
|
2020-12-07 07:40:18 +00:00
|
|
|
color: "#333333",
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-07-29 16:42:44 +00:00
|
|
|
|
2019-08-06 13:36:41 +00:00
|
|
|
export default Textarea;
|