ant-design/components/qr-code/demo/customSize.tsx
lijianan 739362345c
fix: adjust the order of QRCode style prop ()
* fix: adjust the order of style prop

* test: update snap

* test: add test case
2024-03-25 10:59:44 +08:00

53 lines
1.2 KiB
TypeScript

import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, QRCode } from 'antd';
const MIN_SIZE = 48;
const MAX_SIZE = 300;
const App: React.FC = () => {
const [size, setSize] = useState<number>(160);
const increase = () => {
setSize((prevSize) => {
const newSize = prevSize + 10;
if (newSize >= MAX_SIZE) {
return MAX_SIZE;
}
return newSize;
});
};
const decline = () => {
setSize((prevSize) => {
const newSize = prevSize - 10;
if (newSize <= MIN_SIZE) {
return MIN_SIZE;
}
return newSize;
});
};
return (
<>
<Button.Group style={{ marginBottom: 16 }}>
<Button onClick={decline} disabled={size <= MIN_SIZE} icon={<MinusOutlined />}>
Smaller
</Button>
<Button onClick={increase} disabled={size >= MAX_SIZE} icon={<PlusOutlined />}>
Larger
</Button>
</Button.Group>
<QRCode
errorLevel="H"
size={size}
iconSize={size / 4}
value="https://ant.design/"
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
/>
</>
);
};
export default App;