67 lines
1.6 KiB
JavaScript
67 lines
1.6 KiB
JavaScript
import { Flex, Typography, Tag, Space } from 'antd'
|
|
import PropTypes from 'prop-types'
|
|
|
|
const { Text } = Typography
|
|
|
|
const getPrecision = (step) => {
|
|
if (step == null) return null
|
|
const stepStr = String(step)
|
|
const dotIndex = stepStr.indexOf('.')
|
|
return dotIndex === -1 ? 0 : stepStr.length - dotIndex - 1
|
|
}
|
|
|
|
const formatValue = (value, step) => {
|
|
if (value == null || value === '') return null
|
|
const parsed = parseFloat(value)
|
|
if (Number.isNaN(parsed)) return null
|
|
|
|
const precision = getPrecision(step)
|
|
return precision == null ? parsed.toString() : parsed.toFixed(precision)
|
|
}
|
|
|
|
const MinMaxDisplay = ({ value, prefix = '', suffix = '', step }) => {
|
|
const min = formatValue(value?.min, step)
|
|
const max = formatValue(value?.max, step)
|
|
|
|
return (
|
|
<Flex gap={'middle'} align='center' style={{ height: '100%' }}>
|
|
<Flex wrap>
|
|
<Text style={{ marginRight: 4 }}>
|
|
{min != null ? (
|
|
prefix + min + suffix
|
|
) : (
|
|
<Text type='secondary'>n/a</Text>
|
|
)}
|
|
</Text>
|
|
<Space>
|
|
<Tag>Min</Tag>
|
|
</Space>
|
|
</Flex>
|
|
<Flex wrap>
|
|
<Text style={{ marginRight: 4 }}>
|
|
{max != null ? (
|
|
prefix + max + suffix
|
|
) : (
|
|
<Text type='secondary'>n/a</Text>
|
|
)}
|
|
</Text>
|
|
<Space>
|
|
<Tag>Max</Tag>
|
|
</Space>
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
}
|
|
|
|
MinMaxDisplay.propTypes = {
|
|
value: PropTypes.shape({
|
|
min: PropTypes.number,
|
|
max: PropTypes.number
|
|
}),
|
|
prefix: PropTypes.string,
|
|
suffix: PropTypes.string,
|
|
step: PropTypes.number
|
|
}
|
|
|
|
export default MinMaxDisplay
|