fix: rename props and onMouseDown

gravity-ui · Oct 21, 2024 · a959902 · a959902
1 parent c9643fc
commit a959902
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 deletions.
diff --git a/src/components/controls/PasswordInput/PasswordInput.tsx b/src/components/controls/PasswordInput/PasswordInput.tsx
@@ -25,10 +25,10 @@ export type PasswordInputProps = Omit<TextInputProps, 'type'> & {
     showCopyButton?: boolean;
     /** Show reveal button */
     showRevealButton?: boolean;
-    /** Disable the tooltip for the copy button. The tooltip will not be displayed */
-    hasCopyTooltip?: boolean;
-    /** Disable the tooltip for the reveal button. The tooltip will not be displayed */
-    hasRevealTooltip?: boolean;
+    /** Determines whether to display the tooltip for the copy button */
+    showCopyTooltip?: boolean;
+    /** Determines whether to display the tooltip for the reveal button */
+    showRevealTooltip?: boolean;
     /** Determines the visibility state of the password input field */
     revealValue?: boolean;
     /** A callback function that is invoked whenever the revealValue state changes */
@@ -43,8 +43,8 @@ export const PasswordInput = (props: PasswordInputProps) => {
         endContent,
         showRevealButton,
         size = 'm',
-        hasCopyTooltip = true,
-        hasRevealTooltip = true,
+        showCopyTooltip,
+        showRevealTooltip,
         controlProps,
     } = props;
 
@@ -62,37 +62,33 @@ export const PasswordInput = (props: PasswordInputProps) => {
 
     const {actionButtonSize, iconSize} = getActionButtonSizeAndIconSize(size);
 
-    const onClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
-        event.preventDefault();
-        setRevealValue(!revealValue);
-    };
-
     const additionalEndContent = (
         <React.Fragment>
             {endContent || rightContent}
             {inputValue && showCopyButton && !props.disabled ? (
                 <ClipboardButton
                     view="flat-secondary"
                     text={inputValue}
-                    hasTooltip={hasCopyTooltip}
+                    hasTooltip={showCopyTooltip}
                     size={actionButtonSize}
                     className={b('copy-button')}
                 />
             ) : null}
             {showRevealButton ? (
                 <ActionTooltip
-                    disabled={!hasRevealTooltip}
+                    disabled={!showRevealTooltip}
                     title={revealValue ? i18n('label_hide-password') : i18n('label_show-password')}
                 >
                     <Button
                         view="flat-secondary"
                         disabled={props.disabled}
-                        onClick={onClick}
+                        onClick={() => setRevealValue(!revealValue)}
                         size={actionButtonSize}
                         extraProps={{
                             'aria-label': revealValue
                                 ? i18n('label_hide-password')
                                 : i18n('label_show-password'),
+                            onMouseDown: (event: React.SyntheticEvent) => event.preventDefault(),
                         }}
                     >
                         <Icon data={revealValue ? EyeSlash : Eye} size={iconSize} />

diff --git a/src/components/controls/PasswordInput/README.md b/src/components/controls/PasswordInput/README.md
@@ -40,14 +40,14 @@ LANDING_BLOCK-->
 
 - `type` is omitted;
 
-| Name                | Description                                                                  |    Type    | Default |
-| :------------------ | :--------------------------------------------------------------------------- | :--------: | :-----: |
-| showCopyButton      | Show copy button                                                             | `boolean`  | `false` |
-| showRevealButton    | Show reveal button                                                           | `boolean`  | `false` |
-| hasCopyTooltip      | Disable the tooltip for the copy button. The tooltip will not be displayed   | `boolean`  | `true`  |
-| hasRevealTooltip    | Disable the tooltip for the reveal button. The tooltip will not be displayed | `boolean`  | `true`  |
-| revealValue         | Determines the visibility state of the password input field                  | `boolean`  | `false` |
-| onRevealValueUpdate | A callback function that is invoked whenever the revealValue state changes   | `function` |         |
+| Name                | Description                                                                |    Type    | Default |
+| :------------------ | :------------------------------------------------------------------------- | :--------: | :-----: |
+| showCopyButton      | Show copy button                                                           | `boolean`  | `false` |
+| showRevealButton    | Show reveal button                                                         | `boolean`  | `false` |
+| showCopyTooltip     | Determines whether to display the tooltip for the copy button              | `boolean`  | `false` |
+| showRevealTooltip   | Determines whether to display the tooltip for the reveal button            | `boolean`  | `false` |
+| revealValue         | Determines the visibility state of the password input field                | `boolean`  | `false` |
+| onRevealValueUpdate | A callback function that is invoked whenever the revealValue state changes | `function` |         |
 
 <!--GITHUB_BLOCK-->