:OCChip Composable Component

:How to use OCChip Composable Component

OCChip is a flexible chip component tailored for Jetpack Compose, designed to represent different types of chips - Choice, Input, Action, and Filter. It offers customization through its parameters, allowing users to modify its appearance and behavior.

Usage 🔑

1. Import the necessary components: Ensure you've imported the required Composables and other necessary components at the top of your Kotlin file.

`import androidx.compose.runtime.*
import androidx.compose.ui.*`
// ... other required imports

2. Use the OCChip Composable:
   In your UI, you can then add the OCChip composable:
   `@Composable
   fun YourComposableFunction() {`
   // ... start

   OCChip(
   label = "Your Label",
   chipType = YourChipType(),
   selectedState = YourState,
   onStateChange = { /* handle state change */ },🔑
   onClickCloseButton = { /* handle close button click */ }
   )

   // ... rest of code
   `}`

Parameters:

label: String: The label displayed on the chip. chipType: OCChipType: Specifies the type of chip. It can be one of the following: Choice, Input, Action, or Filter. selectedState: OCChipStates: The current state of the chip. This state dictates how the chip will be displayed. onStateChange: (OCChipStates) -> Unit: A lambda function that receives the new state of the chip when it's changed. onClickCloseButton: () -> Unit: A lambda function that's invoked when the close button of the chip is clicked (relevant for the Input chip type). It defaults to an empty lambda.

Interaction:

In the example below, there is a button that toggles the state of the chip. When clicked, it checks the current state of the chip and updates it accordingly.

`Button(onClick = {
currentChipState = if (currentChipState == OCChipStates.Disabled) {
OCChipStates.Selected
} else {
OCChipStates.Disabled
}
}) {
Text(text = "Toggle Chip State")
}`
The button's click listener (onClick) contains logic to toggle the chip's state between Selected and Disabled.

Full Example:

The following example demonstrates how to use the OCChip composable within an OCTheme:

🪄🪄🪄🪄🪄🪄🪄🪄

`@Composable
fun ChipDemo() {
var currentChipState by remember { mutableStateOf(OCChipStates.Selected) }`

    OCTheme {
        Column {
            OCChip(
                label = "Hamburger",
                chipType = Action(),
                selectedState = currentChipState,
                onStateChange = { newState ->
                    currentChipState = newState
                },
                onClickCloseButton = {}
            )

            Button(onClick = { 
                currentChipState = if (currentChipState == OCChipStates.Disabled) {
                    OCChipStates.Selected
                } else {
                    OCChipStates.Disabled
                }
            }) {
                Text(text = "Toggle Chip State")
            }
        }
    }
`}`