From 4e471db343709952a06095992deb305ba5862ba4 Mon Sep 17 00:00:00 2001
From: TDiDa <>
Date: Fri, 6 Mar 2020 23:19:41 +0800
Subject: [PATCH 1/2] fix: Input.Password ConfigProvider prefixCls not work

---
 components/input/Password.tsx | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/input/Password.tsx b/components/input/Password.tsx
index 5d80c472d229..e3b3ae4fe386 100644
--- a/components/input/Password.tsx
+++ b/components/input/Password.tsx
@@ -4,6 +4,7 @@ import omit from 'omit.js';
 import EyeOutlined from '@ant-design/icons/EyeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
 
+import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import Input, { InputProps } from './Input';
 
 export interface PasswordProps extends InputProps {
@@ -25,8 +26,6 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
   input: HTMLInputElement;
 
   static defaultProps = {
-    inputPrefixCls: 'ant-input',
-    prefixCls: 'ant-input-password',
     action: 'click',
     visibilityToggle: true,
   };
@@ -44,8 +43,8 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
     this.setState(({ visible }) => ({ visible: !visible }));
   };
 
-  getIcon() {
-    const { prefixCls, action } = this.props;
+  getIcon = (prefixCls: string) => {
+    const { action } = this.props;
     const iconTrigger = ActionMap[action!] || '';
     const icon = this.state.visible ? EyeOutlined : EyeInvisibleOutlined;
     const iconProps = {
@@ -59,7 +58,7 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
       },
     };
     return React.createElement(icon, iconProps);
-  }
+  };
 
   saveInput = (instance: Input) => {
     if (instance && instance.input) {
@@ -79,19 +78,24 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
     this.input.select();
   }
 
-  render() {
+  renderPassword = ({ getPrefixCls }: ConfigConsumerProps) => {
     const {
       className,
-      prefixCls,
-      inputPrefixCls,
+      prefixCls: customizePrefixCls,
+      inputPrefixCls: customizeInputPrefixCls,
       size,
       visibilityToggle,
       ...restProps
     } = this.props;
-    const suffixIcon = visibilityToggle && this.getIcon();
+
+    const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
+    const prefixCls = getPrefixCls('input-password', customizePrefixCls);
+
+    const suffixIcon = visibilityToggle && this.getIcon(prefixCls);
     const inputClassName = classNames(prefixCls, className, {
       [`${prefixCls}-${size}`]: !!size,
     });
+
     const props = {
       ...omit(restProps, ['suffix']),
       type: this.state.visible ? 'text' : 'password',
@@ -100,9 +104,15 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
       suffix: suffixIcon,
       ref: this.saveInput,
     };
+
     if (size) {
       props.size = size;
     }
+
     return <Input {...props} />;
+  };
+
+  render() {
+    return <ConfigConsumer>{this.renderPassword}</ConfigConsumer>;
   }
 }

From e5f917dcc6f6a4afc51c38cf8d0223fb58dd9dae Mon Sep 17 00:00:00 2001
From: TDiDa <>
Date: Sat, 7 Mar 2020 00:15:12 +0800
Subject: [PATCH 2/2] test: add ConfigProvider Input.Password test

---
 .../__snapshots__/components.test.js.snap     | 114 ++++++++++++++++++
 .../__tests__/components.test.js              |   1 +
 2 files changed, 115 insertions(+)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 48aa062fc13b..b3106dce12d7 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -7155,6 +7155,44 @@ exports[`ConfigProvider components Input configProvider 1`] = `
       </span>
     </span>
   </span>
+  <span
+    class="config-input-password config-input-affix-wrapper"
+  >
+    <input
+      action="click"
+      class="config-input"
+      type="password"
+      value=""
+    />
+    <span
+      class="config-input-suffix"
+    >
+      <span
+        aria-label="eye-invisible"
+        class="anticon anticon-eye-invisible config-input-password-icon"
+        role="img"
+        tabindex="-1"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="eye-invisible"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+          />
+          <path
+            d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+          />
+        </svg>
+      </span>
+    </span>
+  </span>
   <textarea
     class="config-input"
   />
@@ -7206,6 +7244,44 @@ exports[`ConfigProvider components Input normal 1`] = `
       </span>
     </span>
   </span>
+  <span
+    class="ant-input-password ant-input-affix-wrapper"
+  >
+    <input
+      action="click"
+      class="ant-input"
+      type="password"
+      value=""
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        aria-label="eye-invisible"
+        class="anticon anticon-eye-invisible ant-input-password-icon"
+        role="img"
+        tabindex="-1"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="eye-invisible"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+          />
+          <path
+            d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+          />
+        </svg>
+      </span>
+    </span>
+  </span>
   <textarea
     class="ant-input"
   />
@@ -7257,6 +7333,44 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
       </span>
     </span>
   </span>
+  <span
+    class="prefix-Input ant-input-affix-wrapper"
+  >
+    <input
+      action="click"
+      class="ant-input"
+      type="password"
+      value=""
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        aria-label="eye-invisible"
+        class="anticon anticon-eye-invisible prefix-Input-icon"
+        role="img"
+        tabindex="-1"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="eye-invisible"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+          />
+          <path
+            d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+          />
+        </svg>
+      </span>
+    </span>
+  </span>
   <textarea
     class="prefix-Input"
   />
diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
index 6992178bfbb1..bf60dd44d65b 100644
--- a/components/config-provider/__tests__/components.test.js
+++ b/components/config-provider/__tests__/components.test.js
@@ -290,6 +290,7 @@ describe('ConfigProvider', () => {
           <Input {...props} />
           <Input.Search {...props} />
         </Input.Group>
+        <Input.Password {...props} />
         <Input.TextArea {...props} />
       </div>
     ));