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
| Props | Type | Required | Values | Default | Description |
| ---------------- | :------------: | :------: | :----: | :--------------------------------: | -------------------------------------------------------- |
| `className` | `string` | - | - | - | Class name |
| `id` | `string` | - | - | - | Used as HTML `id` property |
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used |
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
| `name` | `string` | - | - | - | Used as HTML `name` property |
| `onChange` | `func` | - | - | - | Allow you to handle changing events of component |
| `placeholder` | `string` | - | - | - | Placeholder for Textarea |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `value` | `string` | - | - | - | Value for Textarea |
| `fontSize` | `number` | - | - | 13 | Value for font-size |
| `heightTextArea` | `string` | - | - | - | Value for height text-area |
| `isJSONField` | `bool` | - | - | `false` | Indicates that the field is displaying JSON object |
| `copyInfoText` | `string` | - | - | `Content was copied successfully!` | Indicates the text of toast/informational alarm |
| Props | Type | Required | Values | Default | Description |
| ---------------- | :----------------: | :------: | :----: | :--------------------------------: | -------------------------------------------------------- |
| `className` | `string` | - | - | - | Class name |
| `id` | `string` | - | - | - | Used as HTML `id` property |
| `isDisabled` | `bool` | - | - | `false` | Indicates that the field cannot be used |
| `isReadOnly` | `bool` | - | - | `false` | Indicates that the field is displaying read-only content |
| `hasError` | `bool` | - | - | - | Indicates the input field has an error |
| `name` | `string` | - | - | - | Used as HTML `name` property |
| `onChange` | `func` | - | - | - | Allow you to handle changing events of component |
| `placeholder` | `string` | - | - | - | Placeholder for Textarea |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `value` | `string` | - | - | - | Value for Textarea |
| `fontSize` | `number` | - | - | 13 | Value for font-size |
| `heightTextArea` | `string`, `number` | - | - | - | Value for height text-area |
| `isJSONField` | `bool` | - | - | `false` | Indicates that the field is displaying JSON object |
| `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;
heightScale?: boolean;
hasError?: boolean;
heightTextAreaProp?: number;
heightTextAreaProp?: string;
ref?: React.Ref<HTMLDivElement>;
} & ScrollbarProps) => <Scrollbar {...props} />;
@ -208,7 +208,14 @@ const CopyIconWrapper = styled.div<{
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;
max-width: 1200px;

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

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

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

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