mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-13 07:39:10 +08:00
45 lines
1007 B
TypeScript
45 lines
1007 B
TypeScript
|
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;
|