ant-design/components/input/Password.tsx
二货爱吃白萝卜 45eeee60bb
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: Add unstable api for React 19 compitable (#51979)
* chore: add unstable entrance

* chore: rest of it

* chore: use React 19

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: fix lint

* chore: test ignore 19 preload

* chore: bump rc-util

* fix: warning of pure render

* fix: warning of 19

* chore: adjust ts

* test: fix test logic

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* chore: restore file

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: fix test case

* test: update test

* test: fix test case

* test: update snapshot

* test: fix coverage

* test: fix coverage

* test: add ignore image
2024-12-18 14:09:49 +08:00

144 lines
4.3 KiB
TypeScript

import * as React from 'react';
import { useRef, useState } from 'react';
import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
import EyeOutlined from '@ant-design/icons/EyeOutlined';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import { composeRef } from 'rc-util/lib/ref';
import type { ConfigConsumerProps } from '../config-provider';
import { ConfigContext } from '../config-provider';
import DisabledContext from '../config-provider/DisabledContext';
import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
import type { InputProps, InputRef } from './Input';
import Input from './Input';
const defaultIconRender = (visible: boolean): React.ReactNode =>
visible ? <EyeOutlined /> : <EyeInvisibleOutlined />;
interface VisibilityToggle {
visible?: boolean;
onVisibleChange?: (visible: boolean) => void;
}
export interface PasswordProps extends InputProps {
readonly inputPrefixCls?: string;
readonly action?: 'click' | 'hover';
visibilityToggle?: boolean | VisibilityToggle;
iconRender?: (visible: boolean) => React.ReactNode;
}
const actionMap: Record<PropertyKey, keyof React.DOMAttributes<HTMLSpanElement>> = {
click: 'onClick',
hover: 'onMouseOver',
};
type IconPropsType = React.HTMLAttributes<HTMLSpanElement> & React.Attributes;
const Password = React.forwardRef<InputRef, PasswordProps>((props, ref) => {
const {
disabled: customDisabled,
action = 'click',
visibilityToggle = true,
iconRender = defaultIconRender,
} = props;
// ===================== Disabled =====================
const disabled = React.useContext(DisabledContext);
const mergedDisabled = customDisabled ?? disabled;
const visibilityControlled =
typeof visibilityToggle === 'object' && visibilityToggle.visible !== undefined;
const [visible, setVisible] = useState(() =>
visibilityControlled ? visibilityToggle.visible! : false,
);
const inputRef = useRef<InputRef>(null);
React.useEffect(() => {
if (visibilityControlled) {
setVisible(visibilityToggle.visible!);
}
}, [visibilityControlled, visibilityToggle]);
// Remove Password value
const removePasswordTimeout = useRemovePasswordTimeout(inputRef);
const onVisibleChange = () => {
if (mergedDisabled) {
return;
}
if (visible) {
removePasswordTimeout();
}
const nextVisible = !visible;
setVisible(nextVisible);
if (typeof visibilityToggle === 'object') {
visibilityToggle.onVisibleChange?.(nextVisible);
}
};
const getIcon = (prefixCls: string) => {
const iconTrigger = actionMap[action] || '';
const icon = iconRender(visible);
const iconProps: IconPropsType = {
[iconTrigger]: onVisibleChange,
className: `${prefixCls}-icon`,
key: 'passwordIcon',
onMouseDown: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
// Prevent focused state lost
// https://github.com/ant-design/ant-design/issues/15173
e.preventDefault();
},
onMouseUp: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
// Prevent caret position change
// https://github.com/ant-design/ant-design/issues/23524
e.preventDefault();
},
};
return React.cloneElement<IconPropsType>(
React.isValidElement<IconPropsType>(icon) ? icon : <span>{icon}</span>,
iconProps,
);
};
const {
className,
prefixCls: customizePrefixCls,
inputPrefixCls: customizeInputPrefixCls,
size,
...restProps
} = props;
const { getPrefixCls } = React.useContext<ConfigConsumerProps>(ConfigContext);
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const prefixCls = getPrefixCls('input-password', customizePrefixCls);
const suffixIcon = visibilityToggle && getIcon(prefixCls);
const inputClassName = classNames(prefixCls, className, {
[`${prefixCls}-${size}`]: !!size,
});
const omittedProps: InputProps = {
...omit(restProps, ['suffix', 'iconRender', 'visibilityToggle']),
type: visible ? 'text' : 'password',
className: inputClassName,
prefixCls: inputPrefixCls,
suffix: suffixIcon,
};
if (size) {
omittedProps.size = size;
}
return <Input ref={composeRef(ref, inputRef)} {...omittedProps} />;
});
if (process.env.NODE_ENV !== 'production') {
Password.displayName = 'Input.Password';
}
export default Password;