Skeptick / input-mask-compose

input-mask-compose

Библиотека для форматирования вводимых пользователем значений с поддержкой Compose Multiplatform.

Использование

kotlin {
    sourceSets {
        commonMain {
            dependencies {
                implementation("io.github.skeptick.inputmask:core:0.0.2")
                implementation("io.github.skeptick.inputmask:compose:0.0.2")
            }
        }
    }
}

Поддерживаемые платформы

core поддерживает все таргеты Kotlin-а, compose все таргеты Compose Multiplatform.

Идея

Синтаксис масок вдохновлён небезызвестной библиотекой от RedMadRobot ( Android, iOS ), но реализация гораздо более примитивная. В частности, не поддерживаются «родственные» маски.

Объявление масок

Детальнее в документации RedMadRobot.

Верхнеуровнево:

• в [] описываем то, что ожидаем от пользователя
• в {} любые символы, которые хотим получить в извлекаемом значении
• все символы за пределами [] и {} будут вставлены в процессе форматирования, но не попадут в извлекаемое значение

В [] поддерживаются следующие символы:

• 0 - обязательная цифра
• 9 - опциональная цифра
• A - обязательная буква
• a - опциональная буква
• _ - обязательная буква или цифра
• - - опциональная буква или цифра
• … - неограниченное количество цифр или букв
  • если перед … стоит 0 или 9, то будут ожидаться цифровые символы
  • если перед … стоит A или a, то будут ожидаться буквенные символы
  • если перед … стоит _ или -, или не стоит ничего, то будут ожидаться буквы или цифры

Создание маски

val inputMask = InputMasks.getOrCreate("+{7} ([000]) [000]-[0000]")

Поддерживается создание с помощью простого DSL:

val inputMask = InputMasks.build {
    fixedChar('+', extracted = false)
    fixedChar('7', extracted = true)
    fixedChar(' ', extracted = false)
    fixedChar('(', extracted = false)
    repeat(3) { singleDigit(required = true) }
    fixedChar(')', extracted = false)
    fixedChar(' ', extracted = false)
    repeat(3) { singleDigit(required = true) }
    fixedChar('-', extracted = false)
    repeat(4) { singleDigit(required = true) }
}

Использование

val result = inputMask.format("9001234567")
result.isComplete // -> true
result.formattedValue // -> [phone]
result.extractedValue // -> 79001234567

Обратите внимание на параметр replacePrefix:

inputMask.format("79001234567", replacePrefix = true) // -> [phone]
inputMask.format("79001234567", replacePrefix = false) // -> [phone]

Использование в Compose

Артефакт compose поставляет базовые MaskedTextField и MaskedOutlinedTextField.
Вы также можете использовать свои, вместе с идущим в комплекте InputMaskVisualTransformation:

val mask = "+{7} ([000]) [000]-[0000]"
val visualTransformation = remember(mask) { InputMaskVisualTransformation(mask) }
var value by remember { mutableStateOf("") }

TextField(
    value = value,
    onValueChange = { value = visualTransformation.clear(it) },
    visualTransformation = visualTransformation
)