Formats user input values using customizable masks with syntax inspired by RedMadRobot. Supports mask creation with DSL, visual transformations for text fields, and phone number formatting.
Библиотека для форматирования вводимых пользователем значений с поддержкой Compose Multiplatform.
kotlin {
sourceSets {
commonMain {
dependencies {
implementation("io.github.skeptick.inputmask:inputmask-core:0.0.7")
implementation("io.github.skeptick.inputmask:inputmask-compose:0.0.7")
}
}
}
}
core поддерживает все таргеты Kotlin, compose все таргеты Compose Multiplatform.
Синтаксис масок вдохновлён небезызвестной библиотекой от RedMadRobot ( Android, iOS ), но реализация гораздо более примитивная. В частности, не поддерживаются «родственные» маски.
Детальнее в документации RedMadRobot.
Верхнеуровнево:
[] описываем то, что ожидаем от пользователя{} любые символы, которые хотим получить в извлекаемом значении[] и {} будут вставлены в процессе форматирования, но не попадут в извлекаемое значениеВ [] поддерживаются следующие символы:
val inputMask = InputMasks.getOrCreate("+{7} ([000]) [000]-[0000]")
Поддерживается создание с помощью простого DSL:
val inputMask = InputMasks.build {
fixedChar('+', extracted = false)
fixedChar('7', extracted = true)
fixedChar(' ', extracted = )
fixedChar(, extracted = )
repeat() { singleDigit(required = ) }
fixedChar(, extracted = )
fixedChar(, extracted = )
repeat() { singleDigit(required = ) }
fixedChar(, extracted = )
repeat() { singleDigit(required = ) }
}
val result = inputMask.format("9001234567")
result.isComplete // -> true
result.formattedValue // -> +7 (900) 123-4567
result.extractedValue // -> 79001234567
Обратите внимание на параметр replacePrefix:
inputMask.format("79001234567", replacePrefix = true) // => "+7 (900) 123-4567"
inputMask.format("79001234567", replacePrefix = false) // => "+7 (790) 012-3456"
Артефакт compose поставляет имлементации VisualTransformation для TextField принимающих String или TextFieldValue:
var text by remember { mutableStateOf("") }
val visualTransformation = rememberInputMaskVisualTransformation("[000]-[000]")
BasicTextField(
value = text,
onValueChange = { text = visualTransformation.sanitize(it) },
visualTransformation = visualTransformation,
)
Специальная вариация для форматирования телефона, обрабатывающая вставку в поле ввода номера как с кодом страны, так и без:
var text by remember { mutableStateOf("") }
val mask = "+{7} ([000]) [000]-[0000]"
val visualTransformation = rememberPhoneInputMaskVisualTransformation(mask)
BasicTextField(
value = value,
onValueChange = { text = visualTransformation.sanitize(it) },
visualTransformation = visualTransformation,
)
Обратите внимание, что если маска может измениться в процессе ввода (например, пользователю предоставляется возможность выбрать страну во время авторизации), то нужно также обновить значение:
BasicTextField(
value = remember(text, mask) { visualTransformation.sanitize(value) },
// ...
)
Для полей ввода, построенных вокруг TextFieldState есть имплементации InputTransformation и OutputTransformation:
val textFieldState = remember { TextFieldState() }
val mask = "[000]-[000]"
BasicTextField(
state = textFieldState,
inputTransformation = rememberInputMaskInputTransformation(mask),
outputTransformation = rememberInputMaskOutputTransformation(mask),
)
И специальная вариация InputTransformation для телефонных номеров:
BasicTextField(
// ...
inputTransformation = rememberPhoneInputMaskInputTransformation(mask),
// ...
)
0 - обязательная цифра9 - опциональная цифраA - обязательная букваa - опциональная буква_ - обязательная буква или цифра- - опциональная буква или цифра… - неограниченное количество цифр или букв
… стоит 0 или 9, то будут ожидаться цифровые символы… стоит A или a, то будут ожидаться буквенные символы… стоит _ или -, или не стоит ничего, то будут ожидаться буквы или цифрыSurfaced from shared tags and platforms — no rankings paid for.