From ff2d2e6dfb26f30ac11b1fcd755c37fd05f4f2a9 Mon Sep 17 00:00:00 2001 From: Iacopo Leardini Date: Wed, 6 Sep 2023 16:05:10 +0200 Subject: [PATCH] feat(textarea): add counter --- src/stories/form/Form.tsx | 5 +- .../textareaField/TextareaField.stories.tsx | 73 +- .../form/textareaField/TextareaField.tsx | 57 +- src/stories/form/textareaField/_styles.tsx | 25 +- src/stories/form/textareaField/_types.ts | 7 +- src/types.d.ts | 9 + yarn.lock | 17599 ++++++++++++++++ 7 files changed, 17727 insertions(+), 48 deletions(-) create mode 100644 src/types.d.ts create mode 100644 yarn.lock diff --git a/src/stories/form/Form.tsx b/src/stories/form/Form.tsx index e9fbd94..cd62aa9 100644 --- a/src/stories/form/Form.tsx +++ b/src/stories/form/Form.tsx @@ -19,7 +19,7 @@ const BasicErrorMessage = ({ className?: string; }) => (
- {" "} +
); @@ -28,6 +28,9 @@ export const ErrorMessage = styled(BasicErrorMessage)` width: 100%; margin-top: 0.25rem; font-size: 0.875em; + &:empty { + display: none; + } `; export const Field = ({ diff --git a/src/stories/form/textareaField/TextareaField.stories.tsx b/src/stories/form/textareaField/TextareaField.stories.tsx index 1eafc42..a6d9348 100644 --- a/src/stories/form/textareaField/TextareaField.stories.tsx +++ b/src/stories/form/textareaField/TextareaField.stories.tsx @@ -1,5 +1,5 @@ import { Story, Meta } from "@storybook/react"; -import { Form, Formik, FormikProps } from "formik"; +import { Formik, FormikProps } from "formik"; import { TextareaField } from "./TextareaField"; import { initialTextareaFormValues, @@ -21,14 +21,12 @@ export const Simple: Story = () => ( }} > {(props: FormikProps) => ( -
- - + )} ); @@ -42,16 +40,14 @@ export const Autoresize: Story = () => ( }} > {(props: FormikProps) => ( -
- - + )} ); @@ -65,16 +61,45 @@ export const Disabled: Story = () => ( }} > {(props: FormikProps) => ( -
+ + )} + +); + +export const CounterMax: Story = () => ( + { + console.log(data); + }} + > + {(props: FormikProps) => ( +
+ this is a Description +
+ } placeholder="Enter description" - height="2.55rem" - disabled + counterMax={100} /> - + )}
); diff --git a/src/stories/form/textareaField/TextareaField.tsx b/src/stories/form/textareaField/TextareaField.tsx index 11a7fcb..758226f 100644 --- a/src/stories/form/textareaField/TextareaField.tsx +++ b/src/stories/form/textareaField/TextareaField.tsx @@ -1,8 +1,9 @@ import { Field as FormikField, FieldProps } from "formik"; import { ErrorMessage } from "../Form"; import FormLabel from "../formlabel/FormLabel"; -import { StyledTextareaField } from "./_styles"; +import { Counter, StyledTextareaField } from "./_styles"; import { TextareaFieldProps } from "./_types"; +import { useState } from "react"; export const TextareaField = ({ name, @@ -13,7 +14,10 @@ export const TextareaField = ({ resize, height, autoResize, + counterMax, + ...props }: TextareaFieldProps) => { + const [isFocus, setIsFocus] = useState(false); return ( {({ field, meta }: FieldProps) => { @@ -24,26 +28,41 @@ export const TextareaField = ({ isInvalid={meta.touched && typeof meta.error == "string"} height={height} autoResize={autoResize} + {...props} > {label && } -