ant-design/components/input/demo/advance-count.tsx

45 lines
1007 B
TypeScript
Raw Normal View History

import React from 'react';
import { Flex, Input, Typography } from 'antd';
import { runes } from 'runes2';
const App: React.FC = () => (
<Flex vertical gap={16}>
<div>
<Typography.Title level={5}>Exceed Max</Typography.Title>
<Input
count={{
show: true,
max: 10,
}}
defaultValue="Hello, antd!"
/>
</div>
<div>
<Typography.Title level={5}>Emoji count as length 1</Typography.Title>
<Input
count={{
show: true,
strategy: (txt) => runes(txt).length,
}}
defaultValue="🔥🔥🔥"
/>
</div>
<div>
<Typography.Title level={5}>Not exceed max</Typography.Title>
<Input
count={{
show: true,
max: 6,
strategy: (txt) => runes(txt).length,
exceedFormatter: (txt, { max }) => runes(txt).slice(0, max).join(''),
}}
defaultValue="🔥 antd"
/>
</div>
</Flex>
);
export default App;