ant-design/components/input/demo/otp.tsx
lijianan c3777d2cfa
refactor: rewrite renderSeparator to FC (#52841)
* refactor: rewrite renderSeparator to FC

* refactor: rewrite renderSeparator to FC

* refactor: rewrite renderSeparator to FC

* fix: fix
2025-02-19 09:19:23 +08:00

47 lines
1.4 KiB
TypeScript

import React from 'react';
import { Flex, Input, Typography } from 'antd';
import type { GetProps } from 'antd';
type OTPProps = GetProps<typeof Input.OTP>;
const { Title } = Typography;
const App: React.FC = () => {
const onChange: OTPProps['onChange'] = (text) => {
console.log('onChange:', text);
};
const onInput: OTPProps['onInput'] = (value) => {
console.log('onInput:', value);
};
const sharedProps: OTPProps = {
onChange,
onInput,
};
return (
<Flex gap="middle" align="flex-start" vertical>
<Title level={5}>With formatter (Upcase)</Title>
<Input.OTP formatter={(str) => str.toUpperCase()} {...sharedProps} />
<Title level={5}>With Disabled</Title>
<Input.OTP disabled {...sharedProps} />
<Title level={5}>With Length (8)</Title>
<Input.OTP length={8} {...sharedProps} />
<Title level={5}>With variant</Title>
<Input.OTP variant="filled" {...sharedProps} />
<Title level={5}>With custom display character</Title>
<Input.OTP mask="🔒" {...sharedProps} />
<Title level={5}>With custom ReactNode separator</Title>
<Input.OTP separator={<span>/</span>} {...sharedProps} />
<Title level={5}>With custom function separator</Title>
<Input.OTP
separator={(i) => <span style={{ color: i & 1 ? 'red' : 'blue' }}></span>}
{...sharedProps}
/>
</Flex>
);
};
export default App;