120 lines
2.8 KiB
JavaScript
120 lines
2.8 KiB
JavaScript
import React, { useRef } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { StyledTextarea, StyledScrollbar } from "./styled-textarea";
|
|
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
|
|
|
|
// eslint-disable-next-line react/prop-types, no-unused-vars
|
|
|
|
const Textarea = ({
|
|
className,
|
|
id,
|
|
isDisabled,
|
|
isReadOnly,
|
|
hasError,
|
|
heightScale,
|
|
maxLength,
|
|
name,
|
|
onChange,
|
|
placeholder,
|
|
style,
|
|
tabIndex,
|
|
value,
|
|
fontSize,
|
|
heightTextArea,
|
|
color,
|
|
theme,
|
|
autoFocus,
|
|
areaSelect,
|
|
}) => {
|
|
const areaRef = useRef(null);
|
|
|
|
React.useEffect(() => {
|
|
if (areaSelect && areaRef.current) {
|
|
areaRef.current.select();
|
|
}
|
|
}, [areaSelect]);
|
|
|
|
return (
|
|
<ColorTheme
|
|
themeId={ThemeType.Textarea}
|
|
className={className}
|
|
style={style}
|
|
stype="preMediumBlack"
|
|
isDisabled={isDisabled}
|
|
hasError={hasError}
|
|
heightScale={heightScale}
|
|
heighttextarea={heightTextArea}
|
|
>
|
|
<StyledTextarea
|
|
id={id}
|
|
placeholder={placeholder}
|
|
onChange={(e) => onChange && onChange(e)}
|
|
maxLength={maxLength}
|
|
name={name}
|
|
tabIndex={tabIndex}
|
|
isDisabled={isDisabled}
|
|
disabled={isDisabled}
|
|
readOnly={isReadOnly}
|
|
value={value}
|
|
fontSize={fontSize}
|
|
color={color}
|
|
autoFocus={autoFocus}
|
|
ref={areaRef}
|
|
/>
|
|
</ColorTheme>
|
|
);
|
|
};
|
|
|
|
Textarea.propTypes = {
|
|
/** Class name */
|
|
className: PropTypes.string,
|
|
/** Used as HTML `id` property */
|
|
id: PropTypes.string,
|
|
/** Indicates that the field cannot be used */
|
|
isDisabled: PropTypes.bool,
|
|
/** Indicates that the field is displaying read-only content */
|
|
isReadOnly: PropTypes.bool,
|
|
/** Indicates the input field has an error */
|
|
hasError: PropTypes.bool,
|
|
/** Indicates the input field has scale */
|
|
heightScale: PropTypes.bool,
|
|
/** Max Length of value */
|
|
maxLength: PropTypes.number,
|
|
/** Used as HTML `name` property */
|
|
name: PropTypes.string,
|
|
/** Allow you to handle changing events of component */
|
|
onChange: PropTypes.func,
|
|
/** Placeholder for Textarea */
|
|
placeholder: PropTypes.string,
|
|
/** Accepts css style */
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
/** Used as HTML `tabindex` property */
|
|
tabIndex: PropTypes.number,
|
|
/** Value for Textarea */
|
|
value: PropTypes.string,
|
|
/** Value for font-size */
|
|
fontSize: PropTypes.number,
|
|
/** Value for height text-area */
|
|
heightTextArea: PropTypes.number,
|
|
/** Specifies the text color */
|
|
color: PropTypes.string,
|
|
autoFocus: PropTypes.bool,
|
|
areaSelect: PropTypes.bool,
|
|
};
|
|
|
|
Textarea.defaultProps = {
|
|
className: "",
|
|
isDisabled: false,
|
|
isReadOnly: false,
|
|
hasError: false,
|
|
heightScale: false,
|
|
placeholder: "",
|
|
tabIndex: -1,
|
|
value: "",
|
|
fontSize: 13,
|
|
isAutoFocussed: false,
|
|
areaSelect: false,
|
|
};
|
|
|
|
export default Textarea;
|