feat: add EditTextPreference byte counter

app/src/main/java/com/geeksville/mesh/ui/DeviceSettingsItemList.kt

@@ -71,6 +71,7 @@ fun DeviceSettingsItemList(viewModel: UIViewModel = viewModel()) {
         item {
             EditTextPreference(title = "Long name",
                 value = userInput?.longName ?: stringResource(id = R.string.unknown_username),
+                maxSize = 39, // long_name max_size:40
                 enabled = connected && userInput?.longName != null,
                 isError = userInput?.longName.isNullOrEmpty(),
                 keyboardOptions = KeyboardOptions.Default.copy(
@@ -78,8 +79,7 @@ fun DeviceSettingsItemList(viewModel: UIViewModel = viewModel()) {
                 ),
                 keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
                 onValueChanged = { value ->
-                    if (value.toByteArray().size <= 39) // long_name max_size:40
-                        userInput?.let { userInput = it.copy(longName = value) }
+                    userInput?.let { userInput = it.copy(longName = value) }
                     if (getInitials(value).toByteArray().size <= 4) // short_name max_size:5
                         userInput?.let { userInput = it.copy(shortName = getInitials(value)) }
                 })
@@ -88,6 +88,7 @@ fun DeviceSettingsItemList(viewModel: UIViewModel = viewModel()) {
         item {
             EditTextPreference(title = "Short name",
                 value = userInput?.shortName ?: stringResource(id = R.string.unknown),
+                maxSize = 4, // short_name max_size:5
                 enabled = connected && userInput?.shortName != null,
                 isError = userInput?.shortName.isNullOrEmpty(),
                 keyboardOptions = KeyboardOptions.Default.copy(
@@ -95,8 +96,7 @@ fun DeviceSettingsItemList(viewModel: UIViewModel = viewModel()) {
                 ),
                 keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
                 onValueChanged = { value ->
-                    if (value.toByteArray().size <= 4) // short_name max_size:5
-                        userInput?.let { userInput = it.copy(shortName = value) }
+                    userInput?.let { userInput = it.copy(shortName = value) }
                 })
         }
 
@@ -436,60 +436,60 @@ fun DeviceSettingsItemList(viewModel: UIViewModel = viewModel()) {
         item {
             EditTextPreference(title = "SSID",
                 value = networkInput.wifiSsid,
+                maxSize = 32, // wifi_ssid max_size:33
                 enabled = connected && hasWifi,
                 isError = false,
                 keyboardOptions = KeyboardOptions.Default.copy(
                     keyboardType = KeyboardType.Text, imeAction = ImeAction.Done
                 ),
                 keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
-                onValueChanged = { value ->
-                    if (value.toByteArray().size <= 32) // wifi_ssid max_size:33
-                        networkInput = networkInput.copy { wifiSsid = value }
+                onValueChanged = {
+                    networkInput = networkInput.copy { wifiSsid = it }
                 })
         }
 
         item {
             EditTextPreference(title = "PSK",
                 value = networkInput.wifiPsk,
+                maxSize = 63, // wifi_psk max_size:64
                 enabled = connected && hasWifi,
                 isError = false,
                 keyboardOptions = KeyboardOptions.Default.copy(
                     keyboardType = KeyboardType.Password, imeAction = ImeAction.Done
                 ),
                 keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
-                onValueChanged = { value ->
-                    if (value.toByteArray().size <= 63) // wifi_psk max_size:64
-                        networkInput = networkInput.copy { wifiPsk = value }
+                onValueChanged = {
+                    networkInput = networkInput.copy { wifiPsk = it }
                 })
         }
 
         item {
             EditTextPreference(title = "NTP server",
                 value = networkInput.ntpServer,
+                maxSize = 32, // ntp_server max_size:33
                 enabled = connected && hasWifi,
                 isError = networkInput.ntpServer.isEmpty(),
                 keyboardOptions = KeyboardOptions.Default.copy(
                     keyboardType = KeyboardType.Uri, imeAction = ImeAction.Done
                 ),
                 keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
-                onValueChanged = { value ->
-                    if (value.toByteArray().size <= 32) // ntp_server max_size:33
-                        networkInput = networkInput.copy { ntpServer = value }
+                onValueChanged = {
+                    networkInput = networkInput.copy { ntpServer = it }
                 })
         }
 
         item {
             EditTextPreference(title = "rsyslog server",
                 value = networkInput.rsyslogServer,
+                maxSize = 32, // rsyslog_server max_size:33
                 enabled = connected && hasWifi,
                 isError = false,
                 keyboardOptions = KeyboardOptions.Default.copy(
                     keyboardType = KeyboardType.Uri, imeAction = ImeAction.Done
                 ),
                 keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
-                onValueChanged = { value ->
-                    if (value.toByteArray().size <= 32) // rsyslog_server max_size:33
-                        networkInput = networkInput.copy { rsyslogServer = value }
+                onValueChanged = {
+                    networkInput = networkInput.copy { rsyslogServer = it }
                 })
         }
 

app/src/main/java/com/geeksville/mesh/ui/components/EditTextPreference.kt

@@ -1,7 +1,9 @@
 package com.geeksville.mesh.ui.components
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.Icon
@@ -15,10 +17,13 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusEvent
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 
 @Composable
 fun EditTextPreference(
@@ -166,14 +171,25 @@ fun EditTextPreference(
     keyboardActions: KeyboardActions,
     onValueChanged: (String) -> Unit,
     modifier: Modifier = Modifier,
+    maxSize: Int = 0, // max_size - 1 (in bytes)
 ) {
+    var isFocused by remember { mutableStateOf(false) }
+
     TextField(
         value = value,
         singleLine = true,
-        modifier = modifier.fillMaxWidth(),
+        modifier = modifier
+            .fillMaxWidth()
+            .onFocusEvent { isFocused = it.isFocused },
         enabled = enabled,
         isError = isError,
-        onValueChange = onValueChanged,
+        onValueChange = {
+            if (maxSize > 0) {
+                if (it.toByteArray().size <= maxSize) {
+                    onValueChanged(it)
+                }
+            } else onValueChanged(it)
+        },
         label = { Text(title) },
         keyboardOptions = keyboardOptions,
         keyboardActions = keyboardActions,
@@ -181,12 +197,36 @@ fun EditTextPreference(
             if (isError) Icon(Icons.TwoTone.Info, "Error", tint = MaterialTheme.colors.error)
         }
     )
+
+    if (maxSize > 0 && isFocused) {
+        Box(
+            contentAlignment = Alignment.BottomEnd,
+            modifier = modifier.fillMaxWidth()
+        ) {
+            Text(
+                text = "${value.toByteArray().size}/$maxSize",
+                style = MaterialTheme.typography.caption,
+                color = if (isError) MaterialTheme.colors.error else MaterialTheme.colors.onBackground,
+                modifier = Modifier.padding(end = 8.dp, bottom = 4.dp)
+            )
+        }
+    }
 }
 
 @Preview(showBackground = true)
 @Composable
 private fun EditTextPreferencePreview() {
     Column {
+        EditTextPreference(
+            title = "String",
+            value = "Meshtastic",
+            maxSize = 39,
+            enabled = true,
+            isError = false,
+            keyboardOptions = KeyboardOptions.Default,
+            keyboardActions = KeyboardActions {},
+            onValueChanged = {},
+        )
         EditTextPreference(
             title = "Advanced Settings",
             value = UInt.MAX_VALUE.toInt(),