feat(TextField): add onClear (#3593)

consta-design-system · Apr 3, 2024 · 986cdac · 986cdac
1 parent e3ac3aa
commit 986cdac
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -94,7 +94,7 @@ export const TextFieldRender = <TYPE extends string>(
     onKeyPressCapture,
     onKeyUp,
     onKeyUpCapture,
-
+    onClear,
     ...otherProps
   } = usePropsHandler(COMPONENT_NAME, props, textFieldRef);
 
@@ -364,7 +364,7 @@ export const TextFieldRender = <TYPE extends string>(
                 type="button"
                 disabled={disabled}
                 tabIndex={-1}
-                onClick={handleClear}
+                onClick={onClear || handleClear}
                 className={cnTextField('ClearButton')}
               >
                 <IconClear

diff --git a/src/components/TextField/__stand__/TextField.dev.stand.mdx b/src/components/TextField/__stand__/TextField.dev.stand.mdx
@@ -489,23 +489,23 @@ export const TextFieldExampleMaskSetValue = () => {
   });
 
   return (
-    <Example>
-      <>
-        <FieldLabel className={cnMixSpace({ mB: 'xs' })}>Телефон</FieldLabel>
-        <FieldGroup>
-          <TextFieldMemo
-            placeholder="+7(999)999-99-99"
-            inputRef={ref}
-            defaultValue={defaultValue}
-          />
-          <Button
-            iconLeft={IconRevert}
-            onClick={() => setValue(defaultValue)}
-            title="Сбросить"
-          />
-        </FieldGroup>
-      </>
-    </Example>
+    <>
+      <FieldLabel className={cnMixSpace({ mB: 'xs' })}>Телефон</FieldLabel>
+      <FieldGroup>
+        <TextFieldMemo
+          placeholder="+7(999)999-99-99"
+          inputRef={ref}
+          defaultValue={defaultValue}
+          withClearButton
+          onClear={() => setValue('')}
+        />
+        <Button
+          iconLeft={IconRevert}
+          onClick={() => setValue(defaultValue)}
+          title="Сбросить"
+        />
+      </FieldGroup>
+    </>
   );
 };
 ```
@@ -742,6 +742,7 @@ import { TextField, useIMask } from '@consta/uikit/TextField';
 | `onFocus?`                                            | `React.FocusEventHandler<HTMLElement>`                                                                                                                               | -            | Действие по фокусу                                                                                                                           |
 | `onBlur?`                                             | `React.FocusEventHandler<HTMLElement>`                                                                                                                               | -            | Действие при потере фокуса                                                                                                                   |
 | `autoComplete?`                                       | [`AutoCompete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)                                                                           | -            | Автозаполнение поля ввода — аналог HTML-атрибута [`autocomplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) |
+| `onClear?`                                            | `React.MouseEventHandler<HTMLButtonElement>`                                                                                                                         | -            | Функция, которая определяет, как будет удалено значение из поля                                                                              |
 | `onChange?`                                           | `(value: string`<code>&#124;</code>`null, params: {e: React.ChangeEvent; id?: string, number; name?: string; }) => void;`                                            | -            | Действие при изменении текстового поля                                                                                                       |
 | `className?`                                          | `string`                                                                                                                                                             | -            | Дополнительный CSS-класс                                                                                                                     |
 | `inputRef?`                                           | `React.Ref<HTMLTextAreaElement` <code>&#124;</code> `HTMLInputElement>`                                                                                              | -            | Ссылка на DOM-элемент поля ввода                                                                                                             |

diff --git a/src/components/TextField/__stand__/examples/TextFieldExampleMask/TextFieldExampleMask.tsx b/src/components/TextField/__stand__/examples/TextFieldExampleMask/TextFieldExampleMask.tsx
@@ -157,6 +157,8 @@ export const TextFieldExampleMaskSetValue = () => {
             placeholder="+7(999)999-99-99"
             inputRef={ref}
             defaultValue={defaultValue}
+            withClearButton
+            onClear={() => setValue('')}
           />
           <Button
             iconLeft={IconRevert}

diff --git a/src/components/TextField/types.ts b/src/components/TextField/types.ts
@@ -117,6 +117,7 @@ export type TextFieldProps<TYPE extends string> = PropsWithHTMLAttributes<
     onKeyUp?: React.KeyboardEventHandler;
     onKeyUpCapture?: React.KeyboardEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
+    onClear?: React.MouseEventHandler<HTMLButtonElement>;
   },
   HTMLDivElement
 > &