-
Notifications
You must be signed in to change notification settings - Fork 391
/
NumberInput.tsx
35 lines (30 loc) · 1.12 KB
/
NumberInput.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React from 'react'
import {TextInput} from '@sanity/ui'
import {getValidationRule} from '../utils/getValidationRule'
import {NumberInputProps} from '../types'
/**
* @beta
*/
export function NumberInput(props: NumberInputProps) {
const {schemaType, validationError, value, elementProps} = props
// Show numpad on mobile if only positive numbers is preferred
const minRule = getValidationRule(schemaType, 'min')
const integerRule = getValidationRule(schemaType, 'integer')
const precisionRule = getValidationRule(schemaType, 'precision')
const onlyPositiveNumber = typeof minRule?.constraint === 'number' && minRule?.constraint >= 0
const onlyIntegers = integerRule || precisionRule?.constraint === 0
// eslint-disable-next-line no-nested-ternary
const inputMode = onlyPositiveNumber ? (onlyIntegers ? 'numeric' : 'decimal') : 'text'
return (
<TextInput
{...elementProps}
type="number"
step="any"
inputMode={inputMode}
customValidity={validationError}
value={value}
placeholder={schemaType.placeholder}
pattern={onlyPositiveNumber ? '[d]*' : undefined}
/>
)
}