Convert the developer options screen to Compose

woocommerce · Dec 2, 2024 · 010ba46 · 010ba46
1 parent 771e7d8
commit 010ba46
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 324 deletions.
diff --git a/...rce/src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsAdapter.kt b/...rce/src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsAdapter.kt
diff --git a/...ce/src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsFragment.kt b/...ce/src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsFragment.kt
@@ -2,40 +2,34 @@ package com.woocommerce.android.ui.prefs.developer
 
 import android.os.Bundle
 import android.view.ContextThemeWrapper
+import android.view.LayoutInflater
 import android.view.View
+import android.view.ViewGroup
 import androidx.fragment.app.viewModels
-import androidx.recyclerview.widget.DividerItemDecoration
-import androidx.recyclerview.widget.LinearLayoutManager
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.woocommerce.android.R
-import com.woocommerce.android.databinding.FragmentDeveloperOptionsBinding
 import com.woocommerce.android.ui.base.BaseFragment
+import com.woocommerce.android.ui.compose.composeView
 import com.woocommerce.android.ui.prefs.developer.DeveloperOptionsViewModel.DeveloperOptionsViewState.UpdateFrequencyUiModel
 import dagger.hilt.android.AndroidEntryPoint
 import org.wordpress.android.util.ToastUtils
 
 @AndroidEntryPoint
-class DeveloperOptionsFragment : BaseFragment(R.layout.fragment_developer_options) {
+class DeveloperOptionsFragment : BaseFragment() {
     val viewModel: DeveloperOptionsViewModel by viewModels()
 
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
+        return composeView {
+            DeveloperOptionsScreen(viewModel)
+        }
+    }
+
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
 
-        val binding = FragmentDeveloperOptionsBinding.bind(view)
-
-        initViews(binding)
-        observeViewState(binding)
         observeEvents()
     }
 
-    private fun initViews(binding: FragmentDeveloperOptionsBinding) {
-        binding.developerOptionsRv.layoutManager = LinearLayoutManager(requireContext())
-        binding.developerOptionsRv.addItemDecoration(
-            DividerItemDecoration(requireContext(), DividerItemDecoration.VERTICAL)
-        )
-        binding.developerOptionsRv.adapter = DeveloperOptionsAdapter()
-    }
-
     private fun observeEvents() {
         viewModel.event.observe(
             viewLifecycleOwner
@@ -44,6 +38,7 @@ class DeveloperOptionsFragment : BaseFragment(R.layout.fragment_developer_option
                 is DeveloperOptionsViewModel.DeveloperOptionsEvents.ShowToastString -> {
                     ToastUtils.showToast(context, event.message)
                 }
+
                 is DeveloperOptionsViewModel.DeveloperOptionsEvents.ShowUpdateOptionsDialog -> {
                     showUpdateOptionsDialog(
                         values = event.options,
@@ -76,11 +71,5 @@ class DeveloperOptionsFragment : BaseFragment(R.layout.fragment_developer_option
             }.show()
     }
 
-    private fun observeViewState(binding: FragmentDeveloperOptionsBinding) {
-        viewModel.viewState.observe(viewLifecycleOwner) { state ->
-            (binding.developerOptionsRv.adapter as DeveloperOptionsAdapter).setItems(state.rows)
-        }
-    }
-
     override fun getFragmentTitle() = resources.getString(R.string.dev_options)
 }
diff --git a/...erce/src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsScreen.kt b/...erce/src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsScreen.kt
@@ -0,0 +1,118 @@
+package com.woocommerce.android.ui.prefs.developer
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material.Divider
+import androidx.compose.material.Icon
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Switch
+import androidx.compose.material.SwitchDefaults
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.livedata.observeAsState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.woocommerce.android.ui.compose.component.getText
+import com.woocommerce.android.ui.prefs.developer.DeveloperOptionsViewModel.DeveloperOptionsViewState
+
+@Composable
+fun DeveloperOptionsScreen(viewModel: DeveloperOptionsViewModel) {
+    viewModel.viewState.observeAsState().value?.let {
+        DeveloperOptionsScreen(it)
+    }
+}
+
+@Composable
+fun DeveloperOptionsScreen(viewState: DeveloperOptionsViewState) {
+    LazyColumn {
+        items(viewState.rows) { row ->
+            when (row) {
+                is DeveloperOptionsViewState.ListItem.ToggleableListItem -> {
+                    ToggleableListItem(row)
+                }
+
+                is DeveloperOptionsViewState.ListItem.NonToggleableListItem -> {
+                    NonToggleableListItem(row)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun ToggleableListItem(
+    item: DeveloperOptionsViewState.ListItem.ToggleableListItem,
+    modifier: Modifier = Modifier
+) {
+    CommonItemLayout(item, modifier.clickable { item.onToggled(!item.isChecked) }) {
+        Switch(
+            checked = item.isChecked,
+            onCheckedChange = item.onToggled,
+            colors = SwitchDefaults.colors(checkedThumbColor = MaterialTheme.colors.primary)
+        )
+    }
+}
+
+@Composable
+private fun NonToggleableListItem(
+    item: DeveloperOptionsViewState.ListItem.NonToggleableListItem,
+    modifier: Modifier = Modifier
+) {
+    CommonItemLayout(item, modifier.clickable { item.onClick() }) {
+        item.endIcon?.let {
+            Icon(
+                painter = painterResource(id = it),
+                contentDescription = null
+            )
+        }
+    }
+}
+
+@Composable
+private fun CommonItemLayout(
+    item: DeveloperOptionsViewState.ListItem,
+    modifier: Modifier = Modifier,
+    additionalContent: (@Composable () -> Unit)? = null,
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .background(MaterialTheme.colors.surface)
+    ) {
+        Row(
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            modifier = Modifier.padding(16.dp)
+        ) {
+            Image(
+                painter = painterResource(item.icon),
+                contentDescription = null,
+                colorFilter = item.iconTint?.let { ColorFilter.tint(colorResource(id = it)) },
+                modifier = Modifier
+                    .size(84.dp)
+            )
+
+            Text(
+                text = item.label.getText(),
+                modifier = Modifier.weight(1f)
+            )
+
+            additionalContent?.invoke()
+        }
+
+        Divider()
+    }
+}
diff --git a/.../src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsViewHolder.kt b/.../src/main/kotlin/com/woocommerce/android/ui/prefs/developer/DeveloperOptionsViewHolder.kt