input-mask-compose
Biblioteka dlia formatirovaniia vvodimykh pol'zovatelem znachenii s podderzhkoi Compose Multiplatform.
Ispol'zovanie
sourceSets {
commonMain {
dependencies {
implementation("io.github.skeptick.inputmask:inputmask-core:0.0.7")
implementation("io.github.skeptick.inputmask:inputmask-compose:0.0.7")
}
}
}
}
Podderzhivaemye platformy
core podderzhivaet vse targety Kotlin, compose vse targety Compose Multiplatform.
Ideia
Sintaksis masok vdokhnovlion nebezyzvestnoi bibliotekoi ot RedMadRobot (
Android,
iOS
), no realizatsiia gorazdo bolee primitivnaia. V chastnosti, ne podderzhivaiutsia
<
Ob'iavlenie masok
Detal'nee v dokumentatsii RedMadRobot.
Verkhneurovnevo:
- v
[]opisyvaem to, chto ozhidaem ot pol'zovatelia - v
{}liubye simvoly, kotorye khotim poluchit' v izvlekaemom znachenii - vse simvoly za predelami
[]i{}budut vstavleny v protsesse formatirovaniia, no ne popadut v izvlekaemoe znachenie
V [] podderzhivaiutsia sleduiushchie simvoly:
0- obiazatel'naia tsifra9- optsional'naia tsifraA- obiazatel'naia bukvaa- optsional'naia bukva_- obiazatel'naia bukva ili tsifra-- optsional'naia bukva ili tsifra...- neogranichennoe kolichestvo tsifr ili bukv- esli pered
...stoit0ili9, to budut ozhidat'sia tsifrovye simvoly - esli pered
...stoitAilia, to budut ozhidat'sia bukvennye simvoly - esli pered
...stoit_ili-, ili ne stoit nichego, to budut ozhidat'sia bukvy ili tsifry
- esli pered
Sozdanie maski
Podderzhivaetsia sozdanie s pomoshch'iu prostogo DSL:
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) }
}
Ispol'zovanie
result.isComplete // -> true
result.formattedValue // -> +7 (900) 123-4567
result.extractedValue // -> 79001234567
Obratite vnimanie na parametr replacePrefix:
inputMask.format("79001234567", replacePrefix = false) // => "+7 (790) 012-3456"
Ispol'zovanie v Compose
Artefakt compose postavliaet imlementatsii VisualTransformation dlia TextField prinimaiushchikh String ili TextFieldValue:
val visualTransformation = rememberInputMaskVisualTransformation("[000]-[000]")
BasicTextField(
value = text,
onValueChange = { text = visualTransformation.sanitize(it) },
visualTransformation = visualTransformation,
)
Spetsial'naia variatsiia dlia formatirovaniia telefona, obrabatyvaiushchaia vstavku v pole vvoda nomera kak s kodom strany, tak i bez:
val mask = "+{7} ([000]) [000]-[0000]"
val visualTransformation = rememberPhoneInputMaskVisualTransformation(mask)
BasicTextField(
value = value,
onValueChange = { text = visualTransformation.sanitize(it) },
visualTransformation = visualTransformation,
)
Obratite vnimanie, chto esli maska mozhet izmenit'sia v protsesse vvoda (naprimer, pol'zovateliu predostavliaetsia vozmozhnost' vybrat' stranu vo vremia avtorizatsii), to nuzhno takzhe obnovit' znachenie:
value = remember(text, mask) { visualTransformation.sanitize(value) },
// ...
)
Dlia polei vvoda, postroennykh vokrug TextFieldState est' implementatsii InputTransformation i OutputTransformation:
val mask = "[000]-[000]"
BasicTextField(
state = textFieldState,
inputTransformation = rememberInputMaskInputTransformation(mask),
outputTransformation = rememberInputMaskOutputTransformation(mask),
)
I spetsial'naia variatsiia InputTransformation dlia telefonnykh nomerov:
// ...
inputTransformation = rememberPhoneInputMaskInputTransformation(mask),
// ...
)