IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Shared: heightTextArea was cast to union of string and number | error indication was fixed

Browse Source
This commit is contained in:
Vladimir Khvan 2024-01-31 12:48:23 +05:00
parent d9e7652f9e
commit f3f6f981ca
4 changed files with 32 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/shared/components/textarea/README.md
View File

@ -19,19 +19,19 @@ import { Textarea } from "@docspace/shared/components/textarea";
### Properties ### Properties
| Props | Type | Required | Values | Default | Description | | Props | Type | Required | Values | Default | Description |
| ---------------- | :------------: | :------: | :----: | :--------------------------------: | -------------------------------------------------------- | | ---------------- | :----------------: | :------: | :----: | :--------------------------------: | -------------------------------------------------------- |
| `className` | `string` | - | - | - | Class name | | `className` | `string` | - | - | - | Class name |
| `id` | `string` | - | - | - | Used as HTML `id` property | | `id` | `string` | - | - | - | Used as HTML `id` property |
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used | | `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used |
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content | | `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
| `hasError` | `bool` | - | - | - | Indicates the input field has an error | | `hasError` | `bool` | - | - | - | Indicates the input field has an error |
| `name` | `string` | - | - | - | Used as HTML `name` property | | `name` | `string` | - | - | - | Used as HTML `name` property |
| `onChange` | `func` | - | - | - | Allow you to handle changing events of component | | `onChange` | `func` | - | - | - | Allow you to handle changing events of component |
| `placeholder` | `string` | - | - | - | Placeholder for Textarea | | `placeholder` | `string` | - | - | - | Placeholder for Textarea |
| `style` | `obj`, `array` | - | - | - | Accepts css style | | `style` | `obj`, `array` | - | - | - | Accepts css style |
| `value` | `string` | - | - | - | Value for Textarea | | `value` | `string` | - | - | - | Value for Textarea |
| `fontSize` | `number` | - | - | 13 | Value for font-size | | `fontSize` | `number` | - | - | 13 | Value for font-size |
| `heightTextArea` | `string` | - | - | - | Value for height text-area | | `heightTextArea` | `string`, `number` | - | - | - | Value for height text-area |
| `isJSONField` | `bool` | - | - | `false` | Indicates that the field is displaying JSON object | | `isJSONField` | `bool` | - | - | `false` | Indicates that the field is displaying JSON object |
| `copyInfoText` | `string` | - | - | `Content was copied successfully!` | Indicates the text of toast/informational alarm | | `copyInfoText` | `string` | - | - | `Content was copied successfully!` | Indicates the text of toast/informational alarm |

11
packages/shared/components/textarea/Textarea.styled.tsx
View File

@ -22,7 +22,7 @@ const ClearScrollbar = ({
isDisabled?: boolean; isDisabled?: boolean;
heightScale?: boolean; heightScale?: boolean;
hasError?: boolean; hasError?: boolean;
heightTextAreaProp?: number; heightTextAreaProp?: string;
ref?: React.Ref<HTMLDivElement>; ref?: React.Ref<HTMLDivElement>;
} & ScrollbarProps) => <Scrollbar {...props} />; } & ScrollbarProps) => <Scrollbar {...props} />;
@ -208,7 +208,14 @@ const CopyIconWrapper = styled.div<{
CopyIconWrapper.defaultProps = { theme: Base }; CopyIconWrapper.defaultProps = { theme: Base };
const Wrapper = styled.div<{ enableCopy?: boolean; isJSONField?: boolean }>` const Wrapper = styled.div<{
heightScale?: boolean;
isFullHeight?: boolean;
fullHeight?: number;
heightTextArea?: string;
enableCopy?: boolean;
isJSONField?: boolean;
}>`
position: relative; position: relative;
max-width: 1200px; max-width: 1200px;

10
packages/shared/components/textarea/Textarea.tsx
View File

@ -54,6 +54,8 @@ const Textarea = ({
const padding = 7; const padding = 7;
const numberOfLines = modifiedValue.split("\n").length; const numberOfLines = modifiedValue.split("\n").length;
const fullHeight = numberOfLines * fontSize * lineHeight + padding + 4; const fullHeight = numberOfLines * fontSize * lineHeight + padding + 4;
const stringifiedHeight =
typeof heightTextArea === "number" ? `${heightTextArea}px` : heightTextArea;
const defaultPaddingLeft = 42; const defaultPaddingLeft = 42;
const numberOfDigits = const numberOfDigits =
@ -75,8 +77,8 @@ const Textarea = ({
}; };
useEffect(() => { useEffect(() => {
if (hasError !== isError) setIsError(hasError); setIsError(hasError);
}, [hasError, isError]); }, [hasError]);
useEffect(() => { useEffect(() => {
setIsError(isJSONField && (!value || !isJSON(value))); setIsError(isJSONField && (!value || !isJSON(value)));
@ -96,7 +98,7 @@ const Textarea = ({
onClick={onTextareaClick} onClick={onTextareaClick}
data-testid="textarea" data-testid="textarea"
heightScale={heightScale} heightScale={heightScale}
heightTextArea={heightTextArea} heightTextArea={stringifiedHeight}
isFullHeight={isFullHeight} isFullHeight={isFullHeight}
fullHeight={fullHeight} fullHeight={fullHeight}
> >
@ -120,7 +122,7 @@ const Textarea = ({
isDisabled={isDisabled} isDisabled={isDisabled}
hasError={isError} hasError={isError}
heightScale={heightScale} heightScale={heightScale}
heightTextAreaProp={heightTextArea} heightTextAreaProp={stringifiedHeight}
isFullHeight={isFullHeight} isFullHeight={isFullHeight}
fullHeight={fullHeight} fullHeight={fullHeight}
> >

2
packages/shared/components/textarea/Textarea.types.ts
View File

@ -31,7 +31,7 @@ export interface TextareaProps {
/** Font-size value */ /** Font-size value */
fontSize?: number; fontSize?: number;
/** Text-area height value */ /** Text-area height value */
heightTextArea?: string; heightTextArea?: string | number;
/** Specifies the text color */ /** Specifies the text color */
color?: string; color?: string;
/** Default input property */ /** Default input property */